/* ============================================================
   Nova Point — Stil Dosyası (v2 — Modern SaaS Tema)
   Palet: sayfa zemini #F4F7FE, kart #FFFFFF, kenar çubuğu #1B2559,
          birincil vurgu #4318FF, açık vurgu #7551FF,
          metin #1B2559, soluk metin #707EAE,
          başarı #05CD99, uyarı #FFB547, tehlike #EE5D50, bilgi #3965FF
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    --zemin: #F4F7FE;
    --yuzey: #FFFFFF;
    --yuzey-2: #F4F7FE;
    --cizgi: #E9EDF7;
    --altin: #4318FF;
    --altin-acik: #7551FF;
    --metin: #1B2559;
    --metin-soluk: #707EAE;
    --basari: #05CD99;
    --uyari: #FFB547;
    --tehlike: #EE5D50;
    --bilgi: #3965FF;
    --radius: 16px;

    --kenar-bg: #1B2559;
    --kenar-bg-2: #111C44;
    --kenar-aktif: #2B3674;
    --kenar-metin: #FFFFFF;
    --kenar-metin-soluk: #A3AED0;

    --font-baslik: 'Inter', -apple-system, Segoe UI, sans-serif;
    --font-govde: 'Inter', -apple-system, Segoe UI, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;

    --golge: 0 4px 22px rgba(112, 126, 174, .12);
    --golge-buyuk: 0 8px 30px rgba(112, 126, 174, .16);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--zemin);
    color: var(--metin);
    font-family: var(--font-govde);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-baslik); font-weight: 700; margin: 0 0 .4em; letter-spacing: -.01em; color: var(--metin); }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1em; color: var(--metin-soluk); }
a { color: var(--altin); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--altin); outline-offset: 2px; }

/* ---------- Genel yerleşim: yan menü + içerik ---------- */
.uygulama { display: flex; min-height: 100vh; }

.yan-menu {
    width: 250px;
    flex-shrink: 0;
    background: var(--kenar-bg);
    background: linear-gradient(180deg, var(--kenar-bg), var(--kenar-bg-2));
    padding: 26px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.marka { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; padding: 0 10px; }
.marka .isaret {
    color: var(--kenar-bg);
    background: linear-gradient(155deg, var(--altin-acik), var(--altin));
    width: 34px; height: 34px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
}
.marka .ad { font-family: var(--font-baslik); font-size: 1.05rem; font-weight: 800; color: var(--kenar-metin); }
.marka .alt { display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--kenar-metin-soluk); margin-top: 1px; }

.menu { list-style: none; margin: 0; padding: 0; }
.menu li { margin-bottom: 3px; }
.menu a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 12px;
    color: var(--kenar-metin-soluk); font-size: .9rem; font-weight: 600;
}
.menu a svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .8; }
.menu a:hover { background: var(--kenar-aktif); color: #fff; text-decoration: none; }
.menu a:hover svg { opacity: 1; }
.menu a.aktif { background: linear-gradient(120deg, var(--altin-acik), var(--altin)); color: #fff; box-shadow: var(--golge); }
.menu a.aktif svg { opacity: 1; }

.icerik { flex: 1; min-width: 0; padding: 30px 34px 60px; max-width: 1120px; }

.ust-satir { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.ust-satir p.ust-not { margin: 4px 0 0; }

/* ---------- Kartlar ---------- */
.kart-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin-bottom: 26px; }
.stat-kart {
    background: var(--yuzey);
    border: 1px solid var(--cizgi); border-radius: var(--radius);
    padding: 20px 22px;
    box-shadow: var(--golge);
}
.stat-kart .etiket { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--metin-soluk); font-weight: 600; }
.stat-kart .deger { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 700; color: var(--metin); margin-top: 8px; }
.stat-kart.vurgu { background: linear-gradient(120deg, var(--altin-acik), var(--altin)); border-color: transparent; }
.stat-kart.vurgu .etiket { color: rgba(255,255,255,.75); }
.stat-kart.vurgu .deger { color: #fff; }

.panel {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--radius);
    padding: 24px 26px; margin-bottom: 22px;
    box-shadow: var(--golge);
}
.panel > h2, .panel > h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ---------- Cari hesap / bakiye kartı (imza öğe) ---------- */
.bakiye-karti {
    background: linear-gradient(135deg, var(--kenar-bg), var(--kenar-bg-2));
    border: none;
    border-radius: var(--radius);
    padding: 24px 26px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--golge-buyuk);
}
.bakiye-karti::before {
    content: ''; position: absolute; top: -40%; right: -10%; width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(117,81,255,.35), transparent 70%);
}
.bakiye-karti .baslik { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--kenar-metin-soluk); position: relative; }
.bakiye-karti .tutar { font-family: var(--font-mono); font-size: 2.1rem; font-weight: 700; margin: 8px 0 2px; position: relative; color: #fff; }
.bakiye-karti .tutar.borclu { color: #FF8B8B; }
.bakiye-karti .tutar.temiz { color: #6DECC3; }
.bakiye-karti .aciklama { font-size: .82rem; color: var(--kenar-metin-soluk); margin: 0; position: relative; }

/* ---------- Tablolar (defter görünümü) ---------- */
table { width: 100%; border-collapse: collapse; font-size: .89rem; }
th, td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--cizgi); }
th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--metin-soluk); font-weight: 700; }
tbody tr:hover { background: var(--zemin); }
td.sayi, th.sayi { font-family: var(--font-mono); text-align: right; }
.tablo-sarma { overflow-x: auto; }

/* ---------- Rozet / durum etiketleri ---------- */
.rozet {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 999px; font-size: .74rem; font-weight: 700;
    border: 1px solid transparent;
}
.rozet.basari { color: #05A97A; background: rgba(5,205,153,.12); border-color: rgba(5,205,153,.25); }
.rozet.tehlike { color: #D1382E; background: rgba(238,93,80,.12); border-color: rgba(238,93,80,.25); }
.rozet.uyari { color: #C97B00; background: rgba(255,181,71,.16); border-color: rgba(255,181,71,.3); }
.rozet.bilgi { color: var(--bilgi); background: rgba(57,101,255,.1); border-color: rgba(57,101,255,.22); }
.rozet.notr { color: var(--metin-soluk); background: #EDF0F8; border-color: var(--cizgi); }

/* ---------- Butonlar ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 18px; border-radius: 12px; border: 1px solid var(--cizgi);
    background: var(--yuzey); color: var(--metin); font-family: var(--font-govde);
    font-size: .86rem; font-weight: 700; cursor: pointer; text-decoration: none;
    transition: transform .12s, box-shadow .12s, background .15s;
}
.btn:hover { text-decoration: none; box-shadow: var(--golge); transform: translateY(-1px); }
.btn-altin { background: linear-gradient(120deg, var(--altin-acik), var(--altin)); border-color: transparent; color: #fff; }
.btn-altin:hover { box-shadow: 0 8px 20px rgba(67,24,255,.32); }
.btn-kucuk { padding: 6px 12px; font-size: .78rem; border-radius: 9px; }
.btn-tehlike { color: var(--tehlike); border-color: rgba(238,93,80,.35); background: rgba(238,93,80,.06); }
.btn-tehlike:hover { background: rgba(238,93,80,.14); }
.btn-yesil { background: var(--basari); border-color: var(--basari); color: #fff; }
.btn-grup { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Formlar ---------- */
label { display: block; font-size: .8rem; color: var(--metin-soluk); font-weight: 600; margin-bottom: 6px; }
input, select, textarea {
    width: 100%; padding: 11px 13px; border-radius: 11px; border: 1.5px solid var(--cizgi);
    background: var(--zemin); color: var(--metin); font-family: var(--font-govde); font-size: .92rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--altin); outline: none; background: var(--yuzey); }
.form-alan { margin-bottom: 16px; }
.form-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
textarea { resize: vertical; min-height: 70px; }

/* ---------- Bilgi mesajları ---------- */
.mesaj { padding: 13px 18px; border-radius: 13px; margin-bottom: 18px; font-size: .89rem; font-weight: 600; border: 1px solid; }
.mesaj.basari { background: rgba(5,205,153,.1); border-color: rgba(5,205,153,.3); color: #05A97A; }
.mesaj.hata { background: rgba(238,93,80,.1); border-color: rgba(238,93,80,.3); color: #D1382E; }

.bos-durum { text-align: center; padding: 34px 20px; color: var(--metin-soluk); }
.bos-durum p { max-width: 340px; margin: 6px auto 0; }

/* ---------- Giriş sayfaları (admin login / veli giriş) ---------- */
.giris-sayfa {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: radial-gradient(circle at 50% 0%, #EEF1FF 0%, var(--zemin) 60%);
}
.giris-kutu {
    width: 100%; max-width: 380px; background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: 22px; padding: 38px 32px; text-align: center;
    box-shadow: var(--golge-buyuk);
}
.giris-kutu .isaret {
    width: 52px; height: 52px; border-radius: 16px; margin: 0 auto 14px;
    background: linear-gradient(155deg, var(--altin-acik), var(--altin));
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem;
}
.giris-kutu h1 { font-size: 1.3rem; }
.giris-kutu .alt-baslik { font-size: .84rem; color: var(--metin-soluk); margin-bottom: 22px; }
.giris-kutu form { text-align: left; }
.giris-kutu .btn { width: 100%; margin-top: 6px; }
.giris-alt-link { margin-top: 18px; font-size: .82rem; }

/* ---------- Veli / Öğrenci paneli ---------- */
.veli-ust {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 22px; background: var(--yuzey); border-bottom: 1px solid var(--cizgi);
}
.veli-govde { max-width: 720px; margin: 0 auto; padding: 24px 18px 60px; }

/* ---------- İlerleme çubuğu ---------- */
.ilerleme-cubuk { background: var(--cizgi); border: none; border-radius: 999px; height: 9px; overflow: hidden; }
.ilerleme-cubuk .dolu { height: 100%; background: linear-gradient(90deg, var(--altin-acik), var(--altin)); border-radius: 999px; transition: width .3s; }
.ilerleme-satir { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; font-size: .82rem; color: var(--metin-soluk); }
.ilerleme-satir strong { color: var(--metin); font-family: var(--font-mono); }

/* ---------- Bugün kartı (öğrenci ana sayfa) ---------- */
.bugun-karti {
    background: linear-gradient(135deg, var(--altin-acik), var(--altin));
    border: none; border-radius: var(--radius);
    padding: 24px 26px; margin: 20px 0;
    box-shadow: var(--golge-buyuk);
    color: #fff;
}
.bugun-karti > h2 { margin-bottom: 4px; color: #fff; }
.bugun-karti .alt { color: rgba(255,255,255,.8); font-size: .88rem; margin: 0 0 16px; }
.gorev-satiri { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.bugun-karti .gorev-satiri { border-bottom-color: rgba(255,255,255,.18); }
.gorev-satiri:last-child { border-bottom: none; }
.gorev-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--altin); flex-shrink: 0; margin-top: 7px; }
.gorev-satiri .metin { flex: 1; }
.gorev-satiri .baslik { font-weight: 700; color: var(--metin); font-size: .93rem; }
.bugun-karti .gorev-satiri .baslik { color: #fff; }
.gorev-satiri .detay { color: var(--metin-soluk); font-size: .8rem; margin-top: 2px; }
.bugun-karti .gorev-satiri .detay { color: rgba(255,255,255,.75); }

/* ---------- Öğrenci/Veli portalı sekme menüsü ---------- */
.ogrenci-sekmeler {
    display: flex; gap: 6px; overflow-x: auto; padding: 12px 18px;
    background: var(--yuzey); border-bottom: 1px solid var(--cizgi);
}
.ogrenci-sekmeler a {
    flex-shrink: 0; padding: 8px 15px; border-radius: 999px; font-size: .84rem; font-weight: 700;
    color: var(--metin-soluk);
    display: inline-flex; align-items: center; gap: 7px;
}
.ogrenci-sekmeler a svg { width: 16px; height: 16px; opacity: .75; }
.ogrenci-sekmeler a.aktif svg, .ogrenci-sekmeler a:hover svg { opacity: 1; }
.ogrenci-sekmeler a:hover { background: var(--zemin); color: var(--metin); text-decoration: none; }
.ogrenci-sekmeler a.aktif { background: linear-gradient(120deg, var(--altin-acik), var(--altin)); color: #fff; }

/* ---------- Avatar dairesi (üst çubuk) ---------- */
.avatar-daire {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(155deg, var(--altin-acik), var(--altin));
    color: #fff; font-family: var(--font-baslik); font-weight: 700; font-size: 1.05rem;
}
.ust-kimlik { display: flex; align-items: center; gap: 12px; }

/* ---------- Görev ikon rozeti (gorev-satiri içinde) ---------- */
.gorev-ikon {
    width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(67,24,255,.1); color: var(--altin); margin-top: 1px;
}
.bugun-karti .gorev-ikon { background: rgba(255,255,255,.18); color: #fff; }
.gorev-ikon.yesil { background: rgba(5,205,153,.14); color: #05A97A; }
.bugun-karti .gorev-ikon.yesil { background: rgba(255,255,255,.24); color: #fff; }
.gorev-ikon svg { width: 18px; height: 18px; }

/* ---------- Dairesel ilerleme göstergesi ---------- */
.halka-sarmalayici { display: flex; align-items: center; gap: 18px; }
.halka-metin { font-size: .8rem; color: var(--metin-soluk); }
.halka-metin strong { display: block; color: var(--metin); font-family: var(--font-baslik); font-size: 1.05rem; margin-bottom: 2px; }

/* ---------- Kutlama kartı (bugün için görev yoksa) ---------- */
.kutlama-karti { text-align: center; padding: 22px 10px 8px; }
.kutlama-karti svg { color: #fff; margin-bottom: 8px; }
.kutlama-karti p { color: rgba(255,255,255,.85); margin: 4px 0 0; }
.kutlama-karti strong { color: #fff !important; }

/* ---------- Aylık Rapor (yazdırma / PDF) ---------- */
.rapor-kagit { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 30px; box-shadow: var(--golge); }
.rapor-baslik { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 2px solid var(--cizgi); }
.rapor-logo { font-family: var(--font-baslik); font-weight: 800; color: var(--altin); font-size: 1rem; }

@media print {
    .yan-menu, .veli-ust, .ogrenci-sekmeler, .yazdirma-gizle, .btn-grup { display: none !important; }
    .icerik { padding: 0; max-width: 100%; }
    .uygulama { display: block; }
    body { background: #fff; }
    .rapor-kagit { box-shadow: none; border: none; padding: 0; }
    .panel, .stat-kart { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
    a { text-decoration: none; color: inherit; }
}

/* ---------- Haftalık Çalışma Planı ---------- */
.plan-izgara { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: start; }
.plan-gun { background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 12px; padding: 12px; min-height: 90px; }
.plan-gun.bugun { border-color: var(--altin); box-shadow: 0 0 0 1px var(--altin); }
.plan-gun-baslik { font-weight: 700; font-size: .78rem; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--cizgi); display: flex; justify-content: space-between; }
.plan-gun-baslik span { color: var(--metin-soluk); font-weight: 500; }
.plan-gorev { font-size: .78rem; padding: 7px 0; border-bottom: 1px dashed var(--cizgi); display: flex; align-items: flex-start; gap: 6px; }
.plan-gorev:last-child { border-bottom: none; }
.plan-gorev.tamamlandi .plan-gorev-metin { text-decoration: line-through; color: var(--metin-soluk); }
.plan-gorev-metin { flex: 1; }
.plan-gorev-detay { color: var(--metin-soluk); font-size: .72rem; margin-top: 1px; }
.plan-checkbox { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; accent-color: var(--altin); cursor: pointer; }
@media (max-width: 860px) {
    .plan-izgara { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .plan-izgara { grid-template-columns: 1fr; }
}

/* ---------- Duyarlı (mobil) ---------- */
@media (max-width: 860px) {
    .uygulama { flex-direction: column; }
    .yan-menu { width: 100%; height: auto; position: static; padding: 16px; }
    .marka { margin-bottom: 14px; }
    .menu { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
    .menu li { margin-bottom: 0; flex-shrink: 0; }
    .menu a { padding: 9px 13px; }
    .icerik { padding: 22px 16px 50px; }
    h1 { font-size: 1.4rem; }
    .bakiye-karti .tutar { font-size: 1.7rem; }
    .kart-izgara { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .kart-izgara { grid-template-columns: 1fr 1fr; }
    .stat-kart { padding: 16px 16px; }
}