/* ARALIK — BAĞ (Kapı B)
   ZAMAN'ın üstüne biner: kademe şeridi, tarama hâli, sis ve kilit oradan
   gelir (aralik-zaman.css). Burada yalnız BAĞ'a ait olanlar var.

   Kural (B10 / S5): kutu yok. Form alanları da kutu değil — ZAMAN'da tarih
   alanlarına dolgu verilmişti ve ekran görüntüsünde iki dikdörtgen çıktı.
   Aynı hata iki kez yapılmaz: alanın işareti tek çizgi. */

/* ---------- KİŞİ DÜĞMESİ ----------
   Kişi ayrı bir şerit değil, merceğin kimliği. Üst şeritte, markanın
   karşısında; ŞİMDİ'deki hesap düğmesinin durduğu yer. */
/* `.bag-kisi` (üst şeritteki kişi etiketi) 22 Eylül'de KALDIRILDI.
   Kişi seçici artık üst şeritte bir etiket değil, BAĞ'ın giriş ekranı.
   `.bag-kisi-sat` (kişi listesi satırı) bambaşka bir şey, aşağıda duruyor. */

/* ---------- OKUMA (derin panel) ----------
   Dört satır: açılış · sürdürme · kapanış · dikkat. mercek-sat'ın kendisi
   kullanılıyor — BAĞ kendi satır dili uydurmuyor. */
.bag-okuma{text-align:left}
.bag-okuma .mercek-sat b{letter-spacing:.2em}
.bag-okuma .mercek-sat > span{display:block}
/* Sis, .mercek-sat span'in rengini YENMELİ. ".mercek-sat span" (0,1,1)
   ".zaman-sis"ten (0,1,0) daha özgül olduğu için kilitli satırlar okunur
   kalıyordu — Kapı B ilk koşuda yakaladı (B13a: okunur=true). */
.bag-okuma .mercek-sat span.zaman-sis{color:transparent}

/* Güven cümlesi kilidin DIŞINDA durur (B5/B6): veri eklemenin kazancı
   görünmeden kullanıcı veri vermez. */
.bag-guven{
  margin:0 0 14px;text-align:left;
  /* 10.5 → 12px (17 Eylül). Bu bir CÜMLE, tipografik işaret değil; ürünün
     ikincil düzyazı ölçüsü .hesap-riza'da zaten belirlenmişti (12px/1.55,
     gerekçesi orada yazılı: "okunacak bir metin, etiket değil").
     Harf aralığı da .04em → .02em: aralık işaretin dili, düzyazınınki
     değil — küçük puntoda okumayı zorlaştırıyor. */
  font:400 12px/1.6 system-ui;letter-spacing:.02em;color:#c9c2b6;
}

/* Yüzeydeki dürüstlük satırı mercek-wow'un kendisi; ayrı sınıf yalnız
   ölçüm tutamağı (Bulgu 2 → B4). */
.bag-not{}

/* ---------- KİŞİ PANELİ ---------- */
.mercek-sahne.kisimod{
  --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.kisimod .mercek-yuzey{opacity:0}
.mercek-sahne.kisimod .mercek-kisipanel{opacity:1;pointer-events:auto;transition-delay:360ms}
.mercek-sahne.kisimod .mercek-kapat{
  opacity:1;pointer-events:auto;
  transform:translate(-50%,-50%) scale(calc(1 / var(--olc,1)));transition-delay:400ms;
}
/* ALT MENÜ KİŞİ EKRANINDA KALIYOR — 22 Eylül.
   Eskiden o da geri çekiliyordu; panel bir ara adım olduğu için doğruydu.
   Ama kişi ekranı artık BAĞ'ın ANA ekranı (her girişte açılıyor) ve bir ana
   ekran insanı kapana kıstırmamalı. Ölçüldü: panel açıkken üç düğmenin de
   orta noktasında `.mercek-isik` duruyordu, yani ŞİMDİ ve ZAMAN'a geçiş
   yoktu. Kişisi olmayan yeni kullanıcı için bu zaten bir kapandı — X,
   kişi yokken paneli kapatmıyor (bilerek: kapanırsa ekranda yapılacak
   şey kalmıyor). Menü kalınca o kapan da açılmış oluyor.
   Diğer üçü geri çekilmeye devam ediyor: onlar OKUMANIN denetimleri,
   okuma yokken anlamları yok. */
.mercek-sahne.kisimod .mercek-perde,
.mercek-sahne.kisimod .zaman-kademe,
.mercek-sahne.kisimod .mercek-niyet,
.mercek-sahne.kisimod .mercek-konum{opacity:0;pointer-events:none}
.mercek-kisipanel{opacity:0}
/* ✕ durum çubuğuyla aşağı itilince panel de iner; kısa ekranda +12 px;
   yatay telefonda yok (konum paneliyle aynı kural ve gerekçe,
   aralik-mercek.css; Hakan, 6 Ekim, B). Kip sınıfına değil panele bağlı:
   kapanışta sıçramasın. */
.mercek-kisipanel{transform:translate(-50%,calc(-50% + env(safe-area-inset-top,0px)))}
@media (min-height:501px) and (max-height:600px){
  .mercek-kisipanel{transform:translate(-50%,calc(-50% + 12px + env(safe-area-inset-top,0px)))}
}
@media (max-height:500px){
  .mercek-kisipanel{transform:translate(-50%,-50%)}
}
/* yatay telefon: ✕'in altından başlar ve kayar (bkz. aralik-mercek.css,
   konum paneli) */
@media (max-height:500px) and (orientation:landscape){
  .mercek-kisipanel{top:calc(56px + env(safe-area-inset-top,0px));transform:translate(-50%,0);
    max-height:calc(100vh - 64px - env(safe-area-inset-top,0px));
    max-height:calc(100dvh - 64px - env(safe-area-inset-top,0px));
    overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
}

/* kayıtlı kişiler — satır, kutu değil */
.bag-liste{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.bag-kisi-sat{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  background:0;border:0;cursor:pointer;padding:9px 2px;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.bag-kisi-sat .ad{
  color:#f2ece0;font:400 13.5px/1.4 Georgia,'Times New Roman',serif;letter-spacing:.02em;
}
.bag-kisi-sat .omur{
  color:#a8a196;font:400 9.5px/1 system-ui;letter-spacing:.16em;flex:0 0 auto;
}
.bag-kisi-sat:hover .ad{color:#fff9ee}

/* B12 — ömür notu; kişi sessizce kaybolmaz */
.bag-omur-not{
  margin:0 0 16px;text-align:left;
  /* 9.5 → 12px. Üründeki EN KÜÇÜK düzyazıydı ve iki cümlelik bir
     açıklama taşıyor (bağ kişilerinin nerede durduğu, ne kadar kaldığı). */
  font:400 12px/1.6 system-ui;letter-spacing:.02em;color:#a8a196;
}

/* ---------- FORM (B-K1) ----------
   Tek ekran: ad + tarih zorunlu, saat + yer isteğe bağlı.
   Hiçbirinin dolgusu yok; alan işareti alttaki tek çizgi. */
.bag-form{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.bag-form-ikili{display:flex;gap:10px}
.bag-form-ikili input{flex:1 1 0;min-width:0}
.bag-form input{
  background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.22);
  color:#f2ece0;font:400 12.5px/1.2 system-ui;letter-spacing:.04em;
  padding:8px 4px;border-radius:0;width:100%;
  -webkit-appearance:none;appearance:none;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.bag-form input::placeholder{color:#8f887d;letter-spacing:.1em;font-size:11px}
.bag-form input:focus{
  outline:0;border-bottom-color:color-mix(in oklab,#D8B771 62%,transparent);
}
.bag-form input::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.42);cursor:pointer}

.bag-form-not{
  margin:0 0 12px;text-align:left;
  /* 10 → 12px. Form geri bildirimi: kullanıcı tam da bir şey yanlış
     gittiğinde okuyor, yani en okunaklı olması gereken yer. */
  font:400 12px/1.55 system-ui;letter-spacing:.02em;color:#c9c2b6;
}
.bag-form-not.uyari{color:#ecdcb6}
.bag-form-onay{
  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);
}
.bag-form-onay[disabled]{color:#7d776e;border-bottom-color:rgba(255,255,255,.12);cursor:default}

/* kilit okumanın üstünde durduğu için altına ayraç payı */
/* #bag-sahne: aralik.html Zaman'ı ve Bağ'ı aynı sayfada yüklüyor; bu
   kural Zaman'ın kilidini değiştirmesin */
#bag-sahne .mercek-derin .zaman-kilit{margin:0 0 18px;padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.10)}

/* açılımda kademe şeridi de sönsün — ZAMAN'daki kural */
.mercek-sahne.acik .zaman-kademe{opacity:0;pointer-events:none}

/* ---------- AÇILIM CAMI ----------
   BAĞ'ın açılımı 81 hücrelik okumayı taşıyor: içerik 344×713 ölçüldü.
   Varsayılan açılım camı 710px çapında ve bir dairenin 344 genişlikte
   taşıyabileceği en fazla yükseklik 621px — yani okuma bu cama HİÇBİR
   koşulda sığmıyordu. Telefonda (390×844) camın alt yayı y=794'te,
   "DİKKAT" bölümü onun altına, çıplak zeminin üstüne düşüyordu.
   Ekran görüntüsüyle doğrulandı.

   Aylardır böyleydi ve görünmedi çünkü hiçbir kapı AÇIK hâli ölçmüyordu;
   Kapı M/M10 (13 Eylül) yakaladı.

   Çare camı büyütmek: açılımda camın ekranı aşması tasarımın dili — mercek
   büyür, kenarı ekranın dışına çıkar, kullanıcı merceğin İÇİNDE kalır.
   710'da yay ekranın içinde kalıyor ve ihlal görünür oluyordu. 897'de
   (230%) hem içerik içeride (401/449) hem yay ekran dışında.

   Ölçüldü, --cw denemeleri:
     min(182%, 86vh) → cam 710 · en uzak 465/355  ✕ taşıyor
     min(182%,100vh) → cam 710 · en uzak 466/355  ✕ (yükseklik terimi bağlamıyor)
     min(230%,110vh) → cam 897 · en uzak 401/449  ✓ içeride */
/* 110vh denendi ve YENİ BİR KUSUR doğurdu: 390×844'te cam 897 oluyor,
   tepesi y=-10'a çıkıyor ve camın tepesindeki KAPATMA DÜĞMESİ ekranın
   dışında kalıyor — kullanıcı açılımı kapatamıyor. Ölçümle yakalandı
   (15 Eylül), sebebi de bir önceki turda benim büyütmemdi.
   99vh: telefonda cam 835, tepe y≈22 (X ekranda), yarıçap 417 ≥ içeriğin
   istediği 414. Masaüstünde 1069, tepe y≈28. İki şart da sağlanıyor. */
#bag-sahne.acik{--cw:min(230%,99vh)}
/* 99vh 390×844'e göre ayarlandı (X'in tepesi y≈22). ORAN kısa ekranda
   aynı payı bırakmıyor: 360×640'ta cam 634 oluyor ve X'in üstü y=-4 —
   düğme kırpılıyor, yani aynı kusurun (15 Eylül) küçük ekran hâli.
   Kısa ekranda tavan oranla değil PİKSELLE konuyor; X ne kadar büyürse
   büyüsün payı sabit kalsın diye. */
@media (max-height:800px){
  #bag-sahne.acik{--cw:min(230%, calc(100vh - 52px))}
}
/* Masaüstünde açılımın bloğu dikdörtgen, cam yuvarlak: en alttaki satır
   (SÜRE · "40–54 dakika") dairenin daralan dibinde sol kenardan taşıyordu
   (Kapı M M10, 1440×900: harfler 463/446px; 30 Ekim). Blok 84px erken
   biter (üst kenarı 130px'te, alt kenarı ~796px), kalanı kayar; o
   yükseklikte dairenin yarı genişliği ~290px ≥ sütunun 270px'i. Telefonda
   cam sütundan çok geniş, kural gerekmiyor. */
@media (min-width:820px){
  #bag-sahne.acik .mercek-blok{
    max-height:calc(100vh - var(--ustbosluk,74px) - 160px - env(safe-area-inset-bottom,0px));
    max-height:calc(100dvh - var(--ustbosluk,74px) - 160px - env(safe-area-inset-bottom,0px));
  }
}
/* kısa masaüstünde (1366×768, 1280×800) cam ekran boyuyla küçülüyor
   (--cw: 100vh - 52px): dip daha dar, blok daha erken biter */
@media (min-width:820px) and (max-height:800px){
  #bag-sahne.acik .mercek-blok{
    max-height:calc(100vh - var(--ustbosluk,74px) - 190px - env(safe-area-inset-bottom,0px));
    max-height:calc(100dvh - var(--ustbosluk,74px) - 190px - env(safe-area-inset-bottom,0px));
  }
}


/* yazı ölçeği — bkz. aralik-mercek.css sonundaki blok.
   Bu üçü ölçümün "düz yazı ama en küçük" dediği yerler: 10.5 · 9.5 · 10px. */
.bag-guven{font-size:calc(12px * var(--yz,1))}
.bag-omur-not{font-size:calc(12px * var(--yz,1))}
.bag-form-not{font-size:calc(12px * var(--yz,1))}

/* ---------- ÜÇ PENCERE (22 Eylül) ----------
   Hakan: "tek bir zaman aralığı geliyor... en az 3 tane olmalı... hangi
   zaman aralığını önerdiği belli olmuyor."
   Ölçüldü: `sonucKur()` en iyi ÜÇ pencereyi baştan beri hesaplıyordu
   (`adaylar: puanli.slice(0, 3)`) ama ekrana yalnız `adaylar[0]`
   çıkıyordu; öteki ikisi hesaplanıp atılıyordu. Hesap vardı, gösterim
   yoktu.
   Sıra PUANLA: en üstteki en uygun olan. Yani "hangisini öneriyor"
   sorusunun cevabı ayrı bir rozet değil, listenin kendisi. */
.bag-pencereler{
  display:flex;flex-direction:column;gap:4px;
  margin:10px auto 2px;max-width:340px;pointer-events:auto;
}
/* ana yüz gizliyken görünmez pencere düğmeleri dokunuş almasın: açılımda
   metne dokunan kişi farkında olmadan başka pencereyi seçiyordu */
.mercek-sahne:is(.acik,.kisimod,.ozelmod,.konummod,.zeka) .mercek-yuzey .bag-pencereler{pointer-events:none}
.bag-pencere{
  display:flex;align-items:baseline;gap:9px;width:100%;
  background:0;border:0;border-radius:11px;cursor:pointer;
  padding:9px 11px;min-height:38px;           /* WCAG 2.2 AA: 24×24 üstü */
  font:inherit;color:inherit;text-align:left;
  transition:background .2s ease, box-shadow .2s ease;
}
.bag-pencere .sira{
  flex:0 0 auto;width:16px;
  font:400 10px/1 system-ui;letter-spacing:.14em;
  color:rgba(236,220,182,.5);
}
.bag-pencere .an{
  flex:1 1 auto;min-width:0;
  font:400 13.5px/1.35 system-ui;color:#e6e0d4;
  text-shadow:0 1px 10px rgba(0,0,0,.8);
}
.bag-pencere .sev{
  flex:0 0 auto;
  font:400 10px/1 system-ui;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(236,220,182,.72);
}
.bag-pencere .an span.zaman-sis{color:transparent;display:inline}   /* inline: sıra ve seviye ilk satıra hizalı kalsın */
.bag-pencere:hover{background:rgba(255,255,255,.05)}
/* Seçili pencere: kutu değil, ışık — mercek dili. */
.bag-pencere.secili{
  background:rgba(236,220,182,.09);
  box-shadow:inset 2px 0 0 rgba(236,220,182,.72);
}
.bag-pencere.secili .an{color:#fff9ee}
.bag-pencere.secili .sira{color:rgba(236,220,182,.9)}
@media (prefers-reduced-motion:reduce){ .bag-pencere{transition:none} }

/* "Kaçın" (Hakan, 8 Ekim, B): tek cümle, sürtünme rengiyle. Merceğin içinde
   değil, konum düğmesinin üstünde (yeri js'te ölçülüyor: kacinYeri). */
.bag-kacin{position:absolute;left:0;right:0;z-index:9;margin:0 auto;padding:0 16px;text-align:center;
  font:400 11.5px/1.3 system-ui;color:rgba(230,224,212,.78);text-shadow:0 1px 10px rgba(0,0,0,.8);
  transition:opacity .45s ease,visibility .45s}
/* yüz görünmezken (açılım, kişi, özel, konum, rehber…) o da görünmez; ekran
   okuyucu da okumaz (visibility) */
.mercek-sahne:is(.acik,.zeka,.aymod,.hakmod,.hesapmod,.konummod,.kisimod,.ozelmod,.nefes) .bag-kacin{opacity:0;visibility:hidden;pointer-events:none}
/* sürtünme tonunun açığı: #C2694E koyu zeminde ~3,5:1 kalıyordu (küçük yazı
   için 4,5:1 gerekir); #DB8B71 ~6,6:1 */
.bag-kacin b{font-weight:400;letter-spacing:.14em;text-transform:uppercase;font-size:10px;color:#DB8B71}
.bag-kacin .sev{color:#DB8B71}
.bag-kacin span.zaman-sis{color:transparent}
.bag-kacin[hidden]{display:none}
/* Çok kısa ekranda (iPhone SE, yatay) yüz zaten dolu: satır gösterilmez,
   okumadaki KAÇIN bölümü (C) aynı bilgiyi taşır. */
@media (max-height:600px){ .bag-kacin{display:none} }

/* Kişinin adı düğme (yalnız aralik.html, kisiAdDugme): alt satır orada yok,
   kişi ekranı adla açılıyor. Mercek bloğu dokunuş almıyor; ad alıyor. */
.bag-kisi-ad{pointer-events:auto;display:inline;position:relative;
  background:0;border:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer;
  text-decoration:underline;text-decoration-color:rgba(236,220,182,.45);text-underline-offset:3px;
  transition:visibility 0s}
/* dokunma alanı satırı büyütmeden genişler: min-height satırı 10 → 24 px
   yapıp ortalanan bloğu niyet şeridinin altına itiyordu (inceleme 5. aşama) */
.bag-kisi-ad::after{content:'';position:absolute;left:-4px;right:-4px;top:50%;height:28px;transform:translateY(-50%)}
.bag-kisi-ad:focus-visible{outline:2px solid #D8B771;outline-offset:2px;border-radius:3px}
/* görünmeyen ad (açılımda yüzeydeki, ana yüzde derindeki, kişi ya da özel
   panel açıkken ikisi de) dokunuş ve odak almaz; gizlenme solma bitince */
.mercek-sahne:is(.acik,.kisimod,.ozelmod) .mercek-yuzey .bag-kisi-ad,
.mercek-sahne:not(.acik) .mercek-derin .bag-kisi-ad,
.mercek-sahne:is(.kisimod,.ozelmod) .mercek-derin .bag-kisi-ad{
  visibility:hidden;pointer-events:none;transition:visibility 0s linear .4s}


/* Yatay telefon (bkz. aralik-mercek.css sonu): açıklama satırı merceğe
   sığmıyor; kısa ekranlardaki gibi gizli */
@media (max-height:500px) and (orientation:landscape){
  #bag-sahne .mercek-yuzey .bag-not{display:none}
}
/* çok kısa yatay (568×320): 320×568 dikeydeki gibi yalnız en iyi pencere */
@media (max-height:340px) and (orientation:landscape){
  #bag-sahne .mercek-yuzey .bag-pencere:nth-child(n+2),
  #bag-sahne .mercek-yuzey .mercek-ipucu{display:none}
}

/* MASAÜSTÜ 960 (Hakan, 14 Ekim): form yazısı okunur boyda */
@media (min-width:1024px) and (min-height:600px){
  .bag-form input{font-size:16px}
  .bag-form-not{font-size:calc(14px * var(--yz,1))}
  .bag-form-onay{font-size:12px}
}