/* Günlük Hava Durumu — tema stilleri
   Renk: lacivert gece göğü + meteorolojik sıcaklık ölçeği. Yazı: Schibsted Grotesk (tema içinde). */

@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/schibsted-grotesk-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/schibsted-grotesk-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; }

:root {
  --ink: #13233a;
  --ink-2: #4b5d73;
  --ink-3: #7486a0;
  --paper: #f3f6f9;
  --card: #ffffff;
  --line: #dde5ee;
  --line-2: #c9d5e2;
  --sky: #1d63c6;
  --sky-soft: #e6effb;
  --night: #0f2440;
  --night-2: #17335a;
  --night-line: #2a4a76;
  --night-ink: #e8f0fa;
  --night-ink-2: #9db3cf;
  --scale: linear-gradient(90deg, #3b7ddd 0%, #49b6d9 20%, #5ec7a0 36%, #a6d36a 50%, #f2cf4a 64%, #f5a03c 76%, #e8603c 88%, #c42f4f 100%);
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;
  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 16px;
  --header-offset: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; font: 400 16px/1.55 var(--font); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--sky); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.015em; font-weight: 750; text-wrap: balance; }
p { margin: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #5aa2ff; outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); }
.skip-link:focus { top: 12px; }
.container { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.icon { width: 20px; height: 20px; flex: none; }
.wx { flex: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--sky); color: #fff; font-weight: 650; }
.button:hover { background: #164f9f; text-decoration: none; }
.button-muted { background: var(--sky-soft); color: var(--sky); }
.button-muted:hover { background: #d5e4f8; }
.text-link, .info-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.text-link .icon, .info-link .icon { width: 18px; height: 18px; }
.eyebrow { font-size: 14px; color: var(--ink-3); font-weight: 600; margin-bottom: 6px; }

/* Üst bölüm */
.site-header { position: sticky; top: var(--header-offset); z-index: 40; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 40px; height: 40px; margin: -4px 0 -4px -6px; }
.brand-text { font-size: 19px; letter-spacing: -0.02em; font-weight: 500; white-space: nowrap; }
.brand-text strong { font-weight: 800; }
.main-nav { display: flex; gap: 4px; margin-left: auto; }
.main-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.main-nav a { display: block; padding: 8px 12px; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 600; font-size: 15px; }
.main-nav a:hover, .main-nav .current-menu-item > a { background: var(--paper); color: var(--ink); text-decoration: none; }
.header-actions { display: flex; gap: 6px; }
.header-search-toggle, .nav-toggle, .header-search-close { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); }
.header-search-toggle:hover, .nav-toggle:hover { border-color: var(--line-2); }
.nav-toggle { display: none; }
.header-search-panel { border-top: 1px solid var(--line); background: #fff; padding: 12px 0; }
.header-search-close { border: 0; width: 36px; height: 36px; margin-right: 4px; }

/* Arama */
.weather-search { position: relative; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 6px 6px 6px 16px; background: #fff; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); }
.weather-search:focus-within { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(29, 99, 198, .15); }
.weather-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--ink); padding: 8px 0; }
.weather-search input::placeholder { color: var(--ink-3); }
.weather-search input::-webkit-search-cancel-button { display: none; }
.weather-search.is-loading::after { content: ""; width: 16px; height: 16px; margin-right: 8px; border: 2px solid var(--line-2); border-top-color: var(--sky); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.search-submit { min-height: 42px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--sky); color: #fff; font-weight: 650; }
.search-submit:hover { background: #164f9f; }
.weather-search.compact { min-height: 48px; }
.search-results { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; max-height: 340px; overflow: auto; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 18px 40px rgba(15, 36, 64, .16); }
.search-results a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-sm); color: var(--ink); font-weight: 600; }
.search-results a:hover, .search-results a:focus { background: var(--sky-soft); text-decoration: none; outline: 0; }
.search-results small { color: var(--ink-3); font-weight: 500; font-size: 13px; }
.search-results p { padding: 12px; color: var(--ink-2); font-size: 15px; }

/* Bölüm düzeni */
.section { padding-block: 56px; }
.section-soft { background: #fff; border-block: 1px solid var(--line); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.section-heading h2 { font-size: 30px; }
.section-note { color: var(--ink-2); font-size: 15px; }

/* Ana sayfa: hero */
.hero { position: relative; background: radial-gradient(1200px 500px at 70% -10%, #1f4677 0%, transparent 70%), var(--night); color: var(--night-ink); padding: 40px 0 30px; overflow: hidden; }
.hero-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 460px); align-items: end; gap: 24px 48px; }
.hero-date { color: var(--night-ink-2); font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.hero h1 { font-size: clamp(36px, 5vw, 58px); font-weight: 800; letter-spacing: -0.03em; }
.hero-lede { margin-top: 10px; color: var(--night-ink-2); font-size: 17px; max-width: 46ch; }
.hero-tools { display: grid; gap: 10px; }
.hero .weather-search { border-color: transparent; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.location-action { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border: 0; background: none; color: var(--night-ink); text-align: left; }
.location-action .icon { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.location-action b { display: block; font-weight: 650; font-size: 15px; }
.location-action small { display: block; color: var(--night-ink-2); font-size: 13px; }
.location-action:hover b { text-decoration: underline; text-underline-offset: 3px; }
.location-action:disabled { opacity: .7; cursor: progress; }

.region-board { margin-top: 24px; padding: 18px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .06); border: 1px solid var(--night-line); }
.region-board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.region-board-head h2 { font-size: 20px; }
.region-board-head small { color: var(--night-ink-2); }
.region-board-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.regional-row { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(255, 255, 255, .06); color: var(--night-ink); }
.regional-row:hover { background: rgba(255, 255, 255, .11); text-decoration: none; }
.regional-row strong { font-size: 16px; }
.regional-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.regional-days i { display: grid; justify-items: center; font-style: normal; font-size: 13px; color: var(--night-ink-2); }
.regional-days b { color: var(--night-ink); font-size: 15px; }
.regional-days em { font-style: normal; color: var(--night-ink-2); font-weight: 500; margin-left: 4px; }
.region-board-all { display: inline-block; margin-top: 12px; color: #9ccaff; font-weight: 650; }

/* Türkiye haritası (yalnızca geniş ekran) */
.tr-map { display: none; margin-top: 30px; }
.tr-map-bar { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
.tr-map-tabs { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.tr-map-tabs button { min-height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--night-ink-2); font-weight: 650; font-size: 15px; }
.tr-map-tabs button:hover:not(:disabled) { color: var(--night-ink); }
.tr-map-tabs button[aria-pressed="true"] { background: #fff; color: var(--night); }
.tr-map-tabs button:disabled { opacity: .4; cursor: not-allowed; }
.tr-map-caption { color: var(--night-ink-2); font-size: 15px; }
.tr-map-legend { margin-left: auto; display: grid; gap: 4px; width: 260px; }
.tr-map-scale { height: 8px; border-radius: 999px; background: var(--scale); }
.tr-map-ticks { display: flex; justify-content: space-between; font-size: 12px; color: var(--night-ink-2); }
.tr-map-ticks i { font-style: normal; }
.tr-map-canvas { position: relative; max-width: 1040px; margin: 14px auto 0; }
.tr-map-svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .35)); }
.tr-prov { stroke: var(--night); stroke-width: .9; stroke-linejoin: round; cursor: pointer; transition: fill .45s ease, opacity .2s; }
.tr-map-canvas:hover .tr-prov { opacity: .82; }
.tr-map-canvas .tr-prov:hover, .tr-map-canvas .tr-prov.is-hover { opacity: 1; stroke: #fff; stroke-width: 1.6; }
.tr-pin { position: absolute; z-index: 2; display: flex; align-items: center; gap: 2px; padding: 2px 10px 2px 2px; transform: translate(-50%, -50%); border-radius: 999px; background: rgba(15, 36, 64, .86); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); white-space: nowrap; }
.tr-pin:hover, .tr-pin:focus-visible { background: #fff; color: var(--night); text-decoration: none; z-index: 3; }
.tr-pin img { width: 30px; height: 30px; }
.tr-pin b { font-size: 16px; font-weight: 750; }
.tr-pin-name { position: absolute; left: 50%; top: 100%; margin-top: 3px; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--night-ink); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); pointer-events: none; }
.tr-tip { position: absolute; z-index: 5; min-width: 150px; padding: 10px 12px; transform: translate(-50%, calc(-100% - 14px)); border-radius: var(--r-md); background: #fff; color: var(--ink); box-shadow: 0 14px 30px rgba(0, 0, 0, .3); pointer-events: none; }
.tr-tip strong { display: block; font-size: 15px; }
.tr-tip span { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); }
.tr-tip b { font-size: 20px; color: var(--ink); }
.tr-map-foot { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; margin-top: 8px; color: var(--night-ink-2); font-size: 15px; }
.tr-extreme { display: inline-flex; align-items: center; gap: 8px; }
.tr-extreme b { color: var(--night-ink); }
.tr-extreme i { width: 10px; height: 10px; border-radius: 50%; }
.tr-extreme a { color: var(--night-ink); font-weight: 650; }
.tr-map-hint { margin-left: auto; font-size: 14px; }

/* Büyük şehirler */
.metro-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.metro-card { position: relative; display: grid; gap: 4px; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); color: var(--ink); overflow: hidden; }
.metro-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--tc, var(--line)); }
.metro-card:hover { border-color: var(--line-2); text-decoration: none; box-shadow: 0 10px 26px rgba(15, 36, 64, .08); }
.metro-name { font-weight: 700; font-size: 17px; }
.metro-now { display: flex; align-items: center; gap: 4px; margin: 4px 0 0 -8px; }
.metro-now strong { font-size: 46px; font-weight: 750; letter-spacing: -0.04em; line-height: 1; }
.metro-label { color: var(--ink-2); font-size: 14px; min-height: 2.6em; }
.metro-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.metro-days > span { display: grid; justify-items: center; font-size: 13px; }
.metro-days small { color: var(--ink-3); font-size: 12px; }
.metro-days b { font-weight: 650; }

/* Günlere göre */
.national-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.national-days a { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--ink); }
.national-days a:hover { border-color: var(--sky); text-decoration: none; }
.national-days b { font-size: 16px; }
.national-days small { color: var(--ink-3); font-size: 13px; }

/* Şehir listesi */
.region-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.region-filter button { min-height: 38px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); font-weight: 600; font-size: 14px; }
.region-filter button:hover { border-color: var(--line-2); color: var(--ink); }
.region-filter button.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.city-filter-status { color: var(--ink-3); font-size: 14px; margin-bottom: 14px; }
.city-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 20px; }
.city-tile { display: grid; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.city-tile:hover { color: var(--sky); text-decoration: none; }
.city-tile b { font-weight: 650; }
.city-tile small { color: var(--ink-3); font-size: 13px; }

/* Planlama */
.planning { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 56px; }
.planning-intro h2 { font-size: 28px; margin-bottom: 10px; }
.planning-intro p { color: var(--ink-2); margin-bottom: 14px; }
.planning-list { display: grid; gap: 4px; }
.planning-list article { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.planning-list article:last-child { border-bottom: 0; }
.planning-list h3 { font-size: 18px; margin-bottom: 4px; }
.planning-list p { color: var(--ink-2); }

/* Alt bölüm */
.site-footer { margin-top: 0; padding: 44px 0 22px; background: var(--night); color: var(--night-ink-2); font-size: 15px; }
.site-footer a { color: var(--night-ink); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.footer-grid > div:not(:first-child) { display: grid; align-content: start; gap: 8px; }
.footer-grid h2 { font-size: 15px; color: #fff; margin-bottom: 4px; }
.footer-grid p { max-width: 40ch; margin-top: 12px; }
.brand-footer { color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--night-line); font-size: 14px; }
.cookie-settings { padding: 0; border: 0; background: none; color: var(--night-ink); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.footer-credit { margin-top: 14px; font-size: 12px; }
.footer-credit a { color: var(--night-ink-2); }

/* Çerez bandı */
.cookie-banner { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; max-width: 920px; margin-inline: auto; display: flex; align-items: center; gap: 24px; padding: 18px 20px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(15, 36, 64, .22); }
.cookie-banner strong { font-size: 16px; }
.cookie-banner p { font-size: 14px; color: var(--ink-2); margin: 4px 0; }
.cookie-banner a { font-size: 14px; }
.cookie-actions { display: flex; gap: 8px; flex: none; }

@media (min-width: 1024px) {
  .tr-map { display: block; }
}
@media (max-width: 1100px) {
  .metro-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .city-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .hero-head { grid-template-columns: 1fr; }
  .planning { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .region-board-items { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .header-inner { height: 60px; gap: 12px; }
  .brand-text { font-size: 17px; }
  .nav-toggle { display: grid; }
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; padding: 8px var(--gutter) 14px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(15, 36, 64, .1); }
  .main-nav.is-open { display: flex; }
  .main-nav ul { flex-direction: column; }
  .main-nav a { padding: 13px 10px; font-size: 16px; }
  .header-actions { margin-left: auto; }
  .hero { padding: 26px 0 24px; }
  .hero-lede { font-size: 16px; }
  .section { padding-block: 40px; }
  .section-heading h2 { font-size: 24px; }
  .metro-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scrollbar-width: none; }
  .metro-row::-webkit-scrollbar { display: none; }
  .metro-card { flex: 0 0 72%; scroll-snap-align: start; }
  .city-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .region-filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .region-filter button { flex: none; }
  .cookie-banner { display: block; left: 10px; right: 10px; bottom: 10px; padding: 16px; }
  .cookie-actions { margin-top: 12px; }
  .cookie-actions .button { flex: 1; padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Sıcaklık ve saat gibi sayılar hizalı dursun; noktalama etkilenmesin diye yalnızca sayı ögelerinde. */
.tr-pin b, .tr-tip b, .metro-now strong, .metro-days b, .regional-days b, .tr-extreme b { font-variant-numeric: tabular-nums; }

/* ---------- Şehir / ilçe / gün sayfaları ---------- */
.place-hero { --sky-a: #2f7fd6; --sky-b: #7ab8ee; position: relative; padding: 22px 0 34px; color: #fff; background: linear-gradient(160deg, var(--sky-a) 0%, var(--sky-b) 100%); }
.place-hero.sky-cloud { --sky-a: #46607f; --sky-b: #8fa7c0; }
.place-hero.sky-rain { --sky-a: #2d4864; --sky-b: #5f7f9e; }
.place-hero.sky-snow { --sky-a: #5d7896; --sky-b: #b7cbe0; }
.place-hero.sky-storm { --sky-a: #1f2c44; --sky-b: #4a5a78; }
.place-hero.sky-night { --sky-a: #0d1f3a; --sky-b: #23406b; }
.place-hero.sky-night.sky-rain, .place-hero.sky-night.sky-cloud { --sky-a: #111c2e; --sky-b: #2c3d58; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: rgba(255, 255, 255, .78); margin-bottom: 22px; }
.breadcrumbs a { color: #fff; font-weight: 600; }
.place-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 28px 48px; align-items: center; }
.place-kind { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .8); margin-bottom: 6px; }
.place-hero h1 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.03em; }
.place-summary { margin-top: 12px; max-width: 56ch; font-size: 17px; color: rgba(255, 255, 255, .92); }
.updated-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 14px; }
.updated-badge span { width: 8px; height: 8px; border-radius: 50%; background: #6ee7a8; box-shadow: 0 0 0 4px rgba(110, 231, 168, .25); }
.updated-badge.is-stale span { background: #fbbf24; box-shadow: 0 0 0 4px rgba(251, 191, 36, .25); }
.now-card { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon main" "facts facts"; align-items: center; gap: 4px 8px; padding: 16px 22px 18px; border-radius: 24px; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); }
.now-icon { grid-area: icon; width: 132px; height: 132px; margin: -10px -6px -10px -14px; }
.now-main { grid-area: main; display: grid; }
.now-context { font-size: 14px; color: rgba(255, 255, 255, .8); font-weight: 600; }
.now-temp { font-size: 92px; font-weight: 750; line-height: .95; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.now-temp sup { font-size: .45em; vertical-align: .9em; margin-left: 2px; font-weight: 600; }
.now-label { font-size: 18px; font-weight: 600; }
.now-facts { grid-area: facts; display: flex; gap: 8px 26px; margin: 10px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .22); }
.now-facts dt { font-size: 13px; color: rgba(255, 255, 255, .78); }
.now-facts dd { margin: 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

.forecast-nav-wrap { position: sticky; top: 68px; z-index: 30; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.forecast-nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 8px; }
.forecast-nav::-webkit-scrollbar { display: none; }
.forecast-nav a { flex: none; padding: 8px 14px; border-radius: 999px; color: var(--ink-2); font-weight: 600; font-size: 15px; }
.forecast-nav a:hover { background: var(--paper); color: var(--ink); text-decoration: none; }
.forecast-nav a.active { background: var(--ink); color: #fff; }

.weather-content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; padding-block: 28px 56px; }
.weather-main { display: grid; gap: 20px; align-content: start; min-width: 0; }
.weather-sidebar { display: grid; gap: 16px; align-content: start; }
.panel { padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); min-width: 0; }
.panel h2 { font-size: 22px; }
.panel-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.panel-note { font-size: 14px; color: var(--ink-3); }

/* Saatlik */
.hourly-scroll { position: relative; overflow-x: auto; margin-inline: -22px; padding-inline: 22px; scrollbar-width: thin; }
.hourly-track { width: calc(var(--cols) * 68px); }
.hourly-curve { display: block; overflow: visible; }
.hourly-curve text { font: 700 14px var(--font); fill: var(--ink); font-variant-numeric: tabular-nums; }
.hourly-cols { display: grid; grid-template-columns: repeat(var(--cols), 68px); margin: 0; padding: 0; list-style: none; }
.hourly-cols li { display: grid; justify-items: center; gap: 2px; padding: 8px 0 4px; border-radius: var(--r-md); font-size: 13px; color: var(--ink-2); }
.hourly-cols li.is-now { background: var(--sky-soft); }
.hourly-cols time { font-weight: 650; color: var(--ink); font-size: 14px; }
.hourly-cols .is-now time { color: var(--sky); }
.hour-rain { color: #2f78c4; font-weight: 600; }
.hour-wind { display: inline-flex; align-items: center; gap: 2px; }
.hour-wind i { display: inline-grid; }
.hour-wind .icon { width: 14px; height: 14px; transform: rotate(calc(var(--dir) - 90deg)); }
.hourly-legend { display: flex; gap: 6px 20px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--ink-3); }

/* Günlük */
.daily-list { margin: 0 -8px; padding: 0; list-style: none; }
.daily-row { display: grid; grid-template-columns: 150px minmax(0, 1.2fr) 86px minmax(180px, 1.4fr); align-items: center; gap: 12px; padding: 6px 8px; border-radius: var(--r-md); }
.daily-row + .daily-row { border-top: 1px solid var(--line); border-radius: 0; }
.daily-row.is-today { background: var(--sky-soft); border-radius: var(--r-md); }
.daily-row.is-today + .daily-row { border-top-color: transparent; }
.day-name { display: grid; color: var(--ink); padding: 6px 0; }
.day-name:hover { text-decoration: none; }
.day-name:hover strong { color: var(--sky); }
.day-name strong { font-weight: 700; }
.day-name span { font-size: 13px; color: var(--ink-3); }
.day-condition { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-2); min-width: 0; }
.day-rain { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: #2f78c4; }
.day-range { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.day-min { text-align: right; color: var(--ink-3); font-weight: 600; }
.day-max { font-weight: 750; font-size: 17px; }
.range-track { position: relative; height: 8px; border-radius: 999px; background: #e9eff5; }
.range-track span { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
.data-empty { display: grid; justify-items: center; gap: 8px; padding: 26px 10px; text-align: center; }
.data-empty h3 { font-size: 20px; }
.data-empty p { color: var(--ink-2); max-width: 46ch; margin-bottom: 8px; }

/* Ayrıntılar */
.details-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.detail-card { display: flex; align-items: center; gap: 10px; padding: 14px 16px 14px 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.detail-card small { display: block; font-size: 13px; color: var(--ink-3); }
.detail-card strong { display: block; font-size: 20px; font-weight: 750; }
.detail-card span { font-size: 13px; color: var(--ink-2); }

.other-days-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.other-days-list a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "d i" "t i"; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); }
.other-days-list a:hover { border-color: var(--sky); text-decoration: none; }
.other-days-list a > span:first-child { grid-area: d; display: grid; }
.other-days-list small { color: var(--ink-3); font-size: 12px; }
.other-days-list img { grid-area: i; }
.od-temps { grid-area: t; font-weight: 700; }
.od-temps em { font-style: normal; color: var(--ink-3); font-weight: 600; }

.location-map-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; align-items: center; }
.map-copy { display: grid; gap: 10px; justify-items: start; }
.map-copy p { color: var(--ink-2); }
.map-placeholder { display: grid; place-items: center; min-height: 200px; border-radius: var(--r-md); background: repeating-linear-gradient(45deg, #f1f5f9 0 12px, #eaf0f6 12px 24px); overflow: hidden; }
.map-placeholder iframe { width: 100%; height: 260px; border: 0; }
.info-panel p { color: var(--ink-2); margin: 10px 0 12px; max-width: 72ch; }

.sidebar-search h2, .district-panel h2 { font-size: 18px; margin-bottom: 12px; }
.district-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.district-list a { padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 550; font-size: 15px; }
.district-list a:hover { color: var(--sky); text-decoration: none; }
.district-list-more { margin-top: 2px; }
.text-button { margin-top: 12px; padding: 0; border: 0; background: none; color: var(--sky); font-weight: 650; }
.alert-card { display: flex; gap: 10px; padding: 16px 16px 16px 8px; border-radius: var(--r-lg); background: #fff7e6; border: 1px solid #f6dfae; }
.alert-card strong { display: block; margin-bottom: 4px; }
.alert-card p { font-size: 14px; color: #6b5420; }

@media (max-width: 1024px) {
  .weather-content-grid { grid-template-columns: minmax(0, 1fr); }
  .weather-sidebar { grid-template-columns: 1fr 1fr; }
  .alert-card { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .place-hero-grid { grid-template-columns: 1fr; }
  .details-grid { grid-template-columns: 1fr 1fr; }
  .location-map-panel { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .forecast-nav-wrap { top: 60px; }
  .place-hero { padding: 16px 0 24px; }
  .breadcrumbs { margin-bottom: 14px; }
  .place-summary { font-size: 16px; }
  .now-icon { width: 104px; height: 104px; }
  .now-temp { font-size: 72px; }
  .panel { padding: 16px; border-radius: var(--r-md); }
  .hourly-scroll { margin-inline: -16px; padding-inline: 16px; }
  .weather-content-grid { padding-block: 18px 40px; gap: 16px; }
  .weather-main { gap: 16px; }
  .weather-sidebar { grid-template-columns: 1fr; }
  .daily-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n c" "r g"; gap: 2px 10px; padding: 8px; }
  .day-name { grid-area: n; }
  .day-condition { grid-area: c; justify-self: end; font-size: 0; }
  .day-condition img { width: 42px; height: 42px; }
  .day-rain { grid-area: r; }
  .day-range { grid-area: g; grid-template-columns: 34px minmax(70px, 1fr) 34px; gap: 8px; }
  .details-grid { gap: 8px; }
  .detail-card { padding: 10px 10px 10px 4px; gap: 6px; }
  .detail-card img { width: 40px; height: 40px; }
  .detail-card strong { font-size: 17px; }
}

/* ---------- Türkiye geneli günlük tablo ---------- */
.national-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.national-table th, .national-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.national-table thead th { font-size: 13px; font-weight: 600; color: var(--ink-3); border-bottom-color: var(--line-2); }
.national-table tbody tr:last-child > * { border-bottom: 0; }
.national-table tbody th a { color: var(--ink); font-weight: 700; }
.national-table tbody th a:hover { color: var(--sky); }
.national-condition { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.national-temps { white-space: nowrap; font-variant-numeric: tabular-nums; }
.national-temps strong { font-size: 17px; }
.national-temps span { color: var(--ink-3); margin-left: 4px; }
.national-other { grid-template-columns: 1fr; }

/* ---------- Hava rehberi (blog) ---------- */
.blog-hero { padding: 48px 0 36px; background: var(--night); color: var(--night-ink); }
.blog-hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 56px; align-items: end; }
.blog-hero .eyebrow { color: var(--night-ink-2); }
.blog-hero h1 { font-size: clamp(34px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.03em; }
.blog-hero p { margin-top: 12px; color: var(--night-ink-2); max-width: 52ch; font-size: 17px; }
.editorial-principles { display: grid; gap: 10px; }
.editorial-principles span { display: flex; align-items: center; gap: 10px; color: var(--night-ink-2); font-size: 15px; }
.editorial-principles .icon { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; }
.editorial-principles b { color: #fff; }
.topic-bar { border-bottom: 1px solid var(--line); background: #fff; }
.topic-bar .container { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-block: 12px; scrollbar-width: none; }
.topic-bar span { color: var(--ink-3); font-size: 14px; flex: none; }
.topic-bar a { flex: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-weight: 600; font-size: 14px; }
.topic-bar a:hover { border-color: var(--sky); color: var(--sky); text-decoration: none; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.post-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); overflow: hidden; }
.post-card-featured { grid-column: span 2; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.post-card-visual { position: relative; display: grid; place-items: center; min-height: 170px; background: linear-gradient(160deg, #2f7fd6, #7ab8ee); color: #fff; }
.post-card-visual:hover { text-decoration: none; }
.post-card-visual small { position: absolute; left: 14px; bottom: 10px; font-size: 12px; color: rgba(255, 255, 255, .9); }
.visual-rain, .visual-storm { background: linear-gradient(160deg, #2d4864, #5f7f9e); }
.visual-heat { background: linear-gradient(160deg, #e07b39, #f2c14e); }
.visual-wind { background: linear-gradient(160deg, #46607f, #8fa7c0); }
.visual-tomorrow { background: linear-gradient(160deg, #0d1f3a, #23406b); }
.post-card-body { display: grid; align-content: start; gap: 8px; padding: 18px; }
.post-card-body h2 { font-size: 20px; }
.post-card-featured .post-card-body h2 { font-size: 26px; }
.post-card-body h2 a { color: var(--ink); }
.post-card-body p { color: var(--ink-2); font-size: 15px; }
.post-card-body .eyebrow { margin: 0; }
.post-card-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 14px; color: var(--ink-3); }
.post-card-meta a { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; }
.post-card-meta .icon { width: 16px; height: 16px; }
.pagination { margin-top: 28px; }
.pagination .nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination .page-numbers { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; }
.pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Yazı ---------- */
.article-hero { padding: 36px 0 34px; background: var(--night); color: var(--night-ink); }
.article-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: center; }
.back-link { display: inline-block; color: var(--night-ink-2); font-size: 14px; font-weight: 600; margin-bottom: 18px; }
.article-hero .eyebrow { color: var(--night-ink-2); }
.article-hero h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -0.025em; max-width: 22ch; }
.article-meta { display: flex; gap: 8px; margin-top: 14px; font-size: 14px; color: var(--night-ink-2); }
.article-visual { display: grid; place-items: center; aspect-ratio: 1; border-radius: 28px; background: linear-gradient(160deg, #2f7fd6, #7ab8ee); }
.article-layout { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 48px; padding-block: 36px 56px; }
.article-aside { position: relative; }
.article-toc { position: sticky; top: 96px; display: grid; gap: 2px; font-size: 14px; }
.article-toc strong { margin-bottom: 6px; font-size: 15px; }
.article-toc a { padding: 6px 0 6px 12px; border-left: 2px solid var(--line); color: var(--ink-2); }
.article-toc a:hover { border-left-color: var(--sky); color: var(--ink); text-decoration: none; }
.prose { font-size: 18px; line-height: 1.7; color: #22344c; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.8em; font-size: 28px; color: var(--ink); scroll-margin-top: 100px; }
.prose h3 { margin-top: 1.5em; font-size: 21px; color: var(--ink); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose blockquote { margin-inline: 0; padding: 14px 18px; border-left: 4px solid var(--sky); background: var(--sky-soft); border-radius: 0 var(--r-md) var(--r-md) 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.prose th, .prose td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.prose img { border-radius: var(--r-md); height: auto; }
.article-cta { padding: 34px 0; background: #fff; border-top: 1px solid var(--line); }
.article-narrow { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.article-cta h2 { font-size: 24px; }

/* ---------- Sabit sayfa, 404 ---------- */
.content-shell { padding-block: 40px 64px; }
.article-card { max-width: 820px; margin-inline: auto; padding: 34px 40px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.page-article h1 { font-size: clamp(30px, 4vw, 42px); margin-bottom: 18px; }
.empty-state { display: grid; justify-items: center; gap: 10px; max-width: 560px; margin-inline: auto; text-align: center; }
.empty-state h1, .empty-state h2 { font-size: 30px; }
.empty-state p { color: var(--ink-2); }
.empty-state .weather-search { width: 100%; margin-block: 8px; }

@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .article-toc { position: static; }
}
@media (max-width: 760px) {
  .blog-hero-grid, .article-hero-grid { grid-template-columns: 1fr; }
  .article-visual { display: none; }
  .blog-grid { grid-template-columns: 1fr; }
  .post-card-featured { grid-column: auto; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .prose { font-size: 17px; }
  .article-card { padding: 22px 18px; }
  .national-table th, .national-table td { padding: 8px 6px; }
  .national-table thead th:nth-child(3), .national-table tbody td:nth-child(3) { display: none; }
  .national-condition span { display: none; }
}
.article-visual.visual-rain, .article-visual.visual-storm { background: linear-gradient(160deg, #2d4864, #5f7f9e); }
.article-visual.visual-heat { background: linear-gradient(160deg, #e07b39, #f2c14e); }
.article-visual.visual-wind { background: linear-gradient(160deg, #46607f, #8fa7c0); }
.article-visual.visual-tomorrow { background: linear-gradient(160deg, #0d1f3a, #23406b); }
.post-card-featured .post-card-visual img { width: 140px; height: 140px; }

/* ---------- Ortak lacivert zemin ve geçişler ----------
   Ana sayfa, alt sayfalar ve alt bölüm aynı gece göğü renk ailesini kullanır.
   Koyudan açığa geçiş griye düşmesin diye arada canlı mavi tonlardan geçer. */
:root {
  --night-base: linear-gradient(180deg, #0f2440 0%, #163560 100%);
  --fade-dark-light: linear-gradient(180deg, rgba(22, 53, 96, 0) 0%, rgba(43, 96, 168, .55) 32%, rgba(150, 190, 236, .92) 68%, var(--fade-to, var(--paper)) 100%);
  --glow: rgba(78, 141, 222, .45);
}
.hero, .place-hero, .blog-hero, .article-hero {
  position: relative;
  isolation: isolate;
  color: var(--night-ink);
  background:
    radial-gradient(900px 420px at 82% -12%, var(--glow) 0%, transparent 70%),
    radial-gradient(700px 380px at -5% 105%, rgba(56, 196, 186, .16) 0%, transparent 70%),
    var(--night-base);
  padding-bottom: 104px;
}
.hero::after, .place-hero::after, .blog-hero::after, .article-hero::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 96px; background: var(--fade-dark-light); pointer-events: none;
}
.place-hero { --fade-to: #ffffff; padding-top: 22px; color: #fff; }
.blog-hero { --fade-to: #ffffff; }

/* Hava durumu artık zemini değiştirmez; yalnızca üst köşedeki ışığın rengini belirler. */
.place-hero.sky-clear { --glow: rgba(255, 190, 70, .42); }
.place-hero.sky-cloud { --glow: rgba(165, 188, 216, .38); }
.place-hero.sky-rain { --glow: rgba(70, 150, 220, .42); }
.place-hero.sky-snow { --glow: rgba(214, 233, 255, .42); }
.place-hero.sky-storm { --glow: rgba(150, 110, 225, .42); }
.place-hero.sky-night { --glow: rgba(110, 140, 240, .34); }
.place-hero.sky-night.sky-rain, .place-hero.sky-night.sky-storm { --glow: rgba(90, 120, 200, .32); }
.place-hero .breadcrumbs, .place-kind, .place-summary { color: var(--night-ink-2); }
.place-hero .breadcrumbs a { color: var(--night-ink); }
.place-summary { color: #c9d8ea; }
.now-card { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }

/* Ana sayfanın açık bölümleri lacivertle akraba, çok hafif mavi tonda. */
.section-soft { background: linear-gradient(180deg, #ffffff 0%, #eef3fa 100%); }
.forecast-nav-wrap { border-top: 0; }

/* Alt bölüm: açık zeminden lacivert zemine aynı tonlarla geri döner. */
.site-footer {
  position: relative;
  padding-top: 140px;
  background:
    radial-gradient(700px 360px at 100% 100%, rgba(78, 141, 222, .28) 0%, transparent 70%),
    radial-gradient(600px 320px at 0% 110%, rgba(56, 196, 186, .14) 0%, transparent 70%),
    linear-gradient(180deg, var(--paper) 0px, #a7c3e6 34px, #3f71ad 66px, #183865 104px, #0f2440 100%);
}
.article-cta { background: var(--paper); border-top: 0; }

@media (max-width: 760px) {
  .hero, .place-hero, .blog-hero, .article-hero { padding-bottom: 76px; }
  .hero::after, .place-hero::after, .blog-hero::after, .article-hero::after { height: 70px; }
  .site-footer { padding-top: 110px; background:
      radial-gradient(500px 300px at 100% 100%, rgba(78, 141, 222, .26) 0%, transparent 70%),
      linear-gradient(180deg, var(--paper) 0px, #a7c3e6 26px, #3f71ad 52px, #183865 82px, #0f2440 100%); }
}

/* Telefonda harita yerine en sıcak / en soğuk il */
.hero-extremes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.hero-extremes a { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: var(--night-ink); }
.hero-extremes a:hover { background: rgba(255, 255, 255, .13); text-decoration: none; }
.hero-extremes small { font-size: 13px; color: var(--night-ink-2); }
.hero-extremes span { display: flex; align-items: center; gap: 7px; font-weight: 650; }
.hero-extremes i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.hero-extremes b { margin-left: auto; font-size: 20px; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .hero-extremes { display: none; } }

/* ---------- Ufuk geçişi ----------
   Koyu alanlar düz bir bantla değil, ufuk çizgisi gibi hafif kavisle biter;
   kavisin kenarında ince bir atmosfer ışıması vardır. Alt bölüm aynı kavisle başlar. */
.hero, .place-hero, .blog-hero, .article-hero {
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(150, 200, 255, .45);
  border-radius: 0 0 50% 50% / 0 0 56px 56px;
  box-shadow: 0 22px 50px -26px rgba(64, 140, 235, .85);
  z-index: 1;
}
.hero::after, .place-hero::after, .blog-hero::after, .article-hero::after { content: none; }
.place-hero { padding-bottom: 54px; }
.forecast-nav-wrap { margin-top: 18px; background: transparent; border-bottom: 0; backdrop-filter: none; }
.forecast-nav-wrap.is-stuck, .forecast-nav-wrap:has(+ *) { }
.forecast-nav { padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(15, 36, 64, .08); width: min(1200px, 100% - 2 * var(--gutter)); }
.site-footer {
  margin-top: 24px;
  padding-top: 64px;
  background:
    radial-gradient(700px 360px at 100% 100%, rgba(78, 141, 222, .28) 0%, transparent 70%),
    radial-gradient(600px 320px at 0% 110%, rgba(56, 196, 186, .14) 0%, transparent 70%),
    var(--night-base);
  border-top: 1px solid rgba(150, 200, 255, .45);
  border-radius: 50% 50% 0 0 / 56px 56px 0 0;
  box-shadow: 0 -22px 50px -26px rgba(64, 140, 235, .85);
}

/* ---------- Ana sayfa bölümleri ---------- */
.section-title { font-size: 30px; margin-bottom: 18px; }

/* Büyük şehirler: 5 şehir × 5 gün tablo */
.metro-table { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); overflow: hidden; }
.mt-row { display: grid; grid-template-columns: minmax(200px, 1.3fr) repeat(5, minmax(0, 1fr)); align-items: center; }
.mt-row + .mt-row { border-top: 1px solid var(--line); }
.mt-head { background: #f6f9fc; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.mt-head span { padding: 10px 12px; text-align: center; }
.mt-head span:first-child { text-align: left; padding-left: 20px; }
.mt-city { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 12px 20px; color: var(--ink); align-self: stretch; border-right: 1px solid var(--line); }
.mt-city:hover { background: var(--sky-soft); text-decoration: none; }
.mt-city strong { font-size: 18px; }
.mt-now { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 2px; }
.mt-now img { grid-row: 1 / 3; }
.mt-now b { font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.mt-now small { font-size: 12px; color: var(--ink-3); }
.mt-day { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 6px; }
.mt-temps { display: grid; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mt-temps b { font-size: 18px; font-weight: 750; filter: saturate(1.2) brightness(.82); }
.mt-temps em { font-style: normal; font-size: 14px; color: var(--ink-3); font-weight: 600; }

/* 15 günde Türkiye */
.national-band { margin-top: 8px; }
.band-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px 40px; align-items: end; margin-bottom: 18px; }
.band-head .section-title { margin: 0; }
.band-head p { color: var(--ink-2); max-width: 60ch; }
.day-strip { display: grid; grid-template-columns: repeat(var(--days, 15), minmax(64px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.day-strip a { display: grid; justify-items: center; gap: 4px; padding: 12px 4px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--ink); }
.day-strip a:hover { border-color: var(--sky); text-decoration: none; }
.day-strip li:first-child a { background: var(--night); border-color: var(--night); color: #fff; }
.day-strip li:first-child .ds-lo, .day-strip li:first-child small { color: var(--night-ink-2); }
.day-strip li:first-child .ds-bar { background: rgba(255, 255, 255, .12); }
.ds-date { display: grid; justify-items: center; line-height: 1.1; }
.ds-date b { font-size: 20px; }
.ds-date small { font-size: 12px; color: var(--ink-3); text-align: center; }
.ds-temp { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ds-lo { color: var(--ink-3); }
.ds-bar { position: relative; width: 8px; height: 74px; border-radius: 999px; background: #e9eff5; }
.ds-bar i { position: absolute; left: 0; right: 0; border-radius: 999px; }
.ds-wet { width: 36px; height: 4px; margin-top: 4px; border-radius: 999px; background: #e3ebf3; overflow: hidden; }
.ds-wet i { display: block; height: 100%; background: #3b8ad8; border-radius: 999px; }
.ds-wet-label { font-size: 12px; color: var(--ink-3); }
.ds-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.ds-legend span { display: inline-flex; align-items: center; gap: 8px; }
.lg-bar { width: 6px; height: 16px; border-radius: 999px; background: linear-gradient(0deg, #49b6d9, #f2cf4a); }
.lg-wet { width: 18px; height: 4px; border-radius: 999px; background: #3b8ad8; }

/* 81 il dizini */
.index-note { color: var(--ink-2); margin: -8px 0 20px; }
.city-index { columns: 4 240px; column-gap: 28px; }
.ci-region { break-inside: avoid; margin-bottom: 26px; }
.ci-region h3 { font-size: 15px; color: var(--ink-3); font-weight: 650; padding-bottom: 6px; border-bottom: 2px solid var(--ink); margin-bottom: 2px; }
.ci-region ul { margin: 0; padding: 0; list-style: none; }
.ci-region a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 550; }
.ci-region a:hover { color: var(--sky); text-decoration: none; }
.ci-region b { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-variant-numeric: tabular-nums; }
.ci-region b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tc); }

/* Tahmin süresi zaman çizelgesi */
.horizon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); grid-template-areas: "intro line" "intro steps"; gap: 14px 56px; }
.horizon-intro { grid-area: intro; }
.horizon-intro p { color: var(--ink-2); margin-bottom: 12px; }
.horizon-line { grid-area: line; align-self: end; }
.horizon-line span { display: block; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--night) 0%, #3f71ad 45%, rgba(63, 113, 173, .12) 100%); }
.horizon-steps { grid-area: steps; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.horizon-steps li { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.horizon-steps b { font-size: 18px; }
.horizon-steps span { color: var(--ink-2); font-size: 15px; }
.horizon-steps li:nth-child(2) b { color: #3f5f88; }
.horizon-steps li:nth-child(3) b { color: #6c84a3; }

@media (max-width: 1100px) {
  .mt-row { grid-template-columns: minmax(170px, 1.2fr) repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .band-head { grid-template-columns: 1fr; }
  .horizon { grid-template-columns: 1fr; grid-template-areas: "intro" "line" "steps"; }
}
@media (max-width: 760px) {
  .hero, .place-hero, .blog-hero, .article-hero { padding-bottom: 44px; border-radius: 0 0 50% 50% / 0 0 28px 28px; }
  .site-footer { padding-top: 48px; border-radius: 50% 50% 0 0 / 28px 28px 0 0; }
  .forecast-nav-wrap { margin-top: 12px; }
  .forecast-nav { width: calc(100% - 2 * var(--gutter)); }
  .section-title { font-size: 24px; }
  .metro-table { border-radius: var(--r-md); }
  .mt-head { display: none; }
  .mt-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mt-city { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 14px; }
  .mt-day { flex-direction: column; gap: 0; padding: 6px 2px 10px; }
  .mt-day img { width: 38px; height: 38px; }
  .mt-temps { justify-items: center; }
  .mt-temps b { font-size: 16px; }
  .mt-temps em { font-size: 13px; }
  .day-strip { grid-template-columns: repeat(var(--days, 15), 64px); margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; }
  .city-index { columns: 2 140px; column-gap: 18px; }
  .ci-region a { font-size: 15px; }
  .horizon-steps { grid-template-columns: 1fr; gap: 12px; }
}

/* Büyük şehir tablosu: rakam koyu, sıcaklık rengi altta ince çizgi */
.mt-temps b { color: var(--ink); filter: none; justify-self: start; box-shadow: inset 0 -3px 0 var(--tc, transparent); padding-bottom: 1px; }

/* Şehir sayfası: ayrıntılar tek ölçüm paneli (kart yığını değil) */
.details-grid { gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); overflow: hidden; }
.detail-card { border: 0; border-radius: 0; background: none; box-shadow: inset -1px -1px 0 var(--line); padding: 16px 18px 16px 10px; }

/* Küçük Türkiye haritası */
.location-map-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.map-placeholder { min-height: 0; padding: 12px; background: #f3f7fb; }
.mini-map { width: 100%; height: auto; }
.mini-map path { fill: #dbe5f0; stroke: #fff; stroke-width: 1; }
.mini-map path.is-current { fill: #1d63c6; }
.mini-dot { fill: #fff; stroke: var(--night); stroke-width: 3; }
.mini-pulse { fill: rgba(255, 255, 255, .55); stroke: rgba(15, 36, 64, .35); stroke-width: 1.5; }
@media (max-width: 860px) { .location-map-panel { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .details-grid { grid-template-columns: 1fr 1fr; border-radius: var(--r-md); }
  .detail-card { padding: 12px 10px 12px 4px; }
}
/* Ekran okuyucu metinleri kaydırılan şeritlerde sayfayı yana taşırmasın */
.day-strip, .metro-table { position: relative; }
.screen-reader-text { left: 0; }
.topic-bar { background: transparent; border-bottom: 0; margin-top: 12px; }

/* Logo */
.brand { gap: 0; }
.brand-logo { display: block; height: 40px; width: auto; }
.brand-footer .brand-logo { height: 52px; }
@media (max-width: 760px) { .header-inner .brand-logo { height: 34px; } }

/* Üst bölüm: sloganlı logo için biraz daha yüksek */
.header-inner { height: 78px; }
.brand-logo { height: 52px; }
.forecast-nav-wrap { top: 78px; }
html { scroll-padding-top: 150px; }
@media (max-width: 760px) {
  .header-inner { height: 66px; }
  .header-inner .brand-logo { height: 44px; }
  .forecast-nav-wrap { top: 66px; }
  .main-nav { top: 100%; }
}

/* ---------- Üst menü (masaüstü kapsül + telefon tam ekran menü) ---------- */
.site-header { transition: box-shadow .25s ease; }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(15, 36, 64, .09); }
.main-nav { display: flex; gap: 2px; margin-left: auto; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: #eef3f8; }
.main-nav a { padding: 8px 14px; border-radius: 999px; color: var(--ink-2); font-size: 14.5px; font-weight: 600; white-space: nowrap; transition: background-color .15s, color .15s; }
.main-nav a:hover { background: rgba(255, 255, 255, .7); color: var(--ink); text-decoration: none; }
.main-nav a[aria-current="page"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15, 36, 64, .08), 0 4px 12px rgba(15, 36, 64, .07); }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: 10px; }
.locate-btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px 0 13px; border: 0; border-radius: 999px; background: var(--night); color: #fff; font-weight: 650; font-size: 14.5px; }
.locate-btn .icon { width: 18px; height: 18px; }
.locate-btn:hover { background: #1b3e6e; }
.locate-btn:disabled, .mm-locate:disabled { opacity: .7; cursor: progress; }

.nav-toggle { display: none; position: relative; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.burger { position: absolute; left: 50%; top: 50%; width: 20px; height: 14px; transform: translate(-50%, -50%); }
.burger i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .2s, top .28s cubic-bezier(.4, 0, .2, 1), width .28s; }
.burger i:nth-child(1) { top: 0; }
.burger i:nth-child(2) { top: 6px; width: 70%; }
.burger i:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] { background: var(--night); border-color: var(--night); }
.nav-toggle[aria-expanded="true"] .burger i { background: #fff; }
.nav-toggle[aria-expanded="true"] .burger i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle[aria-expanded="true"] .burger i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.mobile-menu { position: fixed; z-index: 39; left: 0; right: 0; top: var(--hh, 66px); bottom: 0; overflow-y: auto; overscroll-behavior: contain; color: var(--night-ink);
  background: radial-gradient(700px 360px at 90% -10%, rgba(78, 141, 222, .5), transparent 70%), radial-gradient(500px 300px at -10% 100%, rgba(56, 196, 186, .16), transparent 70%), linear-gradient(180deg, #0f2440, #163560);
  opacity: 0; transform: translateY(-10px); transition: opacity .22s ease, transform .28s cubic-bezier(.2, .8, .2, 1); }
.mobile-menu.is-open { opacity: 1; transform: none; }
.mm-inner { width: min(560px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 18px 0 40px; display: grid; gap: 22px; }
.mm-nav { display: grid; }
.mm-nav a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 2px; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -0.015em; }
.mm-nav a:hover { text-decoration: none; color: #9ccaff; }
.mm-nav a .icon { width: 22px; height: 22px; opacity: .45; }
.mm-nav a[aria-current="page"] { color: #9ccaff; }
.mm-nav a[aria-current="page"] .icon { opacity: 1; }
.mm-locate { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; background: rgba(255, 255, 255, .08); color: #fff; text-align: left; }
.mm-locate .icon { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: #fff; color: var(--night); }
.mm-locate b { display: block; font-size: 17px; }
.mm-locate small { display: block; color: var(--night-ink-2); font-size: 14px; }
.mm-cities p { font-size: 14px; color: var(--night-ink-2); margin-bottom: 10px; }
.mm-cities > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mm-cities a { display: flex; align-items: center; gap: 6px; padding: 8px 12px 8px 6px; border-radius: 14px; background: rgba(255, 255, 255, .06); color: #fff; font-weight: 600; }
.mm-cities a:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.mm-cities b { margin-left: auto; font-size: 18px; font-variant-numeric: tabular-nums; }
.mm-slogan { color: var(--night-ink-2); font-size: 15px; text-align: center; padding-top: 6px; }
html.menu-open { overflow: hidden; }

@media (max-width: 1080px) {
  .main-nav, .locate-btn { display: none !important; }
  .nav-toggle { display: block; }
  .header-actions { margin-left: auto; }
}
@media (min-width: 1081px) { .mobile-menu { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .mobile-menu, .burger i { transition: none; } }
.footer-credit-link { color: var(--night-ink-2) !important; }

/* ---------- Özel günler ---------- */
.oz-band { position: relative; z-index: 2; font-size: 15px; }
.oz-inner { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding-block: 10px; }
.oz-mark { width: 30px; height: 20px; flex: none; }
.oz-text { flex: 1 1 420px; margin: 0; line-height: 1.45; }
.oz-text strong { font-weight: 750; margin-right: 4px; }
.oz-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-weight: 650; font-size: 14px; white-space: nowrap; }
.oz-link .icon { width: 16px; height: 16px; }
.oz-days { display: flex; gap: 6px; flex-wrap: wrap; }
.oz-days a { display: grid; padding: 5px 12px; border-radius: 12px; line-height: 1.2; text-align: center; }
.oz-days b { font-size: 14px; }
.oz-days small { font-size: 12px; opacity: .8; }

/* Milli bayram: kırmızı-beyaz */
.oz-milli { background: #e30a17; color: #fff; }
.oz-milli .oz-mark { box-shadow: 0 0 0 1.5px #fff; border-radius: 3px; }
.oz-milli .oz-link, .oz-milli .oz-days a { background: #fff; color: #b10712; }
.oz-milli .oz-link:hover { text-decoration: none; background: #ffe9ea; }
body.ozel-milli { --glow: rgba(227, 10, 23, .42); }

/* Dini bayram: lacivert üzerine altın */
.oz-dini { background: linear-gradient(90deg, #0f2440, #1b3e6e); color: #f3e4bf; }
.oz-dini .oz-mark { width: 22px; height: 22px; color: #f2c46b; }
.oz-dini strong { color: #f7d58a; }
.oz-dini .oz-link, .oz-dini .oz-days a { background: rgba(242, 196, 107, .16); color: #fbe7b5; border: 1px solid rgba(242, 196, 107, .35); }
.oz-dini .oz-days a:hover, .oz-dini .oz-link:hover { background: rgba(242, 196, 107, .28); text-decoration: none; }
body.ozel-dini { --glow: rgba(242, 190, 90, .36); }

/* Anma: sade koyu şerit */
.oz-anma { background: #23272e; color: #e6e8eb; border-bottom: 2px solid #e30a17; }
.oz-anma .oz-mark { border-radius: 3px; }
.oz-anma .oz-link { background: rgba(255, 255, 255, .1); color: #fff; }
body.ozel-anma { --glow: rgba(170, 180, 195, .3); }

/* Günler: açık, küçük */
.oz-gun { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); }
.oz-gun .oz-mark { width: 18px; height: 18px; color: #f5a03c; }
.oz-gun .oz-link { background: var(--sky-soft); color: var(--sky); }

/* 10 Kasım: bütün site yas gününe uygun koyu gri tonlarda; sıcaklık renkleri veri olduğu için korunur */
.oz-yas { background: #111315; color: #f1f2f4; }
.oz-yas .oz-mark { width: 18px; height: 22px; color: #f1f2f4; }
.oz-yas .oz-link { background: rgba(255, 255, 255, .1); color: #fff; }
.oz-yas .oz-link:hover { background: rgba(255, 255, 255, .18); text-decoration: none; }
body.ozel-yas {
  --night: #1c1f24; --night-2: #2a2e35; --night-line: #3a3f47; --night-ink-2: #b7bcc4;
  --night-base: linear-gradient(180deg, #17191d 0%, #2b2f36 100%);
  --glow: rgba(210, 214, 220, .16);
  --sky: #3a3f47; --sky-soft: #eceef1;
}
body.ozel-yas .hero, body.ozel-yas .place-hero, body.ozel-yas .blog-hero, body.ozel-yas .article-hero, body.ozel-yas .site-footer {
  background: radial-gradient(900px 420px at 82% -12%, var(--glow) 0%, transparent 70%), var(--night-base);
  box-shadow: 0 22px 50px -26px rgba(0, 0, 0, .55); border-color: rgba(255, 255, 255, .18);
}
body.ozel-yas .site-footer { box-shadow: 0 -22px 50px -26px rgba(0, 0, 0, .55); }
body.ozel-yas .brand-logo, body.ozel-yas .brand-footer img { filter: grayscale(1); }
body.ozel-yas .mobile-menu { background: linear-gradient(180deg, #17191d, #2b2f36); }
body.ozel-yas .search-submit, body.ozel-yas .button { background: #2b2f36; }
body.ozel-yas a { color: #2b4a73; }
body.ozel-yas .hero a, body.ozel-yas .place-hero a, body.ozel-yas .site-footer a, body.ozel-yas .oz-band a, body.ozel-yas .mobile-menu a { color: inherit; }

/* 09.05 saygı duruşu ekranı */
.oz-saygi { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(10, 11, 13, .985); color: #f1f2f4; text-align: center; animation: oz-in .8s ease both; }
.oz-saygi-inner { max-width: 560px; display: grid; gap: 14px; justify-items: center; }
.oz-saygi .oz-saat { font-size: clamp(56px, 12vw, 96px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.oz-saygi h2 { font-size: 22px; font-weight: 600; letter-spacing: .02em; color: #b7bcc4; }
.oz-saygi p { font-size: 19px; line-height: 1.6; color: #e6e8eb; }
.oz-saygi-kapat { margin-top: 10px; padding: 10px 20px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: transparent; color: #fff; font-weight: 600; }
.oz-saygi-kapat:hover { background: rgba(255, 255, 255, .08); }
@keyframes oz-in { from { opacity: 0; } to { opacity: 1; } }
html.saygi-open { overflow: hidden; }

@media (max-width: 760px) {
  .oz-band { font-size: 14px; }
  .oz-inner { padding-block: 9px; }
  .oz-text strong { display: block; }
}