/* Nunito (değişken font, SIL OFL lisansı) — yerelde barındırılır (CSP: font-src 'self'). latin + latin-ext alt kümeleri Türkçe karakterleri (ğüşıöç İĞÜŞÖÇ) tam kapsar. */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('../fonts/nunito-vf-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('../fonts/nunito-vf-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --bg: #f4f7f8; --surface: #ffffff; --surface-soft: #f8fafb; --text: #172126; /* Eğitimgen logosundaki lacivert/mavi paletin temel yedeği. */ --muted: #5f6c72; --border: #dfe7e9; --primary: #24439b; --primary-dark: #000b49; --primary-soft: #e5ebff; --primary-alt: #315fd0; --primary-alt-dark: #153a9f; /* --primary ÜSTÜNDEKİ yazı rengi. Sabit #fff yazmayın: vurgu paleti ve tema değişince zemin açılıyor ve beyaz AA'nın altına düşüyor (ölçüldü 2026-08-18: koyu temada her birincil düğmenin gradyan ucu 2.99, sınır 4.5). Aşağıda amber ve TÜM koyu tema paletleri bu token'ı koyu değere çeviriyor. */ --on-primary: #fff; --blue: #3778c2; --violet: #7254b8; --amber: #c67b18; --danger: #c43d3d; --danger-soft: #fff0f0; /* UYARI TOKENI ACIK TEMADA DA TANIMLI (2026-08-26): koyu temada vardi, acik temada yoktu ve onu kullanan kural sabit hex'e dusuyordu — depo kurali sabit hex'i yasakliyor (koyu temada okunmaz hale geliyor). */ --warning: #8a5a00; --warning-soft: #fff4e0; --success: #19734b; --success-soft: #e8f7ef; --radius: 16px; --shadow: 0 1px 2px rgba(22, 33, 38, .04), 0 10px 30px rgba(22, 33, 38, .06); --focus: 0 0 0 3px rgba(36, 67, 155, .24); } /* Karanlık mod: theme-boot.js ilk boyamadan önce uygular. Token'lar değişir; sabit renkli birkaç bölge aşağıda hedefli olarak düzeltilir. Yazdırma belgeleri hep aydınlık kalır. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #080d1e; --surface: #10182d; --surface-soft: #17223c; --surface-strong: #1e2c49; --text: #edf1ff; --muted: #aeb8d2; --border: #293654; --primary: #6f91f4; --primary-dark: #9cb3ff; --primary-soft: #18264f; /* --primary-alt koyu temada AÇIK tonda olmalı: gradyanın bir ucu açık (--primary) diğeri koyu kalınca aynı yazı rengi iki uçta birden okunamıyordu. İkisi de açık → koyu yazı. */ --primary-alt: #93aef8; --primary-alt-dark: #24439b; --on-primary: #0a1128; --danger-soft: #3a201c; --success-soft: #16342a; --danger: #e0796c; --success: #66b394; /* Koyu tema karşılıkları danger/success kalıbıyla aynı: koyu zemin + açık ön plan. */ --warning: #d9b64a; /* --violet KOYU TEMADA TANIMSIZDI (2026-08-20'de ölçüldü): açık temanın #7a5bb0 değeri miras alınıyor ve koyu yüzeyde 3.40 oranı veriyordu — AA sınırı 4.5. Yalnız yeni MEB rozetini değil, .metric-violet'i de etkiliyordu; ikisi de bu satırla düzeldi. */ --violet: #b49bf0; --warning-soft: #3a2f14; --surface-2: #17223c; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.4); --focus: 0 0 0 3px rgba(111,145,244,.38); } :root[data-theme="dark"] .field input, :root[data-theme="dark"] .field select, :root[data-theme="dark"] .field textarea { background: #0f172b; border-color: #334260; } :root[data-theme="dark"] .field input:hover, :root[data-theme="dark"] .field select:hover, :root[data-theme="dark"] .field textarea:hover { border-color: #465778; } :root[data-theme="dark"] .button-secondary { background: #17223c; border-color: #334260; color: #e4eaff; } :root[data-theme="dark"] .button-secondary:hover { background: #1e2c49; border-color: #465778; } :root[data-theme="dark"] .flash-error { border-color: #6b2f2f; color: #f0a8a8; } :root[data-theme="dark"] .flash-success { border-color: #2b5e46; color: #86dcae; } :root[data-theme="dark"] .flash-warning { background: #34290f; border-color: #6d5620; color: #e8c46f; } :root[data-theme="dark"] .flash-info { background: #16273c; border-color: #2e4a6b; color: #9dc4ee; } /* Koyu temada lacivert (--brand-navy) marka metinleri okunmuyor → panel içinde açık tona çevrilir. (Giriş sayfası, skip-link ve ::selection beyaz/altın zeminde kaldığından bilinçli olarak dokunulmaz.) */ :root[data-theme="dark"] .metric-card strong, :root[data-theme="dark"] .page-heading h1, :root[data-theme="dark"] .operation-links strong, :root[data-theme="dark"] .empty-state strong, :root[data-theme="dark"] .font-option-card > b, :root[data-theme="dark"] .footer strong { color: #ece3d6; } :root[data-theme="dark"] .builder-chip { border-color: var(--border); } :root[data-theme="dark"] .qb-options li.is-correct, :root[data-theme="dark"] .plan-topic.is-covered { border-color: #2b5e46; } :root[data-theme="dark"] .view-switcher a.is-active { box-shadow: 0 1px 3px rgba(0,0,0,.5); } /* Gelişim raporu bir yazdırma belgesidir: karanlık modda da beyaz kalır */ :root[data-theme="dark"] .report-document { background: #fff; color: #172126; } /* Menüsüz tam sayfa belgeler (quiz-print.php): KÂĞIT (.qp-sheet) sabit beyaz kalır, ama kâğıdın ÇEVRESİ ve araç şeridi sisteme uymalı — koyu tema kullanıcısında ekran bembeyaz açılıyordu. theme-boot.js bu ekrana 2026-08-17'de eklendi; o güne kadar data-theme hiç yazılmadığı için bu kurallar YAZILSA BİLE çalışmazdı. */ :root[data-theme="dark"] .print-body, :root[data-theme="dark"] .qp-body { background: var(--bg); color: var(--text); } :root[data-theme="dark"] .print-toolbar { border-bottom-color: var(--border); background: var(--surface); } /* Vurgu rengi paletleri (Görünüm ayarı: ui.accent). Varsayılan Eğitimgen lacivertidir. */ /* blue/violet: --primary-alt gradyanın AÇIK ucu ve beyaz yazıyı taşımalı. Eski tonlar (#4f83f1 / #9a6bff) beyazla 3.59 ve 3.55 veriyordu; primary'den %7-12 açık, AA'yı geçen en açık ton seçildi (ölçüldü 2026-08-18). */ :root[data-accent="blue"] { --primary: #2563eb; --primary-dark: #1e50c8; --primary-soft: #dbe8fe; --primary-alt: #346dec; --primary-alt-dark: #1d4ed8; --focus: 0 0 0 3px rgba(37,99,235,.25); } :root[data-accent="violet"] { --primary: #7c3aed; --primary-dark: #6527cf; --primary-soft: #ede7fe; --primary-alt: #8b51ef; --primary-alt-dark: #6d28d9; --focus: 0 0 0 3px rgba(124,58,237,.25); } /* Amber TEK istisna: açık temada bile zemin yeterince açık — beyaz 3.19'da kalıyor, koyu 5.87. */ :root[data-accent="amber"] { --primary: #d97706; --primary-dark: #b45309; --primary-soft: #fdeed3; --primary-alt: #f59e0b; --primary-alt-dark: #c2410c; --on-primary: #0a1128; --focus: 0 0 0 3px rgba(217,119,6,.28); } :root[data-accent="rose"] { --primary: #be123c; --primary-dark: #9f1239; --primary-soft: #fde4e9; --primary-alt: #e11d48; --primary-alt-dark: #a21038; --focus: 0 0 0 3px rgba(190,18,60,.25); } :root[data-accent="yesil"] { --primary: #237a4b; --primary-dark: #175a36; --primary-soft: #dcf3e5; --primary-alt: #2f9a5e; --primary-alt-dark: #1c6b40; --focus: 0 0 0 3px rgba(35,122,75,.25); } :root[data-accent="pembe"] { --primary: #c2255c; --primary-dark: #9d1c4a; --primary-soft: #fde3ec; --primary-alt: #e0407a; --primary-alt-dark: #a6194d; --focus: 0 0 0 3px rgba(194,37,92,.25); } :root[data-accent="indigo"] { --primary: #4f46e5; --primary-dark: #3b32c4; --primary-soft: #e6e4fd; --primary-alt: #6a62f0; --primary-alt-dark: #4338ca; --focus: 0 0 0 3px rgba(79,70,229,.25); } :root[data-accent="kahve"] { --primary: #7c4a1e; --primary-dark: #5c3614; --primary-soft: #f3e6da; --primary-alt: #9a5f2a; --primary-alt-dark: #6b3f19; --focus: 0 0 0 3px rgba(124,74,30,.25); } /* V2 KOBALT (2026-09-22, kurum varsayılanı). Ölçüldü: beyaz yazı --primary üstünde 7.10, --primary-alt üstünde 5.51; koyu temada koyu yazı 7.11. */ :root[data-accent="v2"] { --primary: #2747d6; --primary-dark: #0b1b6b; --primary-soft: #e6ecff; --primary-alt: #2a5fe0; --primary-alt-dark: #1b36b0; --focus: 0 0 0 3px rgba(39,71,214,.26); } :root[data-accent="navy"] { --primary: #24439b; --primary-dark: #000b49; --primary-soft: #e5ebff; --primary-alt: #315fd0; --primary-alt-dark: #153a9f; --focus: 0 0 0 3px rgba(36,67,155,.25); } :root[data-accent="teal"] { --primary: #0f766e; --primary-dark: #115e59; --primary-soft: #ccfbf1; --primary-alt: #128a7d; --primary-alt-dark: #0d5f57; --focus: 0 0 0 3px rgba(15,118,110,.25); } :root[data-accent="turuncu"] { --primary: #c2410c; --primary-dark: #9a3412; --primary-soft: #ffedd5; --primary-alt: #d9541c; --primary-alt-dark: #9a3412; --focus: 0 0 0 3px rgba(194,65,12,.25); } /* Karanlık temada vurgular: daha parlak birincil + koyu zeminli soft. --primary-alt HER paletde AÇIK tonda verilir: gradyanın iki ucu da açık olsun ki tek bir koyu yazı rengi (--on-primary) ikisinde birden okunsun. Ölçüldü: beyaz yazı bu zeminlerin hiçbirinde AA'yı geçmiyor (en iyisi 3.78), koyu yazı hepsinde ≥4.95. */ :root[data-theme="dark"][data-accent="blue"] { --primary: #6b98f5; --primary-dark: #7ea6f7; --primary-soft: #16263f; --primary-alt: #7ba3f5; } :root[data-theme="dark"][data-accent="violet"] { --primary: #a585ff; --primary-dark: #b892ff; --primary-soft: #241a3d; --primary-alt: #b491ff; } :root[data-theme="dark"][data-accent="amber"] { --primary: #f59e0b; --primary-dark: #ffb84d; --primary-soft: #372a12; --primary-alt: #ffb648; } :root[data-theme="dark"][data-accent="rose"] { --primary: #f26d88; --primary-dark: #f57a93; --primary-soft: #3a1722; --primary-alt: #f57e97; } :root[data-theme="dark"][data-accent="yesil"] { --primary: #4fbf7f; --primary-dark: #86d8a8; --primary-soft: #14301f; --primary-alt: #7dd4a1; } :root[data-theme="dark"][data-accent="pembe"] { --primary: #f06292; --primary-dark: #f8a1c0; --primary-soft: #3a1626; --primary-alt: #f48fb1; } :root[data-theme="dark"][data-accent="indigo"] { --primary: #958eff; --primary-dark: #b3adff; --primary-soft: #211e4a; --primary-alt: #a8a2ff; } :root[data-theme="dark"][data-accent="kahve"] { --primary: #d29a63; --primary-dark: #e6bd92; --primary-soft: #352417; --primary-alt: #e0ac78; } :root[data-theme="dark"][data-accent="v2"] { --primary: #7c9bff; --primary-dark: #a3b8ff; --primary-soft: #172150; --primary-alt: #a3b8ff; --on-primary: #0a1128; } :root[data-theme="dark"][data-accent="navy"] { --primary: #7a99ec; --primary-dark: #8aa4ec; --primary-soft: #182342; --primary-alt: #85a1ea; } :root[data-theme="dark"][data-accent="teal"] { --primary: #2dd4bf; --primary-dark: #5eead4; --primary-soft: #134e4a; --primary-alt: #5eead4; } :root[data-theme="dark"][data-accent="turuncu"] { --primary: #fb923c; --primary-dark: #fdba74; --primary-soft: #431407; --primary-alt: #fdba74; } /* Köşe stili (ui.corners = sharp) */ :root[data-corner="sharp"] { --radius: 9px; } :root[data-corner="sharp"] .button { border-radius: 7px; } :root[data-corner="sharp"] .field input, :root[data-corner="sharp"] .field select, :root[data-corner="sharp"] .field textarea { border-radius: 8px; } /* Yazı tipi (ui.font_family) — Nunito varsayılan (@font-face yukarıda); alternatifler cihazda hazır fontlar. Dönem raporu belgesi (.report-document) her zaman Arial kalır. */ /* Her seçenek bir yedek zinciriyle biter: font cihazda yoksa arayüz bozulmaz, en yakınına düşer. */ :root[data-font="system"] body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } :root[data-font="segoe"] body { font-family: "Segoe UI Variable Text", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } :root[data-font="calibri"] body { font-family: Calibri, Candara, "Segoe UI", Optima, sans-serif; } :root[data-font="arial"] body { font-family: Arial, Helvetica, "Liberation Sans", sans-serif; } :root[data-font="verdana"] body { font-family: Verdana, Geneva, "DejaVu Sans", sans-serif; } :root[data-font="tahoma"] body { font-family: Tahoma, Verdana, Geneva, sans-serif; } :root[data-font="trebuchet"] body { font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", sans-serif; } :root[data-font="corbel"] body { font-family: Corbel, "Lucida Grande", "Segoe UI", sans-serif; } :root[data-font="candara"] body { font-family: Candara, Calibri, "Segoe UI", sans-serif; } :root[data-font="georgia"] body { font-family: Georgia, "Times New Roman", serif; } :root[data-font="cambria"] body { font-family: Cambria, Georgia, "Liberation Serif", serif; } :root[data-font="palatino"] body { font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; } :root[data-font="times"] body { font-family: "Times New Roman", Times, "Liberation Serif", serif; } /* Yazı boyutu (ui.font_size) — tüm arayüz orantılı ölçeklenir; yazdırma her zaman %100. */ :root[data-font-size="small"] body { zoom: .94; } :root[data-font-size="large"] body { zoom: 1.08; } :root[data-font-size="xlarge"] body { zoom: 1.17; } @media print { body { zoom: 1 !important; } } /* Görünüm sayfası yazı tipi örnekleri */ .font-sample-nunito { font-family: 'Nunito', sans-serif; } .font-sample-system { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } .font-sample-segoe { font-family: "Segoe UI Variable Text", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .font-sample-calibri { font-family: Calibri, Candara, "Segoe UI", Optima, sans-serif; } .font-sample-arial { font-family: Arial, Helvetica, "Liberation Sans", sans-serif; } .font-sample-verdana { font-family: Verdana, Geneva, "DejaVu Sans", sans-serif; } .font-sample-tahoma { font-family: Tahoma, Verdana, Geneva, sans-serif; } .font-sample-trebuchet { font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", sans-serif; } .font-sample-georgia { font-family: Georgia, "Times New Roman", serif; } .font-sample-cambria { font-family: Cambria, Georgia, "Liberation Serif", serif; } .choice-hint { color: var(--muted); font-size: 12px; } /* Süzgeç kartındaki kilit notu: öğretmene "burada neden az seçenek var" sorusunu sordurmadan cevaplar. Şeritte kendi satırına iner (flex kabında `flex-basis: 100%`). */ .filter-kilit-notu { flex: 1 0 100%; margin: 0; color: var(--muted); font-size: 12.5px; } /* Liste sıra numarası (2026-08-25 kullanıcı: "solunda numara olsun 1 2 3 diye"). Sütun dar ve soluk: numara yön bulma aracıdır, ada rakip değil. Sayfalar arası devam eder (2. sayfa 26'dan başlar) — hesap ekranda, sayfa tabanından. */ .liste-sira-baslik { width: 44px; } .liste-sira { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12.5px; } /* Çalışma programı: haftaya doğrudan atlama (gezinme şeridinin sonunda küçük form) ve geçmiş hafta bilgisi. Not uyarı rengi TAŞIMAZ: geçmişe eklemek meşru bir iştir. */ .cprog-hafta-atla { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; } .cprog-hafta-atla input[type="date"] { min-height: 32px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font-size: 12.5px; } .cprog-gecmis-notu { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; } /* GEZİNTİ ŞERİDİ TABLO KARTININ İÇİNDE (2026-09-05): ayrı filter-card değil, kartın ilk satırı. İnce alt çizgi şeridi araç satırından ayırır; exam-cal-bar'ın kendi alt boşluğu sıfırlanır. */ .cprog-gezinti { padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border); } .cprog-gezinti .exam-cal-bar { margin-bottom: 0; } .cprog-gezinti .cprog-gecmis-notu { margin-top: 6px; } .cprog-yayilma-ornek { grid-column: 1 / -1; color: var(--muted); font-size: 12px; line-height: 1.45; } /* HIZLI EKLEME — GÜN HÜCRESİNDE (2026-09-05 kullanıcı: "kutuyu tablo içindeki karelere koyalım"). Hücre dar: kutu ince, öneri POPOVER gibi hücreden taşarak açılır (position: absolute — komşu hücrenin üstüne binebilir, panel popover kalıbıyla aynı). Kap [hidden] doğar, cprog-hizli.js açar — genel [hidden] kuralı !important ile gizli tutar. */ .cprog-hizli-hucre { position: relative; margin-top: 6px; } .cprog-hizli-hucre input[data-cprog-hizli-metin] { width: 100%; min-width: 0; padding: 4px 7px; font-size: 12px; border: 1px dashed var(--border); border-radius: 7px; background: transparent; } .cprog-hizli-hucre input[data-cprog-hizli-metin]:focus { border-style: solid; background: var(--surface); } /* ZEMİN TOKEN'I --surface (2026-09-05 kullanıcı: "şeffaflık altta çok fazla"): ilk sürüm var(--card) yazmıştı ve O TOKEN TANIMLI DEĞİL — zemin çözülmeyip şeffaf kalıyordu, alttaki hücre içinden okunuyordu (tanımsız sınıf dersinin token yüzü). Kademeli liste dikey akar. */ .cprog-hizli-oneri { position: absolute; left: 0; right: -46px; top: calc(100% + 4px); z-index: 30; display: flex; flex-direction: column; gap: 6px; min-width: 240px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 14px 32px rgba(10, 20, 50, .26); font-size: 12.5px; } .cprog-hizli-ozet { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 2px 2px 6px; border-bottom: 1px solid var(--border); } .cprog-hizli-liste { display: flex; flex-direction: column; gap: 1px; max-height: 236px; overflow-y: auto; } .cprog-hizli-oge { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; font: inherit; text-align: left; cursor: pointer; } .cprog-hizli-oge b { font-size: 12.5px; font-weight: 650; } .cprog-hizli-oge small { color: var(--muted); font-size: 10.5px; } .cprog-hizli-oge:hover, .cprog-hizli-oge.is-secili { background: var(--surface-soft); } .cprog-hizli-uyari { color: var(--muted); } .cprog-hizli-not { flex: 1 0 100%; color: var(--muted); font-size: 11.5px; } /* Otomatik koç ataması: genel anahtar tablodan önce kendi satırında; pasif koç uyarısı kırmızı değil amber — kural durur ama veri kaybolmaz, panik rengi yanlış okutur. */ .koc-otomatik-genel { margin: 0 0 14px; } .koc-otomatik-tablo select { min-width: 220px; } .koc-otomatik-uyari { display: block; margin-top: 4px; color: var(--amber); font-size: 11.5px; } /* Ayarlar ekranı: her ayar kendi kartında, kartlar ızgarada. Tek uzun sütunda hangi ayarın nerede bittiği belli olmuyordu. Hepsi tek forma bağlı; alttaki çubuk tek kaydet düğmesi verir. */ .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 16px; align-items: start; } .settings-card { padding: 18px 20px; } .settings-card .choice-group { margin: 0; padding: 0; border: 0; } .settings-card legend { padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 800; } /* Yazı tipi galerisi: admin fontu ismini tahmin ederek değil, gerçek örneğini görerek seçer. */ .settings-card-fonts { grid-column: span 2; } .settings-font-intro { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.55; } .settings-font-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; } .font-option { position: relative; display: block; min-width: 0; cursor: pointer; } .font-option > input { position: absolute; z-index: 2; top: 13px; right: 13px; width: 18px; height: 18px; margin: 0; accent-color: var(--primary); } .font-option-card { display: grid; gap: 5px; min-height: 150px; padding: 13px 42px 13px 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); color: var(--text); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease; } .font-option:hover .font-option-card { border-color: var(--primary); transform: translateY(-1px); } .font-option > input:checked + .font-option-card { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent); } .font-option > input:focus-visible + .font-option-card { outline: none; box-shadow: var(--focus); } .font-option-heading { display: flex; align-items: center; gap: 7px; min-width: 0; } .font-option-heading strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .font-option-heading em { padding: 2px 7px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 9px; font-style: normal; font-weight: 800; white-space: nowrap; } .font-option-card > b { margin-top: 5px; color: var(--brand-navy); font-size: 23px; line-height: 1.05; letter-spacing: -.025em; } .font-option-card > small { color: var(--text); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; } .font-option-description { align-self: end; color: var(--muted); font-family: 'Nunito', sans-serif; font-size: 10.5px; line-height: 1.35; } .settings-actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 -6px 18px rgba(0,11,73,.06); } .settings-actions span { color: var(--muted); font-size: 12.5px; } @media (max-width: 900px) { .settings-card-fonts { grid-column: auto; } } /* Ayar formlarındaki tek satırlık sayı/seçim alanları form genişliğini kaplamasın (CSP: satır içi stil yasak) */ .field-narrow { max-width: 280px; } .card-narrow { max-width: 680px; } .admission-guide-list { display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: admission-guide; } .admission-guide-list li { position: relative; min-width: 0; padding: 15px 0 15px 47px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; } .admission-guide-list li:last-child { border-bottom: 0; padding-bottom: 2px; } .admission-guide-list li::before { counter-increment: admission-guide; content: counter(admission-guide); position: absolute; left: 0; top: 14px; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; background: var(--primary-soft); color: var(--primary-dark); font-size: 12px; font-weight: 900; } /* --- Yardımcı sınıflar --- Katı CSP (style-src 'self') satır içi style="" niteliğini TAMAMEN bloklar: tarayıcı onu hiç uygulamaz. Bu yüzden boşluk/genişlik gibi tek seferlik stiller de sınıfla verilir. */ .spaced-top { margin-top: 1rem; } .spaced-top-sm { margin-top: .6rem; } .spaced-top-xs { margin-top: .4rem; } .spaced-bottom { margin-bottom: 1rem; } .spaced-bottom-sm { margin-bottom: 10px; } .section-rule { margin: 1.5rem 0; border: none; border-top: 1px solid var(--border); } .empty-state-lg { padding: 32px; } .inline-form { display: inline; } .push-right { margin-left: auto; } .grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .grid-auto-fit-top { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; } .card-heading-inset { padding: 16px 18px 0; } .input-time { width: 110px; } .select-compact { max-width: 130px; } .field-note { color: var(--muted); font-size: 11px; } .input-rename { height: 32px; min-width: 150px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font-size: 13px; } /* İlerleme çubuğu dolgusu: yüzde %5 adımlarla sınıfa çevrilir (dinamik style="" CSP'de çalışmaz) */ .bar-w-0 { width: 0; } .bar-w-5 { width: 5%; } .bar-w-10 { width: 10%; } .bar-w-15 { width: 15%; } .bar-w-20 { width: 20%; } .bar-w-25 { width: 25%; } .bar-w-30 { width: 30%; } .bar-w-35 { width: 35%; } .bar-w-40 { width: 40%; } .bar-w-45 { width: 45%; } .bar-w-50 { width: 50%; } .bar-w-55 { width: 55%; } .bar-w-60 { width: 60%; } .bar-w-65 { width: 65%; } .bar-w-70 { width: 70%; } .bar-w-75 { width: 75%; } .bar-w-80 { width: 80%; } .bar-w-85 { width: 85%; } .bar-w-90 { width: 90%; } .bar-w-95 { width: 95%; } .bar-w-100 { width: 100%; } /* Yoğunluk (ui.density = compact): daha az boşluk, ekrana daha çok satır */ body.density-compact .card { padding: 16px; } body.density-compact .page-content { padding-block: 18px 40px; } body.density-compact .page-heading { margin-bottom: 16px; } body.density-compact .data-table th { padding: 9px 12px; } body.density-compact .data-table td { padding: 8px 12px; } body.density-compact .metric-card { min-height: 118px; padding: 14px; } body.density-compact .approval-card-header { padding: 8px 14px; } body.density-compact .approval-form { padding: 8px 14px; } /* Görünüm ayar sayfası renk örnekleri */ .accent-swatch { display: inline-block; width: 17px; height: 17px; border-radius: 50%; vertical-align: -3px; margin-right: 7px; border: 1px solid rgba(0,0,0,.14); } .accent-swatch-teal { background: #315fd0; } .accent-swatch-blue { background: #2563eb; } .accent-swatch-violet { background: #7c3aed; } .accent-swatch-amber { background: #d97706; } .accent-swatch-rose { background: #be123c; } .accent-swatch-v2 { background: linear-gradient(135deg, #2747d6, #2a5fe0); } .accent-swatch-navy { background: #000b49; } /* Tema anahtarı: ay/güneş ikon geçişi */ .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-toggle .theme-icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; } * { box-sizing: border-box; } /* `hidden` NİTELİĞİ HER ZAMAN GİZLER (2026-08-26 kullanıcı bildirimi: "karma çözüm" listesi ders seçilmeden ve tür karma değilken de görünüyordu). Tarayıcının `[hidden]` kuralı UA katmanındadır: `display` veren HERHANGİ bir yazar kuralı onu ezer — burada `.field { display: flex }` ve `.cprog-karma-secim { display: flex }` eziyordu ve JS'in `el.hidden = true` demesi hiçbir şey yapmıyordu. Depoda bu tuzak yedi kez tek tek yamanmıştı; kural artık genel, sekizinci ekran kendiliğinden kapsanır. Bilerek görünür kalması gereken eleman `hidden` TAŞIMAZ (tarandı: öyle bir kural yok). */ [hidden] { display: none !important; } html { color-scheme: light; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.5; } a { color: var(--primary-dark); } button, input, select, textarea { font: inherit; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .container { width: min(1180px, calc(100% - 32px)); margin-inline: auto; } .page-content { padding-block: 28px 56px; min-height: calc(100vh - 130px); } .topbar { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); } .topbar-inner { min-height: 68px; display: flex; align-items: center; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; } .brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg, #17a594, #0a7469); color: white; font-weight: 800; box-shadow: 0 6px 14px rgba(15,139,124,.24); } .brand strong, .brand small { display: block; line-height: 1.1; } .brand small { margin-top: 3px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } /* min-width: 0 ŞART. Flex öğelerinin varsayılanı min-width:auto'dur; bu, öğenin içeriğinden daha dar olmasını ENGELLER. flex-shrink:1 yazılı olsa bile hiçbir şey küçülmez ve üst çubuk viewport'u taşar (ölçüldü: 1280px'de 99px taşma). */ .main-nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; } .main-nav a, .main-nav span { padding: 8px 11px; border-radius: 9px; color: #435158; text-decoration: none; font-size: 14px; font-weight: 650; } .main-nav a:hover { background: var(--primary-soft); color: var(--primary-dark); } .nav-approval { display: inline-flex; align-items: center; gap: 6px; } .nav-badge { min-width: 20px; height: 20px; display: inline-grid !important; place-items: center; padding: 0 6px !important; border-radius: 999px !important; background: var(--danger) !important; color: #fff !important; font-size: 10px !important; font-weight: 850 !important; line-height: 1 !important; } .nav-soon { opacity: .48; cursor: not-allowed; } .account { display: flex; align-items: center; gap: 9px; font-size: 13px; min-width: 0; flex-shrink: 0; } .account form { margin: 0; } .account-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; } .role-badge { padding: 4px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-size: 11px; font-weight: 800; } .link-button { border: 0; background: none; color: var(--danger); cursor: pointer; padding: 6px; font-weight: 700; } .nav-toggle { display: none; margin-left: auto; border: 1px solid var(--border); background: var(--surface); border-radius: 9px; padding: 7px 10px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; } /* DİKEY RİTİM: .card'ın kendi kenar boşluğu YOK — ızgara içinde (content-grid) boşluğu grid gap verir, orada margin çift boşluk yapardı. Ama sayfanın DOĞRUDAN çocuğu olan kartlar birbirine yapışıyordu (ölçüldü: ardışık iki kart arası 0px; başlık ve metrik ızgarası kendi alt boşluğuna sahip olduğu için sorun yalnız kartlarda görünüyordu). Kural bu yüzden yalnız doğrudan çocuklara veriliyor ve son karta uygulanmıyor (sayfa altında fazla boşluk kalmasın). */ .page-content > .card:not(:last-child), .page-content > .content-grid:not(:last-child) { margin-bottom: 22px; } .card-heading h1, .card-heading h2 { margin: 3px 0 8px; line-height: 1.2; } .card-heading p { margin: 0; color: var(--muted); } .eyebrow { margin: 0; color: var(--primary-dark) !important; font-size: 12px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .auth-page { background: radial-gradient(circle at 15% 15%, #dff6f0 0, transparent 32%), radial-gradient(circle at 85% 85%, #e7eef9 0, transparent 35%), var(--bg); } .auth-page .page-content { display: grid; place-items: center; min-height: calc(100vh - 65px); } .auth-shell { width: min(460px, 100%); } .setup-shell { width: min(680px, 100%); } .auth-brand { display: flex; justify-content: center; align-items: center; gap: 13px; margin-bottom: 20px; } .auth-brand strong, .auth-brand span { display: block; } .auth-brand strong { font-size: 22px; } .auth-brand span { color: var(--muted); font-size: 13px; } .brand-mark-large { width: 52px; height: 52px; border-radius: 16px; font-size: 22px; } .auth-card { padding: 30px; } .auth-card .card-heading { margin-bottom: 22px; } /* ZORUNLU PAROLA YENİLEME (2026-08-21). Sayfa menüsüz açılır (hideNavigation): kilitli kullanıcının tek işi bu form. Kurallar ÖNCEDEN yazılır ki kullanıcı politikayı deneme yanılmayla öğrenmesin. */ .parola-yenile-karti { max-width: 520px; margin: 40px auto; } /* PAROLA ÖNERİSİNDEKİ HESAP BİLGİLERİ (2026-08-23): kullanıcı hangi hesapla girdiğini görsün. İki sütun (etiket · değer); dar ekranda alt alta iner. */ .parola-hesap { display: grid; gap: 6px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2, var(--bg)); } .parola-hesap > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: baseline; } .parola-hesap dt { color: var(--muted); font-size: 12px; } .parola-hesap dd { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; } /* İlk giriş ekranındaki düzenlenebilir hesap alanları: parola alanlarından görsel olarak ayrılsın diye kendi çerçevesinde (aynı formun içinde, tek "mevcut parola" doğrulamasıyla). */ .parola-bilgi-alani { display: grid; gap: 10px; margin: 0 0 16px; } @media (max-width: 520px) { .parola-hesap > div { grid-template-columns: minmax(0, 1fr); gap: 0; } } .parola-kural { margin: 0 0 18px; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.6; } .parola-kural strong { color: var(--text); } .parola-yenile-cikis { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .auth-help { margin: 20px 0 0; font-size: 13px; color: var(--muted); text-align: center; } .stack-form { display: flex; flex-direction: column; gap: 15px; } /* Parola göster/gizle: sarmalı ve düğmeyi app.js kuruyor (her parola alanına otomatik). Girdinin sağ boşluğu düğme kadar artırılır ki yazı gözün altına girmesin. */ .password-wrap { position: relative; display: flex; width: 100%; } .password-wrap input { padding-right: 40px; } .password-toggle-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; } .password-toggle-btn:hover, .password-toggle-btn:focus-visible { color: var(--text); background: var(--surface); } /* SABİT 1fr 1fr DEĞİL: üç alanlı gruplarda üçüncü alan tek başına alt satıra düşüyor ve her grup bir "öksüz satır" bırakıyordu — 19 alanlı form gereksiz yere iki kat uzuyordu (ölçüldü: 6 grubun 6'sı da öksüz satır üretiyordu). auto-fit + minmax: yer varsa 3 alan yan yana, dar kapsayıcıda kendiliğinden 2'ye sonra 1'e iner. İki alanlı mevcut formlar DEĞİŞMEZ: auto-fit boş kolonu topladığı için yine 2 sütun. */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 13px; } .field { display: flex; flex-direction: column; gap: 6px; } /* legend, span ile AYNI kurala bağlı: onay kutusu grupları
ile yazılıyor ve legend'ın tarayıcı varsayılanı (16px/400) alan etiketlerinin yanında bariz kaçıyordu. Sıfırlama da gerekiyor — legend'ın kendi padding'i var. */ .field span, .field legend { font-size: 13px; font-weight: 750; } /* Alan altı ipucu (2026-08-25): bu kural YALNIZ koçluk formunda tanımlıydı, başka ekranda `` gövde puntosunda kocaman basılıyordu (kayıt görüşmesinde ölçüldü). */ .field > small { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; font-weight: 500; line-height: 1.35; } .field legend { padding: 0; } /* TEK GİRDİ BOYU (2026-08-18, ölçüldü: filtre formları 40px/14px, kayıt formları 46-48px/16px iki ayrı boy kullanıyordu — kullanıcı "genel boyut sorunu" olarak gördü). Taban 40px/14px. */ .field input, .field select, .field textarea { width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid #cbd7da; border-radius: 10px; background: #fff; color: var(--text); font-size: 14px; outline: 0; transition: border-color .15s, box-shadow .15s; } /* Telefonda 16px kalır: iOS, 16px altındaki girdiye odaklanınca sayfayı kendiliğinden yakınlaştırır. */ @media (max-width: 700px) { .field input, .field select, .field textarea { font-size: 16px; } } /* ONAY KUTUSU VE RADYO FORM ALANI DEGILDIR (2026-09-01'de olculdu): ustteki width:100% kurali, `field` sinifli fieldset icindeki CHECKBOX'a da uygulanip kutuyu 259px yapiyordu — kutu satiri yutuyor, yanindaki ad 0px'e buzulup HARF HARF dikey akiyordu (koc formu koordinator listesi; kullanici ekran goruntusuyle bildirdi). Ozgulluk (0,2,1) > (0,1,1): her ekranda kazanir, yalniz kutu/radyo tiplerini etkiler. */ .field input[type="checkbox"], .field input[type="radio"] { width: auto; min-height: 0; padding: 0; } .field textarea { min-height: 112px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); box-shadow: var(--focus); } .field input:disabled { background: #edf2f3; color: var(--muted); } /* text-decoration TABANDA kapatılır (2026-08-18): yalnız .button-secondary'de yazılıydı, bu yüzden bağlantı alt çizgisini miras alıyordu — ölçüldü, 7 ekranda 59 düğme-bağlantısının 26'sı altı çiziliydi ("Randevu Oluştur" ekran görüntüsü). */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border: 1px solid transparent; border-radius: 10px; padding: 8px 14px; cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; transition: background .15s, transform .1s; } .button:active { transform: scale(.99); } .button-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 4px 10px rgba(15,139,124,.2); } .button-primary:hover { background: var(--primary-dark); } .button-full { display: flex; width: 100%; } .button:disabled { opacity: .5; cursor: not-allowed; } .button-secondary { background: #fff; border-color: #cbd7da; color: #334249; text-decoration: none; } .button-secondary:hover { background: #f1f5f6; } .button-ghost { background: transparent; border-color: transparent; color: var(--muted); text-decoration: none; } .button-ghost:hover { background: #eaf0f1; color: var(--text); } .button-small { min-height: 34px; padding: 6px 11px; font-size: 12px; } .flash { margin-bottom: 18px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); } .flash-error { border-color: #f1c5c5; background: var(--danger-soft); color: #8f2929; } .flash-success { border-color: #bce4cd; background: var(--success-soft); color: var(--success); } .flash-warning { border-color: #ecd4a9; background: #fff8e9; color: #8b5b12; } .flash-info { border-color: #c9d9ea; background: #f0f6fc; color: #315f8f; } .hero { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 22px; padding: 26px 28px; border-radius: 20px; color: #fff; background: linear-gradient(115deg, #0c756a, #139383 55%, #2b7386); box-shadow: 0 14px 34px rgba(12,117,106,.18); } .hero h1 { margin: 4px 0 6px; font-size: clamp(23px, 3vw, 31px); line-height: 1.15; } /* Günün sözü: karşılamanın sağında, cam panel; açılışta yavaşça belirir ve KALIR. Zemin hero'nun koyu gradyanı olduğundan renkler sabit beyaz tonlar — temadan bağımsız. */ .hero-quote { min-width: 0; margin: 0; padding: 16px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; background: rgba(255,255,255,.1); backdrop-filter: blur(4px); animation: hero-quote-in 1.8s ease-out both; } .hero-quote blockquote { margin: 0 0 8px; color: #fff; font-size: 14px; line-height: 1.55; font-style: italic; } .hero-quote figcaption { color: rgba(255,255,255,.85); font-size: 12px; font-weight: 700; } .hero-quote figcaption small { display: block; margin-top: 2px; color: rgba(255,255,255,.6); font-size: 10.5px; font-weight: 500; } @keyframes hero-quote-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .hero-quote { animation: none; } } @media (max-width: 900px) { .hero-quote { display: none; } } .hero p { margin: 0; color: rgba(255,255,255,.82); } .hero .eyebrow { color: #bcf4e9 !important; } .hero-role { flex: none; padding: 7px 12px; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; background: rgba(255,255,255,.11); font-size: 12px; font-weight: 800; } .metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 22px; } /* METRIK SERIDININ ALTINDAKI SUZGEC NOTU (2026-08-24): kartlar yalnız "yapacağımız" denemeleri sayıyor; süzülen kayıt sayısı yazılmazsa kullanıcı onları kaybolmuş sanar. Metrik şeridinin `margin-bottom`u kadar yukarı çekilir ki not kartlara ait görünsün. */ .pano-suzgec-notu { margin: -14px 0 20px; color: var(--muted); font-size: 13px; line-height: 1.5; } .metric-card { position: relative; overflow: hidden; min-height: 154px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .metric-card::after { content: ""; position: absolute; width: 70px; height: 70px; border-radius: 50%; right: -22px; top: -22px; background: currentColor; opacity: .08; } .metric-card span, .metric-card small { display: block; } .metric-card span { color: var(--muted); font-size: 13px; font-weight: 750; } .metric-card strong { display: block; margin: 8px 0 5px; font-size: 36px; line-height: 1; } .metric-card small { color: var(--muted); font-size: 12px; } /* DERS DERS DÖKÜM (2026-08-23): metrik kartının altına ders adı + kalan hak listesi. Sayı sağa yaslı hizalanır — göz aşağı inerken rakamlar tek sütunda okunur. Kart yüksekliği ızgaradaki diğerlerine uysun diye ekrandaki satır sayısı 4 ile sınırlı (fazlası "+N ders daha" olarak yazılır; gizleme sessiz değildir). */ /* Toplam rakamı kalkınca döküm kartın gövdesi oldu: üstten biraz nefes, satırlar biraz daha büyük (12 -> 13 px) — kart yüksekliği komşularıyla aynı kalsın diye tavan hâlâ 4. */ .metric-breakdown { margin: 12px 0 0; padding: 0; list-style: none; } .metric-breakdown li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px solid var(--border); font-size: 13px; } .metric-breakdown li:first-child { border-top: 0; } .metric-breakdown span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .metric-breakdown b { flex: none; color: var(--text); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; } .metric-breakdown-more span { font-style: italic; } .metric-breakdown-more b { color: var(--muted); } /* LİSTEDEKİ DERS DÖKÜMÜ (2026-08-23): toplam rakamın altında "ders adı — kalan hak". Sayı sağa yaslı ve tabular: göz sütun boyunca aynı hizada iner. Genişlik hücreyle sınırlı; uzun ders adı kırpılır, satır yüksekliği sabit kalır (tablo derleme kuralı). */ .paket-dokum { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; max-width: 150px; } .paket-dokum span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .paket-dokum b { flex: none; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; } .paket-dokum-more span { font-style: italic; } /* Plan seçicisinde konunun ünitesi/kataloğu (2026-08-23): "8. Sınıf" düğmesi LGS'yi de getirdiği için konunun nereden geldiği chip üstünde yazar. Soluk ve küçük: seçimi değil ayırt etmeyi kolaylaştırır. */ .chip-unite { color: var(--muted); font-weight: 600; font-size: 11px; } /* DENEME SONUÇLARI KARTI (2026-08-23) — tablo çipleri, gelişim ızgarası, giriş formu. */ .deneme-ders-cip { display: inline-flex; align-items: baseline; gap: 5px; margin: 2px 6px 2px 0; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); font-size: 12px; } .deneme-ders-cip span { color: var(--muted); } .deneme-ders-cip b { color: var(--text); font-variant-numeric: tabular-nums; } .deneme-grafik-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 8px; } .line-chart { margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .line-chart-title { font-size: 13px; font-weight: 750; color: var(--text); margin-bottom: 4px; } .line-chart-title small { color: var(--muted); font-weight: 500; } .line-chart-grid { stroke: var(--border); stroke-width: 1; } .line-chart-axis { fill: var(--muted); font-size: 10px; } .line-chart-path { fill: none; stroke: var(--primary); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; } .line-chart-dot { fill: var(--surface); stroke: var(--primary); stroke-width: 2; } .line-chart-value { fill: var(--text); font-size: 10px; font-weight: 700; } .deneme-yorum { margin-top: 12px; border: 1px dashed var(--border); border-radius: 12px; padding: 8px 12px; } .deneme-yorum > summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .deneme-yorum > summary span { color: var(--muted); font-size: 12px; } .deneme-yorum-metin { margin: 10px 0 0; line-height: 1.6; } /* SONUÇ GİRİŞİ — düz akış (2026-08-23). Çerçeve yok: kartın kendi başlık düzeniyle (overview- section-heading) devam eder. Seçici satırı: DEĞİL bordürlü kare: kâğıda basılınca form öğeleri tarayıcıya göre farklı çiziliyor, kare her yerde aynı basılır. Marka bandı ve renkler print-color-adjust ile KÂĞITTA DA basılır (.report-document). */ .program-sheet .report-document-header { padding: 14px 16px; border-bottom: 0; border-radius: 12px; background: linear-gradient(120deg, #000b49 0%, #10225f 55%, #1c3a8f 100%); color: #fff; box-shadow: inset 0 -3px 0 #f9be03; } .program-sheet .report-brand strong { color: #fff; } .program-sheet .report-brand small { color: #c8d2f0; } .program-sheet .report-label span { color: #f9be03; } .program-sheet .report-label small { color: #dfe6fa; } .program-sheet .report-brand-logo { border-radius: 14px; background: #fff; padding: 5px; } .program-grid { table-layout: fixed; } .program-grid th { width: 14.28%; padding: 7px 4px; border: 1px solid #0b1a55; background: #000b49; color: #fff; text-align: center; font-size: 9.5px; letter-spacing: .06em; } .program-grid td { height: 96px; padding: 5px 4px; border: 1px solid #cfd8dc; vertical-align: top; } .program-grid-gorev { margin-bottom: 5px; padding: 4px 5px; border-left: 3px solid #f9be03; border-radius: 4px; background: #f4f7fc; } .program-grid-gorev b { display: block; color: #10225f; font-size: 9px; text-transform: uppercase; letter-spacing: .03em; } .program-grid-gorev span { display: block; font-size: 9.5px; line-height: 1.3; } .program-grid-gorev small { display: block; margin-top: 1px; color: #5d6b72; font-size: 8.5px; } .program-grid-gorev .program-grid-konu { padding: 3px 0; } .program-grid-gorev .program-grid-konu + .program-grid-konu { border-top: 1px dashed #9aa8b9; } .program-grid-gorev .program-grid-konu em { display: block; margin-top: 1px; color: #4b5b70; font-size: 8.5px; font-style: normal; font-weight: 700; } /* SAAT/SÜRE ROZETİ (2026-08-29): konunun ÖNÜNDE, kalın ve koyu. Ölçü satırının içinde 8,5 puntoyla basılırken kâğıtta gözden kaçıyordu — kullanıcı "gözüksün" dedi. Kutu kenarlığı gri basan yazıcıda da okunur (kâğıt paleti temadan bağımsızdır). */ .program-grid-gorev .program-grid-saat { display: inline-block; margin-right: 4px; padding: 0 3px; border: 1px solid #8fa0b5; border-radius: 3px; background: #eef2f8; color: #10225f; font-size: 9px; font-weight: 800; white-space: nowrap; } /* ÜÇLÜ YAZMA HANELERİ: Doğru / Yanlış / Boş sırası tablonun üstünde yalnız bir kez yazılır. Kartın içine D/Y/B harfleri koymak dar gün sütunlarında kutuları sıkıştırıyordu. */ .program-grid-dyb-aciklama { margin: 0 0 5px; color: #4b5b70; font-size: 8.5px; line-height: 1.35; } .program-grid-dyb-aciklama strong { color: #10225f; } /* KUTULAR EZİLMEZ (2026-08-29 kullanıcı: "PDF'te boş kutular gözükmüyor"). Ölçüldü: 7 sütunlu A4'te görev kutusuna 68 px kalıyor, üç kutu + boşluklar 74 px istiyordu; `flex: 0 1 22px` + `min-width: 0` ikilisi kutuları 2 px'e ezip çizgiye çeviriyordu — kâğıtta hiç görünmüyor. Şimdi 18 px SABİT (3×18 + 2×4 = 62 px, 6 px pay) ve şerit gerekirse SARAR: sığmadığında ezilmek yerine alt satıra iner. Depoda yazılı tuzağın aynısı (müfredat kapsaması, sıfır genişliğe düşen konu adı). */ .program-grid-dyb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 9px; } /* D/Y/B HARFİ KUTUNUN ÜSTÜNDE (2026-09-04 kullanıcı: "tablodaki kutucuklarda D Y B başlıkları yok"). Harf ::before ile basılır ve kutunun DIŞINA taşar (position:absolute): kutu genişliği değişmez, yani 2026-08-26'da harflerin kaldırılma gerekçesi olan "dar hücreyi taşırıyor" sorunu geri gelmez. Üstte yer açmak için satıra 8px boşluk. */ .program-grid-dyb b { position: relative; display: inline-block; flex: 0 0 18px; min-width: 18px; height: 13px; border: 1px solid #6f8299; border-radius: 3px; background: #fff; } .program-grid-dyb b[data-dyb]::before { content: attr(data-dyb); position: absolute; left: 0; right: 0; top: -7px; text-align: center; font-size: 6px; font-weight: 700; line-height: 1; color: #6f8299; } /* KAYNAK HANESİ (2026-09-05 kullanıcı: "3 tane soru çözme kutusunun altına hangi kaynaktan çözdün kutusu isteğe bağlı çıksın"). D/Y/B kalıbının aynısı: etiket ::before ile kutunun ÜSTÜNDE, kutu hücre genişliğine yayılır. Yalnız kaynak=1 istenince basılır. */ .program-grid-kaynak { display: flex; margin-top: 11px; } .program-grid-kaynak b { position: relative; display: block; flex: 1 1 auto; min-width: 46px; height: 13px; border: 1px solid #6f8299; border-radius: 3px; background: #fff; } .program-grid-kaynak b[data-dyb]::before { content: attr(data-dyb); position: absolute; left: 0; right: 0; top: -7px; text-align: center; font-size: 6px; font-weight: 700; line-height: 1; color: #6f8299; } /* Harf icin ust bosluk: :has() destegine birakilmaz, kutularin hepsi harfli. */ /* Aynı ders kutusunda birden çok görevin kendi satırı olduğunda araları ayrılsın. */ .program-grid-gorev .program-grid-dyb + .program-grid-konu { margin-top: 5px; } /* IZGARA BAŞLIĞINDA GÜN TARİHİ (2026-09-03): kayan pencerede "Perşembe" tek başına hangi haftanın perşembesi olduğunu söylemez; gün adının altına kısa tarih yazılır. */ .program-grid-gun-tarih { display: block; font-weight: 400; font-size: 10.5px; color: var(--pd-muted, #555); } .program-grid-bos { color: #b6c1c6; font-size: 10px; } .program-gunsuz-baslik { margin: 12px 0 4px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .program-gunsuz { margin: 0; padding-left: 16px; font-size: 10.5px; line-height: 1.6; } .program-liste-not { margin: 0 0 8px; padding: 7px 10px; border-left: 3px solid #f9be03; background: #fffaf0; font-size: 10.5px; } .program-liste thead th { border: 1px solid #0b1a55; background: #000b49; color: #fff; letter-spacing: .05em; } .program-liste td { padding: 8px 6px; } .program-liste tbody tr:nth-child(even) td { background: #f6f8fc; } .program-liste-kutu { width: 70px; text-align: center; } /* Soru dökümü haneleri (2026-08-18): dört dar sütun A4'e sığsın diye 46px; başlık iki satırlı olduğu için "Yanlış" tek satırda durur. Kitap okumada dördü tek hücreye birleşir. */ .program-liste-kutu-dar { width: 46px; text-align: center; } .program-liste-grup { font-size: 8.5px; letter-spacing: .06em; } .program-liste-okuma small { display: block; margin-bottom: 3px; color: #5d6b72; font-size: 7.5px; letter-spacing: .04em; } .program-check { display: inline-block; width: 17px; height: 17px; border: 1.6px solid #10225f; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 2px #fff; } /* İzlence çıktısı: bu hafta altın vurgulu, geçmiş haftalar soluk; hedefsiz geçmiş dikkat çeker. */ .pacing-print-no { width: 52px; text-align: center; } .pacing-print-no small { display: block; color: #b98a00; font-size: 7.5px; font-weight: 800; letter-spacing: .05em; } .pacing-print-simdi td { background: #fff7dc !important; box-shadow: inset 0 0 0 1px #f9be03; } .pacing-print-gecmis td { color: #5d6b72; } .pacing-print-gecmis .pacing-print-bos { color: #c33149; font-weight: 800; } .pacing-print-bos { color: #b6c1c6; } /* İzlence çıktısındaki akademik takvim sütunu. Bu blok BASILI belgeye ait: renkler bilerek sabit (belge her temada aynı kâğıda çıkar, print-document.php kalıbı) ve tür adı METİN olarak yazıldığı için gri basan yazıcıda da okunur. */ .pacing-print-takvim { width: 168px; } .pacing-print-eslik { width: 190px; color: #3d4a51; font-size: 9px; } .pacing-eslik-hucre { color: var(--muted); font-size: 13px; max-width: 260px; } .pacing-eslik-baslik small { display: block; font-weight: 500; } .pacing-print-olay { display: block; font-size: 8px; line-height: 1.35; color: #3d4a51; } .pacing-print-olay b { color: #172126; } .pacing-print-kapali { display: block; margin-top: 2px; font-size: 8px; font-weight: 800; color: #c33149; } .program-imza { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 22px; } .program-imza span { display: block; color: #68767d; font-size: 9.5px; } .program-imza i { display: block; margin-top: 20px; border-bottom: 1px dotted #8fa5ab; } /* Çalışma günü çipleri (öğretmen listesi, koç profili): kısa gün rozetleri yan yana. */ /* ÖZGÜLLÜK ŞART (2026-08-19'da tarayıcıda ölçüldü): `.data-table td span` (0,1,2) sade `.work-day-chips`i (0,1,0) eziyor ve kap `display: block` oluyordu — gap ölüyor, gün çipleri BİTİŞİK basılıyordu ("Sa ÖSÇa ÖSPe ÖS"). Çipler de blok olup alt alta düşüyordu. Aynı tuzak menüde bir kez yaşandı (.main-nav span > .nav-group-divider); tablo öneki kaldırılırsa geri döner. */ .work-day-chips, .data-table td .work-day-chips { display: inline-flex; flex-wrap: wrap; gap: 3px; } .work-day-chips .status, .data-table td .work-day-chips .status { display: inline-block; padding: 2px 6px; font-size: 10.5px; } /* Koçluk çalışma programı takvimi: randevu takvimi kalıbı + görev çipleri. Çip rengi durumdan gelir (status-* sınıfları); + hücreye görev ekler. */ .cprog-baslik { min-width: 190px; text-align: center; font-size: 13.5px; } .cprog-add { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 15px; font-weight: 800; line-height: 1; text-decoration: none; } .cprog-add:hover { border-color: var(--brand-gold, #f9be03); background: var(--surface-2, #f3f6fb); } .cprog-chip { display: block; position: relative; margin-top: 6px; padding: 6px 9px 6px 10px; border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: 8px; background: var(--surface); box-shadow: 0 1px 3px rgba(9, 20, 60, .07); font-size: 12px; line-height: 1.4; } /* AYNI DERS TEK KUTUDA (2026-08-29 kullanıcı: "PDF'te aynı dersten farklı konu eklediğimizde çıkan stili çalışma programının kendisinde de yap"). Ders adı bir kez başlıkta; konular altında kendi çiplerinde kalır — çipler tıklanabilir olmayı sürdürmeli (onay, düzenle, çoğalt, sürükle), o yüzden kutu yalnız SARMALAR, çipleri satıra çevirmez. */ .cprog-ders-grup { margin-top: 6px; padding: 6px 7px 7px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); } .cprog-ders-grup-basligi { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; padding: 0 2px; font-size: 12px; } .cprog-ders-grup-basligi small { color: var(--muted); font-size: 10.5px; font-weight: 500; } /* İçerideki ilk çipin üst boşluğu kutu dolgusuyla ikilenmesin. */ .cprog-ders-grup > .cprog-chip:first-of-type { margin-top: 4px; } /* Çip işlem şeridi: ✓ yapıldı, ✕ çalışılmadı, çöp kaldır — tıklanır mini düğmeler. */ /* İŞLEM ŞERİDİ SARAR (2026-08-26): çoğalt düğmesi eklenince altı düğme dar telefon hücresine sığmadı ve SAYFA 4px yana kaydı (ölçüldü: düğme kaldırılınca taşma 0). flex-wrap satırı ikiye böler — hücre genişlemez, sayfa kaymaz. */ .cprog-chip-islem { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; padding-top: 5px; border-top: 1px dashed var(--border); } /* İKİ ŞERİT (2026-08-29): üstte göreve dokunanlar (düzenle/çoğalt/kaldır), altta sonucu işaretleyenler (✓ ◐ ✕). Alt şeridin kendi kesikli çizgisi YOK — iki çizgi üst üste çipi kutu kutu gösterir; boşluk ayırmaya yetiyor. Durum düğmeleri sağa değil SOLA hizalı kalır ki göz üstteki şeridin altında aynı noktadan devam etsin. */ .cprog-chip-durum { margin-top: 4px; padding-top: 0; border-top: 0; } /* Üç durum düğmesi TEK formda (2026-08-30): form flex öğesi değil kabuktur — contents olmadan üç düğme tek blokta yığılır (tablo düğmelerindeki kalıbın aynısı). */ .cprog-chip-durum form { display: contents; } /* Kapalı kapsama satırı: sayaç + aç/gizle düğmesi tek satırda. */ .cprog-kapsama-kapali { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 0; color: var(--muted); font-size: 13px; } .cprog-chip-islem form { margin: 0; } .cprog-mini { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 800; line-height: 1; cursor: pointer; } .cprog-mini-ok:hover, .cprog-mini-ok.is-secili { border-color: var(--success); background: var(--success-soft, #e2f3ec); color: var(--success); } /* Düzenle kalemi (2026-08-25): etiketi — buton tabanını alır, bağlantı çizgisi taşımaz. */ .cprog-mini-duzenle { text-decoration: none; font-size: 11px; } .cprog-mini-duzenle:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); } .cprog-mini-miss:hover, .cprog-mini-miss.is-secili { border-color: var(--danger); background: var(--danger-soft, #fbe4e8); color: var(--danger); } .cprog-mini-sil { font-size: 10px; } .cprog-mini-sil:hover { border-color: var(--danger); color: var(--danger); } /* TABLO ARAÇLARI (2026-08-21): otomatik doldur + toplu kaldır, çalışma tablosunun SAĞ ÜSTÜNDE. `margin-left: auto` şeridin sağ ucuna iter; teslim rozeti ve dönem sekmeleriyle aynı satırda kalır, dar ekranda kendi satırına sarar. */ /* `order` ile en SAĞA: şeritte `.cprog-donem` zaten `margin-left: auto` taşıyor, yani boşluk ondan ÖNCE toplanıyor ve sonrasındaki her şey sağa paketleniyor. İkinci bir `auto` kenar boşluğu koymak boşluğu ikiye böler ve grup ortada kalırdı (ölçüldü: 533px açıkta). Kaynak sırası anlam sırasıdır (tablo notunun hemen ardı), görsel sıra buradan verilir. */ /* Araç şeridi TAM SATIR (2026-09-02 kullanıcı: "otomatik doldurla toplu sil sağda olsun, diğeri solda"): Geçmişe Göre Devam solda kalır, .cprog-arac-sag margin-left:auto ile sağa yaslanır. Dar ekranda sağ grup sarar ve alt satıra iner — yatay taşma yok. */ .cprog-tablo-araclar { display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: center; gap: 8px; order: 9; } .cprog-arac-sag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; } .cprog-week-ust .cprog-tablo-araclar .button { min-height: 34px; } /* Ay görünümünde tablo şeridi yok; araçlar için ince bir şerit açılır. */ .cprog-ay-ust { justify-content: flex-end; } /* OTOMATİK PROGRAM PANELİ: tablonun altında açılır kapanır. Özet satırı tıklanabilir olduğunu imleçle söyler; ok işareti tarayıcının kendi
göstergesidir. */ .cprog-otomatik > summary { cursor: pointer; } .cprog-otomatik > summary::-webkit-details-marker { color: var(--muted); } .autofill-panel { display: grid; gap: 14px; margin-top: 14px; } /* KISMİ YENİLEME sırasında kap soluklaşır: kullanıcı "bir şey oluyor" görsün. Yükseklik sabit kalır (opacity), yoksa sayfa zıplar ve tıkladığı yer kayar. */ .parca-yenileniyor { opacity: .55; transition: opacity .12s ease; pointer-events: none; } /* ÇIKARILABİLİR ÖNİZLEME GÖREVİ (2026-08-21): çip artık bir