/* Kronometre görünümü — kronometre.html'den ayrıldı (denetim § 5.7 / madde 29).
AYRI DOSYA + UZUN ÖMÜRLÜ ÖNBELLEK: sayfanın kendisi her açılışta taze
iniyor (öğrenci eski sürümde kalmasın), ama görünüm ve yazılım değişmedikçe
telefonda duruyor. Adres sonundaki ?v=… damgası deploy'da otomatik
güncelleniyor (scripts/frontend-surum-damgala.mjs) — damga değişmeden
içerik değişemez, yani 'öğrencide eski dosya kaldı' tuzağı kapalı. */
/* ═══ ODA RENK DİLİ — TEK PALET (28 Ağustos 2026) ═══════════════════
Dört renk, dört anlam. Aynı yeşil dört dosyada elle yazılıydı;
kızılı kaldırırken dosyaları tek tek dolaşmak gerekti ve birini
atlasak kimse fark etmezdi. Artık tek kaynak.
--ss-var BİRİ VAR (online). Kalabalıkla DEĞİŞMEZ — üç kişi
de otuz kişi de aynı yeşil (kullanıcı kararı).
--ss-var-acik aynı yeşilin yazı tonu ("molada")
--ss-ortak ORTAK SAAT sürüyor (altın)
--ss-ortak-kisik aynı saatin mola fazı — renk değil SES değişir
--ss-dinlenme İLAN EDİLMİŞ dinlenme (ay mavisi) — moladan ayrı
--ss-yok yokluk (sönük)
🔴 KIRMIZI YOK. Varlık anlatan hiçbir yerde kızıl kullanılmaz
(sembol defteri, 4. korkuluk: kırmızı aciliyet yasak).
⚠️ Kullanan dosyalar `var(--ss-var, #7FC79A)` biçiminde YEDEKLİ
yazar: kronometre.css yüklenmeyen bir sayfada da renk doğru çıksın. */
:root {
--ss-var: #7FC79A;
--ss-var-hale: rgba(127, 199, 154, .6);
--ss-var-acik: #9fe0b8;
--ss-var-dolgu: rgba(127, 199, 154, .12);
--ss-var-cizgi: rgba(127, 199, 154, .38);
--ss-ortak: #F5D67B;
--ss-ortak-kisik: #e0cb96;
--ss-dinlenme: #8FB4D9;
--ss-yok: rgba(255, 255, 255, .28);
}
:root {
--primary: #4facfe;
--success: #00f2fe;
--warning: #f59e0b;
--danger: #ef4444;
--glass-bg: rgba(15, 23, 42, 0.35);
--glass-border: rgba(255, 255, 255, 0.15);
}
body {
font-family: var(--ss-yazi, system-ui, sans-serif);
margin: 0; color: white; height: 100vh; overflow: hidden;
display: flex; justify-content: center; align-items: center;
background: #0a0e1a;
background-image:
radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%),
radial-gradient(at 50% 0%, hsla(225,39%,30%,0.3) 0, transparent 50%),
radial-gradient(at 100% 0%, hsla(339,49%,30%,0.3) 0, transparent 50%);
}
/* Üst Butonlar: solda disiplin rozeti, sağda mod butonları (flex — hiçbir genişlikte çakışmaz) */
.top-buttons {
position: fixed; top: 15px; width: 100%; padding: 0 15px;
display: flex; align-items: center; gap: 8px; z-index: 100; box-sizing: border-box;
}
.top-buttons .mode-btns { display: flex; gap: 8px; margin-left: auto; }
.glass-btn {
background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border);
color: #cbd5e1; padding: 7px 10px; border-radius: 10px; cursor: pointer;
backdrop-filter: blur(10px); font-size: 0.72em; font-weight: 600; transition: all 0.3s ease;
text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap;
}
@media (min-width: 768px) {
.glass-btn { padding: 8px 14px; font-size: 0.8em; }
}
.glass-btn:hover { background: rgba(255,255,255,0.15); color: white; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
@keyframes float {
0% { transform: translateY(0px) scale(1); }
50% { transform: translateY(-30px) scale(1.05); }
100% { transform: translateY(0px) scale(1); }
}
/* ISIK KATMANI — dekoratif lekeleri KIRPAR.
Lekeler position:absolute, body ise position:static olduğu için konumlanma
referansları body değil sayfanın en dışıydı; body'nin overflow:hidden'ı onları
kesmiyordu. Sonuç: telefonda sayfa 475px'e genişliyor (ekran 375px) ve parmakla
yana kaydırılabiliyordu — kart sola kayıp düzen bozuluyordu.
html'e overflow-x:hidden koymak ÇÖZMÜYOR (ölçüldü: kayma yine 100px).
Doğru çözüm: lekeleri kırpan sabit bir katmanın içine almak.
z-index katmanda durduğu için lekeler içeriğin arkasında kalmaya devam eder. */
.isik-katmani { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.45; animation: float 12s ease-in-out infinite; }
.blob.green { width: 350px; height: 350px; background: #00f2fe; top: -100px; right: -100px; animation-delay: 0s; }
.blob.blue { width: 450px; height: 450px; background: #4facfe; bottom: -150px; left: -100px; animation-delay: -6s; }
.container {
/* GÖRELİ KAP: yaprak (alkış listesi) mutlak konumlanabilsin diye.
28 Ağu'da AYRI bir `.container { position: relative }` bloğundaydı;
bekçi çakışma diye bağırdı. Özellikleri çakışmıyordu — ekran
bozuk değildi — ama ayrı durması kırılgandı: buraya `position`
yazan biri onu sessizce ezerdi. */
position: relative;
background: var(--glass-bg);
/* blur(30px) → blur(14px): sayaç her saniye değiştiği için tarayıcı bu buzlu
cam katmanını saniyede bir YENİDEN hesaplıyordu. Yarıdan aza indirildi;
arkadaki zemin sabit degrade olduğu için görsel fark neredeyse yok. */
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
/* ÜSTTE NEFES PAYI (24 Ağu gecesi, kullanıcı: "hoş geldin yazısı
en üstte sınırda, ikonlar sıkışıyor"). Köşe ikonları sabit ve
ekranın tepesinde duruyor; kısa telefonlarda kartın üst kenarı
onlara değiyordu. Üst dolgu büyüdü, yan ve alt dolgu kısıldı —
net kayıp yok, üstteki sıkışıklık gitti. */
padding: 30px 20px 14px; border-radius: 28px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255,255,255,0.1);
text-align: center; width: 90%; max-width: 420px;
z-index: 1; max-height: 90vh; overflow-y: auto; overflow-x: hidden; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* MİNİ MOD STİLLERİ */
.container.mini-mode {
display: flex !important; flex-direction: column; justify-content: center;
padding: 40px 20px;
}
.container.mini-mode .hide-in-mini { display: none !important; }
.container.mini-mode #timer { font-size: min(5.5em, 16vw); margin: 30px 0; text-shadow: 0 0 30px rgba(0, 242, 254, 0.8); }
.avatar-wrapper { position: relative; width: 100px; height: 100px; margin: 0 auto 15px auto; }
.progress-ring {
width: 100%; height: 100%; border-radius: 50%;
background: conic-gradient(var(--success) var(--progress, 0%), rgba(255,255,255,0.05) 0deg);
display: flex; justify-content: center; align-items: center;
box-shadow: 0 0 20px rgba(0, 242, 254, 0.2); transition: background 1s ease;
}
.avatar-inner {
width: 86px; height: 86px; background: rgba(15, 23, 42, 0.4);
backdrop-filter: blur(10px); border-radius: 50%;
display: flex; justify-content: center; align-items: center;
font-size: 40px; cursor: pointer; transition: 0.3s;
border: 2px solid rgba(255,255,255,0.15); box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}
.progress-text {
position: absolute; top: -5px; right: -10px; width: 45px; height: 45px;
border-radius: 50%; background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);
display: flex; justify-content: center; align-items: center;
font-size: 12px; font-weight: bold; color: white; z-index: 2; transition: all 0.3s ease;
}
.avatar-selector {
display: none; position: absolute; top: 110px; left: 50%; transform: translateX(-50%);
background: rgba(15, 23, 42, 0.95); padding: 10px; border-radius: 12px;
border: 1px solid var(--primary); z-index: 10; gap: 10px; width: max-content;
}
.avatar-selector span { font-size: 26px; cursor: pointer; transition: 0.2s; padding: 5px; }
h2 { margin: 0 0 2px 0; font-size: 1.04em; font-weight: 500; color: #e2e8f0; }
/* ——— Kimlik satırı (Kyron dili · üç kat mimarisi D1) ———
"Sessiz Saat · Kyron" parlak mavi ve iri duruyordu; kutucuklar susunca
ekranın en yüksek sesi o oldu. Marka adının bağırması gerekmiyor —
öğrenci zaten hangi ekranda olduğunu biliyor. Ad KALIYOR (bilinçli bir
karardı, Kyron'un tanınması için) ama fısıltı ağırlığına iniyor. */
.subtitle { font-size: 0.76em; font-weight: 600; color: #6d80a0;
letter-spacing: 0.06em; margin-bottom: 7px; }
.subtitle-desc { font-size: 0.75em; color: #94a3b8; display: block; font-weight: normal; margin-top: 3px; }
/* ── Masa şeridi ──────────────────────────────────────────────
Masası olmayan öğrenciye kutu göstermiyoruz: sessiz bir davet.
Masası olanda rozet canlanır (yeşil nokta + çalışan sayısı). */
/* ═══ 🗓️ GÜN ÇERÇEVESİ — sınava kalan gün (14 Ağu) ═══
⚠️ Sembol dili korkuluğu: "kırmızı aciliyet, geri sayım korkusu
yasak." Bu satır bu yüzden ürünün EN SESSİZ öğesidir — masa
şeridinden bile soluk. Kural olarak: kırmızı YOK, büyük punto YOK,
çerçeve YOK, animasyon YOK. Sayı bir uyarı değil, bir çerçevedir.
Rakamlar sabit genişlikte: her gün bir azalırken satır oynamasın. */
#gun-cercevesi { display: flex; align-items: center; gap: 8px; width: fit-content;
max-width: 100%; margin: -2px auto 14px; padding: 2px 4px;
font-size: 0.7em; line-height: 1.3; color: #6b7f9e;
font-variant-numeric: tabular-nums; }
#gun-cercevesi[hidden] { display: none; }
#gun-cercevesi #gun-cercevesi-metin { min-width: 0; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
/* "tahmini" notu daha da soluk: tarih resmîleşince bu ek kaybolur. */
#gun-cercevesi .tahmini { opacity: .62; }
/* 🔴 PARMAK PAYI EKSİ MARJLA AÇILIR (7 Eyl, ölçüldü: 18x15 idi).
Bu çarpı dar bir SATIRIN içinde; üstüne serilen görünmez bir pay
komşu yazının dokunuşunu yerdi. Onun yerine düğmenin KENDİSİ
büyütülüyor (padding), eksi marj da satırın hizasını bozmuyor:
görünen boyut aynı kalıyor, dokunulan alan 44'e çıkıyor. */
#gun-cercevesi #gun-cercevesi-kapat { flex: none; background: none; border: none;
color: inherit; opacity: .38; cursor: pointer; font-size: 1em; line-height: 1;
padding: 12px; margin: -12px -8px; transition: opacity .18s; }
#gun-cercevesi #gun-cercevesi-kapat:hover { opacity: .85; }
/* ═══ A4: MASA ŞERİDİ = KİMLİK SATIRI ═══
Kapsül çerçevesi kalktı; şerit artık selamın altındaki ince satır ve
"Sessiz Saat · Kyron"un yerine geçiyor (ikisi aynı anda görünmez).
Böylece bir satır eksiliyor ve masa bilgisi bağırmadan duruyor. */
#masa-serit { display: none; align-items: center; gap: 7px; text-decoration: none;
margin: -2px auto 7px; padding: 2px 6px; border-radius: 99px; max-width: 100%;
font-size: 0.74em; line-height: 1.3; width: fit-content;
color: #8fa2bf; background: none; border: 1px solid transparent;
transition: background .18s, border-color .18s, color .18s; }
#masa-serit:hover { color: #cfe0f5; }
/* Masa satırı görünüyorsa marka satırı susar — tek satır kuralı. */
.container.masa-var .subtitle { display: none; }
#masa-serit #masa-nokta { flex: none; width: 7px; height: 7px; border-radius: 50%;
background: var(--ss-yok, rgba(255,255,255,0.28)); transition: background .2s, box-shadow .2s; }
#masa-serit #masa-metin { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#masa-serit .ok { flex: none; opacity: .5; }
/* ═══ "DEĞİŞTİR" (16 Ağu) — şerit artık geçiş kapısı ═══════════════
Masa değiştirmenin tek yolu başka bir sayfaya gidip dönmekti; oysa
"nerede görünüyorum" sorusu tam da burada soruluyor. Küçük ve sağda:
satırın anlamını bastırmadan "buna dokunulur" der. */
/* 🔴 28 Ağu, kullanıcı: "değiştir yazısı çok yer kaplıyor, ikon kalsın."
Şeritte artık üç şey var (yer · kapı · değiştir); yazı düşünce üçü de
rahat sığıyor. Anlamı `aria-label` taşıyor — ekran okuyucu kaybetmez. */
#masa-serit .degis { flex: none; margin-left: 3px; font-size: 1.05em; opacity: .62;
padding: 2px 7px; border-radius: 99px; border: 1px solid rgba(255,255,255,0.14);
white-space: nowrap; line-height: 1.15; }
#masa-serit:hover .degis { opacity: 1; border-color: rgba(255,255,255,0.3); }
/* PERDE HÂLİ — "Kendi başıma". Nokta içi boş bir halka: yanan bir ışık
değil, çekilmiş bir perde. Satır soluk ama KAYBOLMAZ; öğrenci kendi
hâlini görebilmeli. */
#masa-serit.yalniz { color: #8fa2bf; cursor: pointer; }
#masa-serit.yalniz #masa-nokta { background: transparent;
border: 1px solid rgba(255,255,255,0.32); box-shadow: none; }
/* Boş hâl: çerçevesiz, soluk — ekranın enerjisini çalmasın. */
#masa-serit.bos { background: transparent; border-color: transparent; color: #7f93b3; }
#masa-serit.bos #masa-nokta { display: none; }
#masa-serit.bos:hover { color: #cfe0f5; background: rgba(255,255,255,0.05); }
/* Canlı hâl: birileri çalışıyor. A4'te çerçeve YOK — satır kimlik satırıdır,
kapsül değil; canlılığı nokta ve metnin parlaklığı taşır. Çerçeve yalnız
ortak ritim sürerken açılır (aşağıda) — vurgulanmayı hak eden tek an o. */
#masa-serit.canli { color: #cfe0f5; border-color: transparent; }
#masa-serit.canli #masa-nokta { background: var(--ss-var, #7FC79A); box-shadow: 0 0 8px var(--ss-var-hale, rgba(127,199,154,.6)); }
/* Ortak ritim: masanın randevusu sürüyor — şerit tempoyu gösterir.
Altın = birlikte çalışma, yeşil = birlikte mola. Sayı akarken göz
takip edebilsin diye rakamlar sabit genişlikte. */
/* OCAĞIN KÖZÜ — yalnız "N kişi çalışıyor" hâlinde. Masa ekranındaki
közle aynı işaret: masa ortak ateşin başıdır, kişi arttıkça köz
parlar (hale JS'ten gelir). Randevu/ritim hâllerinde köz YOKTUR —
orada konuşan söz, ateş değil. */
/* ═══ ŞERİDİN RENK DİLİ — İKİ KANAL (28 Ağu kullanıcı kararı) ═══════
Eskiden tek satırda üç haber birden renk yarıştırıyordu ve iki kural
kırılmıştı: (1) YEŞİL iki anlam taşıyordu — nokta yeşilse "biri
çalışıyor", şerit yeşilse "ortak mola"; (2) KÖZ kızıla kaçıyordu,
oysa üründe kırmızı aciliyet YASAK (sembol defteri, 4. korkuluk) —
kullanıcı da "bazen kırmızı oluyor" diye takıldı.
Artık iki ayrı kanal, hiç çakışmıyor:
· NOKTA = KİM VAR. yeşil: biri var · sönük: kimse yok ·
içi boş halka: perde ("kendi başıma")
· ÇERÇEVE+YAZI = ORTAK SAAT. altın: sürüyor · nötr: yok
🔒 Kalabalıkla renk DEĞİŞMEZ (kullanıcı kararı): üç kişi de otuz kişi
de aynı yeşil. Sayıyı metin söylüyor; rengin işi "var mı yok mu".
Bu yüzden köz gradyanı ve --koz-hale büyümesi KALDIRILDI. */
#masa-serit.ocak #masa-nokta { background: var(--ss-var, #7FC79A); box-shadow: 0 0 8px var(--ss-var-hale, rgba(127,199,154,.6)); }
/* ORTAK SAAT = ALTIN. Mola da aynı saatin parçasıdır: renk değişmez,
yalnız SESİ ALÇALIR. Hangi fazda olduğunu zaten metin söylüyor
("çalışma 12:04" / "mola 04:31") — rengi de konuşturmak gereksiz
bir ikinci dil olurdu. */
#masa-serit.ritim { color: var(--ss-ortak, #F5D67B); border-color: rgba(245,214,123,0.42);
background: rgba(245,214,123,0.10); font-variant-numeric: tabular-nums;
padding: 4px 12px; }
#masa-serit.ritim.molada { color: var(--ss-ortak-kisik, #e0cb96); border-color: rgba(245,214,123,0.24);
background: rgba(245,214,123,0.05); }
/* Nokta ortak saatte de KİM VAR'ı söyler — altına dönmez. */
#masa-serit.ritim #masa-nokta { background: var(--ss-var, #7FC79A); box-shadow: 0 0 8px var(--ss-var-hale, rgba(127,199,154,.6)); }
/* ═══ SESSİZ ALKIŞ (28 Ağu) ═══════════════════════════════════════
Üç parça: şeritteki KAPI (dokunulur sayı) · şeridin altındaki
TESLİM SATIRI · dokununca inen YAPRAK.
🔑 Kilitli kural: hiçbirinde SAYI yok — "kaç alkış aldın" hiçbir
yerde toplanmaz. Yalnız ad, yalnız satır. */
/* 🔴 31 Ağu — sayı artık AYRI DÜĞME DEĞİL (kullanıcı kararı):
ad + sayı bütünleşik tek hedef, şeridin tamamı masa yaprağını
açıyor; yer değiştirmenin kapısı yalnız ⇄. Çerçeve/çip kalktı;
kimlik duruyor (yaprak açıkken renk yine buraya vurulur). */
#masa-serit #alkis-kapi { white-space: nowrap; }
#masa-serit #alkis-kapi.acik { color: #e8d5a8; }
/* Teslim satırı: şeridin ALTINDA, kendi yerinde. Sağında ✕ —
kapatmak "gördüm" demektir ve satır bir daha gelmez. Kapatılmazsa
12 sn sonra çekilir ve BİR SONRAKİ EŞİKTE yine gelir (açılış ·
duraklama · mola · kayıt ekranı). Çalışma sürerken asla. */
#alkis-satir[hidden] { display: none !important; }
#alkis-satir {
display: flex; align-items: center; gap: 8px;
/* Dolgu ölçünün İÇİNDE sayılır — yoksa uzun isim listesi kartın
dışına taşıyor (masam.css'te aynı tuzağa düşülmüştü). */
box-sizing: border-box;
width: fit-content; max-width: 100%;
margin: -2px auto 9px; padding: 6px 6px 6px 11px; border-radius: 99px;
font-size: 0.76em; line-height: 1.35; color: #b79a63;
background: rgba(212,175,106,0.09); border: 1px solid rgba(212,175,106,0.28);
animation: alkis-in .32s ease both;
}
@keyframes alkis-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #alkis-satir { animation: none; } }
#alkis-satir > svg { width: 14px; height: 14px; flex: none; color: #e8d5a8; }
/* İsimler YAN YANA akar, sıra ALKIŞ SIRASI (ilk alkışlayan başta).
Sığmazsa sonu yumuşakça solar — sert bir "..." devamın KESİLDİĞİNİ
söyler, solma DEVAM ETTİĞİNİ. Eşiği biz koymuyoruz, ekran koyuyor. */
#alkis-satir .adlar { min-width: 0; flex: 0 1 auto; }
#alkis-satir .adlar.kesik {
white-space: nowrap; overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
}
#alkis-satir .ac { flex: none; cursor: pointer; color: #8fa2bf; font-size: 1.05em; line-height: 1; padding: 0 2px; }
#alkis-satir .kapat {
flex: none; width: 20px; height: 20px; border-radius: 50%; padding: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
color: #8fa2bf; font-family: inherit; font-size: 11px; line-height: 1;
}
/* ARKASI BULANIR — yaprak açıkken göz listeye düşsün, kadran geride
kalsın. Bulanıklık yalnız kadrana ve düğmesine; yaprağın kendisi
kabın DIŞ katmanında olduğu için etkilenmez. */
/* 🔴 28 Ağu, kullanıcı: "bütün kronometre bulanlansın." Önce yalnız
kadran bulanıyordu; ekranın geri kalanı (program, kutular, şeritler)
net kalınca yaprak havada duruyor gibi görünüyordu.
Kabın BÜTÜN çocukları bulanır — yalnız İKİSİ hariç: yaprağın kendisi
ve şerit (kapı orada, dokunulur kalmalı). */
.container.alkis-yaprakli > *:not(#alkis-yaprak):not(#masa-serit) {
filter: blur(3px); opacity: .38;
pointer-events: none;
}
.container > * { transition: filter .22s ease, opacity .22s ease; }
@media (prefers-reduced-motion: reduce) {
.container.alkis-yaprakli > *:not(#alkis-yaprak):not(#masa-serit) {
filter: none; opacity: .35;
}
}
/* Kayıt penceresindeki yuva. Kayıt ekranı üste binen bir pencere;
şeridin altındaki satır onun ARKASINDA kalır. Aynı satır burada
yeniden basılır — kartların ÜSTÜNDE, sola yaslı. */
#alkis-kayit[hidden] { display: none !important; }
#alkis-kayit { margin: 0 0 12px; text-align: left; }
#alkis-kayit #alkis-satir, #alkis-kayit #alkis-satir-kayit { margin: 0; }
/* Kayıt penceresinde satır SARAR: yer bol, isim kesmenin sebebi yok. */
#alkis-satir-kayit {
/* Izgara: el · isimler · ✕. İsimler SARAR, el ve ✕ kendi
sütunlarında kalır. (Sarmalı bir flex satırda el yalnız başına
bir satıra düşüyordu — çizilip görüldü, 28 Ağu.) */
display: grid; grid-template-columns: auto 1fr auto;
align-items: start; gap: 4px 8px;
box-sizing: border-box; max-width: 100%;
padding: 8px 8px 8px 12px; border-radius: 14px;
font-size: 0.76em; line-height: 1.45; color: #b79a63;
background: rgba(212,175,106,0.09); border: 1px solid rgba(212,175,106,0.28);
}
#alkis-satir-kayit[hidden] { display: none !important; }
#alkis-satir-kayit > svg { width: 14px; height: 14px; color: #e8d5a8; margin-top: 2px; }
#alkis-satir-kayit .adlar { min-width: 0; }
#alkis-satir-kayit .kapat {
flex: none; width: 20px; height: 20px; border-radius: 50%; padding: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
color: #8fa2bf; font-family: inherit; font-size: 11px; line-height: 1;
}
/* Yaprak: şeridin altında yüzer, KADRANI İTMEZ. Kapanınca ekran hiç
değişmemiş gibi kalır — öğrenci "nereye gittim ben" demesin. */
#alkis-yaprak[hidden] { display: none !important; }
#alkis-yaprak {
/* ⚠️ Ekranın geneli ORTALI (kadran ekranın efendisi). Yaprak bir
LİSTE — ortalanırsa adlar sallanır, göz sütun bulamaz. Hizayı
burada açıkça soldan veriyoruz; miras alınan ortalama sızmasın. */
text-align: left; box-sizing: border-box;
/* 🔴 28 Ağu, canlı prova: yaprak akışın İÇİNDEYDİ, açılınca kadranı
aşağı itiyor ve ekran boy değiştiriyordu ("bu tasarım hoş değil").
Artık MUTLAK: kendi yerinde durur ama yer kaplamaz — kadran
kımıldamaz, arkasında sessizce bulanır. */
position: absolute; z-index: 60;
left: 50%; transform: translateX(-50%);
width: calc(100% - 32px); max-width: 300px;
margin: 0; padding: 12px 12px 8px; border-radius: 15px;
background: #10151f; border: 1px solid rgba(212,175,106,0.26);
box-shadow: 0 18px 40px rgba(0,0,0,0.55);
/* 🔴 28 Ağu, canlı prova: yaprak SAĞA KAYIYOR, yarısı ekran dışında
kalıyordu. Sebep: ortak `alkis-in` animasyonu `transform`
yazıyor ve `both` dolgusuyla son kareyi (transform:none)
kalıcı kılıyordu — yani merkezleyen translateX(-50%) siliniyordu.
Ders: bir öğe transform ile konumlanıyorsa, ona uygulanan HER
animasyon o transform'u kendi karelerinde TAŞIMAK zorundadır. */
animation: alkis-yaprak-in .22s ease both;
}
@keyframes alkis-yaprak-in {
from { opacity: 0; transform: translateX(-50%) translateY(-5px); }
to { opacity: 1; transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
#alkis-yaprak { animation: none; transform: translateX(-50%); }
}
#alkis-yaprak .ay-bas {
font-size: 0.66em; letter-spacing: .8px; text-transform: uppercase;
color: #5f6b80; margin-bottom: 4px;
}
/* ── 30 Ağu · YAPRAK MASAYI ÇİZER (K24) ────────────────────────
Satır listesi yerine masanın kendisi. Altında iki satır: kaç kişi
çalışıyor (sayı METİNDE, ışıkta değil) ve dokunulan kişi. */
#alkis-yaprak .ay-ozet {
text-align: center; font-size: 0.72em; color: #94a3b8; margin-top: 4px;
}
#alkis-yaprak .ay-ozet b { color: #cfe0f5; font-weight: 600; }
#alkis-yaprak .ay-ipucu {
text-align: center; font-size: 0.66em; color: #5f6b80; margin-top: 2px;
}
#alkis-yaprak .ay-satir.ay-secili {
margin-top: 6px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,0.07);
border-bottom: none;
}
#alkis-yaprak .ay-kaydir { max-height: 220px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#alkis-yaprak .ay-satir {
display: flex; gap: 10px; align-items: center; padding: 8px 1px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
#alkis-yaprak .ay-satir:last-child { border-bottom: none; }
/* Harf kutusu HÂLİ söyler: altın çalışıyor, yeşil molada.
(Masa listesindeki kutunun aynısı, yalnız küçültülmüş.) */
#alkis-yaprak .ay-harf {
flex: 0 0 30px; height: 30px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 0.8em; font-weight: 700;
color: #e8d5a8; background: rgba(212,175,106,0.13); border: 1px solid rgba(212,175,106,0.4);
}
#alkis-yaprak .ay-harf.molada {
color: #9fe0b8; background: rgba(127,199,154,0.12); border-color: rgba(127,199,154,0.38);
}
#alkis-yaprak .ay-ic { min-width: 0; flex: 1; text-align: left; }
#alkis-yaprak .ay-ad { font-size: 0.86em; font-weight: 600; color: #e2e8f0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#alkis-yaprak .ay-alt { font-size: 0.72em; color: #94a3b8; margin-top: 1px; }
#alkis-yaprak .ay-alt.molada { color: var(--ss-var-acik, #9fe0b8); }
/* Alkış düğmesi. Verilmiş alkış SÖNMEZ, dolu kalır — geri alma yok. */
#alkis-yaprak .ay-ver {
flex: none; width: 30px; height: 30px; border-radius: 50%; padding: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid rgba(255,255,255,0.12); color: #6d7c96;
transition: color .18s, border-color .18s, background .18s;
}
#alkis-yaprak .ay-ver svg { width: 14px; height: 14px; display: block; }
#alkis-yaprak .ay-ver.verildi {
color: #e8d5a8; border-color: rgba(212,175,106,0.4); background: rgba(212,175,106,0.13); cursor: default;
}
/* ✋ ALKIŞ ANI (28 Ağu, canlı prova: "yavaş ve hafif, daha belirgin
olmalı"). Üç şey aynı anda: el zıplar, çevresine bir halka açılır,
satır bir an altınla dolar. Kısa — 520 ms; bu bir EŞİK anı, çalışma
anı değil (Kyron kuralıyla çelişmiyor). */
@keyframes alkis-el {
0% { transform: scale(1) rotate(0deg); }
22% { transform: scale(.82) rotate(-12deg); }
48% { transform: scale(1.35) rotate(9deg); }
70% { transform: scale(1.05) rotate(-4deg); }
100% { transform: scale(1) rotate(0deg); }
}
@keyframes alkis-halka {
0% { transform: scale(.6); opacity: .9; border-width: 2px; }
100% { transform: scale(2.6); opacity: 0; border-width: 1px; }
}
@keyframes alkis-satir-parla {
0% { background: rgba(212,175,106,.30); }
100% { background: transparent; }
}
#alkis-yaprak .ay-ver.patla svg { animation: alkis-el .52s cubic-bezier(.34,1.56,.64,1) both; }
#alkis-yaprak .ay-ver.patla::after {
content: ''; position: absolute; inset: -2px; border-radius: 50%;
border: 2px solid rgba(212,175,106,.85); pointer-events: none;
animation: alkis-halka .52s ease-out both;
}
#alkis-yaprak .ay-ver { position: relative; }
#alkis-yaprak .ay-satir.patla { animation: alkis-satir-parla .6s ease-out both; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) {
#alkis-yaprak .ay-ver.patla svg,
#alkis-yaprak .ay-ver.patla::after,
#alkis-yaprak .ay-satir.patla { animation: none; }
}
/* Bugün seni alkışlayanlar — satırı kapatsan da burada durur. */
#alkis-yaprak .ay-gelen {
display: flex; align-items: center; gap: 8px;
margin-top: 8px; padding: 8px 10px; border-radius: 11px;
background: rgba(212,175,106,0.08); border: 1px solid rgba(212,175,106,0.22);
font-size: 0.74em; color: #b79a63; line-height: 1.45;
}
#alkis-yaprak .ay-gelen svg { width: 13px; height: 13px; flex: none; color: #e8d5a8; }
/* Uçan el + varış halkası — yolu JS hesaplar, biçimi burada. */
#alkis-yaprak .ay-ucan {
position: absolute; z-index: 5; pointer-events: none;
width: 22px; height: 22px; color: #f0dcae;
filter: drop-shadow(0 0 8px rgba(212,175,106,.75));
}
#alkis-yaprak .ay-ucan svg { width: 100%; height: 100%; display: block; }
#alkis-yaprak .ay-halka {
position: absolute; z-index: 4; pointer-events: none;
width: 34px; height: 34px; border-radius: 50%;
border: 2px solid rgba(240,220,174,.9);
box-shadow: 0 0 14px rgba(212,175,106,.5);
}
/* El değdiği an harf kutusu altınla dolar. */
#alkis-yaprak .ay-harf.degdi {
background: rgba(212,175,106,.42); border-color: #f0dcae; color: #1a1408;
box-shadow: 0 0 18px rgba(212,175,106,.6);
transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
/* Hak bitti satırı — kapı ARTIK ALTINDA duruyor, kaybolmuyor. */
#alkis-yaprak .ay-bitti-satir {
margin-top: 8px; padding: 8px 10px; border-radius: 11px;
background: rgba(212,175,106,.07); border: 1px solid rgba(212,175,106,.2);
font-size: 0.74em; color: #b79a63; font-style: italic; text-align: center;
}
#alkis-yaprak .ay-dip {
margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.07);
display: flex; align-items: center; justify-content: space-between; gap: 8px;
font-size: 0.72em; color: #5f6b80;
}
#alkis-yaprak .ay-git { color: #94a3b8; cursor: pointer; }
/* Hak bitti: eller SİLİNİR (sönük değil, YOK) ve yerinde tek cümle kalır.
"yarın yeniden" bilerek var — sınır geçici, kaybedilmiş bir şey değil. */
#alkis-yaprak .ay-bitti { color: #b79a63; font-style: italic; }
#alkis-yaprak .ay-bos { font-size: 0.78em; color: #5f6b80; padding: 6px 1px; }
/* ODAKTA HİÇBİRİ YOK: sayaç çalışırken alkış ne gösterilir ne verilir.
Bu ekranın efendisi kadran (16 Ağu kuralının aynısı). */
/* 🔴 31 Ağu — YAPRAK VE SAYI ODAKTA DA GÖRÜNÜR (kullanıcı kararı).
Bu satır JS'teki kararı sessizce EZİYORDU: kod "çalışırken de
açılsın" diyor, biçim `display:none !important` ile kapatıyordu.
Ekranda görünen: "başlat dediğimde yaprak yine açılmıyor".
🔒 `#alkis-satir` GİZLİ KALIR ve bu kilitli bir kural: alkışı ALAN
kişi onu çalışırken görmez (sessiz alkışın tanımı). Kendi açtığın
yaprak başka şeydir — onu öğrenci bilerek açar. */
.container.focus-layout #alkis-satir { display: none !important; }
/* KISA HÂL — odak ekranı. Satır aynı satır, yalnız daha alçak sesle
konuşur: sayaç ekranın efendisidir, şerit onun altında bir fısıltı.
Ritim hâlinin altın çerçevesi de yumuşar; yoksa çalışırken göz
sayaç yerine şeride kayıyordu. */
.container.focus-layout #masa-serit { font-size: 0.68em; opacity: .78;
margin: -4px auto 12px; }
.container.focus-layout #masa-serit.ritim { padding: 3px 10px;
background: rgba(245,214,123,0.07); border-color: rgba(245,214,123,0.28); }
.container.focus-layout #masa-serit.ritim.molada {
background: rgba(127,199,154,0.07); border-color: rgba(127,199,154,0.28); }
.container.focus-layout #masa-serit:hover { opacity: 1; }
/* Ritim uyarısı: masa faz değiştirdi. Sayaca DOKUNMAZ, yalnız haber
verir (31 Tem kullanıcı kararı). Ekranın ortasını kapatmasın diye
şeridin hemen altında, tek satır. */
#ritim-uyari { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%;
margin: -4px auto 12px; padding: 9px 12px 9px 15px; border-radius: 14px;
font-size: 0.82em; line-height: 1.35; color: #12192B; background: #F5D67B;
box-shadow: 0 6px 22px rgba(245,214,123,.22); animation: ritimGir .28s ease-out; }
#ritim-uyari.molada { background: #9FE0B8; }
#ritim-uyari button { flex: none; border: 0; background: rgba(18,25,43,.12); color: #12192B;
width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 1; padding: 0; }
#ritim-uyari button:hover { background: rgba(18,25,43,.22); }
/* "geç" düğmesi — çipin içindeki tek eylem. Yuvarlak kapat düğmesinden
ayrılsın diye hap biçiminde ve koyu: haber pasif, bu değil. */
#ritim-uyari #ritim-uyari-eylem { width: auto; height: auto; border-radius: 99px;
padding: 4px 12px; font-size: 0.92em; font-weight: 600; letter-spacing: .2px;
background: rgba(18,25,43,.86); color: #F5D67B; }
#ritim-uyari #ritim-uyari-eylem:hover { background: #12192B; }
#ritim-uyari.molada #ritim-uyari-eylem { color: #9FE0B8; }
#ritim-uyari #ritim-uyari-eylem[hidden] { display: none; }
@keyframes ritimGir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #ritim-uyari { animation: none; } }
/* ═══ MOLA KARTI — üç kaynağın tek yüzü (16 Ağu 2026) ═══════════════
Masanın, sınıfın ve kişisel ritmin molası AYNI kartı açar. Sayaca
dokunan tek şey öğrencinin parmağı; kart yalnız sorar.
İKİ BOY: ilk 10 saniye BÜYÜK (kaçırılmasın), sonra ŞERİT (molaya
katılmayanın ekranını kaplamasın). Şeritte de düğme durur — karar
geç de verilebilir. */
#mola-karti { width: fit-content; max-width: 100%; margin: -4px auto 12px;
padding: 12px 14px; border-radius: 16px; text-align: left;
background: rgba(127,199,154,0.10); border: 1px solid rgba(127,199,154,0.42);
color: #dce8fa; animation: ritimGir .28s ease-out; }
#mola-karti[hidden] { display: none; }
/* Mola bitti hâli: renk "izin"den "davet"e döner (kehribar). */
#mola-karti.bitti { background: rgba(245,214,123,0.10); border-color: rgba(245,214,123,0.45); }
#mola-karti .mk-ust { display: flex; align-items: center; gap: 8px; }
#mola-karti .mk-nokta { flex: none; width: 8px; height: 8px; border-radius: 50%;
background: #7FC79A; box-shadow: 0 0 10px rgba(127,199,154,.7); }
#mola-karti.bitti .mk-nokta { background: #F5D67B; box-shadow: 0 0 10px rgba(245,214,123,.7); }
#mola-karti .mk-baslik { font-size: 0.95em; font-weight: 600; color: #eaf2ff; }
#mola-karti .mk-sayi { font-size: 0.95em; font-variant-numeric: tabular-nums;
color: #9fe0b8; font-weight: 600; }
#mola-karti.bitti .mk-sayi { color: #F5D67B; }
#mola-karti .mk-x { margin-left: auto; flex: none; border: 0; background: rgba(255,255,255,.06);
color: #7f93b3; width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
font-size: 11px; line-height: 1; padding: 0; }
#mola-karti .mk-x:hover { color: #cfe0f5; background: rgba(255,255,255,.12); }
/* Açıklama yalnız İLK karşılaşmada var (16 Ağu); gizlendiğinde kart
başlık + düğme olarak kalsın diye boşluk düğmelerin üstünde durur. */
#mola-karti .mk-alt { font-size: 0.8em; color: #9fb3d1; margin: 6px 0 0; line-height: 1.4; }
#mola-karti .mk-alt[hidden] { display: none; }
#mola-karti .mk-dugmeler { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-top: 10px; }
#mola-karti button { cursor: pointer; font: inherit; }
#mola-karti .mk-birincil { border: 0; border-radius: 10px; padding: 9px 15px;
font-size: 0.85em; font-weight: 700; background: #7FC79A; color: #08301B; }
#mola-karti.bitti .mk-birincil { background: #F5D67B; color: #12192B; }
#mola-karti .mk-ikincil { border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
padding: 8px 13px; font-size: 0.8em; background: transparent; color: #9fb3d1; }
#mola-karti .mk-ikincil:hover { color: #dce8fa; border-color: rgba(255,255,255,.28); }
/* ŞERİT HÂLİ: tek satır — açıklama susar, düğmeler küçülüp yana geçer. */
#mola-karti.durgun { padding: 8px 12px; border-radius: 999px;
display: flex; align-items: center; gap: 10px; }
#mola-karti.durgun .mk-alt { display: none; }
#mola-karti.durgun .mk-ust { gap: 7px; }
#mola-karti.durgun .mk-x { margin-left: 0; order: 3; }
#mola-karti.durgun .mk-dugmeler { gap: 6px; margin-top: 0; }
#mola-karti.durgun .mk-birincil { padding: 5px 11px; font-size: 0.78em; border-radius: 999px; }
#mola-karti.durgun .mk-ikincil { display: none; }
@media (prefers-reduced-motion: reduce) { #mola-karti { animation: none; } }
/* "Numaranı bağla" kartı — yalnız misafire görünür, kapatılabilir (7 gün). */
#kart-davet { display: flex; align-items: center; gap: 10px; margin: 0 0 6px;
padding: 9px 12px; background: rgba(37,211,102,0.07);
border: 1px solid rgba(37,211,102,0.25); border-radius: 12px;
font-size: 0.8em; color: #cfe0f5; text-align: left; }
#kart-davet[hidden] { display: none; }
#kart-davet .metin { flex: 1; min-width: 0; line-height: 1.35; }
#kart-davet .metin b { display: block; color: #eaf2ff; font-size: 1.02em; }
#kart-davet button { cursor: pointer; font: inherit; }
#kart-davet-bagla { flex: none; background: #25D366; color: #042A14; border: 0;
border-radius: 9px; padding: 8px 13px; font-weight: 700; }
#kart-davet-bagla:disabled { opacity: .5; cursor: wait; }
#kart-davet-kapat { flex: none; background: none; border: 0; color: #7f93b3;
font-size: 1.05em; padding: 4px; }
#kart-davet-kapat:hover { color: #cfe0f5; }
/* ÇAKIŞMA HÂLİ: aynı kutu, BAŞKA anlam. Yeşil bu tasarımda "WhatsApp
kanalı" demek (davet, bağlanma); uyarıyı da yeşil bırakmak "her şey
yolunda" diye okunurdu. Kehribar: dur-bak, ama alarm değil. */
#kart-davet[data-cakisma="1"] { background: rgba(245,158,11,0.09);
border-color: rgba(245,158,11,0.40); }
#kart-davet[data-cakisma="1"] #kart-davet-bagla { background: rgba(245,158,11,0.16);
color: #FCD34D; border: 1px solid rgba(245,158,11,0.5); }
/* E-posta ile giriş satırı — kartın altında, sessiz bir metin bağlantısı. */
#eposta-giris-satir { text-align: center; font-size: 0.78em; color: #7f93b3; margin: -2px 0 8px; }
#eposta-giris-satir[hidden] { display: none; }
#eposta-giris-satir button { background: none; border: 0; padding: 0 2px; font: inherit; color: #cfe0f5;
text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#eposta-giris-satir button:hover { color: #ffffff; }
/* "NE ÇALIŞACAKSIN?" KARTI SÖKÜLDÜ (24 Ağu gecesi, kullanıcı):
katlanan kapak kalktı, kutular hep açık duruyor. Stilleri de gitti. */
/* ═══ C4 · SIRAYLA BASAMAK (1 Ağu: sıra artık ZORUNLU) ═══
Yalnız sıradaki adım tam görünür; sonraki BOŞ kutular sessiz bekler
ve AÇILMAZ — dokunulursa sıradaki kutu kısa bir ışıkla kendini
gösterir (kod: renderCustomDropdown → siradakiniGoster).
Solukluk opacity İLE DEĞİL: yarı saydam kutu alttaki kronometre
verileriyle üst üste okunuyordu (kullanıcı canlıda yakaladı) ve
opacity alt ağacın tamamını ezdiği için içinden açılan liste de
soluk kalıyordu. Bunun yerine OPAK sessiz stil: zemin dolu, yalnız
yazı/çerçeve kısık. Dolu kutu bekliyor olsa da normal görünür ve
açılabilir — seçim görünsün, değiştirilebilsin. */
#secim-alani .bekliyor .dropdown-selected:not(.has-value) {
background: #141C2E; color: #55637D;
border-color: rgba(255, 255, 255, 0.05);
backdrop-filter: none; -webkit-backdrop-filter: none;
}
#secim-alani .bekliyor .dropdown-selected:not(.has-value):hover {
color: #6B7B99; border-color: rgba(255, 255, 255, 0.08);
}
/* Bekleyene dokunuldu → sıradaki kendini gösterir: sarsıntı yok,
camgöbeği kısa ışık (listelerin çerçevesiyle aynı dil). */
#secim-alani .sirada-vurgu .dropdown-selected {
border-color: rgba(0, 242, 254, 0.55);
box-shadow: 0 0 0 1px rgba(0, 242, 254, 0.22), 0 0 16px rgba(0, 242, 254, 0.16);
}
/* ⚠️ BURADA ANİMASYON YOK — BİLEREK.
Önce `max-height` + `overflow` ile katlanıyordu. O kurulumda açılan
ders/konu listesi (position:absolute) KIRPILAN bir kabın dışına taşmak
zorundaydı ve bu, `.container`daki backdrop-filter ile birleşince
tarayıcıda listenin ZEMİNİNİ düşürüyordu: liste saydam görünüyor,
altındaki "Çalışma türü seç", "BİTİR", "BAŞLAT" içinden okunuyordu
(kullanıcı canlıda yakaladı).
Çözüm kırılganlığın kaynağını kaldırmak: kap artık hiç kırpmıyor,
dolayısıyla listenin "kaçması" gereken bir sınır da yok. Kaybedilen
0,3 sn'lik kayma; kazanılan, listenin her yerde opak çıkması. */
#secim-alani { display: none; }
#secim-alani.acik { display: block; }
.custom-dropdown { position: relative; width: 100%; margin-bottom: 12px; }
/* ═══ GÜNÜN NABZI — blok arası tek satır (24 Ağu gecesi) ═══════════
Masa şeridiyle aynı dil: çerçeveli, ince, bağırmayan tek satır.
Solda günün toplamı, sağda ders başına mini çubuk. Çalışma
başlayınca gizlenir (odak ekranına öğe eklenmez). */
#gun-nabiz {
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 6px 11px; margin: 0 0 7px; border-radius: 99px; cursor: pointer;
border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025);
font-family: inherit; font-size: .72em; color: #8fa2bf; overflow: hidden;
}
#gun-nabiz[hidden] { display: none; }
.container.focus-layout #gun-nabiz { display: none; }
/* ═══ ANALİZ EKRANINDA DERS ŞERİDİ YOK (3 Eyl, kullanıcı) ═════════
Analiz tek amaçlı bir ekran: elinde bir hata listesi var, onu
çözmeye geldin. "Bugün hangi derse kaç dakika" o an sorulan soru
değil; ekranı kalabalıklaştırıyordu. Normal seçim ekranında
DURUYOR — orada "bugün ne yaptım?"ın evi o satır. */
.container.analiz-secili #gun-nabiz,
.container.analysis-mode #gun-nabiz { display: none; }
#gun-nabiz .gn-top { font-weight: 800; color: #cbd5e1; white-space: nowrap; letter-spacing: .2px; }
#gun-nabiz .gn-ayrac { width: 1px; height: 11px; background: rgba(255,255,255,.12); flex: none; }
/* ═══ NABIZ ŞERİDİ: ÇUBUKLAR YANA BÜYÜDÜ (25 Ağu, kullanıcı isteği)
Çubuklar 22px SABİT genişlikteydi — şeridin sağında bol boşluk
dururken oran okunamıyordu ("FİZ ▬ BİY ▬ MAT ▬▬"). Artık esnek:
boş kalan genişliği üç ders paylaşıyor ve çubuk kalınlaştı
(4 → 7). Ders adı da bir tık büyüdü. Şerit yine TEK SATIR ve
yuvarlak çerçevesini koruyor. */
#gn-cubuklar { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; overflow: hidden; }
#gn-cubuklar .gn-d {
display: inline-flex; align-items: center; gap: 6px;
flex: 1 1 0; min-width: 0; font-size: 1em; letter-spacing: .3px;
}
#gn-cubuklar .gn-c {
display: block; flex: 1; min-width: 24px; height: 8px; border-radius: 4px;
background: rgba(255,255,255,.10); position: relative; overflow: hidden;
}
#gn-cubuklar .gn-c i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--success); }
#gn-cubuklar .gn-c i.tam { background: #34d399; }
#gun-nabiz .gn-ok { flex: none; color: #5b6b86; font-size: .9em; }
/* ═══ ANALİZ KARTI (3 Eyl) ═══════════════════════════════════════
Üç kat: kip adı · ders·konu · hata sayısı. Altında vazgeçme düğmesi.
Kart çerçevesizdir — kadranın altında ikinci bir kutu, ekranı
kalabalıklaştırırdı; kat kat yazı zaten kendi hiyerarşisini kuruyor. */
#analysis-banner { text-align: center; margin: 2px 0 16px; }
#analysis-banner .ab-kip {
font-size: .68em; letter-spacing: .16em; text-transform: uppercase;
color: rgba(255, 213, 79, .62); font-weight: 700;
}
#analysis-banner .ab-ad {
font-size: .98em; font-weight: 700; color: #FFD54F; line-height: 1.35;
margin-top: 3px; text-wrap: balance;
}
#analysis-banner .ab-sayi { font-size: .78em; color: #8fa2bf; margin-top: 3px; }
/* Vazgeçme kehribar DEĞİL: ekranın altın ışığıyla yarışmaz, ama artık
yazı değil düğme — dokunulacağı belli, dokunma alanı geniş. */
#analysis-banner #btn-exit-analysis {
flex: none; width: auto; margin-top: 11px; padding: 7px 20px;
border-radius: 999px; font-size: .76em; font-weight: 600; letter-spacing: .04em;
background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16);
color: #a9b8d0;
}
#analysis-banner #btn-exit-analysis:not(:disabled):hover {
background: rgba(255, 255, 255, .1); color: #e2e8f0; transform: none; box-shadow: none;
}
/* ── GÜN DÖKÜMÜ — üç yerde aynı çizim (nabız yaprağı · kayıt ekranı) ── */
.gun-dokum { border: 1px solid var(--glass-border); border-radius: 13px; padding: 9px 12px; }
.gun-dokum .gd-bas {
font-size: .62em; letter-spacing: 1.1px; text-transform: uppercase;
color: #7f8ea8; font-weight: 700; margin-bottom: 7px;
}
.gun-dokum .gd-bas b { color: var(--success); letter-spacing: .4px; font-size: 1.15em; }
/* ═══ KATLANIR DÖKÜM (3 Eyl, kullanıcı) ══════════════════════════
"Bu kısım açılır kapanır olsun, isteyen detaya baksın — kalabalığı
giderelim." Başlık artık bir kapı: kapalıyken tek satır (bugün kaç
dakika), açıkken ders ders döküm. Kapı KAPALI doğar; kayıt ekranına
bakan öğrencinin ilk sorusu "kaydım doğru mu", "hangi derse kaç
dakika" değil. */
.gun-dokum.katlanir { padding: 0; }
.gun-dokum .gd-kapi {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 10px 12px; margin: 0; border: 0; border-radius: 13px;
background: none; cursor: pointer; text-align: left;
font-family: inherit; font-size: .62em; letter-spacing: 1.1px;
text-transform: uppercase; color: #7f8ea8; font-weight: 700;
}
.gun-dokum .gd-kapi:not(:disabled):hover { transform: none; box-shadow: none; background: rgba(255,255,255,.03); }
.gun-dokum .gd-kapi .gd-ok { margin-left: auto; font-size: 1.5em; line-height: 1; transition: transform .2s ease; }
.gun-dokum.kapali .gd-kapi .gd-ok { transform: rotate(-90deg); }
.gun-dokum .gd-govde { padding: 0 12px 10px; }
.gun-dokum.kapali .gd-govde { display: none; }
/* ═══ DERS ÇUBUKLARI YANA BÜYÜDÜ (25 Ağu, kullanıcı isteği) ══════
Çubuk satırın ortasında ince bir çizgiydi; asıl bilgi O ve iki
yandaki metinler ondan çok yer alıyordu. Ders adı ve kalan süre
daraltıldı, boşluk kısıldı — kazanılan genişliğin tamamı çubuğa
gitti. Çubuk da kalınlaştı (5 → 8): uzaktan bakışta oran okunsun. */
.gd-sat { display: flex; align-items: center; gap: 7px; font-size: .74em; color: #cbd5e1; padding: 5px 0; }
.gd-sat .gd-ad { width: 92px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-sat .gd-cub { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.gd-sat .gd-cub i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--success); }
.gd-sat .gd-cub i.tam { background: #34d399; }
/* Hedefsiz ders: ölçülecek bir oran yok, o yüzden çubuk da yok.
Satırlar hizada dursun diye yerinde ince bir noktalı iz kalır. */
.gd-sat .gd-cub.hedefsiz { background: none; height: 0; border-top: 1px dotted rgba(255,255,255,.16); border-radius: 0; }
#gn-cubuklar .gn-c.hedefsiz { background: none; border-bottom: 1px dotted rgba(255,255,255,.20); border-radius: 0; }
.gd-sat .gd-kal { width: 62px; flex: none; text-align: right; font-size: .92em; color: #7f8ea8; white-space: nowrap; }
.gd-sat .gd-kal.ok { color: #34d399; }
/* Kayıt ekranındaki kopya: TOPLAM şeridinin hemen altında durur. */
#gun-seyri { margin: 0 0 4px; }
#gun-seyri[hidden] { display: none; }
/* ═══ HEDEF LİSTESİ — doğrudan görünen hedefler (24 Ağu gecesi) ════
Açılır kutunun yerini aldı: gününün dersleri ekranda, seçmek için
kutu açmak yok. Serbest çalışma ayrı bir öbekte ve sönük durur —
programın parçası değil, yanındaki kapı. */
#hedef-listesi { margin: 0 0 8px; }
#hedef-listesi[hidden] { display: none; }
.container.focus-layout #hedef-listesi { display: none; }
#hedef-listesi .hl-bas,
#duzelt-govde .hl-bas {
font-size: .62em; letter-spacing: 1.4px; text-transform: uppercase;
color: #7f8ea8; font-weight: 500; margin: 0 2px 5px; text-align: left;
}
#hedef-listesi .hl-kume,
#duzelt-govde .hl-kume { display: flex; flex-direction: column; gap: 5px; }
#hedef-listesi .hl-kume.serbest,
#duzelt-govde .hl-kume.serbest { margin-top: 7px; }
/* ═══ SERBEST ÇALIŞMA AÇILIR-KAPANIR (24 Ağu, kullanıcı kararı) ═══
Programı olan öğrencide kapalı doğar: ekranın kahramanı bugünün
programı. Başlık `hl-bas`ın (BUGÜNÜN PROGRAMI) sesiyle konuşur —
yeni bir görsel dil değil, aynı fısıltı; farkı dokunulabilir olması
ve sonunda bir ok taşıması. */
#hedef-listesi .hl-serbest-bas,
#duzelt-govde .hl-serbest-bas {
/* Üst karta yapışıyordu: başlık programın parçası gibi duruyordu.
Program öbeği ile serbest kapısı arasına gerçek bir nefes kondu
(25 Ağu, kullanıcı bulgusu). */
display: flex; align-items: center; gap: 6px; width: 100%;
background: none; border: none; padding: 16px 2px 5px; cursor: pointer;
font-family: inherit; font-size: .62em; letter-spacing: 1.2px;
text-transform: uppercase; color: #7f8ea8; font-weight: 500; text-align: left;
transition: color .25s ease;
}
#hedef-listesi .hl-serbest-bas:hover,
#duzelt-govde .hl-serbest-bas:hover,
#hedef-listesi .hl-serbest-bas.acik,
#duzelt-govde .hl-serbest-bas.acik { color: #9db0cc; }
/* Ok: iki çizgiden bir ▾. Açılınca yarım tur döner — kapının açıldığı
tek hareket burada, gerisi sessiz. */
/* Başlığın solundaki liste ikonu: "buradan kendi konunu seçebilirsin". */
#hedef-listesi .hl-serbest-bas .hls-ik,
#duzelt-govde .hl-serbest-bas .hls-ik { display: flex; }
#hedef-listesi .hl-serbest-bas .hls-ik svg,
#duzelt-govde .hl-serbest-bas .hls-ik svg { width: 13px; height: 13px; display: block; }
#hedef-listesi .hl-serbest-bas span:not(.hls-ik),
#duzelt-govde .hl-serbest-bas span:not(.hls-ik) { flex: 1; }
#hedef-listesi .hl-serbest-bas i,
#duzelt-govde .hl-serbest-bas i {
width: 7px; height: 7px; border-right: 1.6px solid currentColor;
border-bottom: 1.6px solid currentColor; border-radius: 1px;
transform: translateY(-2px) rotate(45deg); transition: transform .28s ease;
}
#hedef-listesi .hl-serbest-bas.acik i,
#duzelt-govde .hl-serbest-bas.acik i { transform: translateY(1px) rotate(-135deg); }
#hedef-listesi .hl-kume.serbest.kapali,
#duzelt-govde .hl-kume.serbest.kapali { display: none; }
#hedef-listesi .hl-serbest-bas + .hl-kume.serbest,
#duzelt-govde .hl-serbest-bas + .hl-kume.serbest { margin-top: 0; }
#hedef-listesi .hl-kume.sonuk,
#duzelt-govde .hl-kume.sonuk { opacity: .55; }
/* ═══ KART YAZISI DAHA ZARİF (25 Ağu, kullanıcı bulgusu) ═════════
"Harfler çok net görünüyor." Doğruydu: bütün satır 600 ağırlıkta ve
tek renkteydi — ders adı da, ekli haber de aynı sesle bağırıyordu.
Artık satırda İKİ ses var:
· DERS → 600 ağırlık, açık gri (okunacak olan)
· ekler → 400 ağırlık, kısık gri ("· konuları bitti" gibi haberler)
Harfler nefes alsın diye satır aralığı, harf aralığı ve iç boşluk
bir tık açıldı. */
#hedef-listesi .hl-satir,
#duzelt-govde .hl-satir {
position: relative; display: flex; align-items: center; gap: 9px; width: 100%;
padding: 10px 13px; border-radius: 12px; cursor: pointer; text-align: left;
border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.035);
font-family: inherit; font-size: .855em; font-weight: 400; color: #dbe4f0;
letter-spacing: .006em; line-height: 1.3;
overflow: hidden; transition: border-color .18s ease, background .18s ease;
}
/* ═══ HEPSİ İNCE (25 Ağu, kullanıcı kararı) ══════════════════════
"Tüm yazıları ince yapsan daha zarif olacak sanki." Ders adı da
400 ağırlığa indi; ayrım artık KALINLIKTAN değil IŞIKTAN geliyor —
ders açık, ek kısık. Yayınevi dizgisi mantığı: tek ağırlık, iki ton.
Harf aralığı bir tık açıldı ki incelik cılızlığa dönüşmesin. */
#hedef-listesi .hl-ad b,
#duzelt-govde .hl-ad b { font-weight: 400; letter-spacing: .012em; color: #e8eef7; }
/* "· konuları bitti", "· Türev" gibi ekler: aynı satırda ama daha kısık. */
#hedef-listesi .hl-konu,
#duzelt-govde .hl-konu { font-weight: 400; color: #8fa0ba; }
#hedef-listesi .hl-satir.secili .hl-konu,
#duzelt-govde .hl-satir.secili .hl-konu { color: #9ed4e6; }
#hedef-listesi .hl-satir:active,
#duzelt-govde .hl-satir:active { transform: scale(.995); }
/* 25 Ağu: satır artık üç parça (ders · işaret · konu) — kırpma
`hl-ad`ta değil KONUDA yapılıyor, yoksa işaret de kırpılırdı. */
#hedef-listesi .hl-ad,
#duzelt-govde .hl-ad { flex: 1; min-width: 0; display: flex; align-items: center; }
/* ═══ HEDEF SÜRESİ DE YAZAR (25 Ağu, kullanıcı isteği) ═══════════
Satır "33 dk kaldı" diyordu ama NEDEN 33 olduğunu söylemiyordu —
öğrenci hedefin 40 mı 60 mı olduğunu bilmeden kalanı ölçemez.
Kalan üstte (karar bilgisi), hedef altta ve kısık (bağlam). */
#hedef-listesi .hl-sag,
#duzelt-govde .hl-sag {
flex: none; font-size: .82em; font-weight: 400; color: #93a5c0;
white-space: nowrap; text-align: right; line-height: 1.25;
}
#hedef-listesi .hl-sag small,
#duzelt-govde .hl-sag small {
display: block; font-size: .84em; font-weight: 400; color: #64748b; letter-spacing: .02em;
}
/* ═══ SÜRE ARTIK YAN YANA (25 Ağu ikinci tur) ════════════════════
"60 dk kaldı" üstte, "60 dk hedef" altta yazıyordu; hiç
çalışılmamış derste ikisi de AYNI sayıydı — satır aynı şeyi iki
kez söylüyordu. Artık tek satır: büyük sayı yapılanı (ya da
hedefi), kısık kuyruk bağlamı taşıyor — "25 / 60 dk". */
#hedef-listesi .hl-sag b,
#duzelt-govde .hl-sag b { font-weight: 800; color: #cfe0f5; font-size: 1.12em; }
#hedef-listesi .hl-sag i,
#duzelt-govde .hl-sag i {
font-style: normal; font-size: .88em; color: #64748b; margin-left: 3px;
}
#hedef-listesi .hl-sag.ok,
#duzelt-govde .hl-sag.ok { color: #34d399; }
#hedef-listesi .hl-sag.ok small,
#duzelt-govde .hl-sag.ok small { color: #5f7a6f; }
#hedef-listesi .hl-sag.ok i,
#duzelt-govde .hl-sag.ok i { color: #5f7a6f; }
/* KONU SIRASI KURULMAMIŞ DERS: yeşil "tamam" değil, altın bir DAVET.
Satır kapalı görünür ama tıklanır — konu sayfasına götürür. */
/* ═══ KONUŞAN İŞARET (25 Ağu) ═══════════════════════════════════
Tirenin yerini alan işaret. İki hâli var, RENK ayırıyor:
· altın üçgen → bu konu sırada, hiç dokunulmadı (taze iş)
· çelik ikon → daha önce oturuldu; ikon EN SON ne yapıldığını
söyler (yarım kalmış iş)
İkonlar tür seçme kartlarının kendisi (`PK_TUR_SVG`) — öğrenci
onları zaten tanıyor, yeni bir alfabe öğretmiyoruz. */
#hedef-listesi .hl-ad b,
#duzelt-govde .hl-ad b { flex: none; white-space: nowrap; }
#hedef-listesi .hl-konu,
#duzelt-govde .hl-konu {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#hedef-listesi .hl-ek,
#duzelt-govde .hl-ek { flex: none; white-space: nowrap; }
#hedef-listesi .hl-im,
#duzelt-govde .hl-im { flex: none; margin: 0 5px 0 8px; }
#hedef-listesi .hl-im.sira,
#duzelt-govde .hl-im.sira { color: #d4af6a; font-weight: 700; font-size: .9em; }
#hedef-listesi .hl-im.tur,
#duzelt-govde .hl-im.tur { width: 14px; height: 14px; color: #6f9fd0; display: block; }
#hedef-listesi .hl-im.tur svg,
#duzelt-govde .hl-im.tur svg {
width: 100%; height: 100%; fill: none; stroke: currentColor;
stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
/* Kapalı satırlarda işaret de sönsün — satırın hâliyle uyumlu. */
#hedef-listesi .hl-satir.bitti .hl-im,
#duzelt-govde .hl-satir.bitti .hl-im,
#hedef-listesi .hl-satir.sirasiz .hl-im,
#duzelt-govde .hl-satir.sirasiz .hl-im { opacity: .6; }
#hedef-listesi .hl-sag.kur,
#duzelt-govde .hl-sag.kur { color: #d4af6a; }
#hedef-listesi .hl-sag.kur small,
#duzelt-govde .hl-sag.kur small { color: #8a7442; }
#hedef-listesi .hl-satir.sirasiz,
#duzelt-govde .hl-satir.sirasiz { opacity: .82; border-left: 2px solid rgba(212,175,106,.5); }
#hedef-listesi .hl-satir.sirasiz .hl-ad b,
#duzelt-govde .hl-satir.sirasiz .hl-ad b { color: #b9a887; }
/* Çubuk satırın DİBİNDE ince bir iz: ayrı bir öğe gibi durmasın. */
#hedef-listesi .hl-cubuk,
#duzelt-govde .hl-cubuk { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.05); }
#hedef-listesi .hl-cubuk i,
#duzelt-govde .hl-cubuk i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--success); opacity: .75; }
#hedef-listesi .hl-cubuk i.tam,
#duzelt-govde .hl-cubuk i.tam { background: #34d399; opacity: .9; }
#hedef-listesi .hl-satir.secili,
#duzelt-govde .hl-satir.secili { border-color: rgba(0,242,254,.45); background: rgba(0,242,254,.09); color: #dff4fb; }
/* ✅ TAMAMLANAN HEDEF SÖNÜK AMA DOKUNULUR (29 Ağu, kullanıcı kararı).
`pointer-events: none` asıl engeldi: satır sönük görünüp hiç tepki
vermiyordu — görünen ama ölü öğe (panjur tuzağı). Hedef bir TAVAN
değil bir sözdür; öğrenci aynı derse daha çok çalışmak isteyebilir.
Sönüklük "bugünlük sözünü tuttun" der, kapıyı kapatmaz. */
#hedef-listesi .hl-satir.bitti,
#duzelt-govde .hl-satir.bitti { opacity: .52; }
#hedef-listesi .hl-satir.bitti:active,
#duzelt-govde .hl-satir.bitti:active { opacity: .75; }
#hedef-listesi .hl-satir.hl-serbest,
#duzelt-govde .hl-satir.hl-serbest { border-style: dashed; background: transparent; color: #9db0cc; font-weight: 500; }
#hedef-listesi .hl-satir.hl-serbest.secili,
#duzelt-govde .hl-satir.hl-serbest.secili { border-style: solid; }
/* ═══ TÜR KUTULARI — ÇALIŞMA · SORU ÇÖZÜMÜ (24 Ağu gecesi) ═════════
Açılır listenin yerini iki kutu aldı; tür kartlarıyla aynı dil.
Seçili kutu camgöbeği yanar; ÇALIŞMA'nın alt satırı seçilen alt
türü söyler ("· video izliyorum"). */
#tur-kutulari { display: flex; gap: 8px; }
#tur-kutulari[hidden] { display: none; }
.tk-kutu {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
padding: 7px 8px 6px; border-radius: 13px; cursor: pointer; text-align: center;
border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03);
font-family: inherit; transition: border-color .18s ease, background .18s ease;
}
.tk-kutu b { font-size: .78em; font-weight: 800; letter-spacing: .9px; color: #cbd5e1; line-height: 1.25; }
.tk-kutu small { font-size: .64em; color: #7f8ea8; line-height: 1.2; }
.tk-kutu:active { transform: scale(.98); }
.tk-kutu.secili { border-color: rgba(0,242,254,.45); background: rgba(0,242,254,.09); }
.tk-kutu.secili b { color: #8ef0ff; }
.tk-kutu.secili small { color: #9adfe8; }
.tk-kutu:disabled { opacity: .4; pointer-events: none; }
/* ——— Seçiciler (Kyron dili · renk anayasası) ———
Eskiden TERS kuruluydu: BOŞ kutu camgöbeği, kalın ve parlak bağırıyor;
doldurulmuş kutu ise sessizleşiyordu. Yani ekranda en çok bağıran şey
"henüz seçmedin" bilgisiydi ve dört kutu aynı anda bunu yapıyordu.
Artık tersi: boş kutu sakin bir davet, dolu kutu net okunur.
Altın burada YOK — altın yalnız Kyron konuşunca (tek altın kart kuralı). */
/* 🔻 OK İŞARETİ (7 Eyl 2026, gezinti raporu 3. madde) ─────────────
Kutu 420x74'lük boş bir levhaydı: dokununca bir liste açılacağını
söyleyen HİÇBİR işaret yoktu. Anayasa: "düğmeye benzeyen
dokunulabilir olmalıdır" — tersi de doğru, dokunulabilen
dokunulabilir GÖRÜNMELİ (panjur tuzağının kardeşi).
Ok bir ÇİZİM (maske değil, kendi kutusunda döner): liste açılınca
yukarı bakar, kapanınca aşağı. Yazının üstüne binmesin diye sağda
yer ayrılıyor. */
.dropdown-selected {
position: relative;
padding: 14px 40px 14px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.03);
color: #8fa2bf; font-weight: 500; border: 1px solid rgba(255, 255, 255, 0.09);
cursor: pointer; text-align: left; font-size: 0.95em; backdrop-filter: blur(10px);
transition: all 0.3s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dropdown-selected::after {
content: ''; position: absolute; right: 15px; top: 50%;
width: 9px; height: 9px; margin-top: -6px;
border-right: 2px solid #7f8ea8; border-bottom: 2px solid #7f8ea8;
border-radius: 1px;
transform: rotate(45deg); transform-origin: center;
transition: transform .2s ease, border-color .2s ease;
pointer-events: none;
}
.custom-dropdown.acik .dropdown-selected::after {
transform: rotate(-135deg); margin-top: -2px; border-color: #c3d0e4;
}
.dropdown-selected.disabled::after { opacity: .5; }
.dropdown-selected:hover { border-color: rgba(255, 255, 255, 0.2); color: #b6c6de; }
.dropdown-selected.has-value {
background: rgba(255, 255, 255, 0.05); color: #E8EDF7; font-weight: 600; border-color: var(--glass-border);
}
.dropdown-selected.disabled { opacity: 0.5; cursor: not-allowed; }
/* 🔴 ÇERÇEVE PALETİMİZDE YOKTU (7 Eyl): `var(--primary)` = #4facfe,
kaçak mavi. Zemin de hazır kütüphane grisiydi (#1e293b). İkisi de
ürünün lacivertine çekildi.
🔼 YUKARI DA AÇILIR: kutu ekranın dibindeyken liste AŞAĞI açılıyor
ve 20 dersin iki buçuğu görünüyordu. `.yukari` sınıfı JS'ten gelir —
aşağıda yer yoksa liste kutunun ÜSTÜNE çıkar. */
.dropdown-list {
display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 99;
background: #131c2e; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14);
max-height: 200px; overflow-y: auto; margin-top: 5px; box-shadow: 0 10px 28px rgba(0,0,0,0.55);
}
.dropdown-list.yukari {
top: auto; bottom: 100%; margin-top: 0; margin-bottom: 5px;
box-shadow: 0 -10px 28px rgba(0,0,0,0.55);
}
.dropdown-item { padding: 12px 14px; color: white; cursor: pointer; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.9em; }
.dropdown-item:last-child { border-bottom: none; }
/* Neon camgöbeği vurgu kalktı (7 Eyl): camgöbeği DURUM rengi oldu,
bir satırın üstünde durmak bir durum değil. */
.dropdown-item:hover { background: rgba(255, 255, 255, 0.06); }
.dropdown-item.disabled { color: #64748b; cursor: not-allowed; }
.dropdown-item.disabled:hover { background: none; }
input {
width: 100%; padding: 14px; border-radius: 12px;
background: rgba(255, 255, 255, 0.05); color: white;
border: 1px solid var(--glass-border); margin-bottom: 12px;
font-size: 1.1em; outline: none; box-sizing: border-box;
backdrop-filter: blur(10px); -webkit-appearance: none; appearance: none;
text-align: center; transition: all 0.3s ease;
}
input:focus { border-color: var(--primary); background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 15px rgba(0, 242, 254, 0.3); }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Sürenin nefesi. İki değişiklik: rengi altına döndü (kadranda tek canlı ışık)
ve periyodu 2,5 sn'den 4,5 sn'ye çıkarıldı — Kyron'un halka nefesiyle
(kyron.css → kyron-nefes) AYNI ritim. Süre ve Kyron artık birlikte soluk alır.
Büyüme de kısıldı (1.02 → 1.008): 41 dakika göz ucunda duran bir yazının
nabız atması yorucuydu. */
@keyframes pulse-timer {
0% { text-shadow: 0 0 18px rgba(245, 214, 123, 0.28); transform: scale(1); }
50% { text-shadow: 0 0 34px rgba(245, 214, 123, 0.6), 0 0 9px rgba(245, 214, 123, 0.3); transform: scale(1.008); }
100% { text-shadow: 0 0 18px rgba(245, 214, 123, 0.28); transform: scale(1); }
}
/* Sayaç fontu dar ekranda vw ile sınırlanır — taşıp yatay kaydırma/kesik rakam yaratmasın */
#timer { font-size: min(4.8em, 15vw); margin: 15px 0; font-weight: 300; letter-spacing: 3px; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(245, 214, 123, 0.35); transition: all 0.4s ease; max-width: 100%; }
#timer.running { animation: pulse-timer 4.5s ease-in-out infinite; font-weight: 400; color: #fff; }
/* ÇALIŞMA DÜZENİ: blok sürerken ekran sadeleşir — kartlar/listeler gizli, sayaç büyük */
.container.focus-layout #greeting, .container.focus-layout .subtitle,
.container.focus-layout #pending-analysis-box, .container.focus-layout #analysis-banner,
.container.focus-layout #dropdown-wrapper-target, .container.focus-layout #dropdown-wrapper-type,
/* Niyet ve gün çerçevesi de odak ekranında susar: çalışırken ekranda
yalnız süre + tek fısıltı kalır. Geri sayımın çalışma sırasında
görünmesi ayrıca korkuluğa da aykırı olurdu. */
.container.focus-layout #dun-niyet, .container.focus-layout #hy-hafta,
.container.focus-layout #gun-cercevesi,
/* Masa şeridi çalışırken de ekranda kalıyordu — kendi kuralımıza aykırıydı
(odak ekranında yalnız süre + tek fısıltı). Masanın haberi çalışırken
yine ulaşır: faz değişimi ve "biri oturdu" ÇİP olarak süzülür (#ritim-uyari),
yani kesmeyen yol açık, sürekli duran satır kapalı. */
/* 🔴 15 Ağu ONARIMI — KÜME SATIRI SUSMUYORDU. Masa şeridi odakta
gizleniyor, kavuşma satırı gizlenmiyordu; sonuç: ekran sadeleşince
geriye tek konuşan olarak SINIF kalıyordu ve öğrenci "hep öğretmen
masasındayım" sanıyordu (canlı test bulgusu). İki satır tek kural
(masa↔küme denklik). Haber yolu yine açık: faz değişimi çip olarak
süzülüyor. */
/* 🔴 16 Ağu (akşam) — ŞERİT ARTIK ODAKTA DA KALIYOR, KISALARAK.
Gizleme kararı "odakta yalnız süre + tek fısıltı" kuralından
çıkmıştı ama bir bedeli vardı: öğrenci çalışmaya başlar başlamaz
NEREDE OLDUĞUNU göremiyordu. Kullanıcı: "kronometreyi
başlattığımda bu bilgi gidiyor… kişi nerede olduğunu bilsin."
Uzlaşma: satır kalır, içi küçülür — yer · faz · geri sayım ·
"değiştir". Kişi sayısı ve "+N yer canlı" rozeti GİTMEZ, düşer
(metni JS kısaltıyor): çalışan öğrencinin ekranında sürekli
değişen bir sayı, tam da kaçındığımız şey. */
.container.focus-layout #custom-target-inputs, .container.focus-layout #btn-day-end,
.container.focus-layout #secim-alani,
.container.focus-layout #btn-hesap { display: none !important; }
/* Analiz seçildiğinde kutuları enterAnalysisUI zaten gizliyor; kartın da
susması gerek — yoksa boş bir "Ne çalışacaksın?" ekranda kalırdı. */
.container.analiz-secili #secim-alani { display: none !important; }
/* TEK DOKUNUŞLA DEVAM kartı (denetim 24) — hedef seçicinin üstünde,
onunla yarışmayan yeşil bir "devam" tonunda. */
/* IZGARA (flex değil) BİLEREK: "Matematik TYT · Üslü Sayılar · Soru Çözümü"
375px'te tek satıra sığmıyor. Flex'te ya tür kırpılıyordu ya ▶ alt
satıra düşüyordu; ızgarada etiket üstte, içerik+▶ altta yan yana ve
içerik iki satıra SARIYOR — tür asla kesilmiyor (kaldığın yerin tür
bilgisi, yerin kendisi kadar önemli). */
/* ⭐ EKRANIN TEK ALTIN KARTI (Kyron dili · D3).
Bu kart Kyron'un HATIRLAMASIDIR: "dün buradaydın, ben tuttum." Bu yüzden
yeşilden altına döndü ve başında onun göz-izini taşıyor — ekranda altın
taşıyan başka kart YOK, olursa imza değerini kaybeder.
İz ::before ile çiziliyor çünkü .kust'un metnini JS her açılışta
yeniden yazıyor ("dün" / "bugün" ayrımı) ve çocukları siliyor. */
/* "Kaldığın yer" kartı 24 Ağu gecesi söküldü — stilleri de gitti. */
#dun-niyet { width: 100%; display: grid; grid-template-columns: auto 1fr auto;
align-items: center; column-gap: 8px; text-align: left;
background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 12px; padding: 10px 13px; margin-bottom: 10px; cursor: pointer;
font: inherit; color: #cbd5e1; transition: background 0.18s ease, transform 0.12s ease; }
#dun-niyet:hover { background: rgba(255, 255, 255, 0.07); }
#dun-niyet:active { transform: scale(0.995); }
#dun-niyet .kust { grid-column: 1; grid-row: 1; font-size: 0.76em;
color: #8fa2bf; font-weight: 600; white-space: nowrap; }
#dun-niyet .kalt { grid-column: 2; grid-row: 1; min-width: 0; font-size: 0.83em;
font-weight: 600; line-height: 1.35;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dun-niyet .kalt .ikincil { color: #8fa2bf; font-weight: 400; }
#dun-niyet .kok { grid-column: 3; grid-row: 1; font-size: 1.05em; color: #8fa2bf; }
/* HAFTANIN YÜZÜ satırı — niyet satırıyla AYNI biçim, altın tonda.
Aynı yerde duran iki satır aynı dili konuşsun; ayıran tek şey renk,
çünkü biri yarını, öteki geçmiş haftayı anlatıyor. */
#hy-hafta { width: 100%; display: grid; grid-template-columns: auto 1fr auto;
align-items: center; column-gap: 8px; text-align: left;
background: rgba(212, 175, 106, 0.07); border: 1px solid rgba(212, 175, 106, 0.26);
border-radius: 12px; padding: 10px 13px; margin-bottom: 10px; cursor: pointer;
font: inherit; color: #e8d5a8; transition: background 0.18s ease, transform 0.12s ease; }
#hy-hafta:hover { background: rgba(212, 175, 106, 0.13); }
#hy-hafta:active { transform: scale(0.995); }
#hy-hafta .kust { grid-column: 1; grid-row: 1; font-size: 0.76em;
color: #b99b62; font-weight: 600; white-space: nowrap; }
#hy-hafta .kalt { grid-column: 2; grid-row: 1; min-width: 0; font-size: 0.83em;
font-weight: 600; line-height: 1.35;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hy-hafta .kok { grid-column: 3; grid-row: 1; font-size: 1.05em; color: rgba(212,175,106,.7); }
/* Odakta selamlama ve köşe ikonları gizli — üst dolgu geri iner. */
.container.focus-layout { padding-top: 22px; }
.container.focus-layout #timer { font-size: min(5.6em, 16vw); margin: 22px 0 14px; }
.container.focus-layout .avatar-wrapper { width: 72px; height: 72px; margin-bottom: 10px; }
.container.focus-layout .avatar-inner { width: 60px; height: 60px; font-size: 28px; }
.container.focus-layout .progress-text { width: 36px; height: 36px; font-size: 10px; top: -4px; right: -8px; }
.container.focus-layout #focus-info { display: flex; }
#odak-serit #focus-info { flex: 0 1 auto; min-width: 0; }
.container.focus-layout.analysis-mode #timer { color: #ffd54f; text-shadow: 0 0 20px rgba(255, 193, 7, 0.45); }
/* ——— KONU SATIRI (24 Ağu 2026) ———
Eskiden "ders · konu — tür · kitap" yazan tek satırdı; uzun olduğu
için SAĞA SOLA KAYIYORDU (kayma kaldırıldı, .fi-kayar söküldü).
Artık üç parça: konu adı · (şartlı) tür · iki araç ikonu.
Çerçevesiz durur — sahneyi süreye bırakır. */
/* 29 Ağu: satır ekranın üstünden ODAK ŞERİDİNE taşındı; artık kendi
kabı yok, şeridin ortasında yaşıyor. */
#focus-info {
display: none; align-items: center; gap: 7px;
font-size: 0.72em; color: #7f8ea8;
background: none; border: 0; border-radius: 0;
padding: 0; margin: 0; min-width: 0; flex: 0 1 auto;
transition: opacity 0.6s ease;
}
.container.focus-layout #focus-info { display: flex; }
/* ── UZUN AD: ŞERİT UYANIKKEN BİR TUR AKAR, SONRA DURUR ──────────
24 Ağu'da kayan yazı SÖKÜLMÜŞTÜ (sürekli hareket odağı yiyordu).
29 Ağu'da kullanıcı geri istedi ama koşullu: kayma yalnız şerit
UYANIKKEN çalışır. Şerit dokunulmayınca 4 sn'de soluyor ve
`controls-dim` gelince bu kural düşüyor → yazı başa döner, DURUR.
Yani çalışan öğrencinin ekranında kıpırdayan bir şey kalmıyor;
"Kyron çalışma sürerken kıpırdamaz" ilkesi korunuyor.
`.kayar` sınıfını JS takar — YALNIZ ad kaba sığmıyorsa. */
#focus-info .fi-ad {
color: #a9b8d0; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
min-width: 0; max-width: 42vw;
}
/* KİP KELİMESİ (29 Ağu): deneme ve analizde şeridin ikinci yarısı.
Tür hapının yerini tutar ama DÜĞMEYE BENZEMEZ — çerçevesi ve oku
yok, çünkü dokunulacak bir şey değil (ölü düğme tuzağı). Küçük
harf: bir başlık değil, durumun adı. */
#focus-info .fi-kip {
font-size: 0.9em; font-weight: 600; color: #7f8ea8;
letter-spacing: .02em; white-space: nowrap; flex: none;
}
#focus-info .fi-kip.analiz { color: #ffd54f; }
/* 🔴 2 Eyl · KAYAN OLAN İÇ METİN, KUTU DEĞİL. Eskiden `.fi-ad`'ın
kendisi kayıyordu; transform kutuyu da taşıdığı için uzun ad
şeridin dışına çıkıyor, sağdaki hap ekrandan taşıyordu. */
#focus-info .fi-ad .fi-ic { display: inline-block; white-space: nowrap; }
/* ═══ KESİK AD ARTIK SÖNEREK BİTER (3 Eyl, ekran denetimi) ════════
Kayan yazıda üç nokta bilerek kaldırılıyor (nokta kayan metnin
üstünde durur, kirletir). Ama animasyon bittikten sonra da clip
kalıyordu; ekranda "Tarih ve Zaman (Tarih Bilimine" diye ortadan
kesilmiş, parantezi açık kalmış bir cümle duruyordu.
Üç noktanın yerine SAĞ KENARDA SÖNME kondu: yazı kaybolarak
biter, yani "devamı var" der. Hem kayarken hem dururken doğru. */
.container.focus-layout:not(.controls-dim) #focus-info .fi-ad.kayar {
text-overflow: clip;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
}
.container.focus-layout:not(.controls-dim) #focus-info .fi-ad.kayar .fi-ic {
animation: fi-kay 9s ease-in-out 1 both;
}
@keyframes fi-kay {
0%, 14% { transform: translateX(0); }
48%, 60% { transform: translateX(var(--fi-kay, 0px)); }
96%, 100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.container.focus-layout:not(.controls-dim) #focus-info .fi-ad.kayar {
text-overflow: ellipsis;
}
.container.focus-layout:not(.controls-dim) #focus-info .fi-ad.kayar .fi-ic {
animation: none;
}
}
/* Araçlar: kaynak (altın — bu üründe kitaplık rengi) ve not (gri).
Sönükse dokunulmaz: analizde kaynak, deneme akarken not, molada ikisi. */
/* ⚠️ İKİ KAP (29 Ağu): ikonlar şeridin DIŞINA taşındı (#odak-araclar).
Seçiciler yalnız #focus-info diyordu; taşınınca butonlar stilsiz kaldı ve
2 piksele ezildi — ekranda duruyor ama dokunulamaz hâle geliyordu.
Ölçüm prova sayfasında yakalandı. */
/* 🔑 ARALIK 6 DEĞİL 22 (7 Eyl): her düğmenin görünmez payı 11 px dışa
taşıyor; 6 px aralıkta iki komşunun payı birbirini yiyordu. */
#focus-info .fi-arac, #odak-araclar .fi-arac { display: inline-flex; gap: 22px; flex: none; }
#focus-info .fi-d, #odak-araclar .fi-d {
width: 24px; height: 24px; padding: 0; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.03);
color: #8fa2bf; cursor: pointer; transition: background .2s ease, border-color .2s ease;
}
#focus-info .fi-d svg, #odak-araclar .fi-d svg { width: 15px; height: 15px; display: block; }
#focus-info .fi-d.kaynak, #odak-araclar .fi-d.kaynak { color: #d7bd8c; border-color: rgba(212,175,106,.26); }
#focus-info .fi-d:active, #odak-araclar .fi-d:active { background: rgba(255,255,255,.09); }
#focus-info .fi-d:disabled, #odak-araclar .fi-d:disabled { opacity: .3; pointer-events: none; }
/* ═══ KAYNAK NABZI (5 Eylül 2026, kullanıcı kararı) ═══════════════════════
Kaynağı kayıtlı olmayan ya da ölçüsü eksik derste ikon DURAKLAMADA bir kez
nabız atar. Altın tondan çıkmaz — 🔴 kırmızı ve 🟢 yeşil oda paletinin
kendi anlamlarını taşır, burada kullanılmaz.
🔒 Yalnız ikon büyür; şerit ve düğmeler kıpırdamaz (Kyron'un "çalışma
sürerken hareket yok" kuralının kardeşi — zaten duraklamadayız). */
#odak-araclar .fi-d.kaynak.nabiz {
animation: ss-kaynak-nabzi 1.6s ease-in-out infinite;
}
@keyframes ss-kaynak-nabzi {
0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 106, 0); transform: scale(1);
border-color: rgba(212, 175, 106, 0.26); }
50% { box-shadow: 0 0 0 7px rgba(212, 175, 106, 0.12); transform: scale(1.12);
border-color: rgba(212, 175, 106, 0.85); }
}
@media (prefers-reduced-motion: reduce) {
/* Hareketi kısan telefonda nabız ATMAZ ama ikon yine ayırt edilir:
kural düşmez, biçimi değişir. */
#odak-araclar .fi-d.kaynak.nabiz { animation: none;
border-color: rgba(212, 175, 106, 0.85); background: rgba(212, 175, 106, 0.12); }
}
/* İpucu — bir kez öğretir, sonra susar. Şeridin altında, ortada. */
#kaynak-ipucu {
margin: 8px auto 0; max-width: 320px; padding: 8px 12px; border-radius: 12px;
font-size: 0.78em; line-height: 1.45; text-align: center; color: #e8d5a8;
background: rgba(212, 175, 106, 0.09); border: 1px solid rgba(212, 175, 106, 0.3);
}
#kaynak-ipucu[hidden] { display: none !important; }
/* Kontroller sönerken ipucu da söner (şeridin nefesiyle aynı defter). */
.container.focus-layout.controls-dim #kaynak-ipucu { opacity: .3; }
/* ═══ GÖZ-İZİ ŞERİTTEN KALKTI (3 Eyl, kullanıcı) ═════════════════
Analiz fısıltısının başında iki altın çubuk (Kyron'un göz izi)
duruyordu. Kullanıcı: "konunun yanında iki nokta var, onu ilgili
tüm yerlerde kaldır — bu, yalnız kronometre kadranında olmalı."
TEK RUH kuralının en temiz hâli: gözler ekranda BİR yerde yaşar,
o da kadranın merkezi. Kip artık yalnız RENKLE konuşuyor. */
#focus-info.analysis .fi-ad { color: #ffd54f; }
/* Analiz bekleyenler listesi taşıyorsa alt kenarı söner: "devamı var"
demenin en sessiz yolu (3 Eyl · ekran denetimi). */
#pending-list.kaydirilir {
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
}
/* ═══ MOLA MUHASEBESİ SEÇİM EKRANINDAN KALKTI (3 Eyl, kullanıcı) ═══
"Mola bilgisine de gerek yok — sadece mola tıkladığında görünmeli."
Doğru yer zaten vardı: molaya basınca çıkan kart, hakkı ve süreyi
çok daha ayrıntılı söylüyor. Seçim ekranı öğrenciye "bugün fazladan
3 mola verdin" diye başlamamalı; oraya oturan öğrenci başlamaya
geldi, muhasebeye değil.
🔑 Öğe DURUYOR ve JS onu beslemeye devam ediyor — sayı ölmedi, yalnız
ekrandan çekildi; geri istenirse tek satırlık iş. */
#daily-breaks { display: none; font-size: 0.78em; color: #64748b; margin: 4px 0 0; min-height: 1.2em; transition: color 0.3s ease; }
#daily-breaks.warn { color: #ffd54f; }
/* ═══ MOLA SATIRI KIRMIZI DEĞİL (3 Eyl, ekran denetimi) ═══════════
Ekrandaki TEK kırmızı buydu ve söylediği şey bir tehlike değil,
bir muhasebeydi: "bugün bir mola fazladan verdin". Kırmızı, oda
dilinde zaten yasaklı; burada da yanlış korku üretiyordu.
Kehribara indi — uyarır ama bağırmaz. */
#daily-breaks.over { color: #f0a35e; }
@keyframes flash-line { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
#daily-breaks.flash { animation: flash-line 0.7s ease 2; }
/* ——— Mola fısıltısı (Kyron dili · sükûnet) ———
Kutu ve emoji kalktı: mola bir uyarı değil, ekranın sana söylediği
sakin bir cümle. İşareti metnin başında CSS çiziyor — ✅/⚠️ yerine
göz grameri: iyi haber HİLAL (bayram gözü), hak aşımı İZ (Kyron'un
kendisi söylüyor). Metni JS her molada yeniden yazdığı için işaret
::before olmak zorunda. */
#pause-hint { display: none; font-size: 0.8em; border-radius: 0; padding: 2px 12px;
margin: -2px auto 12px; line-height: 1.5; max-width: 40ch; background: none; border: 0; }
#pause-hint.ok { display: block; color: #8fa2bf; }
#pause-hint.warn { display: block; color: #d9bb6a; }
/* 3 Eyl: `.warn` buradan çıktı — uyarı satırının başındaki göz-izi de
kalktı (gerekçe #focus-info.analysis'in üstünde). Hilal duruyor:
o Kyron'un gözü değil, "rahat ol" işareti. */
#pause-hint.ok::before {
content: ""; display: inline-block; vertical-align: -1px; margin-right: 7px;
width: 13px; height: 9px;
}
/* hilal — "mola hakkın var, rahat ol" */
#pause-hint.ok::before {
background-color: #7BD8A0;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 13'%3E%3Cpath d='M2 11 Q11 -3 20 11' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 13'%3E%3Cpath d='M2 11 Q11 -3 20 11' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* (göz-izi 3 Eyl'de söküldü — gözler yalnız kadranda yaşar) */
/* ═══ MOLAYA SÜRE KOY — sarkan satır (27 Ağu 2026) ═══════════════════
Ritim kurmamış öğrencinin molasının SONU YOKTU: duraklat → sessizlik →
dönünce "n dakika mola verdin". Kimse "döndün mü?" demiyordu.
Bu satır pause-hint'in ALTINA SARKAR (kullanıcı kararı 27 Ağu):
ince bir iz aşağı iner, ucunda üç rakam durur. Dokunulan rakam
molanın sonu olur. DOKUNMAK ZORUNLU DEĞİL — dokunulmazsa bugünkü
davranış aynen sürer, mola açık uçlu kalır. */
#mola-sure { position: relative; max-width: min(320px, 92%); margin: 6px auto 12px; }
#mola-sure[hidden] { display: none !important; }
/* Sarkan iz (.ms-ip) 29 Ağu'da SÖKÜLDÜ: bağlandığı cümle kutunun
içine taşınmıştı, ip boşluktan sarkıyordu. Üst boşluk da kalktı. */
#mola-sure .ms-govde { border: 1px solid rgba(245,214,123,.26);
background: rgba(245,214,123,.055); border-radius: 15px; padding: 9px 12px 10px;
text-align: center; }
/* ═══ TEK KUTU, ÜÇ SATIR (29 Ağu) ═══════════════════════════════
soru · rakamlar · tek not. Not satırı DURUMA GÖRE renk değiştirir:
hakkın varsa sakin gri (günlük döküm), hak üstündeyse kehribar
(puan uyarısı). Öğrencinin o an sorduğu soru tek: bu mola bana
neye mal olur? Cevap tek satırda. */
#mola-sure .ms-not { display: block; font-size: 0.64em; color: #7f93b3;
margin-top: 9px; line-height: 1.45; }
#mola-sure .ms-not:empty { display: none; }
#mola-sure .ms-not.uyari { color: #E9C88A; }
#mola-sure.sayiyor .ms-not { display: none; }
#mola-sure .ms-soru { display: block; font-size: 0.72em; color: #9fb3d1;
margin-bottom: 8px; line-height: 1.4; }
#mola-sure .ms-secim { display: flex; gap: 7px; justify-content: center; }
/* 🔒 44 px kuralı: dokunmatik hedef küçültülmez. */
#mola-sure .ms-dk { flex: 0 0 auto; min-width: 52px; min-height: 44px; padding: 4px 10px;
border-radius: 13px; cursor: pointer; font-family: inherit;
background: rgba(255,255,255,.05); border: 1px solid rgba(245,214,123,.3);
color: #e8d9a8; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 1px; transition: background .2s ease, color .2s ease,
border-color .2s ease; }
#mola-sure .ms-dk b { font-size: 0.86em; font-weight: 700; line-height: 1;
font-variant-numeric: tabular-nums; }
#mola-sure .ms-dk small { font-size: 0.62em; font-weight: 500; opacity: .6; letter-spacing: .04em; }
#mola-sure .ms-dk:hover { background: rgba(245,214,123,.16); }
#mola-sure .ms-dk[aria-pressed="true"] { background: #F5D67B; color: #12192B; border-color: #F5D67B; }
#mola-sure .ms-dk[aria-pressed="true"] small { opacity: .72; }
/* GERİ SAYIM HÂLİ: üç rakam gider, tek satır kalır. */
#mola-sure.sayiyor .ms-govde { display: flex; align-items: center; gap: 9px;
justify-content: center; padding: 8px 12px; border-radius: 999px; }
#mola-sure.sayiyor .ms-soru { margin: 0; font-size: 0.74em; color: #c9d8ec; }
#mola-sure .ms-kalan { font-size: 0.86em; font-weight: 700; color: #F5D67B;
font-variant-numeric: tabular-nums; letter-spacing: .5px; }
/* ✕ düğmesinin (.ms-kaldir) stilleri 29 Ağu'da SİLİNDİ — düğme aynı
gün kaldırılmıştı: molayı bitiren zaten DEVAM ET. */
#mola-sure:not(.sayiyor) .ms-kalan { display: none; }
#mola-sure.sayiyor .ms-secim { display: none; }
/* ═══ MOLA BİTTİ — EKRANIN IŞIĞI DÖNER (27 Ağu 2026, kullanıcı kararı) ═══
iPhone'da Safari titreşimi HİÇ desteklemiyor; mola bitişinin tek
taşıyıcısı ekrandı ve ekran da yalnız bir kart açıyordu. Artık
EKRANIN KENDİSİ konuşuyor: gecenin lacivertine kehribar bir ışık
düşer. Hiçbir şey HAREKET ETMEZ — yalnız renk değişir, yani
"Kyron çalışma sürerken kıpırdamaz" kuralı bozulmaz.
🔴 SÖNMEZ: bir kez yanıp bitmez, öğrenci DEVAM ET'e basana kadar
yanıp söner (kullanıcı kararı). Ritim: bir GÜÇLÜ nefes, ardından üç
kısık soluk, sonra yine güçlü — mutfaktan dönen öğrenci dakikalar
sonra baktığında da ekranın onu beklediğini görür, ama ekran bu
süre boyunca alarma dönüşmez.
mix-blend-mode: screen → ışık yalnız EKLENİR; yazının üstünü
örtmez, karanlık yerleri ısıtır. Perde tıklamayı da yutmaz. */
#mola-perde { position: fixed; inset: 0; z-index: 9000; pointer-events: none;
opacity: 0; mix-blend-mode: screen;
background: radial-gradient(circle at 50% 42%, rgba(245,214,123,.42),
rgba(245,214,123,.16) 46%, rgba(201,169,79,.05) 70%, transparent 85%); }
#mola-perde.yaniyor { animation: mola-perde-nefes 13s ease-in-out infinite; }
@keyframes mola-perde-nefes {
0%, 100% { opacity: .16; }
6% { opacity: .95; } /* güçlü nefes */
14% { opacity: .16; }
26% { opacity: .40; } /* kısık soluklar */
38% { opacity: .16; }
50% { opacity: .40; }
62% { opacity: .16; }
74% { opacity: .40; }
86% { opacity: .16; }
}
/* Hareket azaltma: nefes yok ama HABER VAR — sabit, kısık bir ışık kalır. */
@media (prefers-reduced-motion: reduce) {
#mola-perde.yaniyor { animation: none; opacity: .34; }
#mola-sure .ms-dk { transition: none; }
}
#discipline-badge { display: none; align-items: center; gap: 6px; cursor: pointer; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); border-radius: 10px; padding: 8px 12px; font-size: 0.8em; font-weight: 600; letter-spacing: 0.5px; backdrop-filter: blur(10px); color: #cbd5e1; white-space: nowrap; }
/* PC/tablet: rozet küçücük kalmasın */
@media (min-width: 768px) {
#discipline-badge { font-size: 1.05em; padding: 10px 18px; border-radius: 12px; gap: 8px; }
}
#discipline-badge.good { color: #69f0ae; border-color: rgba(105,240,174,0.4); }
#discipline-badge.mid { color: #ffd54f; border-color: rgba(255,193,7,0.4); }
#discipline-badge.low { color: #ff8a80; border-color: rgba(244,67,54,0.4); }
.controls { display: flex; justify-content: center; gap: 12px; margin: 2px 0 4px; }
/* Ana düğmenin bekleyişi — altın hâleyle, Kyron'un nefes temposunda (4,5 sn).
Eskiden 2 sn'lik camgöbeği nabızdı; ekranda ondan hızlı atan başka şey
yoktu ve sakin bir sayfada acele ettiriyordu. */
@keyframes pulse-btn {
0% { box-shadow: 0 0 0 0 rgba(245, 214, 123, 0.38); }
70% { box-shadow: 0 0 0 12px rgba(245, 214, 123, 0); }
100% { box-shadow: 0 0 0 0 rgba(245, 214, 123, 0); }
}
button {
flex: 1; padding: 16px 0; border: none; border-radius: 14px;
cursor: pointer; font-size: 0.85em; font-weight: 700; letter-spacing: 1px;
background: rgba(255,255,255,0.08); color: white; border: 1px solid var(--glass-border);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
button:not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); background: rgba(255,255,255,0.15); }
button:not(:disabled):active { transform: translateY(0); }
/* ═══ ANA DÜĞME: KYRON'UN KÜRESİ ═══
Gradyan kyron.css'teki .kyron-kure ile BİREBİR aynı — logo, karakter ve
ana düğme tek ışık olsun diye. "Her dokunuş Kyron'a dokunuş": başlamak
artık camgöbeği bir eylem değil, ona uzanmak. Yazı gece rengi, yani
altın kürenin üstündeki gözlerle aynı renk. */
#btn-start {
background: radial-gradient(circle at 50% 32%, #FBE7A8 0%, #F5D67B 48%, #C9A94F 100%);
color: #0B1220; border: none;
}
#btn-start:not(:disabled) { animation: pulse-btn 4.5s infinite; }
#btn-start:not(:disabled):hover {
animation: none; transform: translateY(-3px) scale(1.02);
/* background BİLEREK tekrar yazılıyor: genel `button:hover` kuralı
beyaz bir zemin basıp küreyi siliyordu (dokunmatikte fark edilmiyordu). */
background: radial-gradient(circle at 50% 30%, #FDEFC4 0%, #F7DC92 48%, #D2B45C 100%);
box-shadow: 0 10px 25px rgba(245, 214, 123, 0.35);
}
/* Analiz kipinde küre kehribara döner — "ANALİZE BAŞLA" da o ışığın parçası.
.analiz-secili seçim ekranı için (enterAnalysisUI), .analysis-mode blok
başladıktan sonrası için (enterFocusLayout). */
.container.analiz-secili #btn-start,
.container.analysis-mode #btn-start {
background: radial-gradient(circle at 50% 32%, #FFE9A8 0%, #FFD54F 48%, #D9A93B 100%);
}
.container.analiz-secili #btn-start:not(:disabled),
.container.analysis-mode #btn-start:not(:disabled) { animation: pulse-btn-analiz 4.5s infinite; }
@keyframes pulse-btn-analiz {
0% { box-shadow: 0 0 0 0 rgba(255, 213, 79, 0.38); }
70% { box-shadow: 0 0 0 12px rgba(255, 213, 79, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 213, 79, 0); }
}
/* BİTİR kırmızıydı — oysa bitirmek tehlikeli bir iş değil, çalışmanın
KAYDEDİLDİĞİ an. Kırmızı burada yanlış bir korku üretiyordu; sessiz
ikincil düğmeye indi. (Gerçekten geri dönülmez işler — masadan ayrılma
gibi — kendi uyarı rengini korur.) */
#btn-end { background: rgba(255, 255, 255, 0.04); border-color: var(--glass-border); color: #8fa2bf; }
#btn-end:not(:disabled):hover { background: rgba(255, 255, 255, 0.1); color: #cbd5e1; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); }
button:disabled { cursor: not-allowed; opacity: 0.3; transform: none; animation: none; box-shadow: none; }
.inputs { display: none; margin-top: 15px; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
* { scrollbar-width: none; -ms-overflow-style: none; }
.grid-inputs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.input-group label { font-size: 0.75em; font-weight: 700; color: #94a3b8; display: block; margin-bottom: 8px; text-transform: uppercase; text-align: center; letter-spacing: 1px; }
#loading-overlay { position: fixed; top:0; left:0; width: 100%; height:100%; background: #0f172a; display: flex; justify-content: center; align-items: center; z-index: 1000; flex-direction: column; gap: 15px;}
.spinner { width: 40px; height: 40px; border: 4px solid rgba(255,255,255,0.1); border-top: 4px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; }
#completed-overlay, #closed-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(10px); color: white; z-index: 9999; justify-content: center; align-items: center; text-align: center; flex-direction: column; padding: 20px; box-sizing: border-box; overflow-y: auto; }
/* Tüm açılır ekranlar STANDART: arkası tam bulanık, kart ortada kabartma.
margin:auto + overlay scroll = uzun içerikte bile kart kesilmez, ortalama bozulmaz. */
/* ═══ PERDE EKRANI SİLMEZ, ÖNÜNE GEÇER (3 Eyl, ekran denetimi) ═══
Perde %92 koyuluk + 18 px bulanıklıktı; yani arkadaki ekran tamamen
yok oluyordu. Açılan kart boşlukta asılı bir kutu gibi duruyor,
üstünde kocaman siyah bir alan kalıyordu — "alttan çıkan çekmece"
hissi kayboluyordu. Koyuluk indi; bulanıklık aynı kaldı, yani
arkadaki yazı yine okunmaz, ama nerede olduğun görünür. */
.modal-overlay {
display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(15, 23, 42, 0.74); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
z-index: 10000; justify-content: center; align-items: center; padding: 20px;
box-sizing: border-box; overflow-y: auto;
}
.modal-box {
background: #1e293b; padding: 25px; border-radius: 20px; margin: auto;
border: 1px solid var(--glass-border); text-align: center; max-width: 320px; width: 100%;
box-sizing: border-box;
box-shadow: 0 18px 50px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.modal-box h3 { margin: 0 0 10px 0; font-size: 1.3em; }
.modal-box p { color: #cbd5e1; font-size: 0.95em; margin-bottom: 25px; line-height: 1.4; }
.modal-btns { display: flex; gap: 10px; }
.modal-btns button { padding: 12px; }
/* Tablet/PC: veri-giriş modalını biraz küçült ve tam ortala (telefon DEĞİŞMEZ). */
@media (min-width: 768px) {
#data-inputs .modal-box { max-width: 360px; padding: 18px 20px; }
#data-inputs #modal-timer-display { font-size: 1.2em; }
#data-inputs #stats-grid .pk-num { font-size: 1em; }
}
/* Kısa ekran / klavye açıkken: veri modalı sıkışır, KAYDET her zaman görünür kalır */
@media (max-height: 720px) {
#data-inputs .modal-box { padding: 14px 16px; }
#data-inputs .kayit-kart { margin-bottom: 12px; }
#data-inputs #stats-grid .pk-num { font-size: 1em; }
#data-inputs #modal-timer-display { font-size: 1.1em; }
#data-inputs #btn-submit-next { padding: 13px 0; }
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@media screen and (orientation: landscape) and (max-height: 600px) {
.container:not(.mini-mode) {
max-width: 95%; display: grid; grid-template-columns: 1fr 1fr;
gap: 10px; padding: 15px; align-items: center; position: relative;
}
.container:not(.mini-mode) #greeting, .container:not(.mini-mode) .subtitle { display: none !important; }
/* Yatay ekranda ızgara öğesi artık kutuların KENDİSİ değil, onları
saran #secim-alani (D4 sarmalayıcısı). Kutular sarmalayıcının
içinde alt alta akar; kart da tam genişlik alır. */
.container:not(.mini-mode) #secim-alani { grid-column: 1 / 3; }
.container:not(.mini-mode) #dropdown-wrapper-target,
.container:not(.mini-mode) #dropdown-wrapper-type { margin: 0 0 8px; }
.container:not(.mini-mode) #timer { grid-column: 1 / 3; grid-row: 2; font-size: 6em; margin: 0; text-align: center; position: relative; }
.container:not(.mini-mode) .avatar-wrapper {
display: block !important; position: absolute; right: 10%; top: 45%;
transform: translateY(-50%); width: 60px; height: 60px; margin: 0; z-index: 5;
}
.container:not(.mini-mode) .avatar-inner { width: 50px; height: 50px; font-size: 24px; }
.container:not(.mini-mode) .progress-text { width: 30px; height: 30px; font-size: 10px; top: -5px; right: -5px; }
.container:not(.mini-mode) .controls { grid-column: 1 / 3; grid-row: 3; margin: 0; }
.container:not(.mini-mode) .inputs { grid-column: 1 / 3; grid-row: 4; margin-top: 5px; }
.container:not(.mini-mode) .grid-inputs { margin-bottom: 10px; }
.container:not(.mini-mode) #focus-info,
.container:not(.mini-mode) #daily-breaks,
.container:not(.mini-mode) #pause-hint,
.container:not(.mini-mode) #pending-analysis-box,
.container:not(.mini-mode) #btn-day-end { grid-column: 1 / 3; }
}
/* ================= YENİ TASARIM · FAZ 1 (görsel kabuk) ================= */
/* Kyron artık kyron.css'te tanımlı (gözler, kürel gövde, ritüeller).
Burada yalnız kadranın içindeki ölçüsü ayarlanır. */
.kmark { display: block; }
/* Alt navigasyon barı — üstteki rozet/butonların yerini alır */
/* Alt bar: yüzen kapsül (native gibi) — aktif sekme genişleyen vurgulu pill */
.navbar {
position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%); z-index: 95;
display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 32px; box-sizing: border-box;
background: rgba(18, 24, 40, 0.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6);
}
.nav-i {
display: flex; flex-direction: row; align-items: center; gap: 0; cursor: pointer;
color: #8595b0; font-size: 12px; font-weight: 600; letter-spacing: 0.2px;
background: none; border: none; padding: 11px 13px; flex: none; border-radius: 24px; text-transform: none;
transition: background 0.25s ease, color 0.25s ease, padding 0.25s ease;
}
.nav-i:hover { color: #cbd5e1; transform: none; box-shadow: none; }
.nav-i svg { width: 22px; height: 22px; flex: none; }
.nav-i .nav-lbl { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
transition: max-width 0.25s ease, opacity 0.2s ease, margin 0.25s ease; }
.nav-i.active { color: var(--success); background: rgba(0, 242, 254, 0.14); padding: 11px 15px; }
.nav-i.active .nav-lbl { max-width: 110px; opacity: 1; margin-left: 7px; }
/* Disiplin nav içinde: eski üst-rozet kutu stilleri sıfırlanır; renk sınıfları korunur */
#discipline-badge.nav-i { flex-direction: row; align-items: center; gap: 0; background: none; border: none; box-shadow: none; }
#discipline-badge.nav-i.active { background: rgba(0, 242, 254, 0.14); }
#discipline-badge.good { color: #69f0ae; }
#discipline-badge.mid { color: #ffd54f; }
#discipline-badge.low { color: #ff8a80; }
#discipline-badge #disc-badge-score { font-weight: 700; }
.container { margin-bottom: 84px; }
body.mini .navbar { display: none; }
/* Bir seçim listesi açıkken alt bar çekilir (gerekçe kronometre.js →
listeAcikIsaretle): bar listenin üstünü örtüyordu. */
body.liste-acik .navbar { opacity: 0; pointer-events: none; }
.navbar { transition: opacity .18s ease; }
/* Yuvarlak kontroller: tek büyük düğme BAŞLAT↔DURAKLAT + yanda BİTİR */
.controls { align-items: center; gap: 28px; }
.primary-slot { position: relative; display: grid; }
.primary-slot > button { grid-area: 1 / 1; }
.controls button {
flex: none; border-radius: 50%; padding: 6px; letter-spacing: 0.5px;
display: flex; align-items: center; justify-content: center; text-align: center;
}
#btn-start, #btn-pause { width: 98px; height: 98px; font-size: 0.74em; line-height: 1.18; }
#btn-end { width: 68px; height: 68px; font-size: 0.7em; }
/* Toggle: koşarken DURAKLAT görünür (btn-pause aktif), yoksa BAŞLAT/DEVAM (btn-start) */
.primary-slot #btn-pause:disabled { display: none; }
.primary-slot #btn-pause:not(:disabled) ~ #btn-start { display: none; }
/* ——— Duraklat düğmesindeki Kyron izi ———
Duraklat işareti (⏸) zaten iki dik çubuktur; yani Kyron'un gözleriyle
aynı şeydir. Düğmenin üstüne o izi koyuyoruz: yazının üstünde altın
iki çubuk. TEK RUH KURALI — canlı Kyron her an merkezdekidir; buradaki
onun işaretidir, yalnız dokunulunca kırpar (.iz-kirp).
Neden ::before? Buton metni JS'te yedi ayrı yerde innerText ile
yazılıyor ve her yazım çocukları siler. Sözde-eleman o yazımlardan
etkilenmez — iz asla kaybolmaz. */
/* ═══ DURAKLAT'TAKİ KYRON İZİ SÖKÜLDÜ (24 Ağu akşamı, kullanıcı) ═══
Düğmenin üstünde altın iki çubuk vardı — Kyron'un işareti. Kullanıcı
telefonda gördü: "duraklatta da 2 göz var, onu kaldıralım; sadece
kronometremizde göz olması yeterli." TEK RUH kuralı zaten bunu
söylüyordu, iz onu zayıflatıyormuş. Düğme yalnız yazı.
`kyronIzKirp()` çağrıları duruyor ama düğmede kırpacak iz yok —
kart izleri de bu turda söküldü (kart kalktı). */
@keyframes kyron-iz-kirpma { 50% { transform: scaleY(.1); } }
/* 2 nokta pager (kaydır → mini) */
/* 2 nokta pager: tıklanabilir (PC'de tık, telefonda dokunuş) — görünür nokta ::before, hit-alanı geniş */
.pager { display: flex; justify-content: center; gap: 4px; margin-top: 10px; }
.pager i { cursor: pointer; padding: 9px 7px; display: flex; align-items: center; justify-content: center; }
.pager i::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.20); transition: 0.3s; }
body:not(.mini) .pager i:nth-child(1)::before,
body.mini .pager i:nth-child(2)::before { background: var(--success); width: 20px; border-radius: 5px; }
.pager i:hover::before { background: rgba(255, 255, 255, 0.5); }
.container.mini-mode .pager { margin-top: 22px; }
/* ═══ MİNİ KİPTE HAZIR OLMAYAN BAŞLAT ALTIN GÖRÜNMEZ ══════════════
(3 Eyl, ekran denetimi) Ders seçilmemişken düğme yine altın küre
çiziliyor, üstüne %30 saydamlık biniyordu: mavi zeminin üstünde
çamur/haki bir top. Ne altın ne sönük — "bozuk" gibi duruyordu.
Hazır olmayan düğme artık altın taklidi yapmaz, sessiz bir halka
olur; altın yalnız gerçekten başlanabildiğinde yanar. */
.container.mini-mode #btn-start:disabled {
background: rgba(255, 255, 255, .05); color: #8fa2bf;
border: 1px solid var(--glass-border); opacity: .6;
}
/* ================= FAZ 2 · Kadran A (tik halkası + yay + ibre) ================= */
.dial { position: relative; width: min(204px, 55vw); aspect-ratio: 1 / 1; margin: 4px auto 14px; }
/* ═══ SEÇİM EKRANINDA KADRAN DAHA KÜÇÜK (24 Ağu gecesi) ═══════════
Orada kadranın içinde SAYI yok (D2 kuralı: süre BAŞLAT'la doğar) —
Kyron'un evi ve altın yay duruyor. 204 px'lik çember, altındaki
hedef listesini ekranın dışına itiyordu. Çalışma başlayınca
(.focus-layout) yine büyüyor: orada kahraman süredir. */
/* ═══ KADRAN BÜYÜDÜ (25 Ağu, kullanıcı kararı) ═══════════════════
152 px küçük kalıyordu: ekranın kahramanı Kyron'un kadranı ama göz
önce listeye kayıyordu. Üç ölçünün EN KÜÇÜĞÜ alınır:
· 214 px → tavan (dev telefonlarda kadran şişmesin)
· 52vw → dar telefonlarda genişliğin yarısını geçmesin
· 30vh → KISA telefonlarda (SE gibi) altındaki liste ekran
dışına itilmesin — yükseklik de söz sahibi.
Küre ve kıvrımlı yazı yüzdeyle bağlı olduğu için kendiliğinden
büyür; hiçbir ölçü elle güncellenmez. */
.container:not(.focus-layout):not(.mini-mode) .dial { width: min(214px, 52vw, 30vh); margin: 0 auto 8px; }
/* ═══ KADRAN KAPISI — "KÜRE EVE DÖNER" (25 Ağu, kullanıcı kararı) ═══
Seçim ekranının en alt sırası (BİTİR + BAŞLAT) komple kalktı:
· BİTİR orada zaten pasifti — bitirilecek iş yok.
· BAŞLAT ise ZATEN Kyron'un küresiydi; gradyanı .kyron-kure ile
birebir aynı ("her dokunuş Kyron'a dokunuş").
Küre aşağıdan kalkıp kadranın merkezine, gözlerin altına yerleşti.
Kazanç ~90 px — sıkıştırma turunun devamı.
HAREKET KURALI (Kyron): küre SÜREKLİ kıpırdamaz. Eski düğmedeki
sonsuz nabız (pulse-btn) buraya TAŞINMADI; küre yalnız eşikte
bir kez doğar (kk-dogus) ve sonra durur. Duran ama davet eden işaret.
Kapı kapalıyken (hedef/tür eksik) küre HİÇ belirmez ve gözler bir
tık kısılır: "henüz değil". Dokunuş yine de boşa gitmez —
siradakiniGoster() eksik kutuyu ışıldatır (bkz. kronometre.js). */
#kadran-kapi {
/* z-index 3: yayın ÜSTÜNDE ama Kyron'un ALTINDA (.kyron-merkez z-index 4).
Gözler kürenin üstüne oturur; dokunuşu yine kapı alır çünkü seçim
ekranında .dial-core pointer-events: none. */
position: absolute; inset: 0; z-index: 3; padding: 0;
background: none; border: none; border-radius: 50%;
cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* Çalışma/duraklama düzeninde kapı yok: orada merkez SÜRENİN.
(Alt sıra da o anda geri geliyor — BİTİR + DURAKLAT.) */
.container.focus-layout #kadran-kapi { display: none; }
/* Kapalı kadranın fısıltısı — sönük, tek satır, kadranın ALTINDA. */
#kadran-fisilti {
text-align: center; font-size: .74em; color: #5d6b86;
letter-spacing: .3px; margin: -6px 0 12px;
}
#kadran-fisilti[hidden] { display: none; }
.container.focus-layout #kadran-fisilti { display: none; }
#kadran-kapi .kk-kure {
/* %66: kadranın altın yayı küreyi çepeçevre GÖRÜNÜR bırakır —
küre yayı yutarsa kadran "sarı bir top" olur, kimlik kaybolur. */
position: absolute; left: 50%; top: 50%; width: 66%; aspect-ratio: 1 / 1;
transform: translate(-50%, -50%) scale(.82); border-radius: 50%;
background: radial-gradient(circle at 50% 32%, #FBE7A8 0%, #F5D67B 48%, #C9A94F 100%);
box-shadow: 0 0 22px rgba(245, 214, 123, .38);
opacity: 0; pointer-events: none;
transition: opacity .45s ease, transform .45s cubic-bezier(.3, 1.2, .4, 1);
}
/* Yazı kürenin ALT yarısında: gözler üstte, ad altta. Üç yüzü de taşır
(BAŞLAT · DEVAM ET · ANALİZE BAŞLA) — metni kronometre.js #btn-start'tan
okur, yani tek kaynak. İki satırlık yüz için white-space: pre-line. */
/* Yazı kürenin ALT KIVRIMINDA — düz satır değil, yay. Kadranın yayı,
küre ve yazı aynı merkezi paylaşır; ekran tek bir kıvrımdan konuşur.
Ölçüler viewBox biriminde (100 = kadranın çapı), yani kadran küçülünce
yazı da onunla küçülür — hiçbir telefonda taşmaz. */
#kadran-kapi .kk-yazi {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0; pointer-events: none; transition: opacity .45s ease .12s;
overflow: visible;
}
#kadran-kapi .kk-yazi text {
fill: #0B1220; font-family: inherit; font-size: 7px; font-weight: 700;
letter-spacing: 2px;
}
/* Uzun yüz (ANALİZE BAŞLA) yayı taşırmasın: bir kademe kısılır. */
#kadran-kapi .kk-yazi.uzun text { font-size: 5.6px; letter-spacing: 1px; }
.container.kadran-kapi-acik:not(.focus-layout) #kadran-kapi .kk-kure {
opacity: 1; transform: translate(-50%, -50%) scale(1);
animation: kk-dogus 1.2s ease;
}
.container.kadran-kapi-acik:not(.focus-layout) #kadran-kapi .kk-yazi { opacity: 1; }
/* Eşik parlaması — BİR KEZ. Sonsuz nabız bilerek yok. */
@keyframes kk-dogus {
0% { box-shadow: 0 0 0 0 rgba(245, 214, 123, 0), 0 0 10px rgba(245, 214, 123, .2); }
45% { box-shadow: 0 0 0 9px rgba(245, 214, 123, .16), 0 0 28px rgba(245, 214, 123, .55); }
100% { box-shadow: 0 0 0 0 rgba(245, 214, 123, 0), 0 0 22px rgba(245, 214, 123, .38); }
}
/* Analiz kipinde küre kehribara döner — mod ayrı afişle değil ışıkla
anlatılır (eski #btn-start kuralının aynısı). */
.container.analiz-secili #kadran-kapi .kk-kure,
.container.analysis-mode #kadran-kapi .kk-kure {
background: radial-gradient(circle at 50% 32%, #FFE9A8 0%, #FFD54F 48%, #D9A93B 100%);
}
/* ——— Kapı açıkken Kyron kürenin ÜSTÜNE oturur ———
Gözler küçülür (küre 74%, gözler ona göre ölçülür) ve altın zeminde
gece rengine döner: bu, motorun ritüellerde kullandığı "bedenlenmiş"
yüzün aynısı. `!important` kyron.js'in satır içi ölçeğini yener;
:not(.kyron-bedenli) ile GÜN MÜHRÜ ritüeline dokunulmaz. */
.container.kadran-kapi-acik:not(.focus-layout):not(.mini-mode) .dial-core #current-avatar:not(.kyron-bedenli) {
transform: translateY(-2px) scale(1.35) !important;
margin-bottom: 6px !important;
}
.container.kadran-kapi-acik:not(.focus-layout):not(.mini-mode) .dial-core #current-avatar:not(.kyron-bedenli) .kyron-g { fill: #0B1220; }
.container.kadran-kapi-acik:not(.focus-layout):not(.mini-mode) .dial-core #current-avatar:not(.kyron-bedenli) .kyron-hilal { stroke: #0B1220; }
.container.kadran-kapi-acik:not(.focus-layout):not(.mini-mode) .dial-core #current-avatar:not(.kyron-bedenli) .kyron-gozler { filter: none; }
/* İmza (adın fısıltısı) küreyle aynı yeri paylaşıyor — kapı açıkken susar. */
.container.kadran-kapi-acik:not(.focus-layout):not(.mini-mode) .kyron-imza-ad { display: none; }
/* Kapı kapalıyken gözler bir tık kısık: "henüz değil" (tarif gerektirmeyen işaret). */
.container:not(.focus-layout):not(.mini-mode):not(.kadran-kapi-acik) .dial-core #current-avatar { opacity: .8; }
/* Dokunuşu KAPI alır: merkezdeki gözler/yazılar tıklamayı yutmasın.
(Seçim ekranında dial-core içinde tıklanacak bir şey zaten yok.) */
.container:not(.focus-layout):not(.mini-mode) .dial-core { pointer-events: none; }
/* ═══ SEÇİM EKRANINDA ALT SIRA YOK ═══
#btn-start DOM'da duruyor (iki yerden programatik tıklanıyor) —
yalnız GÖRÜNMÜYOR. Çalışma başlayınca (.focus-layout) sıra geri gelir:
orada BİTİR de DURAKLAT da gerekli. */
.container:not(.focus-layout):not(.mini-mode) .controls { display: none; }
/* Tik halkaları 24 Ağu gecesi söküldü — süstü, bir şey söylemiyordu. */
/* ═══ HALKANIN IŞIĞI KARE İÇİNE HAPSOLMASIN (3 Eyl, kullanıcı) ═══
Kullanıcı: "çemberin etrafında bir kare görüntüsü var, kesilmiş gibi
duruyor." Doğruydu ve sebebi şuydu: yayın parlaması bir gölge
(`drop-shadow`) ve gölge, çizimin kutusundan taşıyor. SVG kutuları
varsayılan olarak taşanı KESER — yani ışık, çemberin etrafında
görünmez bir karenin kenarında birden bitiyordu.
Benzetme: lambanın hâlesi duvara vurmuş gibi. Kutu artık taşmayı
kesmiyor; ışık kendi yumuşaklığıyla sönüyor. */
.dial-arc { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.dial-arc .track { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 4.5; }
.dial-arc .fill { fill: none; stroke: url(#kyg); stroke-width: 4.5; stroke-linecap: round;
filter: drop-shadow(0 0 6px rgba(245,214,123,0.5)); transition: stroke-dashoffset 0.9s linear; }
/* GÜNÜN IŞIK HALKASI SÖKÜLDÜ (24 Ağu gecesi, kullanıcı kararı):
kadranın dış kenarındaki ince altın iz. Kullanıcı tanımadı —
"onlar neydi?" diye sordu. Tarif gerektiren gösterge konuşmuyordur.
kyron.js'teki gunIzi() kancası duruyor ama artık bir öğeye bağlı
değil; çağrıldığında sessizce hiçbir şey yapmıyor. */
/* ═══ İBRE KADRANIN ORTASINA GİRMEZ (3 Eyl, ekran denetimi) ═══════
İbre kadranın kenarından TAM MERKEZE kadar uzanıyordu ve gradyanın
parlak ucu merkezdeydi. Merkezde ise artık iki şey var: Kyron'un
gözleri ve dev sayaç. Sonuç, "00:01:48"in içinden geçen ince bir
çizgiydi — ölçüldü, gözlerle 44 px üst üste biniyordu; ekranda
çatlak gibi duruyordu.
Çözüm: kutunun GEOMETRİSİ değişmedi (dönme ekseni hâlâ merkez,
yani açı hesabı aynı kaldı) — yalnız boyanan kısım kısaldı.
Görünen iz artık kutunun üst üçte biri, yani halkanın kenarında
duran kısa bir çentik. Merkez Kyron'a ve sayıya ayrıldı. */
.dial-needle {
position: absolute; left: 50%; top: 9%; width: 3px; height: 41%; transform-origin: bottom center;
transform: translateX(-50%) rotate(0deg); border-radius: 3px; display: none;
background: none; box-shadow: none;
transition: transform 0.9s linear;
}
.dial-needle::before {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 34%;
border-radius: 3px;
background: linear-gradient(to bottom, #F5D67B, rgba(245,214,123,0));
box-shadow: 0 0 10px rgba(245,214,123,0.55);
}
/* Analiz modunda kadranın canlı ışığı KEHRİBARA döner — mod, ayrı bir
afişle değil ışığın rengiyle anlaşılır (Kyron dili: analiz = kehribar). */
.container.analysis-mode .dial-needle::before {
background: linear-gradient(to bottom, #FFD54F, rgba(255,213,79,0)); box-shadow: 0 0 10px rgba(255,213,79,0.55);
}
.container.analysis-mode .dial-arc .fill { filter: drop-shadow(0 0 6px rgba(255,213,79,0.5)); }
/* HEDEFSİZ MOD (serbest/analiz): ibre her saniye 6° atlıyor. 0.9 sn'lik geçişle
birleşince gölgeli öğe SÜREKLİ animasyon hâlinde kalıyor ve ekran takılıyormuş
gibi hissettiriyordu. Burada saat gibi TIK atsın: tek ucuz boyama, akıcı his. */
.dial-needle.tik { transition: none; }
.dial-needle.tik::before { box-shadow: 0 0 6px rgba(0,242,254,0.45); }
/* ibre görünürlüğü artık JS'te yönetilir (hedefli: ilerleme açısı; hedefsiz: saniye ibresi) */
/* İbrenin ekseni SÖKÜLDÜ: kadranın kalbi artık Kyron. Turkuaz nokta tam
gözlerin altına düşüyor ve bakışı kirletiyordu. İbrenin merkezdeki ucu
kendi gradyanıyla zaten parlak, eksen vurgusuna gerek yok.
(Eleman DOM'da duruyor — JS referansları ve düzen bozulmasın diye.) */
.dial-hub { display: none; }
.dial-core { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
/* Kyron'un evi. Ölçek ve alt boşluk kyron.js'ten gelir (duruma göre değişir);
burada yalnız kabın kendisi tanımlı — sabit boyut VERİLMEZ, yoksa
gözler büyürken kırpılır. */
.dial-core #current-avatar { background: none; border: none; box-shadow: none; cursor: default; }
/* Kyron'un imzası (kyron.css) kadranın dar merkezinde duruyor: burada
yalnız konumunu sıkılaştırıyoruz, saatin üstüne binmesin. */
.dial-core .kyron-imza-ad { font-size: 9px; letter-spacing: 3px; }
/* Sayaç artık kadranın merkezinde */
#timer { font-size: min(2.05em, 10.5vw); margin: 0; letter-spacing: 1px; }
/* "Hedefe X dk": kadranın altın ışığıyla aynı ailede, ama kısık —
süreyle yarışmayan bir alt satır. (Eskiden neon camgöbeğiydi.) */
.dial-core #progress-text {
position: static; width: auto; height: auto; background: none; border: none; backdrop-filter: none;
font-size: 0.78em; font-weight: 600; color: #D4BC7D; margin-top: 5px; display: none;
}
.dial-core #progress-text.analysis { color: #ffd54f; }
/* ═══ SAAT KİMİN (28 Ağu) ═══════════════════════════════════════════
· #gun-toplam — "bugün 3sa 30dk": kim yönetirse yönetsin akan tek
sayı. Yeşil ▸ sayaç koşarken sürenin nefesiyle AYNI ritimde
(sure-gizli-nefes, 4,5 sn) soluk alır — yeni hareket dili yok.
· .sahip-esik — kural satırının eşik sözü: devirde/iadede bir kez
altın konuşur, 4 sn sonra sakinleşir. */
.dial-core #gun-toplam {
font-size: 0.66em; color: #7f93b3; margin-top: 3px;
font-variant-numeric: tabular-nums; letter-spacing: 0.3px;
}
.dial-core #gun-toplam[hidden] { display: none; }
.dial-core #gun-toplam .akis {
color: #9fe0b8; animation: sure-gizli-nefes 4.5s ease-in-out infinite;
}
.dial-core #progress-text.sahip-esik {
display: block; color: #F5D67B; animation: sahip-esik-giris 0.5s ease;
}
@keyframes sahip-esik-giris { from { opacity: 0; transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
.dial-core #gun-toplam .akis { animation: none; }
.dial-core #progress-text.sahip-esik { animation: none; }
}
/* Odanın daveti (Vaka 5): seçim ekranında kürenin altında tek satır. */
#oda-davet {
font-size: 0.74em; color: #8fd0ff; text-align: center;
margin: -4px auto 10px; line-height: 1.4;
font-variant-numeric: tabular-nums;
}
#oda-davet[hidden] { display: none !important; }
/* Oturum kartında yer dökümü: "30 dk kendi ritmin · 60 dk Molasızlar". */
.od-yerler {
font-size: 0.78em; color: #8fd0ff; margin-top: 5px; line-height: 1.45;
}
/* Kayıt ekranı: akşamın hikâyesi — toplamın hemen altında, mavi fısıltı. */
#kayit-yerler {
font-size: 0.74em; color: #8fd0ff; text-align: right;
margin: -12px 0 12px; line-height: 1.5;
}
#kayit-yerler[hidden] { display: none; }
/* ═══ SÜRE DOLDU · SIRADAKİ KONU (25 Ağu) ══════════════════════════
İki satır, iki ayrı gerçek: üstte DERSİN dakikası bitti (altın,
kesin), altta sıradaki KONU hâlâ açık (kısık, davet).
Konfeti burada patlamaz — o yalnız eşik O OTURUMDA geçilirse.
"Tamamlandı" sözü hiç geçmez: o söz konuya saklı. */
.dial-core #progress-text.doldu {
display: flex !important; flex-direction: column; align-items: center; gap: 2px;
line-height: 1.3;
}
.dial-core #progress-text.doldu b { font-weight: 700; color: #ffd97a; }
.dial-core #progress-text.doldu i {
font-style: normal; font-size: .84em; font-weight: 500; color: #93a5c0; letter-spacing: .02em;
}
.container:not(.focus-layout) .dial-core #progress-text.doldu b { color: #d9c489; }
/* ═══ SIFIR GÖSTERME (düzen kuralı D2) ═══
Seçim ekranında sayaç 00:00:00'da duruyordu: hiçbir şey söylemiyor ama
ekranın en büyük alanını tutuyor, üstelik Kyron'un göz çubuklarıyla yan
yana gelince "duraklatılmış bir iş var" yanılgısı veriyordu.
Süre artık BAŞLAT'la DOĞAR — seçim ekranının kahramanı saat değil
Kyron'un selamıdır ("önce varlık, sonra araç" sırası).
Kapsam bilerek dar: yalnız seçim ekranı. focus-layout (çalışan ya da
duraklamış blok — sayfa yeniden açıldığında yarım blok da buraya girer)
ve mini mod (çıplak sayaç ekranı) DOKUNULMADAN kalır. */
.container:not(.focus-layout):not(.mini-mode) #timer { display: none; }
/* Süre doğarken bir kez süzülür; sonraki saniyeler sakin akar. */
.container.focus-layout #timer { animation: sure-dogar .55s ease both; }
@keyframes sure-dogar { from { opacity: 0; transform: translateY(5px); } }
/* Hedef satırı seçim ekranında FISILTIDIR: gözlerin altında tek ince satır,
kartlarla yarışmaz. Çalışırken (focus-layout) canlı yeşil hâline döner. */
.container:not(.focus-layout) .dial-core #progress-text {
font-size: 0.62em; font-weight: 500; letter-spacing: 0.04em;
color: #7f8ea8; margin-top: 8px; text-shadow: none;
}
/* Focus (çalışırken): kadran + sayaç büyür, butonlar aşağı iner */
/* ═══ HALEYE YER AÇILDI (3 Eyl, kullanıcı) ═══════════════════════
"Çemberin etrafında bir kare görüntüsü var, kesilmiş gibi duruyor;
oranında düzeltilmesi lazım." Ölçüldü ve haklıydı:
kartın iç genişliği 335 px · kadran 332 px
Yani halka kartın kenarına dayanmıştı ve KART yatayda taşanı kesiyor
(`overflow: hidden auto` — dikey kaydırma için şart). Halkanın altın
parlaması kartın kenarına gelince düz bir çizgiyle bitiyordu; göz
bunu "çemberin etrafındaki kare" olarak okuyor.
Benzetme: mumun ışığı duvara dayanmış, hâlesi duvarda kesilmiş.
Kadran 332 → 296 px'e indi: her iki yanda ~20 px nefes kaldı, ışık
kendi yumuşaklığıyla sönüyor. Sayaç KÜÇÜLMEDİ (kendi ölçüsü var),
yani ekranın kahramanı yine süre. */
.container.focus-layout .dial { width: min(296px, 79vw); margin: 12px auto 4px; }
.container.focus-layout #timer { font-size: min(3.35em, 16.5vw); margin: 0; letter-spacing: 1px; }
/* ——— Kyron hiyerarşisi (kurgu 9) ———
Çalışırken saat kahraman: süre büyük, Kyron kısık ve küçük.
Duraksayınca sıra Kyron'a geçer: süre bir kademe geri çekilir,
gözler büyüyüp sana bakar. .kyron-sakin sınıfını kyron.js yalnız
çalışma sürerken kadrana yazar. */
.container.focus-layout .dial:not(.kyron-sakin) #timer { font-size: min(2.6em, 13vw); opacity: .82; }
#timer { transition: font-size .6s ease, opacity .6s ease; }
.container.focus-layout .controls { margin-top: 30px; margin-bottom: 4px; transition: opacity 0.6s ease; }
/* Odak: çalışırken hareketsizlikte Bitir/Duraklat solar (bilinçaltı "bırak" telkini olmasın); ekrana dokununca gelir */
/* ═══ SÖNÜKLÜK TEK KATMAN (3 Eyl, ekran denetimi) ═════════════════
Eskiden opaklık SIFIRDI: düğmeler yok oluyordu. Altlarındaki bant
da bomboş kaldığı için ekran "yarım yüklenmiş" gibi duruyordu ve
öğrenci bloğu nasıl bitireceğini hatırlamak zorundaydı.
Artık bir TABAN var: görünür ama arka planda dururlar.
🔒 Korkuluk aynen duruyor — `pointer-events: none` yerinde, yani
ilk dokunuş yalnız uyandırır, yanlışlıkla bitirme olmaz. */
.container.focus-layout.controls-dim .controls { opacity: .22; pointer-events: none; }
/* ═══ UYANIK HÂL GERÇEKTEN UYANIK (3 Eyl, ekran denetimi) ═════════
Dokununca düğmeler geliyordu ama kendileri de sönüktü: dolgu
beyazın %8'i, çerçevesi %15'i. Yani "uyandırdım" ile "uyanmadı"
birbirinden ayırt edilemiyordu. Oysa duraklatınca DEVAM ET dolu
altın bir küre oluyor — ürün yüksek kontrastı biliyor, yalnız
çalışma hâlinde kullanmıyordu.
DURAKLAT artık DEVAM ET ile aynı ışıktan konuşuyor (altın çerçeve);
aynı düğmenin iki yüzü, aynı renk. BİTİR küçük ve sessiz kalır —
hiyerarşi doğruydu, yalnız yazısı okunacak kadar açıldı. */
.container.focus-layout #btn-pause {
background: rgba(245, 214, 123, .13);
border: 1.5px solid rgba(245, 214, 123, .52);
color: #F3E4B4;
}
.container.focus-layout #btn-pause:not(:disabled):hover {
background: rgba(245, 214, 123, .22); border-color: rgba(245, 214, 123, .75);
}
.container.focus-layout #btn-end {
background: rgba(255, 255, 255, .10);
border-color: rgba(255, 255, 255, .30);
color: #C3D0E4;
}
/* ═══ KART ALT ÇUBUĞA KADAR İNER (3 Eyl, ekran denetimi) ══════════
Çalışırken kart 647'nci pikselde bitiyor, alt çubuk 740'ta
başlıyordu; aradaki 93 px ne kartın ne çubuğun — hiçbir şeyin.
Telefonun altında bir kesik varmış gibi okunuyordu.
Kart aşağı iniyor, blok da bir tık aşağı kayıyor: boşluk yok
olmuyor, tek yığın olmaktan çıkıp üste ve alta bölünüyor.
⚠️ Yalnız UZUN ekranlarda: kısa telefonda zaten boşluk yok, orada
dolgu eklemek içeriği ekranın dışına iterdi. */
@media (min-height: 720px) {
.container.focus-layout { padding-top: 54px; padding-bottom: 66px; }
}
/* Odak: kontrollerle birlikte "Hedefe X dk" + mola detayı satırı da solar (dokununca gelir) */
.container.focus-layout #progress-text, .container.focus-layout #daily-breaks { transition: opacity 0.6s ease; }
.container.focus-layout.controls-dim #progress-text,
.container.focus-layout.controls-dim #daily-breaks { opacity: 0; }
/* Ders fısıltısı da kontrollerle birlikte solar — 41 dakika boyunca
ekranda okunacak tek şey süre kalsın. */
/* 29 Ağu: konu satırı artık ODAK ŞERİDİNİN içinde. Ayrı ayrı solmak
şeridi ikiye bölüyordu (ad kaybolup hap kalıyordu); solma kabın
işi — #odak-serit tek parça hâlinde soluyor. */
/* Solma ve dokunulabilirlik ARTIK KABIN işi (#odak-satir). */
/* ═══ TAM SADELİK (24 Ağu akşamı, kullanıcı kararı) ═══════════════
Dokunulmayınca ekranda SÜREDEN başka hiçbir şey kalmaz. Eskiden
masa şeridi ve üç kutu (küçülmüş hâliyle) duruyordu; kullanıcı
"onlar da gitsin, dokununca görsün" dedi. Hepsi aynı nefesi alır:
4 saniye dokunulmazsa solar, ekrana dokununca birlikte gelir. */
.container.focus-layout #masa-serit,
.container.focus-layout #parca-serit { transition: opacity 0.6s ease; }
.container.focus-layout.controls-dim #masa-serit { opacity: 0; pointer-events: none; }
/* ═══ ODAK EKRANINDA GÜNLÜK ÖZET YOK ═══
"⏱ Bugün 41 dk · ☕ 0 mola" satırı çalışırken ekranda duruyordu ama
çalışan öğrencinin göz ucuyla aradığı şey bu değil. Aynı bilgi iki
yerde zaten var: Oturum sekmesinde ve mola anında pause-hint'te
(mola sayısı + hak durumu orada daha ayrıntılı). İkinci kez ekranda
durması gürültüydü. Seçim ekranında KALIR — orada günün özeti anlamlı. */
.container.focus-layout #daily-breaks { display: none; }
#tap-hint { display: none; opacity: 0; text-align: center; font-size: 0.72em; color: #5d6b86; margin-top: 8px; letter-spacing: 0.3px; transition: opacity 0.5s ease; }
/* Mini mod = çıplak sayaç: kadran süsleri gizli, sadece büyük sayaç */
.container.mini-mode .dial { width: auto; aspect-ratio: auto; margin: 0; }
.container.mini-mode .dial-arc,
.container.mini-mode .dial-needle,
.container.mini-mode .dial-hub,
.container.mini-mode .dial-core #current-avatar,
.container.mini-mode .dial-core #progress-text { display: none !important; }
.container.mini-mode .dial-core { position: static; }
/* ═══ ÇIPLAK SAYAÇ EKRANINDA DA İKİ UYDU (24 Ağu, kullanıcı isteği) ═══
Kilit ve göz eskiden mini modda gizleniyordu (hide-in-mini); oysa
öğrencinin ekranı kaydırıp yalnız sayacı bıraktığı an tam da "ekranda
kalayım mı, süreyi göreyim mi" sorusunun sorulduğu andır. İkisi de
kadranın köşesindeki SIRAYI koruyarak ekranın sağ üstüne taşınır. */
.container.mini-mode #kilit-uydu {
position: fixed; top: calc(16px + env(safe-area-inset-top)); right: 16px;
}
.container.mini-mode #sure-uydu {
position: fixed; top: calc(16px + env(safe-area-inset-top) + 32px); right: 16px;
}
/* ═══ KAYDIRMA JESTİ — sayfa gerçekten kayar (24 Ağu, kullanıcı isteği) ═══
Eskiden parmak kalkınca ekran bir anda mini moda "atlıyordu"; arada
hiçbir hareket yoktu, yani kaydırdığın hissi hiç oluşmuyordu.
Artık ekran PARMAĞI TAKİP EDER (.elde — geçiş kapalı, birebir),
parmak kalkınca ya öbür sayfaya savrulur ya da yerine yaylanır. */
.container.kaydiriliyor {
transition: transform .3s cubic-bezier(.16, .84, .34, 1), opacity .24s ease;
will-change: transform;
}
.container.kaydiriliyor.elde { transition: none; }
@media (prefers-reduced-motion: reduce) {
.container.kaydiriliyor { transition: none; }
}
/* Veri girişi: alta yaslı sayfa; klavye açılınca üstünde kalır (KAYDET hep görünür) */
#data-inputs { align-items: flex-end; }
/* ═══ YAZMA KİPİ — tuş takımı açıkken ekran sadeleşir (24 Ağu) ═══
Tuş takımı açılınca altta yer tutan her şey çekilir; geriye YALNIZ
yazdığın konu kartı kalır. Kart alta yaslı olduğu için kendiliğinden
aşağı iner ve tuş takımının üstüne oturur — "yukarı itilme" hissi
böyle bitiyor. Tamam'a basınca hepsi geri gelir. */
#data-inputs.yazma-kipi #parca-kayit .pk-grup:not(.yazilan),
#data-inputs.yazma-kipi #gun-seyri,
#data-inputs.yazma-kipi #kayit-serit,
#data-inputs.yazma-kipi #kayit-genisleme,
#data-inputs.yazma-kipi #short-session-note,
#data-inputs.yazma-kipi #sureli-doldu-not,
#data-inputs.yazma-kipi #difficulty-hint,
#data-inputs.yazma-kipi #btn-resume-timer,
#data-inputs.yazma-kipi #btn-submit-next { display: none !important; }
/* Yazarken konu kartının İÇİ de sadeleşir (25 Ağu, kullanıcı isteği):
ekranda yalnız konu başlığı ve d/y/b kutuları kalır. Zorluk ve parça
satırları "Tamam"la geri gelir — o an yazılan şey sayılardır. */
#data-inputs.yazma-kipi #parca-kayit .pk-grup.yazilan .pk-satir,
#data-inputs.yazma-kipi #parca-kayit .pk-grup.yazilan .pk-zor,
#data-inputs.yazma-kipi #parca-kayit .pk-grup.yazilan .pk-bekleyecek,
/* Tek blok kartı da aynı sadeleşmeyi yaşar: yazarken ekranda konu
başlığı ve sayı kutuları kalır (4 Eyl · ADIM 3). */
#data-inputs.yazma-kipi .kayit-kart .pk-satir,
#data-inputs.yazma-kipi .kayit-kart .pk-zor { display: none !important; }
/* Kalan kart "indi" gibi görünsün: tek, kısa bir iniş. */
#data-inputs.yazma-kipi #parca-kayit .pk-grup.yazilan { animation: yk-inis .26s ease both; }
@keyframes yk-inis { from { transform: translateY(-12px); opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
#data-inputs.yazma-kipi #parca-kayit .pk-grup.yazilan { animation: none; }
}
#data-inputs .modal-box {
margin: 0 auto; width: 100%; border-radius: 20px 20px 0 0;
transition: margin-bottom 0.18s ease;
}
@media (min-width: 768px) {
#data-inputs { align-items: center; }
#data-inputs .modal-box { border-radius: 20px; }
}
/* Yatay (kısa) ekranda kadran taşmasın: sayaç artık kadranın içinde, eski #timer 6em kuralını ez */
@media screen and (orientation: landscape) and (max-height: 600px) {
.container:not(.mini-mode) .dial { grid-column: 1 / 3; grid-row: 2; width: min(150px, 30vh); margin: 2px auto; }
.container:not(.mini-mode) #timer { font-size: 1.7em; }
.container:not(.mini-mode) .pager { grid-column: 1 / 3; margin-top: 4px; }
}
/* ================= FAZ 3 · Sekme ekranları (Oturum + Disiplin) ================= */
/* Ortak sekme perdesi: yumuşak açılış geçişi (fade + hafif yukarı kayma) */
.tab-screen {
position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 88;
background: #0a0e1a; overflow-y: auto; padding: 22px 18px 96px; box-sizing: border-box; text-align: left;
opacity: 0; visibility: hidden; transform: translateY(16px); pointer-events: none;
transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s;
}
.tab-screen.show { opacity: 1; visibility: visible; transform: none; pointer-events: auto;
transition: opacity 0.28s ease, transform 0.28s ease; }
@media (prefers-reduced-motion: reduce) { .tab-screen { transition: none; } }
/* ═══ ÜSTTE AÇILAN SEKME EKRANI (3 Eyl gecesi — kullanıcı bulgusu:
"ekranı açınca sayfa arkada kalıyor") ═══════════════════════════
Sekme ekranları 88. katmanda; kayıt perdesi 10060, kaydet ekranı
10001. Yani perdenin içinden açılan kitaplık PERDENİN ALTINDA
kalıyordu — öğrenci düğmeye basıyor, hiçbir şey olmuyor gibi
görünüyordu (panjur tuzağının ta kendisi).
🔑 Bu sınıf YALNIZ üstteki bir formdan açıldığında takılır ve
kapanışta sökülür; normal sekme gezintisi 88'de kalır. */
.tab-screen.ustte { z-index: 10070; }
/* Oturum: üst özet SABİT, altındaki blok listesi kayar */
#oturum-overlay { overflow: hidden; }
#oturum-overlay .od-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.od-top { flex: none; padding-bottom: 8px; }
#oturum-overlay .od-plist { flex: 1; min-height: 0; overflow-y: auto; padding-top: 8px; padding-bottom: 4px; }
@media (min-width: 768px) { .tab-screen { padding: 26px 26px 100px; } .tab-screen .od-inner, .tab-screen .disc-inner { max-width: 560px; margin: 0 auto; } }
.od-title { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #5d6b86; font-weight: 700; }
.od-sub { font-size: 12px; color: #5d6b86; margin-top: 3px; }
.od-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 6px; }
.od-tile { background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); border-radius: 13px; padding: 12px 6px; text-align: center; }
.od-tile .n { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.od-tile .n.c { color: var(--success); } .od-tile .n.a { color: var(--warning); } .od-tile .n.g { color: #69f0ae; }
.od-tile .l { font-size: 10px; color: #5d6b86; margin-top: 3px; letter-spacing: 0.5px; }
.od-timeline { display: flex; height: 12px; border-radius: 7px; overflow: hidden; margin: 16px 0 6px; gap: 2px; background: rgba(255,255,255,0.03); }
.od-timeline i { display: block; min-width: 2px; }
.od-timeline .w { background: linear-gradient(var(--success), var(--primary)); }
.od-timeline .b { background: rgba(245,158,11,0.6); }
.od-key { display: flex; gap: 16px; font-size: 11px; color: #94a3b8; margin-bottom: 16px; }
.od-key span { display: inline-flex; align-items: center; gap: 6px; }
.od-key .sw { width: 10px; height: 10px; border-radius: 3px; }
.od-plist { display: flex; flex-direction: column; gap: 10px; }
/* ══ BLOK KARTI — İKİ SATIR (30 Ağustos 2026, A1 kararı) ══════════
Eski kart altı satırdı ve içinde aynı kalem iki kez vardı (sayaçsız
işareti + düzenle düğmesi). Kullanıcı ikisini ayırt edemedi.
1. satır → [no] süre · ders·konu · ⌥ konuyu kapat · ✎
2. satır → saat · tür · zorluk · kaynak · ✍ sayaçsız
3. satır → YALNIZ mola/düzeltme varsa
🔒 Esneyen tek şey YAZI (ders adı ve gri döküm); düğmeler daima
yerinde. Dar ekranda ilk kaybolan en az gerekli olandır — dokunulacak
şeyler hep görünür. `min-width:0` + `ellipsis` bunun için şart:
olmazsa flex satırı taşar ve düğmeler ekranın dışına çıkar. */
/* ═══ KONU ÖBEĞİ (3 Eyl, kullanıcı) ══════════════════════════════
Aynı konunun blokları tek bir kabın içinde. Ad, ölçü ve "konuyu
kapat" öbeğin başında bir kez; kartlar sadeleşti. */
/* 🔴 3 Eyl akşamı — BLOKLAR GÖRÜNMÜYORDU. `.od-plist` bir sütun flex
kabı ve yüksekliği sınırlı bir kaydırıcının içinde; flex çocukları
varsayılan olarak SIKIŞIR. Kartlar tek tek dizilirken bu fark
edilmiyordu, öbekler uzayınca kutular ezildi ve `overflow: hidden`
içeriği kesti: tek bloklu öbeklerde hiç satır görünmedi.
`flex: none` = "boyumu içeriğim belirler". */
.od-obek { flex: none; border: 1px solid var(--glass-border); border-radius: 15px;
background: rgba(255,255,255,0.022); padding: 0 0 8px; overflow: hidden; }
.od-obek.kapali { padding-bottom: 0; }
.od-obek.kapali .od-obek-govde { display: none; }
.od-obek.kapali .od-obek-bas { border-bottom: 0; }
.od-obek-bas { display: flex; align-items: center; gap: 8px; cursor: pointer;
padding: 10px 11px 9px; border-bottom: 1px solid rgba(255,255,255,.06);
background: rgba(255,255,255,.022); }
.od-obek-bas:hover { background: rgba(255,255,255,.045); }
/* 🔴 3 Eyl gecesi — KAPALI SATIRDA AD OKUNMUYORDU. Ölçüldü: başlık
337 px, "konuyu kapat" düğmesi tam 108 px yiyor ve konunun adına
da 108 px kalıyordu (adın 228 px'e ihtiyacı var). Yani satırın
EN AZ kullanılan eylemi, satırın ÖZNESİ kadar yer kaplıyordu.
Kapalı öbek bir içindekiler satırıdır: konu · kaç blok · kaç dakika.
Eylem, öbeği açan kişinindir — kapatma kararı da öyle. Kapalıyken
çizilmiyor; açılınca yerinde. Ada kalan yer: 232 px. */
.od-obek.kapali .od-obek-bas .od-cip { display: none; }
.od-obek-bas:focus-visible { outline: 2px solid rgba(0,242,254,.55); outline-offset: -2px; }
.od-obek-ok { flex: none; font-size: 15px; line-height: 1; color: #5d6b86;
transition: transform .2s ease; }
.od-obek.kapali .od-obek-ok { transform: rotate(-90deg); }
.od-obek-ad { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap;
font-size: 12.5px; font-weight: 700; color: #e2e8f0; }
.od-obek-ad > i { display: inline-block; font-style: normal; white-space: nowrap; }
.od-obek-ad.kayar {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
}
.od-obek-ad.kayar > i { animation: pk-kay 9s ease-in-out 1 both; }
.od-obek-olcu { flex: none; font-size: 10.5px; color: #5d6b86; font-variant-numeric: tabular-nums; }
.od-obek .od-card { border: 0; background: none; border-radius: 0; padding: 8px 11px 4px; }
.od-obek .od-card + .od-card { border-top: 1px dashed rgba(255,255,255,.06); padding-top: 9px; }
.od-obek .od-card.on { border-color: transparent; }
.od-obek .od-card.on .od-idx { background: var(--success); color: #05131f; }
.od-ad.ince { font-weight: 500; color: #8fa2bf; }
.od-card { background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); border-radius: 13px; padding: 9px 11px; }
.od-card.on { border-color: rgba(0,242,254,0.4); }
.od-r1 { display: flex; align-items: center; gap: 9px; }
.od-idx { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; color: var(--success); background: rgba(0,242,254,0.1); border: 1px solid rgba(0,242,254,0.25); font-variant-numeric: tabular-nums; }
.od-card.on .od-idx { background: var(--success); color: #05131f; }
.od-sure { font-size: 15px; font-weight: 700; flex: none; font-variant-numeric: tabular-nums; }
.od-sure.on { color: #69f0ae; }
.od-ad { flex: 1; min-width: 0; font-size: 12.5px; color: #cbd5e1;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-r2 { display: flex; align-items: center; gap: 7px; margin-top: 5px; padding-left: 31px; }
.od-alt { flex: 1; min-width: 0; font-size: 11px; color: #5d6b86;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-alt .od-kaynak { font-style: normal; color: #ecd6a8; }
/* Satır içi küçük düğme — "konuyu kapat" ve "sayaçsız" aynı ailede.
Eski tam genişlik düğme kartın yarısını kaplıyordu (30 Ağu). */
.od-cip { flex: none; font-size: 10.5px; font-weight: 600; border-radius: 8px; padding: 3px 8px;
border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04); color: #9db0cc;
white-space: nowrap; cursor: pointer; font-family: inherit; }
.od-cip.sonuk { opacity: .55; cursor: default; }
/* 🔑 DÜĞME İÇİNDE DÜĞME (7 Eyl, gezinti bulgusu B35) ─────────────────
Öbek başlığının kendisi bir kapıdır (dokununca öbek açılır kapanır);
"konuyu kapat" çipi o kapının İÇİNDE duruyordu. Çip yalnız ~21 px
yüksekliğindeydi, satır ~40 px: aradaki ölü şerit kapıya gidiyordu.
Çipin kenarına dokunan öğrenci konuyu kapatmak yerine öbeği açıp
kapıyordu — bir dokunuşun iki sonucu.
ÇÖZÜM: çipin dokunma alanı SATIRIN BOYU kadar. Kaplama kullanılmaz
(dar satırda komşunun dokunuşunu yer — anayasa, ikon maddesi):
dolgu büyür, eksi kenar payı satırın yüksekliğini yerinde tutar.
⚠️ 44 px burada ULAŞILAMAZ: satırın kendisi 40 px. Listeyi
seyrekleştirmeden verilebilecek en büyük alan satırın boyudur. */
.od-obek-bas .od-cip { padding: 8px 10px; margin: -8px 0; border-radius: 10px; }
/* 🔒 İŞARET YALNIZ BAŞINA ÇİZİLMEZ: "sayaçsız" daima kelimesiyle.
Çıplak kalem, düzenle düğmesiyle karışıyordu (kullanıcı bulgusu). */
.od-cip.beyan { display: inline-flex; align-items: center; gap: 4px; color: #8fa3bd;
border-color: rgba(255,255,255,0.13); background: none; font-weight: 500; cursor: help; }
.od-cip:hover, .od-cip:focus-visible { color: #e2e8f0; border-color: rgba(255,255,255,0.28); outline: none; }
.od-cip.sonuk:hover { color: #9db0cc; border-color: var(--glass-border); }
.od-breaks { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,0.08); display: flex; flex-wrap: wrap; gap: 6px; }
.od-brk { font-size: 11px; color: var(--warning); background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.28); border-radius: 20px; padding: 3px 9px; white-space: nowrap; }
.od-brk.auto { color: #ff8a80; background: rgba(244,67,54,0.08); border-color: rgba(244,67,54,0.3); }
/* 🗑 `.od-brk.none` (✓ molasız) ve `.od-brk.elle` (✍️ elle girildi)
30 Ağu 2026'da SÖKÜLDÜ. Molasızlık bir yokluktur, satır hak etmez;
"elle girildi" ise üst satırdaki "✍ sayaçsız" çipinin tekrarıydı.
Geri koymadan önce kartın kaç satır olduğuna bak. */
/* ✎ düzeltme izi (20 Ağu): bir uyarı değil, bir kayıt — sakin durur. */
.od-brk.duzeltme { color: #c9b6e8; background: rgba(167,139,250,0.08); border-color: rgba(167,139,250,0.28); }
/* ORTAK MOLA (16 Ağu): kehribar değil MAVİ — uyarı ailesinden değil.
Masayla birlikte ara vermek bir leke değil, birlikteliğin işareti;
"hak üstü" hesabına da girmiyor. */
.od-brk.ortak { color: #8ec5ff; background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.30); }
.od-empty { text-align: center; color: #5d6b86; padding: 40px 20px; font-size: 14px; }
/* ══ DİSİPLİN EKRANI (20 Ağu 2026 — baştan kuruldu) ═══════════════
Eski ekran tek bir rakam + bir yafta ("🏆 Elit İstikrar") + kesinti
listesi gösteriyordu. Rakam 100'de kilitliydi, yafta da onu övüyordu.
Yeni ekran ÜÇ AYRI SORUYU ayrı ayrı gösteriyor; toplam skor bunların
ağırlıklı ortalaması. Yafta YOK: her ölçü kendi cümlesini söylüyor. */
/* Pencere seçici — 7 / 14 / 30. Tek tuş, sayfa yenilenmez. */
.dsp-pencere { display: flex; gap: 4px; margin: 14px 0 4px; padding: 3px;
background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); border-radius: 11px; }
.dsp-pencere button { flex: 1; height: 34px; border: none; background: none; border-radius: 9px;
color: #8fa3bd; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all 0.16s ease;
font-family: inherit; letter-spacing: 0.3px; }
.dsp-pencere button.on { background: rgba(79,172,254,0.16); box-shadow: inset 0 0 0 1px rgba(79,172,254,0.35); color: #cfe6ff; }
/* Toplam skor — ortada, büyük, sabit genişlikli rakamla (zıplamasın). */
.dsp-skor { text-align: center; margin: 22px 0 20px; }
.dsp-skor .n { font-size: 58px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: #e8eefc; }
.dsp-skor .n.yok { font-size: 34px; color: #5d6b86; }
.dsp-skor .alt { font-size: 12px; color: #5d6b86; margin-top: 9px; }
.dsp-liste { display: flex; flex-direction: column; gap: 10px; }
/* Ölçü kartı — kitaplık/oturum kartlarıyla AYNI cam dili. */
.dsp-kart { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.15);
border-radius: 13px; padding: 15px 16px 14px; cursor: pointer; transition: border-color 0.16s ease; }
.dsp-kart:hover, .dsp-kart:active { border-color: rgba(0,242,254,0.35); }
.dsp-ust { display: flex; align-items: baseline; gap: 9px; }
.dsp-ad { font-size: 14px; font-weight: 700; color: #dce6f7; }
.dsp-deger { margin-left: auto; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; color: #e8eefc; }
.dsp-ok { color: #5d6b86; font-size: 15px; margin-left: 8px; }
/* Olgunlaşmamış ölçü: sarı rozet + solgun rakam. Değer YİNE görünür
(öğrenci sözünü tuttuysa %100'ünü görsün), ama skora kısmi katılır. */
.dsp-rozet { font-size: 10px; font-weight: 700; letter-spacing: 0.3px; padding: 2px 7px; border-radius: 20px;
color: #ffd54f; background: rgba(255,213,79,0.10); border: 1px solid rgba(255,213,79,0.32); white-space: nowrap; }
/* SAKİN ROZET (25 Ağu): olgunlaşmış ölçünün "kaç günde ölçüldü"
bilgisi. Sarı rozet bir UYARI ("henüz 3/7 gün"); bu ise bir
BİLGİ — o yüzden aynı biçim, sakin renk. */
.dsp-rozet.sakin { color: #9fb3c8; background: rgba(159,179,200,0.08);
border-color: rgba(159,179,200,0.22); font-weight: 600; }
/* Ölçünün neyi ölçemediğini söyleyen satır. Kırmızı YOK, ünlem YOK. */
.dsp-not { margin-top: 7px; font-size: 11px; line-height: 1.5; color: #7d8ea3; }
.dsp-kart.ham .dsp-deger { color: #9aa7bd; }
.dsp-serit { height: 8px; border-radius: 6px; background: rgba(255,255,255,0.06); overflow: hidden; margin: 11px 0 9px; }
.dsp-serit i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg,#4facfe,#00f2fe); }
.dsp-cumle { font-size: 12.5px; color: #8fa3bd; line-height: 1.45; }
/* Ölçüsü olmayan hâl: kesikli çerçeve, NE BEKLEDİĞİNİ söyler.
🔴 Sıfır YAZMAZ, suçlamaz — ölçülmemiş bir şey kusur değildir. */
.dsp-kart.kapali { border-style: dashed; border-color: rgba(255,255,255,0.13); background: none; cursor: default; }
.dsp-kart.kapali:hover { border-color: rgba(255,255,255,0.13); }
.dsp-kart.kapali .dsp-ad { color: #7c8ba3; }
.dsp-kart.kapali .dsp-cumle { color: #5d6b86; }
.dsp-notlar { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 18px; padding-top: 14px;
font-size: 11.5px; color: #5d6b86; line-height: 1.6; }
/* ── DETAY PERDESİ: bir ölçüye dokununca gün gün liste ── */
/* fixed (absolute DEĞİL): ana ekran kayan bir kutu; absolute perde kaydırma
yüksekliğine yapışıp yarım kalıyordu. */
.dsp-detay { position: fixed; inset: 0; background: #0a0e1a;
padding: 22px 18px 100px; box-sizing: border-box; overflow-y: auto;
opacity: 0; visibility: hidden; transition: opacity 0.18s ease; z-index: 90; }
.dsp-detay.show { opacity: 1; visibility: visible; }
@media (min-width: 768px) { .dsp-detay > div { max-width: 560px; margin: 0 auto; } }
.dsp-geri { background: none; border: 1px solid rgba(255,255,255,0.14); color: #8fa3bd; border-radius: 9px;
padding: 6px 12px; font-size: 12px; cursor: pointer; font-family: inherit; margin-bottom: 16px; }
.dsp-oruntu { font-size: 13px; color: #cfe6ff; background: rgba(79,172,254,0.08);
border: 1px solid rgba(79,172,254,0.22); border-radius: 11px; padding: 11px 13px; margin: 14px 0; line-height: 1.5; }
.dsp-gunler { display: flex; flex-direction: column; gap: 2px; }
.dsp-gun { display: flex; align-items: baseline; gap: 10px; padding: 9px 11px; border-radius: 9px;
font-size: 12.5px; background: rgba(255,255,255,0.02); }
.dsp-gun .t { color: #b9c6dc; min-width: 118px; }
.dsp-gun .s { margin-left: auto; font-variant-numeric: tabular-nums; color: #8fa3bd; }
/* Süreklilik detayında İKİ FARKLI "boş" ayrı görünür: */
.dsp-gun.yok { opacity: 0.42; } /* program yok — sayılmıyor */
.dsp-gun.gelmedi { background: rgba(244,67,54,0.07); } /* program vardı, gelinmedi */
.dsp-gun.gelmedi .s { color: #ff8a80; }
.dsp-gun.tamam .s { color: #69f0ae; }
/* ── KAYDI DÜZELT: kalem + alt perde (16 Ağu 2026) ────────────────
Kalem kartın KENARINDA durur ve sessizdir. Kayıt düzeltmek övünülecek
bir iş değil; ekranda bağırmamalı ama arandığında bulunmalı. Dokununca
mavi olur (ekranın "sıra sende" rengi). Süren blokta hiç çizilmez —
orada henüz kayıt yoktur (kronometre.js: odCollectBlocks). */
.od-kalem {
width: 26px; height: 26px; flex: none; border-radius: 8px;
background: none; border: 1px solid rgba(255,255,255,0.14);
color: #8fa3bd; display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all 0.18s ease; padding: 0;
}
.od-kalem:hover, .od-kalem:active { color: var(--success); border-color: rgba(0,242,254,0.45); }
#duzelt-perde {
position: fixed; inset: 0; z-index: 10060; display: none;
background: rgba(3, 7, 18, 0.62); backdrop-filter: blur(2px);
align-items: flex-end; justify-content: center;
}
#duzelt-perde.show { display: flex; }
.dz-govde {
width: 100%; max-width: 460px; margin: 0 8px 8px;
background: rgba(17, 25, 42, 0.98);
border: 1px solid rgba(255,255,255,0.14); border-radius: 20px;
padding: 14px 14px 12px; max-height: 88vh; overflow-y: auto;
box-shadow: 0 -14px 40px rgba(0,0,0,0.55);
}
.dz-tut { width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.2); margin: 0 auto 12px; }
.dz-baslik { font-size: 15px; font-weight: var(--yz-baslik); color: #fff; }
.dz-baslik.dz-orta { text-align: center; line-height: 1.5; }
.dz-alt { font-size: 11.5px; color: #5d6b86; margin: 3px 0 14px; }
.dz-aciklama { font-size: 12.5px; color: #8fa3bd; text-align: center; line-height: 1.6; margin: 10px 0 14px; }
.dz-not {
font-size: 12px; color: #ffce5c; background: rgba(245,158,11,0.08);
border: 1px solid rgba(245,158,11,0.3); border-radius: 12px;
padding: 9px 11px; margin-bottom: 12px; line-height: 1.5;
}
.dz-uyari-ikon {
width: 40px; height: 40px; margin: 4px auto 10px; border-radius: 50%;
background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.4);
color: var(--warning); font-size: 21px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.dz-alan { margin-bottom: 12px; }
.dz-alan label { display: block; font-size: 10px; letter-spacing: 1.2px; color: #5d6b86; margin-bottom: 6px; }
.dz-alan select, .dz-serbest input {
width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.14); border-radius: 11px;
padding: 10px 11px; color: #fff; font-family: inherit; font-size: 13.5px;
}
.dz-serbest { display: flex; gap: 7px; margin-top: 7px; }
/* ── Perdedeki ders/konu seçicileri ────────────────────────────────
Ana ekranın seçicileriyle AYNI sınıflar (.dropdown-*) kullanılıyor —
iki ekran tek dilden konuşsun diye. Buradaki tek fark açılma biçimi:
liste AKIŞ İÇİNDE açılıyor (position:static). Sebebi somut: perde
kaydırılabilir bir kutu (overflow-y:auto) ve absolute konumlanan bir
liste o kutunun kenarında KIRPILIR — telefonda son seçenekler
görünmez olurdu. Akışta açılınca perde kendisi uzuyor. */
.dz-secici { margin-bottom: 8px; }
.dz-secici:last-child { margin-bottom: 0; }
.dz-secici .dropdown-list {
position: static; margin-top: 6px; max-height: 210px;
/* Çerçeve camgöbeğiydi (7 Eyl): camgöbeği DURUM rengi, bir kutunun
kenarı durum değildir. Ana ekrandaki listeyle aynı kenar.
🔒 SEÇİLİ SATIR camgöbeği KALIYOR — o gerçekten bir durum. */
border-color: rgba(255, 255, 255, 0.14); box-shadow: none;
}
.dz-secici .dropdown-item { padding: 11px 13px; font-size: 0.88em; }
/* Seçili satır listede işaretli: uzun listede "neredeydim" sorusu kalmasın. */
.dz-secici .dropdown-item.dz-secili { color: var(--success); background: rgba(0, 242, 254, 0.06); }
/* Ok işaretine sağda yer: ana ekrandaki kutunun aynısı (7 Eyl). */
.dz-secici .dropdown-selected { padding: 12px 38px 12px 13px; font-size: 0.9em; }
/* Serbest seçimden tanımlı derslere dönüş — kutu değil, sessiz bir yol. */
.dz-geri {
background: none; border: none; color: #8fa3bd; font-family: inherit;
font-size: 12px; padding: 2px 0 8px; cursor: pointer; text-align: left; display: block;
}
.dz-geri:hover { color: var(--success); }
/* SÜRE KİLİTLİ (3 Eyl): geçmiş günün kaydında süre bir kutu değil,
okunacak bir satırdır. Düğmeye benzemez — dokunulamaz olduğu
görünüşünden bellidir; altındaki satır nedenini söyler. */
.dz-kilitli-sure {
display: flex; flex-direction: column; gap: 3px;
padding: 10px 13px; border-radius: 12px;
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
color: #cbd5e1; font-size: 1.05em; font-weight: 600;
}
.dz-kilitli-sure span { font-size: 0.7em; font-weight: 400; color: #7c8aa5; }
.dz-sure { display: flex; align-items: center; gap: 8px; }
.dz-sure button {
width: 38px; height: 38px; flex: none; border-radius: 11px;
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14);
color: #cbd5e1; font-size: 19px; cursor: pointer; padding: 0;
}
.dz-sure button:active { background: rgba(255,255,255,0.12); }
.dz-sorular { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.dz-sayi { border: 1px solid rgba(255,255,255,0.14); border-radius: 11px; padding: 7px 4px; text-align: center; }
.dz-sayi input {
width: 100%; background: none; border: none; color: #fff; text-align: center;
font-family: inherit; font-size: 16px; font-weight: 700; padding: 0;
font-variant-numeric: tabular-nums;
}
.dz-sayi input:focus { outline: none; }
.dz-sayi span { display: block; font-size: 11px; color: #5d6b86; margin-top: 2px; }
.dz-sayi:nth-child(1) { border-color: rgba(105,240,174,0.3); }
.dz-sayi:nth-child(1) input { color: #69f0ae; }
.dz-sayi:nth-child(2) { border-color: rgba(239,68,68,0.3); }
.dz-sayi:nth-child(2) input { color: #ff8a80; }
.dz-hata { font-size: 12px; color: #ff8a80; text-align: center; margin-bottom: 10px; line-height: 1.5; }
/* ═══ KAYNAK + AYRAÇ TEK BLOK (3 Eyl gecesi, kullanıcı kararı) ═══════
"Kitabın adı yanına ayraç koy." Eskiden araya KAYNAK ZORLUĞU
giriyordu: kitabın adı yukarıda, sayfası aşağıda kalıyor, ikisi bir
arada okunamıyordu. Kitap ile sayfası TEK ŞEYDİR. */
/* KAYNAK + AYRAÇ TEK SATIR: ad solda ve küçük, sayfa sağda. Dar
ekranda kısalan şey YAZI — kutular daima yerinde. */
/* Parçalı kayıtta toplam sayfa — tek blok yolundaki prosedürün aynısı. */
.pk-num.pk-toplam { width: 74px; }
.pk-toplam-yaz {
padding: 7px 10px; border-radius: 9px; cursor: pointer; white-space: nowrap;
font-family: inherit; font-size: 0.8em; font-weight: 600;
color: var(--ktp-altin-yazi, #e8d5a8); background: rgba(212, 175, 106, 0.14);
border: 1px solid rgba(212, 175, 106, 0.36);
}
.pk-toplam-yaz:active { transform: scale(.97); }
/* 🔴 KAYNAK VE ARALIK AYRI SATIRDA (7 Eylül 2026, kullanıcı bulgusu).
İkisi YAN YANA duruyordu: sayfa kutuları (baş → son · toplam) sabit
genişlikteydi, kitabın adına kalan yer eziliyordu ve uzun ad
okunmuyordu. Kaynak bu kartın kimliğidir, aralık onun ayrıntısı —
önce kim olduğu yazılır, sonra kaçtan kaça. */
.dz-kaynak-blok { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.dz-kaynak-blok > #dz-kaynak-kap { min-width: 0; }
.dz-kaynak-blok > #dz-ayrac-kap {
display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
}
/* Cephe çipleri ("Nereden devam ettin?") kutularla aynı satıra
binmesin: ikisi de tam satır ister. */
#dz-ayrac-kap > .ktp-cephe-sor,
#dz-ayrac-kap > .ktp-cepheler { flex: 1 0 100%; }
/* ═══ KAYNAK SATIRI BURADA DEĞİL (4 Eylül 2026) ═══════════════════
Satırın ölçüsü `kitaplik.css` → `.ks-sat` ailesine taşındı: satırı
çizen tek yer artık kitaplığın merkezî çizicisi. Eskiden dört kayıt
yüzeyinden ikisi buradaki `.dz-kaynak-*` ölçüsünü, biri parçalı
listenin `.pk-pil` ölçüsünü kullanıyordu — aynı iş, üç ayrı ölçü.
Kap (`.dz-kaynak-blok`) burada kalır: yerleşim bu ekranın işidir,
satırın görünüşü merkezin. */
/* Sayfa kutuları: satıra sığsın diye dar. */
.dz-saat.dz-sy { width: 52px; padding: 8px 4px; text-align: center; }
.dz-saat.dz-sy.gen { width: 68px; }
.dz-sy-yaz {
flex: none; padding: 8px 10px; border-radius: 9px; cursor: pointer;
font-family: inherit; font-size: 0.78em; font-weight: 600; white-space: nowrap;
color: var(--ktp-altin-yazi, #e8d5a8); background: rgba(212, 175, 106, 0.14);
border: 1px solid rgba(212, 175, 106, 0.36);
}
.dz-sy-yaz:active { transform: scale(.97); }
.dz-ek { font-style: normal; font-weight: 400; color: #5d6b86; }
.dz-ek.ister { color: #b99a63; }
/* Blok içi etiket: dışarıdaki `label`dan bir tık kısık — bu bir alt
başlık, yeni bir bölüm değil. */
.dz-ic-etiket {
display: block; margin-bottom: 6px;
font-size: 0.66em; letter-spacing: 0.09em; text-transform: uppercase;
color: #5d6b86; font-weight: 600;
}
.dz-ic-etiket i { font-style: normal; font-weight: 400; color: #5d6b86; }
.dz-ic-etiket i.ister { color: #b99a63; }
/* Toplam sayfa YERİNDE yazılır: kutu + düğme yan yana, uyarının içinde. */
.dz-eksik-form { flex: none; display: flex; align-items: center; gap: 6px; }
.dz-eksik-form input {
width: 74px; text-align: center; padding: 7px 8px; font-size: 1em;
}
.dz-eksik-form button { padding: 7px 11px; }
.dz-eksik.ince { flex-wrap: wrap; }
/* ═══ EKSİK SATIRI — uyarı + eksiğin giderildiği yere kapı (3 Eyl) ═══
İki yerde çıkar: derste hiç kitap yokken · kitabın toplam sayfası
yazılı değilken. 🔒 KIRMIZI YOK — bu bir suçlama değil, bir eksik.
Altın, kitaplığın "dokunulmamış tel" rengiyle aynı dilden konuşuyor. */
.dz-eksik {
display: flex; align-items: center; gap: 10px; padding: 10px 12px;
border-radius: 12px; font-size: 0.78em; line-height: 1.45;
background: rgba(212, 175, 106, 0.06);
border: 1px solid rgba(212, 175, 106, 0.2);
}
.dz-eksik span { flex: 1; min-width: 0; color: #b0bdd0; }
.dz-eksik button {
flex: none; padding: 7px 12px; border-radius: 9px; cursor: pointer;
font-family: inherit; font-size: 0.94em; font-weight: 600; white-space: nowrap;
color: #e8d5a8; background: rgba(212, 175, 106, 0.14);
border: 1px solid rgba(212, 175, 106, 0.36);
}
.dz-eksik button:active { transform: scale(.97); }
/* Sayfa satırının altındaki hâli daha kısık: orada asıl iş sayı yazmak. */
.dz-eksik.ince { margin-top: 8px; padding: 8px 10px; font-size: 0.73em; }
.dz-eksik.ince button { padding: 6px 10px; }
/* "Devam" kapalıyken NEDENİ yazılır — sessiz ölü düğme olmasın. */
.dz-neden {
margin-bottom: 7px; text-align: center;
font-size: 0.75em; color: #7c8aa5;
}
/* ALTIN = İLERLET (7 Eyl): "Düzeltmeyi kaydet" ve elle girişteki
"Devam"/"Kaydet" bu sınıftan doğar. Kayıt kartındaki KAYDET ile
AYNI renk — iki ekran aynı kartı çiziyorsa aynı sözü de vermeli. */
.dz-birincil {
width: 100%;
background: var(--ss-eylem-dolgu, rgba(212,175,106,.16));
border: 1px solid var(--ss-eylem-cizgi, rgba(212,175,106,.48));
color: var(--ss-eylem-yazi, #E8D5A8);
border-radius: 12px; padding: 12px 0; font-family: inherit;
/* Ana düğme de ince (maket §4): kalınlık "bak bana" demenin en
ucuz yolu ve tek başına duran bir düğmenin buna ihtiyacı yok. */
font-size: 14px; font-weight: var(--yz-baslik); letter-spacing: .03em;
cursor: pointer; margin-bottom: 8px;
}
.dz-birincil:disabled { opacity: 0.6; cursor: default; }
.dz-satir { display: flex; gap: 8px; }
.dz-ikincil, .dz-tehlike {
flex: 1; border-radius: 12px; padding: 10px 0; font-family: inherit;
font-size: 13px; font-weight: var(--yz-baslik); cursor: pointer; background: none;
}
.dz-ikincil { border: 1px solid rgba(255,255,255,0.14); color: #cbd5e1; }
.dz-tehlike { border: 1px solid rgba(239,68,68,0.35); color: #ff8a80; }
.dz-tehlike.dz-dolu { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.45); }
/* ═══ ELLE GİRİŞ (19 Ağu 2026) — kapı satırı + perdenin ek parçaları ═══
Perde düzeltme perdesinin TA KENDİSİ (#duzelt-perde, .dz-*): aynı
seçiciler, aynı kutular, aynı düğmeler. Burada yalnız bu ekrana
özgü olanlar var: çip sırası (bugün/dün · kolay/orta/zor), özet
satırı, "yazıldı" onayı. */
/* 20 Ağu: ana ekrandaki `#elle-giris-kapi` satırı ve kendi biçimi
SÖKÜLDÜ — kapı profile taşındı ve orada ortak `.hs-kapi` iskeletini
kullanıyor (profil kapıları tek biçim kuralı). Odak kipinde gizleme
kuralına da gerek kalmadı: profil zaten çalışma sürerken açılmıyor. */
/* Oturum sekmesinin altındaki ikinci kapı: defterin bittiği yerde, sessiz. */
/* SAYAÇSIZ ÇALIŞTIM — 25 Ağu: listenin altından ÜSTE taşındı ve
kendi ikonuna kavuştu. Kesikli çerçeve KALIYOR: bu bir beyan,
ölçüm değil — çerçeve de öyle söylüyor. */
.od-elle {
/* flex:none ŞART — genel button kuralı flex:1 veriyor, liste sütununda
düğme boşluğu doldurup devleşiyordu. */
display: flex; align-items: center; gap: 11px; flex: none; width: 100%;
margin: 2px 0 12px; padding: 11px 13px;
background: rgba(212,175,106,0.045); border: 1px dashed rgba(212,175,106,0.30);
border-radius: 13px; color: #c2b291; font-family: inherit; cursor: pointer; text-align: left;
}
.od-elle:hover { color: #e8d5a8; border-color: rgba(212,175,106,0.55); background: rgba(212,175,106,0.09); }
.od-elle svg { flex: none; color: #d4af6a; }
.od-elle .od-elle-yz { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.od-elle .od-elle-yz b { font-size: 12.8px; font-weight: 700; color: #e8d5a8; }
.od-elle .od-elle-yz i { font-style: normal; font-size: 11px; line-height: 1.45; color: #8b9bb2; }
.od-elle .od-elle-ok { flex: none; font-size: 15px; color: #8a7442; }
.dz-cipler { display: flex; gap: 7px; }
/* BEŞLİ CETVEL (4 Eyl, kullanıcı kararı: "hepsi YAN YANA").
Beş kademe TEK SATIRDA durur — sarmak cetveli iki parçaya bölüyor,
göz "üstteki üç, alttaki iki" diye okuyordu; oysa bu tek bir
ölçektir ve sırası soldan sağa okunmalı. Sığdırmanın bedeli yazı
boyu: 10,5px ve dar boşluk. */
.dz-cipler.bes { flex-wrap: nowrap; gap: 4px; }
.dz-cipler.bes .dz-cip {
flex: 1 1 0; min-width: 0; font-size: 10.5px; padding: 9px 1px;
letter-spacing: -0.2px; white-space: nowrap;
}
.dz-cip {
flex: 1; padding: 9px 0; border-radius: 11px; cursor: pointer;
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.14);
color: #cbd5e1; font-family: inherit; font-size: 13px; font-weight: 600;
}
.dz-cip.secili { color: var(--success); border-color: rgba(0, 242, 254, 0.45); background: rgba(0, 242, 254, 0.07); }
.dz-cip:disabled { opacity: 0.45; cursor: default; }
/* Gün çipinde tarih alt satırı (22 Ağu): gece 04:00 devri yüzünden
"Dün" tek başına yanıltıcı — tarih hangi defteri söyler. */
.dz-cip.dz-gun small { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 400; color: #5d6b86; }
.dz-cip.dz-gun.secili small { color: #8fa3bd; }
/* ══ ✍ SAYAÇSIZ İZİ (27 Ağu) — üç ekranda aynı ══════════════════════
Düzeltme kalemiyle (.gc-duzelt / .od-kalem) KARIŞMASIN diye kasten
farklı: iz KUTUSUZ ve sönük durur, kalem kutulu ve dokunulur. İkisi
aynı satırda yan yana gelebilir (dünün elle kaydı).
Ceza değil etiket: renk uyarı kırmızısı değil, satırın kendi kısığı. */
.ss-beyan {
display: inline-flex; align-items: center; justify-content: center;
color: #7d8ca6; cursor: help; flex: none; vertical-align: -2px;
}
.ss-beyan:hover, .ss-beyan:focus-visible { color: #cbd5e1; outline: none; }
.ss-beyan-not {
margin: 4px 0 2px; padding: 7px 10px; border-radius: 9px;
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
font-size: 11px; color: #8fa3bd; line-height: 1.5; text-align: left;
}
/* SAPMA UYARISI (27 Ağu): süreye belirgin dokunuşta ne olacağını
KAYDETMEDEN ÖNCE söyler. Kırmızı DEĞİL — bu bir hata değil, bir
sonuç bildirimi. Ilık altın: ürünün "dikkat et" değil "bilesin"
rengi. `.dz-hata` ile karışmasın diye ayrı sınıf. */
.dz-sapma {
margin-top: 9px; padding: 9px 12px; border-radius: 10px;
background: rgba(212, 175, 106, 0.07); border: 1px solid rgba(212, 175, 106, 0.28);
font-size: 11.5px; color: #e8d5a8; line-height: 1.55;
}
.dz-sapma b { color: #fff; font-weight: 700; }
/* Dün seçilince kural önden söylenir — sakin bilgi satırı, uyarı değil. */
.dz-bilgi {
margin-top: 9px; padding: 8px 11px; border-radius: 10px;
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
font-size: 11.5px; color: #8fa3bd; line-height: 1.5;
}
/* Geçmiş dökümünde düzeltme kalemi (gc-row bir