/* ============================================================ Müzik Okulu Yönetim Sistemi — app.css Kimlik: bordo (--brand) + pirinç (--brass). İki tema: "Ferah Bordo" (açık, varsayılan) ve "Gece Bordo" (koyu, 14 Eylül 2026). Tema İŞLETİM SİSTEMİNDEN OKUNMAZ: sunucuda kullanıcının kayıtlı tercihiyle (users.tema) basılır. Eskiden prefers-color-scheme paneli kullanıcı istemeden karartıyordu — bu yüzden koyu tema YALNIZ [data-theme="koyu"] ile açılır. Yeni renk DAİMA aşağıdaki token'lara bağlanır; kural gövdesine sabit hex yazılmaz. ============================================================ */ :root{ color-scheme:light; /* ZORUNLU: native tarih/select kontrolleri açık çizilsin */ /* Nötr */ --bg:#f5f6f8; --surface:#ffffff; --surface-2:#edeff3; --inset:#f8f9fb; --border:#e3e6eb; --border-input:#878e9b; /* form kenarı — WCAG 1.4.11 (3.30:1) */ --text:#23202a; --muted:#5d5866; --faint:#6e6878; /* Kimlik */ --brand:#8c3552; --brand-2:#a84a6c; --brand-ink:#6e1e3c; /* logo / yazdırma föyü */ --brand-soft:#f7eef2; /* aktif nav / seçili satır */ --brass:#b07f2e; /* yalnız DEKOR */ --brass-ink:#79571a; /* METİN (6.58:1) */ --primary:#8c3552; --primary-fg:#ffffff; /* Kenar çubuğu — AÇIK */ --sidebar-bg:#ffffff; --sidebar-text:#3a3542; --sidebar-muted:#6f6979; --sidebar-active:#f7eef2; --sidebar-active-fg:#8c3552; /* Durum */ --ok:#1f7a4d; --ok-bg:#e8f5ee; --warn:#8f5510; --warn-bg:#fdf1de; --crit:#b3261e; --crit-bg:#fdeceb; --info:#2f5d94; --info-bg:#e9f1fa; /* Slot renkleri (Faz 4'te kullanılacak; bileşen CSS'i henüz yok). ⚠️ FAZ 4 İÇİN BAĞLAYICI — WCAG 1.4.1: renk TEK ayırt edici olamaz. (a) ZORUNLU: her slot metinsel bir işaret taşır — yapıldı "✓", yapılmadı "✕", boş "·" — ve durum ayrıca title + aria-label ile yazılır ("12 Eylül 14:00 — yapıldı"). Renk yalnız DESTEKLEYİCİDİR. (a) yapılmadan .slot-strip yazılmayacak: kırmızı-yeşil renk körlüğü erkeklerde ~%8, öğretmen paneli bu ayrımın üstüne kuruluyor. (b) Kenarlıklar 3:1'e çekildi (WCAG 1.4.11) — eski değerler 1.29–1.75:1 idi, slotun kendisi kart üstünde seçilmiyordu. (c) --slot-no-bg koyulaştırıldı: eski #fdeae8 ile --slot-ok-bg arasındaki oran 1.006:1 idi, yani gri tonda (renk körlüğü / siyah-beyaz baskı) BİREBİR AYNI. Yeni değerle 1.17:1'e çıkıyor. (c) tek başına yeterli DEĞİL — (a) şart. */ --slot-ok-bg:#dcf3e6; --slot-ok-fg:#14603c; --slot-ok-bd:#49a676; /* bd 3.00:1 */ --slot-no-bg:#fad4d0; --slot-no-fg:#9c2820; --slot-no-bd:#e67265; /* fg 5.62:1 · bd 3.02:1 */ --slot-idle-bg:#f1f3f7; --slot-idle-fg:#5d5866; --slot-idle-bd:#8695b0; /* bd 3.03:1 */ /* Doku */ /* Odak halkası: eski rgba(140,53,82,.28) beyaz üstünde ~1.3:1 idi — pratikte görünmüyordu. .45'e çıkarıldı VE aşağıda :focus-visible outline'ı korundu (eskiden `outline:none` global outline'ı iptal edip yerine bu halkayı koyuyordu, yani klavye kullanıcısına neredeyse hiçbir odak göstergesi kalmıyordu). */ --ring:color-mix(in srgb,var(--brand) 45%,transparent); --scrim:rgba(24,22,30,.42); /* mobil menü perdesi */ --shadow:0 1px 2px rgba(24,22,30,.04),0 6px 18px rgba(24,22,30,.05); --shadow-lg:0 10px 40px rgba(24,22,30,.10); --radius:12px; --radius-sm:8px; --font-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif; --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-mono:"SFMono-Regular","Cascadia Code",Consolas,"Roboto Mono",ui-monospace,monospace; } /* ---------- KOYU TEMA ("Gece Bordo") ---------- Yalnız ekranda: yazdırma her zaman açık tema tokenlarıyla basılır (@media screen). Kimlik rengi koyu zeminde okunabilsin diye AÇILDI (#e08aa8, zemine 6.9:1); bu yüzden birincil düğmenin yazısı beyaz değil KOYU (--primary-fg) — açık pembe üstünde beyaz 2.6:1 kalırdı. Durum renkleri (ok/warn/crit/info) metin olarak koyu yüzeyde ≥4.5:1, zemin tonları düşük doygun. */ @media screen{ :root[data-theme="koyu"]{ color-scheme:dark; --bg:#121117; --surface:#1b1a21; --surface-2:#27252e; --inset:#17161c; --border:#302e38; --border-input:#77727f; --text:#ece9f1; --muted:#b6b0c0; --faint:#9b95a6; --brand:#e08aa8; --brand-2:#eba3bc; --brand-ink:#f2bdd0; --brand-soft:#35202b; --brass:#c89b4d; --brass-ink:#e2bb72; --primary:#e08aa8; --primary-fg:#24101a; --sidebar-bg:#17161c; --sidebar-text:#dcd8e3; --sidebar-muted:#a09aab; --sidebar-active:#35202b; --sidebar-active-fg:#f0b0c6; --ok:#66c795; --ok-bg:#15301f; --warn:#e9ab5c; --warn-bg:#33250f; --crit:#f2877b; --crit-bg:#3b1b18; --info:#86b6ec; --info-bg:#172638; --slot-ok-bg:#163826; --slot-ok-fg:#9ce4bd; --slot-ok-bd:#4aa877; --slot-no-bg:#3f1d1b; --slot-no-fg:#f7aaa1; --slot-no-bd:#cf6457; --slot-idle-bg:#23222a; --slot-idle-fg:#c1bcca; --slot-idle-bd:#737e94; --ring:color-mix(in srgb,var(--brand) 50%,transparent); --scrim:rgba(0,0,0,.6); --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.28); --shadow-lg:0 10px 40px rgba(0,0,0,.5); } } /* Tema değişirken ani sıçrama olmasın (yalnız düğmeyle çevrilince — ilk yüklemede geçiş YOK). */ html.tema-gecis,html.tema-gecis *{transition:background-color .2s ease,border-color .2s ease,color .2s ease!important} .tema-btn__ico{font-size:1rem;line-height:1} @media (max-width:560px){.tema-btn__txt{display:none}} *{box-sizing:border-box} /* hidden özniteliği her zaman kazanır: .pill/.btn gibi display veren sınıflar onu ezmesin. */ [hidden]{display:none!important} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--text);font-family:var(--font-body); font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased} a{color:var(--brand);text-decoration:none} h1,h2,h3{margin:0} :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ---------- Layout ---------- */ .app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh} .main{display:flex;flex-direction:column;min-width:0} .content{padding:clamp(1.3rem,3.5vw,2.5rem);max-width:1240px;width:100%} /* FORM ÖĞELERİ KABINI AŞMASIN (17 Eylül 2026). `input[type=file]` tarayıcının kendi bileşenidir ve ~300px "doğal" genişlik dayatır; 320px'lik telefonda Toplu İçe Aktarma ekranını 26px taşırıyordu (ölçüldü). max-width hepsine güvenlik ağı olarak verilir — kabından geniş bir form öğesi hiçbir ekranda doğru değildir. Dosya kutusuna ayrıca width:100% gerekir, yoksa doğal genişlikte kalır. */ input,select,textarea{max-width:100%} input[type="file"]{width:100%} /* Çok geniş ekran: 1920px'de içeriğin sağında 440px, 2560px'de 1080px ölü alan kalıyordu. 1600px'in ÜSTÜNDE tavanı yükselt ve içeriği ortala; bunun altındaki masaüstü görünümü bilerek DEĞİŞMİYOR (müşteri alışkanlığı bozulmasın). */ @media (min-width:1600px){.content{max-width:1440px;margin-inline:auto}} /* ---------- Sidebar ---------- */ .sidebar{background:var(--sidebar-bg);color:var(--sidebar-text);display:flex;flex-direction:column; padding:1.1rem .8rem;position:sticky;top:0;height:100vh;border-right:1px solid var(--border)} /* iOS Safari'de 100vh adres çubuğunun ALTINA taşar; dvh destekleyen tarayıcıda gerçek görünür yüksekliği kullan (desteklemeyen yukarıdaki 100vh'de kalır). */ @supports (height:100dvh){.sidebar{height:100dvh}} .brand{display:flex;align-items:center;gap:.6rem;padding:.3rem .5rem 1.1rem;border-bottom:1px solid var(--border);margin-bottom:.8rem} .brand__mark{font-size:1.5rem;line-height:1} /* Okul logosu (Okul Ayarları): açık/koyu tema için iki dosya olabilir. Yükseklik sabit, genişlik oranla; img etiketinde yüklenen dosyanın gerçek ölçüsü yazılır. */ .brand__logo{display:block;height:44px;width:auto;max-width:100%} /* Tema anahtarı img.* ile: giriş kartındaki .auth-card__logo{display:block} (dosyada SONRA gelir, aynı özgüllük) gizli olanı da gösteriyordu — iki logo yan yana çıkıyordu. */ img.brand__logo--koyu{display:none} @media screen{ :root[data-theme="koyu"] img.brand__logo--acik{display:none} :root[data-theme="koyu"] img.brand__logo--koyu{display:block} } /* Tek logo iki temada da görünür; koyu temada koyu renkli bir logo okunsun diye açık zemin. */ @media screen{ :root[data-theme="koyu"] img.brand__logo--tek{background:#fff;border-radius:8px;padding:4px 6px} } .brand__name{font-family:var(--font-display);font-size:1.12rem;font-weight:600;letter-spacing:.01em} .nav{display:flex;flex-direction:column;gap:.12rem;flex:1;overflow-y:auto} .nav__group{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; color:var(--sidebar-muted);padding:1rem .7rem .35rem} .nav__item{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:var(--radius-sm); color:var(--sidebar-text);font-size:.92rem;font-weight:500;transition:background .12s} .nav__ico{width:1.2rem;text-align:center;opacity:.85} /* Hover: BEYAZ kenar çubuğunda --surface-2 (#edeff3) = 1.15:1, yani görünmüyordu. Zemin bordo tarafa çekildi (1.25:1) ve tek başına zemine güvenilmesin diye 3px'lik bir sol şerit eklendi (3.02:1) — geri bildirim artık algılanabilir. */ a.nav__item:hover{background:color-mix(in srgb,var(--brand) 14%,var(--surface)); box-shadow:inset 3px 0 0 color-mix(in srgb,var(--brand) 60%,transparent)} .nav__item.is-active{background:var(--sidebar-active);color:var(--sidebar-active-fg);font-weight:600;box-shadow:inset 3px 0 0 var(--brass)} /* Aktif öğenin pirinç şeridi hover'da da korunur (özgüllük 0,3,0 > 0,2,1) */ .nav__item.is-active:hover{box-shadow:inset 3px 0 0 var(--brass)} .nav__item.is-soon{color:var(--sidebar-muted);cursor:default;justify-content:flex-start} .nav__item.is-soon em{margin-left:auto;font-style:normal;font-size:.62rem;font-family:var(--font-mono); background:var(--surface-2);color:var(--sidebar-muted);padding:.1rem .4rem;border-radius:20px} .sidebar__foot{font-size:.7rem;color:var(--sidebar-muted); padding:.7rem .7rem 0;border-top:1px solid var(--border);margin-top:.6rem} .sidebar__surum{display:block;margin-top:.35rem;font-family:var(--font-mono);font-size:.62rem} /* ---------- Geliştirici imzası + teknik destek (partials/_imza.php) ---------- */ .imza{display:flex;flex-direction:column;gap:.3rem;font-size:.72rem;line-height:1.35;color:var(--faint)} .imza--orta{align-items:center;text-align:center;margin-top:1rem} .imza__gelistiren{display:inline-flex;align-items:center;gap:.4rem} .imza__gelistiren strong{font-weight:600;color:var(--muted)} .imza__logo{width:18px;height:18px;border-radius:5px;flex:none} .imza__destek{color:var(--brand);font-weight:600;text-decoration:none} .imza__destek:hover{text-decoration:underline} .error-wrap .imza{margin-top:2rem} /* "Uygulama olarak yükle" kutusu — ek-pwa.js açar, varsayılanı gizli. Kenar çubuğunun dibinde, gezinme öğelerinden bir çizgiyle ayrılmış: ömürde bir kez kullanılacak bir düğme günlük işin arasında yer kaplamamalı. */ .sidebar__kur{margin-top:auto;padding:.7rem .2rem 0;border-top:1px solid var(--border)} .sidebar__kur[hidden]{display:none} .sidebar__kur-ipucu{margin:.5rem .3rem 0;font-size:.72rem;line-height:1.45;color:var(--sidebar-muted)} .sidebar__kur-ipucu[hidden]{display:none} /* ---------- Topbar ---------- */ .topbar{display:flex;align-items:center;gap:.8rem;padding:.7rem clamp(1rem,3vw,2rem); background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20} .topbar__toggle{display:none;background:none;border:1px solid var(--border-input);border-radius:8px; color:var(--text);font-size:1.1rem;width:2.2rem;height:2.2rem;cursor:pointer} .topbar__title{font-family:var(--font-display);font-size:1.15rem;font-weight:600} .topbar__spacer{flex:1} .userbox{display:flex;align-items:center;gap:.8rem} .userbox__meta{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2} .userbox__name{font-weight:600;font-size:.9rem} .userbox__logout{margin:0} /* rol rozetleri */ .rol{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.04em;text-transform:uppercase; padding:.12rem .45rem;border-radius:20px;font-weight:600;border:1px solid transparent} .rol--superadmin{color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent);border-color:color-mix(in srgb,var(--brand) 30%,transparent)} .rol--admin{color:var(--brass-ink);background:color-mix(in srgb,var(--brass) 14%,transparent);border-color:color-mix(in srgb,var(--brass) 32%,transparent)} .rol--ogretmen{color:var(--info);background:var(--info-bg);border-color:color-mix(in srgb,var(--info) 30%,transparent)} /* ---------- Page head ---------- */ .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem} .page-title{font-family:var(--font-display);font-size:clamp(1.4rem,3vw,1.8rem);font-weight:600;letter-spacing:-.01em} .page-sub{color:var(--muted);font-size:.9rem;margin-top:.15rem} .muted{color:var(--muted)} .small{font-size:.85rem} /* ---------- Tiles ---------- */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.8rem;margin-bottom:1.4rem} .tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:var(--shadow)} .tile__k{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)} .tile__v{font-family:var(--font-display);font-size:1.9rem;line-height:1.1;margin-top:.3rem;font-variant-numeric:tabular-nums} /* ---------- Cards / grid ---------- */ .grid-2{display:grid;grid-template-columns:1fr;gap:1rem} @media (min-width:860px){.grid-2{grid-template-columns:1fr 1fr}} /* Liste + yan form (ör. Branşlar): listeye daha çok yer, form dar kenar sütun */ .split-list{display:grid;grid-template-columns:1fr;gap:1rem} @media (min-width:1024px){.split-list{grid-template-columns:minmax(0,1.9fr) minmax(250px,0.9fr);align-items:start}} .card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.4rem 1.6rem;box-shadow:var(--shadow)} .card--flush{padding:0;overflow:hidden} .card__head{margin-bottom:.8rem} .card__title{font-family:var(--font-display);font-size:1.15rem;font-weight:600} .form-card{max-width:860px;margin-left:auto;margin-right:auto;margin-bottom:1.1rem} /* ---------- Timeline / roadmap ---------- */ .timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem} .timeline__item{display:flex;gap:.7rem;padding:.5rem 0;border-bottom:1px solid var(--border)} .timeline__item:last-child{border-bottom:none} .timeline__dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--brass);margin-top:.45rem;flex:none} .timeline__act{font-family:var(--font-mono);font-size:.8rem;color:var(--brand-2);font-weight:600} .timeline__who{color:var(--muted);font-size:.85rem;margin-left:.4rem} .timeline__time{display:block;color:var(--faint);font-size:.75rem;font-variant-numeric:tabular-nums} .roadmap{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem} .roadmap li{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.92rem} .roadmap li b{color:var(--text);font-family:var(--font-mono);font-size:.78rem;background:var(--inset); border:1px solid var(--border);border-radius:6px;padding:.05rem .4rem;flex:none} .roadmap li.done{color:var(--text)} /* ---------- Pills ---------- */ .pill{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.66rem;font-weight:600; letter-spacing:.02em;padding:.14rem .5rem;border-radius:20px;border:1px solid transparent;white-space:nowrap} .pill--ok{color:var(--ok);background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 30%,transparent)} .pill--off{color:var(--muted);background:var(--surface-2);border-color:var(--border)} .pill--na{color:var(--brass-ink);background:color-mix(in srgb,var(--brass) 14%,transparent);border-color:color-mix(in srgb,var(--brass) 30%,transparent)} /* ---------- Tables ---------- */ /* position:relative ZORUNLU — süs değil. İçerideki `.sr-only` öğeleri `position:absolute` (bkz. aşağıda). Konumlanmış bir ata bulamayınca ilk kapsayıcı bloğa (sayfanın kendisi) göre yerleşiyor, statik konumları da geniş tablonun sağ ucu olduğu için SAYFAYI oraya kadar uzatıyorlardı: 390px'lik telefonda Ödemeler ekranı 851px genişliğe çıkıyor, kullanıcı sağa kaydırınca bomboş alana düşüyordu (ölçüldü: 851 → 375). `clip` görsel olarak gizler ama kaydırma alanı hesabından ÇIKARMAZ. Bu tek satır, tablo taşıyan tüm ekranlardaki yatay kaymayı bitiriyor. */ .table-wrap{overflow-x:auto;position:relative} .table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px} .table th,.table td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--border);vertical-align:middle} .table thead th{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase; color:var(--faint);background:var(--inset);font-weight:600} /* Hover td'ye taşındı: zebra kuralı (`.table--pay tbody tr:nth-child(even)`, aşağıda) tr üzerinde AYNI özgüllükte (0,2,2) ve dosyada SONRA geliyor — tr'de kalsaydı çift satırlarda hover geri bildirimi kaybolurdu. */ .table tbody tr:hover td{background:var(--surface-2)} .table tbody tr:last-child td{border-bottom:none} .ta-r{text-align:right} /* .table th/td temel sol-hizasını (satır 152) yenmek için daha yüksek özgüllük */ .table th.ta-r,.table td.ta-r{text-align:right} .ta-actions{display:flex;gap:.35rem;justify-content:flex-end;flex-wrap:wrap} /* Tablo hücresi içindeki aksiyonlar flex-td düzenini bozmasın → normal hücre + satır-içi öğeler */ .table td.ta-actions{display:table-cell;text-align:right;white-space:nowrap;vertical-align:middle} .table td.ta-actions > *{display:inline-flex;vertical-align:middle;margin-left:.35rem} .table td.ta-actions > *:first-child{margin-left:0} .inline{display:inline} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;cursor:pointer; font-family:var(--font-body);font-size:.88rem;font-weight:600;line-height:1;padding:.6rem 1rem; border-radius:var(--radius-sm);border:1px solid transparent;transition:filter .12s,background .12s;text-align:center} .btn:active{transform:translateY(1px)} .btn--primary{background:var(--primary);color:var(--primary-fg)} .btn--primary:hover{filter:brightness(1.08)} /* Kenarlık --border değil --border-input: --border (#e3e6eb) beyaz kart üstünde 1.25:1 idi, yani projedeki EN YAYGIN buton (topbar, "← Vazgeç", "Filtrele", ay okları, "Excel'e Aktar" — 59 kullanım) buton gibi değil düz link gibi görünüyordu. --border-input: beyaz 3.30:1 · --bg 3.05:1 · --inset 3.13:1 (WCAG 1.4.11). --border yalnız kart/tablo ayracı olarak kalır. */ .btn--ghost{background:var(--surface);color:var(--text);border-color:var(--border-input)} .btn--ghost:hover{background:var(--inset)} .btn--warn{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent)} .btn--warn:hover{filter:brightness(.98)} .btn--ok{background:var(--ok-bg);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent)} .btn--sm{padding:.4rem .65rem;font-size:.8rem} .btn--block{width:100%} /* "Kopyala" düğmesi (öğrenci detayındaki TC · tek seferlik giriş bilgisi kutusu). min-width: etiket "Kopyala" → "Kopyalandı" olurken satır zıplamasın; genişlik en uzun geri bildirim metnine göre sabitlenir. .is-kopyalandi app.js tarafından 2 sn takılır. Renk TEK ipucu DEĞİL — düğmenin metni de değişiyor (WCAG 1.4.1). Sabit hex yok: --ok üçlüsü Faz 2 paletinden. */ .btn--kopya{min-width:6.6rem} .btn.is-kopyalandi{background:var(--ok-bg);color:var(--ok); border-color:color-mix(in srgb,var(--ok) 30%,transparent)} /* ---------- Forms ---------- */ .form{display:flex;flex-direction:column;gap:.9rem} .form-grid{display:grid;grid-template-columns:1fr;gap:.9rem} @media (min-width:560px){.form-grid{grid-template-columns:1fr 1fr}} .field{display:flex;flex-direction:column;gap:.35rem} .field__label{font-size:.82rem;font-weight:600;color:var(--muted)} .input{width:100%;padding:.6rem .7rem;font:inherit;color:var(--text);background:var(--surface); border:1px solid var(--border-input);border-radius:var(--radius-sm)} /* Fare ile tıklamada yumuşak halka; klavyede AYRICA belirgin outline. `outline:none` yalnız :focus-visible OLMAYAN duruma bırakıldı — eskiden her odakta global :focus-visible outline'ını (satır ~53) iptal ediyordu. */ .input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)} .input:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-radius:var(--radius-sm)} select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2rem} .field--check{flex-direction:row;align-items:center;gap:.5rem} .field--check input{width:1.05rem;height:1.05rem;accent-color:var(--brand)} .form-actions{display:flex;gap:.6rem;margin-top:.4rem} .form-actions--sticky{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 40%);padding-top:1rem;margin-top:1rem} .hint{font-size:.82rem;color:var(--muted);background:var(--inset);border:1px solid var(--border); border-radius:var(--radius-sm);padding:.6rem .8rem;margin:0} /* ---------- Flash ---------- */ .flash{padding:.7rem 1rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:.9rem;border:1px solid transparent} .flash--basari{color:var(--ok);background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 30%,transparent)} .flash--hata{color:var(--crit);background:var(--crit-bg);border-color:color-mix(in srgb,var(--crit) 30%,transparent)} .flash--bilgi{color:var(--info);background:var(--info-bg);border-color:color-mix(in srgb,var(--info) 30%,transparent)} .flash--uyari{color:var(--warn);background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 30%,transparent)} /* ---------- Callout ---------- */ .callout{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--brass); border-radius:var(--radius-sm);padding:.9rem 1.1rem;margin-bottom:1.2rem;font-size:.9rem;color:var(--muted);box-shadow:var(--shadow)} .callout strong{color:var(--text)} /* ---------- Permission matrix ---------- */ .perm-toolbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1.1rem} .perm-toolbar__spacer{flex:1} .perm-group{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:1rem 1.1rem;margin-bottom:1rem;box-shadow:var(--shadow)} /* .perm-group--locked kaldırıldı: "Yönetim" grubu R4 ile artık tümden kilitli değil (kutular tek tek kilitlenir → .perm-item.is-locked). */ .perm-group__note{margin-bottom:.7rem} .perm-item__lock{color:var(--warn)} .perm-group__head{display:flex;align-items:center;justify-content:space-between;gap:.6rem; padding-bottom:.6rem;margin-bottom:.7rem;border-bottom:1px solid var(--border)} .perm-group__title{font-family:var(--font-display);font-size:1.05rem;font-weight:600} .perm-group__all{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted);cursor:pointer} .perm-group__all input{accent-color:var(--brand)} .perm-list{display:grid;grid-template-columns:1fr;gap:.4rem} @media (min-width:680px){.perm-list{grid-template-columns:1fr 1fr}} .perm-item{display:flex;align-items:flex-start;gap:.6rem;padding:.6rem .7rem;border:1px solid var(--border); border-radius:var(--radius-sm);background:var(--inset);cursor:pointer;transition:border-color .12s,background .12s} .perm-item input{margin-top:.15rem;width:1.05rem;height:1.05rem;accent-color:var(--brand);flex:none} .perm-item:has(input:checked){border-color:color-mix(in srgb,var(--brand) 45%,transparent);background:color-mix(in srgb,var(--brand) 7%,var(--surface))} /* opacity:.6 KALDIRILDI: