/* ==========================================================
   Öğretmen girişi ve paneli — "Pusula" teması
   ========================================================== */

/* ---------- Giriş sayfası ---------- */

.giris-govde {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 20px;
    background:
        radial-gradient(ellipse 60% 60% at 20% 0%, var(--teal-soluk) 0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 90% 100%, var(--amber-soluk) 0%, transparent 55%);
}

.giris-sarmal { width: 100%; max-width: 440px; }

.giris-marka {
    display: flex; justify-content: center;
    margin-bottom: 20px; font-size: 20px;
}

.giris-kart {
    background: var(--beyaz);
    border: 1px solid var(--cizgi);
    border-radius: var(--r);
    box-shadow: var(--golge);
    overflow: hidden;
}

/* Kart tepesi — tek başlık, sekme adını tekrar etmez */
.giris-tepe {
    padding: 26px 26px 18px;
    text-align: center;
    background: linear-gradient(180deg, var(--teal-soluk) 0%, #fff 100%);
}
.giris-tepe h1 {
    font-family: var(--display); font-weight: 600; font-size: 22px;
    color: var(--lacivert); margin: 0 0 5px; letter-spacing: -.01em;
}
.giris-tepe p { margin: 0; font-size: 13.5px; color: var(--gri); line-height: 1.5; }

/* Sekmeler — bölmeli düğme (segmented control) */
.giris-sekme {
    display: flex; gap: 4px;
    margin: 0 26px;
    padding: 4px;
    background: var(--duman);
    border-radius: 999px;
}
.gs {
    flex: 1;
    font-family: var(--govde); font-size: 13.5px; font-weight: 600;
    color: var(--gri);
    background: transparent;
    border: 0; border-radius: 999px;
    padding: 10px 12px; cursor: pointer;
    transition: color .15s, background .15s, box-shadow .15s;
}
.gs:hover { color: var(--lacivert); }
.gs.etkin {
    color: var(--teal-koyu);
    background: #fff;
    box-shadow: 0 1px 3px rgba(22,39,58,.10);
}

/* Form alanı — tek ve tutarlı iç boşluk */
.giris-icerik { padding: 20px 26px 26px; }
.giris-icerik .form-mesaj { margin-bottom: 16px; }

.google-dugme {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%;
    font-family: var(--govde); font-size: 14.5px; font-weight: 600;
    color: var(--lacivert);
    background: #fff; border: 1.5px solid var(--cizgi-koyu);
    padding: 12px; border-radius: 10px;
    text-decoration: none;
    transition: all .14s;
}
.google-dugme:hover { color: var(--lacivert); background: var(--duman); border-color: var(--gri-acik); }

.ayirac {
    display: flex; align-items: center; gap: 12px;
    margin: 18px 0; color: var(--gri-acik); font-size: 12px;
    white-space: nowrap;
}
.ayirac::before, .ayirac::after {
    content: ''; flex: 1; height: 1px; background: var(--cizgi);
}

/* Alanlar arası nefes payı */
#bolumGiris .alan, #bolumKayit .alan { margin-bottom: 14px; }
#bolumGiris .btn-buyuk, #bolumKayit .btn-buyuk { margin-top: 4px; }

.alan-ipuc { display: block; font-size: 11.5px; color: var(--gri-acik); margin-top: 5px; }
.alan-sec {
    width: 100%; font-family: var(--govde); font-size: 15px;
    padding: 12px 14px; color: var(--lacivert); background: var(--buz);
    border: 1.5px solid var(--cizgi); border-radius: 10px; cursor: pointer;
}
.alan-sec:focus { outline: none; background: #fff; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-soluk); }
.alan textarea {
    width: 100%; font-family: var(--govde); font-size: 14.5px;
    padding: 11px 14px; color: var(--lacivert); background: var(--buz);
    border: 1.5px solid var(--cizgi); border-radius: 10px; resize: vertical;
}
.alan textarea:focus { outline: none; background: #fff; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-soluk); }

.giris-not {
    margin: 18px 0 0; text-align: center;
    font-size: 12.5px; color: var(--gri); line-height: 1.5;
}

/* ---------- Panel ---------- */

.ogretmen-ad {
    font-size: 13px; color: var(--gri-koyu); font-weight: 500;
    padding: 0 4px 0 10px; border-left: 1px solid var(--cizgi); margin-left: 4px;
}

.panel-sarmal { padding-top: 32px; padding-bottom: 60px; }

.panel-baslik-satir {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.panel-baslik-satir h1 {
    font-family: var(--display); font-weight: 600; font-size: 28px;
    color: var(--lacivert); margin: 0 0 4px; letter-spacing: -.02em;
}
.panel-alt-metin { margin: 0; font-size: 14px; color: var(--gri); }
.panel-alt-metin span { font-family: var(--veri); color: var(--teal-koyu); font-weight: 600; }

.panel-arac { margin-bottom: 18px; max-width: 380px; }

/* öğrenci kartları */
.ogr-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.ogr-kart {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--r);
    padding: 18px;
    box-shadow: var(--golge-yumusak);
    transition: box-shadow .15s, border-color .15s;
}
.ogr-kart:hover { box-shadow: var(--golge); border-color: var(--teal-cizgi); }

.ogr-ust { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.ogr-bas-harf {
    display: grid; place-items: center;
    width: 42px; height: 42px; flex-shrink: 0;
    font-family: var(--display); font-size: 17px; font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-koyu));
    border-radius: 12px;
}
.ogr-kimlik { min-width: 0; flex: 1; }
.ogr-ad {
    font-family: var(--display); font-weight: 600; font-size: 16px;
    color: var(--lacivert); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ogr-alt { font-size: 12.5px; color: var(--gri); margin-top: 2px; }

.ogr-menu { position: relative; flex-shrink: 0; }
.ogr-menu-dugme {
    width: 30px; height: 30px; display: grid; place-items: center;
    color: var(--gri-acik); background: transparent;
    border: 0; border-radius: 8px; cursor: pointer;
}
.ogr-menu-dugme:hover { color: var(--lacivert); background: var(--duman); }

.ogr-olcum { display: flex; gap: 18px; margin-bottom: 14px; }
.ogr-olcum div { min-width: 0; }
.ogr-olcum .ad {
    font-size: 10px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--gri-acik);
}
.ogr-olcum .deger {
    font-family: var(--veri); font-size: 15px; color: var(--lacivert); margin-top: 2px;
}
.ogr-olcum .deger.bos { color: var(--gri-acik); }

.ogr-eylem { display: flex; gap: 8px; }
.ogr-eylem .btn { flex: 1; }

.ogr-not {
    margin: 0 0 12px; padding: 9px 12px;
    background: var(--buz); border-radius: 9px;
    font-size: 12.5px; color: var(--gri-koyu); line-height: 1.45;
}

.ogr-bos {
    padding: 60px 24px; text-align: center;
    background: var(--kart); border: 1px dashed var(--cizgi-koyu); border-radius: var(--r);
}
.ogr-bos h3 {
    font-family: var(--display); font-weight: 600; font-size: 19px;
    color: var(--lacivert); margin: 14px 0 6px;
}
.ogr-bos p { margin: 0 0 18px; font-size: 14px; color: var(--gri); }

/* öğrenci kipinde tercih ekranı bandı */
.ogrenci-bandi {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 11px 20px;
    background: linear-gradient(135deg, var(--teal-soluk), var(--amber-soluk));
    border-bottom: 1px solid var(--cizgi);
    font-size: 13.5px; color: var(--lacivert);
}
.ogrenci-bandi b { font-family: var(--display); font-weight: 600; }
.ogrenci-bandi .ob-sag { display: flex; align-items: center; gap: 10px; }
.ogrenci-bandi .ob-etiket {
    font-family: var(--veri); font-size: 11px;
    color: var(--teal-koyu); background: #fff;
    padding: 3px 9px; border-radius: 999px; border: 1px solid var(--teal-cizgi);
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Üçlü alan satırı (sınıf / puan türü / sıra) */
.form-uclu { display: flex; gap: 12px; }
.form-uclu .alan { flex: 1; min-width: 0; }
@media (max-width: 460px) {
    .form-uclu { flex-wrap: wrap; }
    .form-uclu .alan { flex: 1 1 46%; }
}

/* Şifremi unuttum bağlantısı */
.unuttum-satir { display: flex; justify-content: flex-end; margin: -6px 0 14px; }
.baglanti-dugme {
    font-family: var(--govde); font-size: 12.5px; font-weight: 500;
    color: var(--teal-koyu); background: none; border: 0;
    cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.baglanti-dugme:hover { background: var(--teal-soluk); }

/* ---------- Tercih şablonları ---------- */

.sablon-bolum { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--cizgi); }
.sablon-baslik {
    font-family: var(--display); font-weight: 600; font-size: 22px;
    color: var(--lacivert); margin: 0 0 4px; letter-spacing: -.01em;
}

.sablon-izgara {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px;
}
.sablon-kart {
    background: var(--kart); border: 1px solid var(--cizgi);
    border-left: 3px solid var(--amber);
    border-radius: var(--r); padding: 16px 16px 14px;
    box-shadow: var(--golge-yumusak);
    transition: box-shadow .15s;
}
.sablon-kart:hover { box-shadow: var(--golge); }
.sablon-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sablon-kimlik { min-width: 0; }
.sablon-ad {
    font-family: var(--display); font-weight: 600; font-size: 15px;
    color: var(--lacivert); line-height: 1.25;
}
.sablon-aciklama { font-size: 12.5px; color: var(--gri); margin-top: 3px; }
.sablon-sayi {
    font-family: var(--veri); font-size: 12px; color: var(--amber-koyu);
    background: var(--amber-soluk); display: inline-block;
    padding: 3px 9px; border-radius: 999px; margin: 10px 0 12px;
}
.sablon-bos {
    padding: 26px; text-align: center;
    background: var(--kart); border: 1px dashed var(--cizgi-koyu); border-radius: var(--r);
}
.sablon-bos p { margin: 0; font-size: 13.5px; color: var(--gri); line-height: 1.55; }

/* Uygula penceresi */
.uy-kip { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.uy-secim {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 13px; border: 1.5px solid var(--cizgi); border-radius: 10px;
    cursor: pointer; font-size: 13.5px; color: var(--gri-koyu); line-height: 1.4;
}
.uy-secim:hover { border-color: var(--teal-cizgi); background: var(--teal-soluk); }
.uy-secim input { margin-top: 2px; accent-color: var(--teal); }
.uy-secim b { color: var(--lacivert); font-size: 13.5px; }
.uy-secim small { color: var(--gri); font-size: 12px; }

.uy-ogrenci-ust {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.uy-ogrenci-ust > span { font-size: 12.5px; font-weight: 600; color: var(--gri-koyu); }

.uy-ogrenciler {
    max-height: 220px; overflow-y: auto;
    border: 1px solid var(--cizgi); border-radius: 10px; margin-bottom: 16px;
}
.uy-ogrenci {
    display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center;
    padding: 9px 12px; border-bottom: 1px solid var(--cizgi); cursor: pointer; font-size: 13.5px;
}
.uy-ogrenci:last-child { border-bottom: 0; }
.uy-ogrenci:hover { background: var(--teal-soluk); }
.uy-ogrenci input { accent-color: var(--teal); }
.uy-ad { color: var(--lacivert); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uy-bilgi { font-size: 12px; color: var(--gri); white-space: nowrap; }
.uy-mevcut { font-family: var(--veri); font-size: 11px; color: var(--gri-acik); white-space: nowrap; }
.uy-bos { padding: 22px; text-align: center; color: var(--gri-acik); font-size: 13px; }

/* Uygula penceresinde şablon önizlemesi */
.uy-onizleme-kutu {
    border: 1px solid var(--cizgi); border-radius: 10px;
    margin-bottom: 18px; overflow: hidden;
}
.uy-onizleme-ust {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px; background: var(--buz); border-bottom: 1px solid var(--cizgi);
}
.uy-onizleme-ust > span { font-size: 12.5px; font-weight: 600; color: var(--gri-koyu); }
.uy-onizleme {
    list-style: none; counter-reset: uyt; margin: 0; padding: 0;
    max-height: 170px; overflow-y: auto;
}
.uy-onizleme li {
    counter-increment: uyt;
    display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: baseline;
    padding: 8px 12px; border-bottom: 1px solid var(--cizgi); font-size: 13px;
}
.uy-onizleme li:last-child { border-bottom: 0; }
.uy-onizleme li::before {
    content: counter(uyt) '.'; font-family: var(--veri); font-size: 11.5px;
    color: var(--teal-koyu); font-weight: 600;
}
.uy-t-ad { font-weight: 600; color: var(--lacivert); }
.uy-t-uni { display: block; grid-column: 2; font-size: 11.5px; color: var(--gri); }
.uy-t-sira { font-family: var(--veri); font-size: 11.5px; color: var(--gri); }
.uy-yukleniyor { display: block !important; padding: 16px; text-align: center; color: var(--gri-acik); font-size: 12.5px; }
.uy-yukleniyor::before { content: '' !important; }
.alan { display: block; margin-bottom: 16px; }
.alan > span { display: block; font-size: 12.5px; font-weight: 600; color: var(--gri-koyu); margin-bottom: 7px; }
.alan > span em { color: var(--gri-acik); font-style: normal; font-weight: 400; }
.alan input { width: 100%; font-family: var(--govde); font-size: 15px; padding: 12px 14px; color: var(--lacivert); background: var(--buz); border: 1.5px solid var(--cizgi); border-radius: 10px; transition: border-color .15s, box-shadow .15s, background .15s; }
.alan input:focus { outline: none; background: #fff; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-soluk); }
.alan input.hatali { border-color: var(--kirmizi); box-shadow: 0 0 0 4px var(--kirmizi-soluk); }
.arama-kutu{
    position: relative;
    width: 100%;
}

.arama-kutu input{
    width: 100%;
    height: 42px;
    padding: 0 14px 0 42px; /* Sol tarafta ikon için boşluk */
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    outline: none;
}

.arama-kutu .arama-ikon{
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a94a6;
    pointer-events: none; /* İkona tıklanınca input odaklanır */
}
/* 2026-07 — Öğrenci listesi görünüm seçici ve hızlı paylaşım */
.panel-arac-genis{max-width:none;display:flex;align-items:center;justify-content:space-between;gap:14px}
.panel-arac-genis .arama-kutu{max-width:440px}
.gorunum-secici{display:inline-flex;align-items:center;gap:4px;padding:4px;background:#eef3f6;border:1px solid var(--cizgi);border-radius:12px}
.gorunum-btn{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--gri-koyu);font:600 12.5px var(--govde);padding:8px 11px;border-radius:9px;cursor:pointer}
.gorunum-btn:hover{color:var(--lacivert)}
.gorunum-btn.etkin{background:#fff;color:var(--teal-koyu);box-shadow:0 3px 10px rgba(22,39,58,.08)}

.ogr-izgara.gorunum-liste{grid-template-columns:1fr;gap:10px}
.ogr-izgara.gorunum-liste .ogr-kart{display:grid;grid-template-columns:minmax(220px,1.3fr) minmax(180px,.8fr) minmax(410px,1.7fr);align-items:center;gap:16px;padding:13px 15px;min-height:78px}
.ogr-izgara.gorunum-liste .ogr-ust{margin:0;align-items:center}
.ogr-izgara.gorunum-liste .ogr-bas-harf{width:46px;height:46px;border-radius:14px}
.ogr-izgara.gorunum-liste .ogr-not{display:none}
.ogr-izgara.gorunum-liste .ogr-olcum{margin:0;gap:28px;justify-content:flex-start}
.ogr-izgara.gorunum-liste .ogr-eylem{margin:0;justify-content:flex-end;flex-wrap:wrap}
.ogr-izgara.gorunum-liste .ogr-eylem .btn{flex:0 0 auto;white-space:nowrap}
.ogr-izgara.gorunum-liste .ogr-menu{margin-left:auto}
.ogr-izgara.gorunum-kart .ogr-eylem{flex-wrap:wrap}
.ogr-izgara.gorunum-kart .ogr-eylem .btn{min-width:calc(50% - 4px)}

.ogr-arac-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:7px 10px;border:1px solid var(--cizgi);border-radius:9px;background:#fff;color:var(--lacivert);font:650 11.5px var(--govde);cursor:pointer;text-decoration:none;transition:.15s}
.ogr-arac-btn:hover{border-color:var(--teal-cizgi);background:var(--teal-soluk);color:var(--teal-koyu)}
.ogr-arac-btn.ana{background:var(--teal);border-color:var(--teal);color:#fff}
.ogr-arac-btn.ana:hover{background:var(--teal-koyu)}
.ogr-arac-btn.wa{color:#127c43}
.ogr-arac-btn.uyari{color:#9a5d12;background:#fffaf0}
.ogr-kota-mini{display:inline-flex;align-items:center;gap:4px;margin-left:4px;padding:2px 6px;border-radius:999px;background:#eef4f5;color:var(--teal-koyu);font:700 10px var(--veri)}
.ogr-iletisim-eksik{color:#a96b16;font-size:11px;margin-top:3px}

.op-paylas-pencere{width:min(520px,calc(100% - 28px));padding:16px}
.op-mini-etiket{display:inline-flex;padding:5px 9px;border-radius:999px;background:var(--teal-soluk);color:var(--teal-koyu);font:700 11px var(--govde);margin-bottom:8px}
.op-paylas-ipuclari{font-size:12px;color:var(--gri);margin:-5px 0 14px}
.op-paylas-alt{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-top:14px}

@media(max-width:1120px){
 .ogr-izgara.gorunum-liste .ogr-kart{grid-template-columns:minmax(220px,1fr) auto}
 .ogr-izgara.gorunum-liste .ogr-olcum{grid-column:1;grid-row:2}
 .ogr-izgara.gorunum-liste .ogr-eylem{grid-column:2;grid-row:1/3}
}
@media(max-width:760px){
 .panel-arac-genis{align-items:stretch;flex-direction:column}
 .panel-arac-genis .arama-kutu{max-width:none}
 .gorunum-secici{align-self:flex-start}
 .ogr-izgara.gorunum-liste .ogr-kart{display:block;padding:15px}
 .ogr-izgara.gorunum-liste .ogr-ust{margin-bottom:12px}
 .ogr-izgara.gorunum-liste .ogr-olcum{margin-bottom:12px}
 .ogr-izgara.gorunum-liste .ogr-eylem{justify-content:flex-start}
 .ogr-izgara.gorunum-liste .ogr-eylem .ogr-arac-btn{flex:1 1 calc(50% - 4px)}
}
.ogr-iletisim{font-size:10.8px;color:var(--gri);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-dugme{color: #ffffff;background: #eb0400;}