: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:#6B6B60;
  --cream-soft:#A9B5A0;
  --link:#1F5B47;
  --line:#DEDBCC;
  --line-2:#E3E0D2;
  --page-bg:#1A1A1A;
  --card-bg:#262626;
  --card-line:#343434;
  --card-icon-bg:#323232;
  /* Hero drawing in two layers: the scene is drawn once, only the small
     live layer (twinkling stars, fireflies) is redrawn each frame. */
  --hero-image:url('ekorama-hero-sabit.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);
}
/* Telefon: aynı çizim, kenar çamları ekranın kenarlarından görünsün diye içeri kaydırılmış. */
@media (max-width:640px){:root{--hero-image:url('ekorama-hero-sabit-mobil.svg');}}
@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:#918E82;
  --line:#332F24;
  --line-2:#332F24;
  --ring-track:#332F24;
  --link:#7FC79A;
  --err:#E07A61;
  --sage-strong:#6FBF8A;
  --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);
  /* Bottom strip = scroll arrow (24px offset + 46px) + a gap, so on short
     laptop screens the sign-in line never ends up under the arrow. */
  padding:5px 5px 86px;
}
.hero-dark{isolation:isolate;}
.hero-dark::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:23px;
  background-color:var(--dark);
  background-image:var(--hero-image);
  background-position:center;background-size:cover;background-repeat:no-repeat;
  z-index:-1;
}
.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;}
/* Stars and fireflies (public/hero-canli.js): one small element each, moved
   by transform and opacity only, so nothing is repainted while they run. */
.hero-dark > .hero-live{position:absolute;inset:5px;border-radius:23px;overflow:hidden;pointer-events:none;z-index:0;}
.hl-star,.hl-fly{position:absolute;display:block;}
.hl-star{border-radius:50%;animation:hl-tw 4s ease-in-out infinite;will-change:opacity;}
.hl-fly{animation-timing-function:ease-in-out;animation-iteration-count:infinite;will-change:transform;}
.hl-fly b{
  display:block;width:100%;height:100%;border-radius:50%;opacity:.08;
  background:radial-gradient(circle closest-side, #FFF3C8 0 var(--c), rgba(255,233,166,.75) var(--c), rgba(242,201,94,.28) 35%, rgba(242,201,94,0) 100%);
  animation:hl-blink 9s ease-in-out infinite;will-change:opacity;
}
.hl-off .hl-star,.hl-off .hl-fly,.hl-off .hl-fly b{animation-play-state:paused;}
@keyframes hl-tw{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes hl-blink{0%,100%{opacity:.06}8%{opacity:1}22%{opacity:.75}46%{opacity:.08}}
@keyframes hl-w1{0%,100%{transform:translate(0,0)}22%{transform:translate(calc(var(--a)*12px),calc(var(--a)*-9px))}48%{transform:translate(calc(var(--a)*4px),calc(var(--a)*-22px))}74%{transform:translate(calc(var(--a)*-11px),calc(var(--a)*-10px))}}
@keyframes hl-w2{0%,100%{transform:translate(0,0)}30%{transform:translate(calc(var(--a)*-14px),calc(var(--a)*-6px))}55%{transform:translate(calc(var(--a)*-6px),calc(var(--a)*-18px))}80%{transform:translate(calc(var(--a)*9px),calc(var(--a)*-8px))}}
@keyframes hl-w3{0%,100%{transform:translate(0,0)}25%{transform:translate(calc(var(--a)*7px),calc(var(--a)*10px))}50%{transform:translate(calc(var(--a)*18px),calc(var(--a)*-4px))}75%{transform:translate(calc(var(--a)*6px),calc(var(--a)*-14px))}}
@keyframes hl-w4{0%,100%{transform:translate(0,0)}35%{transform:translate(calc(var(--a)*-8px),calc(var(--a)*12px))}60%{transform:translate(calc(var(--a)*-17px),calc(var(--a)*-3px))}85%{transform:translate(calc(var(--a)*-4px),calc(var(--a)*-12px))}}
@media (prefers-reduced-motion: reduce){
  .hl-star,.hl-fly,.hl-fly b{animation:none;}
  .hl-fly b{opacity:.55;}
}
.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), (hover:none) and (pointer:coarse){
  .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), (hover:none) and (pointer:coarse){
  .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), (hover:none) and (pointer:coarse){
  .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:6px;padding:20px 16px 28px;}
  /* Finger-sized links (≈38px tall) instead of bare 17px text. */
  .hero-dark ~ footer div{display:flex;flex-wrap:wrap;justify-content:center;}
  .hero-dark ~ footer a{margin:0;padding:10px 9px;}
}

/* =========================================================
   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), (hover:none) and (pointer:coarse){
  .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), (hover:none) and (pointer:coarse){
  .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), (hover:none) and (pointer:coarse){
  .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;}
  /* All four tabs fit the search bar's width, spread edge to edge, so
     "Haberler" never hides off the right side. */
  .tabs{gap:4px;}
  .tabs a{flex:1 1 auto;justify-content:center;}
  .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;
  display:flex;align-items:center;justify-content:center;padding:32px;
  visibility:hidden;pointer-events:none;
  touch-action:none; /* every drag in here is ours (images.js) */
}
.lightbox.open{visibility:visible;pointer-events:auto;}
/* The backdrop is its own layer so it can dim with the picture's
   position (--scrim, set by images.js) while the picture stays opaque. */
.lightbox::before{
  content:"";position:absolute;inset:0;
  background:rgba(10,18,14,0.88);opacity:var(--scrim,0);
}
.lightbox-inner{
  position:relative;
  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-origin:0 0;
  transition:background-color .3s ease;
}
/* The outgoing picture while paging to the previous / next one. */
.lb-ghost{position:absolute;margin:0;max-width:none;pointer-events:none;}
@media (max-width:640px){ .lightbox{padding:12px;} }
.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);object-fit:contain;-webkit-user-drag:none;user-select:none;}
.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;z-index:1;width:38px;height:38px;border-radius:50%;
  opacity:var(--scrim,0);
  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), (hover:none) and (pointer:coarse){
  .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), (hover:none) and (pointer:coarse){
  .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;}
#f-name{display:none;}
body.mode-signup #f-name{display:block;}
body.mode-signup #f-pw2{display:block;}
/* Şifre yenileme sayfası: tekrar kutusu her zaman görünür (gizliyken
   zorunlu olduğu için form sessizce gönderilmiyordu). */
#reset-form #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);}
#resend{font-variant-numeric:tabular-nums;}
#resend:disabled{cursor:default;opacity:.6;}
#resend:disabled:hover{color:var(--ink-soft);}

.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:transform .18s ease-out, width .18s ease-out, height .18s ease-out, 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) backwards;}
.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) backwards;}
.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. */
/* Fill mode "backwards", not "both": the end state is just the natural
   one, and a `translate` left applied after the animation would make the
   element a containing block for fixed-position children (the phone
   account sheet inside the home header). */
.result, .wx, .img-card, .vid, .news-list > *{animation:ek-rise .5s var(--ease-spring) backwards;}
.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;} }

/* The single display ad under the search results (app.js initResultsAd).
   Labelled and visually separated so it can't pass for a result; collapses
   to nothing when AdSense has no ad to fill it. */
.results-ad{margin:8px 0 22px;padding-top:12px;border-top:1px solid var(--line-2);max-width:728px;}
.results-ad-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px;}
.results-ad:has(ins[data-ad-status="unfilled"]){display:none;}

/* =========================================================
   SEARCH SUGGESTIONS (suggest.js) — local list + own recent searches
   ========================================================= */
.suggest{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;
  list-style:none;margin:0;padding:6px;
  background:var(--bone);border:1px solid var(--line-2);border-radius:16px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,0.35);
  max-height:min(60vh, 360px);overflow-y:auto;
  /* Opens and closes along the same path; reopening mid-fade turns around
     from where it is (transitions, not keyframes). */
  opacity:0;translate:0 -6px;visibility:hidden;pointer-events:none;
  transition:opacity .16s ease, translate .3s var(--ease-spring), visibility 0s linear .16s;
}
.suggest.show{
  opacity:1;translate:0 0;visibility:visible;pointer-events:auto;
  transition:opacity .16s ease, translate .3s var(--ease-spring), visibility 0s;
}
@media (prefers-reduced-motion: reduce){ .suggest{translate:none;} }
.suggest li{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:10px;cursor:pointer;
  font-size:15px;color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
/* One highlight that slides between rows (suggest.js moveHl). */
.suggest .sg-hl{
  position:absolute;top:0;left:6px;right:6px;z-index:0;padding:0;
  border-radius:10px;background:var(--bone-2);pointer-events:none;
  opacity:0;
  transition:transform .3s var(--ease-spring), height .3s var(--ease-spring), opacity .14s ease;
}
.suggest .sg-hl.on{opacity:1;}
@media (prefers-reduced-motion: reduce){ .suggest .sg-hl{transition:opacity .14s ease;} }
.suggest .sg-ic{display:flex;color:var(--ink-faint);flex-shrink:0;}
.suggest li.recent .sg-ic{color:var(--sage-strong, var(--ink-faint));}
.suggest .sg-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.suggest .sg-text b{font-weight:700;}
.suggest .sg-del{
  border:none;background:none;color:var(--ink-faint);cursor:pointer;
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.suggest .sg-del:hover{background:var(--bone-3);color:var(--ink);}

/* Home: the field is a light material over the dark photo in both themes,
   so its list uses the same fixed light palette. */
.search-box .suggest{
  text-align:left;top:calc(100% + 8px);
  background:rgba(246,245,239,0.97);border-color:rgba(255,255,255,0.6);
  --ink:#1B1B18;--ink-faint:#6B6B60;--bone-2:#EAE8DC;--bone-3:#E0DDCF;
}
/* Keep the list above the donation widget/ring that follows the form. */
.search-box.suggest-open{z-index:40;}
.hero .search-box{position:relative;}
@media (max-width:640px){
  .suggest li{padding:11px 12px;font-size:15.5px;}
}
/* The field carries a view-transition-name, which makes it its own stacking
   context — so the list's z-index only counts inside it. Lift the whole
   form while the list is open, or the tabs/filters row paints over it. */
.search-form.suggest-open{z-index:31;}

/* ---- account button + panel on the home page (top right) ----
   Same panel as the results pages, so people can sign in or "watch an ad,
   donate" without searching first. The header has to sit above .hero
   (both are z-index:2 children of .hero-dark) or the open panel would be
   painted under the headline and search field. */
.hero-dark header{position:relative;z-index:5;}
.hero-dark header .counter-wrap{position:absolute;right:20px;top:14px;margin:0;}
.hero-dark header .mini-counter{
  background:rgba(18,36,27,0.45);color:#F6F5EF;
  border:1px solid rgba(246,245,239,0.18);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
}
.hero-dark header .mini-counter:hover{background:rgba(31,59,45,0.7);}
.hero-dark header .mini-counter b{color:#FFFFFF;}
.hero-dark header .mini-counter .ring-track{stroke:rgba(246,245,239,0.22);}
.hero-dark header .acct{text-align:left;}
@media (prefers-reduced-transparency: reduce), (hover:none) and (pointer:coarse){
  .hero-dark header .mini-counter{background:#1F3B2D;-webkit-backdrop-filter:none;backdrop-filter:none;}
}
@media (max-width:640px){
  .hero-dark header .counter-wrap{right:14px;top:12px;}
  /* Phone: pinned under the button, full width minus the gutters. */
  .hero-dark header .acct{position:fixed;top:64px;left:12px;right:12px;}
}
/* Over the busy photo the standard light glass lets the headline and the
   search field read through — use a much denser material here. */
.hero-dark header .acct{background:rgba(250,249,244,0.93);}
:root[data-theme="dark"] .hero-dark header .acct{background:rgba(30,28,22,0.94);}
.why-item p a{color:#E6E3D3;text-decoration:underline;text-underline-offset:2px;}
.why-item p a:hover{color:#FFFFFF;}

/* The home page continues dark below the photo: the "why" cards and the
   footer are styled for --page-bg, but <body> itself is the light bone
   colour on every page — without this they sat light-on-light. */
body:has(> .hero-dark){background:var(--page-bg);}

/* =========================================================
   FLUID PASS — gestures and hand-offs (motion.js)
   ========================================================= */

/* No text selection while something is being dragged. */
html.ek-dragging, html.ek-dragging *{-webkit-user-select:none !important;user-select:none !important;}

/* Taps go straight through on touch screens (no double-tap-zoom wait). */
a, button, .img-card, .suggest li{touch-action:manipulation;}
/* Horizontal drags on these belong to the page (toggle thumb, weather
   swipe); vertical ones still scroll the page. */
.donate-widget .cause-toggle, .acct-toggle{touch-action:pan-y;}
/* The panel swipes between Fidan and Mama (app.js): full width, so the
   finger doesn't have to land on the ring itself. */
.donate-widget .cause-panel{touch-action:pan-y pinch-zoom;align-self:stretch;}

/* Touch screens: a hover "lift" would stick after a tap (the finger never
   leaves) — show the press while the finger is down instead. */
@media (hover: none){
  .img-card:hover{transform:none;border-color:transparent;box-shadow:none;}
  .img-card:hover .cap{opacity:0;transform:translateY(6px);}
  .img-card:active{scale:.98;transition:scale .08s ease-out;}
  .vid:hover, .news:hover, .news-lead:hover{background:transparent;}
  .vid:hover .play{opacity:0;}
  .vid:hover .play span{transform:scale(.88);}
  .vid:active, .news:active, .news-lead:active{background:var(--bone-2);transition-duration:.05s;}
  .why-item:hover{transform:none;border-color:var(--card-line);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);}
}
@media (hover: none) and (prefers-reduced-motion: reduce){ .img-card:active{scale:none;} }

/* ---- weather panel swipe (weather.js initSwipe) ----
   The panel clips its content so a row being swiped away disappears at
   the card's edge; .wx-ghost is the outgoing row during the hand-over. */
.wx-now{position:relative;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;}
.wx-ghost{
  position:absolute;top:0;left:0;right:0;margin:0;
  background:transparent !important;box-shadow:none !important;pointer-events:none;
}

/* ---- results tabs: the active pill slides between tabs ----
   Each tab and the pill carry their own view-transition-name, so on a
   tab switch (a page load) the browser moves the pill from the old tab to
   the new one while the labels cross-fade their colours. Pill above the
   page, labels above the pill. */
.tabs a{position:relative;isolation:isolate;}
.tab-pill{
  position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--pine);pointer-events:none;
  view-transition-name:ek-tab-pill;
}
.tabs a.active:has(.tab-pill), .tabs a.active:has(.tab-pill):hover{background:transparent;}
.tabs a[data-page="web"]{view-transition-name:ek-tab-web;}
.tabs a[data-page="images"]{view-transition-name:ek-tab-images;}
.tabs a[data-page="videos"]{view-transition-name:ek-tab-videos;}
.tabs a[data-page="news"]{view-transition-name:ek-tab-news;}
::view-transition-group(ek-tab-pill){z-index:1;}
::view-transition-group(ek-tab-web),::view-transition-group(ek-tab-images),
::view-transition-group(ek-tab-videos),::view-transition-group(ek-tab-news){z-index:2;}
::view-transition-group(ek-tab-pill),::view-transition-group(ek-tab-web),::view-transition-group(ek-tab-images),
::view-transition-group(ek-tab-videos),::view-transition-group(ek-tab-news){
  animation-duration:.5s;animation-timing-function:var(--ease-spring);
}

/* ---- phones: the account panel is a bottom sheet (app.js initSheet) ----
   JS drives the transform while it moves (open, close, drag) and hands
   back to these rules at rest. The last box-shadow layer continues the
   sheet below the screen edge, so a springy overshoot or a rubber-banded
   pull never opens a gap under it. */
.acct-scrim,.acct-grabber{display:none;}
@media (max-width:640px){
  .acct, .hero-dark header .acct{
    position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;
    max-height:min(88dvh, 720px);overflow-y:auto;overscroll-behavior:contain;
    border-radius:22px 22px 0 0;border-bottom:none;
    padding:0 16px calc(20px + env(safe-area-inset-bottom));
    /* Solid, no backdrop-filter: at 96% opacity the blur was invisible,
       but iPhones re-blurred everything under the sheet on every frame
       of the slide and it stuttered. */
    background:#FAF9F4;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 -12px 40px -14px rgba(0,0,0,.35), 0 160px 0 0 #FAF9F4;
    opacity:1;filter:none;visibility:hidden;
    transform:translate3d(0,calc(100% + 24px),0);
    transition:background-color .3s ease, border-color .3s ease;
    z-index:41;
  }
  .counter-wrap.open .acct{transform:none;visibility:visible;}
  :root[data-theme="dark"] .acct{
    background:#1E1C16;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 -12px 40px -14px rgba(0,0,0,.6), 0 160px 0 0 #1E1C16;
  }
  /* Dims the page behind (a modal task); its opacity follows the sheet. */
  .acct-scrim{
    display:block;position:fixed;inset:0;z-index:40;
    background:rgba(8,14,11,.42);opacity:0;pointer-events:none;
    touch-action:none;
  }
  .counter-wrap.open .acct-scrim{opacity:1;pointer-events:auto;}
  /* A wide, invisible handle around the visible bar — easy to catch. */
  .acct-grabber{display:block;margin:0 -16px 2px;padding:9px 0 11px;touch-action:none;cursor:grab;}
  .acct-grabber::before{
    content:"";display:block;width:38px;height:5px;margin:0 auto;border-radius:3px;
    background:rgba(27,27,24,.2);
  }
  :root[data-theme="dark"] .acct-grabber::before{background:rgba(255,255,255,.22);}
}
@media (max-width:640px) and (prefers-reduced-motion: reduce){
  /* A cross-fade in place instead of the slide. */
  .acct, .hero-dark header .acct{opacity:0;transition:opacity .2s ease, visibility 0s linear .2s;}
  .counter-wrap.open .acct{opacity:1;transition:opacity .2s ease, visibility 0s;}
  .acct-scrim{transition:opacity .2s ease;}
}
@media (max-width:640px) and (prefers-reduced-transparency: reduce), (max-width:640px) and (hover:none) and (pointer:coarse){
  .acct, .hero-dark header .acct{background:#FAF9F4;-webkit-backdrop-filter:none;backdrop-filter:none;}
  :root[data-theme="dark"] .acct{background:#1E1C16;}
}
/* The pine link colour disappears on the dark panel. */
:root[data-theme="dark"] .ad-reward-guest a{color:#A9C29C;}

/* ---- results topbar slides away while scrolling down (app.js initScrollEdge) ---- */
.topbar{transition:transform .42s var(--ease-spring);}
.topbar.is-hidden{transform:translateY(-100%);}
.topbar.is-hidden::after{opacity:0;}
@media (prefers-reduced-motion: reduce){ .topbar{transition:transform .2s ease-out;} }

/* The "N sonuç · 0,42 saniye" line is gone; status messages ("Aranıyor…",
   "Sonuç bulunamadı.") still use the same element. */
.meta:empty, .img-meta:empty, .vid-meta:empty, .news-meta:empty{display:none;}

/* ---- dark theme: things drawn in pine were invisible on the dark page ---- */

:root[data-theme="dark"] .topbar .logo-word{color:#F6F5EF;}
:root[data-theme="dark"] .theme-toggle,
:root[data-theme="dark"] .mini-counter{color:#F6F5EF;}
:root[data-theme="dark"] .theme-toggle:hover{color:#FFFFFF;}
:root[data-theme="dark"] .acct-avatar .who{color:#EDEAE0;}
:root[data-theme="dark"] .filter > button{color:var(--ink-soft);}
:root[data-theme="dark"] .filter.set > button,
:root[data-theme="dark"] .filter > button:hover,
:root[data-theme="dark"] .tabs a:not(.active):hover,
:root[data-theme="dark"] .pagination button:hover:not(.active):not(:disabled),
:root[data-theme="dark"] .acct-links a:hover,
:root[data-theme="dark"] .wx-day:not(.sel):hover .t b,
:root[data-theme="dark"] .wx-day:not(.sel):hover .d,
:root[data-theme="dark"] .coming-soon h2{color:#F6F5EF;}
:root[data-theme="dark"] .filter.open > button{color:#F6F5EF;} /* still on the pine pill */
:root[data-theme="dark"] .filter-menu button[aria-checked="true"],
:root[data-theme="dark"] .filter-menu button .tick{color:#A9C29C;}
:root[data-theme="dark"] .pagination button.active{color:#F6F5EF;}
/* Home account button: a bit more presence over the busy photo. */
.hero-dark header .mini-counter{background:rgba(14,26,19,0.62);border-color:rgba(246,245,239,0.32);}
.hero-dark header .mini-counter .ring-track{stroke:rgba(246,245,239,0.32);}

/* ---- home: "Rehberden" — newest articles below the why cards (src/rehber.js) ---- */
.home-rehber{max-width:1100px;margin:0 auto;padding:24px 56px 40px;}
.home-rehber-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px;}
.home-rehber-head h2{font-family:'Red Hat Display',sans-serif;font-size:24px;font-weight:700;color:#F6F5EF;letter-spacing:-0.01em;}
.home-rehber-head a{font-size:14px;color:#C7D3BE;text-decoration:none;}
.home-rehber-head a:hover{color:#FFFFFF;}
.home-rehber-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.home-rehber-card{
  display:flex;flex-direction:column;gap:8px;text-decoration:none;
  background:var(--card-bg);border:1px solid var(--card-line);border-radius:18px;padding:22px 22px 20px;
  transition:transform var(--spring-dur) var(--ease-spring), border-color .3s ease, scale .12s ease-out;
}
.home-rehber-card .tag{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#9DB58F;font-weight:600;}
.home-rehber-card h3{font-family:'Red Hat Display',sans-serif;font-size:17px;font-weight:600;line-height:1.35;color:#F6F5EF;}
.home-rehber-card p{font-size:13.5px;line-height:1.55;color:#B6B6B2;flex:1;}
.home-rehber-card .meta{font-size:12px;color:#8E8E8A;}
@media (hover:hover){ .home-rehber-card:hover{transform:translateY(-3px);border-color:#454545;} }
.home-rehber-card:active{scale:var(--press-scale);transition-duration:.08s;}
@media (max-width:900px){ .home-rehber-grid{grid-template-columns:1fr;gap:14px;} }
@media (max-width:640px){ .home-rehber{padding:8px 20px 28px;} .home-rehber-head h2{font-size:21px;} .home-rehber-head a{padding:10px 0 10px 12px;margin:-10px 0;} }
.oauth:disabled{opacity:.6;cursor:default;}
.oauth svg{flex-shrink:0;}

/* ---- "Ana ekrana ekle" (install.js) ---- */
.acct-install{
  width:100%;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 0;border-radius:22px;border:1px solid var(--line-2);background:var(--surface);
  font-family:'Red Hat Text','Red Hat Display',sans-serif;font-size:13.5px;font-weight:600;color:var(--ink);
  cursor:pointer;transition:background .2s ease, scale .12s ease-out;
}
.acct-install:hover{background:var(--bone-2);}
.home-install{
  display:inline-flex;align-items:center;gap:7px;margin-top:2px;
  padding:7px 14px;border-radius:18px;border:1px solid rgba(246,245,239,0.22);
  background:rgba(18,36,27,0.45);color:#F6F5EF;
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  font-family:'Red Hat Text','Red Hat Display',sans-serif;font-size:12.5px;font-weight:600;cursor:pointer;
  transition:background .2s ease, scale .12s ease-out;
}
.home-install:hover{background:rgba(31,59,45,0.7);}
.acct-install:active,.home-install:active{scale:var(--press-scale);transition-duration:.08s;}
.acct-install[hidden],.home-install[hidden]{display:none;}

/* iPhone how-to: a bottom sheet over a dimmed page. */
.install-sheet{
  position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(8,14,11,0);visibility:hidden;
  transition:background-color .3s ease, visibility 0s linear .3s;
}
.install-sheet.open{background:rgba(8,14,11,.45);visibility:visible;transition:background-color .3s ease, visibility 0s;}
.install-card{
  width:100%;max-width:440px;margin:0 10px calc(10px + env(safe-area-inset-bottom));
  background:#FAF9F4;color:#1B1B18;border-radius:22px;padding:24px 22px 18px;text-align:center;
  box-shadow:0 -10px 40px -12px rgba(0,0,0,.35);
  transform:translateY(110%);transition:transform .45s var(--ease-spring);
  font-family:'Red Hat Text','Red Hat Display',sans-serif;
}
.install-sheet.open .install-card{transform:none;}
.install-card img{border-radius:14px;margin-bottom:10px;}
.install-card h2{font-family:'Red Hat Display',sans-serif;font-size:18px;font-weight:700;margin-bottom:12px;}
.install-card ol{text-align:left;margin:0 0 18px 20px;font-size:14.5px;line-height:1.55;color:#4F4F47;}
.install-card li{margin-bottom:8px;}
.install-card b{color:#1B1B18;}
.ios-share{display:inline-flex;vertical-align:-3px;color:#2F7BF6;}
.install-close{
  width:100%;border:none;border-radius:22px;padding:11px 0;background:#1F3B2D;color:#F6F5EF;
  font:inherit;font-weight:600;font-size:14.5px;cursor:pointer;
}
@media (prefers-reduced-motion: reduce){ .install-card{transition:none;} }

/* Phones: search field sits closer to the tagline (headline stays put),
   and the hero keeps a clear strip at the bottom for the scroll arrow so
   nothing (e.g. "Uygulama olarak ekle") can end up underneath it. */
@media (max-width:640px){
  .hero p{margin-bottom:24px;}
  .donate-widget{margin-top:34px;}
  .hero-dark{padding-bottom:96px;}
}
/* Phones: the scroll arrow follows the content (right under "Uygulama
   olarak ekle" / the sign-in line) instead of floating at the screen's
   bottom edge, where it could cover them. */
@media (max-width:640px){
  .hero-dark{padding-bottom:32px;}
  .hero{margin-bottom:0;}
  .scroll-cue{
    position:relative;left:auto;bottom:auto;transform:none;
    margin:18px auto 0;flex-shrink:0;
    animation-name:cue-bob-flow;
  }
  .hero-dark > .scroll-cue + *{margin-top:0;}
}
@keyframes cue-bob-flow{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(7px);} }
/* Shorter phone screens: tighten the donation block a little so the arrow
   still fits on the first screen. */
@media (max-width:640px) and (max-height:760px){
  .donate-widget{margin-top:26px;gap:12px;}
  .donate-widget .cause-panel{gap:12px;}
  .scroll-cue{margin-top:12px;}
}
/* Phones: a more compact Fidan / Mama switch. */
@media (max-width:640px){
  .donate-widget .cause-toggle{padding:3px;gap:2px;border-radius:20px;}
  .donate-widget .toggle-thumb{top:3px;bottom:3px;border-radius:17px;}
  .donate-widget .cause-toggle button{padding:6px 13px;font-size:12.5px;gap:5px;border-radius:17px;}
  .donate-widget .cause-toggle button svg{width:15px;height:15px;}
}
/* Phones: the account sheet is a solid surface. A 24px backdrop blur on a
   sheet this tall had to be recomputed on every frame while it slid, which
   is what made it stutter — and at 96% opacity it was barely visible. */
@media (max-width:640px){
  .acct, .hero-dark header .acct{
    background:#FAF9F4;-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 -12px 40px -14px rgba(0,0,0,.35), 0 160px 0 0 #FAF9F4;
  }
  :root[data-theme="dark"] .acct{
    background:#1E1C16;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 -12px 40px -14px rgba(0,0,0,.6), 0 160px 0 0 #1E1C16;
  }
}

/* Home header wordmark in the brand's light green (same as results pages). */
.hero-dark .logo-word{color:#B9E065;}
/* Results pages: the wordmark in the brand greens (dark on light theme, light on dark). */
.topbar .logo-word{color:#26352A;}
:root[data-theme="dark"] .topbar .logo-word{color:#B9E065;}

/* ---- Döviz çevirici kartı (doviz.js) ---- */
.fx{
  margin-bottom:28px;padding:20px 22px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
}
.fx-eq{font-size:14px;color:var(--ink-soft);}
.fx-val{margin-top:4px;color:var(--ink);line-height:1.15;}
.fx-num{font-family:'Red Hat Display',sans-serif;font-size:34px;font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
.fx-name{font-family:'Red Hat Display',sans-serif;font-size:20px;font-weight:600;}
.fx-when{margin-top:6px;font-size:12.5px;color:var(--ink-faint);}

.fx-rows{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:8px 10px;align-items:center;margin-top:18px;}
.fx-rows > .fx-row:first-child{grid-area:1/1;}
.fx-rows > .fx-row:last-child{grid-area:2/1;}
.fx-rows > .fx-swap{grid-area:1/2/3/3;}
.fx-row{
  display:flex;min-width:0;
  border:1px solid var(--line);border-radius:12px;background:var(--bone);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.fx-row:focus-within{border-color:var(--sage-strong);box-shadow:0 0 0 3px color-mix(in srgb, var(--sage-strong) 18%, transparent);}
.fx-amount{
  flex:1 1 0;min-width:70px;width:100%;
  border:none;background:none;outline:none;
  padding:11px 12px;font:600 17px 'Red Hat Text',sans-serif;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.fx-sel{position:relative;flex:0 0 auto;min-width:0;max-width:66%;border-left:1px solid var(--line);display:flex;align-items:center;}
.fx-sel select{
  appearance:none;-webkit-appearance:none;width:100%;
  border:none;background:none;outline:none;cursor:pointer;
  padding:11px 30px 11px 12px;
  font:500 14px 'Red Hat Text',sans-serif;color:var(--ink);
  text-overflow:ellipsis;
}
.fx-sel select option{color:#1B1B18;background:#fff;}
.fx-sel svg{position:absolute;right:10px;pointer-events:none;color:var(--ink-faint);}
.fx-swap{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-soft);cursor:pointer;
  display:grid;place-items:center;
  transition:background .2s ease, color .2s ease, scale .12s ease-out;
}
.fx-swap:hover{background:var(--bone-2);color:var(--ink);}
.fx-swap:active{scale:var(--press-scale);}

.fx-chart{margin-top:18px;}
.fx-chart-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.fx-change{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;}
.fx-change.up{color:var(--sage-strong);}
.fx-change.down{color:var(--err);}
.fx-ranges{position:relative;display:flex;gap:2px;padding:3px;background:var(--bone-2);border-radius:999px;}
.fx-pill{
  position:absolute;top:3px;bottom:3px;left:0;border-radius:999px;
  background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.12);
  transition:transform .5s var(--ease-spring), width .5s var(--ease-spring);
}
.fx-range{
  position:relative;z-index:1;border:none;background:none;cursor:pointer;
  padding:5px 11px;border-radius:999px;
  font:500 12.5px 'Red Hat Text',sans-serif;color:var(--ink-soft);white-space:nowrap;
  transition:color .2s ease;
}
.fx-range.on{color:var(--ink);font-weight:600;}

.fx-plot{position:relative;height:190px;margin-top:12px;touch-action:pan-y;transition:opacity .25s ease;}
.fx-plot.busy{opacity:.45;}
.fx-plot svg{display:block;width:100%;height:100%;overflow:visible;}
.fx-plot svg.up{color:var(--sage-strong);}
.fx-plot svg.down{color:var(--err);}
.fx-line{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.fx-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4;}
.fx-axis{fill:var(--ink-faint);font:500 11px 'Red Hat Text',sans-serif;font-variant-numeric:tabular-nums;}
.fx-cross{stroke:var(--ink-faint);stroke-width:1;opacity:0;}
.fx-dot{fill:currentColor;stroke:var(--surface);stroke-width:2.5;opacity:0;}
.fx-plot svg.scrub .fx-cross,.fx-plot svg.scrub .fx-dot{opacity:1;}
.fx-tip{
  position:absolute;top:-6px;left:0;z-index:2;pointer-events:none;
  padding:6px 10px;border-radius:10px;white-space:nowrap;
  background:var(--ink);color:var(--bone);
  font-size:12px;line-height:1.3;
  opacity:0;transition:opacity .15s ease;
  translate:0 -100%;
}
.fx-tip.show{opacity:1;}
.fx-tip b{display:block;font-weight:600;font-variant-numeric:tabular-nums;}
.fx-tip span{opacity:.75;}
.fx-empty{display:grid;place-items:center;height:100%;font-size:13px;color:var(--ink-faint);}

@media (max-width:640px){
  .fx{padding:16px 16px 12px;border-radius:14px;}
  .fx-num{font-size:30px;}
  .fx-name{font-size:17px;}
  .fx-swap{width:34px;height:34px;}
  .fx-chart-top{flex-direction:column-reverse;align-items:stretch;}
  .fx-ranges{justify-content:space-between;}
  .fx-range{flex:1;padding:6px 4px;}
  .fx-plot{height:170px;}
}

/* ---- Altın / gümüş kartı (altin.js) — .fx kartının üstüne ---- */
.au-quote{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:13.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.au-ch{font-weight:600;font-variant-numeric:tabular-nums;}
.au-ch.up{color:var(--sage-strong);}
.au-ch.down{color:var(--err);}
.au-calc{margin-top:18px;}
.au-calc .fx-sel{max-width:70%;}

.au-table{margin-top:18px;border-top:1px solid var(--line);}
.au-tr{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:8px;align-items:center;
  width:100%;padding:10px 8px;margin:0;
  border:none;border-bottom:1px solid var(--line);background:none;
  font:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer;
  border-radius:0;transition:background .2s ease;
}
.au-tr:not(.au-th):hover{background:var(--bone-2);}
.au-tr.sel{background:color-mix(in srgb, var(--sage-strong) 10%, transparent);}
.au-tr.sel .au-name{font-weight:700;}
.au-th{cursor:default;padding-top:8px;padding-bottom:8px;font-size:12px;font-weight:600;color:var(--ink-faint);}
.au-th span:not(:first-child),.au-n{text-align:right;}
.au-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.au-name small{font-size:11.5px;font-weight:400;color:var(--ink-faint);}
.au-n{font-variant-numeric:tabular-nums;}
.au-more{display:none;}
.au-open .au-more{display:grid;}
.au-toggle{
  display:block;margin:10px auto 0;padding:7px 14px;border:none;border-radius:999px;
  background:var(--bone-2);color:var(--ink-soft);cursor:pointer;
  font:500 13px 'Red Hat Text',sans-serif;transition:background .2s ease, color .2s ease, scale .12s ease-out;
}
.au-toggle:hover{color:var(--ink);}
.au-toggle:active{scale:var(--press-scale);}

@media (max-width:640px){
  .au-tr{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:6px;padding:10px 4px;font-size:13px;}
  .au-th{font-size:11.5px;}
}

/* ---- Kripto kartı (kripto.js) — .fx ve .au-table'ın üstüne ---- */
.kr-rows{grid-template-columns:1fr;}
.kr-rows > .fx-row:last-child{grid-area:auto;}
.kr-rows > .fx-row:first-child{grid-area:auto;}
.kr .fx-sel{max-width:68%;}
.kr .fx-when a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.kr-table .au-tr{grid-template-columns:minmax(0,1.6fr) minmax(0,1.3fr) minmax(0,.9fr);}

/* ---- Kişi bilgi paneli (bilgi.js) ----
   Phones / narrow windows: on top of the results. Wide screens: a column
   to the right of the results, like Google's knowledge panel. */
.page-kp{display:flex;flex-direction:column;}
.kp-slot:empty{display:none;}
.kp-slot{margin-bottom:28px;}
@media (min-width:1180px){
  .page-kp{
    display:grid;max-width:1136px;
    grid-template-columns:minmax(0,477px) 360px;column-gap:56px;align-items:start;
  }
  .page-kp > main{grid-column:1;grid-row:1;}
  .page-kp > .kp-slot{grid-column:2;grid-row:1;margin-bottom:0;}
}

.kp{
  padding:20px 22px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);
}
.kp-head{display:flex;gap:16px;align-items:center;}
.kp-photo{
  flex:0 0 auto;width:96px;height:120px;border-radius:14px;overflow:hidden;
  background:var(--bone-2);
}
.kp-photo img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  opacity:0;transition:opacity .35s ease;
}
.kp-photo.ready img{opacity:1;}
.kp-titles{min-width:0;}
.kp-title{
  font-family:'Red Hat Display',sans-serif;font-size:26px;font-weight:700;line-height:1.15;
  letter-spacing:-0.01em;color:var(--ink);
}
.kp-desc{margin-top:4px;font-size:14px;color:var(--ink-soft);line-height:1.4;}
.kp-summary{margin-top:16px;font-size:14.5px;line-height:1.6;color:var(--ink);}
.kp-summary a,.kp-foot a{color:var(--link);}
.kp-facts{margin-top:14px;border-top:1px solid var(--line);}
.kp-fact{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.45;}
.kp-fact dt{font-weight:600;color:var(--ink);}
.kp-fact dd{color:var(--ink-soft);}
.kp-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.kp-chip{
  padding:6px 12px;border-radius:999px;background:var(--bone-2);
  font-size:13px;font-weight:500;color:var(--ink);text-decoration:none;
  transition:background .2s ease, scale .12s ease-out;
}
.kp-chip:hover{background:var(--bone-3, var(--line));}
.kp-chip:active{scale:var(--press-scale);}
.kp-foot{margin-top:14px;font-size:12px;color:var(--ink-faint);}

@media (min-width:1180px){
  .kp-photo{width:112px;height:140px;}
}
@media (max-width:640px){
  .kp{padding:16px 16px 12px;border-radius:14px;}
  .kp-photo{width:84px;height:104px;border-radius:12px;}
  .kp-title{font-size:22px;}
  .kp-fact{grid-template-columns:76px minmax(0,1fr);font-size:13.5px;}
}

/* ---- Sonuçların arasındaki haber / video satırları (bloklar.js) ---- */
.blk{margin:4px 0 30px;}
.blk-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;}
.blk-title{font-family:'Red Hat Display',sans-serif;font-size:18px;font-weight:700;color:var(--ink);}
.blk-more{font-size:13px;font-weight:600;color:var(--link);text-decoration:none;white-space:nowrap;}
.blk-more:hover{text-decoration:underline;}
.blk-row{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 2px 10px;margin:0 -2px;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
.blk-card{
  flex:0 0 220px;scroll-snap-align:start;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);
  text-decoration:none;color:var(--ink);
  transition:border-color .2s ease, box-shadow .2s ease, scale .12s ease-out;
}
.blk-card:hover{border-color:color-mix(in srgb, var(--ink) 22%, var(--line));box-shadow:0 4px 14px rgba(0,0,0,.06);}
.blk-card:active{scale:var(--press-scale);}
.blk-thumb{position:relative;aspect-ratio:16/9;background:var(--bone-2);overflow:hidden;}
.blk-thumb img{display:block;width:100%;height:100%;object-fit:cover;}
.blk-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:5px;flex:1;}
.blk-src{font-size:12px;font-weight:600;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.blk-name{
  font-size:14px;font-weight:600;line-height:1.35;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.blk-video .blk-name{-webkit-line-clamp:2;}
.blk-age{margin-top:auto;font-size:12px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.blk-dur{
  position:absolute;right:6px;bottom:6px;padding:2px 6px;border-radius:6px;
  background:rgba(0,0,0,.72);color:#fff;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;
}
.blk-play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.blk-play svg{margin-left:2px;}
@media (max-width:640px){
  .blk-card{flex-basis:72%;}
  .blk-row{margin:0 -16px;padding:2px 16px 10px;scroll-padding-left:16px;}
}

/* Bilgi paneli: fotoğraf kolajı (bir büyük, iki küçük) */
.kp-gallery{
  display:grid;gap:4px;margin:-8px -10px 16px;height:210px;border-radius:12px;overflow:hidden;
  grid-template-columns:3fr 2fr;grid-template-rows:1fr 1fr;
}
.kp-gallery.n2{grid-template-columns:3fr 2fr;grid-template-rows:1fr;}
.kp-g{position:relative;background:var(--bone-2);overflow:hidden;min-height:0;}
.kp-g-main{grid-row:1 / -1;}
.kp-g img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%;
  opacity:0;transition:opacity .35s ease, scale .5s var(--ease-spring);
}
.kp-g.ready img{opacity:1;}
@media (hover:hover){ .kp-gallery:hover .kp-g img{scale:1.02;} }
@media (max-width:640px){
  .kp-gallery{height:190px;margin:-4px -4px 14px;}
}

/* ---- Namaz vakitleri kartı (namaz.js) — .fx kartının üstüne ---- */
.nv.busy{opacity:.6;transition:opacity .2s ease;}
.nv-place{font-family:'Red Hat Display',sans-serif;font-size:28px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);margin-top:2px;}
.nv-note{margin-top:6px;font-size:12.5px;color:var(--ink-soft);}
.nv-country{margin-top:2px;font-size:14px;color:var(--ink-soft);}
.nv-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;}
.nv-pick.one{grid-template-columns:minmax(0,260px);}
.nv-sel{max-width:none;border:1px solid var(--line);border-radius:12px;background:var(--bone);}
.nv-sel select{padding:9px 30px 9px 12px;}
.nv-next{
  margin-top:14px;padding:10px 14px;border-radius:12px;
  background:color-mix(in srgb, var(--sage-strong) 12%, transparent);
  font-size:14px;color:var(--ink);
}
.nv-next b{font-weight:700;font-variant-numeric:tabular-nums;}
.nv-at{color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.nv-tabs{margin-top:14px;width:max-content;}
.nv-body{margin-top:12px;}
.nv-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;}
.nv-tile{
  position:relative;padding:12px 6px 10px;border-radius:12px;text-align:center;
  background:var(--bone);border:1px solid var(--line);
  transition:background .3s ease, border-color .3s ease;
}
.nv-name{font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.nv-time{margin-top:4px;font-family:'Red Hat Display',sans-serif;font-size:21px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
.nv-tag{margin-top:3px;font-size:11px;font-weight:600;color:var(--sage-strong);}
.nv-tile.now{background:var(--pine);border-color:var(--pine);}
.nv-tile.now .nv-name,.nv-tile.now .nv-time{color:var(--on-pine);}
.nv-tile.now .nv-tag{color:var(--sage-light);}
:root[data-theme="dark"] .nv-tile.now{background:#2C5142;border-color:#2C5142;}
.nv-tile.next{border-color:var(--sage-strong);border-width:1.5px;}
.nv-tile.focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 55%, transparent);}
.nv-table-wrap{overflow-x:auto;margin:0 -4px;}
.nv-week{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums;}
.nv-week th,.nv-week td{padding:8px 6px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap;}
.nv-week tr:first-child th{font-size:12px;font-weight:600;color:var(--ink-faint);}
.nv-week tr th:first-child{text-align:left;font-weight:600;color:var(--ink);}
.nv-week td{color:var(--ink);}
.nv-week tr.today td,.nv-week tr.today th{background:color-mix(in srgb, var(--sage-strong) 10%, transparent);}
.nv-foot{margin-top:12px;}
@media (max-width:640px){
  .nv-place{font-size:24px;}
  .nv-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .nv-time{font-size:20px;}
}

/* ---- Yapay zekâ yanıtı kartı (cevap.js) ---- */
#ai-card:empty{display:none;}
.ai{
  position:relative;margin-bottom:28px;padding:18px 22px 16px;border-radius:16px;
  background:
    linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(120deg, color-mix(in srgb, var(--sage-strong) 70%, transparent), color-mix(in srgb, var(--gold) 60%, transparent), color-mix(in srgb, var(--sage-strong) 40%, transparent)) border-box;
  border:1.5px solid transparent;
}
.ai-head{display:flex;align-items:center;gap:8px;}
.ai-spark{color:var(--sage-strong);}
.ai-title{font-family:'Red Hat Display',sans-serif;font-size:16px;font-weight:700;color:var(--ink);}
.ai-beta{font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--bone-2);color:var(--ink-soft);}
.ai-start{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;}
.ai-ask{
  padding:9px 16px;border:none;border-radius:999px;cursor:pointer;
  background:var(--pine);color:var(--on-pine);font:600 14px 'Red Hat Text',sans-serif;
  transition:background .2s ease, scale .12s ease-out;
}
.ai-ask:hover{background:var(--pine-soft);}
.ai-ask:active{scale:var(--press-scale);}
:root[data-theme="dark"] .ai-ask{background:#2C5142;color:#F6F5EF;}
.ai-hint{font-size:12.5px;color:var(--ink-faint);flex:1 1 220px;}
.ai-body{margin-top:12px;font-size:15px;line-height:1.65;color:var(--ink);}
.ai-body p{margin:0 0 10px;}
.ai-body p:last-child{margin-bottom:0;}
.ai-body .ai-h{font-weight:700;margin-top:6px;}
.ai-body ul,.ai-body ol{margin:0 0 10px 1.2em;padding:0;}
.ai-body li{margin:3px 0;}
.ai-body code{font-size:.92em;padding:1px 5px;border-radius:5px;background:var(--bone-2);}
.ai-body a{color:var(--link);}
.ai-cite{
  display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;margin:0 1px 0 2px;
  border-radius:6px;background:var(--bone-2);color:var(--ink-soft) !important;
  font-size:11px;font-weight:600;text-decoration:none;vertical-align:2px;line-height:1;
}
.ai-cite:hover{background:var(--line);color:var(--ink) !important;}
.ai-body.writing > :last-child::after{
  content:"";display:inline-block;width:7px;height:7px;margin-left:4px;border-radius:50%;
  background:var(--sage-strong);vertical-align:1px;animation:ai-blink 1s ease-in-out infinite;
}
@keyframes ai-blink{50%{opacity:.25;}}
.ai-wait{display:flex;gap:6px;padding:6px 0;}
.ai-wait span{width:8px;height:8px;border-radius:50%;background:var(--sage-strong);opacity:.3;animation:ai-dot 1.1s ease-in-out infinite;}
.ai-wait span:nth-child(2){animation-delay:.15s;}
.ai-wait span:nth-child(3){animation-delay:.3s;}
@keyframes ai-dot{40%{opacity:1;transform:translateY(-3px);}}
@media (prefers-reduced-motion: reduce){ .ai-wait span,.ai-body.writing > :last-child::after{animation:none;opacity:.6;} }
.ai-sources{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.ai-src{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 6px;border-radius:999px;
  background:var(--bone-2);text-decoration:none;color:var(--ink-soft);font-size:12.5px;max-width:220px;
  transition:background .2s ease;
}
.ai-src:hover{background:var(--line);color:var(--ink);}
.ai-src-n{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--surface);font-size:11px;font-weight:700;color:var(--ink);}
.ai-src-host{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ai-error{margin-top:8px;font-size:13.5px;color:var(--err);}
.ai-foot{margin-top:12px;font-size:12px;color:var(--ink-faint);}
@media (max-width:640px){ .ai{padding:16px 16px 14px;} .ai-body{font-size:14.5px;} }
.ai-src-ico{width:14px;height:14px;border-radius:3px;object-fit:contain;flex:0 0 auto;}

/* Yapay zekâ kartı — hareketler: parıldayan düğme, "Düşünüyor…" ışıltısı, yazılırken yanıp sönen imleç. */
.ai-spark{transition:transform .4s var(--ease-spring);}

.ai-ask{position:relative;overflow:hidden;isolation:isolate;}
.ai-ask::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 66%);
  transform:translateX(-120%);animation:ai-sheen 3.2s ease-in-out 1s infinite;
}
@keyframes ai-sheen{0%,55%{transform:translateX(-120%);}85%,100%{transform:translateX(120%);}}
.ai-ask:hover{transform:translateY(-1px);box-shadow:0 6px 16px -8px color-mix(in srgb, var(--pine) 70%, transparent);}
.ai-ask{transition:background .2s ease, transform .2s var(--ease-spring), box-shadow .2s ease, scale .12s ease-out;}
.ai-start{overflow:hidden;}

.ai-think{display:inline-block;padding:4px 0;font-weight:600;font-size:15px;color:var(--ink-soft);animation:ai-breathe 1.4s ease-in-out infinite;}
@keyframes ai-breathe{50%{opacity:.45;}}

/* Cursor while the text is being written (replaces the blinking dot). */
.ai-body.writing > :last-child::after{
  width:8px;height:8px;margin-left:5px;border-radius:50%;
  background:var(--ink);opacity:1;animation:ai-pulse .9s ease-in-out infinite;vertical-align:0;
}
.ai-body.writing > ul:last-child > li:last-child::after,
.ai-body.writing > ol:last-child > li:last-child::after{
  content:"";display:inline-block;width:8px;height:8px;margin-left:5px;border-radius:50%;
  background:var(--ink);animation:ai-pulse .9s ease-in-out infinite;
}
.ai-body.writing > ul:last-child::after,.ai-body.writing > ol:last-child::after{content:none;}
@keyframes ai-pulse{50%{transform:scale(.55);opacity:.45;}}

@media (prefers-reduced-motion: reduce){
  .ai-ask::after,.ai-think,.ai-body.writing > :last-child::after,
  .ai-body.writing li:last-child::after{animation:none;}
  .ai-think{color:var(--ink-soft);background:none;}
}


/* Yapay zekâ kartı — Liquid Glass: buzlu cam yüzey, üst kenarda ışık,
   hafif yeşil/altın renk tonu. */
.ai{
  isolation:isolate;
  background:var(--material-bg);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--material-edge);
  border-radius:22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,0,0,.03),
    0 1px 2px rgba(18,36,27,.06),
    0 12px 32px -16px rgba(18,36,27,.28);
  transition:box-shadow .6s var(--ease-spring);
}
:root[data-theme="dark"] .ai{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 32px -16px rgba(0,0,0,.6);
}
.ai::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--sage-strong) 10%, transparent), transparent 60%),
    radial-gradient(100% 80% at 100% 100%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 60%);
}

.ai-ask{
  border-radius:999px;
  background:color-mix(in srgb, var(--pine) 92%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.12), 0 6px 16px -8px color-mix(in srgb, var(--pine) 80%, transparent);
  transition:transform .5s var(--ease-spring), box-shadow .3s ease, background .2s ease;
}
.ai-ask:hover{transform:translateY(-1px) scale(1.02);}
.ai-ask:active{transform:scale(.96);transition-duration:.12s;}
:root[data-theme="dark"] .ai-ask{background:color-mix(in srgb, #2C5142 92%, transparent);}
.ai-src{
  background:color-mix(in srgb, var(--surface) 55%, transparent);
  box-shadow:inset 0 0 0 1px var(--material-edge), inset 0 1px 0 rgba(255,255,255,.4);
  transition:background .2s ease, transform .4s var(--ease-spring);
}
.ai-src:hover{transform:translateY(-1px);}
.ai-beta{background:color-mix(in srgb, var(--surface) 60%, transparent);box-shadow:inset 0 0 0 1px var(--material-edge);}
@media (prefers-reduced-transparency: reduce), (hover:none) and (pointer:coarse){
  .ai{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;}
}
@media (max-width:640px){ .ai{border-radius:20px;} }
:root[data-theme="dark"] .ai-src{box-shadow:inset 0 0 0 1px var(--material-edge), inset 0 1px 0 rgba(255,255,255,.06);}



/* ===== Liquid Glass — sonuç kartları (hava, döviz, altın, kripto, namaz,
   kişi paneli, haber/video kartları). Yapay zekâ kartıyla aynı malzeme:
   buzlu cam, üst kenarda ışık, yumuşak gölge, sitenin yay eğrisi. ===== */
.wx,.fx,.kp{
  position:relative;isolation:isolate;
  background:var(--material-bg);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--material-edge);
  border-radius:22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,0,0,.03),
    0 1px 2px rgba(18,36,27,.06),
    0 12px 32px -16px rgba(18,36,27,.28);
}
:root[data-theme="dark"] .wx,:root[data-theme="dark"] .fx,:root[data-theme="dark"] .kp{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 32px -16px rgba(0,0,0,.6);
}
.wx{padding:16px 18px 10px;}
@media (max-width:640px){ .wx,.fx,.kp{border-radius:20px;} .wx{padding:14px 14px 8px;} }

/* Glass inside glass: inputs, segmented control, tiles, chips */
.fx-row,.nv-sel{
  background:color-mix(in srgb, var(--surface) 55%, transparent);
  border-color:var(--material-edge);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.5);
}
:root[data-theme="dark"] .fx-row,:root[data-theme="dark"] .nv-sel{box-shadow:inset 0 1px 2px rgba(0,0,0,.3);}
.fx-row:focus-within{border-color:var(--sage-strong);}
.fx-ranges{
  background:color-mix(in srgb, var(--ink) 7%, transparent);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
}
.fx-pill{
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow:0 1px 1px rgba(0,0,0,.06), 0 3px 10px -4px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .55s var(--ease-spring), width .55s var(--ease-spring);
}
:root[data-theme="dark"] .fx-pill{background:color-mix(in srgb, #3A362B 90%, transparent);box-shadow:0 2px 8px -3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);}
.fx-swap,.au-toggle,.kp-chip,.wx-unit{
  background:color-mix(in srgb, var(--surface) 55%, transparent);
  box-shadow:inset 0 0 0 1px var(--material-edge), inset 0 1px 0 rgba(255,255,255,.45), 0 2px 8px -4px rgba(0,0,0,.15);
  border-color:transparent;
  transition:transform .5s var(--ease-spring), background .2s ease, color .2s ease;
}
.fx-swap:hover,.au-toggle:hover,.kp-chip:hover,.wx-unit:hover{background:color-mix(in srgb, var(--surface) 80%, transparent);transform:translateY(-1px);}
.fx-swap:active,.au-toggle:active,.kp-chip:active,.wx-unit:active{transform:scale(.95);transition-duration:.12s;}
:root[data-theme="dark"] .fx-swap,:root[data-theme="dark"] .au-toggle,:root[data-theme="dark"] .kp-chip,:root[data-theme="dark"] .wx-unit{
  box-shadow:inset 0 0 0 1px var(--material-edge), inset 0 1px 0 rgba(255,255,255,.06);
}
.nv-tile{
  background:color-mix(in srgb, var(--surface) 50%, transparent);
  border-color:var(--material-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 8px -5px rgba(0,0,0,.15);
  transition:background .4s ease, border-color .4s ease, transform .5s var(--ease-spring);
}
.nv-tile.now,.wx-now{
  background:linear-gradient(160deg, color-mix(in srgb, var(--pine-soft) 92%, #fff 8%), var(--pine) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.2), 0 10px 24px -14px rgba(18,36,27,.7);
}
:root[data-theme="dark"] .nv-tile.now,:root[data-theme="dark"] .wx-now{
  background:linear-gradient(160deg, #35604D, #22402F 70%);
}
.wx-now{border-radius:16px;}
.nv-next{
  background:color-mix(in srgb, var(--sage-strong) 11%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sage-strong) 18%, transparent);
}
.au-tr.sel{background:color-mix(in srgb, var(--sage-strong) 12%, transparent);border-radius:10px;}
.kp-gallery{border-radius:16px;}
.kp-photo{border-radius:16px;box-shadow:inset 0 0 0 1px var(--material-edge);}

/* News / video cards */
.blk-card{
  background:var(--material-bg);
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  border:1px solid var(--material-edge);
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(18,36,27,.05), 0 10px 26px -16px rgba(18,36,27,.3);
  transition:transform .5s var(--ease-spring), box-shadow .3s ease;
}
.blk-card:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 16px 32px -16px rgba(18,36,27,.38);border-color:var(--material-edge);}
.blk-card:active{transform:scale(.97);transition-duration:.12s;}
:root[data-theme="dark"] .blk-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 10px 26px -16px rgba(0,0,0,.6);}
.blk-thumb{border-radius:12px;margin:6px 6px 0;}
.blk-play{
  background:rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 4px 12px rgba(0,0,0,.25);
}
.blk-dur{
  background:rgba(20,20,20,.45);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:8px;
}

@media (prefers-reduced-transparency: reduce), (hover:none) and (pointer:coarse){
  .wx,.fx,.kp,.blk-card{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;}
}
.blk-wait .blk-card{opacity:0;}
/* Weather inside its glass card: columns may shrink to fit the padding. */
.wx{padding:16px 14px 10px;}
@media (min-width:641px){
  .wx-strip{grid-template-columns:repeat(7,minmax(0,1fr));}
  .wx-strip.hourly{grid-template-columns:repeat(8,minmax(0,1fr));}
  .wx-day{margin:8px 2px;min-width:0;}
  .wx-day .p{font-size:11.5px;}
}
.wx-top{padding-left:4px;padding-right:0;}
.wx-thumb{background:color-mix(in srgb, var(--surface) 70%, transparent);border-color:var(--material-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 8px -4px rgba(0,0,0,.14);}
:root[data-theme="dark"] .wx-thumb{background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}


/* ===== Performans (iPhone / Google uygulaması): sonuç kartlarında
   backdrop-filter yok — arka plan düz olduğu için görünmüyordu ama içerik
   her değiştiğinde telefon bulanıklığı yeniden hesaplıyordu. Aynı renk
   düz zeminle verildi. Yapay zekâ kartının dönen halkası artık her karede
   yeniden boyanan bir gradyan değil, ekran kartının döndürdüğü bir katman. */
.ai,.wx,.fx,.kp,.blk-card{
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:color-mix(in srgb, var(--surface) 62%, var(--bone));
}
.blk-play,.blk-dur{-webkit-backdrop-filter:none;backdrop-filter:none;}
.blk-play{background:rgba(0,0,0,.42);}
.blk-dur{background:rgba(20,20,20,.62);}

.ai{overflow:hidden;}
.ai::after{display:none;}           /* old repainting ring */
.ai::before{
  /* tint */
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--sage-strong) 10%, transparent), transparent 60%),
    radial-gradient(100% 80% at 100% 100%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 60%);
}


/* Arama kutusunda "×" (yazı varken ve kutuya dokununca): tek dokunuşla temizler. Cam
   çizgisinde yumuşak gri daire, yayla belirir. */
.search-clear{
  position:absolute;top:50%;z-index:2;
  width:28px;height:28px;margin-top:-14px;padding:0;border:none;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:transparent;color:color-mix(in srgb, var(--ink) 32%, transparent);
  opacity:0;transform:scale(.6);pointer-events:none;
  transition:opacity .2s ease, transform .45s var(--ease-spring), color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
/* Only while the field is in use (tapped / focused), like iOS search fields. */
.has-text:focus-within .search-clear{opacity:1;transform:scale(1);pointer-events:auto;}
.search-clear:hover{color:color-mix(in srgb, var(--ink) 50%, transparent);}
.search-clear:active{transform:scale(.88);transition-duration:.1s;}
/* results page field (search button sits at right:5px, 34px wide) */
.search-form .search-clear{
  right:44px;top:50%;width:28px;height:28px;background:transparent;
  color:color-mix(in srgb, var(--ink) 32%, transparent);
  transition:opacity .2s ease, transform .45s var(--ease-spring), color .2s ease;
}
.search-form .search-clear:hover{color:color-mix(in srgb, var(--ink) 50%, transparent);}
.search-form.has-text input{padding-right:78px;}
/* home page field (gold button at right:7px, 38px wide) */
.search-box .search-clear{right:50px;--clear-x:#F6F5EF;color:rgba(27,27,24,.38);}
.search-box.has-text input{padding-right:88px;}
:root[data-theme="dark"] .search-form .search-clear{--clear-x:#141310;color:rgba(237,234,224,.45);}


/* ===== Namaz vakitleri: her kutunun arkasında o saatin gökyüzü
   (imsakta yıldızlı şafak, güneşte doğuş, öğlede tepede güneş, ikindide
   alçalan güneş, akşamda gün batımı, yatsıda hilal ve yıldızlar).
   Diğer kutularda soluk; şimdiki vakitte tam renkli. ===== */
.nv-tile{position:relative;overflow:hidden;isolation:isolate;}
.nv-tile::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-size:cover;background-position:center;opacity:.42;transition:opacity .5s var(--ease-spring), transform .8s var(--ease-spring);}
:root[data-theme="dark"] .nv-tile::before{opacity:.5;}
.nv-imsak::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230d1834'/%3E%3Cstop offset='0.62' stop-color='%232c3466'/%3E%3Cstop offset='0.82' stop-color='%236b4d77'/%3E%3Cstop offset='1' stop-color='%239a6a7c'/%3E%3C/linearGradient%3E%3CradialGradient id='s'%3E%3Cstop offset='0' stop-color='%23fff6c9'/%3E%3Cstop offset='.35' stop-color='%23ffd76a' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23ffd76a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='120' height='90' fill='url%28%23g%29'/%3E%3Ccircle cx='12' cy='10' r='1.0499999999999998' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='30' cy='22' r='0.7' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='48' cy='8' r='0.7' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='66' cy='18' r='1.0499999999999998' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='84' cy='6' r='0.7' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='102' cy='20' r='0.7' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='112' cy='34' r='1.0499999999999998' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='22' cy='38' r='0.7' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='58' cy='32' r='0.7' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='92' cy='36' r='1.0499999999999998' fill='%23fff' opacity='0.9'/%3E%3Cpath d='M0 70 Q20 60 40 66 T80 62 T120 66 V90 H0Z' fill='%23232a4a'/%3E%3Cpath d='M0 78 Q25 70 52 76 T100 72 T120 76 V90 H0Z' fill='%23151b33'/%3E%3C/svg%3E");}
.nv-gunes::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237fa8d8'/%3E%3Cstop offset='0.5' stop-color='%23f2c6a0'/%3E%3Cstop offset='1' stop-color='%23f39b6d'/%3E%3C/linearGradient%3E%3CradialGradient id='s'%3E%3Cstop offset='0' stop-color='%23fff6c9'/%3E%3Cstop offset='.35' stop-color='%23ffd76a' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23ffd76a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='120' height='90' fill='url%28%23g%29'/%3E%3Ccircle cx='60' cy='68' r='26' fill='url%28%23s%29'/%3E%3Ccircle cx='60' cy='68' r='9' fill='%23ffe08a'/%3E%3Cpath d='M0 70 Q20 60 40 66 T80 62 T120 66 V90 H0Z' fill='%238f8a6a'/%3E%3Cpath d='M0 78 Q25 70 52 76 T100 72 T120 76 V90 H0Z' fill='%236f7a55'/%3E%3C/svg%3E");}
.nv-ogle::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233f8fe0'/%3E%3Cstop offset='1' stop-color='%23b4dbf7'/%3E%3C/linearGradient%3E%3CradialGradient id='s'%3E%3Cstop offset='0' stop-color='%23fff6c9'/%3E%3Cstop offset='.35' stop-color='%23ffd76a' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23ffd76a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='120' height='90' fill='url%28%23g%29'/%3E%3Ccircle cx='60' cy='14' r='22' fill='url%28%23s%29'/%3E%3Ccircle cx='60' cy='14' r='8' fill='%23fff0a8'/%3E%3Cg fill='%23fff' opacity='.85'%3E%3Cellipse cx='24' cy='38' rx='13' ry='4.5'/%3E%3Cellipse cx='31' cy='35' rx='8' ry='4.5'/%3E%3Cellipse cx='94' cy='44' rx='11' ry='3.8'/%3E%3Cellipse cx='99' cy='41.5' rx='6' ry='3.4'/%3E%3C/g%3E%3Cpath d='M0 70 Q20 60 40 66 T80 62 T120 66 V90 H0Z' fill='%2386b56f'/%3E%3Cpath d='M0 78 Q25 70 52 76 T100 72 T120 76 V90 H0Z' fill='%235f9452'/%3E%3C/svg%3E");}
.nv-ikindi::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%235d9fd9'/%3E%3Cstop offset='0.6' stop-color='%23cfe0d9'/%3E%3Cstop offset='1' stop-color='%23f5d79c'/%3E%3C/linearGradient%3E%3CradialGradient id='s'%3E%3Cstop offset='0' stop-color='%23fff6c9'/%3E%3Cstop offset='.35' stop-color='%23ffd76a' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23ffd76a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='120' height='90' fill='url%28%23g%29'/%3E%3Ccircle cx='92' cy='36' r='22' fill='url%28%23s%29'/%3E%3Ccircle cx='92' cy='36' r='8' fill='%23ffd775'/%3E%3Cg fill='%23fff' opacity='.7'%3E%3Cellipse cx='30' cy='28' rx='12' ry='4'/%3E%3Cellipse cx='37' cy='25.5' rx='7' ry='4'/%3E%3C/g%3E%3Cpath d='M0 70 Q20 60 40 66 T80 62 T120 66 V90 H0Z' fill='%239aab6a'/%3E%3Cpath d='M0 78 Q25 70 52 76 T100 72 T120 76 V90 H0Z' fill='%23768a52'/%3E%3C/svg%3E");}
.nv-aksam::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233d2c66'/%3E%3Cstop offset='0.45' stop-color='%23c9606b'/%3E%3Cstop offset='0.8' stop-color='%23f08a55'/%3E%3Cstop offset='1' stop-color='%23f7b46a'/%3E%3C/linearGradient%3E%3CradialGradient id='s'%3E%3Cstop offset='0' stop-color='%23fff6c9'/%3E%3Cstop offset='.35' stop-color='%23ffd76a' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23ffd76a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='120' height='90' fill='url%28%23g%29'/%3E%3Ccircle cx='60' cy='70' r='30' fill='url%28%23s%29' opacity='.95'/%3E%3Ccircle cx='60' cy='70' r='11' fill='%23ff9a52'/%3E%3Cpath d='M0 70 Q20 60 40 66 T80 62 T120 66 V90 H0Z' fill='%235a3a4c'/%3E%3Cpath d='M0 78 Q25 70 52 76 T100 72 T120 76 V90 H0Z' fill='%233a2638'/%3E%3C/svg%3E");}
.nv-yatsi::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23060c1e'/%3E%3Cstop offset='1' stop-color='%231c2550'/%3E%3C/linearGradient%3E%3CradialGradient id='s'%3E%3Cstop offset='0' stop-color='%23fff6c9'/%3E%3Cstop offset='.35' stop-color='%23ffd76a' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23ffd76a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='120' height='90' fill='url%28%23g%29'/%3E%3Ccircle cx='10' cy='12' r='1.1' fill='%23fff' opacity='0.65'/%3E%3Ccircle cx='26' cy='30' r='0.75' fill='%23fff' opacity='1'/%3E%3Ccircle cx='40' cy='10' r='0.75' fill='%23fff' opacity='0.65'/%3E%3Ccircle cx='54' cy='24' r='1.1' fill='%23fff' opacity='1'/%3E%3Ccircle cx='70' cy='8' r='0.75' fill='%23fff' opacity='0.65'/%3E%3Ccircle cx='100' cy='30' r='0.75' fill='%23fff' opacity='1'/%3E%3Ccircle cx='112' cy='12' r='1.1' fill='%23fff' opacity='0.65'/%3E%3Ccircle cx='18' cy='48' r='0.75' fill='%23fff' opacity='1'/%3E%3Ccircle cx='46' cy='42' r='0.75' fill='%23fff' opacity='0.65'/%3E%3Ccircle cx='80' cy='40' r='1.1' fill='%23fff' opacity='1'/%3E%3Ccircle cx='64' cy='50' r='0.75' fill='%23fff' opacity='0.65'/%3E%3Ccircle cx='106' cy='50' r='0.75' fill='%23fff' opacity='1'/%3E%3Ccircle cx='88' cy='18' r='9' fill='%23f6efcf'/%3E%3Ccircle cx='92' cy='15' r='8' fill='%230a1229'/%3E%3Cpath d='M0 70 Q20 60 40 66 T80 62 T120 66 V90 H0Z' fill='%23141b38'/%3E%3Cpath d='M0 78 Q25 70 52 76 T100 72 T120 76 V90 H0Z' fill='%230b1027'/%3E%3C/svg%3E");}
/* readable text over the soft sky */
.nv-tile .nv-name,.nv-tile .nv-time{text-shadow:0 1px 0 rgba(255,255,255,.55);}
:root[data-theme="dark"] .nv-tile .nv-name,:root[data-theme="dark"] .nv-tile .nv-time{text-shadow:0 1px 2px rgba(0,0,0,.6);}
.nv-tile:hover::before{opacity:.6;transform:scale(1.04);}
/* the current prayer: its sky in full, white text */
.nv-tile.now{background:#1d2b3a;border-color:transparent;}
.nv-tile.now::before{opacity:1;}
.nv-tile.now::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.38));}
.nv-tile.now .nv-name,.nv-tile.now .nv-time{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45);}
.nv-tile.now .nv-tag{color:#fff;opacity:.9;text-shadow:0 1px 2px rgba(0,0,0,.45);}
.nv-tile.now{box-shadow:0 0 0 2px var(--sage-strong), 0 10px 24px -12px rgba(0,0,0,.55);}
:root[data-theme="dark"] .nv-tile.now{background:#1d2b3a;box-shadow:0 0 0 2px #7FC79A, 0 10px 24px -12px rgba(0,0,0,.7);}
@media (prefers-reduced-motion: reduce){ .nv-tile::before{transition:none;} .nv-tile:hover::before{transform:none;} }
/* Night scenes read as night only a bit stronger; lighter shade on "now". */
.nv-imsak::before,.nv-yatsi::before{opacity:.6;}
.nv-aksam::before{opacity:.5;}
.nv-tile.now::before{opacity:1;}
.nv-tile.now::after{background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.26));}
:root[data-theme="dark"] .nv-imsak::before,:root[data-theme="dark"] .nv-yatsi::before{opacity:.75;}
/* Skies toned down: darker and much fainter, so they read as a hint. */
.nv-tile::before{filter:brightness(.72) saturate(.75);opacity:.16;}
.nv-imsak::before,.nv-yatsi::before{opacity:.22;}
.nv-aksam::before{opacity:.18;}
:root[data-theme="dark"] .nv-tile::before{opacity:.22;}
:root[data-theme="dark"] .nv-imsak::before,:root[data-theme="dark"] .nv-yatsi::before{opacity:.3;}
.nv-tile:hover::before{opacity:.28;}
.nv-tile .nv-name,.nv-tile .nv-time{text-shadow:none;}
/* current prayer: the sky still shows, darkened under white text */
.nv-tile.now{background:#18232c;}
.nv-tile.now::before{opacity:.55;filter:brightness(.7) saturate(.85);}
.nv-tile.now::after{background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.3));}
.nv-tile.now .nv-name,.nv-tile.now .nv-time,.nv-tile.now .nv-tag{text-shadow:0 1px 2px rgba(0,0,0,.4);}


/* Ana sayfa yazıları fotoğraf arka planda da okunsun: hafif gölge, küçük
   satırlar biraz daha parlak ve kalın. */
.hero h1{text-shadow:0 2px 18px rgba(0,0,0,.45);}
.hero p{color:rgba(246,245,239,.94);font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.5);}
.donate-widget .donate-caption,.hero-auth{color:rgba(246,245,239,.92);font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.75), 0 0 14px rgba(0,0,0,.6);}

/* Dar telefonlar: sekmelerde yalnız yazı (Google gibi), dördü de sığsın. */
@media (max-width:440px){
  .tabs a svg{display:none;}
  .tabs a{padding:7px 10px;}
}

/* Geniş ekranlar: Google gibi sütun daha sağda ve arama çubuğunun içindeki
   yazı, sekme yazıları ve sonuçlar tek çizgide; çubuğun yuvarlak kenarı o
   çizginin 19px solunda (18px iç boşluk + 1px kenar). Logo aynı aralıkla
   çubuğun solunda. --col = sonuçların başladığı yer. */
@media (min-width:1100px){
  :root{--col:256px;}
  .topbar-inner{padding-left:calc(var(--col) - 19px - 31px - 148px);}
  .navrow{padding-left:var(--col);}
  .page{padding-left:var(--col);max-width:calc(var(--col) + 509px);}
}
@media (min-width:1440px){ :root{--col:288px;} }
@media (min-width:1180px){
  .page-kp{max-width:calc(var(--col) + 925px);}
}

/* Telefon ana sayfası: arkası bulanık "cam" öğeler hareketli çizimin
   üstünde durduğu için iPhone bulanıklığı her karede yeniden hesaplıyordu;
   alttan gelen hesap kartı da bu yükün üstüne kayınca takılıyordu. Telefonda
   bulanıklık yok, yerine aynı tonda yarı saydam zemin (görünüş neredeyse
   aynı). Kartın görünmez blur(0) filtresi de kaldırıldı. */
@media (max-width:640px){
  .counter-wrap.open .acct{filter:none;}
  .hero-dark header .mini-counter,.hero-dark .search-box input,.donate-widget .cause-toggle,
  .ring-wrap,.home-install,.scroll-cue{-webkit-backdrop-filter:none;backdrop-filter:none;}
  .donate-widget .cause-toggle{background:rgba(52,68,56,.62);}
  .ring-wrap{background:rgba(60,76,62,.5);}
  .scroll-cue{background:rgba(18,36,27,.72);}
  .hero-dark .search-box input{background-color:rgba(246,245,239,.92);}
}

/* Google's own sign-in button (giris.html): centred in the card, the same
   width as the fields; its iframe draws the button itself. */
/* Room for the Google button before it is known to be on, so the form
   does not jump down when it appears. */
.google-block[hidden]{display:block;visibility:hidden;min-height:81px;}
.google-block[hidden].off{display:none;}
.gsi-btn{display:flex;justify-content:center;min-height:44px;width:100%;}
.gsi-btn[hidden]{display:none;}
body.mode-forgot .gsi-btn,body.mode-sent .gsi-btn{display:none;}
.oauth[hidden]{display:none;}

/* ---- Hesaplayıcı ve kargo kartları (araclar.js) — .fx kartının üstüne ---- */
#tools-card:empty{display:none;}
.tl{margin-bottom:28px;padding:18px 20px 16px;}
.tl-label{font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;}
.tl-big{font-family:'Red Hat Display',sans-serif;font-size:30px;font-weight:700;color:var(--ink);line-height:1.15;letter-spacing:-.01em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;}
.tl-date,.tl-code{font-size:24px;}
.tl-clock{font-size:40px;}
.tl-expr{font-size:14px;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.tl-sub{font-size:14px;color:var(--ink-soft);margin-top:6px;}
.tl-note{font-size:13px;color:var(--ink-faint);margin-top:4px;}
.tl-rows{display:grid;gap:8px;margin-top:16px;}
.tl-calc-row{margin-top:14px;}
.tl-calc-row input,.tl-rows input,.tl-field input{flex:1;min-width:0;border:none;background:transparent;font:inherit;font-size:16px;color:var(--ink);padding:10px 12px;outline:none;font-variant-numeric:tabular-nums;}
.tl-out{flex:1;padding:10px 12px;font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
.tl-field{margin-top:12px;display:flex;align-items:center;}
.tl-field-name{padding-left:12px;font-size:13px;color:var(--ink-faint);white-space:nowrap;}
.tl-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.tl-grid3 .tl-field{flex-direction:column;align-items:stretch;}
.tl-grid3 .tl-field-name{padding:8px 12px 0;}
.tl-grid3 .tl-field input{padding-top:2px;}
.tl-ctrls{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center;}
.tl-seg{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:color-mix(in srgb, var(--ink) 6%, transparent);}
.tl-seg button{border:none;background:transparent;font:inherit;font-size:13px;font-weight:500;color:var(--ink-soft);padding:6px 11px;border-radius:9px;cursor:pointer;transition:background-color .2s ease,color .2s ease;}
.tl-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12);}
.tl-month{border:1px solid var(--line);border-radius:12px;}
.tl-month select{padding-right:30px;}
.tl-lines{display:grid;grid-template-columns:1fr auto;gap:6px 16px;margin:14px 0 0;font-size:14px;font-variant-numeric:tabular-nums;}
.tl-lines dt{color:var(--ink-soft);}
.tl-lines dd{margin:0;text-align:right;color:var(--ink);}
.tl-lines .tl-strong,.tl-lines dt:has(+ .tl-strong){font-weight:700;font-size:16px;color:var(--ink);padding-top:6px;border-top:1px solid var(--line);}
.tl-lines dt:has(+ .tl-strong){margin-right:-16px;padding-right:16px;} /* line runs across the column gap */
.tl-check{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;color:var(--ink-soft);}
.tl-year{margin-top:12px;font-size:13px;color:var(--ink-soft);}
.tl-year summary{cursor:pointer;}
.tl-months{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:4px 12px;margin-top:8px;font-variant-numeric:tabular-nums;}
.tl-months b{text-align:right;font-weight:600;color:var(--ink);}
.tl-disclaimer{font-size:12px;color:var(--ink-faint);margin:12px 0 0;line-height:1.5;}
.tl-carriers{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.tl-carrier{display:inline-flex;align-items:center;padding:8px 14px;border-radius:12px;background:var(--pine);color:#F6F5EF;font-size:14px;font-weight:600;text-decoration:none;}
.tl-carrier:hover{filter:brightness(1.1);}
.tl-copy{margin-top:10px;border:1px solid var(--line);background:transparent;color:var(--ink-soft);font:inherit;font-size:13px;padding:6px 12px;border-radius:10px;cursor:pointer;}
.tl-deferred{min-height:55vh;padding:8px 0;color:var(--ink-faint);font-size:14px;}
.tl-more{margin-top:8px;border:1px solid var(--line);background:transparent;color:var(--pine);font:inherit;font-size:14px;font-weight:600;padding:8px 14px;border-radius:12px;cursor:pointer;}
:root[data-theme="dark"] .tl-carrier{background:#2F5A43;}
:root[data-theme="dark"] .tl-more{color:#B9E065;}
@media (max-width:640px){
  .tl{padding:16px 16px 14px;}
  .tl-big{font-size:26px;}
  .tl-clock{font-size:34px;}
  .tl-grid3{grid-template-columns:1fr;}
  .tl-months{grid-template-columns:auto 1fr;}
}

/* AdSense: bağış artık reklam görüntülemelerine bağlı değil — halkalar
   sayaç değil süs; "0 / 50" sayıları gizli. */
.ring-count,#count-label{display:none;}
.mini-counter .txt{display:none;}

/* Resmi tatiller tablosu (araclar.js): Tatil | Tarih | Süresi | Gün */
.tl-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px;line-height:1.4;}
.tl-table th,.tl-table td{text-align:left;vertical-align:top;padding:9px 8px;border-bottom:1px solid var(--line);}
.tl-table thead th{font-size:12px;font-weight:600;color:var(--ink-faint);text-transform:none;border-bottom:1px solid var(--line-2,var(--line));padding-top:4px;}
.tl-table tbody th{font-weight:600;color:var(--ink);}
.tl-table tbody td{color:var(--ink-soft);}
.tl-table tbody tr:nth-child(even){background:color-mix(in srgb, var(--ink) 3%, transparent);}
.tl-table tbody tr:last-child th,.tl-table tbody tr:last-child td{border-bottom:none;}
.tl-table td[data-label="Süresi"]{min-width:64px;}
@media (max-width:640px){
  .tl-table thead{display:none;}
  .tl-table,.tl-table tbody,.tl-table tr,.tl-table th,.tl-table td{display:block;width:auto;}
  .tl-table tbody tr{padding:10px 4px;border-bottom:1px solid var(--line);background:none !important;}
  .tl-table tbody tr:last-child{border-bottom:none;}
  .tl-table th,.tl-table td{padding:0;border:none;white-space:normal !important;}
  .tl-table tbody th{font-size:14px;margin-bottom:3px;}
  .tl-table tbody td{display:flex;gap:8px;font-size:13px;}
  .tl-table tbody td::before{content:attr(data-label);flex:0 0 52px;color:var(--ink-faint);}
}

/* Short laptop screens (≈720px tall): a little less air in the hero so
   the scroll arrow stays on the first screen. */
@media (min-width:641px) and (max-height:800px){
  .hero{padding-top:20px;}
  .hero p{margin-bottom:28px;}
  .donate-widget{gap:12px;}
}

/* Phones: chart range tabs and card toggles a touch taller for fingers. */
@media (max-width:640px){
  .fx-range{padding-top:8px;padding-bottom:8px;}
  .au-toggle{min-height:38px;}
}

/* Sign-in page: finger-sized hit areas for the small text controls,
   without changing how they look. */
.field .peek{right:4px;top:6px;width:40px;height:40px;}
.row-forgot a{display:inline-block;padding:10px 0;margin:-10px 0;}
.auth-foot button{padding:10px 4px;margin:-10px 0;}

/* Bare "hava durumu": ask for the visitor's location (public/weather.js ask()). */
.wx-ask{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;}
.wx-ask-icon{flex:none;width:40px;height:40px;color:var(--gold, #C9A23A);}
.wx-ask-icon svg{width:100%;height:100%;}
.wx-ask-body{min-width:0;}
.wx-ask-title{font-size:16px;font-weight:600;color:var(--ink);}
.wx-ask-text{font-size:13.5px;line-height:1.5;color:var(--ink-soft);margin:4px 0 12px;}
.wx-ask-btn{
  border:none;border-radius:999px;padding:10px 18px;min-height:40px;cursor:pointer;
  background:var(--pine, #1F3B2D);color:#F6F5EF;font:600 14px 'Red Hat Text',sans-serif;
  transition:opacity .2s ease, scale .12s ease-out;
}
.wx-ask-btn:active{scale:.97;}
.wx-ask-btn:disabled{opacity:.7;cursor:progress;}
:root[data-theme="dark"] .wx-ask-btn{background:#6FBF8A;color:#10211A;}
.wx-ask-alt{font-size:13px;color:var(--ink-faint);margin-top:10px;}
.wx-ask-alt a{color:var(--link, var(--pine));display:inline-block;padding:6px 0;margin:-6px 0;}
.wx-loc-note{font-size:12.5px;color:var(--ink-faint);margin:-18px 0 22px 4px;}
.wx-loc-note button{border:none;background:none;font:inherit;color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:8px 2px;}
@media (max-width:640px){ .wx-ask{padding:16px;} .wx-loc-note{margin-top:-14px;} }

/* Prayer card: "Konumumu kullan" / "Konumu unut" (public/namaz.js). */
.nv-loc{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;}
.nv-loc-btn{
  border:none;border-radius:999px;margin:2px 4px;padding:6px 12px;min-height:32px;cursor:pointer;
  background:var(--pine, #1F3B2D);color:#F6F5EF;font:600 12.5px 'Red Hat Text',sans-serif;
}
.nv-loc-btn:disabled{opacity:.7;cursor:progress;}
.nv-loc-btn.link{background:none;color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px;padding:6px 2px;margin:0;font-weight:500;}
:root[data-theme="dark"] .nv-loc-btn:not(.link){background:#6FBF8A;color:#10211A;}

/* Language menu (public/dil-sec.js): account panel and footers. */
.acct-lang{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 4px 0;}
.acct-lang-label{font-size:12px;color:var(--ink-faint);}
.lang-switch{display:inline-flex;gap:4px;}
.lang-btn{
  border:1px solid var(--line, #E3E0D2);background:none;color:var(--ink-soft);
  font:600 12px 'Red Hat Text',sans-serif;padding:6px 10px;min-height:30px;border-radius:999px;cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.lang-btn:hover{border-color:var(--pine, #1F3B2D);}
.lang-btn.on{background:var(--pine, #1F3B2D);border-color:var(--pine, #1F3B2D);color:#F6F5EF;}
:root[data-theme="dark"] .lang-btn.on{background:#6FBF8A;border-color:#6FBF8A;color:#10211A;}
.hero-dark ~ footer .lang-switch{margin-left:16px;}
.hero-dark ~ footer .lang-btn{border-color:#3A3A36;color:#B6B6B2;}
.hero-dark ~ footer .lang-btn.on{background:#F6F5EF;border-color:#F6F5EF;color:#12241B;}

/* Touch screens: no blur at all, and panels arrive by fade and slide only.
   A filter transition redraws the element on every frame. */
@media (hover:none) and (pointer:coarse){
  *,*::before,*::after{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
  .why-item,.filter-menu,.acct{filter:none !important;}
  .blk-play{background:rgba(0,0,0,.55);}
  .blk-dur{background:rgba(20,20,20,.72);}
  .auth-card{animation-name:auth-fade;}
}