/* ARALIK — ZAMAN (Kapı Z) Mercek dilinin zaman eksenine yayılmış hâli. Ayrı dosya, çünkü ŞİMDİ'nin 46 KB'lık sayfasına dokunmadan yüklensin; aralik-mercek.css'in üstüne biner ve yalnız ZAMAN'a ait parçaları tanımlar. Kural (S5 / Z8): kutu yok. Her sis TEK radyal ve yarıçapı kutuyu aşmaz — kenarda opaklık sıfıra inmezse mercek içinde dikdörtgen belirir. Bu hata ŞİMDİ'de üç kez yapıldı, burada baştan kurallı. */ /* Konum şeridi ZAMAN'da yukarı çıkar: ŞİMDİ'de alt menünün hemen üstündeki yer boştu, burada kademe şeridi oraya oturuyor. Ölçüm görüntüsünde ikisi üst üste bindi (qa-cikti/zaman/1) — yığın yeniden dizildi: alt menü · kademe · konum. */ /* #zaman-sahne ve #bag-sahne: aralik.html Şimdi ile Zaman'ı aynı sayfada yüklüyor, bu kural Şimdi'nin konum düğmesini kaydırmasın. Bağ da bu dosyayı yüklüyor ve kademe şeridi onda da var: kural Bağ'a da. 3. aşamada yalnız #zaman-sahne'ye bağlanmıştı; /bag'de konum düğmesi kademe şeridinin üstüne biniyordu (5. aşamada bulundu). */ #zaman-sahne .mercek-konum,#bag-sahne .mercek-konum{bottom:calc(94px + env(safe-area-inset-bottom,0px))} /* ---------- KADEME ŞERİDİ ---------- Üç kademe: bugün-yarın · 7 gün · özel. Alt menünün hemen üstünde, aynı tipografiyle — ayrı bir denetim gibi değil, aynı şeridin ikinci satırı gibi okunsun. Dolgu/çerçeve yok; seçili olan yalnız RENKLE ayrılır (S2'nin "dolgu taşıyan düğme ≤ 1" kuralı buraya da uygulanıyor). */ .zaman-kademe{ position:absolute;left:0;right:0;z-index:9; bottom:calc(56px + env(safe-area-inset-bottom,0px)); display:flex;justify-content:center;align-items:center;gap:2px; font:400 9.5px/1 system-ui;letter-spacing:.17em;color:#9a948a; text-shadow:0 1px 10px rgba(0,0,0,.75); transition:opacity 700ms ease; } .zaman-kademe button{ background:0;border:0;color:inherit;font:inherit;letter-spacing:inherit; cursor:pointer;padding:7px 9px; } .zaman-kademe .aktif{color:#efe9dc} .zaman-kademe .ayrac{opacity:.38;pointer-events:none} /* ---------- AÇILIM SATIRLARI ---------- Derin panelde üç açıklık. mercek-sat'ın kardeşi: aynı ölçü, aynı renk ailesi. Solda hâlin adı, sağda pencere. */ .zaman-acilim{ display:flex;align-items:baseline;justify-content:space-between; gap:12px;margin-bottom:14px;text-align:left; } .zaman-acilim:last-child{margin-bottom:0} .zaman-acilim .hal{ color:#eee8db;font:400 13px/1.45 Georgia,'Times New Roman',serif; letter-spacing:.02em;flex:1 1 auto; } .zaman-acilim .pencere{ color:#c9c2b6;font:400 10.5px/1.4 system-ui;letter-spacing:.09em; flex:0 0 auto;white-space:nowrap; } /* takvime ekle (10 Ekim): satırın sonunda küçük düğme; altta hatırlatma */ .zaman-acilim{align-items:center} .zaman-takvim-ekle{flex:0 0 auto;min-height:32px;padding:0 9px;border-radius:999px;cursor:pointer; border:1px solid rgba(236,220,182,.32);background:rgba(8,10,14,.3);color:#ecdcb6; font:400 9.5px/1 system-ui;letter-spacing:.12em;white-space:nowrap} .zaman-takvim-ekle:hover{background:rgba(236,220,182,.12)} .zaman-takvim-ekle:focus-visible,.zaman-takvim-dk:focus-visible{outline:2px solid #D8B771;outline-offset:2px} .zaman-takvim{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px; font:400 10px/1.3 system-ui;letter-spacing:.08em;color:#bdb6a9} @media (max-width:360px){ .zaman-acilim{gap:7px} .zaman-takvim-ekle{padding:0 7px;letter-spacing:.08em} } .zaman-takvim-dk{min-height:32px;padding:0 6px;border-radius:10px;border:1px solid rgba(255,246,228,.2); background:#16130f;color:#f2ece0;font:400 11.5px/1 system-ui} /* sıra numarası değil, ağırlık: ilk açıklık biraz daha parlak */ .zaman-acilim:first-child .hal{color:#f6f1e6} .zaman-acilim:first-child .pencere{color:#ded7ca} /* ---------- DAĞILIM CÜMLESİ (Z4) ---------- Bu cümle SIK görünecek — ölçüm öyle diyor (Bulgu 4 §3). O yüzden uyarı gibi değil, ekranın olağan dili gibi duruyor: mercek-wow'un kendisi. Ayrı bir sınıf yalnız ölçüm tutamağı olsun diye var. */ .zaman-dagilim{} /* ---------- TARAMA HÂLİ (Z6) ---------- Hesap kare içinde çalışmıyor; sonuç gelene kadar sahne donmuyor, tek bir soluk alma gösteriliyor. İlerleme çubuğu YOK: en pahalı tarama ~180 ms, çubuk o süreyi olduğundan uzun gösterir. */ .zaman-tarama{ font:400 9px/1 system-ui;letter-spacing:.26em;color:#c9c2b6; opacity:0;transition:opacity 420ms ease; } .mercek-sahne.tarama .zaman-tarama{opacity:1} .mercek-sahne.tarama .mercek-bas, .mercek-sahne.tarama .mercek-saat, .mercek-sahne.tarama .mercek-wow, .mercek-sahne.tarama .mercek-ipucu{opacity:.18;transition:opacity 320ms ease} /* nefes: tararken cam hafifçe soluyor — donmuş değil, çalışıyor */ .mercek-sahne.tarama .mercek-cam{animation:zaman-soluk 1600ms ease-in-out infinite} @keyframes zaman-soluk{ 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.06)} } @media (prefers-reduced-motion:reduce){ .mercek-sahne.tarama .mercek-cam{animation:none} } /* ---------- KİLİT (Z10) ---------- Kutu değil sis. Kilitli olan yalnız pencerenin TARİH/SAATİ; kaç pencere bulunduğu ve dağılım cümlesi kilidin dışında kalır — kullanıcı neyi satın aldığını görmeden karar vermesin. */ .zaman-sis{ display:inline-block;color:transparent;user-select:none; text-shadow:0 0 9px rgba(242,236,224,.58); /* harflerin yerini korur, okunmaz; kenar çizgisi doğurmaz */ } .zaman-kilit{ margin-top:14px; font:400 9px/1.6 system-ui;letter-spacing:.2em;color:#c9c2b6; } .zaman-kilit button{ display:inline-block;margin-top:9px;background:0;border:0;cursor:pointer; font:400 9.5px/1 system-ui;letter-spacing:.24em;color:#ecdcb6;padding:7px 2px; /* çerçeve yok: altında tek bir çizgi, mercek-cizgi'nin kardeşi */ border-bottom:1px solid color-mix(in oklab,#D8B771 46%,transparent); } .zaman-kilit button:hover{color:#f6ecd4} /* ---------- ÖZEL ARALIK (Z11) ---------- İki tarih, tek satır. Tavan yedi gün; aşılırsa sessizce kırpılmaz, söylenir. */ /* Panel hâli: cam büyür, sis koyulaşır — .acik ile aynı değerler, çünkü aynı şey oluyor (mercek içi bir panel açılıyor), farklı görünmesi için sebep yok. */ .mercek-sahne.ozelmod{ --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.ozelmod .mercek-yuzey{opacity:0} .mercek-sahne.ozelmod .mercek-ozelpanel{opacity:1;pointer-events:auto;transition-delay:360ms} .mercek-sahne.ozelmod .mercek-kapat{ opacity:1;pointer-events:auto; transform:translate(-50%,-50%) scale(calc(1 / var(--olc,1)));transition-delay:400ms; } .mercek-sahne.ozelmod .mercek-perde, .mercek-sahne.ozelmod .mercek-ust, .mercek-sahne.ozelmod .mercek-altmenu, .mercek-sahne.ozelmod .zaman-kademe, .mercek-sahne.ozelmod .mercek-niyet, .mercek-sahne.ozelmod .mercek-konum{opacity:0;pointer-events:none} .mercek-ozelpanel{opacity:0} .zaman-tarih{ display:flex;justify-content:center;align-items:center;gap:10px;margin-bottom:12px; } .zaman-tarih input{ /* DOLGU YOK. İlk hâlinde rgba(4,6,9,.34) vardı ve ekran görüntüsünde iki net DİKDÖRTGEN çıktı (qa-cikti/zaman/4) — S5/Z8'in yasakladığı şeyin ta kendisi. Alan işareti tek çizgi: altındaki kural. */ background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.22); color:#f2ece0;font:400 12px/1 system-ui;letter-spacing:.06em; padding:7px 4px;border-radius:0;min-width:0;flex:1 1 0; -webkit-appearance:none;appearance:none; text-shadow:0 1px 8px rgba(0,0,0,.6); } /* takvim simgesi de aynı aileye girsin */ .zaman-tarih input::-webkit-calendar-picker-indicator{ filter:invert(1) opacity(.42);cursor:pointer; } .zaman-tarih input:focus{outline:0;border-bottom-color:color-mix(in oklab,#D8B771 62%,transparent)} .zaman-tarih .ok{color:#a8a196;font:400 11px/1 system-ui;flex:0 0 auto} .zaman-ozel-not{ /* 10 → 12px (17 Eylül) — BAĞ'daki kardeşleriyle aynı gerekçe: bu bir cümle, etiket değil. Ürünün ikincil düzyazı ölçüsü 12px/1.55. */ font:400 12px/1.55 system-ui;letter-spacing:.02em;color:#c9c2b6;margin:0 0 12px; } .zaman-ozel-not.uyari{color:#ecdcb6} .zaman-ozel-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); } /* ---------- AÇILIM (derin panel) ---------- ŞİMDİ'deki .acik ile aynı; ZAMAN'ın kendi kademe şeridi de sönsün. */ .mercek-sahne.acik .zaman-kademe{opacity:0;pointer-events:none} /* kısa ekran: kademe şeridi alt menüye fazla yaklaşmasın */ /* Kademe düğmeleri WCAG 2.2 AA hedefini her ölçekte tutsun: 9px puntoda iç boşluk 23px veriyordu, sınır 24. */ .zaman-kademe button{min-height:24px;display:inline-flex;align-items:center} @media (max-height:700px){ /* ŞERİT ALT MENÜNÜN İÇİNE GİRİYORDU — 22 Eylül (Hakan: "özel zaman aralığına bastığımda mobilde gelmiyor, masaüstünde sorun yok"). Ölçüldü: bu kural şeridi 56px'ten 48px'e indiriyordu, ama `.mercek-altmenu` `bottom:0`da ~61px yüksekliğinde duruyor ve AYNI z-index'te (9), DOM'da sonra geldiği için isabet testini kazanıyor. Sonuç, 640px ve altındaki ekranlarda: 390×844 → o noktadaki öğe: BUTTON ULAŞILIR → ozelmod ✓ 390×640 → o noktadaki öğe: mercek-altmenu ÖRTÜLÜ → acik ✗ 360×560 → mercek-altmenu ÖRTÜLÜ → acik ✗ Dokunuş kademe düğmesine değil menü şeridine düşüyor; şerit düğme olmadığı için sahnenin genel dinleyicisi devreye girip OKUMAYI açıyordu. Masaüstünde ekran uzun olduğundan hiç görünmüyordu. Yer kazanmak için 8px aşağı indirmek, denetimi ulaşılmaz yapmaya değmez: şerit menünün ÜSTÜNE alındı. */ .zaman-kademe{bottom:calc(68px + env(safe-area-inset-bottom,0px));font-size:9px} /* şerit 68 px'te ve düğmeleri 24 px: konum 82'deyken şeride 10 px biniyordu (dokunma alanları üst üste; ölçüm 7 Ekim) — şeridin 4 px üstü. aralik.html'de alt menü yok: orada şerit iner, konum yerinde kalır (css/aralik-aralik.css). */ #zaman-sahne .mercek-konum,#bag-sahne .mercek-konum{bottom:calc(96px + env(safe-area-inset-bottom,0px))} } /* yazı ölçeği — bkz. aralik-mercek.css sonundaki blok. */ .zaman-ozel-not{font-size:calc(12px * var(--yz,1))} /* Yatay telefon (bkz. aralik-mercek.css sonu): kademe şeridi ve konum sağ sütunda, alt menünün üstünde (/zaman, /bag; aralik.html'de alt menü yok, orada css/aralik-aralik.css) */ @media (max-height:500px) and (orientation:landscape){ .zaman-kademe{left:64%;bottom:calc(64px + env(safe-area-inset-bottom,0px))} #zaman-sahne .mercek-konum,#bag-sahne .mercek-konum{bottom:calc(98px + env(safe-area-inset-bottom,0px))} } /* MASAÜSTÜ 960 (Hakan, 14 Ekim): açıklık listesi ve özel tarih yazısı okunur boyda */ @media (min-width:1024px) and (min-height:600px){ .zaman-ozel-not{font-size:calc(14px * var(--yz,1))} .zaman-ozel-onay{font-size:12px} }