/* weather-index.css — /hava-durumu/ (il listesi) yeni tasarım: weather-hero.css (wx-*) bileşenlerini ve
   v2 tema değişkenlerini (--v2-ink/--v2-mut/--v2-hap/--v2-cizgi) kullanır; açık/koyu tema ve cihaz temaları otomatik uyar.
   Grok · 11.10.2026 */
.wx-layout--index .wx-main{display:grid;gap:16px;min-width:0}
.wx-hero__cta{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:10px 16px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none;color:inherit;background:var(--v2-hap,rgba(255,255,255,.7));border:1px solid var(--v2-cizgi,rgba(15,23,42,.10));transition:transform .15s ease}
.wx-hero__cta:hover,.wx-hero__cta:focus-visible{transform:translateY(-1px);outline:none;box-shadow:0 0 0 3px rgba(56,189,248,.35)}
.wx-card__title small{margin-inline-start:auto;font-size:12px;font-weight:600;color:var(--v2-mut,#64748b)}

/* Büyük şehirler: küçük gökyüzü kartları (wx-sky--* zeminleri weather-hero.css'ten gelir) */
.wx-sehirler{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.wx-sehir{position:relative;display:grid;gap:6px;padding:14px 16px;border-radius:18px;color:#0f172a;text-decoration:none;border:1px solid var(--v2-cizgi,rgba(15,23,42,.08));overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.wx-sehir:hover,.wx-sehir:focus-visible{transform:translateY(-2px);box-shadow:0 12px 28px -14px rgba(15,23,42,.45);outline:none}
.wx-sehir__ad{font-size:17px;font-weight:800}
.wx-sehir__an{display:flex;align-items:center;gap:10px}
.wx-sehir__an .wx-ico{width:44px;height:44px}
.wx-sehir__derece{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.02em}
.wx-sehir__durum{font-size:13.5px;font-weight:600;opacity:.85}
.wx-sehir__aralik{display:flex;gap:14px;font-size:12.5px;opacity:.85}
.wx-sehir__git{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12.5px;font-weight:700}
.wx-sehir.wx-sky--clear-night,.wx-sehir.wx-sky--cloud-night,.wx-sehir.wx-sky--storm{color:#f8fafc}

/* 81 il ızgarası */
.wx-iller{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.wx-il{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;border-radius:12px;text-decoration:none;color:var(--v2-ink,var(--text,#18202b));background:var(--v2-hap,#f8fafc);border:1px solid var(--v2-cizgi,rgba(15,23,42,.08));font-size:13px;font-weight:700;transition:transform .12s ease,border-color .12s ease}
.wx-il:hover,.wx-il:focus-visible{transform:translateY(-1px);border-color:rgba(56,189,248,.6);outline:none}
.wx-il.is-current{border-color:rgba(56,189,248,.75);box-shadow:0 0 0 2px rgba(56,189,248,.25) inset}
.wx-il__kod{flex:0 0 auto;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,#0ea5e9,#6366f1)}
.wx-il__ad{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wx-card--bilgi p{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:var(--v2-mut,#475569)}
.wx-card--bilgi p:last-child{margin-bottom:0}

@media (max-width:760px){
  .wx-sehirler{grid-template-columns:1fr}
  .wx-sehir{grid-template-columns:1fr auto;align-items:center}
  .wx-sehir__an{grid-row:1/3;grid-column:2;justify-self:end}
  .wx-sehir__durum,.wx-sehir__aralik,.wx-sehir__git{grid-column:1}
  .wx-iller{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wx-hero__cta{width:100%;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){.wx-sehir,.wx-il,.wx-hero__cta{transition:none}}
/* Yeni site tasarımı etkinken (html[data-fzg]): kartlar temanın cam/hap yüzeyini kullanır; açık/koyu tema değişkenleri izlenir */
html[data-fzg] .wx-sehir{background:var(--v2-hap)!important;color:var(--v2-ink)!important;border-color:var(--v2-cizgi)!important}
html[data-fzg] .wx-sehir::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#38bdf8,#a78bfa);opacity:.85}
html[data-fzg] .wx-sehir.wx-sky--clear-day::before,html[data-fzg] .wx-sehir.wx-sky--cloud-day::before{background:linear-gradient(90deg,#fbbf24,#38bdf8)}
html[data-fzg] .wx-sehir.wx-sky--rain::before,html[data-fzg] .wx-sehir.wx-sky--storm::before{background:linear-gradient(90deg,#3b82f6,#6366f1)}
html[data-fzg] .wx-layout--index .wx-chips li{background:var(--v2-hap)!important;color:var(--v2-ink)!important;border:1px solid var(--v2-cizgi)}
html[data-fzg] .wx-layout--index .wx-chips li :is(span,b,i){color:inherit!important}