/* ═══════════════════════════════════════════════════════════════════════
   GİRİŞ KABUĞU (.gk-) — personel / veli / öğrenci girişi + veli parola sıfırlama
   Tasarım 2 (22.09.2026): iki sütun. Solda Qolej'in lacivert marka paneli (büyük
   beyaz amblem, kapıya göre rol etiketi + manşet + tek cümle); sağda okulun
   logosu (alan adından; ortada, dosya olduğu gibi) ve giriş formu.
   Bütün etkileşim rengi tek: sol paneldeki lacivert (--gk-lacivert). Marka
   temaları (--birincil vb.) formu etkilemez; yalnız Kalev'in beyaz logosu kendi
   koyu kutusunda gösterilir. Eski .giris-* kuralları stil.css'te kalır.
   ═══════════════════════════════════════════════════════════════════════ */

body.giris{
  --gk-lacivert:#101E3C; --gk-lacivert-koyu:#0B1530; --gk-lacivert-ring:0 0 0 4px rgba(16,30,60,.16);
  --gk-zemin:#F4F6FB; --gk-ayrac:#DEE3F0;
  min-height:100vh;margin:0;background:var(--gk-zemin);color:var(--murekkep);
  font-size:.875rem;line-height:1.5}
body.giris :focus-visible{outline:2px solid var(--gk-lacivert);outline-offset:2px}
.gk-sprite{position:absolute;width:0;height:0;overflow:hidden}
.gk-ikon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}

/* ── Yerleşim: sol marka paneli 5/12, sağ form 7/12 ── */
.gk-yerlesim{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:100vh;max-width:100vw;overflow-x:hidden}

.gk-marka-panel{position:relative;overflow:hidden;background:var(--gk-lacivert);color:#fff;
  padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between}
.gk-marka-panel::after{content:"";position:absolute;right:-120px;bottom:-160px;width:460px;height:460px;
  border-radius:50%;border:56px solid rgba(255,255,255,.05);pointer-events:none}
.gk-amblem{position:relative;display:flex;align-items:center;min-height:84px}
.gk-amblem svg{width:84px;height:84px;flex:none;filter:drop-shadow(0 12px 24px rgba(0,0,0,.25))}
.gk-marka-ad{display:none}   /* yalnız telefon şeridinde */
.gk-metin{position:relative}
.gk-rol{margin:0 0 10px;font:600 13px/1.3 var(--font-govde);color:rgba(255,255,255,.72)}
.gk-manset{margin:0;font:800 clamp(26px,3.2vw,38px)/1.08 var(--font-baslik);letter-spacing:-.025em;
  color:#fff;max-width:14ch;text-wrap:balance}
.gk-cumle{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.78);max-width:34ch}
.gk-telif{position:relative;margin:0;font-size:12px;color:rgba(255,255,255,.6)}

.gk-sutun{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(24px,4vw,48px);min-width:0}
.gk-kart{width:100%;max-width:440px;min-width:0}

/* ── Okul bağlamı: logo YOK (26.09.2026) — yalnız okul adı, küçük etiket; kimlik Qolej'dir ── */
.gk-tel-bilgi{display:none}   /* yalnız telefonda: kapı bilgilendirmesi + okul adı giriş düğmesinin altında */
.gk-okul{display:flex;justify-content:center;margin:0 auto 18px;width:fit-content;max-width:100%;
  padding:6px 14px;border:1px solid var(--gk-ayrac);border-radius:999px;background:#fff}
.gk-okul-ad{display:block;min-width:0;font:600 13.5px/1.3 var(--font-baslik);color:var(--gk-lacivert);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.gk-baslik{margin:0;text-align:center;font:800 26px/1.15 var(--font-baslik);
  letter-spacing:-.02em;color:var(--gk-lacivert)}
.gk-aciklama{margin:6px 0 20px;text-align:center;font-size:14px;line-height:1.5;color:var(--murekkep-3)}
.gk-aciklama:empty{display:none}
.gk-baslik:has(+ .gk-aciklama:empty){margin-bottom:20px}

/* ── Kapı sekmesi: Personel · Veli · Öğrenci (sayfa gezintisi, JS yok) — aktif kapı lacivert ── */
.gk-kapilar{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:4px;
  background:#fff;border:1.5px solid var(--gk-ayrac);border-radius:11px;margin:0 0 20px}
.gk-kapilar a{display:flex;align-items:center;justify-content:center;min-height:40px;
  padding:0 var(--sp-2);border-radius:8px;
  font:600 13px/1.2 var(--font-govde);color:var(--murekkep-2);text-decoration:none;
  transition:background var(--sure-1) var(--egri),color var(--sure-1) var(--egri)}
.gk-kapilar a:hover{background:var(--gk-zemin);color:var(--gk-lacivert);text-decoration:none}
.gk-kapilar a[aria-current=page]{background:var(--gk-lacivert);color:#fff}
.gk-kapilar a[aria-current=page]:hover{background:var(--gk-lacivert)}
.gk-kapilar a:focus-visible{outline-offset:-2px;outline-color:#fff}

/* Flash (stil.css .bildirim üstüne yalnız ölçü) */
.gk-kart .bildirim{margin:0 0 var(--sp-4);border-radius:var(--r-sm);box-shadow:none;
  font-size:var(--fs-base);line-height:1.45}

/* ── Alanlar ── */
.gk-form{margin:0}
.gk-alan{margin:0 0 var(--sp-4)}
.gk-alan label{display:block;margin:0 0 6px;font:600 12.5px/1.2 var(--font-govde);color:var(--murekkep)}
.gk-alan input{display:block;width:100%;min-height:46px;padding:0 14px;
  font:400 15px/1.2 var(--font-govde);color:var(--murekkep);background:#fff;
  border:1.5px solid var(--gk-ayrac);border-radius:9px;
  transition:border-color var(--sure-1) var(--egri),box-shadow var(--sure-1) var(--egri)}
.gk-alan input::placeholder{color:var(--murekkep-3)}
.gk-alan input:focus{outline:none;border-color:var(--gk-lacivert);box-shadow:var(--gk-lacivert-ring)}
.gk-alan input:focus-visible{outline:none}
.gk-alan input[aria-invalid=true]{border-color:var(--kotu)}
.gk-alan input:-webkit-autofill{-webkit-box-shadow:0 0 0 60px #fff inset;
  -webkit-text-fill-color:var(--murekkep);caret-color:var(--murekkep)}
.gk-alan-ipucu{display:block;margin:var(--sp-1) 0 0;font-size:var(--fs-sm);color:var(--murekkep-3)}

/* Şifre: sağda 40px göster/gizle ikon düğmesi */
.gk-parola-sar{position:relative}
.gk-parola-sar input{padding-right:56px}
.gk-goz{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  padding:0;border:0;border-radius:var(--r-xs);background:transparent;color:var(--murekkep-3);
  cursor:pointer;transition:background var(--sure-1) var(--egri),color var(--sure-1) var(--egri)}
.gk-goz:hover{background:var(--gk-zemin);color:var(--gk-lacivert)}
.gk-goz[aria-pressed=true]{color:var(--gk-lacivert)}
.gk-goz svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}

/* Parola sıfırlama kodu: 6 hane, büyük tabular */
.gk-alan input.gk-kod{font-family:var(--font-mono);font-size:var(--fs-2xl);font-weight:500;
  letter-spacing:.2em;font-variant-numeric:tabular-nums;text-align:center;min-height:56px;
  padding-left:calc(var(--sp-4) + .2em)}

/* Adımlar (veli_ilk_giris): tek kart, iki bölüm */
.gk-adim{margin:0 0 var(--sp-5);padding:0;border:0;min-width:0}
.gk-adim+.gk-adim{padding-top:var(--sp-5);border-top:1px solid var(--gk-ayrac)}
.gk-adim legend{padding:0;margin:0 0 var(--sp-3);font:700 var(--fs-xs)/1 var(--font-govde);
  letter-spacing:.06em;text-transform:uppercase;color:var(--gk-lacivert)}
.gk-adim legend span{display:block;margin-top:var(--sp-1);letter-spacing:0;text-transform:none;
  font:700 var(--fs-md)/1.3 var(--font-baslik);color:var(--murekkep)}

/* ── Beni hatırla + yardım bağlantısı aynı satırda ── */
.gk-satir{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin:0 0 var(--sp-4);font-size:12.5px;color:var(--murekkep-2)}
.gk-hatirla{display:flex;align-items:center;gap:8px;cursor:pointer}
.gk-hatirla input{width:18px;height:18px;margin:0;accent-color:var(--gk-lacivert);cursor:pointer}
.gk-satir a{color:var(--gk-lacivert);font-weight:600;text-decoration:none}
.gk-satir a:hover{text-decoration:underline}

/* ── Birincil düğme: 48px tam genişlik, lacivert ── */
.gk-kart .dugme.gk-lg{width:100%;min-height:48px;margin-top:2px;
  background:var(--gk-lacivert);border-color:var(--gk-lacivert);color:#fff;
  font:700 15px/1 var(--font-govde);border-radius:9px;
  transition:background var(--sure-1) var(--egri)}
.gk-kart .dugme.gk-lg:hover{background:var(--gk-lacivert-koyu);border-color:var(--gk-lacivert-koyu)}
.gk-kart .dugme.gk-lg:focus-visible{outline:2px solid var(--gk-lacivert);outline-offset:2px;box-shadow:none}
.gk-kart .dugme.gk-lg[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* ── İlk şifre notu, yardım satırı ve imza ── */
.gk-uyari{margin:14px 0 0;padding:10px 12px;border-radius:9px;background:#E9EDFF;
  font-size:12.5px;line-height:1.5;color:var(--murekkep-2)}
.gk-yardim{margin:var(--sp-4) 0 0;text-align:center;font-size:var(--fs-sm);
  line-height:1.6;color:var(--murekkep-3)}
.gk-yardim a{color:var(--gk-lacivert);font-weight:600}
.gk-geri{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:32px}
/* Alt bilgi: tek blok — üstte (yalnız uygulamadan gelindiyse) "Bu cihaz <okul>'nı hatırlıyor" + sağda
   "Okulu değiştir"; altta imza satırı. Telefonda blok ince çizgiyle formdan ayrılır. */
.gk-alt{display:flex;flex-direction:column;width:100%;max-width:440px;margin:var(--sp-5) auto 0}
.gk-imza{margin:0;text-align:center;font-size:var(--fs-sm);color:var(--murekkep-3)}
.gk-cihaz{order:-1;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin:0 0 var(--sp-2);text-align:left;line-height:1.5;color:var(--murekkep-2)}
.gk-cihaz[hidden]{display:none}
.gk-cihaz b{font-weight:600;color:var(--murekkep)}
.gk-cihaz a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0;
  color:#2B4BDF;font-weight:600;text-decoration:none;white-space:nowrap}
.gk-cihaz a:hover{text-decoration:underline}

/* ── Dar ekran: marka paneli üstte kısa bant, form altta ── */
@media (max-width:860px){
  /* ── Telefon: TAM LACİVERT tema (26.09.2026, seçenek A). Ekranın kimliği Qolej: üstte beyaz kutulu
     amblem + "Qolej"; okul, yarı saydam küçük rozet (bağlam). Manşet/pazarlama cümlesi/rol etiketi yok.
     Girdiler beyaz (lacivert metin), birincil düğme beyaz (lacivert yazı), bağlantılar açık kobalt.
     Renkler: lacivert #101E3C → koyu #0B1530 dikey geçiş; beyaz kademeleri --gk-b70/--gk-b55. ── */
  body.giris{--gk-b85:rgba(255,255,255,.85);--gk-b70:rgba(255,255,255,.72);--gk-b55:rgba(255,255,255,.55);
    --gk-cam:rgba(255,255,255,.08);--gk-cam-cizgi:rgba(255,255,255,.14);--gk-kobalt-ak:#9DB0FF;
    background:linear-gradient(180deg,#101E3C 0%,#0B1530 100%) fixed;color:#fff;
    font-family:var(--font-baslik)}
  .gk-yerlesim{grid-template-columns:minmax(0,1fr);min-height:100vh;min-height:100dvh;grid-template-rows:auto 1fr;background:transparent}
  .gk-marka-panel{flex-direction:row;align-items:center;justify-content:center;gap:0;
    min-height:104px;padding:calc(28px + env(safe-area-inset-top,0)) 16px 8px;box-sizing:border-box;background:transparent}
  .gk-marka-panel::after{display:none}
  .gk-amblem{min-height:0;gap:14px}
  .gk-amblem svg{width:64px;height:64px;filter:none}
  .gk-marka-ad{display:inline;font:800 36px/1 var(--font-baslik);letter-spacing:-.02em;color:#fff}
  /* Logo en üstte, altında seçili kapının (Veli/Öğrenci/Personel) bilgilendirmesi; manşet ve telif gizli */
  .gk-marka-panel{flex-direction:column}
  .gk-metin{display:none}   /* telefonda bilgilendirme .gk-tel-bilgi ile giriş düğmesinin altında */
  .gk-manset,.gk-telif{display:none}
  .gk-rol{margin:0;font:700 15px/1.3 var(--font-baslik);letter-spacing:0;text-transform:none;color:#fff}
  .gk-cumle{margin:4px 0 0;font:500 14px/1.5 var(--font-baslik);color:var(--gk-b70)}
  .gk-sutun{justify-content:flex-start;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0))}
  /* Telefonda üstteki okul etiketi gizli; okul adı düğmenin altındaki bilgi bloğunda */
  .gk-okul{display:none}
  .gk-tel-bilgi{display:block;margin:28px auto 0;max-width:34ch;text-align:center}
  .gk-tel-rol{margin:0;font:700 15px/1.3 var(--font-baslik);color:#fff}
  .gk-tel-cumle{margin:4px 0 0;font:500 14px/1.5 var(--font-baslik);color:var(--gk-b70)}
  .gk-tel-okul{margin:14px 0 0}
  .gk-tel-okul span{display:inline-flex;align-items:center;min-height:34px;padding:6px 16px;box-sizing:border-box;max-width:100%;
    border:1px solid var(--gk-cam-cizgi);border-radius:999px;background:var(--gk-cam);font:600 14px/1.3 var(--font-baslik);color:#fff}
  .gk-baslik{color:#fff}
  .gk-aciklama{color:var(--gk-b70)}
  .gk-aciklama:empty{display:none}
  .gk-kapilar{background:var(--gk-cam);border-color:var(--gk-cam-cizgi)}
  .gk-kapilar a{color:var(--gk-b85)}
  .gk-kapilar a:hover{background:rgba(255,255,255,.12);color:#fff}
  .gk-kapilar a[aria-current=page],.gk-kapilar a[aria-current=page]:hover{background:#fff;color:var(--gk-lacivert)}
  .gk-kapilar a:focus-visible{outline-color:var(--gk-kobalt-ak)}
  .gk-alan label{color:#fff}
  .gk-alan input{border-color:transparent;font-family:var(--font-baslik);font-size:16px}
  .gk-alan input:focus{border-color:var(--gk-kobalt-ak);box-shadow:0 0 0 4px rgba(43,75,223,.55)}
  .gk-alan input[aria-invalid=true]{border-color:#FF8A80}
  .gk-alan-ipucu{color:var(--gk-b70)}
  .gk-adim+.gk-adim{border-top-color:var(--gk-cam-cizgi)}
  .gk-adim legend{color:var(--gk-kobalt-ak)}
  .gk-adim legend span{color:#fff}
  .gk-satir,.gk-hatirla{color:var(--gk-b85)}   /* label stil.css'ten murekkep-2 alıyordu (2:1) */
  .gk-hatirla input{accent-color:#fff}
  .gk-satir a,.gk-yardim a{color:var(--gk-kobalt-ak)}
  .gk-yardim{color:var(--gk-b70)}
  .gk-kart .dugme.gk-lg{background:#fff;border-color:#fff;color:var(--gk-lacivert);font-family:var(--font-baslik)}
  .gk-kart .dugme.gk-lg:hover{background:#E9EDFF;border-color:#E9EDFF}
  .gk-kart .dugme.gk-lg:focus-visible{outline-color:var(--gk-kobalt-ak)}
  .gk-kart .dugme.gk-lg[disabled]{opacity:.55}
  .gk-uyari{background:var(--gk-cam);border:1px solid var(--gk-cam-cizgi);color:var(--gk-b85)}
  .gk-kart .bildirim{border:1px solid var(--gk-cam-cizgi)}
  .gk-kart .bildirim.hata{background:rgba(240,104,92,.18);color:#FFD2CD}
  .gk-kart .bildirim.basari{background:rgba(52,199,123,.16);color:#BFF2D4}
  .gk-kart .bildirim.bilgi,.gk-kart .bildirim.uyari{background:var(--gk-cam);color:var(--gk-b85)}
  body.giris :focus-visible{outline-color:var(--gk-kobalt-ak)}
  /* Alt bilgi: ince yarı saydam çizgi, hatırlama satırı + imza */
  .gk-alt{margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--gk-cam-cizgi)}
  .gk-kart{padding-bottom:var(--sp-5)}
  .gk-cihaz{color:var(--gk-b70)}
  .gk-cihaz b{color:#fff}
  .gk-cihaz a{color:var(--gk-kobalt-ak)}
  .gk-imza{color:var(--gk-b55)}
}
/* ── Dokunma hedefleri: 375px ve kaba işaretçide ≥44px ── */
@media(pointer:coarse),(max-width:640px){
  .gk-kapilar a{min-height:44px}
  .gk-goz{width:44px;height:44px;right:2px}
  .gk-parola-sar input{padding-right:60px}
  .gk-yardim a,.gk-geri{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-2)}
  /* Beni hatırla etiketi ve Şifremi unuttum bağlantısı: görsel boyut aynı, dokunma alanı satır yüksekliğiyle 44px */
  .gk-satir{margin-bottom:var(--sp-2)}
  .gk-hatirla{min-height:44px}
  .gk-satir a{display:inline-flex;align-items:center;min-height:44px}
}
/* ── tek-giris-t1 (26.10.2026): "İlk kez giriyorum" ikincil düğmesi; ilk giriş / kod / yeni parola / güvenlik kodu ekranları
   (prototip v4). Renkler giriş kabuğunun kendi lacivertinden; telefonda tam lacivert tema. ── */
.gk-kart .dugme.gk-ikincil{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:12px;
  background:#fff;border:1.5px solid var(--gk-ayrac);color:var(--gk-lacivert);font:700 15px/1 var(--font-govde);
  border-radius:9px;text-decoration:none}
.gk-kart .dugme.gk-ikincil:hover{border-color:var(--gk-lacivert);background:#fff;text-decoration:none}
.gk-kart .dugme.gk-ikincil[disabled]{opacity:.55;cursor:not-allowed}
.gk-uyari.gk-uyari--blok{margin:0 0 var(--sp-4)}
.gk-tc-uyari{margin:calc(-1 * var(--sp-2)) 0 var(--sp-4)}
.gk-kod-kutular{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0 0 var(--sp-2)}
.gk-kod-kutular input{width:100%;min-width:0;height:56px;margin:0;padding:0;text-align:center;
  font:800 22px/1 var(--font-govde);font-variant-numeric:tabular-nums;color:var(--murekkep);background:#fff;
  border:1.5px solid var(--gk-ayrac);border-radius:10px;-moz-appearance:textfield}
.gk-kod-kutular input:focus{outline:none;border-color:var(--gk-lacivert);box-shadow:var(--gk-lacivert-ring)}
.gk-kod-kutular input[aria-invalid=true]{border-color:var(--kotu)}
.gk-kod-satir{display:flex;align-items:center;min-height:44px;margin:0 0 var(--sp-3);font-size:13px;
  color:var(--murekkep-3);font-variant-numeric:tabular-nums}
.gk-metin-dugme{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;
  color:var(--gk-lacivert);font:600 14px/1.2 var(--font-govde);cursor:pointer}
.gk-metin-dugme:hover{text-decoration:underline}
.gk-kurallar{list-style:none;margin:0 0 var(--sp-4);padding:0;display:flex;flex-direction:column;gap:4px;
  font-size:13px;color:var(--murekkep-3)}
.gk-kurallar li{display:flex;align-items:center;gap:8px}
.gk-kurallar svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round}
.gk-kurallar li[data-tamam="1"]{color:#0F7A45}
.gk-not{margin:var(--sp-3) 0 0;text-align:center}
.gk-sayac--blok{display:block;margin:0 0 var(--sp-3);text-align:center;font-size:13px;color:var(--murekkep-3);
  font-variant-numeric:tabular-nums}
@media (max-width:860px){
  .gk-kart .dugme.gk-ikincil{background:transparent;border-color:rgba(255,255,255,.35);color:#fff;font-family:var(--font-baslik)}
  .gk-kart .dugme.gk-ikincil:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6)}
  .gk-kod-kutular input{border-color:transparent;font-family:var(--font-baslik)}
  .gk-kod-kutular input:focus{border-color:var(--gk-kobalt-ak);box-shadow:0 0 0 4px rgba(43,75,223,.55)}
  .gk-kod-satir,.gk-kurallar{color:var(--gk-b70)}
  .gk-kurallar li[data-tamam="1"]{color:#7EE2B0}
  .gk-metin-dugme{color:var(--gk-kobalt-ak)}
  .gk-sayac--blok{color:var(--gk-b70)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}