:root{
  --dark:#12241B;
  --bone:#F6F5EF;
  --bone-2:#EFEEE4;
  --bone-3:#E6E3D6;
  --pine:#1F3B2D;
  --pine-soft:#2C5142;
  --sage:#7C9473;
  --sage-strong:#3E7A54;
  --sage-light:#C7D3BE;
  --gold:#E3B23C;
  --gold-ink:#412402;
  --ink:#1B1B18;
  --ink-soft:#5B5B52;
  --ink-faint:#8A8A7E;
  --cream-soft:#A9B5A0;
  --link:#1F5B47;
  --line:#DEDBCC;
  --line-2:#E3E0D2;
  --page-bg:#1A1A1A;
  --card-bg:#262626;
  --card-line:#343434;
  --card-icon-bg:#323232;
  --hero-image:url('ekorama-hero-bg.svg');
  --cause-tree:#1F3B2D;
  --cause-pet:#C98A2C;
  --on-tree:#F6F5EF;
  --on-pet:#412402;
  --ring-track:#DEDBCC;
  --err:#A33B2A;
  --surface:#FFFFFF;
  --on-pine:#F6F5EF;
  --panel:#24402F;
  --panel-ink:#F6F5EF;
  --panel-soft:#C7D3BE;

  /* Apple-style motion & materials (see "Apple design pass" notes below).
     --ease-spring is a critically damped spring (damping 1.0, response
     0.35s) sampled into CSS linear(); browsers without linear() keep the
     close cubic-bezier fallback. Pair it with --spring-dur — a spring has
     no real "duration", this is just where it visibly settles. */
  --ease-spring:cubic-bezier(.22,.61,.36,1);
  --ease-spring-rotate:cubic-bezier(.22,.61,.36,1);
  --spring-dur:.5s;
  --press-scale:.97;
  --chrome-bg:rgba(246,245,239,.72);
  --material-bg:rgba(250,249,244,.5);
  --material-edge:rgba(255,255,255,.55);
}
@supports (transition-timing-function: linear(0, 1)){
  :root{
    /* Rotation spring (damping 0.8, response 0.4) — the one place a small
       overshoot is right, per Apple's own rotation values. */
    --ease-spring-rotate:linear(0, 0.0417 3.3%, 0.1406 6.7%, 0.2666 10%, 0.3993 13.3%, 0.5257 16.7%, 0.6387 20%, 0.7348 23.3%, 0.8134 26.7%, 0.8753 30%, 0.9223 33.3%, 0.9567 36.7%, 0.9809 40%, 0.997 43.3%, 1.0069 46.7%, 1.0124 50%, 1.0148 53.3%, 1.0151 56.7%, 1.0141 60%, 1.0124 63.3%, 1.0105 66.7%, 1.0085 70%, 1.0066 73.3%, 1.005 76.7%, 1.0036 80%, 1.0025 83.3%, 1.0016 86.7%, 1.001 90%, 1.0005 93.3%, 1.0002 96.7%, 1);
    --ease-spring:linear(0, 0.0547 4.2%, 0.1726 8.3%, 0.309 12.5%, 0.4408 16.7%, 0.5577 20.8%, 0.656 25%, 0.7361 29.2%, 0.7997 33.3%, 0.8493 37.5%, 0.8874 41.7%, 0.9164 45.8%, 0.9383 50%, 0.9547 54.2%, 0.9668 58.3%, 0.9758 62.5%, 0.9824 66.7%, 0.9872 70.8%, 0.9908 75%, 0.9934 79.2%, 0.9952 83.3%, 0.9966 87.5%, 0.9975 91.7%, 0.9982 95.8%, 1);
  }
}

/* Results-family dark mode (sonuçlar/görseller/videolar/haberler only —
   toggled by the header sun/moon button, see app.js). Scoped to
   [data-theme="dark"] on <html>, which only these 4 pages ever set, so
   the home hero and auth pages (already fixed-dark-panel designs) never
   pick this up even though they share style.css. Only the tokens that
   actually need to flip are redefined here; accent colors (pine, sage,
   gold, panel/wx greens) stay the same in both themes since they already
   read fine against a dark page background. */
:root[data-theme="dark"]{
  --bone:#141310;
  --bone-2:#1D1C16;
  --bone-3:#28261C;
  --surface:#221F17;
  --ink:#EDEAE0;
  --ink-soft:#A9A697;
  --ink-faint:#78756A;
  --line:#332F24;
  --line-2:#332F24;
  --ring-track:#332F24;
  --link:#7FC79A;
  --err:#E07A61;
  --chrome-bg:rgba(20,19,16,.72);
  --material-bg:rgba(30,28,22,.55);
  --material-edge:rgba(255,255,255,.07);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--bone);
  color:var(--ink);
  font-family:'Red Hat Text','Red Hat Display',sans-serif;
  line-height:1.5;
  transition:background-color .32s ease, color .32s ease;
}
a{color:inherit;}
.voice{font-family:'Red Hat Display',sans-serif;}
.logo-word{
  font-family:'Caacupe One',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.03em;
  line-height:1;
}

/* =========================================================
   HOME PAGE (ekorama-anasayfa)
   ========================================================= */
.hero-dark{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--page-bg);
  padding:5px 5px 61px;
}
.hero-dark::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:23px;
  background:var(--dark) var(--hero-image) center/cover no-repeat;
  z-index:0;
}
.hero-dark::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:23px;
  background:linear-gradient(180deg, rgba(10,20,15,0.42) 0%, rgba(10,20,15,0.18) 42%, rgba(10,20,15,0.66) 100%);
  pointer-events:none;
  z-index:1;
}
.hero-dark > *{position:relative;z-index:2;}
.hero-dark header{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:18px 24px 0;
}
.hero-dark .logo{display:flex;align-items:center;justify-content:center;text-decoration:none;}
.hero-dark .logo-word{font-size:26px;color:var(--bone);}

.hero{
  max-width:720px;
  margin:auto;
  padding:32px 24px 0;
  text-align:center;
}
.hero h1{
  font-size:clamp(32px, 4.4vw, 50px);
  font-weight:700;
  letter-spacing:-0.025em; /* large display text: tighter tracking */
  color:var(--bone);
  line-height:1.08;        /* ...and tighter leading */
  margin-bottom:16px;
}
.hero p{
  color:var(--cream-soft);
  font-size:16px;line-height:1.55;
  max-width:440px;
  margin:0 auto 40px;
}

/* Home search field: a light frosted material over the photo (light
   materials mark the interactive element — Apple design pass). On focus it
   grows slightly toward you, turns near-opaque for legibility, and the
   gold glow materializes on the site spring and then holds still — no
   endless "breathing" loop. */
.search-box{
  position:relative;max-width:680px;margin:0 auto;
  transition:transform var(--spring-dur) var(--ease-spring);
}
.search-box:focus-within{transform:scale(1.012);}
.search-box input{
  width:100%;
  height:52px;
  border:1px solid rgba(255,255,255,0.35);
  background:rgba(246,245,239,0.84);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 14px 34px -14px rgba(0,0,0,0.55);
  border-radius:26px;
  padding:0 58px 0 24px;
  font-size:15.5px;
  font-family:'Red Hat Text','Red Hat Display',sans-serif;
  color:var(--ink);
  outline:none;
  position:relative;
  z-index:1;
  transition:background-color .3s ease, border-color .3s ease;
}
.search-box input:focus{background:rgba(246,245,239,0.96);border-color:rgba(255,255,255,0.6);}
/* Focus glow on its own layer so it fades out as smoothly as it fades in
   (animating the input's own box-shadow snapped off on blur). It grows
   from a tight ring to its full spread, then holds. */
.search-box::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:52px;
  border-radius:26px;
  pointer-events:none;
  z-index:0;
  opacity:0;
  transform:scale(.97);
  box-shadow:
    0 0 0 1px rgba(227,178,60,0.5),
    0 0 20px 3px rgba(227,178,60,0.34),
    0 0 50px 10px rgba(227,178,60,0.17);
  transition:opacity .45s ease, transform var(--spring-dur) var(--ease-spring);
}
.search-box:focus-within::before{opacity:1;transform:scale(1);}
@media (prefers-reduced-motion: reduce){
  .search-box,.search-box::before{transition:opacity .2s ease;transform:none !important;}
}
@media (prefers-reduced-transparency: reduce){
  .search-box input{background:var(--bone);-webkit-backdrop-filter:none;backdrop-filter:none;}
}
.search-box input::placeholder{color:#8F8D80;letter-spacing:0.005em;}
.search-btn{
  position:absolute;
  right:7px;
  top:7px;
  z-index:2;
  width:38px;
  height:38px;
  border-radius:50%;
  border:none;
  background:var(--gold);
  color:var(--gold-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:filter .15s ease, scale .12s ease-out;
}
.search-btn:hover{filter:brightness(1.08);}

/* ---- donation widget shared shell ---- */
.donate-widget{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  margin-top:44px;
}
/* Frosted control floating over the photo: translucent material with a
   bright top edge (light catching the glass) instead of a flat tint. */
.donate-widget .cause-toggle{
  position:relative;
  display:inline-flex;
  background:rgba(255,255,255,0.08);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,0.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 24px -12px rgba(0,0,0,0.5);
  border-radius:24px;
  padding:4px;
  gap:4px;
}
.donate-widget .toggle-thumb{
  position:absolute;top:4px;bottom:4px;left:0;
  border-radius:20px;background:#1F3B2D;z-index:0;
  transition:transform var(--spring-dur) var(--ease-spring), width var(--spring-dur) var(--ease-spring), background-color .35s ease;
}
.donate-widget .cause-toggle button{
  border:none;border-radius:20px;padding:8px 18px;font-size:13px;font-weight:500;
  display:flex;align-items:center;gap:6px;cursor:pointer;background:transparent;
  color:var(--cream-soft);font-family:'Red Hat Text','Red Hat Display',sans-serif;
  position:relative;z-index:1;transition:color .3s ease, scale .12s ease-out;white-space:nowrap;
}
.donate-widget .cause-toggle button:active{scale:var(--press-scale);transition-duration:.08s;}
.donate-widget .cause-panel{
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.donate-widget .donate-btn{
  display:none;border:none;border-radius:20px;padding:10px 22px;
  font-size:13px;font-weight:500;background:var(--gold);color:var(--gold-ink);
  cursor:pointer;align-items:center;gap:6px;font-family:'Red Hat Text','Red Hat Display',sans-serif;
  transition:scale .12s ease-out;
}
.hero-auth{font-size:12.5px;color:var(--cream-soft);}
.hero-auth a,.hero-auth button{
  color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:2px;
  background:none;border:none;cursor:pointer;font-family:inherit;font-size:inherit;padding:0;
}

/* Cause switch animates in app.js (initFullPanel switchTo, Web Animations). */
@media (prefers-reduced-transparency: reduce){
  .donate-widget .cause-toggle{background:#1E2C24;-webkit-backdrop-filter:none;backdrop-filter:none;}
  .scroll-cue{background:var(--dark);-webkit-backdrop-filter:none;backdrop-filter:none;}
}
/* Deliberately no will-change on .cause-panel: will-change of filter or
   opacity makes it a "backdrop root", and the ring's frosted disc inside
   could then no longer blur the photo behind it. */
@media (prefers-reduced-motion: reduce){
  .toggle-thumb{transition:background-color .2s ease;}
  .donate-widget .cause-toggle button:active,.scroll-cue:active{scale:none;}
}

/* Progress ring as a frosted glass disc (same material as the cause
   toggle above it): translucent fill + backdrop blur, a bright top edge
   where light catches the glass. One even blur across the whole disc. */
.ring-wrap{
  position:relative;width:140px;height:140px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,0.08);
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 18px 40px -18px rgba(0,0,0,0.6);
}
/* Activity-ring colouring: the svg's `color` is the cause colour (set in
   app.js), the track draws it at 20% and the progress arc glows with it. */
.ring-svg{grid-area:1/1;color:#7C9473;transition:color .3s ease;}
.ring-svg #ring{filter:drop-shadow(0 0 5px currentColor);}
.ring-center{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.ring-center .icon{font-size:24px;color:var(--sage);}
.ring-count{
  display:flex;align-items:baseline;gap:4px;margin-top:4px;
  font-family:'Red Hat Display',sans-serif;color:var(--bone);
  font-variant-numeric:tabular-nums;
}
.ring-count b{font-size:22px;font-weight:700;letter-spacing:-0.02em;line-height:1;}
.ring-count span{font-size:12.5px;font-weight:500;color:var(--cream-soft);letter-spacing:0.01em;}
@media (prefers-reduced-transparency: reduce){
  .ring-wrap{background:#1E2C24;-webkit-backdrop-filter:none;backdrop-filter:none;}
}
.donate-caption{font-size:13px;color:var(--cream-soft);text-align:center;max-width:260px;min-height:20px;}

.scroll-cue{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  width:46px;height:46px;border-radius:50%;
  background:rgba(18,36,27,0.55);border:1px solid rgba(246,245,239,0.14);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  display:flex;align-items:center;justify-content:center;color:var(--bone);
  cursor:pointer;z-index:3;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 18px rgba(0,0,0,0.4);
  /* Hints a few times, then rests — an endless bob is just noise. */
  animation:cue-bob 2.4s ease-in-out 1s 3;
  transition:opacity .35s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}
.scroll-cue:hover{background:rgba(31,59,45,0.8);border-color:rgba(246,245,239,0.3);}
.scroll-cue:active{scale:var(--press-scale);transition-duration:.08s;}
@keyframes cue-bob{ 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,7px);} }
@media (prefers-reduced-motion: reduce){ .scroll-cue{animation:none;} }

.why{
  max-width:1100px;margin:0 auto;padding:96px 56px 56px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.why-item{
  background:var(--card-bg);border:1px solid var(--card-line);border-radius:20px;
  padding:28px 26px 30px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.25), 0 12px 30px -10px rgba(0,0,0,0.45);
  transition:transform var(--spring-dur) var(--ease-spring), box-shadow .3s ease, border-color .3s ease,
             opacity .45s ease, filter .45s ease;
}
/* Scroll reveal (app.js initReveal adds html.js-reveal, then .revealed per
   card) — staggered so the three arrive left to right. */
.js-reveal .why-item:not(.revealed){opacity:0;transform:translateY(18px) scale(.98);filter:blur(4px);}
.js-reveal .why-item:nth-child(2){transition-delay:0s,0s,0s,.07s,.07s;}
.js-reveal .why-item:nth-child(3){transition-delay:0s,0s,0s,.14s,.14s;}
.js-reveal .why-item.revealed:nth-child(2){transition-delay:.07s,0s,0s,.07s,.07s;}
.js-reveal .why-item.revealed:nth-child(3){transition-delay:.14s,0s,0s,.14s,.14s;}
.js-reveal .why-item.revealed:hover{transition-delay:0s;}
.why-item:hover{
  transform:translateY(-3px);border-color:#454545;
  box-shadow:0 2px 6px rgba(0,0,0,0.3), 0 20px 44px -12px rgba(0,0,0,0.55);
}
.why-item .icon-box{
  width:36px;height:36px;border-radius:9px;background:var(--card-icon-bg);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  color:var(--sage-light);font-size:18px;
}
.why-item h3{
  font-family:'Red Hat Display',sans-serif;font-size:18px;font-weight:600;letter-spacing:-0.01em;
  color:#FFFFFF;margin-bottom:8px;
}
.why-item p{font-size:14px;color:#B6B6B2;line-height:1.6;}

.hero-dark ~ footer{
  max-width:1040px;margin:20px auto 0;padding:24px 56px 40px;
  border-top:1px solid #2E2E2E;
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:#8E8E8A;
}
.hero-dark ~ footer a{color:#8E8E8A;text-decoration:none;margin-left:20px;}
.hero-dark ~ footer a:hover{color:#FFFFFF;}

@media (max-width:640px){
  /* svh = the screen height with the browser's address bar showing, so
     the scroll cue sits on screen instead of below the fold. */
  .hero-dark{min-height:100vh;min-height:100svh;padding-bottom:40px;}
  /* Taller than the box and anchored at the bottom: the scene (horizon,
     tree line) rides higher up the screen. */
  .hero-dark::after{background-size:auto 112%;background-position:center 100%;}
  .hero-dark header{padding:16px 24px 8px;}
  /* Content starts near the top instead of centring in the whole screen. */
  .hero{margin:2vh auto auto;padding-top:12px;}
  .hero p{margin-bottom:28px;}
  .hero h1{font-size:30px;}
  .why{grid-template-columns:1fr;padding:56px 20px 40px;gap:18px;}
  .hero-dark ~ footer{flex-direction:column;gap:12px;padding:24px;}
  .hero-dark ~ footer a{margin:0 10px;}
}

/* =========================================================
   RESULTS-FAMILY SHELL (sonuclar / gorseller / videolar / haberler)
   =========================================================
   Search box, tabs, filters and page content all share one left edge:
   32px side padding + 148px fixed-width logo + 31px gap = 211px, used as
   .navrow/.page/.img-page/.vid-page/.news-page's padding-left. Below
   640px that indent is dropped (see the media query at the end of this
   section) — the header wraps and there's no column to line up with. */
/* Translucent chrome: results scroll *under* a frosted bar instead of
   being cut off by an opaque strip. No permanent 1px divider either —
   a soft scroll-edge shade fades in only once content actually sits
   beneath the bar (.is-scrolled, toggled in app.js initScrollEdge). */
/* The frosted layer lives on ::before, not on .topbar itself: an element
   with backdrop-filter becomes a "backdrop root", and the filter menus /
   account panel nested inside it would then only blur the bar's own
   (empty) layer instead of the results behind them — text bled through. */
.topbar{
  position:sticky;top:0;z-index:20;
}
.topbar::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--chrome-bg);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  transition:background-color .32s ease;
}
.topbar::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:14px;
  background:linear-gradient(180deg, rgba(18,36,27,0.09), rgba(18,36,27,0));
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
:root[data-theme="dark"] .topbar::after{background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0));}
.topbar.is-scrolled::after{opacity:1;}
@media (prefers-reduced-transparency: reduce){
  .topbar::before{background:var(--bone);-webkit-backdrop-filter:none;backdrop-filter:none;}
}
@media (prefers-contrast: more){
  .topbar::before{background:var(--bone);-webkit-backdrop-filter:none;backdrop-filter:none;}
  .topbar{box-shadow:0 1px 0 var(--ink-faint);}
}
.topbar-inner{
  display:flex;align-items:center;gap:31px;
  padding:14px 32px 0;
}
/* Fixed size (not just flex-shrink:0) so the row's width math stays exact
   even before the logo's webfont has loaded — everything below that
   relies on the 32px+148px+31px = 211px alignment would otherwise jump
   sideways once Caacupé One swaps in. */
.topbar .logo{display:flex;align-items:center;width:148px;height:44px;flex-shrink:0;text-decoration:none;padding-bottom:2px;}
.topbar .logo-word{font-size:29px;color:var(--pine);}
@media (max-width:640px){ .topbar .logo-word{font-size:24px;} }

.search-form{position:relative;flex:1;max-width:620px;}
/* iOS-style filled search field: no outline at rest (it sits on the
   frosted topbar, so it's a solid fill — never stack glass on glass),
   darkens a touch on hover, and on focus lifts to the bright surface
   with a soft ring that springs out around it. */
.search-form input{
  width:100%;height:44px;
  border:1px solid transparent;
  background:var(--bone-2);border-radius:22px;
  padding:0 46px 0 18px;
  font-size:15px;font-family:'Red Hat Text','Red Hat Display',sans-serif;color:var(--ink);
  outline:none;
  transition:border-color .2s ease, box-shadow var(--spring-dur) var(--ease-spring), background-color .25s ease, color .3s ease;
}
.search-form input:hover{background:var(--bone-3);}
.search-form input:focus{
  background:var(--surface);border-color:rgba(124,148,115,0.55);
  box-shadow:0 0 0 4px rgba(124,148,115,0.16), 0 6px 18px -10px rgba(18,36,27,0.25);
}
@media (prefers-contrast: more){ .search-form input{border-color:var(--ink-faint);} }
.search-form button{
  position:absolute;right:5px;top:5px;
  width:34px;height:34px;border-radius:50%;border:none;
  background:var(--pine);color:var(--on-pine);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:scale .12s ease-out;
}

/* ---- tabs + filters share one row, indented to the 211px column ---- */
.navrow{
  display:flex;align-items:center;gap:18px;
  padding:0 32px 10px 211px;
  margin-top:12px;
  flex-wrap:wrap;
}
.navrow-sep{width:1px;height:20px;background:var(--line-2);flex-shrink:0;}

.tabs{display:flex;gap:6px;margin-left:-15px;}
.tabs a{
  display:flex;align-items:center;gap:7px;
  padding:8px 15px;font-size:14px;color:var(--ink-soft);
  text-decoration:none;border-radius:20px;white-space:nowrap;
  transition:background .22s ease, color .22s ease, scale .12s ease-out;
}
.tabs a svg{flex-shrink:0;}
.tabs a.active{background:var(--pine);color:#F6F5EF;font-weight:600;}
.tabs a.active:hover{background:var(--pine);color:#F6F5EF;}
.tabs a:not(.active):hover{background:var(--bone-2);color:var(--pine);}

/* ---- filters ---- */
.filters{display:flex;gap:6px;}
.filter{position:relative;}
.filter > button{
  display:flex;align-items:center;gap:5px;
  background:transparent;border:none;cursor:pointer;
  font-family:'Red Hat Text','Red Hat Display',sans-serif;font-size:13.5px;
  color:var(--ink-soft);padding:5px 10px;border-radius:16px;
  transition:background .2s ease, color .2s ease, scale .12s ease-out;white-space:nowrap;
}
.filter > button:hover{background:var(--bone-2);color:var(--pine);}
.filter.open > button{background:var(--pine);color:#F6F5EF;}
.filter.set > button{color:var(--pine);font-weight:500;}
.filter .chev{transition:transform .28s cubic-bezier(.22,.61,.36,1);}
.filter.open .chev{transform:rotate(180deg);}

/* Menus "materialize" from their trigger (transform-origin = the button
   that opened them): blur + scale + opacity move together on a critically
   damped spring, so the surface reads as frosted material arriving, not a
   flat fade. Closing runs the exact same path in reverse. */
.filter-menu{
  position:absolute;top:calc(100% + 7px);left:0;min-width:150px;
  background:var(--material-bg);border:1px solid var(--line-2);border-radius:13px;
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:inset 0 1px 0 var(--material-edge), 0 12px 32px -10px rgba(18,36,27,0.22);
  padding:5px;z-index:30;
  opacity:0;transform:translateY(-6px) scale(.94);transform-origin:top left;filter:blur(6px);
  pointer-events:none;
  transition:opacity .2s ease, transform var(--spring-dur) var(--ease-spring), filter .28s ease, background-color .3s ease, border-color .3s ease;
}
.filter.open .filter-menu{opacity:1;transform:translateY(0) scale(1);filter:blur(0);pointer-events:auto;}
.filter-menu button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:transparent;border:none;cursor:pointer;text-align:left;
  font-family:'Red Hat Text','Red Hat Display',sans-serif;font-size:13.5px;
  color:var(--ink);padding:8px 10px;border-radius:9px;
  transition:background .16s ease, scale .12s ease-out;
}
.filter-menu button:hover{background:var(--bone-2);}
.filter-menu button .tick{opacity:0;color:var(--pine);transition:opacity .16s ease;}
.filter-menu button[aria-checked="true"]{font-weight:600;color:var(--pine);}
.filter-menu button[aria-checked="true"] .tick{opacity:1;}
/* Reduced motion: a short cross-fade instead of the scale/blur materialize. */
@media (prefers-reduced-motion: reduce){
  .filter-menu,.acct{transform:none !important;filter:none !important;transition:opacity .18s ease;}
  .filter .chev{transition:none;}
}
@media (prefers-reduced-transparency: reduce){
  .filter-menu,.acct{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;}
}

/* ---- layout ---- */
.page{
  display:block;max-width:720px;margin:0;
  padding:28px 32px 64px 211px;
}
.meta{font-size:13px;color:var(--ink-faint);margin-bottom:22px;}
.status{font-size:14.5px;color:var(--ink-faint);padding:12px 0;}

.coming-soon{
  text-align:center;padding:72px 24px;max-width:440px;margin:0 auto;
}
.coming-soon h2{
  font-family:'Red Hat Display',sans-serif;font-size:22px;font-weight:700;
  color:var(--pine);margin-bottom:10px;
}
.coming-soon p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;}

/* ---- result card (web / video / news source row) ---- */
.result{margin-bottom:28px;}
.result .src{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.result .favicon{
  width:18px;height:18px;border-radius:4px;background:var(--bone-2);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--ink-faint);flex-shrink:0;overflow:hidden;
}
.result .favicon img{width:14px;height:14px;object-fit:contain;}
.result .domain{font-size:13px;color:var(--ink-soft);}
.result .path{font-size:13px;color:var(--ink-faint);}
.result h3{font-size:19px;font-weight:600;line-height:1.35;margin-bottom:5px;}
.result h3 a{color:var(--link);text-decoration:none;}
.result h3 a:hover{text-decoration:underline;}
.result p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;}
.result p .hl{color:var(--ink);font-weight:500;}

.ad-label{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:0.04em;
  color:var(--gold-ink);background:var(--gold);
  padding:1px 7px;border-radius:4px;margin-right:6px;vertical-align:2px;
}
.breaking-label{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:0.04em;
  color:#fff;background:#A33B2A;
  padding:1px 7px;border-radius:4px;margin-right:6px;vertical-align:2px;
}

/* ---- sponsored / affiliate strip (web results only) ---- */
.affiliate-strip{
  background:var(--bone-2);border:1px solid var(--line-2);border-radius:14px;
  padding:16px 18px;margin-bottom:24px;
  transition:background-color .3s ease, border-color .3s ease;
}
.sponsored-label{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:0.04em;
  color:var(--gold-ink);background:var(--gold);
  padding:2px 8px;border-radius:4px;margin-bottom:10px;
}
.affiliate-links{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.affiliate-links a{
  display:inline-flex;align-items:center;
  font-size:13.5px;font-weight:500;text-decoration:none;
  color:var(--on-pine);background:var(--pine);
  padding:8px 16px;border-radius:18px;
  transition:filter .15s ease, scale .12s ease-out;
}
.affiliate-links a:hover{filter:brightness(1.1);}
.affiliate-note{font-size:12px;color:var(--ink-faint);line-height:1.5;}

/* ---- pagination ---- */
.pagination{display:flex;gap:8px;margin-top:40px;flex-wrap:wrap;}
.pagination button{
  min-width:36px;height:36px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;gap:4px;padding:0 12px;
  font-family:'Red Hat Text','Red Hat Display',sans-serif;font-size:14px;color:var(--ink-soft);
  background:transparent;border:1px solid var(--line-2);cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.pagination button:hover:not(.active):not(:disabled){background:var(--bone-2);color:var(--pine);border-color:var(--line-2);}
.pagination button:active:not(:disabled){transform:scale(.95);}
.pagination button.active{background:var(--pine);color:var(--on-pine);border-color:var(--pine);font-weight:600;}
.pagination button:disabled{opacity:.4;cursor:default;}

/* ---- account + donation panel (results-family topbar: sonuçlar / görseller / videolar / haberler) ---- */
.mini-counter{
  margin-left:auto;flex-shrink:0;position:relative;z-index:30;
  display:flex;align-items:center;gap:8px;
  padding:6px 13px 6px 9px;border-radius:18px;background:var(--bone-2);
  border:none;cursor:pointer;
  font-family:'Red Hat Text','Red Hat Display',sans-serif;font-size:13px;color:var(--ink-soft);
  transition:background .25s ease, color .3s ease, scale .12s ease-out;
}
.mini-counter:hover{background:var(--bone-3);}
.mini-counter svg{flex-shrink:0;}
.mini-counter .ic{display:flex;color:var(--pine);transition:color .3s ease;}
.mini-counter b{color:var(--ink);font-weight:600;}
.ring-track{stroke:var(--ring-track);}
.mini-ring-wrap{position:relative;width:26px;height:26px;display:flex;align-items:center;justify-content:center;}
.mini-ring-wrap .ic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
@media (max-width:640px){ .mini-counter span.txt{display:none;} }

/* Sits right after .theme-toggle in the topbar — that button (not this
   one) carries the margin-left:auto that pushes both to the row's end,
   so this only needs a small gap from it. */
.counter-wrap{position:relative;flex-shrink:0;margin-left:8px;}
.counter-wrap .mini-counter{margin-left:0;}

/* ---- theme toggle (results-family topbar only) ---- */
.theme-toggle{
  margin-left:auto;flex-shrink:0;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--bone-2);color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  position:relative;overflow:hidden;
  transition:background-color .25s ease, border-color .3s ease, color .25s ease, scale .12s ease-out;
}
.theme-toggle:hover{background:var(--bone-3);color:var(--pine);}
.theme-toggle svg{
  position:absolute;
  transition:transform .6s var(--ease-spring-rotate), opacity .3s ease;
}
.theme-toggle .ic-sun{opacity:1;transform:rotate(0deg) scale(1);}
.theme-toggle .ic-moon{opacity:0;transform:rotate(-90deg) scale(.4);}
[data-theme="dark"] .theme-toggle .ic-sun{opacity:0;transform:rotate(90deg) scale(.4);}
[data-theme="dark"] .theme-toggle .ic-moon{opacity:1;transform:rotate(0deg) scale(1);}
@media (prefers-reduced-motion: reduce){ .theme-toggle svg{transition:opacity .2s ease;} }

/* Bigger surface = thicker material: stronger blur and a deeper shadow
   than the small filter menus. Anchored to the counter button it opens
   from (top right). */
.acct{
  position:absolute;top:calc(100% + 10px);right:0;width:318px;
  background:var(--material-bg);border:1px solid var(--line-2);border-radius:16px;
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  box-shadow:inset 0 1px 0 var(--material-edge), 0 24px 56px -16px rgba(18,36,27,0.32);
  padding:14px;z-index:40;
  opacity:0;transform:translateY(-8px) scale(.94);transform-origin:top right;filter:blur(8px);
  pointer-events:none;
  transition:opacity .22s ease, transform var(--spring-dur) var(--ease-spring), filter .3s ease, background-color .3s ease, border-color .3s ease;
}
.counter-wrap.open .acct{opacity:1;transform:translateY(0) scale(1);filter:blur(0);pointer-events:auto;}
/* Inside the glass panel, the grouped sections (profile head, stats,
   cause toggle, ad block, badge) become faint tints of the same
   material instead of opaque cream blocks that hide the frosting. */
.acct{
  --bone-2:rgba(31,59,45,0.07);
  --bone-3:rgba(31,59,45,0.12);
  --surface:rgba(255,255,255,0.55);
  --line-2:rgba(31,59,45,0.10);
}
:root[data-theme="dark"] .acct{
  --bone-2:rgba(255,255,255,0.06);
  --bone-3:rgba(255,255,255,0.10);
  --surface:rgba(255,255,255,0.08);
  --line-2:rgba(255,255,255,0.09);
}
/* The panel's own fill/border must not pick up those local overrides. */
.acct{background:var(--material-bg);border-color:rgba(255,255,255,0.45);}
:root[data-theme="dark"] .acct{border-color:rgba(255,255,255,0.08);}
@media (prefers-reduced-transparency: reduce){
  .acct{background:#FFFFFF;--bone-2:#EFEEE4;--bone-3:#E6E3D6;--surface:#FFFFFF;--line-2:#E3E0D2;border-color:#E3E0D2;}
  :root[data-theme="dark"] .acct{background:#221F17;--bone-2:#1D1C16;--bone-3:#28261C;--surface:#221F17;--line-2:#332F24;border-color:#332F24;}
}

.acct-head{background:var(--bone-2);border-radius:12px;padding:18px 16px 16px;text-align:center;transition:background-color .3s ease;}
.acct-avatar{position:relative;width:64px;height:64px;margin:0 auto 12px;}
.acct-avatar .who{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);}
.acct-name{font-size:16px;font-weight:700;color:var(--ink);font-family:'Red Hat Display',sans-serif;overflow-wrap:break-word;}
.acct-badge{
  display:inline-block;margin-top:6px;font-size:11.5px;color:var(--ink-soft);
  background:var(--surface);border-radius:20px;padding:3px 11px;
}
.acct-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.acct-actions button,.acct-actions a{
  width:100%;padding:10px 0;border-radius:22px;
  font-family:'Red Hat Text','Red Hat Display',sans-serif;
  font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:filter .2s ease, background .2s ease, scale .12s ease-out;
}
.acct-signin{background:var(--pine);color:var(--on-pine);border:none;}
.acct-signin:hover{filter:brightness(1.08);}
.acct-signup{background:transparent;color:var(--ink);border:1px solid var(--line-2);}
.acct-signup:hover{background:var(--surface);}
.acct-danger{color:var(--err);border-color:var(--err);}
.acct-danger:hover{background:rgba(163,59,42,0.08);}

.acct-label{
  font-size:11.5px;font-weight:600;letter-spacing:.03em;color:var(--ink-faint);
  text-transform:uppercase;margin:16px 0 8px 4px;
}
.acct-stats{background:var(--bone-2);border-radius:12px;overflow:hidden;transition:background-color .3s ease;}
.acct-stat{display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:13.5px;color:var(--ink);}
.acct-stat + .acct-stat{border-top:1px solid var(--line-2);}
.acct-stat .ic{display:flex;flex-shrink:0;}
.acct-stat .n{margin-left:auto;font-weight:700;font-family:'Red Hat Display',sans-serif;}

/* Cause toggle in the account panel — mirrors the home page toggle: a
   recessed track in the glass with one thumb that springs between the two
   sides (position + width on the site spring, colour cross-fading to the
   cause colour), driven by app.js paintToggleThumb. */
.acct-toggle{
  position:relative;display:flex;gap:4px;background:var(--bone-2);border-radius:20px;padding:4px;
  box-shadow:inset 0 1px 2px rgba(18,36,27,0.08);
  transition:background-color .3s ease;
}
:root[data-theme="dark"] .acct-toggle{box-shadow:inset 0 1px 2px rgba(0,0,0,0.35);}
.acct-toggle-thumb{
  position:absolute;top:4px;bottom:4px;left:0;z-index:0;
  border-radius:17px;opacity:0;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px -4px rgba(18,36,27,0.35);
  transition:
    transform var(--spring-dur) var(--ease-spring),
    width var(--spring-dur) var(--ease-spring),
    background-color .35s ease,
    opacity .2s ease;
}
@media (prefers-reduced-motion: reduce){ .acct-toggle-thumb{transition:background-color .2s ease, opacity .2s ease;} }
.acct-toggle button{
  position:relative;z-index:1;
  flex:1;border:none;border-radius:17px;padding:7px 0;cursor:pointer;
  font-family:'Red Hat Text','Red Hat Display',sans-serif;font-size:12.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:transparent;color:var(--ink-soft);
  transition:color .3s ease, scale .12s ease-out;
}

/* ---- "reklam izle, katkı yap" (rewarded-ad donation credit) ---- */
.ad-reward-btn{
  width:100%;padding:10px 0;border-radius:22px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-family:'Red Hat Text','Red Hat Display',sans-serif;font-size:13.5px;font-weight:600;
  background:var(--gold);color:var(--gold-ink);
  transition:filter .2s ease, background .2s ease, opacity .2s ease, scale .12s ease-out;
}
.ad-reward-btn:hover:not(:disabled){filter:brightness(1.06);}
.ad-reward-btn:disabled{cursor:default;opacity:.75;}
.ad-reward-btn .ic{display:flex;flex-shrink:0;}
.ad-reward-hint{font-size:11.5px;color:var(--ink-faint);text-align:center;margin-top:8px;}
.ad-reward-error{
  display:none;font-size:12px;color:var(--err);background:rgba(163,59,42,0.08);
  border-radius:9px;padding:7px 10px;margin-top:8px;text-align:center;
}
.ad-reward-error.show{display:block;}
.ad-reward-guest{
  font-size:12.5px;color:var(--ink-soft);text-align:center;
  background:var(--bone-2);border-radius:12px;padding:11px 12px;
  transition:background-color .3s ease;
}
.ad-reward-guest a{color:var(--pine);font-weight:600;text-decoration:underline;text-underline-offset:2px;}

.acct-note{font-size:11.5px;line-height:1.5;color:var(--ink-faint);margin:14px 4px 0;}
.acct-links{display:flex;justify-content:center;gap:18px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);}
.acct-links a{font-size:12px;color:var(--ink-soft);text-decoration:none;}
.acct-links a:hover{color:var(--pine);text-decoration:underline;}

/* Phones: pinned to the viewport (not the counter button) so it can never
   hang off either edge, capped to the screen height with its own scroll,
   and a denser material so busy content behind (e.g. the dark weather
   card) doesn't muddy the text. */
@media (max-width:640px){
  .acct{
    position:fixed;top:62px;left:12px;right:12px;width:auto;
    max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain;
    background:rgba(250,249,244,.86);
  }
  :root[data-theme="dark"] .acct{background:rgba(30,28,22,.88);}
}

@media (max-width:900px){
  .topbar-inner{flex-wrap:wrap;padding:12px 18px 0;}
}

/* Below 640px the 211px column-alignment stops applying (see the section
   banner above) — img-page/vid-page/news-page also restructure their
   cards at their own, wider breakpoints (760/860/900px) for unrelated
   reasons; only the left-alignment piece is deferred to 640px here. */
/* Phone topbar: logo + toggle + counter on row one, a full-width search
   field on row two; tabs and filters become one horizontally scrolling
   strip each instead of wrapping into a pile. */
@media (max-width:640px){
  .topbar-inner{flex-wrap:wrap;gap:10px 8px;padding:10px 16px 0;}
  .topbar .logo{width:auto;height:38px;}
  .search-form{order:3;flex:1 0 100%;max-width:none;}
  .navrow{
    padding:0 0 8px;margin-top:10px;gap:4px;
    flex-direction:column;align-items:stretch;flex-wrap:nowrap;
  }
  .navrow-sep{display:none;}
  .tabs, .filters{
    margin-left:0;padding:0 16px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .tabs::-webkit-scrollbar, .filters::-webkit-scrollbar{display:none;}
  .tabs{position:relative;}
  .tabs a{padding:7px 13px;font-size:13.5px;flex-shrink:0;}
  .filter > button{white-space:nowrap;}
  /* Filters keep overflow visible so their dropdown menus aren't clipped;
     tightened instead so all three fit one 343px line. */
  .filters{overflow:visible;gap:0;padding:0 8px;}
  .filter > button{font-size:13px;padding:5px 8px;gap:3px;}
  .page{padding:20px 18px 48px;}
  .img-page{padding:16px 14px 48px;}
  .vid-page{padding:16px 16px 48px;}
  .news-page{padding:16px 16px 48px;}
}

/* =========================================================
   IMAGE RESULTS (gorseller.html)
   ========================================================= */
.img-page{display:block;max-width:1560px;margin:0;padding:20px 32px 64px;}
.img-meta{font-size:13px;color:var(--ink-faint);margin-bottom:18px;}

.img-grid{column-count:5;column-gap:14px;}
@media (max-width:1400px){ .img-grid{column-count:4;} }
@media (max-width:1080px){ .img-grid{column-count:3;} }
@media (max-width:760px){  .img-grid{column-count:2;} }
@media (max-width:440px){  .img-grid{column-count:1;} }

.img-card{
  break-inside:avoid;margin-bottom:14px;border-radius:12px;overflow:hidden;
  background:var(--bone-2);position:relative;cursor:zoom-in;display:block;
  border:1px solid transparent;
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease, background-color .3s ease;
}
.img-card:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:0 10px 26px -10px rgba(18,36,27,0.3);}
.img-card img{display:block;width:100%;height:auto;}

.img-card .cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;
  background:linear-gradient(180deg, rgba(12,20,16,0) 0%, rgba(12,20,16,0.82) 70%);
  color:#F6F5EF;font-size:11.5px;line-height:1.35;
  opacity:0;transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;pointer-events:none;
}
.img-card:hover .cap{opacity:1;transform:translateY(0);}
.img-card .cap b{display:block;font-weight:600;margin-bottom:2px;}
.img-card .cap span{color:#C3CDBC;}

.lightbox{
  position:fixed;inset:0;z-index:50;background:rgba(10,18,14,0.88);
  display:none;align-items:center;justify-content:center;padding:32px;
  opacity:0;transition:opacity .28s ease;
}
.lightbox.open{display:flex;opacity:1;}
.lightbox-inner{
  max-width:min(940px,92vw);width:100%;background:var(--bone);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.6);
  transform:scale(.97);transition:transform .28s cubic-bezier(.22,.61,.36,1), background-color .3s ease;
}
.lightbox.open .lightbox-inner{transform:scale(1);}
.lightbox-media{background:var(--bone-2);display:flex;align-items:center;justify-content:center;transition:background-color .3s ease;}
.lightbox-media img{display:block;max-width:100%;max-height:min(62vh,520px);}
.lightbox-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;}
.lightbox-bar .t{font-size:14px;font-weight:500;color:var(--ink);}
.lightbox-bar .s{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
.lightbox-bar a{
  font-size:12.5px;font-weight:500;text-decoration:none;
  color:var(--on-pine);background:var(--pine);padding:8px 14px;border-radius:18px;white-space:nowrap;
  transition:scale .12s ease-out;
}
.lightbox-close{
  position:absolute;top:22px;right:26px;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(246,245,239,0.2);background:rgba(255,255,255,0.06);
  color:#F6F5EF;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
@media (prefers-reduced-motion: reduce){ .img-card,.lightbox,.lightbox-inner{transition:none;} }

/* =========================================================
   VIDEO RESULTS (videolar.html)
   ========================================================= */
.vid-page{display:block;max-width:1240px;margin:0;padding:20px 32px 64px;}
.vid-meta{font-size:13px;color:var(--ink-faint);margin-bottom:20px;}

.vid-list{display:flex;flex-direction:column;gap:20px;}
.vid{
  display:grid;grid-template-columns:268px minmax(0,1fr);gap:18px;
  padding:10px;margin:-10px;border-radius:14px;text-decoration:none;
  transition:background .2s ease;
}
.vid:hover{background:var(--bone-2);}

.vid-thumb{position:relative;border-radius:11px;overflow:hidden;aspect-ratio:16/9;background:var(--bone-2);}
.vid-thumb img{display:block;width:100%;height:100%;object-fit:cover;}
.vid-thumb .dur{
  position:absolute;right:7px;bottom:7px;background:rgba(10,18,14,0.82);color:#F6F5EF;
  font-size:11.5px;font-weight:600;padding:2px 6px;border-radius:5px;letter-spacing:.02em;
}
.vid-thumb .play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .22s ease;
}
.vid-thumb .play span{
  width:48px;height:48px;border-radius:50%;background:rgba(18,36,27,0.82);
  display:flex;align-items:center;justify-content:center;color:#F6F5EF;
  transform:scale(.88);transition:transform .24s cubic-bezier(.22,.61,.36,1);
}
.vid:hover .play{opacity:1;}
.vid:hover .play span{transform:scale(1);}

.vid-body{min-width:0;padding-top:2px;}
.vid-body h3{
  font-family:'Red Hat Display',sans-serif;font-size:17.5px;font-weight:600;line-height:1.35;
  color:var(--link);margin-bottom:6px;
}
.vid:hover .vid-body h3{text-decoration:underline;}
.vid-src{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px;color:var(--ink-soft);margin-bottom:7px;}
.vid-src .chan{display:flex;align-items:center;gap:6px;}
.vid-src .avatar{
  width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;color:#F6F5EF;flex-shrink:0;background:var(--pine);
}
.vid-src .dot{color:var(--ink-faint);}
.vid-body p{
  font-size:14px;color:var(--ink-soft);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

@media (max-width:760px){
  .vid{grid-template-columns:1fr;gap:12px;}
  .vid-thumb{max-width:100%;}
}
@media (prefers-reduced-motion: reduce){ .vid,.vid-thumb .play,.vid-thumb .play span{transition:none;} }

/* =========================================================
   NEWS RESULTS (haberler.html)
   ========================================================= */
.news-page{display:block;max-width:1240px;margin:0;padding:20px 32px 64px;}
.news-meta{font-size:13px;color:var(--ink-faint);margin-bottom:20px;}

.news-lead{
  display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:26px;align-items:stretch;
  padding:14px;margin:0 -14px 30px;border-radius:16px;text-decoration:none;
  transition:background .2s ease;
}
.news-lead:hover{background:var(--bone-2);}
.news-lead .shot{border-radius:12px;overflow:hidden;aspect-ratio:16/10;order:2;background:var(--bone-2);}
.news-lead .shot img{display:block;width:100%;height:100%;object-fit:cover;}
.news-lead .body{order:1;display:flex;flex-direction:column;justify-content:center;}
.news-lead h2{
  font-family:'Red Hat Display',sans-serif;font-size:26px;font-weight:700;line-height:1.25;
  color:var(--link);letter-spacing:-0.01em;margin:8px 0 10px;
}
.news-lead:hover h2{text-decoration:underline;}
.news-lead p{font-size:15px;color:var(--ink-soft);line-height:1.6;}

.news-list{display:flex;flex-direction:column;}
.news{
  display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:20px;
  padding:18px 14px;margin:0 -14px;border-top:1px solid var(--line-2);
  text-decoration:none;transition:background .2s ease;
}
.news:hover{background:var(--bone-2);}
.news .shot{border-radius:10px;overflow:hidden;aspect-ratio:16/10;align-self:start;background:var(--bone-2);}
.news .shot img{display:block;width:100%;height:100%;object-fit:cover;}
.news h3{
  font-family:'Red Hat Display',sans-serif;font-size:17px;font-weight:600;line-height:1.35;
  color:var(--link);margin:6px 0 6px;
}
.news:hover h3{text-decoration:underline;}
.news p{
  font-size:14px;color:var(--ink-soft);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.news-src{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft);}
.news-src .logo-dot{
  width:18px;height:18px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;color:#F6F5EF;flex-shrink:0;background:var(--pine);
}
.news-src .outlet{font-weight:600;color:var(--ink);}
.news-src .dot{color:var(--ink-faint);}
.news-src .fresh{color:var(--err);font-weight:600;}

@media (max-width:860px){
  .news-lead{grid-template-columns:1fr;gap:14px;}
  .news-lead .shot{order:1;}
  .news-lead .body{order:2;}
  .news-lead h2{font-size:21px;}
  .news{grid-template-columns:1fr;gap:12px;}
  .news .shot{order:-1;}
}
@media (prefers-reduced-motion: reduce){ .news,.news-lead{transition:none;} }

/* =========================================================
   AUTH PAGES (giris.html / sifre-yenile.html)
   ========================================================= */
.auth-body{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:#12241B var(--hero-image) center/cover no-repeat fixed;
  position:relative;
}
.auth-body::before{
  content:"";position:fixed;inset:0;
  background:linear-gradient(180deg, rgba(10,20,15,0.5), rgba(10,20,15,0.72));
}
/* Apple design pass: the card is a thick light material floating over
   the photo (big surface = strong blur + deep shadow, bright top edge),
   it materializes on load, and its height glides between modes (see the
   small script at the bottom of giris.html). */
.auth-card{
  position:relative;width:100%;max-width:412px;
  /* Frosted glass, same material as the home page's toggle and ring:
     mostly the blurred photo showing through, a faint light tint that's
     a touch brighter at the top, and a bright top edge. */
  background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  -webkit-backdrop-filter:blur(32px) saturate(170%);backdrop-filter:blur(32px) saturate(170%);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:22px;padding:38px 34px 30px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.22), 0 30px 70px -20px rgba(0,0,0,0.6);
  animation:auth-card-in .6s var(--ease-spring) both;

  /* Content sits on dark glass now, so the card re-points the shared
     tokens at light values (vibrancy: higher contrast over translucency)
     — every auth rule below keeps using var(--ink) etc. unchanged. */
  --ink:#F6F5EF;
  --ink-soft:rgba(246,245,239,0.8);
  --ink-faint:rgba(246,245,239,0.6);
  --line-2:rgba(255,255,255,0.14);
  --pine:#C7D3BE;
  --bone-2:rgba(255,255,255,0.10);
  --surface:rgba(255,255,255,0.10);
  --sage:#A9C39C;
  --err:#F2A08B;
  color:var(--ink);
}
.auth-card .auth-brand{color:#F6F5EF;}
.auth-card .field input{background:rgba(255,255,255,0.08);}
.auth-card .field input:hover{background:rgba(255,255,255,0.12);}
.auth-card .field input:focus{background:rgba(255,255,255,0.15);border-color:rgba(169,195,156,0.6);box-shadow:0 0 0 4px rgba(169,195,156,0.18);}
.auth-card .field.invalid input{border-color:rgba(242,160,139,0.65);box-shadow:0 0 0 4px rgba(242,160,139,0.16);}
/* Browser autofill would otherwise paint a white/yellow field with dark text. */
.auth-card .field input:-webkit-autofill{
  -webkit-text-fill-color:#F6F5EF;caret-color:#F6F5EF;
  transition:background-color 9999s ease 0s;
}
/* Primary action as the one solid, light element on the glass. */
.auth-card .auth-submit{background:#F6F5EF;color:#1F3B2D;}
.auth-card .auth-submit:disabled::after{border-color:rgba(31,59,45,0.25);border-top-color:#1F3B2D;}
.auth-card .auth-error{background:rgba(242,160,139,0.14);}
.auth-card .sent-box .env{color:#C7D3BE;}
@keyframes auth-card-in{
  from{opacity:0;transform:translateY(14px) scale(.97);filter:blur(6px);}
  to{opacity:1;transform:none;filter:blur(0);}
}
@media (prefers-reduced-motion: reduce){ .auth-card{animation:auth-fade .2s ease both;} }
@keyframes auth-fade{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-transparency: reduce){
  .auth-card{background:#1E2C24;-webkit-backdrop-filter:none;backdrop-filter:none;}
}
/* Back to home — top-left, where people look for "back" (wayfinding:
   never trap the user on a page). Same frosted material as the card, so
   it reads as part of the same layer. */
.auth-back{
  position:fixed;top:20px;left:20px;z-index:5;
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px 9px 12px;border-radius:22px;
  font-family:'Red Hat Text','Red Hat Display',sans-serif;font-size:13.5px;font-weight:600;
  color:#F6F5EF;text-decoration:none;
  background:rgba(255,255,255,0.10);
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 24px -12px rgba(0,0,0,0.5);
  transition:background-color .2s ease, scale .12s ease-out;
  animation:auth-fade .4s ease .15s both;
}
.auth-back:hover{background:rgba(255,255,255,0.16);}
.auth-back:active{scale:var(--press-scale);transition-duration:.08s;}
.auth-back svg{transition:transform .35s var(--ease-spring);}
.auth-back:hover svg{transform:translateX(-2px);} /* hints the direction it goes */
@media (prefers-reduced-motion: reduce){ .auth-back:active{scale:none;} .auth-back:hover svg{transform:none;} }
@media (prefers-reduced-transparency: reduce){
  .auth-back{background:#1E2C24;-webkit-backdrop-filter:none;backdrop-filter:none;}
}
@media (max-width:440px){ .auth-back{top:14px;left:14px;} }
/* Keep the card clear of the fixed back button when space runs short. */
@media (max-width:440px), (max-height:720px){ .auth-body{padding-top:72px;} }
a.auth-brand{display:block;text-decoration:none;transition:scale .12s ease-out;}
a.auth-brand:active{scale:var(--press-scale);}
.auth-brand{
  font-family:'Caacupe One',sans-serif;font-size:38px;text-transform:uppercase;letter-spacing:0.03em;
  color:var(--pine);text-align:center;line-height:1;
}
.auth-card h1{font-family:'Red Hat Display',sans-serif;font-size:24px;font-weight:700;line-height:1.15;text-align:center;margin:22px 0 6px;}
.auth-sub{text-align:center;font-size:13.5px;color:var(--ink-soft);margin-bottom:24px;}

.oauth{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 0;margin-bottom:10px;border:1px solid var(--line-2);border-radius:26px;
  background:var(--surface);color:var(--ink);font-family:inherit;font-size:14px;font-weight:600;
  cursor:pointer;transition:background .2s ease, border-color .2s ease, scale .12s ease-out;
}
.oauth:hover{background:var(--bone-2);border-color:var(--ink-faint);}

.auth-sep{display:flex;align-items:center;gap:12px;margin:20px 0 18px;font-size:11.5px;color:var(--ink-faint);letter-spacing:.06em;}
.auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:var(--line-2);}

.field{position:relative;margin-bottom:14px;}
/* Filled fields (same language as the results search field): soft fill
   at rest, bright surface + springy ring on focus, red ring when invalid. */
.field input{
  width:100%;height:52px;border:1px solid transparent;border-radius:13px;
  background:rgba(31,59,45,0.06);color:var(--ink);padding:18px 14px 6px;
  font-family:inherit;font-size:14.5px;outline:none;
  transition:border-color .2s ease, background-color .2s ease, box-shadow var(--spring-dur) var(--ease-spring);
}
.field input:hover{background:rgba(31,59,45,0.09);}
.field label{
  position:absolute;left:14px;top:16px;font-size:14px;color:var(--ink-faint);pointer-events:none;
  transition:transform .35s var(--ease-spring), color .2s ease;transform-origin:left top;
}
.field input:focus{background:#fff;border-color:rgba(124,148,115,0.55);box-shadow:0 0 0 4px rgba(124,148,115,0.16);}
.field.invalid input{border-color:rgba(163,59,42,0.55);box-shadow:0 0 0 4px rgba(163,59,42,0.12);}
.field-hint{display:none;font-size:12px;color:var(--err);margin:6px 4px 0;}
.field.invalid .field-hint{display:block;}
.field input:focus + label,.field input:not(:placeholder-shown) + label{
  transform:translateY(-9px) scale(.78);color:var(--ink-soft);
}
.field .peek{
  position:absolute;right:10px;top:12px;width:28px;height:28px;border:none;background:none;cursor:pointer;
  color:var(--ink-faint);display:flex;align-items:center;justify-content:center;border-radius:8px;
  transition:color .2s ease, scale .12s ease-out;
}
.field .peek:active{scale:.9;}
.field .peek .eye-off{display:none;}
.field .peek[aria-pressed="true"] .eye{display:none;}
.field .peek[aria-pressed="true"] .eye-off{display:block;}
.field .peek:hover{color:var(--ink-soft);}

.row-forgot{margin:2px 0 20px;}
.row-forgot a{font-size:13px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px;}
.row-forgot a:hover{color:var(--pine);}

.auth-submit{
  width:100%;padding:13px 0;border:none;border-radius:26px;
  background:var(--pine);color:var(--on-pine);
  font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;transition:filter .2s ease, scale .12s ease-out;
}
.auth-submit:hover{filter:brightness(1.08);}
.auth-submit:active:not(:disabled){scale:var(--press-scale);transition-duration:.08s;}
/* Status feedback while the request is in flight: the label gives way to
   a spinner instead of the button just going dim. */
.auth-submit{position:relative;}
.auth-submit:disabled{cursor:default;filter:none;}
.auth-submit:disabled > span{opacity:0;}
.auth-submit:disabled::after{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
  border-radius:50%;border:2px solid rgba(246,245,239,0.35);border-top-color:var(--on-pine);
  animation:auth-spin .7s linear infinite;
}
@keyframes auth-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){ .auth-submit:disabled::after{animation-duration:1.6s;} }

.auth-foot{text-align:center;font-size:13.5px;color:var(--ink-soft);margin-top:18px;}
.auth-foot button{
  background:none;border:none;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:600;
  color:var(--pine);text-decoration:underline;text-underline-offset:2px;
}

.auth-error{
  font-size:13px;color:var(--err);background:rgba(163,59,42,0.08);border-radius:10px;
  padding:10px 12px;margin-bottom:14px;display:none;
}
.auth-error.show{display:block;animation:auth-error-in .45s var(--ease-spring) both;}
@keyframes auth-error-in{from{opacity:0;transform:translateY(-4px) scale(.98);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){ .auth-error.show{animation:auth-fade .2s ease both;} }

.privacy{
  display:flex;gap:8px;align-items:flex-start;margin-top:22px;padding-top:16px;
  border-top:1px solid var(--line-2);font-size:11.5px;line-height:1.55;color:var(--ink-faint);
}
.privacy svg{flex-shrink:0;margin-top:1px;color:var(--sage);}

.signup-only,.forgot-only,.sent-only{display:none;}
body.mode-signup .signup-only{display:block;}
body.mode-forgot .forgot-only{display:block;}
body.mode-sent .sent-only{display:block;}
body.mode-signup .signin-only,body.mode-forgot .signin-only,body.mode-sent .signin-only{display:none;}

/* Visible in both signin and signup mode, hidden in forgot/sent — unlike
   .signin-only/.signup-only, safe to put on one element since it doesn't
   default to display:none. */
body.mode-forgot .signin-or-signup,body.mode-sent .signin-or-signup{display:none;}

body.mode-forgot #f-pw,body.mode-forgot .oauth,body.mode-forgot .auth-sep,body.mode-forgot .row-forgot,
body.mode-sent #f-email,body.mode-sent #f-pw,body.mode-sent #f-pw2,body.mode-sent .oauth,
body.mode-sent .auth-sep,body.mode-sent .row-forgot,body.mode-sent .auth-submit{display:none;}
#f-pw2{display:none;}
body.mode-signup #f-pw2{display:block;}

.back-link{
  display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink-soft);margin-top:16px;
}
.back-link:hover{color:var(--pine);}

.sent-box{text-align:center;padding:6px 0 4px;}
.sent-box .env{
  width:58px;height:58px;border-radius:50%;background:var(--bone-2);color:var(--pine);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.sent-box .to{display:inline-block;margin:10px 0 4px;font-weight:700;color:var(--ink);font-size:14px;word-break:break-all;}
.sent-box p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;}

.auth-terms{font-size:11.5px;line-height:1.5;color:var(--ink-faint);margin-top:12px;text-align:center;}
.auth-terms a{color:var(--ink-soft);}

@media (max-width:440px){ .auth-card{padding:30px 22px 24px;} .auth-brand{font-size:32px;} }

/* =========================================================
   WEATHER CARD (web results — sits right below the result-count
   line, above the sponsored strip, when the query looks like a
   weather question about a city. No outer frame — its content
   starts flush at the page's own 211px left edge.)
   ========================================================= */
.wx{margin-bottom:28px;}
.wx-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:0 0 12px;
}
.wx-city{font-size:15px;font-weight:600;color:var(--ink);}
.wx-unit{
  display:flex;align-items:center;gap:5px;
  background:var(--bone-2);border:none;border-radius:16px;
  padding:6px 12px;cursor:pointer;
  font-family:inherit;font-size:12.5px;color:var(--ink-soft);
  transition:background .2s ease, scale .12s ease-out;
}
.wx-unit:hover{background:#E6E3D6;}

.wx-now{
  overflow:hidden;
  box-sizing:border-box;
  /* Rows have different fact counts (today has wind/humidity/feels-like,
     other days don't) — weather.js glides the height between them. */
  background:var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07); /* light catching the top edge */
  border-radius:13px;
  padding:20px 22px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:26px;
  align-items:center;
}
.wx-when{font-size:13px;color:var(--panel-soft);margin-bottom:12px;}

/* Day/hour switches animate in weather.js (Web Animations: the new
   content materializes immediately from the side it lives on, and any
   in-flight animation is cancelled cleanly on the next click). */
.wx-left,.wx-facts{will-change:transform,opacity,filter;}

.wx-main{display:flex;align-items:center;gap:16px;}
.wx-icon{flex-shrink:0;color:var(--panel-ink);}
.wx-temp{
  font-family:'Red Hat Display',sans-serif;
  font-size:38px;font-weight:700;color:var(--panel-ink);
  letter-spacing:-0.02em;line-height:1;
}
.wx-feels{font-size:13.5px;font-weight:600;color:var(--panel-ink);margin-top:5px;}
.wx-desc{font-size:13.5px;color:var(--panel-soft);margin-top:2px;}

.wx-facts{display:grid;gap:5px;font-size:13.5px;color:var(--panel-soft);white-space:nowrap;}
.wx-facts b{color:var(--panel-ink);font-weight:600;}

.wx-tabs{display:flex;align-items:center;gap:22px;padding:16px 0 0;}
.wx-tab{
  background:none;border:none;cursor:pointer;padding:0 0 9px;
  font-family:inherit;font-size:14px;color:var(--ink-soft);
  border-bottom:2px solid transparent;
  transition:color .2s ease,border-color .2s ease, scale .12s ease-out;
}
.wx-tab.active{color:var(--ink);font-weight:600;border-bottom-color:var(--sage-strong);}

.wx-strip{position:relative;display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--line-2);}
.wx-strip.hourly{grid-template-columns:repeat(8,1fr);}

/* Selection indicator — repositioned via transform/width/height on click,
   never redrawn (it also survives tab/unit repaints), so it visibly slides
   between cells instead of jumping — on both axes, since the narrow
   layout wraps the strip onto two rows. */
.wx-thumb{
  position:absolute;top:0;left:0;
  border-radius:11px;
  background:var(--bone-2);
  border:1px solid var(--line-2);
  box-sizing:border-box;
  z-index:0;
  opacity:0;
  transition:
    transform var(--spring-dur) var(--ease-spring),
    width var(--spring-dur) var(--ease-spring),
    height var(--spring-dur) var(--ease-spring),
    opacity .2s ease;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){ .wx-thumb{transition:opacity .2s ease;} }

.wx-day{
  position:relative;z-index:1;
  text-align:center;padding:14px 4px 16px;
  border-radius:11px;margin:8px 3px;
  background:none;border:none;
  font-family:inherit;cursor:pointer;
  transition:color .25s ease, scale .12s ease-out;
}
.wx-day:active{scale:var(--press-scale);transition-duration:.08s;}
@media (prefers-reduced-motion: reduce){ .wx-day:active{scale:none;} }
.wx-strip > .wx-day:first-of-type{margin-left:0;}
.wx-strip > .wx-day:last-child{margin-right:0;}
.wx-day:not(.sel):hover .d,
.wx-day:not(.sel):hover .t b{color:var(--pine);}
.wx-day .d{font-size:13px;color:var(--ink-soft);margin-bottom:8px;transition:color .25s ease;}
.wx-day.sel .d{color:var(--ink);font-weight:600;}
.wx-day .ic{color:var(--ink-soft);margin-bottom:8px;display:flex;justify-content:center;}
.wx-day .t{font-size:13.5px;color:var(--ink-soft);}
.wx-day .t b{color:var(--ink);font-weight:700;font-family:'Red Hat Display',sans-serif;}
.wx-day .p{display:flex;align-items:center;justify-content:center;gap:3px;font-size:12px;color:var(--ink-faint);margin-top:5px;}

.wx-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 0 0;border-top:1px solid var(--line-2);
  font-size:12px;color:var(--ink-faint);
}
.wx-foot a{color:var(--ink-faint);}

/* Phones: compact, Google-style card — temperature and details side by
   side in one short panel, and the days/hours as a single swipeable row
   instead of two stacked rows of big cells. */
@media (max-width:620px){
  .wx{margin-bottom:22px;}
  .wx-top{gap:10px;padding-bottom:10px;}
  .wx-city{font-size:14px;line-height:1.3;min-width:0;}
  .wx-unit{flex-shrink:0;white-space:nowrap;font-size:11.5px;padding:5px 9px;}
  .wx-now{grid-template-columns:auto 1fr;gap:14px;padding:14px 16px;border-radius:12px;}
  .wx-when{font-size:11.5px;margin-bottom:6px;}
  .wx-main{gap:10px;}
  .wx-icon svg{width:34px;height:34px;}
  .wx-temp{font-size:34px;}
  .wx-feels{font-size:11.5px;margin-top:4px;}
  .wx-desc{font-size:11.5px;}
  .wx-facts{gap:2px;font-size:11.5px;justify-self:end;min-width:0;}
  .wx-tabs{gap:18px;padding-top:12px;}
  .wx-tab{font-size:13px;padding-bottom:7px;}
  .wx-strip, .wx-strip.hourly{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:58px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .wx-strip::-webkit-scrollbar{display:none;}
  .wx-day{padding:9px 2px 10px;margin:6px 2px;}
  .wx-day .d{font-size:12px;margin-bottom:5px;}
  .wx-day .ic{margin-bottom:5px;}
  .wx-day .ic svg{width:20px;height:20px;}
  .wx-day .t{font-size:12px;}
  .wx-day .p{font-size:11px;margin-top:3px;}
  .wx-foot{font-size:11px;padding-top:10px;}
}

/* =========================================================
   APPLE DESIGN PASS — press feedback + typography
   (motion/material tokens live in :root; menus and the translucent
   topbar are styled in place above)
   ========================================================= */

/* Feedback on press, not on release: buttons give way the instant the
   pointer goes down (the `scale` transition each one lists is what eases
   it back on release). Uses the standalone `scale` property so it never
   fights an element's own `transform`. */
.search-btn:active,.search-form button:active,.tabs a:active,.filter > button:active,
.filter-menu button:active,.mini-counter:active,.theme-toggle:active,
.acct-actions button:active,.acct-actions a:active,.acct-toggle button:active,
.ad-reward-btn:active:not(:disabled),.donate-widget .donate-btn:active,.affiliate-links a:active,
.lightbox-bar a:active,.oauth:active,.auth-submit:active:not(:disabled),.wx-unit:active,.wx-tab:active{
  scale:var(--press-scale);
  transition-duration:.08s;
}
@media (prefers-reduced-motion: reduce){
  .search-btn:active,.search-form button:active,.tabs a:active,.filter > button:active,
  .filter-menu button:active,.mini-counter:active,.theme-toggle:active,
  .acct-actions button:active,.acct-actions a:active,.acct-toggle button:active,
  .ad-reward-btn:active,.donate-widget .donate-btn:active,.affiliate-links a:active,
  .lightbox-bar a:active,.oauth:active,.auth-submit:active,.wx-unit:active,.wx-tab:active{scale:none;}
}

/* Tracking is size-specific: tighten as text grows, open up slightly
   when it gets small. Body copy stays at 0. */
.result h3{letter-spacing:-0.01em;}
.vid-body h3,.news h3{letter-spacing:-0.006em;}
.coming-soon h2,.auth-card h1{letter-spacing:-0.015em;}
.acct-name{letter-spacing:-0.01em;}
.meta,.img-meta,.vid-meta,.news-meta,.result .domain,.result .path,.acct-note,.ad-reward-hint{letter-spacing:0.005em;}

/* Weather card — tabular figures so temperatures/percentages don't
   shift width (and nudge neighbours) as they change between days. */
.wx-temp,.wx-feels,.wx-facts b,.wx-day .t,.wx-day .p{font-variant-numeric:tabular-nums;}

/* Phone gutters for the results family. Placed last on purpose: the
   .img-page/.vid-page/.news-page base rules are declared after the
   640px block in the RESULTS-FAMILY SHELL section and would otherwise
   win, leaving content 32px in while the header sits at 16px. */
@media (max-width:640px){
  .page{padding:18px 16px 48px;}
  .img-page, .vid-page, .news-page{padding:16px 16px 48px;}
}

/* No grey/blue flash box on tap (mobile WebKit/Chromium default) — every
   control here already gives its own press feedback (the scale-down above,
   the sliding cause/acct toggle thumbs). Keyboard focus rings are untouched. */
html{-webkit-tap-highlight-color:transparent;}

/* =========================================================
   MOTION: home intro + home→results transition
   ========================================================= */

/* Home intro — once per browser session (index.html's head script sets
   .intro on <html>). Pieces rise in, top to bottom, on the same spring as
   the rest of the site. Only opacity + the standalone `translate` are
   animated, and on the frosted pieces themselves (.cause-toggle,
   .ring-wrap), never on an ancestor: opacity on an ancestor would make it a
   backdrop root and the glass would go un-blurred mid-animation, then
   snap (the same trap as the Fidan/Mama switch). */
@keyframes ek-rise{from{opacity:0;translate:0 14px;}to{opacity:1;translate:0 0;}}
@keyframes ek-bg-in{from{opacity:0;scale:1.06;}to{opacity:1;scale:1;}}
.intro .hero-dark::after{animation:ek-bg-in 1.3s cubic-bezier(.2,.7,.2,1) both;}
.intro .hero-dark header,
.intro .hero h1,
.intro .hero > p,
.intro .search-box,
.intro .cause-toggle,
.intro .ring-wrap,
.intro .donate-caption,
.intro .hero-auth{animation:ek-rise .8s var(--ease-spring) both;}
.intro .hero-dark header{animation-delay:.10s;}
.intro .hero h1{animation-delay:.18s;}
.intro .hero > p{animation-delay:.26s;}
.intro .search-box{animation-delay:.34s;}
.intro .cause-toggle{animation-delay:.44s;}
.intro .ring-wrap{animation-delay:.50s;}
.intro .donate-caption{animation-delay:.56s;}
.intro .hero-auth{animation-delay:.60s;}

/* Home → results (and back): a cross-document view transition. The search
   field and logo carry the same name on both pages, so the browser morphs
   the big centred field into the results topbar field instead of cutting.
   Browsers without support just navigate normally. */
@view-transition{navigation:auto;}
.search-box, .topbar .search-form{view-transition-name:ek-search;}
.hero-dark .logo, .topbar .logo{view-transition-name:ek-logo;}
::view-transition-group(ek-search),
::view-transition-group(ek-logo){animation-duration:.5s;animation-timing-function:var(--ease-spring);}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;}

/* Results arrive in a short stagger instead of all at once. */
.result, .wx, .img-card, .vid, .news-list > *{animation:ek-rise .5s var(--ease-spring) both;}
.result:nth-child(2), .vid:nth-child(2), .news-list > :nth-child(2), .img-card:nth-child(2){animation-delay:.04s;}
.result:nth-child(3), .vid:nth-child(3), .news-list > :nth-child(3), .img-card:nth-child(3){animation-delay:.08s;}
.result:nth-child(4), .vid:nth-child(4), .news-list > :nth-child(4), .img-card:nth-child(4){animation-delay:.12s;}
.result:nth-child(5), .vid:nth-child(5), .news-list > :nth-child(5), .img-card:nth-child(5){animation-delay:.16s;}
.result:nth-child(n+6), .vid:nth-child(n+6), .news-list > :nth-child(n+6), .img-card:nth-child(n+6){animation-delay:.2s;}

@media (prefers-reduced-motion: reduce){
  .intro .hero-dark::after,
  .intro .hero-dark header,.intro .hero h1,.intro .hero > p,.intro .search-box,
  .intro .cause-toggle,.intro .ring-wrap,.intro .donate-caption,.intro .hero-auth,
  .result,.wx,.img-card,.vid,.news-list > *{animation:none;}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important;}
}

/* Logo is a wordmark, not text to copy: no selection highlight on tap /
   double-click, and no iOS long-press callout. */
.logo, .logo-word, .auth-brand{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.hero-dark .logo{cursor:default;}

/* Compact hero copy: one short headline + a two-line tagline instead of a
   paragraph — the search field is the point of the page. */
/* .hero is a flex item centred with margin:auto, so it shrink-wraps its
   content — without an explicit width the shorter tagline would shrink the
   search field along with it. */
.hero{width:100%;box-sizing:border-box;}
.hero h1{margin-bottom:12px;}
.hero p{font-size:15px;line-height:1.45;max-width:360px;margin-bottom:40px;}
@media (max-width:640px){
  .hero h1{font-size:28px;margin-bottom:10px;}
  .hero{padding-top:32px;}
  .hero p{font-size:14px;margin-bottom:50px;}
}

/* Precipitation now reads "1,6 mm" (MET Norway has no probability) —
   keep it on one line inside the narrow day/hour cells. */
.wx-day .p{white-space:nowrap;}
@media (max-width:620px){ .wx-day .p{font-size:10.5px;gap:2px;} .wx-day .p svg{width:10px;height:10px;} }