/* ARALIK — Mercek dili
   Tek görsel + cam bilye. Konum rastgele, ışık gezegen saatinden,
   renk niyetten. İki kademe: durgun ve açılım.
   Build gerektirmez; saf CSS. */

.mercek-sahne{
  position:fixed;inset:0;overflow:hidden;background:#05070a;
  /* kademe 1 — durgun: hikâye SARKACIN dairesinde, vadi etrafta görünür */
  /* --ty, camın merkeziyle (--cy) AYNI olmalı. 41.5% iken metin bloğu
     camın 25 px altına oturuyordu; başlık üç satıra çıktığında özet satırı
     camın alt kenarını aşıp doğrudan parlak kum sırtının üstüne düşüyor,
     yerel kontrast 4.4:1'e iniyordu (eşik 4.5). Ölçüm bunu "sis yetersiz"
     diye gösteriyordu; sorun sis değil, metnin camdan taşmasıydı. */
  --cw:min(87.5%,41vh);--cx:50%;--cy:38.5%;--tx:50%;--ty:38.5%;
  /* --dip .24 denendi, kontrastı hiç değiştirmedi: sorun camın alt tonu
     değil, metnin camdan taşmasıydı (yukarıdaki --ty notu). .10'a döndü —
     işe yaramayan bir karartmayı tasarımda bırakmıyoruz. */
  --bl:3px;--br:.94;--ton:6%;--yans:1;--tw:60%;--dip:.10;
  --ix:34%;--iy:26%;--gx:72%;--gy:78%;--sx:16;--sy:16;--ia:-50;
  --cwmax:min(182%,86vh);
}
/* ---------- ZEMİN ---------- */
.mercek-zemin{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:var(--zeminF,none);
  transition:transform 900ms cubic-bezier(.33,0,.12,1), filter 1200ms ease;
}
/* ---------- SAYFA FONU (masaüstü) ----------
   KARAR (Hakan · 13 Eylül): "tüm fon değişecek, sadece mobil alanın dışına
   hafif fluluk." Yani TEK ve SÜREKLİ bir görsel tüm sayfayı kaplar; mobil
   sütunun içi keskin, dışı hafif bulanık. İki ayrı resim gibi durmamalı.

   İlk denemem bunu bozuyordu: sütun görselin bir kırpımını, çevre başka bir
   ölçekte aynı görseli gösteriyordu — aynı fotoğrafın iki farklı hâli yan
   yana. Hakan haklı olarak "arka fon olmadı" dedi.

   Gerçek süreklilik tek şartla olur: görsel sayfayı TEK ölçekte kaplasın ve
   fark yalnız bulanıklık olsun. Bu da yatay (16:9) bir görsel ister —
   dikey telefon görseli 1920px'i ancak 4.9 kat büyüyerek kaplar.
   Bu yüzden iki yol var ve hangisinin işlediğini `data-genis` söyler. */

/* --- YOL 1: geniş görsel VAR → tek görsel, tek ölçek, dışı bulanık --- */
#aralik-fon,#aralik-fon-flu{display:none}
@media (min-width:820px){
  #aralik-fon,#aralik-fon-flu{
    display:block;position:fixed;inset:0;
    background-size:cover;background-position:center;background-repeat:no-repeat;
  }
  /* Bulanık kopya, sütunun olduğu şeritte maskeyle DELİNİR; oradan alttaki
     keskin katman görünür. Aynı görsel, aynı ölçek, aynı konum — tek fark
     bulanıklık. Kenarlar 60px'lik yumuşak geçişle eriyor ki sütunun sınırı
     çizgi gibi durmasın. */
  .mercek-sahne[data-genis="var"] ~ #aralik-fon-flu,
  #aralik-fon-flu{
    /* Fark YALNIZ bulanıklık olmalı. .78 karartma denendi ve sütun
       çevresinden belirgin aydınlık kalıyordu — aynı görselin iki hâli
       değil, ışıklı bir panel gibi duruyordu. Hakan "sadece hafif fluluk"
       demişti; karartma .94'e çekildi (görülür ama sütunu öne çıkarmıyor). */
    filter:blur(7px) brightness(.94) saturate(.97);
    -webkit-mask-image:linear-gradient(to right,
      #000 0,
      #000 calc(50% - var(--sahne-en,390px)/2 - 60px),
      transparent calc(50% - var(--sahne-en,390px)/2),
      transparent calc(50% + var(--sahne-en,390px)/2),
      #000 calc(50% + var(--sahne-en,390px)/2 + 60px),
      #000 100%);
    mask-image:linear-gradient(to right,
      #000 0,
      #000 calc(50% - var(--sahne-en,390px)/2 - 60px),
      transparent calc(50% - var(--sahne-en,390px)/2),
      transparent calc(50% + var(--sahne-en,390px)/2),
      #000 calc(50% + var(--sahne-en,390px)/2 + 60px),
      #000 100%);
  }
  /* Geniş görsel varken sahnenin kendi zemini SUSAR — sayfa fonu zaten
     sütunun altından sürüyor, ikinci bir kopya sürekliliği bozardı. */
  .mercek-sahne[data-genis="var"]{background:transparent}
  .mercek-sahne[data-genis="var"] .mercek-zemin{opacity:0}

  /* --- YOL 2: geniş görsel YOK (bugünkü hâl) ---
     Dikey görseli 1920px'e yaymanın bedeli 4.9 kat büyütme; sütunun içi de
     bulanıklaşırdı. Onun yerine sütun görseli KENDİ ölçeğinde gösteriyor
     (auto 100% = 1.28×, kırpma yok), çevre aynı görselin bulanık kopyası.
     Tam süreklilik değil — geçiş bulanıklığın içinde kalıyor — ama sütun
     keskin. Geniş görsel gelince YOL 1 devralır. */
  .mercek-sahne[data-genis="yok"] .mercek-zemin{
    background-size:auto 100%;
    background-repeat:no-repeat;
  }
  .mercek-sahne[data-genis="yok"] ~ #aralik-fon-flu{filter:blur(10px) brightness(.7) saturate(.9)}
  #aralik-fon-flu{transform:scale(1.05)}
}

/* yönetici gezegenin ışığı — tüm sahneye, tek parça, leke yok */
.mercek-isik{
  position:absolute;inset:0;mix-blend-mode:var(--isikKar,soft-light);
  background:var(--isikRenk,#A68F5B);opacity:var(--isikOp,.11);
  transition:background-color 1200ms ease, opacity 1200ms ease;
}
/* ---------- ESİNTİ — zeminin kendi nefesi ----------
   Zemin bir fotoğraf; NEFES hâlinde tek başına kaldığında donuk duruyor.
   Bu katman çok düşük kontrastlı ışık şeritlerini yatay kaydırıyor: çölde
   kum savruluyor gibi.

   GIF DEĞİL, bilinçli olarak. Gerekçeler ölçülebilir:
   · GIF tam ekranda her karede ana iş parçacığında çözülür — Kapı P'yi
     tek başına düşürür (bizim bütçemiz p90 30 ms).
   · GIF 256 renk + alfa yok; kumulun yumuşak geçişlerinde bantlaşır.
   · Gezegen filtresi/ışığı GIF'e işlemez — yedi pencerede aynı kalır,
     oysa zeminin tümü gezegenle birlikte değişiyor.
   · Duraklatılamaz, hızı ayarlanamaz, prefers-reduced-motion'ı dinlemez.
   Bunun yerine SALT DERLEYİCİ (compositor) katmanı: yalnız transform
   animasyonu, boyama yok, istendiğinde duruyor.

   Esinti zemine AİTTİR: hangi zemin hangi nefesi taşıyor, aşağıdaki
   [data-zemin] bloğunda tanımlı. Tanımlamayan zemin nefes almaz (--esinti:0);
   sessiz varsayılan, zemin katmanı sözleşmesinin gereği. */
.mercek-esinti{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity 1600ms ease;
  /* yalnız zeminin "hareketli" olduğu kuşakta görünsün — gökyüzünde kum olmaz */
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0%, transparent var(--esintiUst,44%),
    #000 var(--esintiOrta,60%), #000 88%, transparent 100%);
  mask-image:linear-gradient(to bottom,
    transparent 0%, transparent var(--esintiUst,44%),
    #000 var(--esintiOrta,60%), #000 88%, transparent 100%);
}
.mercek-esinti i{
  position:absolute;top:-8%;left:-100%;width:300%;height:120%;
  mix-blend-mode:screen;will-change:transform;
  animation:esinti-kay var(--esintiSure,58s) linear infinite;
  animation-play-state:paused;           /* yalnız NEFES'te çalışır */
}
.mercek-esinti i:nth-child(1){
  background:repeating-linear-gradient(96deg,
    rgba(var(--esintiRenk,255,240,214),0)    0px,
    rgba(var(--esintiRenk,255,240,214),.078) 70px,
    rgba(var(--esintiRenk,255,240,214),0)    168px,
    rgba(var(--esintiRenk,255,240,214),0)    252px,
    rgba(var(--esintiRenk,255,240,214),.044) 312px,
    rgba(var(--esintiRenk,255,240,214),0)    400px);
}
.mercek-esinti i:nth-child(2){
  top:2%;height:116%;
  animation-duration:calc(var(--esintiSure,58s) * 1.9);
  animation-direction:reverse;
  background:repeating-linear-gradient(92deg,
    rgba(var(--esintiRenk,255,240,214),0)    0px,
    rgba(var(--esintiRenk,255,240,214),.050) 130px,
    rgba(var(--esintiRenk,255,240,214),0)    300px,
    rgba(var(--esintiRenk,255,240,214),0)    460px,
    rgba(var(--esintiRenk,255,240,214),.031) 540px,
    rgba(var(--esintiRenk,255,240,214),0)    700px);
}
@keyframes esinti-kay{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-400px,0,0)}   /* desenin tam periyodu: dikişsiz */
}

/* Zeminlerin nefes tanımı — yeni zemin eklendiğinde buraya bir satır.
   Tanımsız zemin sessiz kalır; bu, "bilmediğimiz zemine hareket uydurmayalım"
   kuralının kod hâli. */
.mercek-sahne[data-zemin="kumul"]{
  --esintiUst:40%;--esintiOrta:56%;--esintiSure:46s;--esintiRenk:255,240,214;--esintiGuc:1;
}
.mercek-sahne[data-zemin="vadi"]{
  --esintiUst:26%;--esintiOrta:48%;--esintiSure:74s;--esintiRenk:206,224,240;--esintiGuc:.72;
}

/* perde — üst ve alt şeritlerin okunurluğu için; görsele dokunmaz.
   Yeni vadi görselinde nehir yukarı taştığı için BAĞ eriyordu. */
.mercek-perde{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(3,5,8,.38) 0%, rgba(3,5,8,.16) 46%, transparent 100%)
      top/100% calc(112px + env(safe-area-inset-top,0px)) no-repeat,
    linear-gradient(to top, rgba(3,5,8,.42) 0%, rgba(3,5,8,.18) 44%, transparent 100%)
      bottom/100% calc(104px + env(safe-area-inset-bottom,0px)) no-repeat;
  transition:opacity 700ms ease;
}
/* ---------- CAM BİLYE ---------- */
.mercek-cam{
  /* Raster boyu SABİT (--capx = en büyük çap); büyüme transform ile yapılır.
     width animasyonu her karede backdrop'u yeniden bulanıklaştırıyordu. */
  position:absolute;left:0;top:0;
  width:var(--capx,320px);height:var(--capx,320px);
  margin-left:calc(var(--capx,320px) / -2);margin-top:calc(var(--capx,320px) / -2);
  transform:translate3d(var(--xpx,50vw),var(--ypx,40vh),0) scale(var(--olc,1));
  border-radius:50%;z-index:4;overflow:hidden;
  -webkit-backdrop-filter:blur(var(--blx,var(--bl))) saturate(.95) brightness(var(--br));
          backdrop-filter:blur(var(--blx,var(--bl))) saturate(.95) brightness(var(--br));
  background:
    /* dip — camın alt yarısı; nehrin parlak kıvrımı metne vurmasın */
    linear-gradient(to top, rgba(2,4,7,var(--dip)) 0%,
      rgba(2,4,7,calc(var(--dip) * .34)) 38%, transparent 68%),
    radial-gradient(circle at var(--gx) var(--gy),
      rgba(2,4,7,.58) 0%, rgba(2,4,7,.30) 34%, transparent 66%),
    radial-gradient(circle at var(--ix) var(--iy),
      color-mix(in oklab,#FFF6E4 24%,transparent) 0%,
      color-mix(in oklab,#FFF6E4 6%,transparent) 26%, transparent 56%),
    color-mix(in oklab,var(--nB) var(--ton),transparent);
  box-shadow:
    inset calc(var(--sx)*1px) calc(var(--sy)*1px) 64px rgba(0,0,0,.42),
    inset calc(var(--sx)*-.5px) calc(var(--sy)*-.5px) 36px color-mix(in oklab,#FFF6E4 8%,transparent),
    0 10px 46px rgba(0,0,0,.34);
  transition:transform 900ms cubic-bezier(.48,.08,.18,1);
}
/* camın küçük keskin yansıması */
.mercek-cam::after{
  content:"";position:absolute;left:var(--ix);top:var(--iy);
  width:14%;height:9.5%;transform:translate(-50%,-50%) rotate(-24deg);border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(255,250,240,.30) 0%, rgba(255,250,240,.09) 46%, transparent 72%);
  filter:blur(3px);opacity:var(--yans);transition:opacity 700ms ease;
}
/* ---------- HALKA + KAPAT ---------- */
.mercek-halka{
  position:absolute;left:0;top:0;
  width:var(--capx,320px);height:var(--capx,320px);
  margin-left:calc(var(--capx,320px) / -2);margin-top:calc(var(--capx,320px) / -2);
  transform:translate3d(var(--xpx,50vw),var(--ypx,40vh),0) scale(var(--olc,1));
  z-index:10;pointer-events:none;
  transition:transform 900ms cubic-bezier(.48,.08,.18,1);
}
.mercek-halka svg{width:100%;height:100%;display:block;overflow:visible}
/* geçiş süresince: derleyici katmanını hazırla, pahalı metin dengelemesini beklet.
   text-wrap:balance her genişlik değişiminde satırları yeniden hesaplıyor. */
.mercek-sahne.gecis .mercek-cam,
.mercek-sahne.gecis .mercek-halka{will-change:transform}
.mercek-sahne.gecis .mercek-bas{text-wrap:auto}
/* çemberin tam tepe noktasında; cam büyüyünce kendiliğinden yerini bulur */
.mercek-kapat{
  position:absolute;left:50%;top:0;
  transform:translate(-50%,-50%) scale(calc(.86 / var(--olc,1)));
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font:400 15px/1 system-ui;color:#f0eade;cursor:pointer;border:0;
  -webkit-backdrop-filter:blur(10px) brightness(.72);backdrop-filter:blur(10px) brightness(.72);
  background:color-mix(in oklab,var(--nB) 16%,rgba(6,8,11,.42));
  box-shadow:0 2px 18px rgba(0,0,0,.45),
             inset 0 0 0 1px color-mix(in oklab,var(--nB) 62%,transparent),
             inset 0 1px 0 color-mix(in oklab,#FFF6E4 22%,transparent);
  opacity:0;pointer-events:none;
  transition:opacity 480ms ease, transform 620ms cubic-bezier(.33,0,.12,1);
}
/* ---------- YAZI ---------- */
.mercek-blok{
  position:absolute;left:var(--tx);top:var(--ty);transform:translate(-50%,-50%);
  width:var(--tw);max-width:420px;text-align:center;z-index:7;pointer-events:none;
  /* width geçişten ÇIKARILDI: her karede metni yeniden akıtıyor ve panel
     zeminindeki degradeleri yeniden boyuyordu (ölçüldü: p90 +13 ms). */
  transition:left 900ms cubic-bezier(.33,0,.12,1), top 900ms cubic-bezier(.33,0,.12,1),
             opacity 420ms ease;
}
/* okunurluk garantisi — dairenin merkezine değil, yazının durduğu yere */
.mercek-blok::before{
  content:"";position:absolute;left:50%;top:50%;width:148%;height:148%;
  transform:translate(-50%,-50%);z-index:-1;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(4,6,9,.54) 0%, rgba(4,6,9,.28) 46%, transparent 74%);
}
.mercek-et{font:400 9px/1 system-ui;letter-spacing:.26em;color:#d8d1c4;margin-bottom:10px}
.mercek-bas{font:400 18px/1.24 Georgia,'Times New Roman',serif;letter-spacing:.09em;
  color:#f9f4ea;margin:0 0 9px;text-wrap:balance}
.mercek-saat{font:400 10px/1 system-ui;letter-spacing:.13em;color:#c0b9ad;margin-bottom:15px}
.mercek-wow{font:italic 400 15.5px/1.52 Georgia,'Times New Roman',serif;color:#f2ece0;margin:0 0 16px}
.mercek-cizgi{width:32px;height:1px;margin:0 auto 13px;
  background:color-mix(in oklab,var(--nB) 78%,transparent)}
.mercek-sat{margin-bottom:15px}
.mercek-sat b{display:block;font:400 9px/1 system-ui;letter-spacing:.2em;
  color:#bdb6aa;margin-bottom:7px;font-weight:400}
.mercek-sat span{color:#eee8db;font-size:13px;line-height:1.52}
.mercek-ipucu{font:400 9px/1 system-ui;letter-spacing:.2em;color:#a8a196;margin-top:4px}
.mercek-derin{opacity:0}
/* ---------- ŞERİTLER ---------- */
.mercek-ust,.mercek-altmenu{
  position:absolute;left:0;right:0;z-index:9;display:flex;justify-content:space-between;
  align-items:center;text-shadow:0 1px 10px rgba(0,0,0,.75);transition:opacity 700ms ease;
}
.mercek-ust{top:0;padding:calc(20px + env(safe-area-inset-top,0px)) 18px 16px;
  font:400 10px/1 system-ui;letter-spacing:.2em;color:#e6e0d4;pointer-events:none}
.mercek-marka{background:0;border:0;padding:4px 2px;cursor:pointer;pointer-events:auto;
  font:400 10px/1 system-ui;letter-spacing:.2em;color:#e6e0d4;
  text-shadow:0 1px 10px rgba(0,0,0,.8)}
.mercek-altmenu{bottom:0;padding:16px 22px calc(20px + env(safe-area-inset-bottom,0px));
  font:400 9.5px/1 system-ui;letter-spacing:.17em;color:#9a948a}
.mercek-altmenu button{background:0;border:0;color:inherit;font:inherit;letter-spacing:inherit;
  cursor:pointer;padding:6px 4px}
.mercek-altmenu .aktif{color:#efe9dc}
/* niyet seçici — dokuz yuvarlak sembol, tek satır, altında seçilenin adı */
.mercek-niyet{
  position:absolute;top:calc(66px + env(safe-area-inset-top,0px));left:0;right:0;z-index:9;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:0 12px;transition:opacity 700ms ease;
}
.mercek-niyet-satir{display:flex;gap:min(1.4vw,7px);justify-content:center;width:100%}
/* S2b — Niyet sayısı DOKUZ kalır (skorun girdisi), ağırlık düşer:
   pasif niyette dolgu, çerçeve ve cam yok; yalnız sembol.
   Vurgu tek yerde: seçili niyet. */
.mercek-niyet button{
  flex:0 0 auto;width:min(8.4vw,38px);height:min(8.4vw,38px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  background:0;border:0;
  transition:opacity 320ms ease, transform 320ms ease;
  opacity:.42;
}
.mercek-niyet button:hover{opacity:.72}

/* ---------- DERECE HARİTASI ----------
   Dokuz niyetin her biri kendi kademesini taşıyor. S2b bozulmuyor:
   dolgu, çerçeve ve cam hâlâ YALNIZ seçili niyette — derece ağırlıkla
   (opaklık) ve sembolün altındaki ince izle anlatılıyor.
   Ölçüm: her saatte dokuz niyet 3–4 farklı kademeye dağılıyor, yani bu
   sıra süs değil, o anın haritası. */
.mercek-niyet button[data-derece]{opacity:var(--derOp,.42)}
.mercek-niyet button[data-derece="0"]{--derOp:.30}   /* Sürtünmeli */
.mercek-niyet button[data-derece="1"]{--derOp:.44}   /* Nötr */
.mercek-niyet button[data-derece="2"]{--derOp:.64}   /* Uygun */
.mercek-niyet button[data-derece="3"]{--derOp:.88}   /* Çok Uygun */
.mercek-niyet button[data-derece]{position:relative}
.mercek-niyet button[data-derece]::after{
  content:"";position:absolute;left:50%;bottom:-1px;height:1.5px;border-radius:1px;
  transform:translateX(-50%);
  width:var(--derEn,4px);
  background:var(--derRenk,#8FA9C4);
  opacity:var(--derIz,.5);
  transition:width 320ms ease, opacity 320ms ease, background-color 320ms ease;
}
.mercek-niyet button[data-derece="0"]::after{--derEn:4px;--derIz:.42}
.mercek-niyet button[data-derece="1"]::after{--derEn:8px;--derIz:.50}
.mercek-niyet button[data-derece="2"]::after{--derEn:13px;--derIz:.66}
.mercek-niyet button[data-derece="3"]::after{--derEn:18px;--derIz:.88}
/* seçili niyet her hâlde tam görünür — vurgu tek yerde kalır */
.mercek-niyet button.aktif[data-derece]{opacity:1}

/* ---------- GEZİNEN IŞIK ----------
   "Kişi seçmediğinde orada bir hareket olsun." Işık yalnız sembollerin
   üstünden geçer; MERCEĞİ DEĞİŞTİRMEZ. Gerekçe: kilitli ilke "kullanıcı
   kendi seçiminin sonucu değiştirdiğini görecek" — ekran kendi kendine
   okuma değiştirirse gördüğünün kimin seçimi olduğu belirsizleşir.
   Kişi bir niyete dokunduğu an durur ve o oturumda geri gelmez.
   Salt derleyici: yalnız transform + opacity. */
.mercek-niyet-satir{position:relative}
.mercek-niyet-isik{
  position:absolute;top:50%;left:0;width:min(8.4vw,38px);height:min(8.4vw,38px);
  margin-top:calc(min(8.4vw,38px) / -2);
  border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,246,228,.30) 0%, rgba(255,246,228,.11) 46%, transparent 72%);
  will-change:transform,opacity;
  animation:niyet-gez 13s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes niyet-gez{
   0%   {transform:translateX(0);opacity:0}
   6%   {opacity:1}
  94%   {opacity:1}
 100%   {transform:translateX(calc(100% * 8 + min(1.4vw,7px) * 8));opacity:0}
}
/* seçimden sonra hiç yok */
.mercek-sahne.niyetsecildi .mercek-niyet-isik{display:none}
@media (prefers-reduced-motion:reduce){
  .mercek-niyet-isik{animation:none;opacity:0}
}
.mercek-niyet button.aktif{
  opacity:1;
  background:color-mix(in oklab,var(--nB) 16%,rgba(8,10,14,.34));
  border:1px solid color-mix(in oklab,var(--nB) 56%,transparent);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
}
.mercek-niyet button svg{width:62%;height:62%;display:block}
.mercek-niyet button svg path{
  fill:none;stroke:#a09a90;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke 320ms ease;
}
.mercek-niyet button.aktif{
  border-color:color-mix(in oklab,var(--nk) 78%,transparent);
  background:color-mix(in oklab,var(--nk) 20%,rgba(8,10,14,.30));
  transform:scale(1.08);
}
.mercek-niyet button.aktif svg path{stroke:#f6f1e6;stroke-width:1.7}
/* niyet adı + hazırlık: vadinin parlak yerine denk gelse de okunsun */
.mercek-niyet-bilgi{position:relative;display:flex;flex-direction:column;
  align-items:center;gap:3px;padding:6px 16px}
.mercek-niyet-bilgi::before{content:"";position:absolute;inset:-1px -6px;z-index:-1;
  border-radius:14px;background:radial-gradient(ellipse at 50% 50%,
    rgba(4,6,9,.72) 0%, rgba(4,6,9,.44) 56%, transparent 84%)}
.mercek-niyet-ad{
  font:400 9.5px/1 system-ui;letter-spacing:.24em;color:#e0d9cc;
  text-shadow:0 1px 3px rgba(0,0,0,.9);text-transform:uppercase;
}
.mercek-hal{
  font:400 9.5px/1 system-ui;letter-spacing:.2em;margin-top:-1px;
  color:var(--halRenk,#a29b90);text-transform:uppercase;
  text-shadow:0 1px 10px rgba(0,0,0,.85);
  transition:color 500ms ease;
}
/* konum — veri buradan çıkıyor, bu yüzden menüde değil, ekranda */
.mercek-konum{
  position:absolute;left:50%;bottom:calc(58px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);z-index:9;display:flex;align-items:center;gap:7px;
  font:400 9.5px/1 system-ui;letter-spacing:.16em;color:#cfc8bb;cursor:pointer;
  background:rgba(8,10,14,.40);border:1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:9px 15px;border-radius:999px;transition:opacity 700ms ease, border-color 300ms ease;
  white-space:nowrap;max-width:calc(100vw - 40px);text-transform:uppercase;
}
.mercek-konum svg{width:13px;height:13px;flex:0 0 auto}
.mercek-konum svg path,.mercek-konum svg circle{
  fill:none;stroke:#b4ada2;stroke-width:1.5;stroke-linejoin:round}
.mercek-konum .ad{overflow:hidden;text-overflow:ellipsis}
.mercek-konum:hover{border-color:rgba(255,255,255,.26)}
/* konum yoksa dikkat çeker */
.mercek-konum.yok{color:#ecdcb6;border-color:color-mix(in oklab,#D8B771 44%,transparent)}
.mercek-konum.yok svg path,.mercek-konum.yok svg circle{stroke:#ecdcb6}
/* ---------- KADEME 2: AÇILIM ---------- */
.mercek-sahne.acik{
  --cw:min(182%,86vh);--cx:50%;--cy:52%;--tx:50%;--ty:49%;
  --bl:11px;--br:.62;--ton:17%;--yans:.35;--tw:80%;--dip:.30;
}
/* ---------- NEFES — ortadaki her şey çekilir, atmosfer kalır ----------
   Giriş: boşluğa BASILI TUTMAK (550 ms). Tek dokunuş zaten AÇILIM'a gidiyor;
   nefes onun rakibi değil, zıddı — bilerek "durmayı" isteyen bir jest.
   Çıkış: herhangi bir dokunuş.
   Alt menü kalır: kullanıcı nereye düştüğünü bilmeli, çıkışsız ekran olmaz. */
.mercek-sahne.nefes .mercek-ust,
.mercek-sahne.nefes .mercek-niyet,
.mercek-sahne.nefes .mercek-konum,
.mercek-sahne.nefes .mercek-zeka,
.mercek-sahne.nefes .mercek-yan,
.mercek-sahne.nefes .mercek-simdiye,
.mercek-sahne.nefes .mercek-yuzey,
.mercek-sahne.nefes .mercek-ip,
.mercek-sahne.nefes .mercek-halka,
.mercek-sahne.nefes .mercek-cam{opacity:0;pointer-events:none}
/* perde de incelsin: nefeste okunacak metin yok, karartmaya gerek yok */
.mercek-sahne.nefes .mercek-perde{opacity:.35}
.mercek-sahne.nefes .mercek-zemin{transform:scale(1.03)}
.mercek-sahne.nefes .mercek-esinti{opacity:var(--esintiGuc,0)}
.mercek-sahne.nefes .mercek-esinti i{animation-play-state:running}
.mercek-sahne.nefes .mercek-altmenu{opacity:.5}
/* hareketi azaltılmış cihazlarda esinti durur; nefes hâli yine çalışır */
@media (prefers-reduced-motion:reduce){
  .mercek-sahne.nefes .mercek-esinti i{animation:none}
  .mercek-sahne.nefes .mercek-esinti{opacity:calc(var(--esintiGuc,0) * .45)}
}

.mercek-sahne.acik .mercek-zemin{transform:scale(1.05)}
.mercek-sahne.acik .mercek-perde,
.mercek-sahne.acik .mercek-ust,
.mercek-sahne.acik .mercek-altmenu,
.mercek-sahne.acik .mercek-niyet,
.mercek-sahne.acik .mercek-zeka,
.mercek-sahne.acik .mercek-konum{opacity:0;pointer-events:none}
.mercek-sahne.acik .mercek-yuzey{opacity:0}
.mercek-sahne.acik .mercek-bas{font-size:20px}
.mercek-sahne.acik .mercek-wow{font-size:16px;line-height:1.55}
.mercek-sahne.acik .mercek-sat span{font-size:14px;line-height:1.55}
.mercek-sahne.acik .mercek-sat b{font-size:9.5px}
.mercek-sahne.acik .mercek-derin{opacity:1;transition-delay:380ms}
.mercek-sahne.acik .mercek-kapat{
  opacity:1;pointer-events:auto;
  transform:translate(-50%,-50%) scale(calc(1 / var(--olc,1)));transition-delay:420ms;
}
/* ---------- KONUM VARYANTLARI (rastgele) ---------- */
.acik.k-a{--ix:74%;--iy:26%;--gx:22%;--gy:80%;--sx:20;--sy:18;--ia:-48}
.acik.k-b{--ix:26%;--iy:28%;--gx:78%;--gy:78%;--sx:-20;--sy:18;--ia:-132}
.acik.k-c{--ix:50%;--iy:16%;--gx:50%;--gy:88%;--sx:0;--sy:24;--ia:-90}
.acik.k-d{--ix:38%;--iy:74%;--gx:64%;--gy:24%;--sx:12;--sy:-20;--ia:122}
.acik.k-e{--ix:70%;--iy:20%;--gx:26%;--gy:84%;--sx:18;--sy:22;--ia:-52}
.acik.k-f{--ix:30%;--iy:72%;--gx:74%;--gy:26%;--sx:-16;--sy:-18;--ia:138}
/* ---------- MASAÜSTÜ ----------
   KARAR (Hakan · 13 Eylül 2026): masaüstü, mobil deneyimin büyütülmüş hâli
   DEĞİL, mobil deneyimin kendisidir. "Tasarım yayılmasın; mobildeki deneyimi
   burada yaşasın; mobil genişlikten sonraki alan çok hafif flu olabilir."

   Yani sahne geniş ekranda TÜM SAYFAYA yayılmıyor — ortada mobil genişlikte
   bir sütun olarak duruyor. Sayfanın kalanını `#aralik-fon` (js/core/
   aralik-zemin.js) sabit ve hafif bulanık olarak dolduruyor.

   Bu kararın en büyük getirisi: masaüstüne özel geometri kalmıyor. Önceki
   turlarda buraya yazılmış kuralların HEPSİ silindi —
     · .mercek-blok konum/genişlik ezmesi
     · .mercek-blok::before sis daraltması
     · .mercek-ust/.mercek-altmenu/.mercek-niyet sütun genişliği
     · .mercek-bas / .mercek-wow punto büyütmesi
     · .mercek-zeka boncuk sınırı
     · açık modlarda --cw tavanları (680/700/780px)
     · #bag-sahne.acik kısa-ekran kuralı
   Hepsi "sahne 1920px genişken mobil oranlar bozuluyor" sorununu yamıyordu.
   Sahne artık 430px; mobil oranlar olduğu gibi doğru. Yamalar yerine sebep
   kaldırıldı. */
@media (min-width:820px){
  .mercek-sahne{
    /* `position:fixed` + left/right 0 + genişlik + margin auto = ortalama.
       transform KULLANILMADI: sahnenin üstünde bir transform, içindeki
       `position:fixed` katmanlar için içerme bloğu doğurur ve mercek
       geometrisi (translate3d + scale) onun üstüne binerdi. */
    left:0;right:0;
    /* 470px — TAVAN. Sütun genişliğinin etkisi ölçüldü (1920×1080):
         sütun 390 → cam 341 (%87)   ← mobil ile birebir
         sütun 470 → cam 411 (%87)   ← seçilen
         sütun 560 → cam 443 (%79)
         sütun 720 → cam 443 (%62)
         sütun 880 → cam 443 (%50)
       Cam `min(87.5%, 41vh)` ile büyüyor; 1080px boyda 41vh = 443px.
       Sütun ~540'ı geçtiği an cam GENİŞLİKLE değil yükseklikle sınırlanıyor,
       yani büyümüyor — yalnız etrafı boşalıyor ve düzen dağılıyor. 880'de
       ekran görüntüsü alındı: ARALIK en solda, BAĞ en sağda, mercek ortada
       bir ada. Hakan'ın bir tur önce reddettiği "tasarım yayıldı" hâli.
       470 camın hâlâ genişliğe bağlı olduğu son eşik: %87 doluluk korunuyor,
       metin bir tık rahat nefes alıyor. */
    /* Değişken burada TANIMLANIYOR: ay sahnesi (css/aralik-ay.css) bunu
       okuyup kendi genişliğini sütuna göre ayarlıyor. Önceden yalnız
       `var(--sahne-en, 470px)` yedeğiyle kullanılıyordu, yani tanımlı
       değildi ve okuyan taraf boş alıyordu. */
    --sahne-en:470px;
    width:min(100%, var(--sahne-en));
    margin-inline:auto;
    /* Sütunun kenarı sert bir kesik olmasın: fon oraya doğru eriyor. */
    box-shadow:0 0 90px 30px rgba(5,7,10,.55);
  }
}
@media (prefers-reduced-motion:reduce){
  .mercek-cam,.mercek-halka,.mercek-blok,.mercek-zemin,.mercek-kapat{transition-duration:1ms}
}
/* ---------- YAN SİLÜETLER: komşu pencereler ---------- */
.mercek-yan{
  position:absolute;z-index:8;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  background:0;border:0;cursor:pointer;padding:0;
  transition:opacity 700ms ease, left 900ms cubic-bezier(.33,0,.12,1),
             top 900ms cubic-bezier(.33,0,.12,1);
}
/* Oran: ana sarkaç 100 birim (--cw 81%) · gelecek 25 · geçmiş 15 */
/* GELECEK — sağ üstte, sarkacın kenarına oturur, belirgin */
.mercek-yan.sag{left:87%;top:18%}
.mercek-yan.sag .disk{width:20.2vw;height:20.2vw;max-width:86px;max-height:86px}
.mercek-yan.sag .sembol{opacity:1}
.mercek-yan.sag .sembol svg path{stroke-width:1.4}
.mercek-yan.sag .bilgi{align-items:center;text-align:center}
.mercek-yan.sag .ad{font-size:10px;color:#e4ded1}
/* GEÇMİŞ — sol altta, arada boşluk, sönük */
.mercek-yan.sol{left:20%;top:56%;flex-direction:column-reverse}
.mercek-yan.sol .disk{width:16.2vw;height:16.2vw;max-width:70px;max-height:70px}
.mercek-yan.sol .sembol{opacity:.84}
.mercek-yan.sol .sembol svg path{stroke-width:1.8}
.mercek-yan.sol .bilgi{align-items:center;text-align:center}
.mercek-yan.sol .ad{font-size:9.5px;color:#cfc8bb}
.mercek-yan[hidden]{display:none!important}
.mercek-yan .disk{
  border-radius:50%;position:relative;
  display:flex;align-items:center;justify-content:center;
  /* S4 — Çap aynı kaldı (önceki karar geri alınmıyor); dolgu kalktı.
     Sahnedeki tek dolu daire mercek olmalı; gezegen eşlik eden nesne. */
  background:0;
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--yanRenk,#A68F5B) 62%,transparent),
             0 2px 14px rgba(0,0,0,.34);
}
.mercek-yan .sembol{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.mercek-yan .sembol svg{width:58%;height:58%;display:block}
.mercek-yan .sembol svg path{
  fill:none;stroke:color-mix(in oklab,var(--yanRenk,#A68F5B) 40%,#f6f1e6);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.mercek-yan .bilgi{position:relative;display:flex;flex-direction:column;gap:3px;
  padding:5px 10px;text-shadow:0 1px 3px rgba(0,0,0,.95)}
/* etiketin arkasına yumuşak zemin — vadinin parlak yerine denk gelse de okunur */
.mercek-yan .bilgi::before{
  content:"";position:absolute;inset:-2px -4px;z-index:-1;border-radius:12px;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(4,6,9,.78) 0%, rgba(4,6,9,.52) 52%, transparent 82%);
}
.mercek-yan .ad{font:400 10px/1 system-ui;letter-spacing:.18em;white-space:nowrap}
.mercek-yan .vakit{font:400 9px/1 system-ui;letter-spacing:.1em;color:#b0a99e;white-space:nowrap}
.mercek-yan.sag .disk{
  box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--yanRenk,#A68F5B) 76%,transparent),
             inset 0 3px 0 color-mix(in oklab,#FFF6E4 22%,transparent),
             0 6px 28px rgba(0,0,0,.56);
}
.mercek-yan:hover .disk,.mercek-yan:active .disk{
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--yanRenk,#A68F5B) 62%,transparent),
             0 2px 20px rgba(0,0,0,.5);
}
/* ---------- ŞİMDİ'YE DÖN ---------- */
.mercek-simdiye{
  /* 126px niyet adı/eşik yazısının üstüne düşüyordu; şeridin altına alındı */
  position:absolute;left:50%;top:calc(158px + env(safe-area-inset-top,0px));
  transform:translateX(-50%);z-index:11;
  font:400 9px/1 system-ui;letter-spacing:.2em;color:#ecdcb6;cursor:pointer;
  background:rgba(8,10,14,.42);border:1px solid color-mix(in oklab,var(--nB) 40%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:8px 14px;border-radius:999px;transition:opacity 700ms ease;
}
.mercek-simdiye[hidden]{display:none!important}
.mercek-sahne.acik .mercek-yan,
.mercek-sahne.acik .mercek-simdiye{opacity:0;pointer-events:none}
/* ---------- REHBER: görselin küçük sarkacı ---------- */
.mercek-zeka{
  position:absolute;left:50%;top:77.6%;width:29%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;z-index:8;
  background:0;border:0;cursor:pointer;padding:0;
  transition:opacity 700ms ease;
}
/* Küçük sarkaç artık görselde gömülü değil, burada çiziliyor:
   büyük merceğin küçük kardeşi — aynı cam, aynı ışık yönü. */
.mercek-zeka .iz{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  /* cam: kırılma az, kenar keskin. Bulanıklık artarsa sis gibi durur. */
  -webkit-backdrop-filter:blur(1.4px) saturate(1.02) brightness(.88) contrast(1.06);
          backdrop-filter:blur(1.4px) saturate(1.02) brightness(.88) contrast(1.06);
  background:
    radial-gradient(circle at var(--gx) var(--gy),
      rgba(2,4,7,.40) 0%, rgba(2,4,7,.14) 40%, transparent 70%),
    radial-gradient(circle at var(--ix) var(--iy),
      color-mix(in oklab,#FFF6E4 22%,transparent) 0%, transparent 44%),
    color-mix(in oklab,var(--nB) 6%,transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab,#FFF6E4 34%,transparent),
    inset 0 0 0 2.5px rgba(3,5,8,.34),
    inset calc(var(--sx)*.38px) calc(var(--sy)*.38px) 18px rgba(0,0,0,.34),
    0 4px 16px rgba(0,0,0,.34);
  transition:box-shadow 600ms ease, background 600ms ease, backdrop-filter 600ms ease;
}
/* çekirdek — dört uçlu ince ışık; eskiden görsele gömülüydü */
.mercek-zeka .cek{
  position:absolute;left:50%;top:50%;width:15%;height:15%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:
    linear-gradient(to bottom, transparent 0%,
      color-mix(in oklab,#FFF6E4 82%,transparent) 50%, transparent 100%) 50%/1.2px 100% no-repeat,
    linear-gradient(to right, transparent 0%,
      color-mix(in oklab,#FFF6E4 82%,transparent) 50%, transparent 100%) 50%/100% 1.2px no-repeat,
    radial-gradient(circle at 50% 50%,
      color-mix(in oklab,#FFF6E4 46%,transparent) 0%, transparent 62%);
  opacity:.78;transition:opacity 600ms ease, transform 600ms cubic-bezier(.33,0,.12,1);
}
.mercek-zeka:hover .iz,.mercek-zeka:active .iz{
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--nB) 62%,transparent),
             inset calc(var(--sx)*.42px) calc(var(--sy)*.42px) 22px rgba(0,0,0,.38),
             0 0 30px color-mix(in oklab,var(--nB) 24%,transparent);
  background:
    radial-gradient(circle at var(--ix) var(--iy),
      color-mix(in oklab,#FFF6E4 22%,transparent) 0%, transparent 52%),
    color-mix(in oklab,var(--nB) 13%,transparent);
}
.mercek-zeka:hover .cek,.mercek-zeka:active .cek{
  opacity:1;transform:translate(-50%,-50%) scale(1.28);
}
/* rehber paneli — açılımla aynı cam, ayrı içerik */
.mercek-zekapanel{opacity:0;pointer-events:none}
.mercek-sahne.zeka{
  --cw:min(182%,86vh);--cx:50%;--cy:52%;--tx:50%;--ty:49%;
  --bl:11px;--br:.60;--ton:17%;--yans:.35;--tw:80%;--dip:.30;
}
.mercek-sahne.zeka .mercek-yuzey{opacity:0}
.mercek-sahne.zeka .mercek-zekapanel{opacity:1;pointer-events:auto;transition-delay:380ms}
.mercek-sahne.zeka .mercek-kapat{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(calc(1 / var(--olc,1)));transition-delay:420ms}
.mercek-sahne.zeka .mercek-perde,
.mercek-sahne.zeka .mercek-ust,
.mercek-sahne.zeka .mercek-altmenu,
.mercek-sahne.zeka .mercek-niyet,
.mercek-sahne.zeka .mercek-konum,
.mercek-sahne.zeka .mercek-yan,
.mercek-sahne.zeka .mercek-simdiye,
.mercek-sahne.zeka .mercek-zeka{opacity:0;pointer-events:none}
.zeka-liste{display:flex;flex-direction:column;gap:9px;text-align:left}
.zeka-soru{
  background:rgba(8,10,14,.34);border:1px solid color-mix(in oklab,var(--nB) 30%,transparent);
  color:#ece6d9;font:400 13px/1.45 -apple-system,system-ui,sans-serif;
  padding:12px 14px;border-radius:14px;cursor:pointer;text-align:left;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  transition:border-color 300ms ease, background 300ms ease;
}
.zeka-soru:hover{border-color:color-mix(in oklab,var(--nB) 64%,transparent);
  background:color-mix(in oklab,var(--nB) 12%,rgba(8,10,14,.34))}
.zeka-kendi{display:flex;gap:8px;margin-top:2px}
.zeka-kendi input{
  flex:1;background:rgba(8,10,14,.34);border:1px solid rgba(255,255,255,.14);
  color:#f2ece0;font:400 13px/1 system-ui;padding:12px 14px;border-radius:14px;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
}
.zeka-kendi input::placeholder{color:#8f8a81}
.zeka-kendi input:focus{outline:0;border-color:color-mix(in oklab,var(--nB) 60%,transparent)}
.zeka-kendi button{
  width:46px;border:1px solid color-mix(in oklab,var(--nB) 44%,transparent);
  background:color-mix(in oklab,var(--nB) 16%,rgba(8,10,14,.34));
  color:#f4efe4;font:400 16px/1 system-ui;border-radius:14px;cursor:pointer;
}
.zeka-kilit{text-align:center}
.zeka-kilit[hidden]{display:none!important}
.zeka-liste[hidden]{display:none!important}
.zeka-kilit p{margin:0 0 16px;color:#cfc8bb;font-size:13.5px;line-height:1.55}
.zeka-kilit button{
  font:400 10px/1 system-ui;letter-spacing:.22em;color:#f4efe4;cursor:pointer;
  background:color-mix(in oklab,var(--nB) 22%,rgba(8,10,14,.4));
  border:1px solid color-mix(in oklab,var(--nB) 62%,transparent);
  padding:13px 26px;border-radius:999px;
}
.zeka-yanit{margin-top:16px;text-align:left;color:#ddd6c9;font-size:13px;line-height:1.6}
.zeka-yanit[hidden]{display:none!important}
.zeka-yanit p{margin:0 0 10px}
/* ---------- AY: sarkacın tam yukarısında, en üstte ---------- */
.mercek-ust{justify-content:space-between}
.mercek-ay{
  position:absolute;left:62%;top:calc(5px + env(safe-area-inset-top,0px));
  transform:translateX(-50%);
  background:0;border:0;padding:0;cursor:pointer;pointer-events:auto;
  width:min(14.7vw,66px);height:min(14.7vw,66px);
  transition:opacity 700ms ease, transform 400ms ease;
}
.mercek-ay:hover{transform:translateX(-50%) scale(1.07)}
.mercek-ay[hidden]{display:none!important}
.ay-faz{width:100%;height:100%;display:block;overflow:visible}
.ay-govde{fill:rgba(6,9,12,.66)}
.ay-isik{fill:#E9E0CE;opacity:.92}
.ay-kenar{fill:none;stroke:color-mix(in oklab,#E9E0CE 34%,transparent);stroke-width:.8}
/* ay paneli — vadi altta hafifçe hissedilsin: cam daha saydam */
.mercek-aypanel{opacity:0;pointer-events:none}
.mercek-sahne.aymod{
  /* Önceki ölçü: ay merceği en ince ve en küçük olan. Üç yeni satır
     merceğin DIŞINA taşmasın diye büyütülmedi, yazı sıkılaştırıldı. */
  --cw:min(146%,70vh);--cx:50%;--cy:44%;--tx:50%;--ty:43%;
  --bl:7px;--br:.74;--ton:11%;--yans:.5;--tw:66%;--dip:.24;
}
.mercek-sahne.aymod .mercek-yuzey{opacity:0}
.mercek-sahne.aymod .mercek-aypanel{opacity:1;pointer-events:auto;transition-delay:360ms}
.mercek-sahne.aymod .mercek-kapat{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);transition-delay:400ms}
.mercek-sahne.aymod .mercek-perde,
.mercek-sahne.aymod .mercek-altmenu,
.mercek-sahne.aymod .mercek-niyet,
.mercek-sahne.aymod .mercek-konum,
.mercek-sahne.aymod .mercek-yan,
.mercek-sahne.aymod .mercek-simdiye,
.mercek-sahne.aymod .mercek-zeka,
.mercek-sahne.aymod .mercek-cam,
.mercek-sahne.aymod .mercek-halka,
.mercek-sahne.aymod .mercek-ust{opacity:0;pointer-events:none}
.ay-buyuk{width:56px;height:56px;margin:0 auto 11px}
.ay-buyuk .ay-govde{fill:rgba(6,9,12,.5)}
/* ---------- HAKKINDA paneli ---------- */
.mercek-hakpanel{opacity:0;pointer-events:none}
.mercek-sahne.hakmod{
  --cw:min(158%,76vh);--cx:50%;--cy:46%;--tx:50%;--ty:45%;
  --bl:9px;--br:.68;--ton:13%;--yans:.45;--tw:74%;--dip:.26;
}
.mercek-sahne.hakmod .mercek-yuzey{opacity:0}
.mercek-sahne.hakmod .mercek-hakpanel{opacity:1;pointer-events:auto;transition-delay:360ms}
.mercek-sahne.hakmod .mercek-kapat{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);transition-delay:400ms}
.mercek-sahne.hakmod .mercek-perde,
.mercek-sahne.hakmod .mercek-altmenu,
.mercek-sahne.hakmod .mercek-niyet,
.mercek-sahne.hakmod .mercek-konum,
.mercek-sahne.hakmod .mercek-yan,
.mercek-sahne.hakmod .mercek-simdiye,
.mercek-sahne.hakmod .mercek-ay,
.mercek-sahne.hakmod .mercek-zeka{opacity:0;pointer-events:none}
.hak-satir{display:flex;flex-direction:column;gap:11px;margin-top:20px;text-align:left}
.hak-satir span{display:flex;justify-content:space-between;gap:14px;
  font:400 12.5px/1.4 system-ui;color:#e6e0d3;
  border-top:1px solid rgba(255,255,255,.10);padding-top:10px}
.hak-satir b{font:400 9px/1.4 system-ui;letter-spacing:.2em;color:#a8a196;flex:0 0 auto}
/* ---------- HESAP ---------- */
.mercek-hesap{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;cursor:pointer;pointer-events:auto;
  display:flex;align-items:center;justify-content:center;padding:0;
  background:rgba(8,10,14,.34);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  transition:border-color 320ms ease, background 320ms ease, transform 320ms ease;
}
.mercek-hesap span{font:400 12px/1 system-ui;letter-spacing:0;color:#cfc8bb}
/* üye değilse: nötr ama davet eden ince halka */
.mercek-hesap::after{
  content:"";position:absolute;width:34px;height:34px;border-radius:50%;
  box-shadow:0 0 0 1px color-mix(in oklab,#D8B771 30%,transparent);opacity:1;
}
.mercek-hesap.uye::after{opacity:0}
.mercek-hesap.uye{border-color:color-mix(in oklab,var(--nB) 54%,transparent);
  background:color-mix(in oklab,var(--nB) 16%,rgba(8,10,14,.34))}
.mercek-hesap:hover{transform:scale(1.06)}
.mercek-hesappanel{opacity:0;pointer-events:none}
.mercek-sahne.hesapmod{
  --cw:min(158%,76vh);--cx:50%;--cy:46%;--tx:50%;--ty:45%;
  --bl:9px;--br:.66;--ton:13%;--yans:.45;--tw:76%;--dip:.26;
}
.mercek-sahne.hesapmod .mercek-yuzey{opacity:0}
.mercek-sahne.hesapmod .mercek-hesappanel{opacity:1;pointer-events:auto;transition-delay:360ms}
.mercek-sahne.hesapmod .mercek-kapat{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);transition-delay:400ms}
.mercek-sahne.hesapmod .mercek-perde,
.mercek-sahne.hesapmod .mercek-altmenu,
.mercek-sahne.hesapmod .mercek-niyet,
.mercek-sahne.hesapmod .mercek-konum,
.mercek-sahne.hesapmod .mercek-yan,
.mercek-sahne.hesapmod .mercek-simdiye,
.mercek-sahne.hesapmod .mercek-ay,
.mercek-sahne.hesapmod .mercek-marka,
.mercek-sahne.hesapmod .mercek-zeka{opacity:0;pointer-events:none}
.hesap-kimlik{text-align:center;margin-bottom:6px}
.hesap-kimlik p{margin:0 0 16px;color:#cfc8bb;font-size:13px;line-height:1.55}
.hesap-rol{font:400 9.5px/1 system-ui!important;letter-spacing:.2em;
  color:#a8a196!important;text-transform:uppercase;margin:0 0 16px!important}
.hesap-uye,.hesap-cikis{
  font:400 10px/1 system-ui;letter-spacing:.22em;cursor:pointer;
  padding:13px 26px;border-radius:999px;
}
.hesap-uye{color:#f4efe4;background:color-mix(in oklab,var(--nB) 22%,rgba(8,10,14,.4));
  border:1px solid color-mix(in oklab,var(--nB) 62%,transparent)}
.hesap-cikis{color:#b4ada2;background:0;border:1px solid rgba(255,255,255,.16)}
.hesap-satir{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid rgba(255,255,255,.10);padding-top:13px;margin-top:13px}
.hesap-satir b{font:400 9px/1 system-ui;letter-spacing:.2em;color:#a8a196;
  flex:0 0 auto;font-weight:400}
.hesap-satir .secenekler{display:flex;gap:7px}
.hesap-satir .secenekler button{
  font:400 9px/1 system-ui;letter-spacing:.14em;color:#b4ada2;cursor:pointer;
  background:rgba(8,10,14,.3);border:1px solid rgba(255,255,255,.13);
  padding:9px 13px;border-radius:999px;transition:all 300ms ease;
}
.hesap-satir .secenekler button.aktif{
  color:#f4efe4;border-color:color-mix(in oklab,var(--nB) 66%,transparent);
  background:color-mix(in oklab,var(--nB) 18%,rgba(8,10,14,.3));
}
.hesap-satir .secenekler button:disabled{opacity:.4;cursor:default}
/* Ay paneli merceğin içine yerleşir: başlık küçülür, satır araları daralır.
   Panel yüksekliği camın çapını aşmaz; aşarsa içinde kayar. */
.mercek-sahne.aymod .mercek-bas{font-size:17px;margin-bottom:6px}
.mercek-sahne.aymod .mercek-saat{font-size:9.5px;margin-bottom:10px}
.mercek-sahne.aymod .mercek-wow{font-size:13px;line-height:1.45;margin-bottom:11px}
.mercek-sahne.aymod .mercek-cizgi{margin-bottom:10px}
.mercek-sahne.aymod .mercek-sat{margin-bottom:9px}
.mercek-sahne.aymod .mercek-sat:last-child{margin-bottom:0}
/* Kaydırma kutusu YOK: overflow:auto, yazının arkasındaki yumuşak karartmayı
   kendi sınırına kırpıp daire içinde dikdörtgen bir leke bırakıyordu.
   Sıkılaştırılmış tipografiyle içerik her iki ekranda da camın içinde kalıyor. */
.mercek-sahne.aymod .mercek-blok{max-width:none}
.mercek-sahne.aymod .mercek-sat b{font-size:8px;margin-bottom:4px}
.mercek-sahne.aymod .mercek-sat span{font-size:12px;line-height:1.4}
/* ölçü probu — camın çapını geçişten etkilenmeden okumak için */
.mercek-olcu,.mercek-olcumax{
  position:absolute;left:0;top:0;height:1px;
  visibility:hidden;pointer-events:none;transition:none;
}
.mercek-olcu{width:var(--cw)}
.mercek-olcumax{width:var(--cwmax)}
/* ---------- PANELLERDE METİN: üstten başlar, aşağı doğru büyür ---------- */
.mercek-sahne.acik .mercek-blok,
.mercek-sahne.zeka .mercek-blok,
.mercek-sahne.hakmod .mercek-blok,
.mercek-sahne.hesapmod .mercek-blok{
  /* --ustbosluk JS'te ölçülür: çemberin tepesi + kapat butonunun payı.
     Ölçülemezse 74px'e düşer. */
  top:calc(var(--ustbosluk,74px) + env(safe-area-inset-top,0px));
  transform:translate(-50%,0);
  max-height:calc(100vh - var(--ustbosluk,74px) - 76px - env(safe-area-inset-bottom,0px));
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.mercek-sahne.acik .mercek-blok::-webkit-scrollbar,
.mercek-sahne.zeka .mercek-blok::-webkit-scrollbar{display:none}
/* S5 — Panelde KENARSIZ sis.
   İlk deneme ::before ile yapıldı ve dikdörtgen kaldı: panelin
   `overflow-y:auto` kaydırma kutusu ::before'u kendi sınırına kırpıyor
   (ay panelinde de aynı tuzağa düşmüştük). Çözüm: karartmayı kutunun
   KENDİ zeminine koymak ve dört kenarda da sıfıra indirmek — kenarda
   opaklık 0 olunca görünür bir sınır kalmıyor. */
.mercek-sahne.acik .mercek-blok::before,
.mercek-sahne.zeka .mercek-blok::before,
.mercek-sahne.hakmod .mercek-blok::before,
.mercek-sahne.hesapmod .mercek-blok::before{content:none}

.mercek-sahne.acik .mercek-blok,
.mercek-sahne.zeka .mercek-blok,
.mercek-sahne.hakmod .mercek-blok,
.mercek-sahne.hesapmod .mercek-blok{
  padding:26px 20px 30px;
  background:
    radial-gradient(ellipse 74% 56% at 50% 50%,
      rgba(4,6,9,.50) 0%, rgba(4,6,9,.34) 58%, transparent 100%),
    linear-gradient(to bottom,
      transparent 0%, rgba(4,6,9,.22) 14%, rgba(4,6,9,.22) 86%, transparent 100%);
}

/* S10 — KAPALI mercekte metnin altına kenarsız sis.
   Varsayılan zemin kumul olunca merceğin içine düşen ışık lekesi italik özet
   satırının yerel kontrastını 4.4:1'e indirdi (eşik 4.5:1). Merceğin genel
   parlaklığına (--br) dokunmuyoruz — o, onaylanan atmosferin kendisi;
   yalnız metnin altı korunuyor. Kenarda opaklık sıfır olduğu için görünür
   bir kutu oluşmuyor (S5'te öğrenilen kural). */
.mercek-yuzey{
  /* DENENDİ, İŞE YARAMADI: dolgu eklemek kutuyu büyüttüğü için satırı
     AŞAĞI itti (454 → 482 px) ve kontrast değişmedi. Asıl kaldıraç
     merceğin kendi dip tonu (--dip) — zaten bunun için konmuştu. */
  /* TEK radyal, yarıçap KUTUYA göre (%50 = yarı genişlik).
     Buradaki ilk hâlde altta bir dikey linear vardı ve sağ-sol kenarda tam
     opaklıkta kaldığı için mercek içinde net bir DİKDÖRTGEN çiziyordu —
     S5'te ve ay panelinde de aynı tuzak. Üçüncü kez: kenarsız sis tek
     radyalle yapılır, yarıçap kutuyu aşmaz. */
  background:radial-gradient(ellipse 52% 56% at 50% 50%,
    rgba(4,6,9,.46) 0%, rgba(4,6,9,.34) 52%,
    rgba(4,6,9,.16) 78%, transparent 100%);
}

/* kısa ekranlarda üst yığın daralsın */
@media (max-height:700px){
  /* kısa ekranda üst yığın daha çok yer kaplıyor: sarkacı aşağı al, biraz küçült */
  .mercek-sahne{--cw:min(87.5%,36.7vh);--cy:44%;--ty:46.5%}
  .mercek-ay{width:min(12.5vw,52px);height:min(12.5vw,52px);
    top:calc(4px + env(safe-area-inset-top,0px))}
  .mercek-niyet{top:calc(58px + env(safe-area-inset-top,0px));gap:6px}
  .mercek-niyet button{width:min(7.8vw,34px);height:min(7.8vw,34px)}
  .mercek-simdiye{top:calc(132px + env(safe-area-inset-top,0px))}
  .mercek-yan.sag{top:25%;left:85%}
  .mercek-yan.sol{top:63%;left:19%}
  .mercek-sahne.acik .mercek-blok,
  .mercek-sahne.zeka .mercek-blok{
    top:calc(var(--ustbosluk,62px) + env(safe-area-inset-top,0px));
    max-height:calc(100vh - var(--ustbosluk,62px) - 68px - env(safe-area-inset-bottom,0px));
  }
}

/* --- Sarkaç ipi: küçük sarkaç ile merceği birleştirir, yukarı devam eder --- */
.mercek-ip{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  width:100%;height:100%;overflow:visible;
  transition:opacity 600ms ease;
}
.mercek-ip line{
  stroke:color-mix(in oklab,var(--nB) 40%,rgba(255,246,228,.22));
  stroke-width:1;stroke-linecap:round;
  transition:stroke 800ms ease;
}
.mercek-sahne.acik .mercek-ip,
.mercek-sahne.zeka .mercek-ip,
.mercek-sahne.aymod .mercek-ip,
.mercek-sahne.hakmod .mercek-ip,
.mercek-sahne.hesapmod .mercek-ip{opacity:0}

/* --- Rehber imzası: bu yorumun AI'dan geldiğini söyleyen işaret --- */
.yz-imza{
  position:absolute;left:50%;top:50%;width:52%;height:52%;
  transform:translate(-50%,-50%);pointer-events:none;
  opacity:.72;transition:opacity 600ms ease, transform 600ms cubic-bezier(.33,0,.12,1);
}
.yz-imza path{
  fill:color-mix(in oklab,#FFF6E4 82%,transparent);
}
.yz-imza path:nth-child(2),
.yz-imza path:nth-child(3){fill:color-mix(in oklab,var(--nB) 72%,transparent)}
.mercek-zeka:hover .yz-imza,.mercek-zeka:active .yz-imza{
  opacity:1;transform:translate(-50%,-50%) scale(1.14);
}
/* imza gelince eski çekirdek işareti gereksiz */
.mercek-zeka .cek{display:none}

/* ==================== HESAP PANELİ ====================
   Giriş · kayıt · şifre unuttum · şifre değiştir · hesap silme · KVKK.
   Sunucu tarafı hazırdı, eksik olan buydu. Mercek dilinde: kart yok,
   alanlar camdan, tek vurgu birincil düğmede. */
.hesap-govde{display:flex;flex-direction:column;gap:9px;margin:4px 0 14px}
.hesap-form{display:flex;flex-direction:column;gap:9px;margin:0}
.hesap-alan{display:block;text-align:left}
.hesap-alan b{display:block;font:400 8.5px/1 system-ui;letter-spacing:.2em;
  color:#bdb6aa;font-weight:400;margin:0 0 6px}
.hesap-alan input{
  width:100%;box-sizing:border-box;padding:11px 12px;
  color:#f2ece0;font:400 14px/1 system-ui;
  background:rgba(8,10,14,.42);border-radius:11px;
  border:1px solid color-mix(in oklab,var(--nB) 26%,transparent);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  transition:border-color 260ms ease;
}
.hesap-alan input:focus{outline:0;border-color:color-mix(in oklab,var(--nB) 62%,transparent)}

.hesap-dg{
  display:block;width:100%;box-sizing:border-box;padding:12px 14px;cursor:pointer;
  font:400 10px/1 system-ui;letter-spacing:.2em;color:#e6e0d4;text-align:center;
  text-decoration:none;border-radius:999px;background:0;
  border:1px solid color-mix(in oklab,var(--nB) 26%,transparent);
  transition:border-color 260ms ease, color 260ms ease, background 260ms ease;
}
.hesap-dg:hover{border-color:color-mix(in oklab,var(--nB) 52%,transparent);color:#f6f1e6}
/* tek vurgu: birincil eylem */
.hesap-dg.birincil{
  color:#f7f2e6;
  background:color-mix(in oklab,var(--nB) 15%,rgba(6,8,11,.42));
  border-color:color-mix(in oklab,var(--nB) 56%,transparent);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
}
.hesap-dg.ince{border-color:transparent;color:#b6afa3;font-size:9.5px;padding:9px 12px}
.hesap-dg.ince:hover{color:#e6e0d4;border-color:color-mix(in oklab,var(--nB) 22%,transparent)}
.hesap-dg.tehlike{color:#d79b86}
.hesap-dg.tehlike:hover{color:#e8b09b;border-color:rgba(215,155,134,.42)}
.hesap-dg.birincil.tehlike{
  color:#f4d9cf;background:rgba(140,62,44,.28);border-color:rgba(215,155,134,.5)}

.hesap-not{font:400 11px/1.55 system-ui;color:#a8a196;margin:2px 0 0;text-align:center}
.hesap-uyari{font:400 12px/1.55 system-ui;color:#d79b86;margin:0 0 10px;text-align:center}
.hesap-haber{font:400 12px/1.5 system-ui;margin:0 0 12px;text-align:center}
.hesap-haber.iyi{color:#9ec9a8}
.hesap-haber.kotu{color:#d79b86}
.hesap-haber[hidden]{display:none!important}

.hesap-yasal{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:16px;font:400 8.5px/1 system-ui;letter-spacing:.18em;
}
.hesap-yasal a{color:#9a948a;text-decoration:none}
.hesap-yasal a:hover{color:#d8d1c4}
.hesap-yasal span{color:#6d6860}

/* ---------- KONUM SEÇİCİ ----------
   Üç ekran da aynı paneli kullanır (js/core/aralik-konum-sec.js).
   Eskiden "konum seç" bir prompt() açıp ENLEM, BOYLAM istiyordu; kimse
   koordinatını bilmediği için ekran "GENEL GÖRÜNÜM"de kalıyor ve gezegen
   saati hiç hesaplanmıyordu. Yerine hiyerarşi + arama.

   Kural (S5): kutu yok. Satır ayracı tek çizgi, arama alanının işareti de. */
.mercek-sahne.konummod{
  --cw:min(182%,86vh);--cx:50%;--cy:52%;--tx:50%;--ty:49%;
  --bl:11px;--br:.62;--ton:17%;--yans:.35;--tw:80%;--dip:.30;
}
.mercek-sahne.konummod .mercek-yuzey{opacity:0}
.mercek-sahne.konummod .mercek-konumpanel{opacity:1;pointer-events:auto;transition-delay:360ms}
.mercek-sahne.konummod .mercek-kapat{
  opacity:1;pointer-events:auto;
  transform:translate(-50%,-50%) scale(calc(1 / var(--olc,1)));transition-delay:400ms;
}
.mercek-sahne.konummod .mercek-perde,
.mercek-sahne.konummod .mercek-ust,
.mercek-sahne.konummod .mercek-altmenu,
.mercek-sahne.konummod .mercek-niyet,
.mercek-sahne.konummod .mercek-zeka,
.mercek-sahne.konummod .mercek-yan,
.mercek-sahne.konummod .mercek-simdiye,
.mercek-sahne.konummod .zaman-kademe,
.mercek-sahne.konummod .mercek-konum{opacity:0;pointer-events:none}
.mercek-konumpanel{opacity:0}

.konum-ara{
  display:block;width:100%;margin:0 0 12px;
  background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.22);
  color:#f2ece0;font:400 13px/1.2 system-ui;letter-spacing:.04em;
  padding:9px 4px;border-radius:0;-webkit-appearance:none;appearance:none;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.konum-ara::placeholder{color:#8f887d;letter-spacing:.08em;font-size:11.5px}
.konum-ara:focus{outline:0;border-bottom-color:color-mix(in oklab,#D8B771 62%,transparent)}

/* Verinin sınırı: Türkiye dışında şehir değil idari bölge var. Bölge merkezi
   gerçek konumdan on dakikalarca sapabiliyor (ölçüldü: 14–70 dk) ve gezegen
   penceresi ~60 dk. Uyarı sarı ailesinde — hata değil, sınır bildirimi. */
.konum-kaba{
  margin:0 0 12px;text-align:left;
  font:400 10px/1.55 system-ui;letter-spacing:.04em;color:#ecdcb6;
}

.konum-geri{
  display:block;background:0;border:0;cursor:pointer;padding:6px 2px;margin-bottom:6px;
  font:400 10px/1 system-ui;letter-spacing:.14em;color:#c9c2b6;text-align:left;width:100%;
}
.konum-not{
  margin:0 0 10px;text-align:left;
  font:400 9.5px/1.5 system-ui;letter-spacing:.05em;color:#a8a196;
}

/* Liste panelin içinde kendi kaydırmasını taşır: 980 ilçe var, panelin
   tamamı uzayınca "TARA/kapat" ekran dışında kalıyor. */
.konum-liste{
  display:flex;flex-direction:column;
  max-height:min(46vh, 360px);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.konum-liste::-webkit-scrollbar{width:0;display:none}
.konum-sat{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  background:0;border:0;cursor:pointer;padding:9px 2px;text-align:left;width:100%;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.konum-sat .ad{
  color:#f2ece0;font:400 13.5px/1.4 Georgia,'Times New Roman',serif;letter-spacing:.02em;
}
.konum-sat .alt{
  color:#a8a196;font:400 9.5px/1 system-ui;letter-spacing:.12em;flex:0 0 auto;
}
.konum-sat:hover .ad{color:#fff9ee}
.konum-bos{
  margin:8px 0;font:400 11px/1.5 system-ui;color:#a8a196;text-align:left;
}
.konum-bos.uyari{color:#ecdcb6}

.konum-oto{
  display:block;margin:14px auto 0;background:0;border:0;cursor:pointer;
  font:400 9.5px/1 system-ui;letter-spacing:.24em;color:#ecdcb6;padding:8px 2px;
  border-bottom:1px solid color-mix(in oklab,#D8B771 46%,transparent);
}

/* `hidden` özniteliği tek başına YETMİYOR: yazar sayfasındaki `display`
   tarayıcının [hidden]{display:none} kuralını eziyor. Arama yazılınca
   gizlenmesi gereken bölge şeridi ve "‹ İl" satırı ekranda kalıyordu
   (ilk ekran görüntüsünde görüldü). JS'te hidden kuruluyor; karşılığı
   burada yazılı olmak zorunda. */
.konum-kaba[hidden],
.konum-geri[hidden],
.konum-oto[hidden]{display:none}
}