:root {
  --kirmizi: #c90f1d;
  --kirmizi-koyu: #97101a;
  --sari: #f6b413;
  --lacivert: #131923;
  --metin: #202631;
  --soluk: #6c7380;
  --cizgi: #e6e8ec;
  --zemin: #f5f6f8;
  --beyaz: #fff;
  --yesil: #138a61;
  --golge: 0 16px 40px rgba(22, 28, 38, .08);
  --radius: 18px;

  /* Tipografi ölçeği (B-030) — YENİ BOYUT UYDURMA, buradan seç.
     Her adımın işi bellidir; ikisi arasında bir değer gerekiyorsa tasarım yanlıştır. */
  --yazi-rozet: 11px;   /* yalnız pill/rozet: durum etiketi, sayaç          */
  --yazi-mini: 12px;    /* mikro etiket, üst etiket, dipnot                 */
  --yazi-meta: 13px;    /* tarih, açıklama, yardımcı metin, sekme           */
  --yazi-govde: 14px;   /* gövde metni, form alanları, menü                 */
  --yazi-satir: 15px;   /* liste satırının BAŞLIĞI — gövdeden bir adım üstte */
  --yazi-kart: 18px;    /* kart başlığı (h2)                                */
  --yazi-bolum: 22px;   /* bölüm başlığı                                    */

  /* Ağırlık: gövde 400 · satır başlığı 650 · kart başlığı 700 · rozet 800 */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--metin); background: var(--zemin); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
/* Tipografi ölçeği (B-028): okuma aralığı 11 · 12 · 13 · 14 · 16 · 18 px.
   <small> tarayıcı varsayılanında 13.33px'e düşüyordu, ölçeğe sabitlendi. */
small { font-size: 13px; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.marka { display: inline-flex; align-items: center; }
/* Logo (B-008/B-009): kaynak 500×500 kare PNG, görünür işaret ≈ 416×212 piksel (satır 113–324). Kutu görünür orana kırpılır;
   üst çubuklarda genişlik yerine yükseklik sınırlanır. Koyu zeminde (.marka--acik) koyu "Arwen" yazısı için ince açık hale. */
.marka img { width: 186px; height: auto; aspect-ratio: 416 / 212; object-fit: cover; object-position: 50% 37%; }
/* Koyu zeminde logo tek renk beyaz: kaynak PNG cok renkli, drop-shadow hilesi kenarlari kirletiyordu. */
.marka--acik img { filter: brightness(0) invert(1); opacity: .95; }
.buton { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; border: 1px solid transparent; border-radius: 12px; background: var(--kirmizi); color: #fff; font-weight: 750; transition: .2s ease; }
.buton:hover { background: var(--kirmizi-koyu); transform: translateY(-1px); }
.buton--cizgi { border-color: var(--cizgi); background: #fff; color: var(--metin); }
.buton--cizgi:hover { border-color: var(--kirmizi); background: #fff; color: var(--kirmizi); }
.demo-rozet { display: inline-flex; padding: 6px 10px; border-radius: 99px; background: #fff0d0; color: #8a5b00; font-size: 12px; font-weight: 800; letter-spacing: .08em; }

.panel-kabuk { min-height: 100vh; display: grid; grid-template-columns: 264px minmax(0, 1fr); }
/* Yan menü (B-001): içerik 100vh'yi aşınca kendi içinde kayar; kullanıcı kartı (.yan-alt) altta sabit kalır */
.yan-menu { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 20px 12px 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; color: #d9dde4; background: var(--lacivert); z-index: 20; }
.yan-menu::-webkit-scrollbar { width: 6px; }
.yan-menu::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(255,255,255,.22); }
.yan-logo { padding: 2px 10px 14px; }
.yan-logo .marka img { width: 132px; }
.rol-etiketi { margin: 4px 10px 22px; color: #89919e; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
/* Menu grup basliklari (B-021): bolumleri ayirir, kendisi tiklanmaz. */
.menu-grup { margin: 17px 11px 6px; color: #6d7583; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.menu-grup:first-child { margin-top: 2px; }
.yan-menu nav { display: grid; gap: 1px; padding-bottom: 14px; }
.yan-menu nav a { display: flex; align-items: center; gap: 11px; min-height: 37px; padding: 0 11px; border-radius: 9px; color: #aab2bf; font-size: 13px; font-weight: 500; letter-spacing: -.003em; transition: background .15s ease, color .15s ease; }
/* Menü ikonları (B-017): tek boyut, metin sunumu (emoji değil), kalın çizgi */
.yan-menu nav a span { display: inline-grid; width: 18px; flex: 0 0 18px; color: #7d8695; place-items: center; font-size: 16px; line-height: 1; font-weight: 700; font-variant-emoji: text; }
.yan-menu nav a span svg { width: 18px; height: 18px; }
.yan-menu nav a:hover { background: rgba(255,255,255,.055); color: #fff; }
.yan-menu nav a:hover span { color: #cfd5de; }
.yan-menu nav a.aktif { color: #fff; background: var(--kirmizi); }
.yan-menu nav a.aktif span { color: #fff; }
.yan-alt { position: sticky; bottom: 0; display: flex; align-items: center; gap: 11px; padding: 14px 10px 18px; margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); background: var(--lacivert); }
.avatar { display: grid; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; color: #fff; background: var(--kirmizi); font-size: 13px; font-weight: 800; place-items: center; }
.yan-alt strong, .yan-alt small { display: block; }
.yan-alt strong { color: #fff; font-size: 13px; }
.yan-alt small { margin-top: 3px; color: #8e96a2; font-size: 12px; }
.yan-kullanici { min-width: 0; flex: 1; }
.cikis-formu { margin-top: 5px; }
.cikis-formu button { padding: 0; border: 0; color: #ef8c94; background: transparent; font-size: 11px; font-weight: 750; cursor: pointer; }
.panel-ana { min-width: 0; }
/* 🔴 view-transition-name yığın bağlamı yaratıyor: bildirim panelinin z-index:60'ı
   .panel-ust içinde hapis kalıyordu ve sticky ödev künyesi üstüne biniyordu (B-066).
   Üst çubuğun kendisi konumlandırılıp içerik üstüne alınıyor. */
.panel-ust { position: relative; z-index: 40; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 34px; border-bottom: 1px solid var(--cizgi); background: rgba(255,255,255,.9); }
.arama { color: #9399a3; font-size: 14px; }
.ust-islemler { display: flex; align-items: center; gap: 16px; color: var(--soluk); font-size: 13px; }
/* Bildirim kutusu (B-022): can dugmesi + acilir panel. Ayri bildirim sayfasi yoktur. */
.bildirim-kutu { position: relative; display: inline-flex; }
.bildirim-dugmesi { position: relative; display: grid; width: 36px; height: 36px; border: 1px solid transparent; border-radius: 11px; color: var(--soluk); background: transparent; place-items: center; cursor: pointer; transition: background .15s ease, color .15s ease; }
.bildirim-dugmesi svg { width: 19px; height: 19px; }
.bildirim-dugmesi:hover, .bildirim-kutu.acik .bildirim-dugmesi { color: var(--kirmizi); background: #fceced; }
.bildirim-dugmesi b { position: absolute; top: 2px; right: 2px; display: grid; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid #fff; border-radius: 99px; color: #fff; background: var(--kirmizi); font-size: 11px; font-weight: 800; place-items: center; }
.bildirim-panel { position: absolute; top: calc(100% + 9px); right: 0; z-index: 60; width: min(370px, calc(100vw - 32px)); overflow: hidden; border: 1px solid var(--cizgi); border-radius: 15px; background: #fff; box-shadow: 0 18px 44px rgba(22, 28, 38, .16); }
.bildirim-panel-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--cizgi); }
.bildirim-panel-ust strong { font-size: 13px; }
.bildirim-panel-ust form { margin: 0; }
.bildirim-panel-ust button { padding: 0; border: 0; color: var(--kirmizi); background: transparent; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.bildirim-panel-ust button:hover { text-decoration: underline; }
.bildirim-panel-liste { max-height: min(62vh, 430px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.bildirim-oge { display: flex; gap: 11px; padding: 11px 15px; border-bottom: 1px solid #f1f2f5; }
.bildirim-oge:last-child { border-bottom: 0; }
a.bildirim-oge:hover { background: #fafbfc; }
.bildirim-oge.yeni { background: #fffaf0; }
a.bildirim-oge.yeni:hover { background: #fff5e4; }
.bildirim-oge-ikon { display: grid; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; color: var(--kirmizi); background: #fceced; place-items: center; }
.bildirim-oge-ikon svg { width: 15px; height: 15px; }
.bildirim-oge strong { display: block; font-size: 13px; line-height: 1.35; }
.bildirim-oge p { margin: 3px 0 0; color: var(--soluk); font-size: 13px; line-height: 1.4; }
.bildirim-oge small { display: block; margin-top: 4px; color: #9aa1ac; font-size: 11px; }
.bildirim-panel-bos { margin: 0; padding: 26px 16px; color: var(--soluk); font-size: 13px; text-align: center; }
.panel-icerik { width: min(1280px, 100%); padding: 34px; margin: 0 auto; }
.sayfa-basligi { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 20px; margin-bottom: 28px; }
.sayfa-basligi > div:first-child { min-width: 0; }
.sayfa-basligi h1 { margin: 3px 0 6px; color: #151a22; font-size: clamp(27px, 3vw, 38px); letter-spacing: -.035em; }
.sayfa-basligi p { margin: 0; color: var(--soluk); }
.ust-etiket { color: var(--kirmizi) !important; font-size: 12px !important; font-weight: 850; letter-spacing: .13em; }
.kart { border: 1px solid var(--cizgi); border-radius: var(--radius); background: #fff; box-shadow: 0 2px 8px rgba(20, 25, 35, .025); }
/* B-003/B-004: grid/flex öğesi olan kartlar ve sütun sarmalayıcıları içerideki tablo kadar genişleyemez */
.panel-icerik .kart, .iki-kolon > *, .odev-detay-grid > * { min-width: 0; }
.kart-baslik { display: flex; align-items: center; justify-content: space-between; padding: 21px 23px 15px; }
.kart-baslik h2 { margin: 0; font-size: 18px; }
.kart-baslik a { color: var(--kirmizi); font-size: 13px; font-weight: 750; }
.kart-baslik a.buton { color: #fff; font-size: 13px; }
.kart-baslik a.buton--cizgi { color: var(--metin); }
.istatistikler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
/* B-051: kartlar 163 px'ti ve her sayfanın üstünde duruyordu. İkon artık sayının
   SOLUNDA; kart 163 -> ~74 px. */
/* B-052: strong ve span AYRI grid satirlarina dusuyordu; align-items:center her birini
   kendi satirinda ortalayinca sayi ile etiket arasinda 20 px bosluk aciliyor ve ikonla
   hiza bozuluyordu. Artik iki satirlik acik izgara: ikon iki satiri kapsiyor. */
.istatistik { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto;
  align-content: center; column-gap: 13px; row-gap: 0; padding: 14px 16px; }
.istatistik .ikon { grid-row: 1 / span 2; align-self: center; display: grid; width: 44px; height: 44px; margin: 0; border-radius: 13px; color: var(--kirmizi); background: #fdebed; place-items: center; }
.istatistik strong { display: block; grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: anywhere; font-size: 23px; line-height: 1.2; letter-spacing: -.03em; }
.istatistik span { display: block; grid-column: 2; grid-row: 2; min-width: 0; overflow-wrap: anywhere; margin: 0; color: var(--soluk); font-size: var(--yazi-meta); line-height: 1.35; }
.iki-kolon { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr); gap: 20px; }
.liste { margin: 0; padding: 0 22px 12px; list-style: none; }
.liste li { display: flex; align-items: center; gap: 13px; padding: 15px 0; border-top: 1px solid #eef0f3; }
.liste-ikon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; color: var(--kirmizi); background: #fdebed; font-weight: 800; place-items: center; }
.liste-icerik { min-width: 0; flex: 1; }
.liste-icerik strong, .liste-icerik small { display: block; }
.liste-icerik strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.liste-icerik small { margin-top: 4px; color: var(--soluk); font-size: 12px; }
/* Rozet sözlüğü (.durum--*): tek palet, anlam → renk
   sarı   #815600/#fff2cc  bekliyor · süreç sürüyor      : (varsayılan), bekliyor, in_progress, withdrawn, katilim-late, lead-randevu--bekliyor, destek-durum--waiting
   yeşil  #086b49/#dbf5ea  tamam · aktif · yayında        : yesil, active, completed, published, graded, talep-paid, talep-enrolled, katilim-present, destek-durum--answered, lead-randevu--yapildi
   mavi   #3f568c/#e6edff  planlandı · teslim edildi      : planned, submitted, talep-contacted, katilim-excused, destek-durum--open, lead-randevu--onaylandi
   gri    #646b76/#eceef1  arşiv · iptal · taslak · kapalı: archived, cancelled, draft, closed, talep-cancelled, katilim-pending, lead-randevu--iptal, destek-durum--closed
   kırmızı#8d1018/#fdebed  gecikti · yeniden gerekli · yeni: gec, resubmit_requested, talep-new, katilim-absent, destek-sla--gecikmis
   turuncu#8a4b00/#ffe8c7  yoklama bekliyor (canlı ders)   : attendance_pending
   canlı  beyaz/kırmızı    şu an yayında                   : live */
.durum { display: inline-block; padding: 5px 9px; border-radius: 99px; color: #815600; background: #fff2cc; font-size: 11px; font-weight: 800; white-space: nowrap; }
.durum--yesil { color: #086b49; background: #dbf5ea; }
.ilerleme { height: 7px; overflow: hidden; border-radius: 99px; background: #eceef1; }
.ilerleme span { display: block; height: 100%; border-radius: inherit; background: var(--kirmizi); }
.tablo-kapsayici { position: relative; overflow-x: auto; padding: 0 22px 18px; scrollbar-width: thin; } /* position: mutlak konumlu form girdileri (.yoklama-radio input) kaydırma kabından çıkmasın (B-003) */
/* Kaydırma ipucu (B-005): app.js, scrollWidth > clientWidth olan kapsayıcıya .tasiyor, sona kaydırılınca .sona-geldi ekler */
.tablo-kapsayici.tasiyor:not(.sona-geldi) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), rgba(0,0,0,.06)); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), rgba(0,0,0,.06)); }
table { width: 100%; border-collapse: collapse; }
/* Hücre sözlüğü (B-003/B-005): kısa sütunlar (tarih, tutar, rozet, işlem) tek satır kalır; uzun metin (ad, başlık, e-posta, not) sarılır */
th, td { padding: 14px 12px; border-top: 1px solid #eceef1; text-align: left; font-size: 13px; white-space: nowrap; }
td strong, td .tablo-alt, td p { white-space: normal; }
th { color: #8a919c; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.bos-durum { min-height: 390px; display: grid; align-content: center; justify-items: center; padding: 45px 25px; border: 1px dashed #cfd3da; border-radius: var(--radius); background: #fff; text-align: center; }
.bos-ikon { display: grid; width: 58px; height: 58px; border-radius: 18px; color: var(--kirmizi); background: #fdebed; font-size: 24px; place-items: center; }
.bos-durum h2 { margin: 18px 0 8px; }
.bos-durum p { max-width: 540px; margin: 0 0 20px; color: var(--soluk); line-height: 1.65; }
.mobil-ust { display: none; }

.site-govde { background: #fff; }
.site-ust { position: relative; z-index: 5; border-bottom: 1px solid rgba(255,255,255,.14); color: #fff; background: var(--lacivert); }
.site-nav { width: min(1180px, calc(100% - 36px)); height: 82px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto; }
.site-nav .marka img { width: auto; height: 68px; }
.site-linkler { display: flex; align-items: center; gap: 29px; font-size: 13px; font-weight: 650; }
.site-linkler a:hover { color: var(--sari); }
.site-nav-islem { display: flex; gap: 10px; }
.site-nav-islem .buton--cizgi { border-color: rgba(255,255,255,.35); color: #fff; background: transparent; }
.hero { position: relative; overflow: hidden; color: #fff; background: var(--lacivert); }
.hero::before { position: absolute; inset: 0; content: ''; opacity: .23; background-image: radial-gradient(circle at 76% 22%, var(--kirmizi) 0, transparent 31%), linear-gradient(120deg, transparent 60%, rgba(246,180,19,.18)); }
.hero-ic { position: relative; width: min(1180px, calc(100% - 36px)); min-height: 620px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 70px; margin: 0 auto; padding: 70px 0 95px; }
.hero-kopya .demo-rozet { margin-bottom: 20px; color: #ffe19a; background: rgba(246,180,19,.12); }
.hero h1 { max-width: 740px; margin: 0; font-size: clamp(45px, 6.7vw, 82px); line-height: .98; letter-spacing: -.058em; }
.hero h1 em { color: var(--sari); font-style: normal; }
.hero-kopya > p { max-width: 620px; margin: 24px 0 30px; color: #b9c0ca; font-size: 18px; line-height: 1.7; }
.hero-butonlar { display: flex; flex-wrap: wrap; gap: 11px; }
.hero-butonlar .buton--cizgi { border-color: rgba(255,255,255,.26); color: #fff; background: transparent; }
.hero-panel { position: relative; padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 25px; background: rgba(255,255,255,.07); box-shadow: 0 28px 80px rgba(0,0,0,.24); backdrop-filter: blur(10px); }
.hero-panel-ust { display: flex; align-items: center; justify-content: space-between; padding: 5px 4px 18px; }
.hero-panel-ust strong { font-size: 13px; }
.canli { display: inline-flex; align-items: center; gap: 6px; color: #9ee1c5; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.canli::before { width: 7px; height: 7px; border-radius: 50%; content: ''; background: #25bd7f; box-shadow: 0 0 0 5px rgba(37,189,127,.13); }
.hero-ders { padding: 23px; border-radius: 17px; color: var(--metin); background: #fff; }
.hero-ders small { color: var(--kirmizi); font-weight: 800; }
.hero-ders h3 { margin: 9px 0 20px; font-size: 22px; }
.ders-satiri { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; border-top: 1px solid var(--cizgi); color: var(--soluk); font-size: 13px; }
.hero-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.hero-mini div { padding: 16px; border-radius: 14px; background: rgba(255,255,255,.09); }
.hero-mini strong, .hero-mini span { display: block; }
.hero-mini strong { font-size: 21px; }
.hero-mini span { margin-top: 4px; color: #aab1bc; font-size: 11px; }
.site-bolum { padding: 90px 0; }
.site-kapsayici { width: min(1180px, calc(100% - 36px)); margin: 0 auto; }
.bolum-baslik { max-width: 700px; margin-bottom: 38px; }
.bolum-baslik .ust-etiket { margin-bottom: 9px; }
.bolum-baslik h2 { margin: 0; font-size: clamp(31px, 4vw, 49px); line-height: 1.08; letter-spacing: -.045em; }
.bolum-baslik p { color: var(--soluk); line-height: 1.7; }
.ozellik-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.ozellik { padding: 25px; border: 1px solid var(--cizgi); border-radius: 17px; }
.ozellik-numara { color: var(--kirmizi); font-size: 12px; font-weight: 850; }
.ozellik h3 { margin: 30px 0 9px; font-size: 18px; }
.ozellik p { margin: 0; color: var(--soluk); font-size: 13px; line-height: 1.6; }
.site-bolum--gri { background: var(--zemin); }
.kurs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kurs-karti { overflow: hidden; border: 1px solid var(--cizgi); border-radius: 20px; background: #fff; }
.kurs-kapak { min-height: 180px; display: flex; align-items: end; justify-content: space-between; padding: 23px; color: #fff; background: linear-gradient(135deg, #161d28, #c90f1d); }
.kurs-kapak--sari { color: #1b2029; background: linear-gradient(135deg, #f8d468, #f2aa00); }
.kurs-kapak span { font-size: 50px; font-weight: 900; letter-spacing: -.06em; }
.kurs-kapak small { font-size: 12px; font-weight: 800; }
.kurs-icerik { padding: 22px; }
.kurs-icerik h3 { margin: 0 0 9px; font-size: 18px; }
.kurs-icerik p { min-height: 62px; margin: 0 0 18px; color: var(--soluk); font-size: 13px; line-height: 1.6; }
.magazaya-cagri { padding-top: 72px; }
.magaza-cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: 54px 60px; border-radius: 25px; color: #fff; background: var(--lacivert); }
.magaza-cta::after { position: absolute; right: 18%; bottom: -130px; width: 280px; height: 280px; border: 55px solid rgba(201,15,29,.45); border-radius: 50%; content: ''; }
.magaza-cta > * { position: relative; z-index: 1; }
.magaza-cta h2 { max-width: 700px; margin: 7px 0 10px; font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -.045em; }
.magaza-cta p:not(.ust-etiket) { max-width: 650px; margin: 0; color: #aeb6c1; line-height: 1.65; }
.magaza-cta .buton { flex: 0 0 auto; }
.site-alt { padding: 32px 0; color: #aeb5bf; background: #0d1118; font-size: 13px; }
.site-alt .site-kapsayici { display: flex; align-items: center; justify-content: space-between; }
.site-alt .marka img { width: 155px; }
.kurslar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.panel-kurs { overflow: hidden; }
.panel-kurs-kapak { min-height: 190px; display: flex; align-items: flex-end; justify-content: space-between; padding: 25px; color: #fff; background: linear-gradient(130deg, #171e29, #c90f1d); }
.panel-kurs-kapak.sari { color: #171e29; background: linear-gradient(130deg, #ffd55f, #efa900); }
.panel-kurs-kapak strong { font-size: 52px; letter-spacing: -.06em; }
.panel-kurs-kapak span { max-width: 140px; font-size: 12px; font-weight: 850; text-align: right; }
.panel-kurs-icerik { padding: 22px; }
.panel-kurs-icerik h2 { margin: 0 0 7px; font-size: 20px; }
.panel-kurs-icerik > p { margin: 0 0 20px; color: var(--soluk); font-size: 13px; }
.kurs-meta { display: flex; justify-content: space-between; margin: 9px 0 15px; color: var(--soluk); font-size: 12px; }
.kurs-alt { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.kurs-alt small { color: var(--soluk); }
.detay-ust { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 25px; padding: 30px; margin-bottom: 22px; color: #fff; background: linear-gradient(125deg, #151b25, #3a1820); }
.detay-ust::after { position: absolute; right: 80px; width: 210px; height: 210px; border: 42px solid rgba(201,15,29,.42); border-radius: 50%; content: ''; }
.detay-ust > * { position: relative; z-index: 1; }
.detay-ust h1 { margin: 9px 0 10px; font-size: clamp(27px, 4vw, 42px); }
.detay-ust p { margin: 0; color: #bdc3cc; }
.detay-seviye { display: grid; width: 95px; height: 95px; border-radius: 24px; color: #fff; background: var(--kirmizi); font-size: 34px; font-weight: 900; place-items: center; }
.hafta-listesi { display: grid; gap: 12px; }
.hafta { padding: 0 22px; }
.hafta-baslik { display: flex; align-items: center; gap: 16px; padding: 19px 0; }
.hafta-no { color: var(--kirmizi); font-size: 12px; font-weight: 850; }
.hafta-baslik div { flex: 1; }
.hafta-baslik h3 { margin: 0; font-size: 16px; }
.hafta-baslik small { display: block; margin-top: 4px; color: var(--soluk); }
.ders-listesi { padding-bottom: 15px; border-top: 1px solid var(--cizgi); }
.ders-link { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid #f0f1f3; font-size: var(--yazi-govde); }
.oynat { display: grid; width: 31px; height: 31px; flex: 0 0 auto; border-radius: 50%; color: var(--kirmizi); background: #fdebed; font-size: 11px; place-items: center; }
.ders-link span:nth-child(2) { flex: 1; }
.ders-link small { color: var(--soluk); }
.video-yerlesim { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; }
.video-alani { position: relative; aspect-ratio: 16/9; display: grid; overflow: hidden; border-radius: 18px; color: #fff; background: radial-gradient(circle at 50% 45%, #3d4652, #10151d 64%); place-items: center; transition: box-shadow .25s ease; }
.video-alani.sure-vurgusu { box-shadow: 0 0 0 4px rgba(201,15,29,.34); }
.buyuk-oynat { display: grid; width: 78px; height: 78px; padding-left: 5px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(201,15,29,.9); font-size: 25px; place-items: center; }
.video-alani button { cursor: pointer; }
.video-kontroller { position: absolute; right: 20px; bottom: 16px; left: 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 13px; border-radius: 12px; background: rgba(8,11,16,.78); }
.video-kontroller button { width: 28px; height: 28px; border: 0; color: #fff; background: transparent; }
.video-kontroller input { width: 100%; accent-color: var(--kirmizi); }
.video-kontroller span { min-width: 82px; color: #dce0e6; font-size: 12px; text-align: right; }
.video-bilgi { padding: 22px; margin-top: 14px; }
.mufredat { align-self: start; max-height: 680px; overflow: auto; }
.mufredat .ders-link { padding: 14px 18px; }
.mufredat .ders-link.aktif { color: var(--kirmizi); background: #fff5f5; font-weight: 750; }
.hosgeldin { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.hosgeldin .buton { flex: 0 0 auto; }
.giris-govde { min-height: 100vh; background: #fff; }
.giris-kabuk { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .85fr) minmax(500px, 1.15fr); }
.giris-marka { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 48px clamp(35px, 5vw, 78px); color: #fff; background: var(--lacivert); }
.giris-marka::after { position: absolute; right: -170px; bottom: -160px; width: 430px; height: 430px; border: 85px solid rgba(201,15,29,.42); border-radius: 50%; content: ''; }
.giris-marka > * { position: relative; z-index: 1; }
.giris-marka .marka img { width: 205px; }
.giris-marka h1 { max-width: 560px; margin: 24px 0 20px; font-size: clamp(36px, 4vw, 62px); line-height: 1.04; letter-spacing: -.05em; }
.giris-marka p { max-width: 500px; color: #aeb6c1; font-size: 16px; line-height: 1.7; }
.giris-marka small { color: #818a97; }
.giris-form-alani { display: grid; padding: 40px; background: var(--zemin); place-items: center; }
.giris-form-karti { width: min(460px, 100%); padding: 38px; border: 1px solid var(--cizgi); border-radius: 22px; background: #fff; box-shadow: var(--golge); }
.giris-form-karti h2 { margin: 7px 0 8px; font-size: 29px; letter-spacing: -.03em; }
.giris-aciklama { margin: 0 0 25px; color: var(--soluk); font-size: 13px; }
.giris-formu { display: grid; gap: 16px; }
.giris-formu label { display: grid; gap: 7px; font-size: 13px; font-weight: 750; }
.giris-formu input { width: 100%; height: 49px; padding: 0 14px; border: 1px solid #d9dce1; border-radius: 11px; outline: none; }
.giris-formu input:focus { border-color: var(--kirmizi); box-shadow: 0 0 0 3px rgba(201,15,29,.09); }
.giris-formu .buton { width: 100%; margin-top: 3px; cursor: pointer; }
.demo-bilgi { display: grid; gap: 5px; padding: 15px; margin-top: 20px; border-radius: 12px; color: #6d4c00; background: #fff5d8; font-size: 13px; }
.demo-bilgi strong { color: #3c2c08; }
.ana-donus { display: inline-block; margin-top: 22px; color: var(--soluk); font-size: 12px; font-weight: 750; }
.form-hata { padding: 12px 14px; margin-bottom: 16px; border-radius: 10px; color: #8d1018; background: #fdebed; font-size: 13px; line-height: 1.5; }
.yorum-bolumu { padding: 20px; margin-top: 16px; }
.yorum-baslik { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; }
.yorum-baslik h2 { margin: 0; font-size: var(--yazi-kart); }
.yorum-baslik p { margin: 0; color: var(--soluk); font-size: 13px; line-height: 1.55; }
.yorum-sayisi { flex: 0 0 auto; padding: 4px 9px; border-radius: 99px; color: var(--kirmizi); background: #fdebed; font-size: var(--yazi-rozet); font-weight: 800; }
.yorum-formu { padding: 12px; border: 1px solid var(--cizgi); border-radius: 13px; background: #fafbfc; }
.yorum-formu textarea, .yanit-formu textarea { width: 100%; min-height: 56px; padding: 10px 12px; resize: vertical; border: 0; border-radius: 10px; outline: none; background: #fff; line-height: 1.55; }
.yorum-formu textarea:focus, .yanit-formu textarea:focus { box-shadow: 0 0 0 2px rgba(201,15,29,.16); }
.yorum-form-alt { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 9px; }
.sure-alani { display: flex; align-items: center; gap: 8px; }
.sure-alani label { color: var(--soluk); font-size: 12px; font-weight: 750; }
.sure-alani input { width: 76px; height: 37px; padding: 0 9px; border: 1px solid var(--cizgi); border-radius: 8px; }
.sure-alani button { border: 0; color: var(--kirmizi); background: transparent; font-size: 12px; font-weight: 750; cursor: pointer; }
.yorum-form-mesaj:empty { display: none; }
.yorum-form-mesaj, .yanit-formu [data-form-message] { margin: 7px 0 0; color: var(--kirmizi); font-size: var(--yazi-mini); }
.yorum-listesi { margin-top: 14px; }
.yorum { display: flex; align-items: flex-start; gap: 11px; padding: 13px 0; border-top: 1px solid #f1f2f5; }
.yorum--ogretmen { margin: 0 -10px; padding: 13px 10px; border-radius: 11px; background: #fff9ed; }
.yorum-avatar { display: grid; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; color: #fff; background: #7c8592; font-size: var(--yazi-rozet); font-weight: 850; place-items: center; }
.yorum--ogretmen > .yorum-avatar { background: var(--kirmizi); }
.yorum-icerik { min-width: 0; flex: 1; }
.yorum-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.yorum-meta strong { font-size: var(--yazi-meta); }
.yorum-meta time { color: #979da6; font-size: var(--yazi-mini); }
.rol { padding: 3px 7px; border-radius: 99px; color: #515966; background: #eceef1; font-size: 11px; font-weight: 850; text-transform: uppercase; }
.rozeti--ogretmen { color: #8d1018; background: #fde1e3; }
.sure-linki { display: inline-flex; align-items: center; padding: 5px 8px; margin-top: 9px; border: 0; border-radius: 7px; color: var(--kirmizi); background: #fdebed; font-size: 12px; font-weight: 800; cursor: pointer; }
.yorum-metni { margin: 5px 0 0; font-size: var(--yazi-meta); line-height: 1.55; white-space: pre-wrap; }
.yanitla { padding: 0; border: 0; color: var(--soluk); background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.yanit-listesi { margin: 14px 0 0 8px; padding-left: 18px; border-left: 2px solid #e7e9ed; }
.yanit-listesi .yorum { padding: 14px 0; }
.yanit-listesi .yorum--ogretmen { margin: 0; padding: 14px 10px; }
.yanit-formu { padding: 12px; margin-top: 12px; border-radius: 11px; background: #f2f3f5; }
.yanit-formu textarea { min-height: 70px; }
.yanit-form-alt { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; }
.yanit-form-alt input { width: 75px; padding: 8px; border: 1px solid var(--cizgi); border-radius: 7px; }
.yanit-form-alt button { padding: 8px 12px; border: 0; border-radius: 7px; color: #fff; background: var(--kirmizi); font-size: 12px; font-weight: 750; cursor: pointer; }
.yorum-yukleniyor, .yorum-hata { padding: 25px 0; color: var(--soluk); font-size: 13px; text-align: center; }
.yorum-hata { color: var(--kirmizi); }
.yorum--vurgulu { border-radius: 12px; animation: yorum-vurgu 1.8s ease; }
.yorum-filtreleri { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.yorum-filtreleri a { padding: 9px 14px; border: 1px solid var(--cizgi); border-radius: 99px; color: var(--soluk); background: #fff; font-size: 12px; font-weight: 750; }
.yorum-filtreleri a.aktif { border-color: var(--kirmizi); color: #fff; background: var(--kirmizi); }
.yorum-gelen-kutusu { overflow: hidden; }
.yorum-kutu-satiri { display: grid; grid-template-columns: 43px minmax(0, 1fr) auto; align-items: start; gap: 15px; padding: 21px 23px; border-top: 1px solid var(--cizgi); }
.yorum-kutu-satiri:first-child { border-top: 0; }
.yorum-kutu-satiri.yeni { background: #fffafa; box-shadow: inset 3px 0 var(--kirmizi); }
.yorum-kutu-avatar { display: grid; width: 43px; height: 43px; border-radius: 50%; color: #fff; background: var(--lacivert); font-size: 12px; font-weight: 850; place-items: center; }
.yorum-kutu-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.yorum-kutu-meta strong { font-size: 13px; }
.yeni-rozeti, .cevapsiz-rozeti { padding: 3px 7px; border-radius: 99px; color: #fff; background: var(--kirmizi); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.cevapsiz-rozeti { color: #755000; background: #ffedb7; }
.yorum-kutu-icerik h3 { margin: 8px 0 5px; font-size: 16px; }
.yorum-kutu-icerik > p { display: -webkit-box; overflow: hidden; margin: 0; color: #525966; font-size: 13px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.yorum-kutu-alt { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px; color: #9399a2; font-size: 11px; }
.yorum-kutu-islem { display: flex; align-items: flex-end; flex-direction: column; gap: 10px; }
.yorum-kutu-islem .buton { min-height: 38px; padding: 0 13px; font-size: 11px; }
.sure-ozeti { color: var(--kirmizi); font-size: 12px; font-weight: 800; }
.bos-kutu { display: grid; justify-items: center; padding: 60px 25px; color: var(--soluk); text-align: center; }
.bos-kutu strong { color: var(--metin); }
.bos-kutu span { margin-top: 7px; font-size: 13px; }
@keyframes yorum-vurgu { 0%, 55% { box-shadow: 0 0 0 4px rgba(201,15,29,.23); } 100% { box-shadow: none; } }
.yoklama-secim { padding: 22px; margin-bottom: 18px; }
.yoklama-secim form { display: grid; grid-template-columns: 1fr 1.25fr auto; align-items: end; gap: 14px; }
.yoklama-secim label { display: grid; gap: 7px; color: var(--soluk); font-size: 12px; font-weight: 750; }
.yoklama-secim select { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--cizgi); border-radius: 10px; color: var(--metin); background: #fff; }
.yoklama-form-karti .kart-baslik { align-items: flex-start; }
.yoklama-form-karti .kart-baslik h2 { margin: 4px 0 5px; }
.yoklama-form-karti .kart-baslik small { color: var(--soluk); }
.yoklama-tablosu td:first-child strong, .yoklama-tablosu td:first-child small { display: block; }
.yoklama-tablosu td:first-child small { margin-top: 4px; color: var(--soluk); font-size: 11px; }
.yoklama-radio { display: inline-flex; cursor: pointer; }
.yoklama-radio input { position: absolute; opacity: 0; pointer-events: none; }
.yoklama-radio span { display: inline-flex; padding: 7px 9px; border: 1px solid var(--cizgi); border-radius: 8px; color: var(--soluk); font-size: 11px; white-space: nowrap; }
.yoklama-radio input:checked + span { border-color: var(--kirmizi); color: var(--kirmizi); background: #fdebed; font-weight: 800; }
.yoklama-notu { min-width: 160px; padding: 9px; border: 1px solid var(--cizgi); border-radius: 8px; }
.yoklama-kaydet { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; border-top: 1px solid var(--cizgi); }
.yoklama-kaydet span { color: var(--soluk); font-size: 12px; }
.islem-basarili { padding: 13px 16px; margin-bottom: 16px; border: 1px solid #bce8d7; border-radius: 11px; color: #086b49; background: #e8f8f1; font-size: 13px; font-weight: 750; }
.yoklama-filtreleri { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.yoklama-filtreleri a { padding: 9px 13px; border: 1px solid var(--cizgi); border-radius: 99px; color: var(--soluk); background: #fff; font-size: 12px; font-weight: 750; }
.yoklama-filtreleri a.aktif { border-color: var(--kirmizi); color: #fff; background: var(--kirmizi); }
.katilim-rozeti { display: inline-flex; padding: 5px 9px; border-radius: 99px; font-size: 11px; font-weight: 800; }
.katilim-present { color: #086b49; background: #dbf5ea; }
.katilim-late { color: #815600; background: #fff2cc; }
.katilim-absent { color: #8d1018; background: #fdebed; }
.katilim-excused { color: #3f568c; background: #e6edff; }
.katilim-pending { color: #646b76; background: #eceef1; }
.ogrenci-yoklama-tablosu tr.yoklama-durum-absent { background: #fff8f8; }
.ders-hucre strong, .ders-hucre small { display: block; }
.ders-hucre small { max-width: 230px; margin-top: 4px; overflow: hidden; color: var(--soluk); font-size: 11px; text-overflow: ellipsis; }

.sinif-istatistikleri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kart-baslik small { display: block; margin-top: 5px; color: var(--soluk); font-size: 12px; }
.tablo-alt { display: block; margin-top: 4px; color: var(--soluk); font-size: 11px; }
.tablo-islem { color: var(--kirmizi); font-weight: 750; }
.durum--active, .durum--completed { color: #086b49; background: #dbf5ea; }
.durum--archived, .durum--cancelled { color: #646b76; background: #eceef1; }
.durum--planned { color: #3f568c; background: #e6edff; }
.sayfa-geri { display: inline-flex; margin-bottom: 18px; color: var(--kirmizi); font-size: 13px; font-weight: 800; }
.sinif-detay-baslik { align-items: center; }
.sinif-detay-baslik > .durum { padding: 8px 13px; }
.sinif-yonetim-grid { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(420px, 1.25fr); gap: 20px; margin-bottom: 20px; }
.buton--kucuk { min-height: 38px; padding: 0 14px; font-size: 12px; }
.buton:disabled, .metin-dugme:disabled { cursor: default; opacity: .48; transform: none; }
.bilgi-listesi { margin: 0; padding: 0 23px 20px; }
.bilgi-listesi > div { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid #eceef1; }
.bilgi-listesi dt { color: var(--soluk); font-size: 12px; }
.bilgi-listesi dd { margin: 0; font-size: 13px; font-weight: 750; }
.bilgi-listesi dd small { display: block; margin-top: 4px; color: var(--soluk); font-size: 11px; font-weight: 500; }
.yonetim-liste { max-height: 310px; margin: 0; padding: 0 22px 17px; overflow-y: auto; list-style: none; }
.yonetim-liste li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid #eceef1; }
.yonetim-liste strong, .yonetim-liste small { display: block; }
.yonetim-liste strong { font-size: 13px; }
.yonetim-liste small { margin-top: 3px; color: var(--soluk); font-size: 11px; }
.yonetim-bos { display: grid; gap: 6px; padding: 28px 23px; color: var(--soluk); font-size: 13px; }
/* B-006: boş durum satırı 38px'lik ilk ize sıkışmasın; tablo hücresi olan boş durum colspan'ı korusun */
.yonetim-liste li.yonetim-bos { grid-template-columns: minmax(0, 1fr); }
td.yonetim-bos { display: table-cell; }
.sinif-dersleri { margin-bottom: 30px; }
.metin-dugme { padding: 0; border: 0; color: var(--kirmizi); background: transparent; font-size: 12px; font-weight: 750; }
.metin-dugme:not(:disabled) { cursor: pointer; }
.metin-dugme--tehlike { color: #99121c; }
.yonetim-form-karti { max-width: 780px; }
.yonetim-formu { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 24px; }
.yonetim-formu--ic { padding-top: 0; }
.yonetim-formu label, .hizli-ekleme label { display: grid; gap: 7px; color: var(--metin); font-size: 12px; font-weight: 750; }
.yonetim-formu input, .yonetim-formu select, .hizli-ekleme input, .hizli-ekleme select, .ders-duzenleme input, .ders-duzenleme select { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid var(--cizgi); border-radius: 9px; color: var(--metin); background: #fff; font: inherit; }
.yonetim-formu input:focus, .yonetim-formu select:focus, .hizli-ekleme input:focus, .hizli-ekleme select:focus, .ders-duzenleme input:focus, .ders-duzenleme select:focus { border-color: var(--kirmizi); outline: 3px solid rgba(201, 15, 29, .08); }
.yonetim-formu .buton { align-self: end; }
.form-islemleri { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 10px; }
.hizli-ekleme { display: grid; grid-template-columns: 1fr 1.2fr auto; align-items: end; gap: 10px; padding: 0 22px 18px; }
.hizli-ekleme--ders { grid-template-columns: minmax(220px, 1fr) minmax(190px, .6fr) minmax(130px, .4fr) minmax(220px, .8fr) auto; border-bottom: 1px solid #eceef1; }
.ders-duzenleme-listesi { padding: 0 22px 18px; }
.ders-duzenleme { padding: 18px 0; border-top: 1px solid #eceef1; }
.ders-duzenleme-baslik { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.ders-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.ders-form-grid label { display: grid; min-width: 0; gap: 6px; color: var(--soluk); font-size: 11px; font-weight: 750; }
.ders-form-grid .genis-alan { grid-column: span 2; }
.ders-form-alt { display: flex; justify-content: flex-end; margin-top: 12px; }
.durum--live { color: #fff; background: var(--kirmizi); }
.canli-ders-filtre { margin-bottom: 20px; padding: 19px 22px; }
.canli-ders-filtre form { display: flex; align-items: end; gap: 12px; }
.canli-ders-filtre label { display: grid; min-width: min(420px, 70vw); gap: 7px; color: var(--soluk); font-size: 12px; font-weight: 750; }
.canli-ders-filtre select, .canli-ders-formu input, .canli-ders-formu select { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid var(--cizgi); border-radius: 9px; color: var(--metin); background: #fff; font: inherit; }
.canli-ders-kartlari { display: grid; gap: 15px; }
.canli-ders-karti { scroll-margin-top: 20px; }
.canli-ders-ozet { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 15px; }
.canli-ders-ozet h2 { margin: 4px 0 5px; font-size: 18px; }
.canli-ders-ozet span:not(.durum) { color: var(--soluk); font-size: 12px; }
.canli-ders-formu { display: grid; grid-template-columns: minmax(140px, .4fr) minmax(140px, .4fr) minmax(240px, 1fr) minmax(240px, 1fr) minmax(100px, .3fr); align-items: end; gap: 11px; padding: 0 22px 21px; }
.canli-ders-formu label { display: grid; min-width: 0; gap: 6px; color: var(--soluk); font-size: 11px; font-weight: 750; }
.canli-ders-islemleri { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 9px; }
.canli-ders-bolum-baslik { display: flex; align-items: flex-end; justify-content: space-between; margin: 28px 0 14px; }
.canli-ders-bolum-baslik:first-of-type { margin-top: 0; }
.canli-ders-bolum-baslik h2 { margin: 0 0 4px; font-size: 18px; }
.canli-ders-bolum-baslik p { margin: 0; color: var(--soluk); font-size: 13px; }
.ogrenci-canli-listesi { display: grid; gap: 8px; }
/* B-048: kartlar sıkıştırıldı — 12 ders alt alta çok yer kaplıyordu. */
.ogrenci-canli-kart { display: grid; grid-template-columns: 46px minmax(0, 1.05fr) minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 16px; }
/* B-049: not/hazırlık sağdaki boşlukta, dikey ince ayraçla ayrılmış. */
.ogrenci-canli-kart > .ders-notu { padding-left: 16px; border-left: 1px solid var(--cizgi); }
.ogrenci-canli-kart:not(:has(> .ders-notu)) { grid-template-columns: 46px minmax(0, 1fr) auto; }
.ogrenci-canli-tarih { display: grid; width: 46px; height: 46px; border-radius: 11px; color: var(--kirmizi); background: #fdebed; place-items: center; align-content: center; }
.ogrenci-canli-tarih strong { font-size: 16px; line-height: 1; }
.ogrenci-canli-tarih span { margin-top: 2px; font-size: 10px; font-weight: 850; }
.ogrenci-canli-icerik h2 { margin: 2px 0 3px; font-size: var(--yazi-satir); }
.ogrenci-canli-icerik > p:not(.ust-etiket) { margin: 0; color: var(--soluk); font-size: 12px; }
.ogrenci-canli-islemler { display: flex; align-items: center; gap: 9px; margin-top: 13px; }
.ogrenci-canli-islemler .buton { min-height: 38px; padding: 0 14px; font-size: 12px; }
.kilitli-baglanti { color: var(--soluk); font-size: 12px; font-weight: 700; }
.kurs-kayitlari { margin-top: 20px; }
.kurs-kayitlari .ders-listesi { padding: 0 22px 15px; }
.kurs-kayitlari .ders-link span:nth-child(2) small { display: block; margin-top: 4px; }
.kayit-ac { margin-top: 16px; }
.uygulama-bildirimleri { margin-bottom: 20px; }
.bildirim-listesi { padding: 0 22px 16px; }
.bildirim-satiri { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 15px 0; border-top: 1px solid #eceef1; }
.bildirim-satiri.yeni { margin: 0 -10px; padding-right: 10px; padding-left: 10px; border-radius: 11px; background: #fff7f7; }
.bildirim-satiri strong, .bildirim-satiri small { display: block; }
.bildirim-satiri p { margin: 4px 0; color: var(--soluk); font-size: 12px; }
.bildirim-satiri small { color: #949aa4; font-size: 11px; }
.bildirim-satiri .buton { min-height: 38px; padding: 0 13px; font-size: 11px; }
.odev-dosyalari { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.odev-dosyalari li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--cizgi); border-radius: 11px; }
.odev-dosyalari strong, .odev-dosyalari small { display: block; }
.odev-dosyalari strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.odev-dosyalari small { margin-top: 3px; color: var(--soluk); font-size: 11px; }
.odev-dosyalari .buton { min-height: 34px; padding: 0 11px; font-size: 11px; }
.odev-dosya-yok { margin: 0; color: var(--soluk); font-size: 12px; }
.odev-dosya-alani { display: grid; gap: 7px; color: var(--metin); font-size: 12px; font-weight: 750; }
.odev-dosya-alani input[type="file"] { width: 100%; padding: 10px; border: 1px dashed #cfd3da; border-radius: 9px; background: #fafbfc; font-size: 12px; font-weight: 500; }
.odev-dosya-alani small { color: var(--soluk); font-size: 11px; font-weight: 500; line-height: 1.5; }
.durum--draft { color: #646b76; background: #eceef1; }
.durum--published, .durum--graded { color: #086b49; background: #dbf5ea; }
.durum--closed { color: #646b76; background: #eceef1; }
.durum--submitted { color: #3f568c; background: #e6edff; }
.durum--resubmit_requested, .durum--gec { color: #8d1018; background: #fdebed; }
.durum--bekliyor { color: #815600; background: #fff2cc; }
.odev-bekleyen { color: var(--kirmizi); }
.odev-tablosu td small { white-space: nowrap; }
.odev-form-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 20px; align-items: start; }
.odev-formu { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 23px 23px; }
.odev-formu label, .teslim-formu label, .degerlendirme-formu label { display: grid; gap: 7px; color: var(--metin); font-size: 12px; font-weight: 750; }
.odev-formu .genis-alan, .degerlendirme-formu .genis-alan { grid-column: 1 / -1; }
.odev-formu input, .odev-formu select, .odev-formu textarea, .teslim-formu textarea, .degerlendirme-formu input, .degerlendirme-formu select, .degerlendirme-formu textarea { width: 100%; min-height: 42px; padding: 10px 11px; border: 1px solid var(--cizgi); border-radius: 9px; color: var(--metin); background: #fff; font: inherit; font-weight: 500; }
.odev-formu select, .degerlendirme-formu select { padding: 0 11px; }
.odev-formu textarea, .teslim-formu textarea, .degerlendirme-formu textarea { resize: vertical; line-height: 1.5; }
.odev-formu input:focus, .odev-formu select:focus, .odev-formu textarea:focus, .teslim-formu textarea:focus, .degerlendirme-formu input:focus, .degerlendirme-formu textarea:focus, .odev-dosya-alani input:focus { border-color: var(--kirmizi); outline: 3px solid rgba(201, 15, 29, .08); }
.odev-form-islemleri { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.odev-hedefler { display: grid; gap: 12px; padding: 0 23px 23px; }
.odev-hedef-sinif { margin: 0; padding: 0; border: 1px solid var(--cizgi); border-radius: 12px; overflow: hidden; }
.odev-hedef-sinif.tumu-secili { border-color: var(--kirmizi); box-shadow: 0 0 0 3px rgba(201, 15, 29, .06); }
.odev-hedef-baslik { display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: #fafbfc; cursor: pointer; }
.odev-hedef-baslik strong, .odev-hedef-baslik small { display: block; }
.odev-hedef-baslik strong { font-size: 13px; }
.odev-hedef-baslik small { margin-top: 3px; color: var(--soluk); font-size: 11px; }
.odev-hedef-ogrenciler { display: grid; gap: 2px; padding: 8px 10px 10px; }
.odev-hedef-ogrenciler label { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.odev-hedef-ogrenciler label:hover { background: #f5f6f8; }
.odev-hedef-ogrenciler small { display: block; margin-top: 2px; color: var(--soluk); font-size: 11px; }
.odev-hedef-ogrenciler .odev-dosya-yok { padding: 6px 8px; }
.odev-hedefler input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--kirmizi); }
.odev-detay-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr); gap: 20px; margin-bottom: 20px; align-items: start; }
/* B-060/B-063: sol sütun kendi yığını. Kartlar ızgara satırını paylaşsaydı teslim
   formu, sağdaki künye kartının altına hizalanıp araya boşluk bırakıyordu; artık
   açıklamanın hemen altına geliyor. */
.odev-detay-ana { display: grid; align-content: start; gap: 20px; min-width: 0; }
.odev-detay-ana > .kart { margin-bottom: 0; }
.odev-detay-grid > .odev-yan { position: sticky; top: 16px; }
.odev-aciklama { padding: 0 23px 23px; }
.odev-aciklama > p { margin: 0 0 16px; color: var(--metin); font-size: 13px; line-height: 1.7; }
.odev-ozet-liste li:first-child { border-top: 0; }
.odev-durum-formu { padding: 4px 22px 22px; }
.odev-durum-formu .buton { width: 100%; }
.odev-sinif-bolumu { margin-bottom: 20px; }
.teslim-listesi { display: grid; gap: 14px; padding: 0 23px 23px; }
.teslim-karti { border: 1px solid var(--cizgi); border-radius: 13px; overflow: hidden; scroll-margin-top: 20px; }
.teslim-baslik { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 15px; background: #fafbfc; }
.teslim-baslik strong, .teslim-baslik small { display: block; }
.teslim-baslik strong { font-size: 13px; }
.teslim-baslik small { margin-top: 3px; color: var(--soluk); font-size: 11px; }
.teslim-karti > .odev-dosya-yok { padding: 12px 15px; }
.teslim-icerik { display: grid; gap: 14px; padding: 15px; }
.teslim-zaman { margin: 0; color: var(--soluk); font-size: 12px; font-weight: 750; }
.teslim-not { padding: 12px 14px; border-radius: 10px; background: #f5f6f8; }
.teslim-not strong { display: block; margin-bottom: 5px; color: var(--soluk); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.teslim-not p { margin: 0; font-size: 13px; line-height: 1.6; }
.teslim-sonuc { padding: 13px 15px; border: 1px solid #bce8d7; border-radius: 10px; background: #e8f8f1; }
.teslim-sonuc strong { display: block; color: #086b49; font-size: 14px; }
.teslim-sonuc small { display: block; margin-top: 3px; color: var(--soluk); font-size: 11px; }
.teslim-sonuc p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; }
.teslim-sonuc--yeniden { border-color: #f4c2c6; background: #fdebed; }
.teslim-sonuc--yeniden strong { color: #8d1018; }
.degerlendirme-formu { display: grid; grid-template-columns: minmax(120px, .3fr) minmax(0, 1fr); gap: 12px; padding-top: 14px; border-top: 1px dashed var(--cizgi); }
.degerlendirme-islemleri { display: flex; grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.odev-karti .puan-rozeti { color: #086b49; }
.odev-teslim-bolumu, .odev-teslim-formu-karti { margin-bottom: 20px; }
.odev-teslim-bolumu .teslim-icerik { padding: 0 23px 23px; }
.teslim-formu { display: grid; gap: 16px; padding: 0 23px 23px; }
.teslim-formu .odev-form-islemleri { margin-top: 0; }
.kurs-baglantilar { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef0f3; font-size: 12px; font-weight: 750; }
.kurs-baglantilar a { color: var(--kirmizi); }
.kurs-ders-listesi { padding: 0 22px 16px; }
.ders-satir { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; cursor: default; }
/* Ders planı satırı (B-030): başlık 13px/400 ile tarihle aynı ağırlıktaydı, satırda
   hiyerarşi yoktu. Başlık bir adım yukarı ve kalın; tarih meta boyutuna çıktı. */
.ders-satir > span:nth-child(2) { font-size: var(--yazi-satir); font-weight: 650; line-height: 1.35; }
.ders-satir > span:nth-child(2) small { display: block; margin-top: 4px; color: var(--soluk); font-size: var(--yazi-meta); font-weight: 400; }
.ders-satir .buton { min-height: 34px; }
.liste-icerik strong a:hover { color: var(--kirmizi); }

@media (max-width: 980px) {
  .istatistikler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iki-kolon { grid-template-columns: minmax(0, 1fr); }
  /* Dar ekranda menü bağlantıları gizlenmez; logo/butonların altında kaydırılabilir satır olur */
  .site-nav { flex-wrap: wrap; height: auto; padding: 8px 0 8px; row-gap: 4px; }
  .site-nav > a:first-child img, .site-nav .marka img { width: auto; height: 60px; }
  .site-linkler { order: 3; width: 100%; gap: 6px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
  .site-linkler::-webkit-scrollbar { display: none; }
  .site-linkler a { flex: 0 0 auto; padding: 7px 11px; border-radius: 99px; background: rgba(255,255,255,.08); font-size: 13px; white-space: nowrap; }
  .site-linkler a.aktif { color: #1b2029; background: var(--sari); }
  .hero-ic { grid-template-columns: minmax(0, 1fr); gap: 45px; }
  .hero-panel { max-width: 590px; }
  .ozellik-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kurs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-yerlesim { grid-template-columns: minmax(0, 1fr); }
  .giris-kabuk { grid-template-columns: minmax(0, 1fr); }
  .giris-marka { min-height: 300px; }
  .giris-marka small { display: none; }
}

@media (max-width: 720px) {
  .mobil-ust { position: sticky; top: 0; z-index: 30; display: flex; height: 65px; align-items: center; justify-content: space-between; padding: 8px 18px; background: var(--lacivert); }
  .mobil-ust .marka img { width: auto; height: 50px; }
  .mobil-ust-islem { display: flex; align-items: center; gap: 4px; }
  /* B-002: mobil üst çubukta bildirim rozeti (aynı .bildirim-dugmesi işaretlemesi) */
  .mobil-ust .bildirim-dugmesi { width: 36px; height: 36px; margin-right: 6px; color: #fff; background: rgba(255,255,255,.12); }
  .mobil-ust .bildirim-dugmesi:hover, .mobil-ust .bildirim-kutu.acik .bildirim-dugmesi { color: #fff; background: rgba(255,255,255,.2); }
  .mobil-ust .bildirim-dugmesi b { border-color: var(--lacivert); }
  .mobil-ust .bildirim-panel { right: -6px; }
  .menu-ac { border: 0; color: #fff; background: transparent; font-size: 25px; }
  .panel-kabuk { display: block; }
  .yan-menu { position: fixed; left: 0; top: 65px; width: min(86vw, 290px); height: calc(100vh - 65px); height: calc(100dvh - 65px); padding-top: 18px; transform: translateX(-105%); transition: transform .25s ease; }
  .yan-menu.acik { transform: translateX(0); }
  .yan-logo { display: none; }
  .panel-ust { display: none; }
  .panel-icerik { padding: 24px 17px; overflow-x: clip; }
  .istatistikler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .istatistik { padding: 16px; }
  .istatistik strong { font-size: 20px; }
  .tarih { display: none; }
  .site-nav .marka img { width: auto; height: 54px; }
  .site-nav-islem .buton--cizgi { display: none; }
  .site-nav-islem .buton { min-height: 40px; padding: 0 14px; font-size: 13px; }
  .hero-ic { min-height: auto; padding: 62px 0 72px; }
  .hero h1 { font-size: 46px; }
  .hero-kopya > p { font-size: 16px; }
  .site-bolum { padding: 65px 0; }
  .ozellik-grid, .kurs-grid { grid-template-columns: minmax(0, 1fr); }
  .magaza-cta { align-items: flex-start; flex-direction: column; padding: 38px 25px; }
  .site-alt .site-kapsayici { align-items: flex-start; flex-direction: column; gap: 18px; }
  .kurslar-grid { grid-template-columns: minmax(0, 1fr); }
  .detay-ust { grid-template-columns: minmax(0, 1fr); }
  .detay-seviye { width: 70px; height: 70px; }
  /* B-018: başlık ve sağdaki işlemler mobilde alt alta */
  .sayfa-basligi { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 22px; }
  .sayfa-basligi > div:first-child { max-width: 100%; }
  .liste-icerik strong { white-space: normal; }
  /* B-005: kayan tablolarda ilk sütun sabit */
  .tablo-kapsayici.tasiyor th:first-child, .tablo-kapsayici.tasiyor td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 #eceef1; }
  .giris-marka { min-height: 260px; padding: 30px 24px; }
  .giris-marka h1 { margin: 25px 0 10px; font-size: 34px; }
  .giris-marka p { margin-bottom: 0; font-size: 14px; }
  .giris-form-alani { padding: 24px 16px; }
  .giris-form-karti { padding: 27px 22px; }
  .yorum-bolumu { padding: 20px 15px; }
  .yorum-baslik, .yorum-form-alt { align-items: flex-start; flex-direction: column; }
  .sure-alani { flex-wrap: wrap; }
  .video-kontroller { right: 10px; bottom: 10px; left: 10px; }
  .yorum-kutu-satiri { grid-template-columns: 38px minmax(0, 1fr); padding: 18px 15px; }
  .yorum-kutu-islem { grid-column: 2; align-items: flex-start; }
  .yoklama-secim form { grid-template-columns: minmax(0, 1fr); }
  .yoklama-kaydet { align-items: stretch; flex-direction: column; }
  .sinif-istatistikleri { grid-template-columns: minmax(0, 1fr); }
  .sinif-yonetim-grid { grid-template-columns: minmax(0, 1fr); }
  .yonetim-formu, .hizli-ekleme, .hizli-ekleme--ders, .ders-form-grid { grid-template-columns: minmax(0, 1fr); }
  .ders-form-grid .genis-alan { grid-column: auto; }
  .form-islemleri { grid-column: auto; flex-direction: column-reverse; }
  .canli-ders-filtre form, .canli-ders-formu { display: grid; grid-template-columns: minmax(0, 1fr); }
  .canli-ders-filtre label { min-width: 0; }
  .canli-ders-islemleri { grid-column: auto; flex-direction: column; }
  .ogrenci-canli-kart { grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 12px; padding: 15px; }
  .ogrenci-canli-tarih { width: 50px; height: 55px; }
  .ogrenci-canli-kart > .durum { grid-column: 2; justify-self: start; }
  .ogrenci-canli-islemler { align-items: stretch; flex-direction: column; }
  .bildirim-satiri { grid-template-columns: 38px minmax(0, 1fr); }
  .bildirim-satiri .buton { grid-column: 2; }
  .odev-form-grid, .odev-detay-grid, .odev-formu, .degerlendirme-formu { grid-template-columns: minmax(0, 1fr); }
  /* Tek sütunda okuma sırası eskisi gibi kalsın: açıklama -> künye -> teslim.
     Sarmalayıcı düzleşince `order` ızgara öğelerine uygulanabiliyor. */
  .odev-detay-ana { display: contents; }
  .odev-detay-grid { gap: 20px; }
  .odev-detay-ana > :first-child { order: 1; }
  .odev-detay-grid > .odev-yan { order: 2; position: static; }
  .odev-detay-ana > :not(:first-child) { order: 3; }
  .teslim-baslik { grid-template-columns: 38px minmax(0, 1fr); }
  .teslim-baslik > .durum { grid-column: 2; justify-self: start; }
}

/* denetim düzeltmeleri */
.durum--in_progress { color: #815600; background: #fff2cc; }
.panel-icerik .liste-icerik, .panel-icerik .kart h1, .panel-icerik .kart h2, .panel-icerik .bildirim-satiri p { overflow-wrap: anywhere; }
/* Tablo hücreleri: 'anywhere' min-content'i tek karaktere indirip ad/e-postayı harf harf kırıyordu; 'break-word' kelime bütünlüğünü korur, sığmayan tablo .tablo-kapsayici içinde kayar (B-003/B-005) */
.panel-icerik td, .panel-icerik td .tablo-alt { overflow-wrap: break-word; }

/* B-025: içerik kartlarındaki sembol kutuları artık SVG taşıyor. */
.istatistik .ikon svg { width: 21px; height: 21px; }
.liste-ikon svg { width: 16px; height: 16px; }

/* Kırıntı ve sayfa içi sekmeler (B-026) */
.kirinti { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 15px; color: var(--soluk); font-size: 13px; }
.kirinti a { color: var(--soluk); font-weight: 600; }
.kirinti a:hover { color: var(--kirmizi); text-decoration: underline; }
.kirinti i { color: #b9bec7; font-style: normal; }
.kirinti [aria-current="page"] { color: var(--metin); font-weight: 700; }
.sekmeler { display: flex; overflow-x: auto; gap: 3px; margin: 22px 0 16px; padding-bottom: 2px; border-bottom: 1px solid var(--cizgi); scrollbar-width: none; }
.sekmeler::-webkit-scrollbar { display: none; }
.sekmeler button { display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--soluk); background: transparent; font: inherit; font-size: 13px; font-weight: 650; white-space: nowrap; cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.sekmeler button:hover { color: var(--metin); }
.sekmeler button.aktif { border-bottom-color: var(--kirmizi); color: var(--kirmizi); }
.sekmeler button b { display: inline-grid; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: #eef0f3; color: var(--soluk); font-size: 11px; font-weight: 800; place-items: center; }
.sekmeler button.aktif b { background: #fceced; color: var(--kirmizi); }
.sekme-panel > .kart { margin-bottom: 16px; }
.panel-ust-bosluk { flex: 1; }
.panel-kurs-meta { margin: 3px 0 13px; color: var(--soluk); font-size: 13px; }

/* Sekme geçişi (B-027): panel anında değişince "tak" diye atıyordu. */
@keyframes arwen-sekme-belir { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.sekme-panel.beliren { animation: arwen-sekme-belir .24s cubic-bezier(.22, .61, .36, 1) both; }
.sekmeler { scroll-margin-top: 16px; }
@media (prefers-reduced-motion: reduce) {
  .sekme-panel.beliren { animation: none; }
  html { scroll-behavior: auto; }
}

/* Ödev teslimi: yazma alanı + ekler + ses kaydedici (B-029) */
.odev-yazma { display: block; margin-bottom: 18px; font-size: 13px; font-weight: 700; }
.odev-yazma textarea { display: block; width: 100%; margin-top: 8px; padding: 14px 15px; border: 1px solid var(--cizgi); border-radius: 13px; background: #fff; font: inherit; font-size: 14px; font-weight: 400; line-height: 1.6; resize: vertical; }
.odev-yazma textarea:focus { border-color: var(--kirmizi); outline: 0; box-shadow: 0 0 0 3px rgba(201, 15, 29, .09); }
.odev-ekler { padding: 15px; border: 1px dashed var(--cizgi); border-radius: 13px; background: #fafbfc; }
.odev-ekler-baslik { margin: 0 0 11px; font-size: 13px; font-weight: 700; }
.odev-ekler-baslik span { color: var(--soluk); font-weight: 500; }

.ses-kaydedici { margin-top: 12px; }
.ses-kaydet-dugme { display: inline-flex; align-items: center; gap: 8px; }
.ses-kaydet-dugme svg { width: 16px; height: 16px; }
.ses-kaydedici-uyari { margin-bottom: 9px; padding: 9px 12px; border-radius: 10px; background: #fff4e5; color: #8a5b00; font-size: 12px; line-height: 1.5; }
.ses-kayit-paneli { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid #f3ccd0; border-radius: 13px; background: #fff7f7; }
.ses-nabiz { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--kirmizi); animation: arwen-nabiz 1s ease-in-out infinite; }
@keyframes arwen-nabiz { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
.ses-sayac { min-width: 52px; color: var(--kirmizi); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ses-dalga { display: flex; align-items: center; gap: 3px; height: 22px; flex: 1; }
.ses-dalga i { width: 3px; height: 30%; border-radius: 99px; background: #e8a3a9; animation: arwen-dalga .9s ease-in-out infinite; }
.ses-dalga i:nth-child(2) { animation-delay: .1s; } .ses-dalga i:nth-child(3) { animation-delay: .2s; }
.ses-dalga i:nth-child(4) { animation-delay: .3s; } .ses-dalga i:nth-child(5) { animation-delay: .15s; }
.ses-dalga i:nth-child(6) { animation-delay: .25s; } .ses-dalga i:nth-child(7) { animation-delay: .05s; }
@keyframes arwen-dalga { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.ses-onizleme { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 11px 14px; border: 1px solid var(--cizgi); border-radius: 13px; background: #fff; }
.ses-onizleme audio { height: 34px; }
.ses-onizleme-bilgi { flex: 1; min-width: 120px; }
.ses-onizleme-bilgi strong { display: block; font-size: 12px; }
.ses-onizleme-bilgi small { color: var(--soluk); font-size: 11px; }
@media (prefers-reduced-motion: reduce) {
  .ses-nabiz, .ses-dalga i { animation: none; }
}
@media (max-width: 560px) {
  .ses-kayit-paneli { flex-wrap: wrap; }
  .ses-dalga { order: 3; width: 100%; flex: 0 0 100%; }
}

.odev-ses-eki audio { display: block; width: 100%; max-width: 320px; height: 36px; margin-top: 7px; }
.odev-ses-eki .liste-ikon svg { width: 15px; height: 15px; }

/* Liste satırı hiyerarşisi (B-030): başlık > meta. Tek yerde tanımlı, her listede aynı. */
.liste-icerik strong, .liste-icerik strong a { font-size: var(--yazi-satir); font-weight: 650; line-height: 1.35; }
.liste-icerik small { display: block; margin-top: 3px; color: var(--soluk); font-size: var(--yazi-meta); }
.odev-dosyalari li > div > strong { font-size: var(--yazi-satir); font-weight: 650; }
.odev-dosyalari li > div > small { font-size: var(--yazi-meta); }

/* Ders oynatıcı: video altı sade görünüm (B-032) */
.video-bilgi h1 { margin: 0; font-size: var(--yazi-bolum); line-height: 1.25; }
.video-bilgi-aciklama { margin: 9px 0 0; color: var(--soluk); font-size: var(--yazi-govde); line-height: 1.65; }
.video-bilgi-alt { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cizgi); }
.video-bilgi-sure { display: inline-flex; align-items: center; gap: 6px; color: var(--soluk); font-size: var(--yazi-meta); font-weight: 600; }
.video-bilgi-sure svg { width: 15px; height: 15px; }
.kurs-tamamla-formu { margin: 0; }

/* Dökümanlar artık ders kartının içinde (B-033) */
.video-bilgi-dokumanlar { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cizgi); }
.video-bilgi-dokumanlar h2 { margin: 0 0 10px; font-size: var(--yazi-kart); }
.video-bilgi-dokumanlar .odev-dosya-yok, .video-bilgi-dokumanlar .kurs-dosya-yok { margin: 0; color: var(--soluk); font-size: var(--yazi-meta); }

/* Sorular ve yorumlar (B-034): video sütununun içinde, başlık ikonlu ve sakin */
.yorum-baslik-metin h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: var(--yazi-kart); }
.yorum-baslik-metin h2 svg { width: 18px; height: 18px; color: var(--kirmizi); }
.yorum-baslik-metin p { margin: 6px 0 0; color: var(--soluk); font-size: var(--yazi-meta); line-height: 1.55; }
.video-yerlesim .yorum-bolumu { margin-top: 16px; }

/* Yorumlar sadeleştirildi (B-035): kart 28->20 px, form 90->56 px, satırlar 20->13 px.
   Süre alanı tek satıra alındı; gönder düğmesi küçültüldü. */
.sure-alani { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sure-alani label { color: var(--soluk); font-size: var(--yazi-mini); font-weight: 600; }
.sure-alani input { width: 76px; padding: 5px 8px; border: 1px solid var(--cizgi); border-radius: 8px; font-size: var(--yazi-meta); }
.sure-alani button { padding: 0; border: 0; color: var(--kirmizi); background: transparent; font: inherit; font-size: var(--yazi-mini); font-weight: 700; cursor: pointer; }
.sure-alani button:hover { text-decoration: underline; }
.yorum-form-alt > .buton { min-height: 36px; padding: 0 16px; font-size: var(--yazi-meta); }
.kurs-kaynak-islem .buton svg { width: 14px; height: 14px; margin-right: 5px; }
.odev-dosyalari .liste-ikon svg { width: 15px; height: 15px; }

/* textarea/input tarayici varsayilani monospace'e dusuyordu (B-035) */
.yorum-formu textarea, .yanit-formu textarea, .sure-alani input { font-family: inherit; font-size: var(--yazi-govde); line-height: 1.55; }
.sure-alani input { font-size: var(--yazi-meta); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------- Özel video oynatıcı (B-036) */
.oynatici { position: relative; overflow: hidden; border-radius: var(--radius); background: #05070b; }
.oynatici video { display: block; width: 100%; height: auto; cursor: pointer; }
.oynatici-perde { position: absolute; inset: 0; display: grid; border: 0; background: transparent; place-items: center; cursor: pointer; }
.oynatici.oynuyor .oynatici-perde { pointer-events: none; opacity: 0; }
.oynatici-perde-dugme { display: grid; width: 74px; height: 74px; border-radius: 50%; color: #fff; background: rgba(201,15,29,.92); box-shadow: 0 10px 30px rgba(0,0,0,.35); place-items: center; transition: transform .18s ease; }
.oynatici-perde-dugme svg { width: 30px; height: 30px; margin-left: 4px; }
.oynatici-perde:hover .oynatici-perde-dugme { transform: scale(1.06); }

.oynatici-kontrol { position: absolute; right: 0; bottom: 0; left: 0; padding: 22px 14px 11px; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0)); opacity: 0; transition: opacity .2s ease; }
.oynatici:hover .oynatici-kontrol, .oynatici:focus-within .oynatici-kontrol, .oynatici:not(.oynuyor) .oynatici-kontrol { opacity: 1; }

.oynatici-cubuk { position: relative; height: 16px; cursor: pointer; touch-action: none; }
.oynatici-cubuk::before { content: ''; position: absolute; top: 6px; right: 0; left: 0; height: 4px; border-radius: 99px; background: rgba(255,255,255,.28); }
.oynatici-tampon, .oynatici-ilerleme { position: absolute; top: 6px; left: 0; height: 4px; border-radius: 99px; }
.oynatici-tampon { background: rgba(255,255,255,.4); }
.oynatici-ilerleme { background: var(--kirmizi); }
.oynatici-tutamak { position: absolute; top: 3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); transform: scale(0); transition: transform .15s ease; }
.oynatici-cubuk:hover .oynatici-tutamak, .oynatici-cubuk:focus-visible .oynatici-tutamak { transform: scale(1); }
.oynatici-cubuk:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.oynatici-balon { position: absolute; bottom: 20px; padding: 3px 7px; border-radius: 7px; background: rgba(0,0,0,.85); color: #fff; font-size: var(--yazi-rozet); font-variant-numeric: tabular-nums; transform: translateX(-50%); pointer-events: none; }

/* Yorum işaretleri — bu oynatıcıyı "bize özel" yapan kısım */
.oynatici-isaretler { position: absolute; top: 6px; right: 0; left: 0; height: 4px; }
.oynatici-isaret { position: absolute; top: -3px; width: 4px; height: 10px; padding: 0; margin-left: -2px; border: 0; border-radius: 2px; background: var(--sari); cursor: pointer; transition: transform .15s ease; }
.oynatici-isaret:hover { transform: scaleY(1.5) scaleX(1.6); }

.oynatici-alt { display: flex; align-items: center; gap: 9px; margin-top: 2px; }
.oynatici-bosluk { flex: 1; }
.oynatici-dugme { display: grid; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; color: #fff; background: transparent; place-items: center; cursor: pointer; transition: background .15s ease; }
.oynatici-dugme:hover { background: rgba(255,255,255,.16); }
.oynatici-dugme svg { width: 17px; height: 17px; }
.oynatici.oynuyor [data-oynat] svg:first-child { display: none; }
.oynatici-sure { color: #fff; font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.oynatici-sure b { font-weight: 700; }
.oynatici-hiz { width: auto; padding: 0 9px; font-size: var(--yazi-mini); font-weight: 700; }
.oynatici-ses { display: flex; align-items: center; gap: 5px; }
.oynatici-ses input { width: 0; opacity: 0; transition: width .2s ease, opacity .2s ease; accent-color: var(--kirmizi); }
.oynatici-ses:hover input, .oynatici-ses input:focus-visible { width: 68px; opacity: 1; }
.oynatici.sessiz [data-ses-dugme] { color: #ff9ba2; }

/* Yorum süresi rozeti (B-037): canlı kırmızı, tıklanınca sabitlenir */
.sure-gosterge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #f3ccd0; border-radius: 99px; color: var(--kirmizi); background: #fff5f6; font: inherit; font-size: var(--yazi-mini); font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.sure-gosterge:hover { background: #fdebed; border-color: var(--kirmizi); }
.sure-gosterge svg { width: 12px; height: 12px; }
.sure-gosterge-not { color: var(--soluk); font-weight: 500; }
/* B-039: sabitleme kaldirildi; rozet artik sureyi mesajin icine yazar. */

@media (max-width: 560px) {
  .oynatici-kontrol { opacity: 1; padding: 18px 9px 8px; }
  .oynatici-ses { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .oynatici-perde-dugme, .oynatici-tutamak, .oynatici-isaret { transition: none; }
}

/* ------------------------------------------- Sayfa geçişleri (B-038)
   Dersler arasında geçerken sayfa "yenilendi" gibi çakıyordu. View Transitions ile
   aynı köken navigasyonu yumuşak geçiyor; kalıcı öğeler (yan menü, üst çubuk, ders
   listesi) ADLANDIRILIP animasyonsuz bırakıldığı için yerlerinde duruyor, yalnız
   içerik değişiyor. Desteklemeyen tarayıcıda hiçbir şey olmaz — sayfa eskisi gibi
   yüklenir, kural yok sayılır. */
@view-transition { navigation: auto; }

.yan-menu { view-transition-name: arwen-yan-menu; }
.panel-ust { view-transition-name: arwen-ust-cubuk; }
.kurs-mufredat { view-transition-name: arwen-ders-listesi; }
.kirinti { view-transition-name: arwen-kirinti; }

/* Kalıcı öğeler: geçişte kıpırdamasınlar */
::view-transition-group(arwen-yan-menu),
::view-transition-group(arwen-ust-cubuk),
::view-transition-group(arwen-ders-listesi) { animation-duration: 0s; }
::view-transition-old(arwen-yan-menu), ::view-transition-new(arwen-yan-menu),
::view-transition-old(arwen-ust-cubuk), ::view-transition-new(arwen-ust-cubuk),
::view-transition-old(arwen-ders-listesi), ::view-transition-new(arwen-ders-listesi) { animation: none; mix-blend-mode: normal; }

/* İçerik: kısa ve yumuşak */
::view-transition-old(root) { animation: arwen-gecis-cik .16s ease both; }
::view-transition-new(root) { animation: arwen-gecis-gir .26s cubic-bezier(.22,.61,.36,1) both; }
@keyframes arwen-gecis-cik { to { opacity: 0; } }
@keyframes arwen-gecis-gir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Ders listesinde seçili satır yumuşak geçsin */
.kurs-mufredat .ders-link { transition: background .18s ease, color .18s ease; }
.kurs-mufredat .ders-link.aktif { position: relative; }
.kurs-mufredat .ders-link.aktif::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--kirmizi); }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Mesaj içindeki süre rozetleri (B-039): kaç tane olursa olsun tıklanabilir */
.sure-linki { display: inline-flex; align-items: center; padding: 1px 7px; margin: 0 1px; border: 0; border-radius: 6px; color: var(--kirmizi); background: #fdebed; font: inherit; font-size: inherit; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; vertical-align: baseline; }
.sure-linki:hover { background: var(--kirmizi); color: #fff; }

/* ---------------------------------------------- Katlanabilir bölüm (B-040) */
.katlanir { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cizgi); }
.katlanir-baslik { display: flex; align-items: center; gap: 9px; width: 100%; padding: 0; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.katlanir-baslik h2 { margin: 0; font-size: var(--yazi-kart); }
.katlanir-sayi { display: inline-grid; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #eef0f3; color: var(--soluk); font-size: var(--yazi-rozet); font-weight: 800; place-items: center; }
.katlanir-ok { margin-left: auto; color: var(--soluk); }
.katlanir-ok svg { display: block; width: 18px; height: 18px; }
.katlanir.kapali .katlanir-ok { transform: rotate(-90deg); }
/* B-047: animasyon YALNIZ kullanıcı tıkladığında. Sayfa açılışında geçiş olmaz,
   yoksa her ders geçişinde kart gözle görülür şekilde kapanıyordu. */
.katlanir-govde { display: grid; grid-template-rows: 1fr; }
.katlanir--canli .katlanir-govde { transition: grid-template-rows .28s cubic-bezier(.22,.61,.36,1), opacity .2s ease; }
.katlanir--canli .katlanir-ok { transition: transform .25s ease; }
.katlanir-govde > div { overflow: hidden; padding-top: 10px; }
.katlanir.kapali .katlanir-govde { grid-template-rows: 0fr; opacity: 0; }

/* ---------------------------------------------- Yorum modları (B-041) */
.yorum-modlari { display: flex; align-items: center; gap: 4px; margin: 14px 0 4px; }
.yorum-modlari button { padding: 5px 12px; border: 1px solid var(--cizgi); border-radius: 99px; background: #fff; color: var(--soluk); font: inherit; font-size: var(--yazi-mini); font-weight: 700; cursor: pointer; transition: .15s ease; }
.yorum-modlari button:hover { border-color: var(--kirmizi); color: var(--kirmizi); }
.yorum-modlari button.aktif { border-color: var(--kirmizi); background: var(--kirmizi); color: #fff; }
.yorum-mod-not { margin-left: 6px; color: var(--soluk); font-size: var(--yazi-mini); }
.yorum-akis { margin-top: 10px; }
.yorum-akis-bos { margin: 0; padding: 22px 10px; color: var(--soluk); font-size: var(--yazi-meta); text-align: center; }
.yorum-akis-ogesi { animation: arwen-akis-gir .34s cubic-bezier(.22,.61,.36,1) both; }
/* Üstten düşer, altındakiler yer açar (B-043) */
@keyframes arwen-akis-gir { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------- Sonraki ders kartı (B-040) */
.oynatici-sonraki { position: absolute; top: 14px; right: 14px; z-index: 3; display: grid; gap: 3px; max-width: 260px; padding: 12px 14px; border-radius: 13px; background: rgba(10,13,18,.9); color: #fff; box-shadow: 0 12px 34px rgba(0,0,0,.4); animation: arwen-sonraki-gir .3s ease both; }
@keyframes arwen-sonraki-gir { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.oynatici-sonraki small { color: rgba(255,255,255,.65); font-size: var(--yazi-rozet); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.oynatici-sonraki strong { font-size: var(--yazi-meta); line-height: 1.35; }
.oynatici-sonraki .buton { margin-top: 6px; }
.oynatici-sonraki .metin-dugme { color: rgba(255,255,255,.7); font-size: var(--yazi-rozet); }

/* ---------------------------------------------- Sinema modu (B-042) */
body.sinema-modu { overflow: hidden; }
.video-yerlesim.sinema { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0; padding: 0; background: #05070b; }
.video-yerlesim.sinema .video-sutun { display: grid; align-content: center; min-width: 0; min-height: 0; overflow: hidden; padding: 0 clamp(8px, 2vw, 28px); }
.video-yerlesim.sinema .oynatici video { max-height: calc(100vh - 40px); object-fit: contain; }
.video-yerlesim.sinema .oynatici { border-radius: 0; align-self: center; }
.video-yerlesim.sinema .video-bilgi { display: none; }
.video-yerlesim.sinema .kurs-mufredat { display: none; }
.video-yerlesim.sinema > .yorum-bolumu { margin: 0; overflow-y: auto; border: 0; border-left: 1px solid rgba(255,255,255,.1); border-radius: 0; background: #0b0f16; color: #e6e9ee; }
.video-yerlesim.sinema .yorum-bolumu h2, .video-yerlesim.sinema .yorum-metni, .video-yerlesim.sinema .yorum-meta strong { color: #f2f4f7; }
.video-yerlesim.sinema .yorum-formu { background: #131925; border-color: rgba(255,255,255,.12); }
.video-yerlesim.sinema .yorum-formu textarea { background: #0b0f16; color: #f2f4f7; }
.video-yerlesim.sinema .yorum { border-top-color: rgba(255,255,255,.08); }
.video-yerlesim.sinema .yorum--ogretmen { background: rgba(246,180,19,.12); }
.video-yerlesim.sinema .yorum-modlari button { background: transparent; border-color: rgba(255,255,255,.18); color: #c6ccd6; }
.video-yerlesim.sinema .yorum-modlari button.aktif { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
@media (max-width: 900px) {
  .video-yerlesim.sinema { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .video-yerlesim.sinema .yorum-bolumu { grid-row: 2; grid-column: 1; border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
}
@media (prefers-reduced-motion: reduce) {
  .katlanir-govde, .katlanir-ok { transition: none; }
  .yorum-akis-ogesi, .oynatici-sonraki { animation: none; }
}

/* Panel içi kaydırma çubukları (B-044): ince ve soluk — içeriğin önüne geçmesin.
   Yan menü kendi koyu zeminine göre ayrı ayarlı (yukarıda), burası açık alanlar için. */
.panel-ana, .yorum-listesi, .yorum-akis, .kurs-mufredat, .bildirim-panel-liste, .tablo-kapsayici {
  scrollbar-width: thin;
  scrollbar-color: rgba(32, 38, 49, .16) transparent;
}
.panel-ana::-webkit-scrollbar, .yorum-listesi::-webkit-scrollbar, .yorum-akis::-webkit-scrollbar,
.kurs-mufredat::-webkit-scrollbar, .bildirim-panel-liste::-webkit-scrollbar, .tablo-kapsayici::-webkit-scrollbar {
  width: 7px; height: 7px;
}
.panel-ana::-webkit-scrollbar-track, .yorum-listesi::-webkit-scrollbar-track, .yorum-akis::-webkit-scrollbar-track,
.kurs-mufredat::-webkit-scrollbar-track, .bildirim-panel-liste::-webkit-scrollbar-track, .tablo-kapsayici::-webkit-scrollbar-track {
  background: transparent;
}
.panel-ana::-webkit-scrollbar-thumb, .yorum-listesi::-webkit-scrollbar-thumb, .yorum-akis::-webkit-scrollbar-thumb,
.kurs-mufredat::-webkit-scrollbar-thumb, .bildirim-panel-liste::-webkit-scrollbar-thumb, .tablo-kapsayici::-webkit-scrollbar-thumb {
  border-radius: 99px; background: rgba(32, 38, 49, .16);
}
.panel-ana:hover::-webkit-scrollbar-thumb, .yorum-listesi:hover::-webkit-scrollbar-thumb,
.kurs-mufredat:hover::-webkit-scrollbar-thumb { background: rgba(32, 38, 49, .3); }
/* Sayfanın kendi çubuğu da sakinleşsin */
html { scrollbar-width: thin; scrollbar-color: rgba(32, 38, 49, .18) transparent; }
/* Sinema modunda koyu zemine göre */
.video-yerlesim.sinema > .yorum-bolumu { scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.video-yerlesim.sinema > .yorum-bolumu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }

/* Sinema modunda üst bilgi satırı sakinleşir (B-045): koyu zeminde rol etiketi, saat ve
   "Yeni" rozeti kırmızı/parlak durunca gözü videodan alıyordu. Renk yerine saydamlık. */
.video-yerlesim.sinema .yorum-meta { opacity: .78; }
.video-yerlesim.sinema .yorum-meta .rol { border: 1px solid rgba(255,255,255,.18); background: transparent; color: #aab2bf; font-weight: 600; }
.video-yerlesim.sinema .yorum-meta .yeni-rozeti { border: 1px solid rgba(246,180,19,.5); background: transparent; color: var(--sari); font-weight: 600; }
.video-yerlesim.sinema .yorum-meta time { color: #7f8896; }
.video-yerlesim.sinema .yorum-meta strong { color: #e9ecf1; }
.video-yerlesim.sinema .yorum:hover .yorum-meta { opacity: 1; }
/* Metin içindeki süre rozeti de koyu zeminde yumuşasın */
.video-yerlesim.sinema .sure-linki { background: rgba(201,15,29,.2); color: #ff9aa2; }
.video-yerlesim.sinema .sure-linki:hover { background: var(--kirmizi); color: #fff; }

/* Ders kartı başlığı: sol başlık+ok, sağ tamamla düğmesi; katlansa da görünür (B-046) */
.video-bilgi.katlanir { margin-top: 14px; padding-top: 22px; border-top: 0; }
.video-bilgi-ust { display: flex; align-items: center; gap: 14px; }
.video-bilgi-ust .katlanir-baslik { flex: 1; min-width: 0; }
.video-bilgi-ust .katlanir-baslik h1 { margin: 0; font-size: var(--yazi-bolum); line-height: 1.25; }
.video-bilgi-ust .kurs-tamamla-formu { flex: 0 0 auto; margin: 0; }
.video-bilgi .katlanir-govde > div { padding-top: 0; }
.video-bilgi .video-bilgi-aciklama { margin-top: 9px; }
.video-bilgi .video-bilgi-dokumanlar { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cizgi); }
.video-bilgi .video-bilgi-dokumanlar h2 { display: flex; align-items: center; gap: 9px; }
.video-bilgi.katlanir.kapali { padding-bottom: 22px; }
@media (max-width: 560px) {
  .video-bilgi-ust { flex-wrap: wrap; }
  .video-bilgi-ust .kurs-tamamla-formu { width: 100%; }
  .video-bilgi-ust .kurs-tamamla-formu .buton { width: 100%; }
}

/* Geçmiş dersler soluk ve renksiz (B-048): bitmiş ders dikkat çekmesin, yaklaşan öne çıksın.
   Fareyle üzerine gelince rengine döner — kayıt/not aramak için okunabilir kalsın. */
.ogrenci-canli-listesi--gecmis .ogrenci-canli-kart { filter: grayscale(1); opacity: .62; transition: filter .2s ease, opacity .2s ease; }
.ogrenci-canli-listesi--gecmis .ogrenci-canli-kart:hover,
.ogrenci-canli-listesi--gecmis .ogrenci-canli-kart:focus-within { filter: grayscale(0); opacity: 1; }
.canli-ders-not { margin: 0 0 12px; color: var(--soluk); font-size: var(--yazi-meta); }

/* Not sütunu: etiket üstte küçük, metin altında; kart yüksekliğini şişirmesin */
.ogrenci-canli-kart > .ders-notu { margin-top: 0; gap: 7px; }
.ogrenci-canli-kart > .ders-notu .ders-notu-etiket { display: block; margin: 0 0 1px; }
.ogrenci-canli-kart > .ders-notu p { font-size: var(--yazi-meta); }
@media (max-width: 1100px) {
  /* Dar ekranda not tekrar alta iner, ama tam genişlikte */
  .ogrenci-canli-kart { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .ogrenci-canli-kart > .ders-notu { grid-column: 2 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--cizgi); padding-top: 9px; }
}

/* Yoklama tablosu satırları sıkıştırıldı (B-051) */
.tablo-kapsayici td, .tablo-kapsayici th { padding-top: 9px; padding-bottom: 9px; }

/* Katılım geçmişi tablosu: fontlar bir tık büyütüldü (B-052) */
.tablo-kapsayici th { font-size: var(--yazi-mini); }
.tablo-kapsayici td { font-size: var(--yazi-govde); }
.tablo-kapsayici td small { font-size: var(--yazi-meta); }

/* B-053: Yoklama tablosu sütunları içerikten hesaplanıyordu (table-layout: auto);
   "Tüm sınıflar" ile bir sınıf arasında geçerken sütunlar 7-30 px kayıyordu
   ("Öğretmen notu" en çok, çünkü en uzun metin ona göre ölçülüyordu).
   Sabit yüzdelerle düzen kilitlendi; yalnız bu tabloya uygulanır, diğer tablolar
   içeriğe göre genişlemeye devam eder. */
.ogrenci-yoklama-tablosu { table-layout: fixed; width: 100%; }
.ogrenci-yoklama-tablosu th:nth-child(1), .ogrenci-yoklama-tablosu td:nth-child(1) { width: 18%; }
.ogrenci-yoklama-tablosu th:nth-child(2), .ogrenci-yoklama-tablosu td:nth-child(2) { width: 25%; }
.ogrenci-yoklama-tablosu th:nth-child(3), .ogrenci-yoklama-tablosu td:nth-child(3) { width: 15%; }
.ogrenci-yoklama-tablosu th:nth-child(4), .ogrenci-yoklama-tablosu td:nth-child(4) { width: 15%; }
.ogrenci-yoklama-tablosu th:nth-child(5), .ogrenci-yoklama-tablosu td:nth-child(5) { width: 27%; }
.ogrenci-yoklama-tablosu td { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  /* Dar ekranda sabit yüzde sıkıştırır; kapsayıcı zaten yatay kayıyor. */
  .ogrenci-yoklama-tablosu { table-layout: auto; min-width: 680px; }
}


/* ---------------------------------------------- Çalışma süresi kartı (B-055)
   Önce kart içinde kutu, kutu içinde çubuk vardı — iç içe blok gibi duruyordu.
   Artık tek gövde: kenarlıksız özet, kartın kenarına taşan grafik, noktalı tür satırı. */
.calisma-karti { margin-top: 18px; padding: 22px 24px 20px; }
.calisma-ust { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.calisma-ust h2 { margin: 0; font-size: var(--yazi-kart); }
.calisma-anahtar { flex: 0 0 auto; margin: 0; padding: 3px; border: 0; border-radius: 99px; background: #f2f4f7; }
.calisma-anahtar button { padding: 6px 15px; border: 0; border-bottom: 0; margin: 0; border-radius: 99px; color: var(--soluk); font-size: var(--yazi-mini); font-weight: 700; }
.calisma-anahtar button.aktif { border-bottom: 0; background: #fff; color: var(--metin); box-shadow: 0 1px 3px rgba(20, 25, 35, .12); }

.calisma-ozet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 4px; }
.calisma-ozet > div { padding: 0 18px; border-left: 1px solid var(--cizgi); }
.calisma-ozet > div:first-child { padding-left: 0; border-left: 0; }
.calisma-ozet strong { display: block; font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
/* B-056: '7/7' önce '7₇' gibi alt simge sanılıyordu (payda 15 px'ti).
   Artık yalnız bölme çizgisi soluk; iki sayı da aynı puntoda. */
.calisma-ozet strong i { margin: 0 1px; color: #c3c8d0; font-style: normal; font-weight: 500; }
.calisma-ozet span { display: block; margin-top: 3px; color: var(--soluk); font-size: var(--yazi-mini); }

/* B-056: grafik kartın kenarına taşırılmıştı (margin-inline: -24px); kart overflow:hidden
   olduğu için eğrinin iki ucu kesiliyordu ve 23 px dışarı çıkıyordu. Artık kart içinde;
   son noktanın dairesi sığsın diye yatay iç boşluk var. */
.calisma-grafik-kutu { position: relative; height: 168px; margin: 14px 0 0; padding: 0 8px; }
/* B-058: imleç katmanı SVG'nin çizim alanına birebir oturur (kutunun 8px iç boşluğu). */
.calisma-katman { position: absolute; inset: 0 8px; pointer-events: none; }
.calisma-imlec { position: absolute; top: 8%; bottom: 0; width: 1px; background: var(--kirmizi); opacity: .32; transform: translateX(-.5px); }
.calisma-tepe { position: absolute; width: 11px; height: 11px; border: 2.2px solid var(--kirmizi); border-radius: 50%; background: #fff; transform: translate(-50%, -50%); transition: left .12s ease, top .12s ease; }
.calisma-tepe.etkin { box-shadow: 0 0 0 5px rgba(201, 15, 29, .13); }
.calisma-ortalama { stroke: #98a0ad; stroke-width: 1.4; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; opacity: .75; }
.calisma-ortalama-etiket.sol { right: auto; left: 0; }
.calisma-ortalama-etiket { position: absolute; right: 0; padding: 1px 7px; border-radius: 99px; background: #eef0f4; color: #6b7280; font-size: 11px; font-weight: 700; white-space: nowrap; transform: translateY(-50%); }
.calisma-balon { position: absolute; z-index: 2; padding: 7px 11px; border-radius: 10px; background: #1b2028; color: #fff; white-space: nowrap; transform: translate(-50%, -130%); box-shadow: 0 8px 22px rgba(20, 25, 35, .28); }
.calisma-balon b { display: block; font-size: 13px; font-weight: 700; line-height: 1.25; }
.calisma-balon span { display: block; color: #aab2c0; font-size: 11px; }
.calisma-balon.sol { transform: translate(0, -130%); }
.calisma-balon.sag { transform: translate(-100%, -130%); }
/* Tepe noktalarda balon kartın özet satırına taşıyordu; altına geçer. */
.calisma-balon.alt { transform: translate(-50%, 30%); }
.calisma-balon.alt.sol { transform: translate(0, 30%); }
.calisma-balon.alt.sag { transform: translate(-100%, 30%); }
.calisma-grafik { display: block; width: 100%; height: 100%; overflow: visible; }
.calisma-cizgi { fill: none; stroke: var(--kirmizi); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.calisma-izgara { stroke: var(--cizgi); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.calisma-nokta { fill: #fff; stroke: var(--kirmizi); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
/* B-057: etiketler noktalara hizalı — mutlak konum + translateX(-50%).
   İlk ve son etiket kenardan taşmasın diye clamp ile sınırlanıyor. */
.calisma-eksen { position: relative; height: 16px; margin-top: 9px; padding: 0 8px; color: #9aa1ac; font-size: var(--yazi-mini); }
.calisma-eksen span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.calisma-eksen span:first-child { transform: translateX(-4px); }
.calisma-eksen span:last-child { transform: translateX(-100%); }
.calisma-eksen .bugun { color: var(--metin); font-weight: 700; }
.calisma-eksen--hafta span { font-variant-numeric: tabular-nums; }
.calisma-eksen i { margin-right: 4px; font-style: normal; }
@media (max-width: 620px) {
  /* Dar ekranda gün adları çakışıyordu; yalnız gün sayısı kalır. */
  .calisma-eksen i { display: none; }
  /* 30 günlükte 7 etiket dar ekrana sığmıyor; bir atlayarak seyreltiliyor. */
  .calisma-eksen:not(.calisma-eksen--hafta) span:nth-child(even):not(:last-child) { display: none; }
}

.calisma-turler { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--cizgi); list-style: none; }
.calisma-tur { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 99px; background: #f7f8fa; }
.calisma-tur-nokta { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--kirmizi); }
.calisma-tur--odev .calisma-tur-nokta { background: var(--sari); }
.calisma-tur--sinav .calisma-tur-nokta { background: #5b74a8; }
.calisma-tur--yorum .calisma-tur-nokta { background: var(--yesil); }
.calisma-tur-ad { color: var(--soluk); font-size: var(--yazi-mini); font-weight: 650; }
.calisma-tur b { font-size: var(--yazi-meta); font-weight: 750; font-variant-numeric: tabular-nums; }
.calisma-tur small { color: #a6acb6; font-size: var(--yazi-rozet); font-weight: 700; }
.calisma-bos { margin: 10px 0 0; padding: 30px 12px; color: var(--soluk); font-size: var(--yazi-meta); text-align: center; }

@media (max-width: 720px) {
  .calisma-karti { padding: 18px 16px 16px; }
  .calisma-ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
  .calisma-ozet > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .calisma-grafik-kutu { margin-inline: 0; height: 140px; }
}

/* Panel karşılama düğmesi (B-055): tam boy blok gibi duruyordu; oranları yumuşadı. */
.hosgeldin .buton { min-height: 42px; padding: 0 18px; border-radius: 12px; font-size: var(--yazi-meta); box-shadow: 0 6px 18px rgba(201, 15, 29, .22); }
.hosgeldin .buton:hover { box-shadow: 0 8px 22px rgba(201, 15, 29, .28); }