/* Plus Jakarta Sans — uygulamayla ayni yazi tipi; latin-ext dilimi Turkce harfler icin (İ ğ ş). */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* MeteoMate — tasarim kurallari design.md'den: tek marka mavisi #0172AD, 3 kademe radius
   (8/12/999), tum kartlar ayni kart bileseni, metin kontrasti AA >= 4.5:1, emoji yok.
   Renkler uygulamadaki LightPalette/DarkPalette ile ayni. */

:root {
  --bg:#F4F6F8; --surface:#fff; --surface2:#FBFCFC; --border:#E7EAF0; --border-input:#CFD5E2;
  --text:#373C44; --text-strong:#2D3138; --text-hero:#1E293B; --muted:#646B79; --faint:#7C8492;
  --brand:#0172AD; --brand-soft:#E6F2F9; --on-brand:#fff;
  --green:#15803D; --green-soft:#EAF7EE;
  --warning:#B45309; --warning-soft:#FEF3E2;
  --danger:#B91C1C; --danger-soft:#FEECEC;
  --caution:#7A5A00; --caution-soft:#FFF4C2;
  --shadow:rgba(129,145,181,.16);
  /* Kose yaricapi iki kademe: kutular 12, kucuk rozetler 8. Hap/oval kose (999px)
     sitede KULLANILMAZ — arama kutusu, sehir baglantilari ve butonlar da kartlarla
     ayni yumusak koseyi kullanir (kullanici karari 20.09.2026). */
  --r-sm:8px; --r-md:12px;
  --wrap:1040px;

  /* Tip olcegi — anthropic.com kademeleriyle ayni sayilar (14/16/18/20/24/32/44).
     Amac dar bir aralik: en kucuk ile en buyuk arasi ~3x (onceki 5x'ti). Sayfada BU
     token'lar disinda font-size YAZILMAZ; satir yuksekligi de kademeyle birlikte gelir.
     Bazi token'lar bilerek ayni degeri paylasir (ad, kullanildigi yeri anlatir). */
  --fs-hero:44px;     --lh-hero:1.05;     /* sicaklik rakami */
  --fs-hero-unit:20px;
  --fs-display:32px;  --lh-display:1.2;   /* ana sayfa basligi */
  --fs-title:24px;    --lh-title:1.25;    /* sehir adi, metin sayfasi h1 */
  --fs-headline:20px; --lh-headline:1.35; /* metin sayfasi h2 */
  --fs-lead:20px;     --lh-lead:1.5;      /* asistan cumlesi, durum etiketi, giris */
  --fs-body:18px;     --lh-body:1.6;      /* govde */
  --fs-button:16px;   --lh-button:1.4;    /* arama kutusu, chip, buton */
  --fs-small:16px;    --lh-small:1.45;    /* kart basligi, pill, altbilgi baglantisi */
  --fs-label:14px;    --lh-label:1.4;     /* saat etiketi, tarih, kaynak satiri */
  --fs-caption:14px;  --lh-caption:1.35;  /* rozet */

  /* Dikey ritim */
  --gap-card:16px; --pad-main-top:28px; --pad-main-bottom:56px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0F141A; --surface:#161C24; --surface2:#1C242E; --border:#263040; --border-input:#344052;
    --text:#E6E9EE; --text-strong:#F4F6F8; --text-hero:#fff; --muted:#9AA5B5; --faint:#7C8492;
    --brand:#5FB3E6; --brand-soft:#15304A; --on-brand:#0B1620;
    --green:#6FCF8E; --green-soft:#16301F;
    --warning:#F2B15C; --warning-soft:#3A2A12;
    --danger:#F08A8A; --danger-soft:#3B1A1A;
    --caution:#F2D06B; --caution-soft:#3A3010;
    --shadow:rgba(0,0,0,.4);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;   /* altbilgi sayfanin dibinde */
  background:var(--bg); color:var(--text);
  font:var(--fs-body)/var(--lh-body) "Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
h1,h2,h3{color:var(--text-strong); margin:0 0 .4em}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
/* width:100% sart: main ayni zamanda body'nin esnek ogesi ve `margin:0 auto` otomatik kenar
   boslugu esnemeyi (stretch) iptal ettigi icin kutu icerik genisligine buyuyup telefonda
   yatay tasma yapiyordu. */
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 16px}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:20;background:var(--surface);padding:10px 14px;border-radius:var(--r-sm)}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* ── Ust bar ──────────────────────────────────────────────────────────────── */
.top{position:sticky; top:0; z-index:10; background:var(--surface);
     border-bottom:1px solid var(--border); box-shadow:0 1px 3px var(--shadow)}
.top-row{display:flex; align-items:center; gap:12px; min-height:72px}
.brand{display:flex; align-items:center; gap:10px; color:var(--text-strong);
       font-size:var(--fs-title); line-height:1; font-weight:700; letter-spacing:-.01em; flex:0 0 auto}
.brand img{width:44px; height:44px}
.brand b{color:var(--brand); font-weight:800}
.brand:hover{text-decoration:none}
/* Dil ve birim secici: iki durum da gorunur, secili olan isaretli (EN|TR, °C|°F).
   Masaustunde satir ici, telefonda tek acilir menude. */
.seg{display:inline-flex; margin:0; background:var(--surface2);
     border:1px solid var(--border); border-radius:var(--r-md); padding:2px; gap:2px}
.seg-item{
  min-width:40px; min-height:36px; padding:6px 10px; border:0; border-radius:calc(var(--r-md) - 3px);
  background:none; color:var(--muted); cursor:pointer; font-family:inherit; font-weight:600;
  font-size:var(--fs-label); line-height:var(--lh-label);
}
.seg-item:hover{color:var(--text-strong)}
.seg-item.is-on{background:var(--surface); color:var(--brand); box-shadow:0 1px 2px var(--shadow); cursor:default}
.prefs-inline{display:flex; align-items:center; gap:8px; flex:0 0 auto}

.prefs-menu{display:none; position:relative; flex:0 0 auto}
.prefs-menu > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:4px;
  min-height:44px; padding:8px 10px; border-radius:var(--r-md);
  color:var(--muted); font-size:var(--fs-label); line-height:var(--lh-label); font-weight:600;
}
.prefs-menu > summary::-webkit-details-marker{display:none}
.prefs-menu[open] > summary,
.prefs-menu > summary:hover{background:var(--surface2); color:var(--text-strong)}
.prefs-panel{
  position:absolute; right:0; top:calc(100% + 6px); z-index:14; min-width:190px; padding:12px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:0 12px 32px var(--shadow);
}
.prefs-panel .seg{display:flex; width:100%}
.prefs-panel .seg-item{flex:1}
.prefs-row-label{
  margin:0 0 6px; color:var(--faint);
  font-size:var(--fs-label); line-height:var(--lh-label);
}
.prefs-panel .seg + .prefs-row-label{margin-top:12px}

.search{position:relative; flex:1 1 auto; max-width:420px; margin-inline:auto}
.search input{
  width:100%; height:44px; padding:0 14px; font-size:var(--fs-button); color:var(--text);
  background:var(--surface2); border:1px solid var(--border-input); border-radius:var(--r-md);
}
.search input::placeholder{color:var(--faint)}
.search:has(.locate) input{padding-right:46px}

/* Konumumu bul — arama kutusunun icinde sagda */
.locate{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:var(--r-sm); color:var(--muted); cursor:pointer;
}
.locate:hover{background:var(--brand-soft); color:var(--brand)}
.locate:disabled{cursor:default}
.locate.is-busy{color:var(--brand); animation:locate-pulse 1s ease-in-out infinite}
@keyframes locate-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.locate.is-busy{animation:none; opacity:.5}}
.locate-msg{
  position:absolute; top:52px; left:0; right:0; z-index:12; margin:0; padding:10px 12px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:0 12px 32px var(--shadow); color:var(--text);
  font-size:var(--fs-label); line-height:var(--lh-label);
}
.results{
  position:absolute; inset-inline:0; top:52px; margin:0; padding:6px; list-style:none; z-index:12;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:0 12px 32px var(--shadow); max-height:60vh; overflow:auto;
}
.results li a{display:flex; justify-content:space-between; gap:10px; padding:10px 12px;
  border-radius:var(--r-sm); color:var(--text); min-height:44px; align-items:center;
  font-size:var(--fs-button); line-height:var(--lh-button)}
.results li a:hover,.results li a:focus,.results li.on a{background:var(--brand-soft); text-decoration:none}
.results .cc{color:var(--faint); font-size:var(--fs-label)}
.results .empty{padding:12px; color:var(--muted); font-size:var(--fs-button); line-height:var(--lh-button)}

/* ── Kartlar ──────────────────────────────────────────────────────────────── */
/* main ayni zamanda .wrap: yan bosluk oradan gelir, dikey bosluk burada.
   Secici `main.wrap` olmali — yalnizca `main` yazilirsa .wrap'in padding'i daha ozgul
   oldugu icin ustte/altta bosluk kalmaz (20.09.2026: ust bar ve altbilgi icerige yapisiyordu). */
main.wrap{padding-block:var(--pad-main-top) var(--pad-main-bottom);
     display:flex; flex-direction:column; gap:var(--gap-card); flex:1 0 auto}
/* Esnek kutu ogeleri varsayilan olarak icerikten dar olamaz; yatay kayan saatlik serit
   bu yuzden telefonda tum sayfayi genisletiyordu. */
main > *{min-width:0}
.card > *{min-width:0}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
      padding:18px; box-shadow:0 1px 2px var(--shadow)}
.card-title{font-size:var(--fs-small); line-height:var(--lh-small); font-weight:600;
            color:var(--muted); margin:0 0 12px; letter-spacing:.01em}
.cards-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.card-empty{text-align:center; padding:32px 18px}

.city-title{font-size:var(--fs-title); line-height:var(--lh-title); margin:0 0 4px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.city-sub{font-size:var(--fs-button); color:var(--muted); font-weight:400}

/* Sicaklik karti */
.hero-main{display:flex; align-items:center; gap:18px}
.hero-icon{width:112px; height:112px; flex:0 0 auto}
.hero-temp{margin:0; font-size:var(--fs-hero); line-height:var(--lh-hero); font-weight:700; color:var(--text-hero); letter-spacing:-.02em}
.hero-unit{font-size:var(--fs-hero-unit); font-weight:600; color:var(--muted); margin-left:2px}
.hero-label{margin:6px 0 0; font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--text-strong)}
.hero-feels{margin:2px 0 0; color:var(--muted)}
.metrics{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:16px 0 0; padding:0}
.metrics li{display:flex; align-items:baseline; gap:6px; background:var(--surface2);
  border:1px solid var(--border); border-radius:var(--r-md); padding:7px 14px;
  font-size:var(--fs-small); line-height:var(--lh-small)}
.metrics span{color:var(--muted)}
.metrics b{color:var(--text-strong); font-weight:600}
.hero-foot{margin:14px 0 0; font-size:var(--fs-label); line-height:var(--lh-label); color:var(--faint)}

/* IP'den gelindi notu — sehir basliginin hemen altinda, sessiz bir satir */
.note-approx{
  margin:0; padding:10px 14px; border-radius:var(--r-md);
  background:var(--surface2); border:1px solid var(--border); color:var(--muted);
  font-size:var(--fs-label); line-height:var(--lh-label);
}

/* Tavsiye kartlari: ozet (asistan) + iki motor. Renk yalnizca vurgu; bilgi metinde. */
.advisor{border-left:3px solid var(--brand)}
.tip{display:flex; flex-direction:column}
.tip .card-title{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.tip-badge{font-size:var(--fs-caption); line-height:var(--lh-caption); font-weight:600; padding:4px 10px; border-radius:var(--r-sm);
  background:var(--brand-soft); color:var(--brand)}
.tip-text{margin:0; line-height:var(--lh-body); color:var(--text)}
.tip-out{border-top:3px solid var(--green)}
.tip-wear{border-top:3px solid var(--brand)}
.advisor-text{margin:0; font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--text-strong)}

/* Saatlik */
.hours{display:flex; gap:6px; max-width:100%; list-style:none; margin:0; padding:0 0 6px; overflow-x:auto; scroll-snap-type:x proximity}
.hours li{flex:0 0 80px; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 4px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-sm)}
.h-time{font-size:var(--fs-label); line-height:var(--lh-label); color:var(--muted)}
.h-temp{font-size:var(--fs-lead); line-height:var(--lh-label); font-weight:600; color:var(--text-strong)}
.h-rain{font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--faint)}
.h-rain.on{color:var(--brand); font-weight:600}

/* Gunluk */
.days{list-style:none; margin:0; padding:0}
.days li{display:grid; grid-template-columns:122px 40px 1fr 56px 104px; align-items:center; gap:10px;
  padding:10px 4px; border-top:1px solid var(--border)}
.days li:first-child{border-top:0}
.d-name{display:flex; flex-direction:column; color:var(--text-strong); font-weight:600}
.d-name small{font-weight:400; color:var(--faint); font-size:var(--fs-caption); line-height:var(--lh-caption)}
.d-label{color:var(--muted); font-size:var(--fs-small); line-height:var(--lh-small);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.d-rain{font-size:var(--fs-label); line-height:var(--lh-label); color:var(--faint); text-align:right}
.d-rain.on{color:var(--brand); font-weight:600}
.d-temps{text-align:right; color:var(--muted); font-size:var(--fs-body); line-height:var(--lh-small)}
.d-temps b{color:var(--text-strong)}

/* Uyari kartlari — renk TEK basina yeterli degil, metin rozetle birlikte */
.alert{border-radius:var(--r-md); padding:14px 16px; border:1px solid}
.alert p{margin:6px 0 0}
.alert-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.badge{font-size:var(--fs-caption); line-height:var(--lh-caption); font-weight:700;
  padding:4px 10px; border-radius:var(--r-sm)}
.alert-yellow{background:var(--caution-soft); border-color:var(--caution); color:var(--caution)}
.alert-yellow .badge{background:var(--caution); color:#fff}
.alert-orange{background:var(--warning-soft); border-color:var(--warning); color:var(--warning)}
.alert-orange .badge{background:var(--warning); color:#fff}
.alert-red{background:var(--danger-soft); border-color:var(--danger); color:var(--danger)}
.alert-red .badge{background:var(--danger); color:#fff}
.alert-green{background:var(--green-soft); border-color:var(--green); color:var(--green)}
.alert-green .badge{background:var(--green); color:#fff}
.alert .muted{color:inherit; opacity:.85; font-size:var(--fs-label); line-height:var(--lh-label)}

/* Chip listeleri */
.chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
.chips a{display:inline-flex; align-items:center; min-height:44px; padding:8px 16px;
  font-size:var(--fs-button); line-height:var(--lh-button);
  background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-md); color:var(--text)}
.chips a:hover{background:var(--brand-soft); border-color:var(--brand); color:var(--brand); text-decoration:none}

/* Ana sayfa */
.hero-home{padding:24px 0 12px; text-align:center}
.hero-home h1{font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:-.02em}
.lead{font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--text); max-width:56ch; margin:0 auto}
.lead-sub{color:var(--muted); font-size:var(--fs-small); line-height:var(--lh-small); margin-top:10px}
.bullets{margin:0; padding-left:18px; color:var(--text)}
.bullets li{margin:6px 0}
.btn{display:inline-flex; align-items:center; min-height:44px; padding:10px 20px; border-radius:var(--r-md);
  background:var(--brand); color:var(--on-brand); font-weight:600}
.btn:hover{text-decoration:none; filter:brightness(1.05)}

/* Metin sayfalari */
.prose{max-width:72ch; margin-inline:auto}
.prose h1{font-size:var(--fs-title); line-height:var(--lh-title)}
.prose h2{font-size:var(--fs-headline); line-height:var(--lh-headline); margin-top:1.75em}
.prose ul{padding-left:20px}
.prose li{margin:6px 0}

/* Altbilgi */
.foot{border-top:1px solid var(--border); background:var(--surface);
      padding:32px 0 36px; margin-top:auto}
.foot-nav{display:flex; gap:20px; flex-wrap:wrap; margin-bottom:14px}
.foot-nav a{color:var(--text); font-size:var(--fs-small); line-height:var(--lh-small)}
.foot-data,.foot-co{margin:4px 0; font-size:var(--fs-label); line-height:var(--lh-label); color:var(--faint)}

@media (max-width:760px){
  :root{--fs-hero:36px; --fs-display:28px; --fs-title:22px; --pad-main-top:24px; --pad-main-bottom:40px}
  .top-row{flex-wrap:wrap; padding-block:8px; min-height:64px}
  .prefs-inline{display:none}
  .prefs-menu{display:block; margin-left:auto}
  .brand img{width:36px; height:36px}
  .brand{font-size:var(--fs-headline); gap:8px}
  .search{order:3; flex-basis:100%; max-width:none; margin:0 0 8px}
  .cards-2{grid-template-columns:1fr}
  .hero-icon{width:88px; height:88px}
  .days li{grid-template-columns:96px 36px 1fr 92px}
  .d-rain{display:none}
}

/* Dar ekranda gunluk satir iki satira acilir: durum metni kisaltilmaz, alt satira gecer. */
@media (max-width:560px){
  .days li{
    grid-template-columns:1fr 40px auto;
    grid-template-areas:"name icon temps" "label label label";
    row-gap:2px; padding:12px 4px;
  }
  .d-name{grid-area:name}
  .days li img{grid-area:icon}
  .d-temps{grid-area:temps}
  .d-label{grid-area:label; white-space:normal; font-size:var(--fs-label); line-height:var(--lh-label)}
}