/* ============ NetHedef — stil ============ */
:root{
  --zemin:#f5f6fa; --kart:#ffffff; --metin:#1c2333; --soluk:#6b7387;
  --cizgi:#e4e7ef; --ana:#4f5ff0; --ana-koyu:#3a48d6;
  --kpss:#0d9488; --tyt:#4f5ff0; --ayt:#d97706;
  --yesil:#16a34a; --yesil-zemin:#e9f9ef;
  --kirmizi:#dc2626; --kirmizi-zemin:#fdeeee;
  --sari-zemin:#fef7e6; --mavi-zemin:#eef2ff;
  --golge:0 1px 3px rgba(20,25,50,.07), 0 6px 20px rgba(20,25,50,.06);
  --r:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --zemin:#12141c; --kart:#1b1e2b; --metin:#e8eaf2; --soluk:#9aa1b5;
    --cizgi:#2b2f40; --ana:#6d7bff; --ana-koyu:#8691ff;
    --yesil:#34c46b; --yesil-zemin:#15291d;
    --kirmizi:#f16a6a; --kirmizi-zemin:#301b1b;
    --sari-zemin:#2b2416; --mavi-zemin:#1d2136;
    --golge:0 1px 3px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background:var(--zemin); color:var(--metin);
  line-height:1.55; min-height:100vh; display:flex; flex-direction:column;
}
.ic{width:min(960px, 100% - 32px); margin-inline:auto}
main{flex:1; padding:26px 0 40px}

/* ---- üst bar ---- */
.ust{background:var(--kart); border-bottom:1px solid var(--cizgi); position:sticky; top:0; z-index:20}
.ust-ic{display:flex; align-items:center; justify-content:space-between; height:56px}
.logo{font-size:19px; text-decoration:none; color:var(--metin); display:flex; gap:8px; align-items:center}
.logo b{color:var(--ana)}
.ust nav{display:flex; gap:6px}
.ust nav a{color:var(--soluk); text-decoration:none; padding:7px 12px; border-radius:9px; font-size:14.5px}
.ust nav a:hover{background:var(--zemin); color:var(--metin)}

/* ---- alt bar ---- */
.alt{border-top:1px solid var(--cizgi); background:var(--kart)}
.alt-ic{display:flex; justify-content:space-between; align-items:center; padding:12px 0; font-size:12.5px; color:var(--soluk); gap:10px; flex-wrap:wrap}

/* ---- genel parçalar ---- */
.kart{background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r); box-shadow:var(--golge); padding:20px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--ana); color:#fff; border:none; border-radius:10px;
  padding:10px 18px; font-size:14.5px; font-weight:600; cursor:pointer;
  text-decoration:none; transition:.15s; font-family:inherit;
}
.btn:hover{background:var(--ana-koyu)}
.btn.hayalet{background:transparent; color:var(--soluk); border:1px solid var(--cizgi)}
.btn.hayalet:hover{color:var(--metin); border-color:var(--soluk); background:transparent}
.btn.kucuk{padding:6px 12px; font-size:13px}
.btn:disabled{opacity:.45; cursor:not-allowed}
.rozet{display:inline-block; font-size:12px; font-weight:600; padding:3px 10px; border-radius:99px}
.rozet.gri{background:var(--zemin); color:var(--soluk); border:1px solid var(--cizgi)}
.rozet.sari{background:var(--sari-zemin); color:#b45309}
.rozet.yesil{background:var(--yesil-zemin); color:var(--yesil)}
.baslik-satir{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px}
h1{font-size:24px; line-height:1.25}
h2{font-size:19px; margin-bottom:10px}
.soluk{color:var(--soluk)}
.kirinti{font-size:13px; color:var(--soluk); margin-bottom:8px}
.kirinti a{color:var(--soluk)}

/* ---- ana sayfa ---- */
.selam{margin-bottom:22px}
.selam h1{margin-bottom:4px}
.istatistik-satir{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:18px 0 26px}
.ist{background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r); padding:14px 16px}
.ist .deger{font-size:24px; font-weight:700}
.ist .ad{font-size:12.5px; color:var(--soluk)}
.sinav-izgara{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.sinav-kart{display:flex; flex-direction:column; gap:12px; position:relative; overflow:hidden; text-decoration:none; color:var(--metin)}
.sinav-kart:hover{border-color:var(--ana)}
.sinav-kart .serit{position:absolute; inset:0 auto 0 0; width:5px}
.sinav-kart h2{margin:0}
.sinav-alt{display:flex; align-items:center; justify-content:space-between; gap:10px}
.halka{--yuzde:0; width:56px; height:56px; border-radius:50%; flex:none;
  background:conic-gradient(var(--halka-renk,var(--ana)) calc(var(--yuzde)*1%), var(--cizgi) 0);
  display:grid; place-items:center}
.halka > div{width:42px; height:42px; border-radius:50%; background:var(--kart); display:grid; place-items:center; font-size:12px; font-weight:700}
.devam-kart{margin-bottom:18px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; border-left:5px solid var(--ana)}

/* ---- sınav sayfası ---- */
.konu-grup{margin-bottom:22px}
.konu-grup > h2{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.ders-satir{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; margin-bottom:10px; flex-wrap:wrap}
.ders-satir .bilgi{flex:1; min-width:200px}
.ders-satir .bilgi .ad{font-weight:600; font-size:15.5px}
.ders-satir .bilgi .detay{font-size:12.5px; color:var(--soluk); margin-top:2px}
.ders-satir .eylem{display:flex; gap:8px; align-items:center}
.hedef-nokta{display:inline-flex; gap:4px; margin-right:8px; vertical-align:middle}
.hedef-nokta i{width:9px; height:9px; border-radius:50%; background:var(--cizgi); display:inline-block}
.hedef-nokta i.tam{background:var(--yesil)}

/* ---- ders sayfası ---- */
.hedef-kutu{border-left:5px solid var(--ana); margin-bottom:18px}
.hedef-kutu h2{display:flex; gap:8px; align-items:center}
.hedef-liste{list-style:none; margin-top:10px; display:flex; flex-direction:column; gap:8px}
.hedef-liste li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px}
.hedef-liste .isaret{flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--cizgi); display:grid; place-items:center; font-size:12px; color:#fff; margin-top:1px}
.hedef-liste .isaret.tam{background:var(--yesil); border-color:var(--yesil)}
.bolum{margin-bottom:16px}
.bolum .etiket{font-size:12px; font-weight:700; color:var(--ana); text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px}
.bolum h2{margin-bottom:8px}
.bolum p{margin-bottom:8px; font-size:15px}
.bolum ul, .bolum ol{margin:0 0 10px 20px; font-size:15px}
.bolum li{margin-bottom:4px}
.ornek,.ipucu,.uyari{border-radius:10px; padding:12px 14px; margin:10px 0; font-size:14.5px}
.ornek{background:var(--yesil-zemin); border-left:4px solid var(--yesil)}
.ipucu{background:var(--mavi-zemin); border-left:4px solid var(--ana)}
.uyari{background:var(--sari-zemin); border-left:4px solid #d97706}
.ornek b:first-child,.ipucu b:first-child,.uyari b:first-child{display:block; margin-bottom:3px}
table.mini{width:100%; border-collapse:collapse; font-size:14px; margin:10px 0}
table.mini th, table.mini td{border:1px solid var(--cizgi); padding:7px 10px; text-align:left; vertical-align:top}
table.mini th{background:var(--zemin)}
.ders-son{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap}

/* ---- test ---- */
.test-ust{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:10px; flex-wrap:wrap}
.ilerleme-cubuk{height:7px; background:var(--cizgi); border-radius:99px; overflow:hidden; flex:1; min-width:120px}
.ilerleme-cubuk > div{height:100%; background:var(--ana); border-radius:99px; transition:width .25s}
.sayac{font-weight:700; font-variant-numeric:tabular-nums; padding:5px 12px; border-radius:9px; background:var(--mavi-zemin); color:var(--ana)}
.sayac.az{background:var(--kirmizi-zemin); color:var(--kirmizi)}
.soru-metin{font-size:16.5px; font-weight:600; margin-bottom:16px}
.soru-metin .hedef-eti{display:block; font-size:12px; color:var(--soluk); font-weight:600; margin-bottom:6px}
.secenekler{display:flex; flex-direction:column; gap:9px}
.secenek{display:flex; gap:12px; align-items:flex-start; text-align:left; width:100%;
  background:var(--zemin); border:2px solid var(--cizgi); border-radius:11px;
  padding:11px 14px; font-size:15px; cursor:pointer; color:var(--metin); font-family:inherit; transition:.12s}
.secenek:hover:not(:disabled){border-color:var(--ana)}
.secenek .harf{flex:none; width:26px; height:26px; border-radius:8px; background:var(--kart); border:1px solid var(--cizgi);
  display:grid; place-items:center; font-weight:700; font-size:13px}
.secenek.secili{border-color:var(--ana); background:var(--mavi-zemin)}
.secenek.dogru{border-color:var(--yesil); background:var(--yesil-zemin)}
.secenek.dogru .harf{background:var(--yesil); color:#fff; border-color:var(--yesil)}
.secenek.yanlis{border-color:var(--kirmizi); background:var(--kirmizi-zemin)}
.secenek.yanlis .harf{background:var(--kirmizi); color:#fff; border-color:var(--kirmizi)}
.secenek:disabled{cursor:default; opacity:.92}
.aciklama{margin-top:14px; border-radius:10px; padding:13px 15px; font-size:14.5px}
.aciklama.dogru{background:var(--yesil-zemin); border-left:4px solid var(--yesil)}
.aciklama.yanlis{background:var(--kirmizi-zemin); border-left:4px solid var(--kirmizi)}
.test-alt{display:flex; justify-content:flex-end; margin-top:16px}

/* ---- sonuç ---- */
.sonuc-ozet{text-align:center; padding:26px 20px}
.sonuc-ozet .buyuk{font-size:42px; font-weight:800}
.sonuc-ozet .net{font-size:15px; color:var(--soluk); margin-top:4px}
.sonuc-tablo{margin-top:18px}
.sonuc-satir{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 4px; border-bottom:1px solid var(--cizgi); font-size:14.5px}
.sonuc-satir:last-child{border-bottom:none}
.sonuc-satir .durum{font-weight:700}
.sonuc-satir .durum.tam{color:var(--yesil)}
.sonuc-satir .durum.eksik{color:var(--kirmizi)}
.sonuc-eylem{display:flex; gap:10px; justify-content:center; margin-top:20px; flex-wrap:wrap}

/* ---- tekrar ---- */
.tekrar-bos{text-align:center; padding:40px 20px; color:var(--soluk)}
.tekrar-bos .buyuk-ikon{font-size:40px; margin-bottom:8px}

/* ---- geri sayım çipleri ---- */
.cip-satir{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.sayi-cip{display:inline-flex; gap:6px; align-items:center; font-size:13px; color:var(--metin);
  background:var(--kart); border:1.5px solid var(--cizgi); border-radius:99px; padding:5px 13px}

/* ---- günlük plan ---- */
.plan-kart{margin-bottom:18px; border-left:5px solid var(--yesil)}
.plan-ust{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.plan-ust h2{margin:0}
.gunluk-bar{height:8px; background:var(--cizgi); border-radius:99px; overflow:hidden; margin-bottom:12px}
.gunluk-bar > div{height:100%; background:var(--yesil); border-radius:99px; transition:width .3s}
.plan-madde{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; border-top:1px dashed var(--cizgi); font-size:14.5px}
.plan-madde:first-of-type{border-top:none}
.plan-madde .btn{flex:none}

/* ---- hedef noktası: tazeleme ---- */
.hedef-nokta i.vade{background:#d97706}

/* ---- analiz: günlük grafik ---- */
.gun-grafik{display:flex; align-items:flex-end; gap:6px; padding-top:8px; overflow-x:auto}
.gun-sutun{flex:1; min-width:18px; display:flex; flex-direction:column; align-items:center; gap:3px}
.gun-cubuk{width:100%; max-width:26px; background:var(--ana); border-radius:5px 5px 2px 2px; opacity:.85}
.gun-cubuk.hedefte{background:var(--yesil)}
.gun-sayi{font-size:10.5px; color:var(--soluk); height:14px}
.gun-eti{font-size:10.5px; color:var(--soluk)}

/* ---- analiz: konu haritası ---- */
.konu-satir{display:grid; grid-template-columns:minmax(130px,1.2fr) 2fr auto; gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid var(--cizgi); font-size:13.5px}
.konu-satir:last-child{border-bottom:none}
.konu-ad{display:flex; align-items:center; gap:7px}
.konu-ad i{width:9px; height:9px; border-radius:50%; flex:none}
.konu-cubuk{height:9px; background:var(--zemin); border:1px solid var(--cizgi); border-radius:99px; overflow:hidden}
.konu-cubuk > div{height:100%; border-radius:99px}
.konu-deger{font-weight:700; font-size:13px; white-space:nowrap}
.kirmizi-metin{color:var(--kirmizi)}

/* ---- analiz: çizgi grafik + lejant + yığın ---- */
.cizgi-grafik{width:100%; height:130px; display:block}
.lejant-satir{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; font-size:13px}
.lejant{display:inline-flex; align-items:center; gap:6px}
.lejant i{width:10px; height:10px; border-radius:3px; display:inline-block}
.yigin-bar{display:flex; height:16px; border-radius:99px; overflow:hidden; margin:8px 0}

/* ---- ayarlar ---- */
.ayar-form{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end}
.ayar-form label{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--soluk)}
.ayar-form input{background:var(--zemin); border:1px solid var(--cizgi); color:var(--metin);
  border-radius:9px; padding:8px 10px; font-family:inherit; font-size:14px}
.ayar-form input:focus{outline:2px solid var(--ana)}

/* ---- pomodoro ---- */
.pomo{display:flex; align-items:center; gap:5px; background:var(--zemin); border:1px solid var(--cizgi);
  border-radius:99px; padding:4px 10px; font-size:13.5px; font-variant-numeric:tabular-nums}
.pomo-sure{font-weight:700; min-width:42px; text-align:center}
.pomo button{background:none; border:none; cursor:pointer; font-size:13px; color:var(--metin); padding:2px 3px; border-radius:6px}
.pomo button:hover{background:var(--cizgi)}
.pomo-adet{font-size:12px; color:var(--soluk); font-weight:700}
.pomo.puls{animation:pomoPuls 1s ease 3; border-color:var(--ana)}
@keyframes pomoPuls{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 5px rgba(79,95,240,.28)}}

/* ---- kart modu ---- */
.kart-modu{min-height:220px; display:flex; flex-direction:column}
.kart-cevap{background:var(--yesil-zemin); border-left:4px solid var(--yesil); border-radius:10px; padding:13px 15px; margin-top:6px; font-size:15px}
.kart-eylem{display:flex; gap:10px; justify-content:flex-end; margin-top:auto; padding-top:16px; flex-wrap:wrap}

@media (max-width:640px){
  .ust nav a{padding:7px 8px; font-size:13.5px}
  .konu-satir{grid-template-columns:1fr; gap:4px}
  .konu-deger{justify-self:end}
}
@media (max-width:560px){
  .ders-satir .eylem{width:100%; justify-content:flex-end}
  h1{font-size:21px}
  .pomo{display:none}
}