/* Hecemece öğretmen uygulaması — telefon öncelikli, açık/koyu tema */
:root {
  --zemin: #f6f7f3;
  --kart: #ffffff;
  --yazi: #1d2420;
  --soluk: #5d6a63;
  --cizgi: #dfe4dd;
  --ana: #2f7d4f;          /* Hecemece yeşili */
  --ana-koyu: #23603c;
  --ana-acik: #e3f1e8;
  --vurgu: #d6336c;        /* tabela pembesi */
  --uyari: #b26a00;
  --uyari-acik: #fff2d6;
  --tehlike: #c62828;
  --tehlike-acik: #fde8e8;
  --kilitli: #e9ece8;
  --acik-harf: #ffe8a3;
  --ogrenildi: #7cc79a;
  --golge: 0 1px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 5%);
  --yaricap: 14px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #121614; --kart: #1b211e; --yazi: #e8ece9; --soluk: #9aa8a0; --cizgi: #2c3530;
    --ana: #5fbf86; --ana-koyu: #7ad19c; --ana-acik: #1f3328; --vurgu: #f06595;
    --uyari: #f0b54a; --uyari-acik: #3a2f17; --tehlike: #ff6b6b; --tehlike-acik: #3a1f1f;
    --kilitli: #252c28; --acik-harf: #5b4c16; --ogrenildi: #2f7d4f; --golge: none;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* .ust ve .alt'ın display kuralı hidden özniteliğini ezmesin */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--zemin); color: var(--yazi);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  padding-bottom: calc(68px + env(safe-area-inset-bottom));
}
a { color: var(--ana); }
.atla { position: absolute; left: -999px; }
.atla:focus { left: 8px; top: 8px; background: var(--kart); padding: 8px; z-index: 10; }
img { max-width: 100%; }

/* üst ve alt çubuk */
.ust { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 10px 16px;
       padding-top: calc(10px + env(safe-area-inset-top)); background: var(--kart); border-bottom: 1px solid var(--cizgi); }
.marka { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--yazi); text-decoration: none; }
.marka img { border-radius: 7px; }
.ust-baslik { color: var(--soluk); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alt { position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; display: flex; background: var(--kart);
       border-top: 1px solid var(--cizgi); padding-bottom: env(safe-area-inset-bottom); }
.alt a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 10px;
         font-size: 12px; color: var(--soluk); text-decoration: none; min-height: 56px; }
.alt a .simge { font-size: 20px; line-height: 1; }
.alt a[aria-current="page"] { color: var(--ana); font-weight: 600; }

main { max-width: 760px; margin: 0 auto; padding: 16px; }
main:focus { outline: none; }
h1 { font-size: 22px; margin: 4px 0 14px; }
h2 { font-size: 17px; margin: 22px 0 10px; }
h3 { font-size: 15px; margin: 0 0 6px; }
p { margin: 0 0 10px; }
.soluk { color: var(--soluk); }
.kucuk { font-size: 13px; }
.satir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.satir.arali { justify-content: space-between; }
.yigin > * + * { margin-top: 10px; }

/* kartlar ve listeler */
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 16px; box-shadow: var(--golge); }
.kart + .kart { margin-top: 12px; }
.liste { list-style: none; margin: 0; padding: 0; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); overflow: hidden; }
.liste li + li { border-top: 1px solid var(--cizgi); }
.liste a, .liste .oge { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: inherit; text-decoration: none; min-height: 60px; }
.liste a:hover { background: var(--ana-acik); }
.liste .govde { flex: 1; min-width: 0; }
.liste .baslik { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste .alt-yazi { font-size: 13px; color: var(--soluk); }
.ok::after { content: "›"; font-size: 22px; color: var(--soluk); }
.bos { text-align: center; padding: 28px 16px; color: var(--soluk); }

/* rozetler */
.rozet { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
         background: var(--kilitli); color: var(--soluk); white-space: nowrap; }
.rozet.yesil { background: var(--ana-acik); color: var(--ana-koyu); }
.rozet.sari { background: var(--uyari-acik); color: var(--uyari); }
.rozet.kirmizi { background: var(--tehlike-acik); color: var(--tehlike); }
.uyari-kutusu { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--uyari-acik); color: var(--uyari); font-size: 13px; font-weight: 600; }
.nokta { width: 10px; height: 10px; border-radius: 50%; background: #9aa; flex: none; }
.nokta.cevrimici { background: #2fb36a; box-shadow: 0 0 0 3px rgb(47 179 106 / 25%); }
.takma { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 1px; }

/* ilerleme çubuğu */
.cubuk { height: 8px; border-radius: 99px; background: var(--kilitli); overflow: hidden; }
.cubuk > span { display: block; height: 100%; background: var(--ana); border-radius: 99px; }

/* formlar */
label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.alan + .alan { margin-top: 14px; }
.ipucu { font-size: 13px; color: var(--soluk); margin-top: 4px; font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; font: inherit; color: inherit; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 10px;
  padding: 11px 12px; min-height: 46px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--ana) 45%, transparent); outline-offset: 2px; }
.onay { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.onay input { width: 22px; height: 22px; accent-color: var(--ana); }
input[type=range] { width: 100%; accent-color: var(--ana); }

/* düğmeler */
button, .dugme {
  font: inherit; font-weight: 600; border: 1px solid transparent; border-radius: 12px; padding: 11px 16px; min-height: 46px;
  background: var(--ana); color: #fff; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
button:hover { background: var(--ana-koyu); }
button.ikincil, .dugme.ikincil { background: var(--kart); color: var(--yazi); border-color: var(--cizgi); }
button.ikincil:hover { background: var(--ana-acik); }
button.tehlike { background: var(--tehlike); }
button.tehlike.ikincil { background: var(--kart); color: var(--tehlike); border-color: var(--tehlike-acik); }
button:disabled { opacity: .55; cursor: default; }
button.tam { width: 100%; }
.dugmeler { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* canlı kumanda */
.durum-kart { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.durum-buyuk { font-size: 22px; font-weight: 700; }
.kumanda { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kumanda button { min-height: 64px; flex-direction: column; gap: 2px; font-size: 14px; }
.kumanda button .simge { font-size: 22px; line-height: 1; }
.kumanda .genis { grid-column: span 3; }
.gruplar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.gruplar button { min-height: 48px; padding: 6px; }
.duraklatildi { background: var(--uyari-acik); border-color: var(--uyari); }
.kayit-satiri { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--cizgi); font-size: 14px; }
.kayit-satiri:first-child { border-top: 0; }
.isaret { width: 22px; text-align: center; font-weight: 700; }
.isaret.d { color: var(--ana); } .isaret.y { color: var(--tehlike); }

/* harf ızgarası (ilerleme) */
.harfler { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.harf { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font-size: 20px; font-weight: 700; background: var(--kilitli); color: var(--soluk); position: relative; }
.harf.acik { background: var(--acik-harf); color: var(--yazi); }
.harf.ogrenildi { background: var(--ogrenildi); color: #10301e; }
.harf .alt-not { position: absolute; bottom: 2px; font-size: 9px; font-weight: 600; opacity: .8; }
.lejant { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--soluk); margin-top: 10px; }
.lejant i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 4px; }

/* sınıf raporu tablosu */
.tablo-kap { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--kart); }
table.rapor { border-collapse: collapse; font-size: 13px; }
table.rapor th, table.rapor td { padding: 0; text-align: center; }
table.rapor th { position: sticky; top: 0; background: var(--kart); padding: 6px 2px; font-weight: 700; min-width: 26px; }
table.rapor th.ad, table.rapor td.ad { position: sticky; left: 0; background: var(--kart); text-align: left; padding: 6px 10px; min-width: 120px; white-space: nowrap; z-index: 1; }
table.rapor td span { display: block; width: 24px; height: 24px; margin: 2px; border-radius: 6px; background: var(--kilitli); }
table.rapor td span.acik { background: var(--acik-harf); } table.rapor td span.ogrenildi { background: var(--ogrenildi); }

/* sekmeler */
.sekmeler { display: flex; gap: 6px; margin: 4px 0 14px; border-bottom: 1px solid var(--cizgi); }
.sekmeler a { padding: 10px 12px; color: var(--soluk); text-decoration: none; border-bottom: 3px solid transparent; font-weight: 600; }
.sekmeler a[aria-current="page"] { color: var(--ana); border-color: var(--ana); }

/* iletişim kutusu ve bildirim */
dialog { border: none; border-radius: 18px; padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--kart); color: var(--yazi); box-shadow: 0 20px 60px rgb(0 0 0 / 30%); }
dialog::backdrop { background: rgb(0 0 0 / 40%); }
dialog form, dialog .icerik { padding: 20px; }
.bildirim { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; max-width: calc(100vw - 32px);
            background: #1d2420; color: #fff; padding: 12px 16px; border-radius: 12px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.bildirim.goster { opacity: 1; }
.bildirim.hata { background: var(--tehlike); }
.form-hata { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--tehlike-acik); color: var(--tehlike); font-weight: 600; font-size: 14px; }

/* giriş sayfası */
.giris { max-width: 420px; margin: 4vh auto 0; }
.giris .logo { display: block; width: 260px; margin: 0 auto 18px; }
.yukleniyor { text-align: center; padding: 40px; color: var(--soluk); }
.buyuk-kod { font-size: 30px; font-weight: 800; letter-spacing: 3px; }
details > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }

@media (min-width: 720px) {
  .kumanda { grid-template-columns: repeat(4, 1fr); }
  .kumanda .genis { grid-column: span 4; }
}