/* Okul Araçları — hesap ve panel ekranları
   ============================================================
   Araç bileşenleri (.adim .btn .inp .field .row .checks .roster .board
   .note .empty) ogretmenatama.css'ten geliyor. Burada yalnızca
   hesap/panel'e özel olanlar var.
   ============================================================ */

/* ---------- giriş kartı ---------- */
.kimlik{
  min-height:calc(100vh - 12rem);
  display:flex; align-items:center; justify-content:center;
  padding-block:clamp(2rem,1rem + 4vw,4rem);
}
.kart{
  width:100%; max-width:27rem;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--sh-2);
  padding:clamp(1.6rem,1.1rem + 2vw,2.4rem);
}
.kart__ust{ margin-bottom:1.6rem }
.kart__baslik{
  font-family:var(--serif); font-size:1.6rem; font-weight:600;
  letter-spacing:-.015em; line-height:1.2;
}
.kart__alt{ color:var(--muted); font-size:.92rem; line-height:1.65; margin-top:.6rem; max-width:36ch }

.kart form{ display:grid; gap:1rem }
.kart .field{ width:100% }
.kart .inp{ width:100% }
.kart .btn{ width:100%; justify-content:center; padding-block:.65em; min-height:2.85rem }

.kart__ayrac{
  display:flex; align-items:center; gap:.8rem; margin:1.5rem 0 1rem;
  font-size:.78rem; font-weight:600; color:var(--muted-2);
}
.kart__ayrac::before, .kart__ayrac::after{
  content:""; flex:1 1 auto; height:1px; background:var(--line);
}

.kart__link{
  background:none; border:0; padding:0; cursor:pointer; font:inherit;
  font-size:.88rem; font-weight:500; color:var(--brand); text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--brand) 35%,transparent);
  text-underline-offset:3px; border-radius:var(--r-sm);
}
.kart__link:hover{ text-decoration-color:var(--brand) }
.kart__alt-satir{ margin-top:1.1rem; font-size:.88rem; color:var(--muted); text-align:center }

/* ---------- durum kutusu ----------
   Dört hâl: nötr, iyi, bekliyor, hata. Renk tek başına taşımıyor —
   sol şerit kalınlığı ve zemin de değişiyor. */
.durum{
  border:1px solid var(--line); border-left:3px solid var(--muted-2);
  background:var(--surface); padding:.9rem 1.05rem; border-radius:var(--r-sm);
  font-size:.9rem; line-height:1.6;
}
.durum--hata{
  border-left-color:var(--danger); color:var(--danger);
  background:var(--danger-soft); border-color:color-mix(in srgb,var(--danger) 22%,transparent);
}
.durum--iyi{
  border-left-color:var(--ok); background:var(--ok-soft);
  border-color:color-mix(in srgb,var(--ok) 22%,transparent);
}
.durum--bekle{
  border-left-color:var(--warn); background:var(--warn-soft);
  border-color:color-mix(in srgb,var(--warn) 22%,transparent);
}
.durum + .durum{ margin-top:.7rem }
.durum__acts{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.85rem }

/* ---------- panel üst çubuğu ---------- */
.panel-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:.9rem 1.1rem; margin-bottom:1.25rem;
}
.panel-bar__kim{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap }
.panel-bar__okul{
  font-family:var(--serif); font-size:1.25rem; font-weight:600; letter-spacing:-.01em;
}
.panel-bar__rol{
  font-size:.72rem; font-weight:600; color:var(--brand); background:var(--brand-soft);
  padding:.3em .7em; border-radius:999px; white-space:nowrap;
}
.panel-bar__sag{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap }
.panel-bar__mail{ font-size:.82rem; color:var(--muted) }

/* ---------- kayıt durumu ---------- */
.kayit-durum{
  font-size:.78rem; font-weight:600; color:var(--muted);
  display:inline-flex; align-items:center; gap:.45em;
}
.kayit-durum::before{
  content:""; width:.5em; height:.5em; border-radius:50%;
  background:currentColor; opacity:.7;
}
.kayit-durum[data-tur="bekle"]{ color:var(--warn) }
.kayit-durum[data-tur="iyi"]{ color:var(--ok) }
.kayit-durum[data-tur="hata"]{ color:var(--danger) }
.kayit-durum:empty{ display:none }

/* ---------- başvuru listesi (admin) ---------- */
.basvurular{ display:grid; grid-template-columns:minmax(0,1fr); gap:.85rem; margin-top:1.1rem }
.basvuru{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  box-shadow:var(--sh-1); padding:1.1rem 1.2rem;
  display:grid; gap:.85rem;
  grid-template-columns:minmax(0,1fr) auto; align-items:center;
}
.basvuru__ad{ font-family:var(--serif); font-size:1.15rem; font-weight:600; line-height:1.3 }
.basvuru__kim{ color:var(--muted); font-size:.88rem; margin-top:.25rem }
.basvuru__zaman{
  font-family:var(--mono); font-size:.72rem; color:var(--muted-2); margin-top:.4rem;
}
.basvuru__acts{ display:flex; gap:.6rem; flex-wrap:wrap }
.basvuru--karar{ opacity:.72; box-shadow:none; background:var(--surface-2) }
.basvuru__rozet{
  font-size:.74rem; font-weight:600; padding:.3em .7em; border-radius:999px;
  border:1px solid var(--line-2); color:var(--muted); white-space:nowrap;
  background:var(--surface);
}
.basvuru__rozet--onay{ border-color:transparent; color:var(--ok); background:var(--ok-soft) }
.basvuru__rozet--ret{ border-color:transparent; color:var(--danger); background:var(--danger-soft) }
.basvuru__karar{ display:grid; gap:.4rem; justify-items:end; text-align:right }
.basvuru__ret-form{
  grid-column:1 / -1; display:grid; gap:.8rem;
  border-top:1px solid var(--line); padding-top:1rem;
}
.basvuru__ret-form .inp{ width:100% }

/* ---------- öğretmen hesapları ---------- */
.uye{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:.9rem 1.05rem; margin-top:.65rem;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:.75rem; align-items:center;
}
.uye__ad{ font-size:1rem; font-weight:500; line-height:1.3 }
.uye__mail{ color:var(--muted); font-size:.85rem; margin-top:.2rem }
.uye__bag{ font-size:.78rem; color:var(--brand); margin-top:.35rem; font-weight:500 }
.uye__acts{ display:flex; align-items:center; gap:.65rem; flex-wrap:wrap }

/* ---------- öğretmen görünümü ----------
   Öğretmenin telefonda okuduğu tek cümle. Sayfanın en yüksek sesi bu
   olmalı: nöbetini görmek için çizelgeyi taramak zorunda kalmasın. */
.benim{
  border:1px solid var(--brand); border-left-width:4px;
  border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--sh-2);
  padding:clamp(1.15rem,1rem + 1.5vw,1.75rem); margin-bottom:1.5rem;
}
.benim__ust{ font-size:.78rem; font-weight:600; color:var(--brand) }
.benim__metin{
  font-family:var(--serif);
  font-size:clamp(1.2rem,1.05rem + .8vw,1.6rem); line-height:1.4;
  font-weight:600; letter-spacing:-.01em; margin-top:.55rem;
}

/* Kendi nöbeti — çizelgede kendini bulmak taramaya kalmasın. */
.duty--benim{
  background:var(--surface) !important;
  box-shadow:inset 0 0 0 2px var(--brand);
}
.duty--benim .duty__name{ font-weight:700; color:var(--brand) }
.duty--benim .duty__mark{ background:var(--brand); color:var(--on-brand) }
@media print{
  .duty--benim{ box-shadow:inset 0 0 0 1.5px var(--ink) }
  .duty--benim .duty__name{ color:var(--ink) }
}

/* ---------- adım adım tanıtım ---------- */
.tanitim{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center; padding:1.25rem;
  background:color-mix(in srgb, var(--ink) 55%, transparent);
  backdrop-filter:blur(2px);
  animation:tanitim-gir .18s ease-out;
}
.tanitim__kutu{
  width:100%; max-width:31rem; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.5rem,1.2rem + 1.6vw,2.25rem);
  box-shadow:0 28px 70px -30px rgba(19,42,67,.55);
  animation:tanitim-yuksel .22s cubic-bezier(.2,.7,.3,1);
}
.tanitim__kutu:focus{ outline:none }
.tanitim__ust{ font-size:.78rem; font-weight:600; color:var(--brand) }
.tanitim__sayac{
  float:right; font-family:var(--mono); font-size:.72rem; color:var(--muted-2);
}
.tanitim__baslik{
  font-family:var(--serif);
  font-size:clamp(1.3rem,1.15rem + .7vw,1.6rem); font-weight:600;
  letter-spacing:-.015em; line-height:1.25; margin-top:.9rem;
}
.tanitim__metin{
  color:var(--muted); font-size:.95rem; line-height:1.7;
  margin-top:.75rem; max-width:44ch;
}
.tanitim__noktalar{ display:flex; gap:.35rem; margin-top:1.6rem }
.tanitim__nokta{
  height:3px; flex:1 1 auto; background:var(--line); border-radius:2px;
  transition:background-color .2s var(--ease-out);
}
.tanitim__nokta[data-gecti="true"]{ background:color-mix(in srgb,var(--brand) 40%,transparent) }
.tanitim__nokta[data-aktif="true"]{ background:var(--brand) }
.tanitim__acts{ display:flex; gap:.6rem; margin-top:1.4rem; flex-wrap:wrap }
.tanitim__acts .btn:first-child{ margin-right:auto }

@keyframes tanitim-gir{ from{ opacity:0 } to{ opacity:1 } }
@keyframes tanitim-yuksel{
  from{ opacity:0; transform:translateY(10px) }
  to{ opacity:1; transform:none }
}
@media (prefers-reduced-motion:reduce){
  .tanitim, .tanitim__kutu{ animation:none }
  .tanitim__nokta{ transition:none }
}

/* ---------- dar ekran ---------- */
@media (max-width:560px){
  .basvuru, .uye{ grid-template-columns:1fr }
  .basvuru__karar{ justify-items:start; text-align:left }
  .panel-bar{ align-items:flex-start }
  .tanitim__acts .btn{ flex:1 1 auto; justify-content:center }
  .tanitim__acts .btn:first-child{ margin-right:0; flex-basis:100%; order:3 }
}

/* Başvurunun neden incelemeye düştüğü */
.isaretler{
  list-style:none; padding:0; margin-top:.5rem; display:grid; gap:.25rem;
}
.isaretler li{
  font-size:.8rem; color:var(--warn); display:flex; gap:.45rem; align-items:baseline;
}
.isaretler li::before{
  content:""; flex:none; width:.35rem; height:.35rem; border-radius:999px;
  background:var(--warn); transform:translateY(-.15em);
}

/* ---------- panel bölüm çubuğu ----------
   Üç alan: ders atama, nöbet atama, öğretmen kaydı. Ayrı sayfalar —
   her ekran yalnızca kendi kodunu yüklüyor ve geri tuşu çalışıyor. */
.panel-nav{
  display:flex; gap:.3rem; flex-wrap:wrap; margin-bottom:1.25rem;
  border-bottom:1px solid var(--line); padding-bottom:.5rem;
}
.panel-nav a{
  font-size:.92rem; font-weight:500; color:var(--muted); text-decoration:none;
  padding:.55em 1em; border-radius:var(--r-sm); min-height:var(--tap);
  display:inline-flex; align-items:center;
  transition:color .18s var(--ease-out), background-color .18s var(--ease-out);
}
@media (hover:hover){
  .panel-nav a:hover{ color:var(--brand); background:var(--brand-soft) }
}
.panel-nav a[aria-current="page"]{
  color:var(--on-brand); background:var(--brand); box-shadow:var(--sh-1);
}
@media (max-width:560px){
  .panel-nav a{ flex:1 1 auto; justify-content:center }
}

/* Otomatik onay şeridi: açıkken dikkat çeksin, kapalıyken sessiz dursun. */
#ayar-serit[data-acik="true"]{
  border-left-color:var(--warn); background:var(--warn-soft);
  border-color:color-mix(in srgb,var(--warn) 22%,transparent);
}
#ayar-serit[data-acik="false"]{
  border-left-color:var(--ok); background:var(--ok-soft);
  border-color:color-mix(in srgb,var(--ok) 22%,transparent);
}