/* Piksir — okul giriş ekranı iki sütun (D167): solda 3B sahne (okul-giris-sahne.js), sağda giriş paneli ortada.
   Dar ekranda (< 960 px) sahne gizli, panel eskisi gibi tek sütun. Sahne yalnız süs (aria-hidden). */
.okul-login--sahne { align-content: stretch; }
.okul-giris { width: 100%; max-width: 1320px; margin-inline: auto; display: grid; grid-template-columns: 1fr; justify-items: center; align-items: center; }
.okul-giris > .okul-auth { width: min(560px, 100%); }
.okul-giris__sahne { display: none; }
@media (min-width: 960px) {
  .okul-login--sahne { padding-top: 16px; padding-bottom: 16px; }
  .okul-giris { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); min-height: calc(100vh - 69px - 32px); }
  .okul-giris__sahne { display: block; position: relative; align-self: stretch; width: 100%; min-height: 520px; max-height: 860px; }
  .okul-giris__sahne > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .okul-giris > .okul-auth { justify-self: center; }
}
/* Sabit görünüm (WebGL yok, hareket azaltma, zayıf cihaz): Rota resmi altında yumuşak kaide gölgesi */
.okul-giris__sahne--sabit { display: none; }
@media (min-width: 960px) {
  .okul-giris__sahne--sabit { display: grid; place-items: center; }
  .okul-giris__resim { width: min(420px, 80%); height: auto; filter: drop-shadow(0 28px 30px rgba(60,40,140,.22)); }
}
@media print { .okul-giris__sahne { display: none !important; } }

/* D167 — öğrenci PIN adımı ekrana sığar (sahip: "öğrenci girişinde şifre yazarken panel sayfaya sığmıyor"). Yalnız PIN adımında
   (rakam tuş takımı ya da resimli şifre); tuş boyu ekran yüksekliğiyle esner (en az 48 px dokunma hedefi). okul.js bazı boşlukları
   satır içi stille verdiği için ezmek !important ister. */
.okul-giris .okul-auth:has(#pinDots, #ppGrid) { gap: 10px; }
.okul-giris .okul-auth:has(#pinDots, #ppGrid) .okul-auth__brand h1 { font-size: clamp(1.5rem, 1.1rem + 1.4vh, 2.1rem); }
.okul-giris #paneStu:has(#pinDots, #ppGrid) { padding: 14px 22px 16px; }
.okul-giris #paneStu:has(#pinDots, #ppGrid) .okul-steps { margin-bottom: 8px; }
.okul-giris #paneStu:has(#pinDots, #ppGrid) .okul-whoami { margin-top: 4px !important; gap: 10px; }
.okul-giris #paneStu:has(#pinDots, #ppGrid) .okul-whoami svg { width: 40px; height: 40px; }
.okul-giris #paneStu:has(#pinDots, #ppGrid) .okul-whoami b { font-size: 1.3rem; }
.okul-giris #paneStu:has(#pinDots, #ppGrid) #pinTitle { margin: 6px 0 !important; font-size: 1.15rem !important; }
.okul-giris #paneStu:has(#pinDots, #ppGrid) .okul-pichint { margin: 0 0 6px; }
.okul-giris #paneStu .v2-pin { margin-bottom: 10px; }
.okul-giris #paneStu .v2-pinpad { gap: clamp(6px, 1vh, 12px) !important; }
.okul-giris #paneStu .v2-pinpad button { aspect-ratio: auto; height: clamp(48px, 6.4vh, 64px); min-height: 48px; font-size: 1.5rem; }
.okul-giris #paneStu:has(#pinDots, #ppGrid) .okul-pinhelp { margin-top: 8px; max-width: 46ch; font-size: .82rem; line-height: 1.35; }
.okul-giris #paneStu:has(#pinDots, #ppGrid) .okul-pinswitch { margin: 6px 0 0; }
/* Resimli şifre (1–2. sınıf, picturePin.js): yuvalar ve resim düğmeleri ekran yüksekliğiyle esner (en az 56 px) */
.okul-giris #paneStu .sb-ppin { gap: 8px; }
.okul-giris #paneStu .sb-ppin__slots { gap: 8px; }
.okul-giris #paneStu .sb-ppin__slot { width: clamp(38px, 5vh, 60px); height: clamp(38px, 5vh, 60px); border-radius: 12px; }
.okul-giris #paneStu .sb-ppin__slot .sb-ppin-ic { width: 70%; height: 70%; }
.okul-giris #paneStu .sb-ppin__grid { gap: clamp(6px, .9vh, 10px); }
.okul-giris #paneStu .sb-ppin__btn { min-height: 52px; padding: 3px 4px; font-size: .86rem; }
.okul-giris #paneStu .sb-ppin__btn .sb-ppin__pic { width: clamp(30px, 4.2vh, 56px); height: clamp(30px, 4.2vh, 56px); }
.okul-giris #paneStu .sb-ppin__btn .sb-ppin-ic { width: clamp(28px, 3.8vh, 50px); height: clamp(28px, 3.8vh, 50px); }
.okul-giris #paneStu .sb-ppin__fn svg, .okul-giris #paneStu .sb-ppin__ok svg { width: 26px; height: 26px; }
/* Kısa ekranlarda PIN adımında marka başlığı gizlenir (üst çubukta logo zaten var); okuyucu için başlık kalır */
@media (max-height: 820px) {
  .okul-giris .okul-auth:has(#pinDots, #ppGrid) .okul-auth__brand { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Kısa ekranlarda (≤ 800 px) resimli şifrenin yardım satırı gizlenir (aynı bilgi öğretmenin verdiği giriş kartında da var) */
@media (max-height: 800px) {
  .okul-giris #paneStu:has(#ppGrid) .okul-pinhelp { display: none; }
  .okul-giris #paneStu:has(#ppGrid) .okul-pinswitch .v2-btn { min-height: 40px; padding-block: 6px; }
  .okul-giris #paneStu:has(#ppGrid) .okul-steps { margin-bottom: 4px; }
}
/* Çok kısa görünür alan (≤ 700 px; ör. 1366 × 768 dizüstünde tarayıcı çubuklarıyla ~650 px): PIN adımında adım göstergesi gizlenir
   (öğrenci zaten 3. adımda, "Geri" görünür), sekmeler incelir */
@media (max-height: 700px) {
  .okul-giris .okul-auth:has(#pinDots, #ppGrid) .okul-tabs > button { min-height: 44px; padding-block: 4px; }
  .okul-giris #paneStu:has(#pinDots, #ppGrid) .okul-steps { display: none; }
  .okul-giris #paneStu:has(#pinDots, #ppGrid) #pinTitle { margin: 2px 0 !important; }
}
/* ≤ 680 px: resimli şifre ızgarası 4 sütun (12 düğme 3 satıra iner; resimler numaralı ve etiketli), üst boşluk kısalır */
@media (max-height: 680px) {
  .okul-login--sahne { padding-top: 6px !important; }
  .okul-giris #paneStu .sb-ppin__grid { grid-template-columns: repeat(4, minmax(64px, 96px)); }
}