/* =====================================================================
   NotTakip Sınıf — tasarım sistemi (varsayılan, profesyonel görünüm)
   Yalnızca <html class="pro"> iken uygulanır. Eski renkli tasarımlar
   (Profil › Sayfa tasarımı) style.css ile aynen çalışmaya devam eder.
   Renkler yalnızca aşağıdaki değişkenlerden kullanılır.
   ===================================================================== */
html.pro {
  /* Marka rengi: varsayılan "Gökyüzü" paleti; diğer paletler aşağıda html.pro[data-pro] ile değişir */
  --p-ana: #1c64d1;
  --p-ana-koyu: #154ea6;
  --p-ana-acik: #e3edfc;
  --p-mint: #38bdf8;         /* vurgu */
  --p-mint-acik: #e6f6fe;
  --p-ikinci: #3b5bdb;       /* ikincil düğme */
  --p-h1: #1e3a8a; --p-h2: #2563eb; --p-h3: #38bdf8;   /* karşılama bandı */
  --p-golge-renk: 30, 58, 138;
  --p-z1: #dbeafe; --p-z2: #fdf0dc;                     /* sayfa zemini ışığı */
  /* Zemin ve yazı */
  --p-zemin: #f5f6f4;        /* kırık beyaz */
  --p-kart: #ffffff;
  --p-gri: #eef1ef;          /* açık gri yüzey */
  --p-cizgi: #dfe4e2;
  --p-yazi: #1c2a2b;
  --p-ikincil: #566668;
  /* Durumlar (her zaman metin/ikonla birlikte kullanılır) */
  --p-basari: #1d7a4e;  --p-basari-acik: #e3f3ea;
  --p-uyari: #8a5300;   --p-uyari-acik: #fdf1d8;  --p-uyari-cizgi: #e9c46a;
  --p-hata: #b42318;    --p-hata-acik: #fdeceb;
  /* Ölçüler */
  --p-r: 12px; --p-r-k: 8px;
  --p-golge: 0 1px 2px rgba(16, 40, 42, .06), 0 1px 1px rgba(16, 40, 42, .04);

  /* style.css değişkenlerini markaya bağla: mevcut bileşenler otomatik uyar */
  --bg: var(--p-zemin); --card: var(--p-kart); --ink: var(--p-yazi); --soft: var(--p-ikincil); --line: var(--p-cizgi);
  --blue: var(--p-ana); --green: var(--p-ana); --purple: var(--p-ikinci); --pink: var(--p-ana);
  --orange: #b7791f; --red: var(--p-hata); --star: #e0a800; --star-off: #d6dcda; --radius: var(--p-r);
}
html.pro body {
  background: var(--p-zemin); background-image: none;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.5;
}
html.pro .wrap { max-width: 1200px; padding: 0 20px 32px; }
html.pro h1 { font-size: 20px; }
html.pro h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
html.pro h3 { font-weight: 600; }
html.pro .muted { color: var(--p-ikincil); font-size: 14px; }
html.pro :focus-visible { outline: 3px solid var(--p-mint); outline-offset: 2px; }
/* İkonlar tüm tasarımlarda (renkli tasarımlar dahil) yazı boyutuna göre ölçeklenir */
.ik { width: 1.2em; height: 1.2em; flex: 0 0 auto; vertical-align: -0.22em; }
html.pro .ik { width: 20px; height: 20px; vertical-align: -4px; }

/* ---------- Düğmeler ve form alanları ---------- */
/* Düşük özgüllük: yalnızca sınıfsız ve genel amaçlı düğmeleri etkiler; yoklama, puan kartı gibi özel bileşenler kendi görünümünü korur */
:where(html.pro) button, :where(html.pro) .btn {
  border-radius: var(--p-r-k); box-shadow: none; min-height: 44px; padding: 10px 16px; font-weight: 600; font-size: 15px;
  background: var(--p-ana); color: #fff; border: 1px solid transparent; transition: background .15s, border-color .15s;
}
:where(html.pro) :is(button:not([class]), button.green, button.purple, button.small:not(.ghost):not(.red):not(.orange)):hover:not(:disabled) { background: var(--p-ana-koyu); }
:where(html.pro) button:active { transform: none; }
html.pro button.small, html.pro .btn.small { min-height: 38px; padding: 6px 12px; font-size: 14px; }
html.pro button.ghost, html.pro .btn.ghost, html.pro .google-dugme {
  background: var(--p-kart); color: var(--p-yazi); border: 1px solid var(--p-cizgi); box-shadow: none;
}
html.pro button.ghost:hover:not(:disabled), html.pro .btn.ghost:hover { background: var(--p-gri); border-color: #c9d1ce; }
html.pro button.red { background: var(--p-hata); }
html.pro button.red:hover:not(:disabled) { background: #8f1c13; }
html.pro button.orange { background: #fff; color: var(--p-uyari); border-color: var(--p-uyari-cizgi); }
html.pro button.orange:hover:not(:disabled) { background: var(--p-uyari-acik); }
html.pro button.purple, html.pro .btn.purple { background: var(--p-ikinci); }
html.pro input, html.pro select, html.pro textarea {
  border: 1px solid #c9d1ce; border-radius: var(--p-r-k); background: #fff; color: var(--p-yazi); min-height: 44px; font-size: 16px;
}
html.pro input:focus, html.pro select:focus, html.pro textarea:focus { border-color: var(--p-ana); box-shadow: 0 0 0 3px var(--p-ana-acik); }
html.pro label { font-weight: 600; font-size: 14px; color: var(--p-yazi); }
html.pro .seg button, html.pro .pn-sec button, html.pro .tabs button, html.pro .sec-tasarim button, html.pro .av-sekmeler button {
  background: #fff; color: var(--p-yazi); border: 1px solid var(--p-cizgi); box-shadow: none; font-size: 15px;
}
html.pro .seg button.on, html.pro .sec-tasarim button.on, html.pro .av-sekmeler button.on, html.pro .seg button.on[data-mt] {
  background: var(--p-ana) !important; color: #fff; border-color: var(--p-ana); box-shadow: none;
}

/* ---------- Kartlar, tablolar, mesajlar ---------- */
html.pro .card { border: 1px solid var(--p-cizgi); box-shadow: var(--p-golge); border-radius: var(--p-r); padding: 20px; }
html.pro .tablo th { background: var(--p-gri); color: var(--p-ikincil); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
html.pro .tablo th, html.pro .tablo td { border-bottom: 1px solid var(--p-cizgi); }
html.pro .msg { font-weight: 500; border-radius: var(--p-r-k); border: 1px solid transparent; }
html.pro .msg.ok { background: var(--p-basari-acik); color: var(--p-basari); border-color: #bfe3cd; }
html.pro .msg.err { background: var(--p-hata-acik); color: var(--p-hata); border-color: #f4c7c3; }
html.pro .toast { background: var(--p-ana-koyu); border-radius: var(--p-r-k); font-weight: 500; }
html.pro .kod { background: var(--p-ana-acik); color: var(--p-ana); }
html.pro .badge { border-radius: 6px; font-weight: 600; }
html.pro .badge.deneme { background: var(--p-ana); }
html.pro .badge.hikaye { background: var(--p-ikinci); }
html.pro .ys { border-radius: 6px; font-weight: 600; font-size: 14px; }
html.pro .ys.var { background: var(--p-basari-acik); color: var(--p-basari); }
html.pro .ys.yok { background: var(--p-hata-acik); color: var(--p-hata); }
html.pro .ys.gec { background: var(--p-uyari-acik); color: var(--p-uyari); }
html.pro details.toplu summary { color: var(--p-ana); }
html.pro .pencere-kutu { border-radius: 16px; }
html.pro .grafik { border: 1px solid var(--p-cizgi); box-shadow: var(--p-golge); border-radius: var(--p-r); }
html.pro .g-izgara { stroke: #e7ebe9; }
html.pro .db-dolu { background: var(--p-ana); }

/* ---------- Üst çubuk ---------- */
html.pro header.top { position: sticky; top: 0; z-index: 15; background: var(--p-kart); border-bottom: 1px solid var(--p-cizgi);
  margin: 0 -20px 20px; padding: 10px 20px; box-shadow: var(--p-golge); }
.marka { display: flex; align-items: center; gap: 10px; margin: 0; }
.marka-ik { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px;
  background: var(--p-ana, #1c64d1); color: #fff; }
.marka-ik .ik { width: 22px; height: 22px; }
.marka-ad { display: block; font-size: 18px; font-weight: 700; line-height: 1.1; }
.marka-slogan { display: block; font-size: 12px; font-weight: 500; color: var(--soft); }
html:not(.pro) .marka-ik { background: var(--pink); }
.ust-kullanici { align-items: center; gap: 8px; }
.ust-kim { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; text-align: right; }
.ust-kim b { font-size: 14px; }
.ust-kim .muted { font-size: 12px; }
.ust-ikon { position: relative; }
.ust-rozet { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--red);
  color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
@media (max-width: 720px) {
  .ust-kim, .marka-slogan { display: none; }
  .ust-kullanici button { min-height: 40px; padding: 6px 10px; }
  .ust-kullanici #ustProfil, .ust-kullanici #cikis { font-size: 0; gap: 0; }
  .ust-kullanici #ustProfil .ik, .ust-kullanici #cikis .ik { width: 20px; height: 20px; }
}

/* ---------- Ana sayfa ---------- */
.karsilama { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
html.pro .ana-selam { font-size: 26px; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.ana-alt { margin: 2px 0 0; color: var(--soft); }
html.pro .ana-okul { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 14px; font-weight: 500; }
html.pro .ana-okul > span { display: inline-flex; align-items: center; gap: 6px; background: var(--p-kart); border: 1px solid var(--p-cizgi); border-radius: 99px; padding: 4px 12px; }
html:not(.pro) .ana-okul > span { margin-right: 10px; }
.ana-ozet { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
.ana-ozet > p, .ana-ozet > .msg { grid-column: 1 / -1; margin: 0; }
.oz-kart { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; text-align: left; min-height: 112px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: none; }
html.pro .oz-kart { background: var(--p-kart); color: var(--p-yazi); border: 1px solid var(--p-cizgi); box-shadow: var(--p-golge); }
html.pro .oz-kart:hover:not(:disabled) { background: var(--p-kart); border-color: var(--p-ana); }
.oz-bas { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--soft); }
.oz-deger { font-size: 28px; font-weight: 700; line-height: 1.15; }
.oz-alt { font-size: 13px; color: var(--soft); line-height: 1.35; }
.oz-kart.uyari { border-left: 4px solid var(--orange); }
html.pro .oz-kart.uyari { border-color: var(--p-uyari-cizgi); border-left: 4px solid var(--p-uyari-cizgi); background: #fffdf6; }
html.pro .oz-kart.uyari .oz-alt { color: var(--p-uyari); font-weight: 500; }

html.pro .ana-grup { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--p-ikincil); margin: 22px 0 10px; }
html.pro .ana-izgara { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
html.pro .ana-izgara .ana-kart {
  background: var(--p-kart) !important; color: var(--p-yazi); border: 1px solid var(--p-cizgi); box-shadow: var(--p-golge);
  min-height: 0; padding: 14px 40px 14px 14px; border-radius: var(--p-r); grid-column: auto; column-gap: 12px; align-items: start;
}
html.pro .ana-izgara .ana-kart:hover { border-color: var(--p-ana); background: var(--p-kart) !important; }
html.pro .ana-kart .ak-e { width: 44px; height: 44px; font-size: 22px; border-radius: 10px; background: var(--p-ana-acik); color: var(--p-ana); grid-row: span 2; }
html.pro .ana-kart .ak-e .ik { width: 22px; height: 22px; }
html.pro .ana-kart .ak-ad, html.pro .ana-kart.puan .ak-ad { font-size: 16px; font-weight: 600; }
html.pro .ana-kart .ak-acik { font-size: 13px; font-weight: 400; color: var(--p-ikincil); opacity: 1; }
html.pro .ana-kart .ak-bilgi { background: none; padding: 0; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--p-ana); border-radius: 0; }
html.pro .ana-kart .ak-bilgi::before { content: "● "; color: var(--p-mint); }
html.pro .ana-kart .ak-bilgi.dikkat { background: none; color: var(--p-uyari); }
html.pro .ana-kart .ak-bilgi.dikkat::before { content: "▲ "; color: var(--p-uyari-cizgi); }
html.pro [data-grup="diger"] .ana-kart .ak-e { background: var(--p-gri); color: var(--p-ikincil); }
html.pro .fav-yildiz { color: #b7c2bf; text-shadow: none; font-size: 20px; top: 10px; right: 10px; }
html.pro .fav-yildiz.on { color: #e0a800; }
html.pro .duzen-rozet { box-shadow: none; }
@media (max-width: 640px) {
  html.pro .ana-izgara { grid-template-columns: 1fr; }
  .ana-ozet { grid-template-columns: 1fr 1fr; }
  .oz-deger { font-size: 22px; }
  html.pro .ana-selam { font-size: 22px; }
}

/* Favoriler: sade halkalar */
html.pro .fav-halka { background: var(--p-mint); padding: 2px; }
html.pro .fav.aktif .fav-halka { background: var(--p-ana); }
html.pro .fav.ekle .fav-halka, html.pro .fav.ev .fav-halka { background: var(--p-cizgi); }
html.pro .fav-ic { background: var(--p-kart) !important; color: var(--p-ana); border-color: var(--p-zemin); font-size: 0; }
html.pro .fav-ic .ik { width: 26px; height: 26px; }
html.pro .fav-ad { font-weight: 500; font-size: 12px; color: var(--p-yazi); }
html.pro .fav.aktif .fav-ad { color: var(--p-ana); font-weight: 700; }
.fav-ic .ik { width: 28px; height: 28px; }

/* Bölüm başlığı */
html.pro .bolum-bas h2 { font-size: 22px; display: flex; align-items: center; gap: 8px; }
html.pro .bolum-bas h2 .ik { width: 24px; height: 24px; color: var(--p-ana); }

/* =====================================================================
   Öğrenci gelişim dosyası ve sınav analizi (tüm tasarımlarda)
   ===================================================================== */
.dosya-ara { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.dosya-ara input { flex: 1 1 240px; }
.dosya-tablo tbody tr { cursor: pointer; }
.dosya-tablo tbody tr:hover td { background: var(--p-gri, #f6f2ea); }
.dt-ad { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.dt-ad .yk-av { width: 36px; height: 36px; font-size: 20px; flex: 0 0 36px; }
.degisim { font-weight: 700; white-space: nowrap; }
.degisim.art { color: var(--p-basari, #1b7a43); }
.degisim.azal { color: var(--p-hata, #a4161a); }
.bilgi-yok { color: var(--soft); font-size: 13px; }
.profil-bas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.profil-bas .pn-avatar { width: 72px; height: 72px; font-size: 42px; }
.profil-ad { font-size: 24px; font-weight: 700; line-height: 1.15; }
.profil-meta { display: flex; gap: 6px 14px; flex-wrap: wrap; color: var(--soft); font-size: 14px; margin-top: 4px; }
.profil-meta span { display: inline-flex; align-items: center; gap: 4px; }
.profil-islem { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.profil-islem button { gap: 6px; }
.p-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 16px; }
.p-kart { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.p-kart h3 { margin: 0 0 8px; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.p-kart h3 .ik { color: var(--p-ana, var(--blue)); }
.p-buyuk { font-size: 30px; font-weight: 700; line-height: 1.1; }
.p-satir { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.p-satir:last-child { border-bottom: 0; }
.p-not-kutu { font-size: 13px; color: var(--soft); margin-top: 6px; }
.bolum-baslik { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--soft); margin: 26px 0 10px; }
.ozel-not { border-left: 4px solid var(--p-mint, var(--green)); background: var(--card); border-radius: 0 var(--p-r-k, 10px) var(--p-r-k, 10px) 0; padding: 10px 14px; margin-bottom: 8px; }
.ozel-not .muted { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.ozel-uyari { display: flex; gap: 8px; align-items: center; background: var(--p-gri, #f6f2ea); border-radius: var(--p-r-k, 10px); padding: 8px 12px; font-size: 14px; margin-bottom: 10px; }
.ek-calisma { border: 1px solid var(--p-uyari-cizgi, #e9c46a); background: var(--p-uyari-acik, #fdf1d8); color: var(--p-uyari, #8a5300); border-radius: var(--p-r-k, 10px); padding: 10px 14px; margin-top: 10px; font-size: 14px; }
.sonuc-tablo td.gelmedi { color: var(--soft); font-style: italic; }
.sa-ozet { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.sa-ozet .p-kart { padding: 12px 14px; }
.sa-ozet .oz-alt { display: block; }
@media (max-width: 640px) { .profil-ad { font-size: 20px; } .p-buyuk { font-size: 24px; } }

/* Bülten onayı */
.bl-onay { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--p-r-k, 10px); background: var(--p-gri, #f6f2ea); margin-top: 10px; font-weight: 600; }
.bl-kart.onayli { border-color: var(--p-mint, var(--green)); }
.bl-oneriler { margin-top: 10px; }
.bl-oneriler ul { margin: 4px 0 0; padding-left: 20px; }
.bl-gecmis summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }

/* Veli: güncel durum */
.v-durum { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.v-durum .oz-kart { min-height: 96px; }
html.pro .v-bas { font-size: 22px; }
html.pro #vAna .ana-kart .ak-e { font-size: 0; }
.ana-kart .ak-e .ik { width: 48%; height: 48%; }
html:not(.pro) .ana-kart .ak-e { color: #fff; }
html.pro .fav, html.pro .fav:hover:not(:disabled) { background: none; border: 0; color: var(--p-yazi); padding: 0; min-height: 0; box-shadow: none; }
html.pro .fav-bar { margin-bottom: 4px; }
.v-durum-bas { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--soft); margin: 4px 0 8px; }
.v-durum:empty, .v-durum:empty + .v-mini { display: none; }
html.pro .v-mini { display: none; }
html.pro #vIzgara { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
html.pro .v-duyuru { background: var(--p-kart); border: 1px solid var(--p-uyari-cizgi); border-left: 4px solid var(--p-uyari-cizgi); box-shadow: none; color: var(--p-yazi); }
html.pro .v-duyuru > span:first-child { color: var(--p-ana); }
html.pro .veli-giris h1 { color: var(--p-yazi); }
.v-durum-bas:has(+ .v-durum:empty) { display: none; }

/* Veli: resim ve kartlar */
html.pro .v-av, html.pro .ogr-av { border-radius: 50%; padding: 0; min-height: 0; border: 0; }
html.pro .v-bas .pn-avatar { width: 56px; height: 56px; font-size: 32px; }
html.pro #vAna .ana-kart.puan { min-height: 0; }
html.pro #vAna .ana-kart.puan .ak-e { width: 44px; height: 44px; }
html.pro #vAna .ana-kart.puan .ak-ad { font-size: 16px; }
html.pro #sonucAlan > header.top { position: static; margin: 0 0 14px; padding: 12px 0; background: none; border: 0; box-shadow: none; }

/* Renkli tasarımlarda yeni ana sayfa öğeleri */
html:not(.pro) .oz-kart { box-shadow: 0 4px 0 var(--line); border-width: 3px; }
html:not(.pro) .ana-alt { font-size: 16px; }
html:not(.pro) .ust-kim b { font-size: 15px; }
html:not(.pro) .ana-okul > span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Hareketli kitap rafı ---------- */
.raf { --raf-satir: 176px; }
/* Her raf satırı 176 px, altındaki tahta 16 px; satır aralığı tahta kalınlığına eşit olduğundan tahta her satırın altına denk gelir */
.raf-kitaplar { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 3px; row-gap: 16px; padding: 0 14px 16px; margin-top: 30px;
  background: repeating-linear-gradient(to bottom, transparent 0 var(--raf-satir), #a47148 var(--raf-satir), #8b5e3c calc(var(--raf-satir) + 6px), #6f4a2f calc(var(--raf-satir) + 16px));
  border-radius: 0 0 8px 8px; perspective: 900px; }
.rk { position: relative; height: var(--raf-satir); width: var(--en); min-height: 0; padding: 0; background: none !important; border: 0 !important; box-shadow: none !important;
  display: flex; align-items: flex-end; justify-content: center; cursor: pointer; animation: rafaGel .55s cubic-bezier(.2, .8, .3, 1.2) both; animation-delay: calc(var(--i) * 45ms); }
.rk-sirt { width: 100%; height: var(--boy); border-radius: 3px 3px 1px 1px; background: var(--kr); color: #fff; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px 0 6px;
  background-image: linear-gradient(90deg, rgba(0,0,0,.22) 0 3px, rgba(255,255,255,.18) 3px 5px, transparent 5px calc(100% - 4px), rgba(0,0,0,.2) calc(100% - 4px)),
    linear-gradient(to bottom, transparent 12%, rgba(255,255,255,.35) 12% 14%, transparent 14% 86%, rgba(255,255,255,.35) 86% 88%, transparent 88%);
  box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: transform .25s ease, box-shadow .25s ease; transform-origin: bottom center; }
.rk-ad { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 700; line-height: 1.1; max-height: calc(var(--boy) - 34px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .02em; }
.rk-n { font-size: 11px; font-weight: 800; background: rgba(255,255,255,.9); color: #333; border-radius: 99px; min-width: 18px; padding: 0 4px; }
.rk:hover .rk-sirt, .rk:focus-visible .rk-sirt { transform: translateY(-14px) rotate(-4deg); box-shadow: 0 10px 16px rgba(0,0,0,.25); }
.rk.secili .rk-sirt { transform: translateY(-22px) rotate(-6deg) scale(1.06); box-shadow: 0 0 0 3px #ffd166, 0 12px 18px rgba(0,0,0,.3); }
.raf-bilgi { margin-top: 12px; min-height: 44px; padding: 10px 14px; border-radius: 10px; background: var(--p-gri, #f6f2ea); font-size: 15px; }
.raf-bilgi b { font-size: 16px; }
.raf-bilgi .kt-okuyan { margin-top: 4px; }
@keyframes rafaGel { from { opacity: 0; transform: translateY(-60px) rotate(-8deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rk { animation: none; } .rk-sirt { transition: none; } }
html[data-tema="gece"] .raf-bilgi { background: #2f3756; }

/* ---------- Giriş ekranı bölümleri ---------- */
.giris-bolum { margin-top: 16px; padding-top: 14px; border-top: 2px dashed var(--line); }
html.pro .giris-bolum { border-top: 1px solid var(--p-cizgi); }
.giris-bolum h3 { margin: 0 0 4px; font-size: 16px; display: flex; align-items: center; gap: 6px; }
.giris-bolum h3 .ik { color: var(--p-ana, var(--blue)); }
.giris-bolum p { margin: 0 0 10px; }
.davet-kutu .row { align-items: flex-end; }

/* ---------- Tanıtım modu ve tur ---------- */
.tanitim-bant { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin-bottom: 14px;
  padding: 10px 14px; border-radius: var(--p-r-k, 12px); background: var(--p-uyari-acik, #fff4dd); border: 1px solid var(--p-uyari-cizgi, #e9c46a); color: var(--p-uyari, #8a5300); font-size: 14px; }
.tb-dugme { display: flex; gap: 6px; flex-wrap: wrap; }
.tur { position: fixed; z-index: 30; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(460px, calc(100vw - 24px));
  background: var(--card); color: var(--ink); border-radius: 14px; padding: 14px 16px; box-shadow: 0 12px 40px rgba(16, 40, 42, .28); border: 1px solid var(--line); }
.tur h3 { margin: 4px 0 6px; font-size: 18px; }
.tur p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.tur-ust { display: flex; justify-content: space-between; align-items: center; }
.tur-ust button { min-height: 32px; padding: 2px 10px; }
.tur-dugme { display: flex; justify-content: flex-end; gap: 8px; }
.tur-hedef { position: relative; z-index: 5; outline: 3px solid var(--p-mint, #38bdf8) !important; outline-offset: 4px; border-radius: 12px; animation: turNabiz 1.6s ease infinite; }
@keyframes turNabiz { 50% { outline-color: var(--p-ana, #1c64d1); } }
@media (prefers-reduced-motion: reduce) { .tur-hedef { animation: none; } }
@media (max-width: 640px) { .tur { bottom: 8px; padding: 12px; } .tur p { font-size: 14px; } }

/* =====================================================================
   Canlı görünüm (önerilen tasarım): renkli karşılama bandı, gruplara özel
   renkler, renkli hızlı işlemler ve telefonda alt gezinme çubuğu
   ===================================================================== */
html.pro body {
  background: radial-gradient(1100px 420px at 100% -80px, var(--p-z1) 0, transparent 70%), radial-gradient(900px 380px at -10% -60px, var(--p-z2) 0, transparent 65%), var(--p-zemin);
  background-repeat: no-repeat;
}
html.pro header.top { background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html.pro .marka-ik { background: linear-gradient(135deg, var(--p-h1), var(--p-h2) 60%, var(--p-h3)); box-shadow: 0 4px 10px rgba(var(--p-golge-renk), .25); }

/* Grup renkleri: her modül grubu kendi rengini taşır */
[data-grup="ogrenci"], [data-grup-bas="ogrenci"], [data-fgrup="ogrenci"] { --c: #0f7c80; --c-acik: #dcf2f1; }
[data-grup="sinav"], [data-grup-bas="sinav"], [data-fgrup="sinav"] { --c: #4f46e5; --c-acik: #e8e7fd; }
[data-grup="gunluk"], [data-grup-bas="gunluk"], [data-fgrup="gunluk"] { --c: #d9681a; --c-acik: #ffeedd; }
[data-grup="veli"], [data-grup-bas="veli"], [data-fgrup="veli"] { --c: #cf3f74; --c-acik: #fde6ee; }
[data-grup="okuma"], [data-grup-bas="okuma"], [data-fgrup="okuma"] { --c: #7c4ddb; --c-acik: #efe8fd; }
[data-grup="yil"], [data-grup-bas="yil"], [data-fgrup="yil"] { --c: #23874d; --c-acik: #e0f3e7; }
[data-grup="diger"], [data-grup-bas="diger"], [data-fgrup="diger"] { --c: #2777b8; --c-acik: #e1effa; }
[data-grup="gizli"], [data-grup-bas="gizli"] { --c: #6b7a7c; --c-acik: #eef1ef; }

/* Karşılama bandı */
.ana-tarih { margin: 0 0 2px; font-size: 14px; font-weight: 600; text-transform: capitalize; opacity: .85; }
html.pro .karsilama {
  position: relative; overflow: hidden; display: block;
  padding: 26px 28px; border-radius: 20px; color: #fff; margin-bottom: 18px;
  background: linear-gradient(125deg, var(--p-h1) 0%, var(--p-h2) 48%, var(--p-h3) 100%); box-shadow: 0 12px 30px -12px rgba(var(--p-golge-renk), .55);
}
html.pro .karsilama::before, html.pro .karsilama::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
html.pro .karsilama::before { width: 320px; height: 320px; right: -90px; top: -150px; background: radial-gradient(circle, rgba(255, 214, 120, .45), transparent 65%); }
html.pro .karsilama::after { width: 240px; height: 240px; left: 32%; bottom: -170px; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 70%); }
html.pro .karsilama > * { position: relative; z-index: 1; }
html.pro .ana-selam { font-size: 30px; color: #fff; }
html.pro .karsilama .ana-alt { color: rgba(255, 255, 255, .85); }
html.pro .karsilama .ana-okul { margin-top: 14px; }
html.pro .karsilama .ana-okul > span { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); color: #fff; }
html.pro .karsilama .ana-okul button { background: #fff; color: var(--p-ana); }


/* Özet kartları: her göstergenin kendi rengi */
.oz-users { --c: #0f7c80; --c-acik: #dcf2f1; }
.oz-liste { --c: #4f46e5; --c-acik: #e8e7fd; }
.oz-yoklama { --c: #d9681a; --c-acik: #ffeedd; }
.oz-odev { --c: #cf3f74; --c-acik: #fde6ee; }
.oz-mesaj { --c: #2777b8; --c-acik: #e1effa; }
.oz-bulten { --c: #23874d; --c-acik: #e0f3e7; }
html.pro .oz-kart { border-radius: 16px; border-top: 4px solid var(--c, var(--p-ana)); transition: transform .15s, box-shadow .15s; }
html.pro .oz-kart:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(16, 40, 42, .35); border-color: var(--p-cizgi); border-top-color: var(--c); }
html.pro .oz-bas .ik { width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: var(--c-acik); color: var(--c); box-sizing: border-box; }
html.pro .oz-deger { color: var(--c, var(--p-yazi)); }
html.pro .oz-kart.uyari { border-left: 1px solid var(--p-uyari-cizgi); border-top: 4px solid var(--p-uyari-cizgi); background: #fffaf0; }

/* Modül kartları ve grup başlıkları */
html.pro .ana-grup { align-items: center; gap: 8px; color: var(--c, var(--p-ikincil)); }
html.pro .ana-grup:not(.duzen-ac):not(.hidden), html.pro #anaSayfa.duzenle .ana-grup.duzen-ac { display: flex; }
html.pro .ana-grup::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--p-ikincil)); flex: 0 0 10px; }
html.pro .ana-izgara .ana-kart { border-radius: 16px; transition: transform .15s, box-shadow .15s, border-color .15s; }
html.pro .ana-izgara .ana-kart:hover { border-color: var(--c, var(--p-ana)); transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(16, 40, 42, .35); }
html.pro .ana-kart .ak-e, html.pro [data-grup="diger"] .ana-kart .ak-e { background: var(--c-acik, var(--p-ana-acik)); color: var(--c, var(--p-ana)); border-radius: 12px; }
html.pro .ana-kart .ak-bilgi { color: var(--c, var(--p-ana)); }
html.pro .ana-kart .ak-bilgi::before { color: var(--c, var(--p-mint)); }
html.pro .ana-kart .ak-bilgi.dikkat { color: var(--p-uyari); }

/* Favoriler: grup renginde halka */
html.pro .fav[data-fgrup] .fav-halka { background: linear-gradient(135deg, var(--c), #f6b84b); }
html.pro .fav[data-fgrup] .fav-ic { color: var(--c); }
html.pro .fav.aktif .fav-halka { background: var(--p-ana); }

@media (max-width: 760px) {
  html.pro .karsilama { grid-template-columns: 1fr; padding: 20px 18px; border-radius: 18px; gap: 14px; }
  html.pro .ana-selam { font-size: 24px; }
}

/* ---------- Alt gezinme çubuğu (telefon ve tablet) ---------- */
.alt-nav { display: none; }
@media (max-width: 900px) {
  .alt-nav:not(.hidden) { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(16, 40, 42, .08);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  html.pro .alt-nav:not(.hidden) { background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .alt-nav button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 4px 2px;
    background: none !important; border: 0 !important; box-shadow: none !important; color: var(--soft); font-size: 11px; font-weight: 600; border-radius: 12px; }
  .alt-nav button .ik { width: 24px; height: 24px; }
  .alt-nav button.on { color: var(--p-ana, var(--blue)); }
  .alt-nav button.on .ik { background: var(--p-ana-acik, rgba(0, 0, 0, .06)); border-radius: 99px; width: 48px; padding: 2px 12px; box-sizing: border-box; }
  .alt-rozet { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--red);
    color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; }
  .alt-rozet.hidden { display: none; }
  body.alt-nav-var { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  body.alt-nav-var .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.alt-nav-var .tur { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  html.pro .oz-kart, html.pro .ana-izgara .ana-kart { transition: none; transform: none !important; }
}

/* ---------- Yönetim: gelen mesajlar ---------- */
.rozet-say:not(:empty) { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 99px; background: var(--red); color: #fff; font-size: 13px; vertical-align: middle; }
.il-mesaj { border: 1px solid var(--line); border-radius: var(--p-r-k, 10px); padding: 12px 14px; margin-bottom: 8px; }
.il-mesaj.yeni { border-left: 4px solid var(--p-mint, var(--green)); background: var(--p-mint-acik, #f2fbf6); }
.il-ust { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.il-govde { white-space: pre-wrap; margin: 8px 0; }
.il-eposta summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Henüz favori yokken: büyük boş halka yerine küçük bir ipucu düğmesi */
.fav-ipucu { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; font-size: 13px; font-weight: 600; border-radius: 99px; }
html.pro .fav-ipucu { background: var(--p-kart); color: var(--p-ikincil); border: 1px dashed #c9d1ce; }
html.pro .fav-ipucu .ik { width: 16px; height: 16px; color: #e0a800; }
.fav-bar:has(.fav-ipucu) { padding-bottom: 4px; }
/* Telefonda favori yokken alt sayfalarda boş favori satırı gösterilmez (alt çubukta Ana sayfa var) */
@media (max-width: 900px) { .fav-bar.fav-bos { display: none; } }

.msg.uyari { background: var(--p-uyari-acik, #fff4dd); color: var(--p-uyari, #8a5300); border: 1px solid var(--p-uyari-cizgi, #e9c46a); }
html.pro label.btn:not(.ghost) { color: #fff; }

/* ---------- Renk paletleri (modern tasarım) ---------- */
html.pro[data-pro="gunbatimi"] { --p-ana: #c2410c; --p-ana-koyu: #9a3412; --p-ana-acik: #ffedd5; --p-mint: #f59e0b; --p-mint-acik: #fff7e0; --p-ikinci: #be185d;
  --p-h1: #7c2d12; --p-h2: #ea580c; --p-h3: #f59e0b; --p-golge-renk: 124, 45, 18; --p-z1: #ffe4cc; --p-z2: #fde2ea; }
html.pro[data-pro="lavanta"] { --p-ana: #6741d9; --p-ana-koyu: #5030b5; --p-ana-acik: #efeafd; --p-mint: #9775fa; --p-mint-acik: #f3f0ff; --p-ikinci: #862e9c;
  --p-h1: #3b1f7a; --p-h2: #6741d9; --p-h3: #9775fa; --p-golge-renk: 59, 31, 122; --p-z1: #ebe4ff; --p-z2: #ffe8f3; }
html.pro[data-pro="kiraz"] { --p-ana: #c2255c; --p-ana-koyu: #9c1c48; --p-ana-acik: #fde7ef; --p-mint: #f06595; --p-mint-acik: #fff0f6; --p-ikinci: #862e9c;
  --p-h1: #6b0f2e; --p-h2: #c2255c; --p-h3: #f06595; --p-golge-renk: 107, 15, 46; --p-z1: #ffe0eb; --p-z2: #fff3d6; }

/* Toplam öğrenci rozeti */
.say-rozet:not(:empty) { display: inline-flex; align-items: center; margin-left: 8px; padding: 3px 12px; border-radius: 99px; font-size: 14px; font-weight: 700;
  background: var(--p-ana-acik, #eef3ff); color: var(--p-ana, var(--blue)); vertical-align: middle; }
html.pro .karsilama .ana-okul > span.ogr-rozet { background: #fff; color: var(--p-ana); border-color: #fff; }
.ogr-rozet b { font-size: 1.05em; }

/* ---------- Ana sayfa başlığı ---------- */
.karsilama { display: block; margin: 4px 0 18px; }
.uyg-baslik { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.05; letter-spacing: -.01em;
  background: linear-gradient(90deg, var(--pink), var(--purple) 55%, var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ana-selam-alt { margin: 4px 0 0; color: var(--soft); font-size: 17px; font-weight: 600; }
.ana-selam-alt .ana-tarih { display: inline; margin: 0; font-size: inherit; font-weight: 500; opacity: 1; text-transform: none; }
.ana-selam-alt .ana-tarih:not(:empty)::before { content: "· "; }
@media (max-width: 640px) { .uyg-baslik { font-size: 30px; } .ana-selam-alt { font-size: 15px; } }

/* =====================================================================
   Ana ekran: telefon ana ekranı gibi simgeler (tüm tasarımlarda)
   Kartın renkli zemini simge karesi olur; ad simgenin altında yazar.
   ===================================================================== */
#anaSayfa .ana-izgara.ikonlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px 6px; justify-items: center;
  margin: 0 0 18px; padding: 6px 0 0; border: 0; }
#anaSayfa .ana-izgara.ikonlar .ana-kart {
  position: relative; display: flex; align-items: center; justify-content: center; grid-column: auto;
  width: 68px; height: 68px; min-height: 0; padding: 0; margin: 0 0 30px; border-radius: 18px; border: 0;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .35); color: #fff; overflow: visible; }
#anaSayfa .ana-izgara.ikonlar .ana-kart { transition: transform .18s ease; }
@media (hover: hover) { #anaSayfa .ana-izgara.ikonlar .ana-kart:hover { transform: translateY(-5px); } }
#anaSayfa .ana-izgara.ikonlar .ana-kart:active { transform: scale(.92); }
#anaSayfa .ikonlar .ana-kart .ak-e { width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%); font-size: 0; grid-row: auto; }
#anaSayfa .ikonlar .ana-kart .ak-e .ik { width: 36px; height: 36px; color: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
#anaSayfa .ikonlar .ana-kart .ak-yazi { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: 92px; text-align: center; pointer-events: none; }
#anaSayfa .ikonlar .ana-kart .ak-ad { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13px; font-weight: 700; line-height: 1.15; color: var(--ink); text-shadow: none; }
#anaSayfa .ikonlar .ana-kart .ak-acik, #anaSayfa .ikonlar .ana-kart .ak-bilgi { display: none; }
/* Kırmızı bildirim rozeti */
.ak-rozet { position: absolute; top: -7px; right: -7px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; background: #ff3b30; color: #fff;
  font: 700 13px/24px system-ui, -apple-system, sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--bg); z-index: 2; }
.ak-rozet.hidden { display: none; }
/* Favori yıldızı yalnızca düzenleme modunda */
#anaSayfa .ikonlar .ana-kart .fav-yildiz { display: none; }
#anaSayfa.duzenle .ikonlar .ana-kart .fav-yildiz { display: flex; position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center;
  background: #fff; color: #b8a76a; font-size: 17px; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,.3); text-shadow: none; z-index: 3; }
#anaSayfa.duzenle .ikonlar .ana-kart .fav-yildiz.on { color: #f5a400; }
#anaSayfa.duzenle .ikonlar .ana-kart .ak-rozet { display: none; }
/* Düzenleme: simgeler titrer, − ile gizlenir */
#anaSayfa.duzenle .ana-izgara.ikonlar { border: 0; padding: 10px 0 0; min-height: 100px; }
#anaSayfa.duzenle .ikonlar .ana-kart { animation: titre-simge .26s ease-in-out infinite alternate; }
#anaSayfa.duzenle .ikonlar .ana-kart:nth-child(3n+1) { animation-delay: -.09s; } #anaSayfa.duzenle .ikonlar .ana-kart:nth-child(3n+2) { animation-delay: -.18s; }
@keyframes titre-simge { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
#anaSayfa.duzenle .ikonlar .duzen-rozet { display: flex; position: absolute; top: -9px; left: -9px; right: auto; width: 26px; height: 26px; margin: 0; border-radius: 50%; border: 0;
  align-items: center; justify-content: center; background: rgba(60, 60, 67, .85); color: #fff; font: 700 20px/1 system-ui, sans-serif; box-shadow: 0 1px 4px rgba(0,0,0,.3); z-index: 3; }
#anaSayfa.duzenle .ikonlar .duzen-rozet::before { content: "−"; }
#anaSayfa.duzenle .gizli-alan .duzen-rozet { background: #34c759; color: #fff; }
#anaSayfa.duzenle .gizli-alan .duzen-rozet::before { content: "+"; }
#anaSayfa .gizli-alan.ikonlar { background: rgba(120, 120, 128, .1); border-radius: 22px; padding: 14px 6px 0; min-height: 110px; }
#anaSayfa .gizli-alan .ana-kart { filter: grayscale(.6); opacity: .8; }
#anaSayfa .gizli-alan.bos::before { content: "Gizlenen simge yok"; grid-column: 1 / -1; align-self: center; color: var(--soft); font-size: 15px; padding-bottom: 14px; }
.gizli-bas { font-size: 16px; margin: 8px 0; }
.surukle-golge { opacity: .4; }
/* Düzen çubuğu: telefondaki "Bitti" gibi sağ üstte */
.ana-duzen-bar { justify-content: flex-end; margin: -6px 0 6px; }
#anaSayfa.duzenle .ana-duzen-bar { position: sticky; top: 64px; z-index: 6; background: var(--bg); padding: 8px 0; justify-content: space-between; }
@media (max-width: 420px) {
  #anaSayfa .ana-izgara.ikonlar { grid-template-columns: repeat(4, 1fr); gap: 6px 2px; }
  #anaSayfa .ana-izgara.ikonlar .ana-kart { width: 62px; height: 62px; border-radius: 16px; margin-bottom: 30px; }
  #anaSayfa .ikonlar .ana-kart .ak-e .ik { width: 32px; height: 32px; }
  #anaSayfa .ikonlar .ana-kart .ak-yazi { width: 80px; }
  #anaSayfa .ikonlar .ana-kart .ak-ad { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { #anaSayfa.duzenle .ikonlar .ana-kart { animation: none; } }
:where(html:not(.pro)) .fav-ipucu { background: var(--card); color: var(--soft); border: 2px dashed var(--line); box-shadow: none; min-height: 36px; padding: 4px 14px; font-size: 14px; font-weight: 700; border-radius: 99px; }
.fav-ipucu .ik { width: 16px; height: 16px; color: #f5a400; }
#anaSayfa:not(.duzenle) .gizli-alan, #anaSayfa:not(.duzenle) .gizli-bas { display: none !important; }
.vg-zaman { font-weight: 700; white-space: nowrap; }
.vg-zaman.yok { color: var(--soft); font-weight: 500; }
/* Haftalık özet: öğretmen değerlendirmesi */
.bl-yorum { margin: 12px 0; padding: 12px 16px; border-radius: 14px; background: var(--card); border: 2px solid var(--line); border-left: 6px solid var(--purple); }
.bl-yorum h3 { margin: 0 0 6px; font-size: 17px; }
.bl-yorum p { margin: 0 0 8px; line-height: 1.55; }
.bl-yorum p:last-child { margin-bottom: 0; }
.bl-yorum-duz { margin-top: 10px; }
.bl-yorum-duz summary { cursor: pointer; font-weight: 700; min-height: 36px; display: flex; align-items: center; gap: 6px; }
.bl-yorum-duz textarea { width: 100%; line-height: 1.5; }

/* ---------- Keşif Odası (veli sayfası, okuma ödülleri) ---------- */
.ks-bas { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ks-bas h2 { margin: 0; }
.ks-say { font-weight: 700; color: var(--soft); }
.ks-yeni { margin: 10px 0; padding: 10px 14px; border-radius: 14px; background: #fff6d6; border: 2px solid #ffd65c; color: #6b4e00; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; animation: ksParla 1.2s ease 2; }
@keyframes ksParla { 50% { box-shadow: 0 0 0 6px rgba(255, 214, 92, .45); } }
.ks-envanter { display: flex; flex-wrap: wrap; gap: 8px; }
.ks-envanter span { background: var(--card); border: 2px solid var(--line); border-radius: 99px; padding: 4px 12px; font-size: 15px; }
.ks-sonraki { margin: 10px 0; font-size: 16px; }
.ks-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.ks-dugmeler button { flex: 1 1 150px; }
.ks-urunler { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; }
.ks-urun { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; border: 2px solid var(--line); border-radius: 16px; padding: 10px; background: var(--card); }
.ks-urun.var { border-color: #2ec4b6; background: #effcf9; }
.ks-e { font-size: 40px; line-height: 1.1; }
.ks-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.ks-kart { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; text-align: center; font-size: 13px;
  background: linear-gradient(160deg, #fff6d6, #ffd6e7); border: 2px solid #ffc94d; box-shadow: 0 4px 0 #f0b429; }
.ks-kart span { font-size: 40px; }
.ks-kart.kapali { background: var(--line); border-color: var(--line); box-shadow: none; color: var(--soft); }
html[data-tema="gece"] :where(.ks-urun.var) { background-color: #1d3b37; }
@media (prefers-reduced-motion: reduce) { .ks-yeni { animation: none; } }
.kt-odul { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 16px; }
.kt-satir { grid-template-columns: minmax(120px, 210px) 1fr auto; }
/* Simge boyutu: küçük / orta (varsayılan) / büyük */
.ik-boyut { display: none; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; flex-wrap: wrap; }
#anaSayfa.duzenle .ik-boyut { display: inline-flex; }
.ik-boyut button.on { background: var(--purple); color: #fff; border-color: var(--purple); }
#anaSayfa[data-boy="k"] .ana-izgara.ikonlar { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
#anaSayfa[data-boy="k"] .ana-izgara.ikonlar .ana-kart { width: 54px; height: 54px; border-radius: 14px; margin-bottom: 26px; }
#anaSayfa[data-boy="k"] .ikonlar .ana-kart .ak-e .ik { width: 28px; height: 28px; }
#anaSayfa[data-boy="k"] .ikonlar .ana-kart .ak-yazi { width: 76px; }
#anaSayfa[data-boy="k"] .ikonlar .ana-kart .ak-ad { font-size: 11.5px; }
#anaSayfa[data-boy="b"] .ana-izgara.ikonlar { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
#anaSayfa[data-boy="b"] .ana-izgara.ikonlar .ana-kart { width: 88px; height: 88px; border-radius: 22px; margin-bottom: 34px; }
#anaSayfa[data-boy="b"] .ikonlar .ana-kart .ak-e .ik { width: 46px; height: 46px; }
#anaSayfa[data-boy="b"] .ikonlar .ana-kart .ak-yazi { width: 110px; }
#anaSayfa[data-boy="b"] .ikonlar .ana-kart .ak-ad { font-size: 15px; }
@media (max-width: 420px) {
  #anaSayfa[data-boy="k"] .ana-izgara.ikonlar { grid-template-columns: repeat(5, 1fr); }
  #anaSayfa[data-boy="k"] .ana-izgara.ikonlar .ana-kart { width: 50px; height: 50px; }
  #anaSayfa[data-boy="k"] .ikonlar .ana-kart .ak-yazi { width: 66px; }
  #anaSayfa[data-boy="b"] .ana-izgara.ikonlar { grid-template-columns: repeat(3, 1fr); }
  #anaSayfa[data-boy="b"] .ana-izgara.ikonlar .ana-kart { width: 84px; height: 84px; }
}
.rozetler { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }

/* ---------- Keşif Odası: üç boyutlu oda ---------- */
.oda3 { --W: 360px; --D: 270px; --H: 190px; --olcek: 1; position: relative; height: 330px; margin: 12px 0; border-radius: 20px; overflow: hidden; border: 3px solid var(--line);
  background: radial-gradient(ellipse at 50% 25%, #fffaf0, #eadbbd); perspective: 820px; perspective-origin: 50% 30%; touch-action: pan-y; cursor: grab; user-select: none; }
.oda3:active { cursor: grabbing; }
.o3-sahne { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d;
  transform: scale(var(--olcek)) rotateX(-18deg) rotateY(var(--ry)); transition: transform .08s linear; }
.o3-y { position: absolute; }
.o3-y.zemin { width: var(--W); height: var(--D); left: calc(var(--W) / -2); top: calc(var(--D) / -2); transform: translateY(calc(var(--H) / 2)) rotateX(90deg);
  background: repeating-linear-gradient(90deg, #c99a62 0 34px, #b88752 34px 36px, #d4a76f 36px 70px, #b88752 70px 72px); box-shadow: inset 0 0 40px rgba(0,0,0,.25); }
.o3-y.arka { width: var(--W); height: var(--H); left: calc(var(--W) / -2); top: calc(var(--H) / -2); transform: translateZ(calc(var(--D) / -2));
  background: linear-gradient(180deg, #fde7c4, #f6d6a8); display: flex; align-items: flex-start; justify-content: center; box-shadow: inset 0 -12px 18px rgba(0,0,0,.12); }
.o3-y.sol, .o3-y.sag { width: var(--D); height: var(--H); left: calc(var(--D) / -2); top: calc(var(--H) / -2); background: linear-gradient(180deg, #f6dcb4, #ebc995); }
.o3-y.sol { transform: translateX(calc(var(--W) / -2)) rotateY(90deg); filter: brightness(.9); }
.o3-y.sag { transform: translateX(calc(var(--W) / 2)) rotateY(-90deg); filter: brightness(.82); }
.o3-sus { margin-top: 12px; font-size: 30px; letter-spacing: 14px; opacity: .9; }
/* Bölgeler */
.oda3[data-bolge="orman"] .arka { background: linear-gradient(180deg, #d8f3dc, #b7e4c7); } .oda3[data-bolge="orman"] :is(.sol, .sag) { background: linear-gradient(180deg, #c7ebd0, #a3d9b1); }
.oda3[data-bolge="orman"] .zemin { background: repeating-radial-gradient(circle at 30% 40%, #74b06a 0 6px, #66a15d 6px 12px); }
.oda3[data-bolge="ada"] .arka { background: linear-gradient(180deg, #bde7ff 0 55%, #7fd3e6 55%); } .oda3[data-bolge="ada"] :is(.sol, .sag) { background: linear-gradient(180deg, #c9eeff, #9fdcef); }
.oda3[data-bolge="ada"] .zemin { background: radial-gradient(circle at 40% 40%, #f6e2b3, #e9c98a); }
.oda3[data-bolge="buzul"] .arka, .oda3[data-bolge="buzul"] :is(.sol, .sag) { background: linear-gradient(180deg, #eef7ff, #d7ebfb); }
.oda3[data-bolge="buzul"] .zemin { background: repeating-linear-gradient(45deg, #f8fbff 0 20px, #e6f1fb 20px 40px); }
.oda3[data-bolge="vadi"] .arka, .oda3[data-bolge="vadi"] :is(.sol, .sag) { background: linear-gradient(180deg, #ffd9b8, #f4a582); }
.oda3[data-bolge="vadi"] .zemin { background: repeating-linear-gradient(90deg, #a0523d 0 30px, #8f4734 30px 60px); }
.oda3[data-bolge="uzay"] { background: radial-gradient(ellipse at 50% 30%, #3b3772, #15132e); }
.oda3[data-bolge="uzay"] .arka, .oda3[data-bolge="uzay"] :is(.sol, .sag) { background: radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 2px) 0 0 / 40px 40px, linear-gradient(180deg, #2a2760, #1c1a45); }
.oda3[data-bolge="uzay"] .zemin { background: repeating-linear-gradient(90deg, #4b3f8f 0 30px, #41367d 30px 60px); }
.oda3[data-bolge="col"] .arka, .oda3[data-bolge="col"] :is(.sol, .sag) { background: linear-gradient(180deg, #ffeab3, #f5cf7d); }
.oda3[data-bolge="col"] .zemin { background: repeating-linear-gradient(170deg, #e9c27a 0 18px, #dfb468 18px 36px); }
/* Eşyalar: zeminde durur, gölge düşürür, kalınlığı olan bir çıkartma gibi hep çocuğa bakar */
.o3-esya { position: absolute; transform-style: preserve-3d; transform: translate3d(var(--x), calc(var(--H) / 2), var(--z)); }
.o3-golge { position: absolute; width: var(--b); height: calc(var(--b) * .55); left: calc(var(--b) / -2); top: calc(var(--b) * -.27);
  transform: rotateX(90deg); background: radial-gradient(ellipse, rgba(0,0,0,.38), transparent 68%); }
.o3-e { position: absolute; z-index: 0; isolation: isolate; display: block; width: var(--b); left: calc(var(--b) / -2); bottom: 0; font-size: var(--b); line-height: 1; text-align: center;
  transform-origin: 50% 100%; transform-style: preserve-3d; transform: rotateY(calc(var(--ry) * -1)) rotateX(18deg); animation: o3Gel .6s cubic-bezier(.2, .9, .3, 1.3) both; }
.o3-e::before, .o3-e::after { content: attr(data-e); position: absolute; inset: 0; z-index: -1; }
.o3-e::before { transform: translateZ(-3px) translate(1px, 1px); filter: brightness(.55); }
.o3-e::after { transform: translateZ(-6px) translate(2px, 2px); filter: brightness(.3) blur(.5px); }
.o3-duvar-esya { position: absolute; transform-style: preserve-3d; transform: translate3d(var(--x), var(--y), calc(var(--D) / -2 + 3px)); }
.o3-duvar-esya .o3-e { transform: none; bottom: auto; top: calc(var(--b) / -2); filter: drop-shadow(3px 4px 2px rgba(0,0,0,.3)); }
.o3-duvar-esya .o3-e::before, .o3-duvar-esya .o3-e::after { display: none; }
@keyframes o3Gel { from { opacity: 0; translate: 0 -60px; } }
.oda3 .oda-bos { position: absolute; left: 10%; right: 10%; top: 40%; text-align: center; font-weight: 700; color: #6b4e00; background: rgba(255,255,255,.82); border-radius: 12px; padding: 8px; z-index: 2; }
.oda3 .oda-ad { position: absolute; right: 10px; bottom: 8px; z-index: 2; font-size: 13px; font-weight: 700; background: rgba(255,255,255,.85); color: #333; border-radius: 99px; padding: 2px 10px; }
.o3-dondur { position: absolute; left: 8px; bottom: 6px; z-index: 2; display: flex; gap: 4px; }
.o3-dondur button { min-height: 34px; padding: 2px 12px; opacity: .9; }
@media (max-width: 480px) { .oda3 { --olcek: .8; height: 280px; } }
@media (prefers-reduced-motion: reduce) { .o3-e { animation: none; } .o3-sahne { transition: none; } }
.vg-ozet { display: flex; flex-wrap: wrap; gap: 8px; }
.vg-ozet span { background: var(--card); border: 2px solid var(--line); border-radius: 99px; padding: 4px 14px; }
.vg-ozet span.uyari { border-color: #f4a261; }
.vg-suz { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.vg-suz button { background: var(--card); color: var(--ink); border: 2px solid var(--line); box-shadow: none; min-height: 38px; padding: 4px 14px; font-size: 15px; }
.vg-suz button.on { background: var(--purple); color: #fff; border-color: var(--purple); }
/* Yöneticiden gelen mesajlar */
.ym-kart { background: var(--card); border: 2px solid var(--line); border-left: 6px solid var(--purple); border-radius: 14px; padding: 10px 14px; margin-bottom: 10px; }
.ym-kart.yeni { border-color: #ffd65c; border-left-color: #f4a100; background: #fffbea; }
.ym-cevap { background: rgba(0,0,0,.04); border-radius: 10px; padding: 6px 10px; margin: 6px 0; }
.ym-yanit { margin: 6px 0; } .ym-yanit textarea { width: 100%; }
.ym-eski { margin-bottom: 12px; } .ym-eski summary { cursor: pointer; font-weight: 700; min-height: 36px; display: flex; align-items: center; }
html[data-tema="gece"] :where(.ym-kart.yeni) { background-color: #3a3422; }

/* ---------- Çocuk dostu renkli simgeler ve baykuş logosu ---------- */
.cik { display: block; flex: 0 0 auto; }
#anaSayfa .ikonlar .ana-kart .ak-e .cik { width: 78%; height: 78%; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .18)); }
.ana-kart .ak-e .cik { width: 70%; height: 70%; }
.fav-ic .cik { width: 62%; height: 62%; }
html.pro .fav-ic .cik, .fav-ic .cik { width: 62%; height: 62%; }
.marka-ik.logo { width: 48px; height: 48px; flex: 0 0 48px; background: none !important; box-shadow: none !important; border-radius: 0; }
.logo-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18)); }
.veli-giris .marka-ik.logo, .card .marka-ik.logo { width: 56px; height: 56px; flex-basis: 56px; }
@media (max-width: 640px) { .marka-ik.logo { width: 42px; height: 42px; flex-basis: 42px; } }

/* Çok büyük ve akıllı tahta boyutları (ekranın uzağından okunur) */
#anaSayfa[data-boy="xl"] .ana-izgara.ikonlar { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 10px; }
#anaSayfa[data-boy="xl"] .ana-izgara.ikonlar .ana-kart { width: 120px; height: 120px; border-radius: 30px; margin-bottom: 44px; }
#anaSayfa[data-boy="xl"] .ikonlar .ana-kart .ak-yazi { width: 150px; top: calc(100% + 8px); }
#anaSayfa[data-boy="xl"] .ikonlar .ana-kart .ak-ad { font-size: 19px; }
#anaSayfa[data-boy="xl"] .ak-rozet { min-width: 32px; height: 32px; font-size: 17px; line-height: 32px; top: -9px; right: -9px; }
#anaSayfa[data-boy="tahta"] .ana-izgara.ikonlar { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 12px; }
#anaSayfa[data-boy="tahta"] .ana-izgara.ikonlar .ana-kart { width: 164px; height: 164px; border-radius: 40px; margin-bottom: 58px; box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 255, .35); }
#anaSayfa[data-boy="tahta"] .ikonlar .ana-kart .ak-yazi { width: 200px; top: calc(100% + 10px); }
#anaSayfa[data-boy="tahta"] .ikonlar .ana-kart .ak-ad { font-size: 25px; }
#anaSayfa[data-boy="tahta"] .ak-rozet { min-width: 42px; height: 42px; font-size: 22px; line-height: 42px; top: -12px; right: -12px; }
#anaSayfa[data-boy="tahta"] .duzen-rozet, #anaSayfa[data-boy="xl"] .duzen-rozet { transform: scale(1.3); }
@media (max-width: 420px) {
  #anaSayfa[data-boy="xl"] .ana-izgara.ikonlar { grid-template-columns: repeat(2, 1fr); }
  #anaSayfa[data-boy="xl"] .ana-izgara.ikonlar .ana-kart { width: 104px; height: 104px; }
  #anaSayfa[data-boy="tahta"] .ana-izgara.ikonlar { grid-template-columns: repeat(2, 1fr); }
  #anaSayfa[data-boy="tahta"] .ana-izgara.ikonlar .ana-kart { width: 124px; height: 124px; border-radius: 32px; }
  #anaSayfa[data-boy="tahta"] .ikonlar .ana-kart .ak-yazi { width: 150px; }
  #anaSayfa[data-boy="tahta"] .ikonlar .ana-kart .ak-ad { font-size: 19px; }
}
/* Büyük simgelerde sayfa tahtanın genişliğini kullanır */
body:has(#anaSayfa[data-boy="xl"]) .wrap { max-width: 1480px; }
body:has(#anaSayfa[data-boy="tahta"]) .wrap { max-width: 1800px; }
/* Uygulama logosu (görsel) */
.logo-img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .15)); }
.marka-ik.logo { width: 54px; height: 54px; flex-basis: 54px; }
.veli-giris .marka-ik.logo, .card .marka-ik.logo { width: 72px; height: 72px; flex-basis: 72px; }
@media (max-width: 640px) { .marka-ik.logo { width: 46px; height: 46px; flex-basis: 46px; } }
/* Kendi yüklediğiniz simgeler (public/simgeler): resim kutunun tamamını kaplar */
.ozel-simge-img { width: 100%; height: 100%; display: block; object-fit: contain; }
.ak-e.ozel-simge { background: none !important; }
#anaSayfa .ana-izgara .ana-kart:has(> .ak-e.ozel-simge), #vIzgara .ana-kart:has(> .ak-e.ozel-simge) .ak-e { background: none !important; }
#anaSayfa .ana-izgara.ikonlar .ana-kart:has(> .ak-e.ozel-simge) { box-shadow: none; }
#anaSayfa .ikonlar .ana-kart .ak-e.ozel-simge { border-radius: 0; }
.fav-ic .ozel-simge-img { width: 78%; height: 78%; }

/* ---------- Sertifikalar (A4 yatay): arka plan resmi public/sertifikalar klasöründe; yazılar kutu genişliğine göre (cqw) yerleşir,
   ekranda ve baskıda aynı görünür ---------- */
.sf-kap { container-type: inline-size; width: 100%; max-width: 1000px; margin: 0 auto; }
.sertifika {
  aspect-ratio: 297 / 210; box-sizing: border-box; padding: 0; border: 0; border-radius: 0;
  color: #263557; background: #fffdf8; box-shadow: 0 8px 26px rgba(40, 54, 100, .17);
  font-family: "Baloo 2", system-ui, sans-serif; position: relative; overflow: hidden; isolation: isolate;
}
/* Arka plan bir <img>: tarayıcıda "arka plan grafikleri" kapalı olsa da baskıda görünür */
.sf-bg-art { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
/* ---------- 13 ayrı çocuk dostu sertifika: metinler açık zeminde, kutusuz. Yazı boyutları yalnızca sertifika genişliğine
   (cqw) bağlıdır; telefonda da baskıdaki yerleşimin küçük bir kopyası görünür, yazılar üst üste binmez ---------- */
.sf-foto { position: relative; isolation: isolate; color: #263557; }
.sf-foto .sf-bg-art { position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.sf-foto-kurum, .sf-foto-baslik, .sf-foto-slogan, .sf-foto-ad, .sf-foto-hitap,
.sf-foto-metin, .sf-foto-gerekce, .sf-foto-donem, .sf-foto-tarih,
.sf-foto-ogretmen, .sf-foto-muhur { position:absolute; z-index:2; box-sizing:border-box; text-align:center; }
.sf-foto-kurum {
  top:2.6%; left:24%; width:52%; height:6.2%; display:flex; align-items:center; justify-content:center;
  padding:0 1.3cqw; border:1px solid rgba(225,174,64,.9); border-radius:999px;
  background:rgba(255,252,239,.96); color:#203a60;
  font:800 1.55cqw/1.12 Inter,system-ui,sans-serif;
  text-shadow:none; box-shadow:0 .16cqw .38cqw rgba(40,55,80,.12);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sf-foto-baslik {
  top:10.2%; left:12%; width:76%; min-height:11%; max-height:15%; display:flex; align-items:center; justify-content:center;
  color:var(--sr); font:800 4.35cqw/1.02 "Baloo 2",system-ui,sans-serif;
  text-shadow:0 .16cqw 0 rgba(255,255,255,.95),0 .28cqw .35cqw rgba(36,50,80,.14);
  text-wrap:balance; overflow:hidden;
}
.sf-foto-slogan {
  top:25.5%; left:25%; width:50%; min-height:3.5%; display:flex; justify-content:center; align-items:center;
  color:#514184; font:800 1.35cqw/1.1 Inter,system-ui,sans-serif; letter-spacing:.05cqw;
  text-shadow:0 1px 0 rgba(255,255,255,.95); overflow:hidden;
}
.sf-foto-ad {
  top:35.5%; left:14%; width:72%; min-height:8.5%; display:flex; justify-content:center; align-items:center; gap:1.1cqw;
  padding:0 1cqw; color:#233958; border:0; background:transparent;
  font:800 3.35cqw/1.05 "Baloo 2",system-ui,sans-serif;
  text-shadow:0 .12cqw 0 rgba(255,255,255,.95); overflow:hidden; overflow-wrap:anywhere;
}
.sf-foto-ad span { color:#f3aa19; font-size:.72em; flex:0 0 auto; text-shadow:0 1px 0 #fff; }
.sf-foto-hitap {
  top:47.5%; left:20%; width:60%; color:#263e64; font:800 1.85cqw/1.15 "Baloo 2",system-ui,sans-serif;
}
.sf-foto-metin {
  top:52%; left:19%; width:62%; max-height:12.5%; overflow:hidden;
  color:#334667; font:600 1.72cqw/1.35 Inter,system-ui,sans-serif; text-wrap:balance;
}
.sf-foto-gerekce {
  top:65%; left:19%; width:62%; max-height:7.4%; overflow:hidden;
  color:color-mix(in srgb,var(--sr) 75%,#283957); font:700 1.85cqw/1.2 Inter,system-ui,sans-serif;
  text-wrap:balance; text-shadow:0 1px 0 rgba(255,255,255,.9);
}
.sf-foto-donem {
  top:72.5%; left:34%; width:32%; height:3.8%; display:flex; justify-content:center; align-items:center;
  color:#57468b; font:800 1.25cqw/1.1 Inter,system-ui,sans-serif; text-shadow:0 1px 0 #fff;
}
.sf-foto-tarih, .sf-foto-ogretmen {
  top:77%; height:7.2%; display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:.35cqw .8cqw; color:#243958; text-align:center; overflow:hidden;
  background:rgba(255,252,240,.94); border:1px solid rgba(226,184,94,.82); border-radius:1.1cqw;
  box-shadow:0 .15cqw .42cqw rgba(52,61,75,.09);
}
.sf-foto-tarih { left:23%; width:21%; }
.sf-foto-ogretmen { left:56%; width:21%; }
.sf-foto-tarih small, .sf-foto-ogretmen small {
  display:block; color:#52627d; font:800 1.3cqw/1.1 Inter,system-ui,sans-serif; letter-spacing:.035cqw;
}
.sf-foto-tarih b, .sf-foto-ogretmen b {
  display:block; max-width:100%; margin-top:.25cqw; color:#1d3456;
  font:800 1.9cqw/1.1 "Baloo 2",system-ui,sans-serif; overflow-wrap:anywhere;
}
.sf-foto-muhur {
  top:83.3%; left:45.6%; width:8.8%; height:11.2%; border-radius:50%;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.1cqw;
  color:#6b4c00; background:radial-gradient(circle,#fff9d0 0 53%,#ffdf73 54% 69%,#f8b832 70%);
  border:.28cqw double var(--sr); box-shadow:0 .22cqw .6cqw rgba(65,49,20,.14); transform:rotate(-5deg);
}
.sf-foto-muhur span { font-size:2.5cqw; line-height:1; }
.sf-foto-muhur small { font:800 .85cqw/1.1 Inter,system-ui,sans-serif; letter-spacing:.04cqw; }

/* Öğretmen: sertifika sayfası */
.sf-yildizlar { display: grid; gap: 10px; margin-top: 10px; }
.sf-kazanan { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, #fff3c4, #ffe0ec); color: #2b2d42; }
.sf-kazanan .sf-k-e { font-size: 34px; }
.sf-kazanan b { font-size: 19px; display: block; }
.sf-kazanan .muted { color: #5b5f70; }
.sf-kazanan .sf-dugme { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sf-aday { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.sf-aday:last-child { border-bottom: 0; }
.sf-sira { flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--line); }
.sf-aday:nth-child(1) .sf-sira { background: #ffd60a; color: #5a4500; }
.sf-aday:nth-child(2) .sf-sira { background: #dfe3ea; color: #444; }
.sf-aday:nth-child(3) .sf-sira { background: #f2c08f; color: #5b3200; }
.sf-aday .sf-a-yazi { flex: 1; min-width: 0; }
.sf-aday .sf-a-yazi b { display: block; }
.sf-aday .sf-a-yazi small { color: var(--soft); }
.sf-aday button { flex: 0 0 auto; }
.sf-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.sf-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.sf-onizle { margin: 14px 0 6px; }
.sf-liste-ust { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.sf-liste-ust select { flex: 1; min-width: 180px; }
.sf-oge { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.sf-oge:last-child { border-bottom: 0; }
.sf-oge .sf-o-e { font-size: 26px; }
.sf-oge .sf-a-yazi { flex: 1; min-width: 0; }
.sf-oge .sf-a-yazi b { display: block; }
.sf-oge .sf-a-yazi small { color: var(--soft); }
.sf-pano { position: fixed; inset: 0; z-index: 35; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; padding: 4vh 4vw;
  text-align: center; color: #2b2d42; background: radial-gradient(circle at 50% 30%, #fffbe0, #ffd6e8 60%, #c9e9ff); cursor: pointer; }
.sf-pano .sp-e { font-size: min(16vh, 22vw); line-height: 1; animation: sp-zipla 1.6s ease-in-out infinite; }
.sf-pano .sp-bas { font: 800 min(9vh, 9vw)/1.05 "Baloo 2", system-ui, sans-serif; color: #e85d04; }
.sf-pano .sp-ad { font: 800 min(12vh, 11vw)/1.05 "Baloo 2", system-ui, sans-serif; }
.sf-pano .sp-don { font-size: min(3.4vh, 4.5vw); font-weight: 700; color: #555; }
.sf-pano .sp-neden { display: flex; flex-wrap: wrap; justify-content: center; gap: 1vh 1vw; max-width: 90vw; }
.sf-pano .sp-neden span { background: #fff; border-radius: 99px; padding: .6vh 1.6vw; font-size: min(3vh, 4vw); font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.sf-pano .sp-kapat { position: absolute; top: 2vh; right: 2vw; }
@keyframes sp-zipla { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-2vh) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .sf-pano .sp-e { animation: none; } }

/* Veli: sertifikalar ve yıldız kutlaması */
.v-sert { display: grid; gap: 16px; }
.v-sert-oge { display: grid; gap: 8px; }
.v-sert-oge .sf-btnlar { margin: 0; justify-content: flex-end; }
.sf-btnlar { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.v-yildiz { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 14px 16px; border-radius: 18px; cursor: pointer; text-align: left; width: 100%;
  background: linear-gradient(135deg, #fff1b8, #ffd6e8); color: #2b2d42; border: 0; box-shadow: 0 3px 12px rgba(244, 161, 0, .25); font: inherit; }
.v-yildiz .vy-e { font-size: 38px; }
.v-yildiz b { display: block; font-size: 18px; }

@page sertifika { size: A4 landscape; margin: 0; }
@media print {
  #yazdir.sertifikalar { display: block; }
  body:has(#yazdir.sertifikalar) > :not(#yazdir) { display: none !important; }
  html:has(#yazdir.sertifikalar), body:has(#yazdir.sertifikalar), #yazdir.sertifikalar { page: sertifika; margin: 0; padding: 0; }
  #yazdir.sertifikalar .sf-kap { page: sertifika; width: 297mm; height: 209mm; max-width: none; margin: 0; overflow: hidden; break-after: page; }
  #yazdir.sertifikalar .sf-kap:last-child { break-after: auto; }
  #yazdir.sertifikalar .sertifika { height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
}

/* ---------- Hızlı not girişi (büyük tuş takımı) ---------- */
.hz-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
.hz-bar .muted { flex: 1 1 260px; font-size: 14px; }
#hzAc { font-size: 18px; min-height: 52px; padding: 8px 22px; }
body.hz-acik { overflow: hidden; }
.hz { position: fixed; inset: 0; z-index: 32; background: rgba(20, 22, 40, .55); display: flex; align-items: center; justify-content: center; padding: 12px; }
.hz-kutu { width: min(460px, 100%); max-height: 100%; overflow: auto; background: var(--card); color: var(--ink); border-radius: 22px; padding: 14px 16px 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 10px; }
.hz-ust { display: flex; justify-content: space-between; align-items: center; font-size: 17px; }
.hz-ilerleme { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.hz-ilerleme i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2ec4b6, #3a86ff); transition: width .2s; }
.hz-ad { font: 800 26px/1.15 "Baloo 2", system-ui, sans-serif; text-align: center; min-height: 30px; }
.hz-alanlar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hz-alan { flex: 1 1 120px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; min-height: 64px;
  background: var(--bg); color: var(--ink); border: 3px solid var(--line); border-radius: 16px; box-shadow: none; }
.hz-alan small { font-size: 13px; font-weight: 600; color: var(--soft); }
.hz-alan b { font: 800 30px/1 "Baloo 2", system-ui, sans-serif; }
.hz-alan.on { border-color: var(--purple); background: color-mix(in srgb, var(--purple) 10%, var(--card)); }
.hz-alan:disabled { opacity: .45; }
.hz-alan.titre { animation: hz-titre .3s; border-color: var(--red, #e63946); }
@keyframes hz-titre { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.hz-sonuc { min-height: 24px; text-align: center; font-size: 18px; }
.hz-ozet { margin: 4px 0; text-align: center; font-size: 17px; }
.hz-hata { color: var(--red, #e63946); }
.hz-kaydet { width: 100%; min-height: 56px; font-size: 20px; }
.hz-tus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hz-tus button { min-height: 62px; font: 800 30px/1 "Baloo 2", system-ui, sans-serif; border-radius: 16px; padding: 0; }
.hz-tus button:not(.green) { background: var(--bg); color: var(--ink); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); }
.hz-tus button:active { transform: translateY(2px); }
.hz-alt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hz-alt button { min-height: 48px; padding: 4px; font-size: 15px; }
@media (max-height: 800px) { .hz-kutu { gap: 8px; padding: 10px 12px 12px; } .hz-ad { font-size: 22px; } .hz-tus button { min-height: 52px; font-size: 26px; } .hz-alan { min-height: 54px; padding: 4px; } .hz-alan b { font-size: 24px; } .hz-alt button { min-height: 42px; } }

/* ---------- Canlı simgeler: üzerine gelince oynar, dokununca zıplar (öğretmen ve veli ana ekranı) ---------- */
.ana-izgara .ana-kart .ak-e :is(.cik, .ozel-simge-img) { transform-origin: 50% 75%; will-change: transform; }
@media (hover: hover) {
  .ana-izgara .ana-kart:is(:hover, :focus-visible) .ak-e :is(.cik, .ozel-simge-img) { animation: simge-salla .9s ease-in-out infinite; }
  .ana-izgara .ana-kart:nth-child(3n+1):is(:hover, :focus-visible) .ak-e :is(.cik, .ozel-simge-img) { animation-name: simge-zipla; }
  .ana-izgara .ana-kart:nth-child(3n+2):is(:hover, :focus-visible) .ak-e :is(.cik, .ozel-simge-img) { animation-name: simge-nabiz; }
}
.ana-izgara .ana-kart.dokundu .ak-e :is(.cik, .ozel-simge-img) { animation: simge-bas .5s cubic-bezier(.3, 1.6, .5, 1) !important; }
#anaSayfa.duzenle .ana-kart .ak-e :is(.cik, .ozel-simge-img) { animation: none !important; }
@keyframes simge-salla { 0%, 100% { transform: scale(1.08) rotate(0); } 25% { transform: scale(1.12) rotate(-9deg); } 75% { transform: scale(1.12) rotate(9deg); } }
@keyframes simge-zipla { 0%, 100% { transform: translateY(0) scale(1.08); } 35% { transform: translateY(-14%) scale(1.12, 1.16); } 60% { transform: translateY(0) scale(1.16, .94); } 80% { transform: translateY(-4%) scale(1.08); } }
@keyframes simge-nabiz { 0%, 100% { transform: scale(1.06); } 30% { transform: scale(1.2) rotate(-4deg); } 55% { transform: scale(1.04); } 75% { transform: scale(1.14) rotate(3deg); } }
@keyframes simge-bas { 0% { transform: scale(1); } 30% { transform: scale(.78, .86); } 65% { transform: scale(1.22) rotate(-8deg); } 100% { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .ana-izgara .ana-kart .ak-e :is(.cik, .ozel-simge-img) { animation: none !important; } }

/* Hareketli kendi simgeleri: normalde ilk karede durur, fare üzerine gelince / dokununca oynar */
.ozel-simge-img.hareketli { display: none; }
/* Dokunmatik ekranda :hover dokunduktan sonra takılı kalır; orada yalnızca dokunma anı (.dokundu) oynatır */
@media (prefers-reduced-motion: no-preference) {
  .ana-kart.dokundu .ozel-simge-img.hareketli { display: block; }
  .ana-kart.dokundu .ozel-dur { display: none; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  :is(.ana-kart:hover, .ana-kart:focus-visible, .fav:hover, .ozel-simge:hover) .ozel-simge-img.hareketli { display: block; }
  :is(.ana-kart:hover, .ana-kart:focus-visible, .fav:hover, .ozel-simge:hover) .ozel-dur { display: none; }
}
/* Favori düzenleme penceresindeki küçük simgeler */
.fav-mini { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; }
.fav-mini .cik { width: 100%; height: 100%; }
/* Veli ana ekranındaki kartlar da üzerine gelince hafifçe yükselir, basınca küçülür */
#vIzgara .ana-kart { transition: transform .18s ease; }
@media (hover: hover) { #vIzgara .ana-kart:hover { transform: translateY(-4px); } }
#vIzgara .ana-kart:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { #anaSayfa .ana-izgara.ikonlar .ana-kart:is(:hover, :active), #vIzgara .ana-kart:is(:hover, :active) { transform: none; } }

/* ---------- Yoklama: tarih gezinme ve tatil günleri ---------- */
.y-tarih { display: flex; gap: 6px; align-items: stretch; }
.y-tarih input { flex: 1 1 auto; min-width: 0; }
.y-tarih button { flex: 0 0 auto; min-width: 46px; padding: 0 10px; }
.y-tatil { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 12px; padding: 12px 14px; border-radius: 14px;
  background: #fff3d6; color: #5a4300; border: 2px solid #ffd166; }
.y-tatil.acik { background: #eef6ff; color: #23466e; border-color: #b9d6ff; }
.y-tatil.yarim { background: #eefaf6; color: #1d5a48; border-color: #a8e3cf; }
.y-tatil-e { font-size: 30px; line-height: 1; }
.y-tatil > span:nth-child(2) { flex: 1 1 200px; }
.y-tatil-d { display: flex; gap: 8px; flex-wrap: wrap; }
.y-tatiller summary { cursor: pointer; font-weight: 700; font-size: 17px; }
.yt-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.yt-liste li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.yt-liste li:last-child { border-bottom: 0; }
html[data-tema="gece"] .y-tatil { background: #3a3422; color: #ffe8a3; border-color: #6b5a1f; }
html[data-tema="gece"] .y-tatil.acik { background: #1f3a4a; color: #cfe6ff; border-color: #2f5670; }
html[data-tema="gece"] .y-tatil.yarim { background: #1d3a33; color: #c8f2e3; border-color: #2e6355; }

/* Sayfa içlerinde ana ekran simgeleri: bölüm başlığı, alt menü, veli kartları */
.bolum-bas h2 { display: flex; align-items: center; gap: 10px; }
.bolum-simge { flex: 0 0 auto; display: inline-block; width: 1.6em; height: 1.6em; }
.bolum-simge :is(.cik, .ozel-simge-img) { width: 100%; height: 100%; }
.alt-simge { display: contents; }
.alt-simge.ozel-simge { display: block; width: 30px; height: 30px; }
.alt-nav button.on .alt-simge.ozel-simge { transform: scale(1.12); }
.oz-simge { display: inline-block; width: 26px; height: 26px; flex: 0 0 auto; }
.oz-simge :is(.cik, .ozel-simge-img) { width: 100%; height: 100%; }

/* ---------- Sıralama ---------- */
.ana-kart.sira { background: linear-gradient(135deg, #ffd166, #f4a100); }
.ana-kart.dgun { background: linear-gradient(135deg, #ff8fab, #e85d8f); }
#srTur, #srDonem { margin: 0 0 8px; }
.sr-podyum { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: 18px 0 6px; }
.sr-p { flex: 0 1 180px; display: flex; flex-direction: column; align-items: center; }
.sr-p-kisi { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; margin-bottom: 6px; }
.sr-p-kisi b { font-size: 15px; line-height: 1.2; }
.sr-p-kisi small { font-weight: 800; font-size: 18px; color: var(--purple); }
.sr-p-av, .sr-av, .sp-av { display: grid; place-items: center; border-radius: 50%; overflow: hidden; }
.sr-p-av { width: 54px; height: 54px; font-size: 30px; }
.sr-p-av :is(svg, img), .sr-av :is(svg, img), .sp-av :is(svg, img) { width: 100%; height: 100%; }
.sr-p-blok { width: 100%; display: grid; place-items: start center; padding-top: 8px; border-radius: 14px 14px 4px 4px; font-size: 34px; color: #fff; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12); }
.sr-p1 .sr-p-blok { height: 120px; background: linear-gradient(#ffd60a, #f4a100); }
.sr-p2 .sr-p-blok { height: 88px; background: linear-gradient(#e3e8ef, #aab4c3); }
.sr-p3 .sr-p-blok { height: 64px; background: linear-gradient(#f6c28b, #d98a4a); }
.sr-liste { list-style: none; margin: 10px 0; padding: 0; }
.sr-liste li, .dg-liste li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.sr-liste li:last-child, .dg-liste li:last-child { border-bottom: 0; }
.sr-liste li.ust { background: color-mix(in srgb, #ffd60a 12%, transparent); border-radius: 10px; }
.sr-no { flex: 0 0 34px; text-align: center; font-weight: 800; font-size: 18px; }
.sr-av { flex: 0 0 38px; width: 38px; height: 38px; font-size: 22px; }
.sr-ad { flex: 1; min-width: 0; }
.sr-ad b { display: block; }
.sr-ad small { color: var(--soft); }
.sr-deger { font: 800 20px "Baloo 2", system-ui, sans-serif; min-width: 48px; text-align: right; }
.sr-pano .sr-podyum { width: min(1100px, 92vw); gap: 2vw; }
.sr-pano .sr-p { flex: 1 1 0; }
.sr-pano .sr-p-av { width: min(16vh, 18vw); height: min(16vh, 18vw); font-size: min(10vh, 11vw); }
.sr-pano .sr-p-kisi b { font-size: min(4.5vh, 4.5vw); }
.sr-pano .sr-p-kisi small { font-size: min(4vh, 4vw); }
.sr-pano .sr-p-blok { font-size: min(9vh, 9vw); }
.sr-pano .sr-p1 .sr-p-blok { height: 30vh; } .sr-pano .sr-p2 .sr-p-blok { height: 22vh; } .sr-pano .sr-p3 .sr-p-blok { height: 15vh; }

/* ---------- Doğum günleri ---------- */
.ana-dogum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 12px 16px; border-radius: 18px;
  background: linear-gradient(135deg, #ffe0ec, #fff1b8); color: #2b2d42; box-shadow: 0 3px 12px rgba(232, 93, 143, .2); }
.ana-dogum .ad-e { font-size: 36px; animation: sp-zipla 1.6s ease-in-out infinite; }
.ana-dogum > span:nth-child(2) { flex: 1 1 220px; }
.ana-dogum b { display: block; font-size: 18px; }
.ana-dogum small { color: #5b5f70; }
.dg-liste { list-style: none; margin: 0; padding: 0; }
.dg-liste li.bugun { background: linear-gradient(135deg, #ffe0ec, #fff1b8); border-radius: 12px; color: #2b2d42; }
.dg-liste li.bugun small { color: #5b5f70; }
.dg-liste li.yakin .dg-kalan { color: #e85d8f; }
.dg-kalan { font-weight: 800; white-space: nowrap; }
.dg-ozet { cursor: pointer; font-weight: 700; font-size: 18px; }
.dg-satir { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.dg-satir .dg-ad { flex: 1; min-width: 0; font-weight: 600; }
.dg-satir select { flex: 0 0 auto; width: auto; min-width: 84px; }
.dg-pano .sp-av { width: min(24vh, 30vw); height: min(24vh, 30vw); font-size: min(15vh, 18vw); }
.v-dogum { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 16px; border-radius: 18px; background: #fff0f5; color: #2b2d42; border: 2px dashed #ff8fab; }
.v-dogum .vd-e { font-size: 32px; }
.v-dogum.bugun { background: linear-gradient(135deg, #ffe0ec, #fff1b8); border-style: solid; }
.v-dogum.bugun b { display: block; font-size: 19px; }
.v-dogum .vd-sayi { font: 800 26px "Baloo 2", system-ui, sans-serif; color: #e85d8f; }
@media (prefers-reduced-motion: reduce) { .ana-dogum .ad-e { animation: none; } }

/* ---------- Sınıflarım ---------- */
.sinif-cip { font-weight: 700; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-liste { display: grid; gap: 8px; }
.sn-oge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 14px; }
.sn-oge.aktif { border-color: var(--purple); background: color-mix(in srgb, var(--purple) 8%, var(--card)); }
.sn-oge.duzen input, .sn-oge.duzen select { flex: 1 1 150px; width: auto; min-width: 0; }
.sn-ad { flex: 1 1 180px; min-width: 0; }
.sn-ad b { display: block; font-size: 17px; }
.sn-ad small { color: var(--soft); }
.sn-dugme { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sn-etkin { font-weight: 700; color: var(--purple); padding: 0 6px; }
@media (max-width: 600px) { .sinif-cip { max-width: 140px; } }

/* Ödev "Okudum" ve kitap sayfası */
.ys.oku { background: #eef4ff; color: #2b4a8a; }
html[data-tema="gece"] .ys.oku { background: #1f3a4a; color: #cfe6ff; }
.yk-oku { display: block; font-size: 12px; font-weight: 700; color: #2b6cb0; }
.v-odev-sag { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.v-okundu { font-size: 13px; font-weight: 700; color: #06a77d; white-space: nowrap; }
.kb-sayfa { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; font-weight: 600; }
.kb-sayfa input { width: 84px; min-height: 34px; padding: 2px 8px; }
.kt-sayfa { margin-left: 8px; color: var(--soft); }
.om-sayfa { margin: 0 0 10px; font-size: 17px; }
.om-sayfa b { font: 800 22px "Baloo 2", system-ui, sans-serif; color: var(--purple); }
.sifre-kutu { margin: 10px 0 4px; padding: 12px 14px; border: 2px dashed var(--line); border-radius: 14px; }

/* ---------- Site alt bağlantıları (giriş, veli, bilgi sayfaları, ayarlar) ---------- */
.site-alt { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 18px auto 6px; max-width: 820px; font-size: 14px; }
.site-alt a { color: var(--soft); font-weight: 600; text-decoration: none; padding: 4px 2px; }
.site-alt a:hover, .site-alt a:focus-visible { color: var(--purple); text-decoration: underline; }
.card .site-alt { margin-top: 14px; }
.site-telif { text-align: center; color: var(--soft); font-size: 13px; margin: 0 0 18px; }

/* ---------- Ders programı ---------- */
.dp-tablo { display: grid; gap: 6px; margin-top: 8px; }
.dp-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border: 2px solid var(--line); border-radius: 12px; }
.dp-satir .dp-no { width: 2em; }
.dp-satir input[type="time"] { width: 132px; flex: 0 0 auto; padding-left: 10px; padding-right: 6px; }
.dp-satir select { flex: 1 1 120px; width: auto; min-width: 0; }
.dp-satir input[data-dp="ders"] { flex: 2 1 140px; width: auto; min-width: 0; }
.sn-bugun { display: grid; gap: 6px; margin: 0 0 12px; }
.sn-ders { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--bg); border: 2px dashed var(--line); }
.sn-ders.simdi { border-style: solid; border-color: #2ec4b6; background: color-mix(in srgb, #2ec4b6 10%, var(--card)); }
.sn-ders > span { flex: 1; min-width: 0; }
.sn-ders small { display: block; color: var(--soft); font-weight: 600; }
.sn-ders b { font-size: 17px; }

/* ---------- Oturma planı ---------- */
.ot-ayar { gap: 10px; margin-bottom: 8px; }
.ot-ayar label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; flex: 1 1 120px; }
.ot-tahta { text-align: center; font-weight: 800; padding: 6px; border-radius: 10px; background: #2b2d42; color: #fff; margin: 4px auto 12px; max-width: 70%; }
.ot-sinif { display: grid; grid-template-columns: repeat(var(--sutun), 1fr); gap: 14px 18px; }
.ot-sira { display: flex; gap: 4px; padding: 5px; border-radius: 10px; background: color-mix(in srgb, #c98b52 22%, var(--card)); border: 2px solid color-mix(in srgb, #c98b52 50%, var(--card)); }
.ot-yer { flex: 1 1 0; min-width: 0; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px;
  border-radius: 8px; background: var(--card); color: var(--ink); border: 2px dashed var(--line); box-shadow: none; font-size: 13px; font-weight: 600; }
.ot-yer.dolu { border-style: solid; }
.ot-yer.secili, .ot-kisi.secili { outline: 3px solid var(--purple); outline-offset: 1px; }
.ot-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: 16px; }
.ot-av :is(svg, img) { width: 100%; height: 100%; }
.ot-ad { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-bos { color: var(--soft); font-weight: 500; }
.ot-disari { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ot-kisi { min-height: 36px; padding: 2px 10px; font-size: 14px; }
.ot-pano-kap .ot-pano { width: min(1400px, 94vw); }
.ot-pano-kap .ot-sinif.buyuk .ot-yer { min-height: 9vh; font-size: min(2.6vh, 2vw); background: #fff; color: #2b2d42; }
.ot-pano-kap .ot-tahta { font-size: 2.4vh; }
@media (max-width: 600px) { .ot-sinif { gap: 8px; } .ot-yer { font-size: 11px; min-height: 46px; } .ot-av { width: 20px; height: 20px; } }
@media print {
  #yazdir.oturma { display: block; }
  #yazdir.oturma .ot-yer { min-height: 18mm; font-size: 11pt; border: 1px solid #999; }
  #yazdir.oturma .ot-tahta { background: #ddd; color: #000; }
}

/* ---------- Karne görüşü ---------- */
#kgKart label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.kg-oge { border-bottom: 1px solid var(--line); padding: 10px 0; }
.kg-bas { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.kg-bas b { flex: 1; min-width: 0; }
.kg-say { font-size: 13px; color: var(--soft); font-weight: 700; }
.kg-say.fazla { color: var(--red, #e63946); }
.kg-oge textarea { width: 100%; font-size: 15px; line-height: 1.45; }
@media print {
  #yazdir.kgorus { display: block; font-size: 11pt; color: #000; }
  #yazdir.kgorus h1 { font-size: 15pt; }
  .kg-baski { break-inside: avoid; border-bottom: 1px solid #ccc; padding: 6px 0; }
  .kg-baski p { margin: 3px 0 0; }
}

/* ---------- Okuma hedefi ---------- */
#ohKart label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.oh-cubuk { display: block; height: 12px; border-radius: 99px; background: var(--line); overflow: hidden; flex: 1 1 auto; min-width: 80px; }
.oh-cubuk i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2ec4b6, #06a77d); }
.oh-liste { display: grid; gap: 6px; }
.oh-satir { display: flex; align-items: center; gap: 10px; }
.oh-satir .oh-ad { flex: 0 0 38%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oh-satir.tamam .oh-cubuk i, .oh-veli.tamam .oh-cubuk i { background: linear-gradient(90deg, #ffd60a, #f4a100); }
.oh-veli .oh-buyuk { font-size: 18px; margin-bottom: 6px; }
.oh-veli .oh-buyuk b { font: 800 34px "Baloo 2", system-ui, sans-serif; color: var(--purple); }
.oh-veli .oh-cubuk { height: 16px; }

/* ---------- Veli: gelişim grafiği ---------- */
.gg-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.gg-seri b { display: block; margin-bottom: 4px; }
.gg-seri svg { width: 100%; height: auto; display: block; }
.gg-et { font: 600 10px Inter, system-ui, sans-serif; fill: var(--soft); }
.gg-d { font: 800 11px Inter, system-ui, sans-serif; fill: var(--ink); }
.gg-eksen { stroke: var(--line); stroke-width: 2; }

/* ---------- Sınıf panosu ---------- */
.pn-acici { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pn-acici > div { flex: 1 1 260px; }
.sp-pano { position: fixed; inset: 0; z-index: 35; overflow: auto; padding: 3vh 3vw; color: #2b2d42;
  background: radial-gradient(circle at 15% 10%, #fff6c9, transparent 40%), radial-gradient(circle at 90% 90%, #d4f1ff, transparent 45%), linear-gradient(135deg, #fffaf0, #ffeef6); }
.sp-pano .sp-kapat { position: absolute; top: 2vh; right: 2vw; }
.pk-ust { display: flex; align-items: center; gap: 3vw; margin-bottom: 3vh; }
.pk-saat { font: 800 min(15vh, 13vw)/1 "Baloo 2", system-ui, sans-serif; color: #3a86ff; }
.pk-tarih { font: 800 min(5vh, 5vw)/1.1 "Baloo 2", system-ui, sans-serif; }
.pk-sinif { font-size: min(3vh, 3vw); color: #5b5f70; font-weight: 600; }
.pk-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 90vw), 1fr)); gap: 2.4vh 2vw; }
.pk { background: rgba(255, 255, 255, .9); border-radius: 24px; padding: 2vh 1.6vw; box-shadow: 0 6px 20px rgba(0, 0, 0, .07); font-size: min(3vh, 3.2vw); }
.pk-bas { font: 800 min(3.6vh, 3.6vw) "Baloo 2", system-ui, sans-serif; margin-bottom: 1vh; }
.pk-bos { color: #6b6f80; margin: 0; }
.pk-ders { margin: 0; padding-left: 1.2em; }
.pk-ders li { padding: .3vh .4vw; border-radius: 10px; }
.pk-ders li.simdi { background: #d9f7f2; font-weight: 800; }
.pk-ders small { color: #6b6f80; font-weight: 700; margin-right: .4em; }
.pk-yildiz { display: flex; flex-wrap: wrap; align-items: center; gap: 1vh 1.4vw; }
.pk-yildiz b { font: 800 min(5vh, 5vw) "Baloo 2", system-ui, sans-serif; margin-right: 1vw; }
.pk-av { width: min(9vh, 9vw); height: min(9vh, 9vw); border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: min(6vh, 6vw); }
.pk-av :is(svg, img) { width: 100%; height: 100%; }
.pk-dg { margin: 0; padding-left: 1.1em; }
.pk-oh b { font: 800 min(6vh, 6vw) "Baloo 2", system-ui, sans-serif; color: #06a77d; }
.pk .oh-cubuk { height: 2vh; margin: 1vh 0; }
.pk-duy { margin: 0; font-weight: 600; }

/* ---------- Çevrimdışı bandı ---------- */
.cd-bant { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 45; max-width: min(560px, 92vw);
  padding: 10px 16px; border-radius: 14px; background: #2b2d42; color: #fff; font-weight: 600; font-size: 15px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); text-align: center; }
.cd-bant.geldi { background: #06a77d; }
body.alt-nav-var .cd-bant { bottom: calc(84px + env(safe-area-inset-bottom)); }

/* ---------- Bildirim merkezi ---------- */
.bm-liste { display: grid; gap: 6px; margin: 4px 0 10px; }
.bm-oge { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--bg); color: var(--ink);
  border: 2px solid var(--line); box-shadow: none; font-size: 16px; font-weight: 600; min-height: 48px; }
.bm-oge > span:nth-child(2) { flex: 1; }
.bm-oge.onemli { border-color: #ff8fab; background: color-mix(in srgb, #ff5d8f 8%, var(--card)); }
.bm-oge:disabled { opacity: 1; cursor: default; }
.bm-e { font-size: 22px; }
.v-yenilik { border: 2px solid #ffd166; }
.v-yenilik ul { margin: 6px 0 10px; padding: 0; list-style: none; display: grid; gap: 6px; }
.v-yenilik li button { width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; background: var(--bg); color: var(--ink); border: 0; box-shadow: none; font-weight: 600; font-size: 15px; }
.v-yenilik .vy-alt { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.v-bildirim-ac { text-align: center; margin: 0 0 12px; }

/* ---------- Kazanımlar ---------- */
#kzKart label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
#kzMetin { width: 100%; margin-top: 8px; font-size: 14px; }
.kz-ders { margin: 8px 0; }
.kz-ders ul { margin: 4px 0 0; padding-left: 20px; }
.kz-ders li { margin-bottom: 4px; }
.kz-haftalar details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.kz-tablo tr.dusuk td { background: color-mix(in srgb, #e63946 10%, transparent); }
.kz-tablo tr.orta td { background: color-mix(in srgb, #ffd166 18%, transparent); }
.kz-sec { margin-top: 10px; border: 2px dashed var(--line); border-radius: 12px; padding: 8px 12px; }
.kz-sec summary { cursor: pointer; font-weight: 700; }
#kzAra { margin: 4px 0 6px; }
#kzSecListe { display: grid; gap: 4px; max-height: 320px; overflow: auto; }
.kz-cb { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; font-size: 14px; cursor: pointer; }
.kz-cb input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.kz-cb small { color: var(--soft); font-weight: 700; }