* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #111; }

.w {
  --hz: 45%; /* where the horizon falls; sky effects stay above it */
  --panel: clamp(420px, 30.5vw, 620px); /* left column grows with wide screens */
  --bar: clamp(168px, 20.6vh, 230px);
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 640px;
  overflow: hidden;
  overflow: clip;
  background: #1a1f26;
  color: #f7f3ea;
  font-family: 'Fraunces', Georgia, serif;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .55);
}
.lay { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.wash { position: absolute; inset: 0; }
.w.ready .map-shapes { transition: filter 1.2s ease; }
.w.ready .lay, .w.ready .sky { transition: opacity 1.2s ease, background-color 1.2s ease; }
.w.ready .wash { transition: background 1.2s ease; }
.w.ready .shade { transition: opacity 1.2s ease; }

/* Open sky for each time of day. They cross-fade by opacity (gradients themselves can't animate),
   and the bottom of each stays dark so the hour bar and its text keep their contrast. */
.sky-day {
  background: linear-gradient(180deg, #17345a 0, #24527e calc(var(--hz) - 22%), #4a7aa3 calc(var(--hz) - 2%), #3c5c78 calc(var(--hz) + 10%), #253445 calc(var(--hz) + 32%), #1a222c 100%);
}
.sky-dusk {
  background: linear-gradient(180deg, #121633 0, #2c2b57 calc(var(--hz) - 30%), #6b4166 calc(var(--hz) - 13%), #c26a52 calc(var(--hz) - 2%), #7a4440 calc(var(--hz) + 9%), #2e2430 calc(var(--hz) + 30%), #17161d 100%);
}
.sky-night {
  background: linear-gradient(180deg, #02040b 0, #060d1f calc(var(--hz) - 25%), #0b1730 calc(var(--hz) - 2%), #0b1424 calc(var(--hz) + 18%), #0a0e15 100%);
}
/* Sun glow; --sx/--sy move it across the sky with the hour (registered so the move animates) */
@property --sx { syntax: '<percentage>'; inherits: true; initial-value: 72%; }
@property --sy { syntax: '<percentage>'; inherits: true; initial-value: 10%; }
.sun, .sunset { --sx: 72%; --sy: 10%; mix-blend-mode: screen; }
.sun {
  background:
    /* the disc: white-hot core, a thin warm rim, then a quick falloff */
    radial-gradient(circle at var(--sx) var(--sy), #fffdf6 0, #fff7e2 2.3vh, rgba(255, 236, 186, .9) 2.9vh, rgba(255, 224, 160, .4) 3.5vh, rgba(255, 214, 150, .16) 6.5vh, transparent 13vh),
    /* corona: warm light spilling around it */
    radial-gradient(circle at var(--sx) var(--sy), rgba(255, 240, 210, .3) 0, rgba(255, 226, 178, .12) 11%, rgba(255, 214, 150, .04) 22%, transparent 36%),
    /* the sky is paler near the sun */
    radial-gradient(ellipse 75% 45% at var(--sx) var(--sy), rgba(170, 206, 240, .18), transparent 70%);
}
/* Faint rays: two spoke patterns with different spacing overlap into an uneven fan, turning very slowly */
.sun::before {
  content: ''; position: absolute; left: var(--sx); top: var(--sy); width: 70vh; height: 70vh; translate: -50% -50%; border-radius: 50%;
  background:
    repeating-conic-gradient(from 4deg, rgba(255, 244, 214, .08) 0deg 2.5deg, transparent 2.5deg 13deg),
    repeating-conic-gradient(from 0deg, rgba(255, 236, 200, .06) 0deg 4deg, transparent 4deg 21deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0, #000 5%, rgba(0, 0, 0, .55) 22%, transparent 64%);
  mask-image: radial-gradient(circle, transparent 0, #000 5%, rgba(0, 0, 0, .55) 22%, transparent 64%);
  animation: sun-rays 200s linear infinite;
}
@keyframes sun-rays { to { rotate: 360deg; } }
.sunset {
  background:
    radial-gradient(ellipse 34% 16% at var(--sx) var(--hz), rgba(255, 176, 96, .55), rgba(255, 128, 72, .18) 45%, transparent 100%),
    radial-gradient(ellipse 80% 30% at var(--sx) var(--hz), rgba(220, 110, 90, .2), transparent 80%);
}
.w.ready .sun, .w.ready .sunset { transition: opacity 1.2s ease, --sx 1.2s ease, --sy 1.2s ease; }

/* Sky band: tints the upper part of the screen, ends at the horizon */
.sky {
  position: absolute; inset: 0; opacity: 0;
  --m: linear-gradient(180deg, #000 0, #000 calc(var(--hz) - 7%), transparent calc(var(--hz) + 7%));
  -webkit-mask-image: var(--m); mask-image: var(--m);
}

/* Drifting noise textures; each strip is two tiles wide and loops seamlessly */
.band { overflow: hidden; }
.band i { position: absolute; top: 0; bottom: 0; left: 0; width: 200%; background-size: 50% 100%; background-repeat: repeat-x; animation: drift linear infinite; }
@keyframes drift { to { transform: translateX(-50%); } }
.clouds {
  --m: linear-gradient(180deg, #000 0, #000 calc(var(--hz) - 13%), transparent calc(var(--hz) + 4%));
  -webkit-mask-image: var(--m); mask-image: var(--m);
}
.mist {
  --m: linear-gradient(180deg, transparent calc(var(--hz) - 29%), #000 calc(var(--hz) - 5%), #000 calc(var(--hz) + 25%), transparent calc(var(--hz) + 59%));
  -webkit-mask-image: var(--m); mask-image: var(--m);
}

/* Fog banks: thickest at the horizon, thin in the foreground, so depth stays readable */
.bank-d { background: linear-gradient(180deg, rgba(214, 218, 221, .72) 0, rgba(216, 220, 223, .97) calc(var(--hz) - 3%), rgba(214, 218, 221, .94) calc(var(--hz) + 13%), rgba(206, 211, 215, .62) calc(var(--hz) + 33%), rgba(198, 204, 209, .16) 100%); }
.bank-n { background: linear-gradient(180deg, rgba(70, 78, 92, .74) 0, rgba(96, 104, 118, .97) calc(var(--hz) - 3%), rgba(90, 98, 112, .92) calc(var(--hz) + 13%), rgba(70, 78, 92, .58) calc(var(--hz) + 33%), rgba(46, 52, 64, .14) 100%); }

/* City lights glowing through night fog */
.glow {
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 15% 11% at 15% calc(var(--hz) + 7%), rgba(255, 186, 116, .34), transparent 100%),
    radial-gradient(ellipse 20% 13% at 37% calc(var(--hz) + 11%), rgba(255, 196, 132, .3), transparent 100%),
    radial-gradient(ellipse 13% 10% at 57% calc(var(--hz) + 6%), rgba(255, 206, 152, .28), transparent 100%),
    radial-gradient(ellipse 18% 12% at 75% calc(var(--hz) + 12%), rgba(255, 186, 116, .26), transparent 100%);
}

.shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .3) var(--panel), rgba(0, 0, 0, 0) calc(var(--panel) + 140px));
}
canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Province map: shapes sit under the fog and particles, labels and the pin above them */
.map { position: absolute; top: 24px; left: calc(var(--panel) + 16px); width: calc(100% - var(--panel) - 40px); height: calc(100% - 48px - var(--bar)); overflow: visible; }
.map-shapes path { fill: rgba(30, 38, 48, .62); fill: color-mix(in srgb, var(--rc) 12%, rgba(30, 38, 48, .62)); stroke: none; cursor: pointer; transition: fill .2s ease; }
/* Chrome draws the focus ring of an SVG shape as a box around it; the lighter fill below shows focus instead */
.map-shapes path:focus { outline: none; }
.map-shapes path:hover, .map-shapes path:focus-visible { fill: rgba(72, 86, 104, .72); fill: color-mix(in srgb, var(--rc) 28%, rgba(40, 50, 62, .72)); outline: none; }
.map-shapes path.sel { fill: rgba(86, 102, 122, .74); fill: color-mix(in srgb, var(--rc) 34%, rgba(50, 60, 74, .74)); }
.map-labels { pointer-events: none; }
.borders path { fill: none; stroke-width: 1.2; stroke-opacity: .8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sel-line { fill: none; stroke: #fff; stroke-width: 2.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

/* Title above the map */
.map-title { position: absolute; top: 22px; left: max(50%, calc(var(--panel) + 210px)); transform: translateX(-50%); text-align: center; white-space: nowrap; }
.map-title h2 { font-size: clamp(34px, 4.4vh, 50px); line-height: 1.1; font-weight: 500; letter-spacing: -.01em; }
.map-sub { margin-top: 6px; font: 400 clamp(13px, 1.7vh, 18px) 'Space Mono', monospace; opacity: .85; }

/* Top right: compass, then the region legend */
.corner { position: absolute; top: 20px; right: 24px; z-index: 1; display: flex; align-items: flex-start; gap: 14px; }
/* Compass: the same glass as the legend, flat marks, a slim needle with a red north half */
.compass {
  --north: #ff5a4e;
  width: 112px; height: 112px; flex: none; border-radius: 50%;
  background: rgba(10, 14, 20, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(247, 243, 234, .12); box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.compass svg { display: block; width: 100%; height: 100%; overflow: visible; }
.compass .tick { fill: none; stroke: rgba(247, 243, 234, .32); stroke-width: 3; }
.compass .tick.major { stroke: rgba(247, 243, 234, .75); stroke-width: 6; }
.compass .mark { fill: var(--north); }
.compass text { font: 700 11px 'Space Mono', monospace; fill: rgba(247, 243, 234, .85); text-anchor: middle; dominant-baseline: central; }
.compass text.n { fill: var(--north); font-size: 12.5px; }
.compass .needle-n { fill: var(--north); }
.compass .needle-s { fill: rgba(247, 243, 234, .82); }
.compass .hub { fill: #14181e; stroke: #f7f3ea; stroke-width: 1.2; }
.legend { list-style: none; display: flex; flex-direction: column; gap: 5px; padding: 10px 14px; background: rgba(10, 14, 20, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(247, 243, 234, .12); border-radius: 6px; font: 400 12px 'Space Mono', monospace; text-shadow: none; }
.legend li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
/* Medium screens: centred on the page the title would run into the compass (and the panel), so it sits in the gap
   between the panel and the top-right corner (compass + legend ≈ 300px), breaking into two even lines if it must */
@media (min-width: 761px) and (max-width: 1299px) {
  .map-title { left: calc(var(--panel) + 16px); right: 340px; transform: none; white-space: normal; text-wrap: balance; }
  .map-title h2 { font-size: clamp(30px, 4vh, 40px); }
}
/* Narrow screens: no room beside the corner at all, so the title goes under it, across the map column
   (the map is drawn at the bottom of its area, so the top stays free) */
@media (min-width: 761px) and (max-width: 999px) {
  .map-title { top: 206px; right: 24px; }
}
.map-labels text { font-family: 'Space Mono', monospace; font-weight: 700; paint-order: stroke; stroke: rgba(10, 14, 20, .9); stroke-linejoin: round; }
.map-tip { position: absolute; z-index: 20; pointer-events: none; transform: translate(-50%, calc(-100% - 14px)); padding: 5px 10px; background: rgba(10, 14, 20, .88); border: 1px solid rgba(247, 243, 234, .25); border-radius: 5px; font: 500 16px 'Fraunces', Georgia, serif; white-space: nowrap; text-shadow: none; }
.map-tip[hidden] { display: none; }
.pin path { fill: #e5383b; stroke: #fff; stroke-width: 1.5; }
.pin circle { fill: #fff; }

/* Keyboard users can jump past the 81 map provinces straight to the panel */
.skip { position: absolute; z-index: 20; left: 12px; top: -60px; padding: 8px 14px; border-radius: 6px; background: #f7f3ea; color: #14181e; font: 700 14px 'Space Mono', monospace; text-decoration: none; }
.skip:focus { top: 12px; }
.panel:focus { outline: none; }

/* The panel on the left holds the search and the selected place */
.ui { position: absolute; inset: 0; pointer-events: none; }
.panel { pointer-events: auto; position: absolute; left: 0; top: 0; bottom: var(--bar); width: var(--panel); overflow-y: auto; scrollbar-width: none; padding: 1.2vh 26px 8px; display: flex; flex-direction: column; }

/* Search */
.searchrow { position: relative; z-index: 5; display: flex; flex-direction: column; gap: 6px; }
.search { position: relative; z-index: 2; width: 100%; }
.search input { width: 100%; background: none; border: 0; border-bottom: 1px solid rgba(247, 243, 234, .55); border-radius: 0; color: inherit; font: italic 400 clamp(20px, 2.85vh, 34px) 'Fraunces', Georgia, serif; padding: 4px 0 8px; outline: 0; text-shadow: inherit; transition: border-color .2s; }
.search input::placeholder { color: rgba(247, 243, 234, .78); }
.search input:focus { border-bottom-color: #f7f3ea; box-shadow: 0 1px 0 #f7f3ea; }
.search ul { position: absolute; left: -12px; right: -12px; top: calc(100% + 8px); list-style: none; padding: 6px 0; background: rgba(14, 18, 24, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(247, 243, 234, .16); border-radius: 4px; text-shadow: none; max-height: min(60vh, 480px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.search li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 8px 12px; cursor: pointer; font-size: 19px; }
.search li mark { background: none; color: inherit; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.search li small { font: 400 11px 'Space Mono', monospace; opacity: .75; white-space: nowrap; }
.search li[aria-selected=true], .search li:hover { background: rgba(247, 243, 234, .12); }
.search .none { cursor: default; font: 400 12px 'Space Mono', monospace; opacity: .8; }
.search li small { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* "mahalle · Kahramankazan/Ankara" can be long on a phone */
.search li > span { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locnote { font: 400 clamp(12px, 1.47vh, 16px) 'Space Mono', monospace; opacity: .88; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.locnote button { background: none; border: 0; border-bottom: 1px solid currentColor; color: inherit; font: inherit; cursor: pointer; padding: 0 0 1px; text-shadow: inherit; }

/* Headline and advice */
.head { padding-top: .5vh; }
.now { scroll-margin-top: 10px; } /* a tap in the 5-day list on a phone scrolls up to here */
.now .place.long { font-size: clamp(25px, 3.6vh, 48px); }
.prow { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.now .place { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(29px, 5.05vh, 63px); line-height: 1.1; font-weight: 500; letter-spacing: -.01em; }
.tline { display: flex; align-items: flex-start; gap: 14px; margin-top: 4px; }
.now .t { font-size: clamp(52px, 8.4vh, 106px); line-height: 1; font-weight: 300; letter-spacing: -.03em; }
.units { flex: none; display: flex; border: 1px solid rgba(247, 243, 234, .45); border-radius: 999px; overflow: hidden; }
.units button { background: none; border: 0; color: inherit; font: 400 14px 'Space Mono', monospace; padding: 5px 11px; cursor: pointer; opacity: .7; text-shadow: inherit; }
.units button:hover { opacity: 1; }
.units button:focus-visible { outline: 2px solid #f7f3ea; outline-offset: -2px; }
.units button[aria-pressed=true] { background: #f7f3ea; color: #14181e; opacity: 1; text-shadow: none; }
/* Share button: a round twin of the °C/°F pill; its note ("Bağlantı kopyalandı") floats below it */
.now .place.wrap { white-space: normal; text-overflow: clip; line-height: 1.08; }
.ptools { flex: none; position: relative; display: flex; align-items: center; gap: 8px; }
.share { display: grid; place-items: center; width: 31px; height: 31px; padding: 0; background: none; border: 1px solid rgba(247, 243, 234, .45); border-radius: 50%; color: inherit; cursor: pointer; opacity: .8; }
.share:hover { opacity: 1; background: rgba(247, 243, 234, .1); }
.share:focus-visible { outline: 2px solid #f7f3ea; outline-offset: 2px; }
.share svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.share-note { position: absolute; right: 0; top: calc(100% + 8px); z-index: 3; max-width: min(78vw, 420px); padding: 6px 10px; border-radius: 4px; background: rgba(14, 18, 24, .9); border: 1px solid rgba(247, 243, 234, .16); font: 400 12px 'Space Mono', monospace; text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: all; }
.share-note[hidden] { display: none; }
.now .d { font-size: clamp(17px, 2.52vh, 30px); margin-top: 2px; display: flex; align-items: center; flex-wrap: wrap; gap: .2em .45em; }
/* Temperature takes the map's colour scale (set from app.js), so panel and map read alike */
.now .t { transition: color .6s ease; }
/* Big weather icon before the temperature, as tall as the number */
.tline { align-items: center; }
.wx { flex: none; display: flex; width: clamp(58px, 8.6vh, 108px); height: clamp(58px, 8.6vh, 108px); margin: 0 -4px 0 -6px; }
.wx:empty { display: none; }
/* The day's high and low under the big number (like "H:26° L:18°"): the same pair as that day's 5-day row */
.tbox { flex: none; display: flex; flex-direction: column; }
.hilo { display: flex; gap: .75em; margin-top: .35vh; padding-left: .1em; font-size: clamp(14px, 1.95vh, 23px); line-height: 1.1; white-space: nowrap; cursor: default; }
.hilo[hidden] { display: none; }
.hilo b { font-weight: 500; }
.hilo .lo b { font-weight: 400; opacity: .85; }
.wx svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .4)); }
.wx .wx-spin { animation: wx-spin 40s linear infinite; }
.wx .wx-drift { animation: wx-drift 7s ease-in-out infinite alternate; }
.wx .wx-slow { animation-duration: 9s; animation-direction: alternate-reverse; }
.wx .wx-fall { animation: wx-fall 1.1s linear infinite; }
.wx .wx-flake { animation: wx-flake 2.8s linear infinite; }
.wx .wx-bounce { animation: wx-bounce 1.2s ease-in infinite; }
.wx .wx-flash { animation: wx-flash 3.4s linear infinite; }
.wx .wx-slide { animation: wx-slide 5s ease-in-out infinite; }
.wx .wx-twinkle { animation: wx-twinkle 2.6s ease-in-out infinite; }
@keyframes wx-spin { to { transform: rotate(360deg); } }
@keyframes wx-drift { from { transform: translateX(-1.5px); } to { transform: translateX(1.5px); } }
@keyframes wx-fall { 0% { transform: translateY(-5px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(9px); opacity: 0; } }
@keyframes wx-flake { 0% { transform: translate(0, -5px); opacity: 0; } 25% { opacity: 1; } 60% { transform: translate(2px, 4px); } 100% { transform: translate(-1px, 11px); opacity: 0; } }
@keyframes wx-bounce { 0% { transform: translateY(-8px); opacity: 0; } 20% { opacity: 1; } 70% { transform: translateY(4px); } 85% { transform: translateY(1px); } 100% { transform: translateY(4px); opacity: 0; } }
@keyframes wx-flash { 0%, 80%, 100% { opacity: .35; } 83%, 90% { opacity: 1; } 86% { opacity: .5; } }
@keyframes wx-slide { 0%, 100% { transform: translateX(-3px); opacity: .75; } 50% { transform: translateX(3px); opacity: 1; } }
@keyframes wx-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* Detail chips: what is happening and how strong, coloured by topic */
.tags { list-style: none; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .45vh; margin-left: 4px; padding-left: 14px; border-left: 1px solid rgba(247, 243, 234, .16); }
.tags:empty { display: none; }
.tags li {
  --tc: #a3b3c6;
  display: flex; align-items: baseline; gap: 8px; line-height: 1.25;
  font: 400 clamp(11px, 1.36vh, 15px) 'Space Mono', monospace; color: var(--tc);
}
.tags li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 6px var(--tc); transform: translateY(-.1em); }
.tags li[data-tone=danger] { --tc: #ff8a7a; }
.tags li[data-tone=warn] { --tc: #ffc861; }
.tags li[data-tone=rain] { --tc: #7cc0ff; }
.tags li[data-tone=snow] { --tc: #e8f0ff; }
.tags li[data-tone=cold] { --tc: #9fd8ff; }
/* The clock is a quiet pill beside the condition, not more of the same text */
.now .when { font: 400 .6em 'Space Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .03em; color: rgba(214, 224, 236, .8); padding: .18em .6em; border: 1px solid rgba(247, 243, 234, .2); border-radius: 999px; background: rgba(10, 14, 20, .25); }
.now .when:empty { display: none; }

/* Advice card: the title and the accent colour say how urgent it is */
.advice {
  --ac: #8cc4ff;
  margin-top: 1vh; padding: .7vh 14px .85vh;
  border-left: 3px solid var(--ac); border-radius: 0 6px 6px 0;
  background: rgba(140, 196, 255, .1);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 16%, transparent), rgba(255, 255, 255, .03));
}
.advice[data-level=warn] { --ac: #ffc861; background: rgba(255, 200, 97, .1); background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 16%, transparent), rgba(255, 255, 255, .03)); }
.advice[data-level=danger] { --ac: #ff7a6b; background: rgba(255, 122, 107, .12); background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 18%, transparent), rgba(255, 255, 255, .03)); }
.advice:has(.advice-t:empty) { display: none; }
.advice-k { display: block; font: 700 clamp(10px, 1.2vh, 13px) 'Space Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ac); }
.advice-t { margin-top: 2px; font-size: clamp(14px, 1.85vh, 22px); line-height: 1.3; font-weight: 400; color: rgba(247, 243, 234, .94); }
.advice button { display: inline-block; margin-top: 8px; background: none; border: 0; border-bottom: 1px solid currentColor; color: inherit; font: inherit; font-size: 17px; cursor: pointer; text-shadow: inherit; }

/* Values */
.body { margin-top: 1vh; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1vh 14px; }
/* Details: cool grey uppercase labels, bright values, dim units — three clear levels */
.facts span { display: block; font: 400 clamp(10px, 1.2vh, 13px) 'Space Mono', monospace; white-space: nowrap; letter-spacing: .07em; text-transform: uppercase; color: #a3b3c6; }
.facts b { display: block; font-weight: 400; font-size: clamp(18px, 2.47vh, 32px); white-space: nowrap; line-height: 1.15; margin-top: 2px; }
.facts small { display: block; font: 400 clamp(10px, 1.19vh, 13px) 'Space Mono', monospace; color: rgba(214, 224, 236, .7); margin-top: 1px; min-height: 1.3em; }
.uvl[data-level='Düşük'] { color: #7ed49a; }
.uvl[data-level='Orta'] { color: #f5d76e; }
.uvl[data-level='Yüksek'] { color: #ffa24c; }
.uvl[data-level='Çok yüksek'] { color: #ff6b5e; }
.uvl[data-level='Aşırı'] { color: #c58cff; }
/* European AQI bands, green → purple like the UV colours */
.aqil[data-level='İyi'] { color: #7ed49a; }
.aqil[data-level='Makul'] { color: #b9dc7a; }
.aqil[data-level='Orta'] { color: #f5d76e; }
.aqil[data-level='Kötü'] { color: #ffa24c; }
.aqil[data-level='Çok kötü'] { color: #ff6b5e; }
.aqil[data-level='Son derece kötü'] { color: #c58cff; }
.aqibox, .visbox { cursor: help; }

/* Effect preview bar (only with ?onizleme): on the chart-tabs row of the hour bar, right-aligned */
.barhead { display: flex; align-items: center; gap: 16px; }
.preview {
  margin-left: auto; min-width: 0;
  display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 4px 6px 4px 12px; border-radius: 999px; pointer-events: auto; font-size: 11.5px;
  background: rgba(10, 14, 20, .76); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(247, 243, 234, .16); font-family: 'Space Mono', monospace; text-shadow: none;
}
.preview[hidden] { display: none; }
.preview-k { flex: none; color: #ffc861; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: help; }
.preview-w, .preview-l { flex: none; display: flex; gap: 1px; }
.preview-l { padding-left: 8px; border-left: 1px solid rgba(247, 243, 234, .2); }
.preview button { background: none; border: 0; color: inherit; font: inherit; padding: 3px 7px; border-radius: 999px; cursor: pointer; opacity: .8; white-space: nowrap; }
.preview button:hover { opacity: 1; background: rgba(247, 243, 234, .1); }
.preview button:focus-visible { outline: 2px solid #f7f3ea; outline-offset: 1px; }
.preview button[aria-pressed=true] { background: #f7f3ea; color: #14181e; opacity: 1; }
.preview-x { color: inherit; opacity: .75; padding: 4px 8px; white-space: nowrap; }
.preview-x:hover { opacity: 1; }

/* 5-day forecast */
/* Right under the details; it takes whatever height is left down to the hour bar */
.days {
  flex: 1 0 auto; display: flex; flex-direction: column; margin: 1vh -10px 0;
  padding: .8vh 14px .5vh; background: rgba(10, 14, 20, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(247, 243, 234, .14); border-radius: 8px;
}
.days h2 { font: 400 clamp(10px, calc(1.28vh - 1.5px), 13px) 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; opacity: .9; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.days-place { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: calc(1em + 2px); }
.days-place:not(:empty)::before { content: ' – '; font-weight: 400; }
.days ol { list-style: none; flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
.days li { line-height: 1.2; border-top: 1px solid rgba(247, 243, 234, .12); font-size: clamp(12px, calc(1.76vh - 2.5px), 20px); }
.days li:first-child { border-top: 0; }
/* Each day is a button: a click shows that day above; the shown day wears a white frame (inset, so no row grows) */
.days li button {
  width: calc(100% + 16px); margin: 0 -8px; padding: .2vh 8px;
  display: grid; grid-template-columns: minmax(0, 1.35fr) 2.6vh minmax(0, 1fr) auto; align-items: center; gap: 8px;
  background: none; border: 0; border-radius: 6px; color: inherit; font: inherit; text-align: left; text-shadow: inherit; cursor: pointer;
  transition: background-color .2s, box-shadow .2s;
}
.days li button:hover { background: rgba(247, 243, 234, .07); }
.days li button:focus-visible { outline: 2px solid #f5c04c; outline-offset: 1px; }
.days li button[aria-pressed=true] { background: rgba(247, 243, 234, .1); box-shadow: inset 0 0 0 1.5px #f7f3ea, 0 0 12px rgba(247, 243, 234, .12); }
.days li:has(> button[aria-pressed=true]), .days li:has(> button[aria-pressed=true]) + li { border-top-color: transparent; }
.days .dn { font-weight: 500; font-size: clamp(12px, calc(1.62vh - 2.5px), 18px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.days .di { display: flex; }
.days .di svg { width: clamp(18px, calc(2.5vh - 3px), 27px); height: clamp(18px, calc(2.5vh - 3px), 27px); }
.days .dl { font-size: clamp(11px, calc(1.52vh - 2.5px), 16px); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.days .dt { display: flex; justify-content: flex-end; gap: .5em; white-space: nowrap; }
.days .dt > span { min-width: 2.75em; text-align: right; }
.days .dt b { font-weight: 500; }
.days .dt .lo b { font-weight: 400; opacity: .82; }
/* ↑ high, ↓ low: the same marks beside the big number, warm and cool */
.hi i, .lo i { font-style: normal; font-size: .74em; margin-right: .12em; }
.hi i { color: #ffb36b; }
.lo i { color: #8cc4ff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Bottom bar: the hours from left to right, credits under them */
.bar {
  pointer-events: auto; position: absolute; left: 0; right: 0; bottom: 0; height: var(--bar);
  padding: 4px 16px 6px; display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .4) 22%, rgba(0, 0, 0, .55) 100%);
}
.modes { display: flex; gap: 4px; margin-bottom: 2px; translate: 0 -5px; }
.modes button { background: none; border: 0; border-bottom: 2px solid transparent; color: inherit; font: 500 19px 'Fraunces', Georgia, serif; padding: 3px 10px 3px; cursor: pointer; opacity: .7; text-shadow: inherit; }
.modes button:hover { opacity: 1; }
.modes button:focus-visible { outline: 2px solid #f7f3ea; outline-offset: 1px; }
.modes button[aria-pressed=true] { opacity: 1; border-bottom-color: #f5c04c; }
/* Credits: one quiet line; the full list and the privacy note open in a dialog */
.credit { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; font: 400 10.5px 'Space Mono', monospace; color: rgba(214, 224, 236, .55); text-shadow: none; }
.credit-src { display: flex; flex-wrap: wrap; gap: 0 4px; }
.credit-src a + a::before { content: '·'; margin-right: 4px; }
.credit a, .info-open { color: inherit; text-decoration: none; transition: color .2s; }
.credit a:hover, .credit a:focus-visible, .info-open:hover, .info-open:focus-visible { color: #f7f3ea; }
.info-open { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; white-space: nowrap; }

/* Privacy and sources dialog: the same dark glass as the other cards */
.info {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 0;
  color: #f7f3ea; background: rgba(16, 20, 27, .94); border: 1px solid rgba(247, 243, 234, .14); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5); font-family: 'Fraunces', Georgia, serif; overflow-y: auto; scrollbar-width: thin;
}
.info-in { padding: 0 26px 24px; }
.info::backdrop { background: rgba(5, 8, 12, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
/* The title and × stay in view while the long text scrolls under them */
.info-head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 -26px 0; padding: 22px 26px 12px; background: linear-gradient(#10141b 82%, rgba(16, 20, 27, 0));
}
.info h2 { font-size: 26px; font-weight: 500; letter-spacing: -.01em; }
.info-close { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(247, 243, 234, .2); background: none; color: inherit; font: 400 22px/1 'Space Mono', monospace; cursor: pointer; }
.info-close:hover, .info-close:focus-visible { background: rgba(247, 243, 234, .1); }
.info section { margin-top: 16px; }
.info h3 { font: 700 11px 'Space Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #a3b3c6; margin-bottom: 8px; }
.info ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.info li { font-size: 15.5px; line-height: 1.45; color: rgba(247, 243, 234, .88); padding-left: 14px; position: relative; }
.info li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: #f5c04c; }
.info li b { font-weight: 500; color: #f7f3ea; }
.info a { color: #f7f3ea; text-underline-offset: 3px; text-decoration-color: rgba(247, 243, 234, .4); }
.info a:hover { text-decoration-color: currentColor; }
.info-note { margin-top: 12px; padding: 10px 12px; border-left: 3px solid #8cc4ff; border-radius: 0 6px 6px 0; background: rgba(140, 196, 255, .08); font-size: 14.5px; line-height: 1.4; color: rgba(247, 243, 234, .85); }
.info li small { display: block; margin-top: 6px; font: italic 400 13px/1.4 'Fraunces', Georgia, serif; color: rgba(247, 243, 234, .62); }
.info code { font: 400 .86em 'Space Mono', monospace; white-space: nowrap; }
@media (max-width: 480px) {
  .info-in { padding: 0 18px 20px; }
  .info-head { margin: 0 -18px; padding: 16px 18px 10px; }
  .info h2 { font-size: 22px; }
  .info li { font-size: 15px; }
}
.info-date { margin-top: 20px; font: 400 11px 'Space Mono', monospace; letter-spacing: .04em; color: #8796a8; }

.pick {
  position: relative; display: flex; align-items: flex-end; gap: 4px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scrollbar-width: none; padding: 4px 0 6px;
}
.pick.more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent 100%); }
.pick::-webkit-scrollbar { display: none; }
.pick .chart { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.chart .line { fill: none; stroke: #f5c04c; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: url(#temp-fill); }
.chart .dot { fill: #f5c04c; }
.chart .dot.on { fill: #fff; stroke: #f5c04c; stroke-width: 2.5; }
.chart .slot { fill: rgba(247, 243, 234, .08); }
.chart .bar { fill: #5aa9ff; opacity: .85; }
.chart .bar.on { fill: #8cc4ff; opacity: 1; }
.chart .arrow path { fill: #c9d6e4; }
.chart .arrow.on path { fill: #fff; }
.pick:focus-visible { outline: 1px solid rgba(247, 243, 234, .5); }
.pick button { position: relative; flex: 1 0 auto; min-width: 62px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; border-bottom: 2px solid transparent; color: inherit; font: inherit; cursor: pointer; text-shadow: inherit; opacity: .78; padding: 4px 2px 5px; }
.pick button:hover { opacity: 1; }
.pick button:focus-visible { outline: 2px solid #f7f3ea; outline-offset: 1px; }
.pick button[aria-pressed=true] { opacity: 1; border-bottom-color: currentColor; }
.pick .h { font: 400 16px 'Space Mono', monospace; margin-top: 4px; }
.pick .v { font-size: 34px; line-height: 1.1; white-space: nowrap; }
.pick .v small { font: 400 12px 'Space Mono', monospace; margin-left: 2px; opacity: .85; }
.pick .g { display: block; height: 40px; }
.pick[data-mode=wind] .v, .pick[data-mode=rain] .v { font-size: 30px; }
.pick .day { flex: none; align-self: center; font: 400 12px 'Space Mono', monospace; letter-spacing: .1em; text-transform: uppercase; opacity: .8; writing-mode: vertical-rl; transform: rotate(180deg); transition: color .2s; }
.pick .day.on { opacity: 1; color: #f5c04c; font-weight: 700; }

/* Phones: map on top at full width, the panel below it, the hours under the panel */
@media (max-width: 760px) {
  .w { --map-h: calc((100vw - 16px) * .433); height: auto; min-height: 100dvh; }
  .map { top: 12px; left: 8px; width: calc(100% - 16px); height: var(--map-h); }
  .shade { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) var(--map-h), rgba(0, 0, 0, .45) calc(var(--map-h) + 80px)); }
  .ui { position: relative; padding-top: calc(var(--map-h) + 20px); }
  .map-title { position: static; transform: none; white-space: normal; margin: 0 16px 12px; }
  .map-title h2 { font-size: 28px; }
  .map-sub { font-size: 13px; }
  .corner { position: static; margin: 0 16px; gap: 10px; align-items: center; }
  .compass { width: 76px; height: 76px; }
  .compass text { font-size: 13px; }
  .compass text.n { font-size: 14px; }
  .legend { flex: 1; flex-direction: row; flex-wrap: wrap; gap: 6px 12px; padding: 8px 10px; font-size: 11px; }
  .panel { position: relative; width: auto; bottom: auto; padding: 14px 16px 0; }
  .search input { font-size: 24px; }
  .locnote { font-size: 13px; }
  .days { flex: none; margin: 16px 0 0; }
  .days li button { grid-template-columns: minmax(0, 1fr) 24px auto; padding: 6px 8px; min-height: 36px; } /* finger-sized */
  .days .dl { display: none; } /* narrow screens: the icon tells the weather, the date stays whole */
  .bar { position: relative; height: auto; padding: 18px 16px 12px; background: none; }
  .now .place { font-size: 40px; }
  .now .place.long { font-size: 32px; }
  .now .t { font-size: 76px; }
  .wx { width: 74px; height: 74px; }
  .now .d { font-size: 21px; }
  .advice-t { font-size: 17px; }
  .preview { position: fixed; z-index: 6; left: 8px; right: 8px; bottom: 8px; border-radius: 14px; }
  .facts b { font-size: 22px; }
  .facts span { font-size: 10px; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; }
  .facts small { font-size: 11px; }
  .credit { font-size: 9px; }
  .info-open { padding: 14px 0; margin: -14px 0; } /* finger-sized tap area, same look */
  .credit-src { gap: 0 10px; }
  .credit-src a { padding: 6px 0; } /* at least 24px tall for a finger */
  .credit-src a + a::before { margin-right: 10px; }
  .modes button { font-size: 18px; padding: 3px 8px 3px; min-height: 42px; }
  .units button { min-height: 40px; min-width: 44px; }
  .share { width: 42px; height: 42px; }
  .share svg { width: 18px; height: 18px; }
  .pick { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%); }
  .pick button { flex: none; min-width: 58px; }
  .pick .v { font-size: 28px; }
  .pick[data-mode=wind] .v, .pick[data-mode=rain] .v { font-size: 25px; }
  .pick .h { font-size: 14px; }
}

/* Small phones (360px and less): the detail chips get a full-width row under the temperature instead of a narrow column */
@media (max-width: 370px) {
  .tline { flex-wrap: wrap; row-gap: 10px; }
  .tags { flex-basis: 100%; margin-left: 0; padding: 8px 0 0; border-left: 0; border-top: 1px solid rgba(247, 243, 234, .16); gap: 3px; margin-bottom: 6px; }
}

/* Short laptop screens (e.g. 1366×768): a little tighter so everything on the left stays visible */
@media (min-width: 761px) and (max-height: 820px) {
  .now .t { font-size: 50px; }
  .wx { width: 54px; height: 54px; }
  .tags { gap: 2px; }
  .advice { margin-top: 4px; padding-top: 3px; padding-bottom: 4px; }
  .advice-t { font-size: 14px; }
  .facts { gap: 4px 14px; }
  .facts small { min-height: 0; }
  .days li button { padding: 0 8px; }
  .modes button { padding: 1px 10px 1px; font-size: 18px; }
  .pick .v { font-size: 27px; }
  .pick[data-mode=wind] .v, .pick[data-mode=rain] .v { font-size: 24px; }
  .pick .g { height: 28px; }
  .pick .h { font-size: 14px; }
}

/* Set by app.js only when the content would not fit: smaller gaps, slightly smaller advice */
.panel.tight .advice { margin-top: .5vh; padding-top: .4vh; padding-bottom: .5vh; }
.panel.tight .advice-t { font-size: clamp(13px, 1.6vh, 19px); line-height: 1.25; }
.panel.tight .body { margin-top: .6vh; }
.panel.tight .facts { row-gap: .4vh; }
.panel.tight .facts small { min-height: 0; }
.panel.tight .days { margin-top: .6vh; padding-top: .5vh; }
.panel.tight .days li button { padding: 0 8px; }

/* Laptop screens with little height left after the browser bars (1366×768 → ~657px, 1920×1080 at 125% → ~730px) */
@media (min-width: 761px) and (max-height: 760px) {
  .w { --bar: 148px; }
  .modes { translate: none; }
  .panel { padding-top: 6px; padding-bottom: 2px; }
  .searchrow { gap: 3px; }
  .pick .v { font-size: 24px; }
  .pick[data-mode=wind] .v, .pick[data-mode=rain] .v { font-size: 22px; }
  .tags { gap: 0; }
  .tags li { font-size: 10.5px; line-height: 1.22; }
  .bar { padding-bottom: 4px; }
  .pick .g { height: 22px; }
  .pick .h { margin-top: 2px; }
  .search input { font-size: 19px; padding: 2px 0 5px; }
  .locnote { font-size: 11.5px; }
  .now .place { font-size: 32px; }
  .now .t { font-size: 44px; }
  .wx { width: 46px; height: 46px; }
  /* little height to spare: high and low stacked beside the (smaller) big number, not under it */
  .tbox { flex-direction: row; align-items: center; gap: 9px; }
  .hilo { flex-direction: column; gap: 1px; margin-top: 0; font-size: 14px; }
  .tline { margin-top: 2px; }
  .now .d { font-size: 17px; }
  .advice-t { font-size: 13.5px; }
  .body { margin-top: 6px; }
  .facts { gap: 3px 14px; }
  .facts span { font-size: 9.5px; }
  .facts b { font-size: 19px; margin-top: 0; }
  .facts small { font-size: 10px; min-height: 0; }
  .days { margin-top: 6px; padding-top: 5px; padding-bottom: 3px; }
  .days h2 { margin-bottom: 2px; }
  .days li { line-height: 1.1; }
  .days .di svg { width: 15px; height: 15px; }
}
/* Still too short (a small window): the panel scrolls, and says so with a thin visible bar */
.panel.scrolls { scrollbar-width: thin; scrollbar-color: rgba(247, 243, 234, .35) transparent; }

@media (prefers-reduced-motion: reduce) {
  .band i { animation: none; }
  .wx svg * { animation: none !important; }
  .sun::before { animation: none; }
  .w.ready .map-shapes, .w.ready .lay, .w.ready .sky, .w.ready .wash, .w.ready .shade, .w.ready .sun, .w.ready .sunset { transition: none; }
}