/* Doçentlik Sözlü Kartları — stil
   emreatilgan.com tasarım dili: beyaz zemin, antrasit ve gri tonlar, limon yeşili vurgu,
   Schibsted Grotesk. Açık tema varsayılan; koyu tema sistem tercihiyle ya da
   html[data-theme="dark"] ile gelir (ana sitenin antrasit bölümlerinden türetildi). */

@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/static/schibsted-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/static/schibsted-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================= token'lar ================= */
:root {
  --zemin: #ffffff;
  --yuzey: #ffffff;          /* kart yüzeyi (çizgiyle ayrılır) */
  --yuzey-2: #f7f7f7;        /* yumuşak dolgu */
  --yuzey-3: #f2f2f2;
  --metin: #000000;          /* başlıklar ve vurgulu metin */
  --govde: #4f4f4f;          /* gövde metni */
  --soluk: #6f6f6f;          /* ikincil bilgi */
  --cizgi: #e0e0e0;
  --hap-cizgi: #bbbbbb;
  --vurgu: #313131;          /* ana düğme ve seçili öğeler (antrasit) */
  --vurgu-yazi: #ffffff;
  --vurgu-acik: #f2f2f2;
  --limon: #c9ee7d;          /* "bugün" ve ana eylem işareti */
  --limon-parlak: #cff363;
  --limon-yazi: #000000;
  /* değerlendirme durumları: Bildim antrasit, Kısmen gri, Bilmedim sönük kırmızı */
  --yesil: #313131;      --yesil-acik: #e9e9e9;     --yesil-yazi: #ffffff;
  --kehribar: #8f8f8f;   --kehribar-acik: #f2f2f2;  --kehribar-yazi: #000000;
  --kirmizi: #c4473d;    --kirmizi-acik: #fbeceb;   --kirmizi-yazi: #ffffff;
  --gorulmedi: #ffffff;
  --isi-0: #f0f0f0; --isi-1: #d2d2d2; --isi-2: #a6a6a6; --isi-3: #6b6b6b; --isi-4: #313131;

  --font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-hap: 60px;
  --r-kart: 24px;
  --r-kutu: 16px;
  --r-kucuk: 8px;
  --ok-koyu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23313131' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h10M7.5 2.5 12 7l-4.5 4.5'/%3E%3C/svg%3E");
  --ok-acik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h10M7.5 2.5 12 7l-4.5 4.5'/%3E%3C/svg%3E");
  --daire: var(--limon); --daire-ok: var(--ok-koyu);
  --ana-hover: var(--limon); --ana-hover-yazi: #000000;
  --gecis: cubic-bezier(.445, .05, .55, .95);
  --cikis: cubic-bezier(.215, .61, .355, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zemin: #1c1c1c; --yuzey: #252525; --yuzey-2: #2b2b2b; --yuzey-3: #313131;
    --metin: #ffffff; --govde: #d9d9d9; --soluk: #a8a8a8;
    --cizgi: rgba(255, 255, 255, .14); --hap-cizgi: rgba(255, 255, 255, .32);
    --vurgu: #c9ee7d; --vurgu-yazi: #000000; --vurgu-acik: #313131;
    --yesil: #f2f2f2; --yesil-acik: #3a3a3a; --yesil-yazi: #000000;
    --kehribar: #6a6a6a; --kehribar-acik: #333333; --kehribar-yazi: #ffffff;
    --kirmizi: #e57b72; --kirmizi-acik: #3a2523; --kirmizi-yazi: #000000;
    --gorulmedi: #252525;
    --isi-0: #2f2f2f; --isi-1: #4c4c4c; --isi-2: #7c7c7c; --isi-3: #b4b4b4; --isi-4: #f2f2f2;
    --daire: #313131; --daire-ok: var(--ok-acik); --ana-hover: #ffffff; --ana-hover-yazi: #000000;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --zemin: #1c1c1c; --yuzey: #252525; --yuzey-2: #2b2b2b; --yuzey-3: #313131;
  --metin: #ffffff; --govde: #d9d9d9; --soluk: #a8a8a8;
  --cizgi: rgba(255, 255, 255, .14); --hap-cizgi: rgba(255, 255, 255, .32);
  --vurgu: #c9ee7d; --vurgu-yazi: #000000; --vurgu-acik: #313131;
  --yesil: #f2f2f2; --yesil-acik: #3a3a3a; --yesil-yazi: #000000;
  --kehribar: #6a6a6a; --kehribar-acik: #333333; --kehribar-yazi: #ffffff;
  --kirmizi: #e57b72; --kirmizi-acik: #3a2523; --kirmizi-yazi: #000000;
  --gorulmedi: #252525;
    --isi-0: #2f2f2f; --isi-1: #4c4c4c; --isi-2: #7c7c7c; --isi-3: #b4b4b4; --isi-4: #f2f2f2;
  --daire: #313131; --daire-ok: var(--ok-acik); --ana-hover: #ffffff; --ana-hover-yazi: #000000;
  color-scheme: dark;
}

/* ================= temel ================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--zemin); color: var(--govde);
  font: 400 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
a { color: var(--metin); text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--metin); outline-offset: 3px; border-radius: var(--r-kucuk); }
h1, h2, h3, h4 { color: var(--metin); margin: 0 0 .5em; font-weight: 500; }
h1 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); line-height: 1.02; letter-spacing: -.06em; text-wrap: balance; }
h2 { font-size: 1.3rem; line-height: 1.2; letter-spacing: -.035em; }
.kap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.dar { max-width: 760px; }
main { padding: 40px 0 96px; }

/* ================= üst çubuk ================= */
.ust { background: var(--zemin); }
.ust .kap { display: flex; align-items: center; gap: 16px 24px; min-height: 88px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; letter-spacing: -.04em; color: var(--metin); white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo svg { width: 32px; height: 32px; flex: none; }
.menu { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; align-items: center; }
.menu a, .menu button {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-hap);
  color: var(--metin); font: 500 16px/1.2 var(--font); background: none; border: 0; cursor: pointer;
}
.menu a:hover { text-decoration: underline; text-underline-offset: .3em; }
.menu button:hover { background: var(--yuzey-2); }
.menu a.aktif { background: var(--vurgu); color: var(--vurgu-yazi); }
.menu a.aktif:hover { text-decoration: none; }
.menu .ikon-menu { padding: 9px; border: 1px solid var(--cizgi); margin-left: 4px; }
.menu .ikon-menu.aktif { border-color: var(--vurgu); }
.tema-dugme .ikon-gunes, .tema-dugme .ikon-ay { display: none; }
:root[data-theme="dark"] .tema-dugme .ikon-gunes { display: block; }
:root:not([data-theme="dark"]) .tema-dugme .ikon-ay { display: block; }

/* ================= genel ================= */
.soluk { color: var(--soluk); }
.kucuk { font-size: .9rem; }
.giris-metni { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.5; color: var(--govde); margin: 0 0 32px; max-width: 58ch; }
.giris-metni b { color: var(--metin); font-weight: 600; }
.panel { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-kart); padding: 28px; }
.panel + .panel { margin-top: 16px; }
.bolum-baslik { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 56px 0 16px; }
.bolum-baslik h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.05em; }

/* --- düğmeler: ana sitenin hap düğmesi; ana düğmede limon ok dairesi --- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 11px 22px; min-height: 48px; border-radius: var(--r-hap);
  border: 1px solid var(--hap-cizgi); background: transparent; color: var(--metin);
  font: 500 16px/1.2 var(--font); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .4s var(--gecis), color .4s var(--gecis), border-color .4s var(--gecis);
}
.dugme:hover { border-color: var(--metin); text-decoration: none; }
.dugme.ana { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-yazi); padding: 6px 6px 6px 22px; }
.dugme.ana::after {
  content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--daire) var(--daire-ok) center / 14px no-repeat;
  transition: background-color .4s var(--gecis), transform .4s var(--gecis);
}
.dugme.ana:hover { background: var(--ana-hover); border-color: var(--ana-hover); color: var(--ana-hover-yazi); }
.dugme.ana:hover::after { background-color: #313131; background-image: var(--ok-acik); transform: translateX(2px); }
.dugme.ince { padding: 7px 16px; min-height: 38px; font-size: 15px; }
.dugme.ana.ince { padding: 4px 4px 4px 16px; }
.dugme.ana.ince::after { width: 30px; height: 30px; background-size: 12px; }
.dugme:disabled { opacity: .45; cursor: default; }
.dugme-grubu { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- etiketler: ana sitenin hap etiketi --- */
.etiket { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: var(--r-hap); border: 1px solid var(--hap-cizgi); font: 500 13.5px/1.4 var(--font); color: var(--metin); background: transparent; white-space: nowrap; }
.etiket.iyi { background: var(--yesil); border-color: var(--yesil); color: var(--yesil-yazi); }
.etiket.uyari { background: var(--kehribar-acik); border-color: var(--kehribar); color: var(--metin); }
.etiket.kotu { border-color: var(--kirmizi); color: var(--kirmizi); }
a.etiket:hover, button.etiket:hover { text-decoration: none; border-color: var(--metin); }

/* --- ilerleme çubuğu --- */
.cubuk { display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: var(--cizgi); }
.cubuk i { display: block; height: 100%; }
.cubuk .b2 { background: var(--yesil); }
.cubuk .b1 { background: var(--kehribar); }
.cubuk .b0 { background: var(--kirmizi); }

/* ================= ana sayfa ================= */
.ana-ust { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px 56px; align-items: end; margin-bottom: 56px; }
.ana-ust h1 { font-size: clamp(2.8rem, 1.6rem + 4.4vw, 5.25rem); font-weight: 600; line-height: .98; letter-spacing: -.065em; margin-bottom: 28px; }
.ana-ust h1 .gri { color: var(--soluk); display: block; }
.ana-ust .giris-metni { margin-bottom: 14px; }
.ana-ust .yontem { color: var(--soluk); max-width: 50ch; margin: 0; }
/* bugün kartı: ana sitenin canlı veri kartı */
.durum { display: grid; gap: 18px; padding: 28px; border-radius: var(--r-kart); background: var(--yuzey-2); }
.durum-ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; }
.rozet { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: var(--r-hap); background: var(--zemin); color: var(--metin); font-weight: 500; font-size: 14px; }
.rozet::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--limon-parlak); }
.durum-sayi { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.durum-sayi b { font-size: clamp(3.4rem, 2.6rem + 2.4vw, 4.75rem); line-height: .9; font-weight: 600; letter-spacing: -.07em; color: var(--metin); }
.durum-sayi span { font-size: 15px; color: var(--govde); max-width: 16ch; line-height: 1.35; }
.durum p { margin: 0; color: var(--govde); font-size: 15px; }
.durum p b { color: var(--metin); font-weight: 600; }
.durum .dugme-grubu { margin-top: 4px; }
.durum-alt { display: flex; gap: 28px; padding-top: 18px; border-top: 1px solid var(--cizgi); }
.durum-alt div { display: grid; gap: 2px; }
.durum-alt b { font-size: 30px; line-height: 1; font-weight: 600; letter-spacing: -.06em; color: var(--metin); }
.durum-alt span { font-size: 14px; color: var(--govde); }
.durum .cubuk { height: 6px; border-radius: 3px; }
.tekrar-notu { margin: 0; font-size: .9rem; }
.ikincil { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 0; }
.ikincil a { display: inline-flex; align-items: center; padding: 6px 16px; border: 1px solid var(--hap-cizgi); border-radius: var(--r-hap); font-weight: 500; font-size: 15px; }
.ikincil a:hover { border-color: var(--metin); text-decoration: none; }

/* alan listesi: ana sitenin satır listesi */
.alan-listesi { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cizgi); }
.alan-satir { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 30% 6.5rem; gap: 8px 24px; align-items: center; padding: 22px 8px; border-bottom: 1px solid var(--cizgi); color: inherit; transition: background-color .4s var(--gecis); }
.alan-satir:hover { background: var(--yuzey-2); text-decoration: none; }
.alan-satir .kod { font-weight: 600; font-size: 15px; color: var(--soluk); letter-spacing: -.01em; }
.alan-satir .ad { font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.15; color: var(--metin); }
.alan-satir .sag { text-align: right; font-size: 14px; color: var(--govde); font-variant-numeric: tabular-nums; line-height: 1.35; }
.alan-satir .sag b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.04em; color: var(--metin); }
.alan-satir .cubuk { grid-column: 3; grid-row: 1; }

.konu-satir { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--cizgi); }
.konu-satir:first-child { border-top: 0; padding-top: 4px; }
.konu-satir .ad { font-weight: 500; color: var(--metin); }
.konu-satir .cubuk { grid-column: 1 / -1; }

/* ================= çalışma ekranı ================= */
.calis-ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.calis-ust .kapsam { font-size: 1.15rem; font-weight: 500; letter-spacing: -.035em; color: var(--metin); line-height: 1.25; }
.calis-ust select { width: auto; border-radius: var(--r-hap); padding: 9px 16px; }
.kart { position: relative; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-kart); overflow: hidden; }
.kart-on, .kart-arka, .cevap-alani, .cevirme { padding-left: 40px; padding-right: 40px; }
.kart-on { padding-top: 32px; padding-bottom: 28px; }
.kart-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; }
.kart-meta .yer { margin-left: auto; font-size: 14px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.kart-soru { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 500; line-height: 1.15; letter-spacing: -.045em; color: var(--metin); margin: 0; max-width: 30ch; text-wrap: pretty; }
.kart-arka { background: var(--yuzey-2); border-top: 1px solid var(--cizgi); padding-top: 32px; padding-bottom: 36px; scroll-margin-top: 24px; }
.kart-arka[hidden] { display: none; }
.kart-arka.acilis { animation: acil .35s var(--cikis); }
@keyframes acil { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kart-arka.acilis { animation: none; } }
.bolum { margin-top: 28px; }
.bolum:first-child { margin-top: 0; }
.bolum h4 { font-size: 14px; font-weight: 500; color: var(--soluk); margin: 0 0 10px; letter-spacing: 0; }
.kisa-cevap { font-size: 1.15rem; line-height: 1.6; color: var(--metin); max-width: 64ch; }
.noktalar { margin: 0; padding-left: 1.15em; line-height: 1.6; max-width: 68ch; }
.noktalar li { margin: 10px 0; padding-left: 2px; }
.noktalar li::marker { color: var(--metin); }
.noktalar b { font-weight: 600; color: var(--metin); }
.kutu { border-radius: var(--r-kutu); padding: 16px 20px; max-width: 68ch; background: var(--zemin); border: 1px solid var(--cizgi); }
.kutu.ipucu { background: var(--limon); border-color: var(--limon); color: #000; }
.kutu.kacin { background: var(--kirmizi-acik); border-color: var(--kirmizi); }
.kutu.kacin .noktalar { margin: 0; }
.tablo-kap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { border-bottom: 1px solid var(--cizgi); padding: 10px 12px; text-align: left; vertical-align: top; }
th { font-weight: 500; color: var(--soluk); font-size: .875rem; }
td:first-child { font-weight: 500; color: var(--metin); }

textarea, input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select {
  width: 100%; font: inherit; color: var(--metin); background: var(--yuzey);
  border: 1px solid var(--cizgi); border-radius: var(--r-kutu); padding: 12px 16px;
}
textarea:focus, input:focus, select:focus { outline: 2px solid var(--metin); outline-offset: 1px; border-color: transparent; }
textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
label { display: block; font-weight: 500; font-size: .95rem; color: var(--metin); margin: 16px 0 8px; }

.cevap-alani { padding-bottom: 20px; }
.cevap-alani summary { cursor: pointer; color: var(--govde); font-size: .95rem; font-weight: 500; padding: 4px 0; width: fit-content; }
.cevap-alani summary:hover { color: var(--metin); }
.cevap-alani textarea { margin-top: 12px; }
.cevirme { padding-bottom: 32px; }
.cevirme .dugme { width: 100%; justify-content: space-between; }
.kisayol { color: var(--soluk); font-size: .85rem; margin-top: 12px; }
.kisayol kbd { border: 1px solid var(--cizgi); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; font: 500 .8rem var(--font); color: var(--metin); }

/* değerlendirme: üç hap */
.puanlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 20px 40px 28px; background: var(--yuzey-2); }
.puanlar[hidden] { display: none; }
.puan {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 10px;
  border-radius: var(--r-kutu); border: 1px solid var(--hap-cizgi); background: var(--zemin); color: var(--metin);
  font: 500 17px/1.2 var(--font); letter-spacing: -.02em; cursor: pointer;
  transition: background-color .3s var(--gecis), color .3s var(--gecis), border-color .3s var(--gecis);
}
.puan small { font-weight: 400; color: var(--soluk); font-size: .8rem; letter-spacing: 0; }
.puan .tus { font-size: .72rem; color: var(--soluk); font-weight: 500; }
.puan.p0:hover, .puan.p0:focus-visible, .puan.p0.secili { background: var(--kirmizi); border-color: var(--kirmizi); color: var(--kirmizi-yazi); }
.puan.p1:hover, .puan.p1:focus-visible, .puan.p1.secili { background: var(--kehribar); border-color: var(--kehribar); color: var(--kehribar-yazi); }
.puan.p2:hover, .puan.p2:focus-visible, .puan.p2.secili { background: var(--yesil); border-color: var(--yesil); color: var(--yesil-yazi); }
.puan:hover small, .puan:hover .tus, .puan.secili small, .puan.secili .tus, .puan:focus-visible small { color: inherit; opacity: .8; }
.puan:disabled { opacity: .5; cursor: default; }

.kart-alt { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.ikon-dugme { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid transparent; border-radius: var(--r-hap); padding: 7px 14px; cursor: pointer; color: var(--govde); font: 500 15px/1 var(--font); }
.ikon-dugme:hover { color: var(--metin); border-color: var(--cizgi); text-decoration: none; }
.ikon-dugme.acik { color: var(--metin); background: var(--limon); }
.ikon-dugme.sag { margin-left: auto; }
.ozel { margin-top: 12px; }
.ozel[hidden] { display: none; }
.kendi-cevap { white-space: pre-wrap; background: var(--zemin); border: 1px solid var(--cizgi); border-radius: var(--r-kutu); padding: 14px 18px; line-height: 1.6; }

.mesaj { padding: 12px 18px; border-radius: var(--r-kutu); margin-bottom: 14px; }
.mesaj.hata { background: var(--kirmizi-acik); color: var(--kirmizi); }
.mesaj.bilgi { background: var(--yuzey-2); color: var(--metin); }
.bildirim { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #313131; color: #fff; padding: 12px 20px; border-radius: var(--r-hap); font-size: .95rem; font-weight: 500; z-index: 10; }

.giris-kutu { max-width: 440px; margin: 6vh auto 0; }
.liste { list-style: none; padding: 0; margin: 0; }
.liste li { padding: 12px 0; border-top: 1px solid var(--cizgi); }
.liste li:first-child { border-top: 0; }
.sayilar { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 24px; }
.sayi { display: grid; gap: 4px; align-content: start; background: var(--yuzey-2); border-radius: var(--r-kutu); padding: 18px 20px; color: inherit; }
.sayi b { display: block; font-size: 2.2rem; line-height: 1; font-weight: 600; letter-spacing: -.06em; color: var(--metin); font-variant-numeric: tabular-nums; }
.sayi b small { font-size: 1rem; color: var(--soluk); font-weight: 500; letter-spacing: -.02em; }
.sayi span { color: var(--govde); font-size: .9rem; }
code { background: var(--yuzey-2); padding: 1px 6px; border-radius: 5px; font-size: .88em; word-break: break-all; }

/* ================= alt bilgi ================= */
.alt-bilgi { padding: 40px 0 40px; }
.alt-bilgi .kap > div { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 40px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--cizgi); }
.alt-bilgi p { margin: 0; color: var(--govde); font-size: .875rem; line-height: 1.55; max-width: 70ch; }
.alt-bilgi a { font-weight: 500; white-space: nowrap; }

/* ================= ilerleme panosu ================= */
.sayi.vurgulu { background: var(--limon); }
.sayi.vurgulu b, .sayi.vurgulu span { color: #000; }
a.sayi:hover { text-decoration: none; filter: brightness(.97); }
.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ikili .panel + .panel { margin-top: 0; }
.takvim { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 124px; margin-top: 12px; }
.takvim-gun { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.takvim-gun i { display: block; width: 100%; max-width: 32px; background: var(--metin); border-radius: 6px 6px 2px 2px; }
.takvim-gun:first-child i { background: var(--limon); }
.takvim-sayi { font-weight: 600; font-size: .85rem; font-variant-numeric: tabular-nums; min-height: 1em; color: var(--metin); }
.takvim-ad { font-size: .78rem; color: var(--soluk); }
.konu-satir.sik { padding: 12px 0; }
.konu-satir.sik a { font-size: .95rem; }

/* ================= deneme sınavı ================= */
.ayar-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; }
.secim { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: .98rem; color: var(--govde); margin: 12px 0 0; cursor: pointer; }
.secim b { color: var(--metin); font-weight: 500; }
.secim input { margin-top: 4px; width: 18px; height: 18px; accent-color: #313131; flex: none; }
:root[data-theme="dark"] .secim input { accent-color: #c9ee7d; }
.konu-secim { padding: 0; }
.konu-secim + .konu-secim { margin-top: 10px; }
.konu-secim summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; cursor: pointer; list-style: none; }
.konu-secim summary::-webkit-details-marker { display: none; }
.konu-secim summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--cizgi); background: linear-gradient(var(--metin), var(--metin)) center / 11px 1.5px no-repeat, linear-gradient(var(--metin), var(--metin)) center / 1.5px 11px no-repeat; transition: transform .4s var(--gecis); }
.konu-secim[open] summary::after { background: linear-gradient(#000, #000) center / 11px 1.5px no-repeat var(--limon); border-color: var(--limon); transform: rotate(180deg); }
.konu-secim summary .secim { margin: 0; flex: 1; font-size: 1.1rem; }
.konu-secim summary .soluk { margin-left: auto; }
.konu-kutulari { padding: 4px 22px 18px; border-top: 1px solid var(--cizgi); }

.sinav-ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.sinav-ust .kapsam { font-size: 1.15rem; font-weight: 500; letter-spacing: -.035em; color: var(--metin); }
.sayac { font-size: 1.7rem; line-height: 1; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; padding: 10px 18px; border-radius: var(--r-hap); background: var(--yuzey-2); color: var(--metin); }
.sayac[hidden] { display: none; }
.sayac.az { background: var(--kirmizi); color: var(--kirmizi-yazi); }
.soru-noktalari { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.soru-noktalari[hidden] { display: none; }
.soru-noktalari button {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--cizgi); background: var(--zemin);
  color: var(--govde); font: 500 .9rem var(--font); cursor: pointer; font-variant-numeric: tabular-nums;
}
.soru-noktalari button.yazildi { background: var(--yuzey-3); color: var(--metin); border-color: var(--yuzey-3); }
.soru-noktalari button.p0 { background: var(--kirmizi); color: var(--kirmizi-yazi); border-color: transparent; }
.soru-noktalari button.p1 { background: var(--kehribar); color: var(--kehribar-yazi); border-color: transparent; }
.soru-noktalari button.p2 { background: var(--yesil); color: var(--yesil-yazi); border-color: transparent; }
.soru-noktalari button.aktif { outline: 2px solid var(--metin); outline-offset: 2px; color: var(--metin); }
.sinav-soru[hidden], .sinav-soru .degerlendirme[hidden], .sinav-soru .cevap-alani[hidden] { display: none; }
.sinav-soru .cevap-alani.yaz { padding-bottom: 28px; }
.sinav-soru textarea { min-height: 240px; }
.kendi-cevap.bos { color: var(--soluk); font-style: italic; }
.sinav-gezinti { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.sinav-gezinti[hidden], #sonuc[hidden] { display: none; }
.sinav-gezinti .sag { margin-left: auto; }
#sonuc .durum { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.iyi-yazi { color: var(--metin); } .uyari-yazi { color: var(--soluk); } .kotu-yazi { color: var(--kirmizi); }

/* ================= kavram haritası ================= */
.sekmeler { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.sekmeler a { padding: 6px 18px; border-radius: var(--r-hap); font-weight: 500; font-size: 15px; color: var(--metin); border: 1px solid var(--hap-cizgi); }
.sekmeler a:hover { text-decoration: none; border-color: var(--metin); }
.sekmeler a.aktif { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-yazi); }
.harita-arac { display: flex; gap: 12px 24px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.harita-arac input { flex: 1 1 280px; width: auto; border-radius: var(--r-hap); padding: 11px 20px; }
.lejant { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; color: var(--govde); }
.lejant span { display: inline-flex; align-items: center; gap: 6px; }
.nokta { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.nokta.n-yok { background: var(--gorulmedi); box-shadow: inset 0 0 0 1.5px var(--soluk); }
.nokta.n-0 { background: var(--kirmizi); } .nokta.n-1 { background: var(--kehribar); } .nokta.n-2 { background: var(--yesil); }
.nokta.n-kavram { background: var(--limon); border-radius: 2px; transform: rotate(45deg) scale(.85); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.harita-yerlesim { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.harita-kap { position: relative; background: var(--yuzey-2); border-radius: var(--r-kart); overflow: hidden; height: min(72vh, 680px); }
#harita { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
#harita:active { cursor: grabbing; }
#harita .baglar line { stroke: var(--hap-cizgi); stroke-width: calc(1px * var(--olcek, 1)); opacity: .7; }
#harita .baglar line.acik { stroke: var(--metin); stroke-width: calc(1.5px * var(--olcek, 1)); opacity: 1; }
#harita .dugum { cursor: pointer; }
#harita .dugum.kart circle { stroke: var(--yuzey-2); stroke-width: calc(1.5px * var(--olcek, 1)); }
#harita .dugum.n-yok circle { fill: var(--gorulmedi); stroke: var(--soluk); }
#harita .dugum.n-0 circle { fill: var(--kirmizi); }
#harita .dugum.n-1 circle { fill: var(--kehribar); }
#harita .dugum.n-2 circle { fill: var(--yesil); }
#harita .dugum.kavram rect { fill: var(--limon); stroke: #313131; stroke-width: calc(1px * var(--olcek, 1)); }
#harita .kavram-ad { font: 500 calc(12px * var(--olcek, 1)) var(--font); letter-spacing: -.02em; fill: var(--metin); paint-order: stroke; stroke: var(--yuzey-2); stroke-width: calc(3px * var(--olcek, 1)); display: none; pointer-events: none; }
#harita .kavram-ad.gorunur, #harita .dugum.kavram:hover .kavram-ad, #harita .dugum.acik .kavram-ad { display: block; }
#harita .konu-etiket { font: 600 calc(11px * var(--olcek, 1)) var(--font); fill: var(--soluk); }
#harita.secimli .dugum:not(.acik), #harita.secimli .konu-etiket { opacity: .16; }
#harita.secimli .baglar line:not(.acik) { opacity: .2; }
#harita .dugum.secili circle, #harita .dugum.secili rect { stroke: var(--metin); stroke-width: calc(2.5px * var(--olcek, 1)); }
.harita-yakin { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.harita-yakin button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cizgi); background: var(--zemin); color: var(--metin); font: 500 1.1rem/1 var(--font); cursor: pointer; }
.harita-yakin button:hover { border-color: var(--metin); }
.harita-panel { position: sticky; top: 24px; max-height: min(72vh, 680px); overflow: auto; padding: 22px; }
.harita-panel h4 { font-size: 14px; font-weight: 500; color: var(--soluk); margin: 20px 0 6px; }
.harita-panel .kart-meta { margin-bottom: 10px; }
.panel-konu { margin: 0 0 8px; }
.panel-soru { font-size: 1.3rem; font-weight: 500; line-height: 1.2; letter-spacing: -.04em; color: var(--metin); margin: 0 0 14px; }
.panel-cevap { margin-bottom: 16px; }
.panel-cevap summary { cursor: pointer; color: var(--metin); font-weight: 500; font-size: .95rem; width: fit-content; }
.panel-cevap p { line-height: 1.6; margin: 10px 0 0; }
.liste.kucuk li { padding: 9px 0; font-size: .9rem; }

/* ================= hesap: giriş, kayıt, profil ================= */
.hesap-yerlesim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px 64px; align-items: start; padding-top: 24px; }
.hesap-giris h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); font-weight: 600; letter-spacing: -.065em; }
.hesap-giris .noktalar { margin-top: -12px; }
.hesap-kutu { display: grid; gap: 0; }
.hesap-kutu form > label:first-of-type, .hesap-kutu .gizli-alan + label { margin-top: 0; }
.dugme.tam { width: 100%; justify-content: space-between; margin-top: 22px; }
.dugme.google { width: 100%; gap: 12px; }
.ayirac { display: flex; align-items: center; gap: 14px; margin: 22px 0 18px; color: var(--soluk); font-size: .875rem; }
.ayirac::before, .ayirac::after { content: ""; flex: 1; height: 1px; background: var(--cizgi); }
.etiket-satir { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.etiket-satir label { margin-bottom: 8px; }
.hesap-alt { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--cizgi); font-size: .95rem; }
.hesap-alt a, .mesaj a { text-decoration: underline; }
.gizli-alan { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mesaj.bilgi b { font-weight: 600; }

.avatar { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--limon); color: #000; font-size: 30px; font-weight: 600; letter-spacing: -.04em; }
.avatar.mini { width: 26px; height: 26px; font-size: 13px; }
.menu .profil-baglanti { padding: 4px 14px 4px 4px; gap: 8px; border: 1px solid var(--cizgi); }
.menu .profil-baglanti.aktif { border-color: var(--vurgu); }
.menu .giris-baglanti { border: 1px solid var(--hap-cizgi); }
.menu .giris-baglanti:hover { border-color: var(--metin); text-decoration: none; }

.profil-yerlesim { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px 48px; align-items: start; }
.profil-kimlik { position: sticky; top: 24px; display: grid; gap: 4px; }
.profil-kimlik .avatar { margin-bottom: 16px; }
.profil-kimlik h1 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); margin: 0; }
.profil-kimlik > p { margin: 0; overflow-wrap: anywhere; }
.profil-sayilar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0 12px; }
.profil-sayilar div { display: grid; gap: 2px; padding: 12px; border-radius: var(--r-kutu); background: var(--yuzey-2); }
.profil-sayilar dt { order: 2; font-size: .78rem; color: var(--govde); line-height: 1.25; }
.profil-sayilar dd { margin: 0; font-size: 1.6rem; font-weight: 600; letter-spacing: -.05em; line-height: 1; color: var(--metin); }
.profil-kimlik .dugme-grubu { margin-top: 12px; }
.profil-kimlik form { display: contents; }
.profil-bolumler { display: grid; gap: 16px; }
.profil-bolumler .panel + .panel { margin-top: 0; }
.profil-bolumler h2 { margin-bottom: 6px; }
.profil-bolumler .panel > p.soluk { margin: 0 0 6px; }
.tam-satir { grid-column: 1 / -1; margin-top: 6px; }
.panel.tehlike { border-color: color-mix(in srgb, var(--kirmizi) 40%, var(--cizgi)); }
.panel.tehlike summary { cursor: pointer; color: var(--kirmizi); font-weight: 500; width: fit-content; margin-top: 8px; }
.dugme.sil { border-color: var(--kirmizi); color: var(--kirmizi); }
.dugme.sil:hover { background: var(--kirmizi); color: var(--kirmizi-yazi); }

@media (max-width: 900px) {
  .hesap-yerlesim, .profil-yerlesim { grid-template-columns: 1fr; }
  .profil-kimlik { position: static; }
}

/* ================= kişisel analiz (ilerleme) ================= */
.ilerleme-ust { display: grid; gap: 4px; margin-bottom: 8px; }
.ilerleme-ust .giris-metni { margin-bottom: 20px; }
.davet-serit { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 16px 20px; border-radius: var(--r-kutu); background: var(--yuzey-2); margin-bottom: 24px; }
.davet-serit p { margin: 0; max-width: 62ch; }
.davet-serit b { color: var(--metin); font-weight: 600; }
.sayi .olcer { display: block; height: 6px; border-radius: 3px; background: var(--isi-1); overflow: hidden; margin-top: 6px; }
.sayi .olcer i { display: block; height: 100%; background: var(--metin); border-radius: 3px; }
.sayi.vurgulu .olcer { background: rgba(0,0,0,.15); }
.panel.plan { display: flex; align-items: center; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 16px; background: var(--yuzey-2); border-color: transparent; }
.panel.plan p { margin: 0; max-width: 62ch; }
.panel.plan b { color: var(--metin); font-weight: 600; }
.plan-sayi { display: flex; align-items: center; gap: 12px; }
.plan-sayi b { font-size: 3.2rem; line-height: .9; font-weight: 600; letter-spacing: -.07em; }
.plan-sayi span { font-size: .9rem; line-height: 1.3; color: var(--govde); }
.bos-durum { text-align: left; }
.panel.grafik { margin-bottom: 16px; }
.ikili > .panel.grafik { margin-bottom: 0; }
.ikili + .panel, .ikili + .ikili, .panel.grafik + .ikili { margin-top: 16px; }
.grafik-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.grafik-bas h2 { margin: 0; }
.grafik-bas p { margin: 0; }
.tablo-gorunum { margin-top: 14px; }
.tablo-gorunum summary { cursor: pointer; font-size: .875rem; color: var(--govde); width: fit-content; }
.tablo-gorunum summary:hover { color: var(--metin); }
.tablo-gorunum .tablo-kap { max-height: 280px; overflow: auto; margin-top: 8px; }

/* etkinlik takvimi (ısı haritası): tek ton, açıktan koyuya */
.takvim-isi-kap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; }
.isi-gunler { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; padding-top: 20px; font-size: .7rem; color: var(--soluk); }
.isi-gunler span { line-height: 1; display: flex; align-items: center; }
.isi-sag { min-width: 0; overflow-x: auto; padding: 0 3px 3px; }
.isi-aylar { display: grid; grid-template-columns: repeat(26, minmax(10px, 1fr)); gap: 3px; height: 16px; margin-bottom: 4px; font-size: .7rem; color: var(--soluk); min-width: 340px; }
.isi-aylar span { white-space: nowrap; }
.isi { display: grid; grid-template-rows: repeat(7, auto); grid-auto-flow: column; grid-auto-columns: minmax(10px, 1fr); gap: 3px; min-width: 340px; }
.isi i, .isi-lejant i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--isi-0); }
.isi .i1, .isi-lejant .i1 { background: var(--isi-1); }
.isi .i2, .isi-lejant .i2 { background: var(--isi-2); }
.isi .i3, .isi-lejant .i3 { background: var(--isi-3); }
.isi .i4, .isi-lejant .i4 { background: var(--isi-4); }
.isi i.gelecek { background: transparent; }
.isi i.bugun { box-shadow: 0 0 0 2px var(--limon); }
.isi i.ipucu-acik { box-shadow: 0 0 0 2px var(--metin); }
.isi-lejant { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 12px; font-size: .78rem; color: var(--soluk); }
.isi-lejant i { width: 12px; }

/* sütun grafikleri: en fazla 24 px kalınlık, 4 px yuvarlak tepe, düz taban */
.lejant-satir { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: .85rem; color: var(--govde); margin-bottom: 12px; }
.lejant-satir span { display: inline-flex; align-items: center; gap: 7px; }
.anahtar { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.anahtar.k2 { background: var(--yesil); } .anahtar.k1 { background: var(--kehribar); } .anahtar.k0 { background: var(--kirmizi); }
.sutunlar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 4px; height: 190px; padding-bottom: 22px; border-bottom: 1px solid var(--cizgi); position: relative; }
.sutun { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline-offset: 2px; cursor: default; }
.yigin { width: min(24px, 80%); display: flex; flex-direction: column-reverse; gap: 2px; min-height: 0; }
.yigin i { display: block; min-height: 2px; }
.yigin i:last-child { border-radius: 4px 4px 0 0; }
.yigin .k2 { background: var(--yesil); } .yigin .k1 { background: var(--kehribar); } .yigin .k0 { background: var(--kirmizi); }
.yigin .ton { background: var(--isi-2); } .yigin .zirve { background: var(--metin); }
.sutun.ipucu-acik .yigin, .sutun:focus-visible .yigin { filter: brightness(1.15); outline: 2px solid var(--metin); outline-offset: 2px; border-radius: 4px 4px 0 0; }
.sutun-ad { position: absolute; bottom: -22px; font-size: .72rem; color: var(--soluk); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sutunlar.saat { gap: 2px; height: 150px; }

/* bölümlü çubuk (bellek gücü) */
.parcali { display: flex; gap: 2px; height: 28px; margin: 4px 0 16px; }
.parcali i { display: flex; align-items: center; min-width: 4px; border-radius: 4px; font-style: normal; font-size: .78rem; font-weight: 600; padding-left: 8px; overflow: hidden; outline-offset: 2px; }
.parcali .s4, .anahtar.s4 { background: var(--isi-4); color: var(--zemin); }
.parcali .s3, .anahtar.s3 { background: var(--isi-3); color: var(--zemin); }
.parcali .s2, .anahtar.s2 { background: var(--isi-2); color: #000; }
.parcali .s0, .anahtar.s0 { background: var(--isi-0); color: var(--metin); }
:root[data-theme="dark"] .parcali .s3 { color: #000; }
.parcali i.ipucu-acik { box-shadow: 0 0 0 2px var(--metin); }
.parcali-lejant { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.parcali-lejant li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font-size: .9rem; }
.parcali-lejant b { font-weight: 500; color: var(--metin); }
.parcali-lejant .deger { font-weight: 600; font-variant-numeric: tabular-nums; }
.parcali-lejant .anahtar { align-self: center; }
.parcali-lejant .anahtar.s0 { box-shadow: inset 0 0 0 1px var(--isi-1); }

/* çizgi grafik (deneme sınavları) */
.cizgi-grafik { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; height: 190px; padding: 8px 0 4px; }
.cizgi-eksen { display: flex; flex-direction: column; justify-content: space-between; font-size: .72rem; color: var(--soluk); font-variant-numeric: tabular-nums; margin: -6px 0; }
.cizgi-alan { position: relative; margin: 0 10px; }
.cizgi-alan svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cizgi-alan .izgara, .cizgi-alan .taban { stroke: var(--cizgi); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cizgi-alan .cizgi { fill: none; stroke: var(--metin); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cizgi-nokta { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--metin); box-shadow: 0 0 0 2px var(--yuzey); }
.cizgi-nokta::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.cizgi-nokta.son { background: var(--limon); box-shadow: 0 0 0 2px var(--yuzey), 0 0 0 3.5px var(--metin); }
.cizgi-nokta b { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-size: .85rem; font-weight: 600; color: var(--metin); white-space: nowrap; }
.cizgi-nokta.ipucu-acik { transform: scale(1.3); }
.bos-grafik { display: grid; gap: 12px; justify-items: start; align-content: center; min-height: 150px; }
.bos-grafik p { margin: 0; }

/* sıralı yatay çubuklar (alan hakimiyeti) */
.yatay-cubuklar { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.yatay-cubuklar li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 3.2rem 4rem; gap: 8px 16px; align-items: center; }
.yatay-cubuklar a { font-weight: 500; font-size: .95rem; }
.yatay { display: block; height: 12px; border-radius: 0 4px 4px 0; background: var(--isi-0); outline-offset: 3px; }
.yatay i { display: block; height: 100%; min-width: 2px; background: var(--metin); border-radius: 0 4px 4px 0; }
.yatay.ipucu-acik i { filter: brightness(1.25); }
.yatay-cubuklar b { text-align: right; font-weight: 600; color: var(--metin); font-variant-numeric: tabular-nums; }
.yatay-cubuklar .kucuk { text-align: right; font-variant-numeric: tabular-nums; }

.konu-detay { padding: 0; }
.konu-detay + .konu-detay { margin-top: 10px; }
.konu-detay summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 18px 22px; cursor: pointer; list-style: none; font-weight: 500; color: var(--metin); }
.konu-detay summary::-webkit-details-marker { display: none; }
.konu-detay summary .cubuk { grid-column: 1 / -1; }
.konu-detay > .konu-satir { margin: 0 22px; }
.konu-detay > .konu-satir:last-child { padding-bottom: 20px; }

/* ipucu (tooltip): değer önde, etiket arkada */
.ipucu-kutu { position: fixed; z-index: 20; pointer-events: none; display: grid; gap: 2px; max-width: 260px; padding: 8px 12px; border-radius: 10px; background: #313131; color: #d9d9d9; font-size: .8rem; line-height: 1.35; box-shadow: 0 8px 24px -12px rgba(0,0,0,.5); }
.ipucu-kutu[hidden] { display: none; }
.ipucu-kutu b { color: #fff; font-size: .95rem; font-weight: 600; }
:root[data-theme="dark"] .ipucu-kutu { background: #f2f2f2; color: #313131; }
:root[data-theme="dark"] .ipucu-kutu b { color: #000; }

/* ================= karşılama penceresi (ilk açılış) ================= */
.karsilama { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 32px; border: 0; border-radius: var(--r-kart); background: var(--zemin); color: var(--govde); box-shadow: 0 30px 80px -30px rgba(0,0,0,.45); }
.karsilama::backdrop { background: rgba(20, 20, 20, .55); backdrop-filter: blur(3px); }
.karsilama[open] { animation: karsilama-ac .35s var(--cikis); }
@keyframes karsilama-ac { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .karsilama[open] { animation: none; } }
.karsilama-logo { width: 44px; height: 44px; margin-bottom: 20px; }
.karsilama h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.05; margin: 0 0 12px; }
.karsilama > p { margin: 0 0 22px; line-height: 1.55; }
.karsilama-dugmeler { display: grid; gap: 10px; }
.karsilama-dugmeler .dugme.tam { margin-top: 0; }
.karsilama-dugmeler .dugme:not(.ana) { justify-content: center; }
.karsilama-dugmeler form { display: contents; }
.karsilama-misafir { margin-top: 4px; padding: 10px; background: none; border: 0; border-radius: var(--r-hap); color: var(--metin); font: 500 15px/1.2 var(--font); text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.karsilama-misafir:hover { text-decoration-thickness: 2px; }
.karsilama-not { margin: 16px 0 0 !important; text-align: center; }
.karsilama-kapat-form { position: absolute; top: 14px; right: 14px; margin: 0; }
.karsilama-kapat { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--cizgi); background: transparent; color: var(--metin); font: 400 22px/1 var(--font); cursor: pointer; }
.karsilama-kapat:hover { border-color: var(--metin); }

/* ================= konu turu: ilerleme ve özet ================= */
.tur-ilerleme { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.tur-ilerleme b { color: var(--metin); font-weight: 600; font-size: 1.05rem; }
.tur-cubuk { height: 6px; border-radius: 3px; background: var(--isi-1); overflow: hidden; }
.tur-cubuk i { display: block; height: 100%; background: var(--metin); border-radius: 3px; transition: width .4s var(--cikis); }
.tur-ozet h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); font-weight: 600; letter-spacing: -.065em; margin-bottom: 8px; }
.tur-sonuc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px 40px; align-items: center; padding: 28px; border-radius: var(--r-kart); background: var(--yuzey-2); margin-bottom: 16px; }
.tur-yuzde { display: grid; gap: 4px; }
.tur-yuzde b { font-size: clamp(3.6rem, 2.6rem + 3vw, 5.5rem); line-height: .9; font-weight: 600; letter-spacing: -.07em; color: var(--metin); }
.tur-yuzde span { font-size: .9rem; color: var(--govde); }
.parcali.ince { height: 10px; margin: 0; gap: 2px; }
.parcali.ince i { padding: 0; min-width: 3px; border-radius: 5px; }
.parcali .k2 { background: var(--yesil); } .parcali .k1 { background: var(--kehribar); } .parcali .k0 { background: var(--kirmizi); }
.tur-sayilar { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .95rem; }
.tur-sayilar li { display: inline-flex; align-items: center; gap: 7px; }
.tur-sayilar b { color: var(--metin); font-weight: 600; }
.tur-karsilastirma { margin: 14px 0 0; max-width: 60ch; }
.tur-karsilastirma b { color: var(--metin); font-weight: 600; }
.tur-eylemler { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.tur-eylemler > div { padding: 24px 28px; border-radius: var(--r-kart); border: 1px solid var(--cizgi); }
.tur-eylemler h2 { margin-bottom: 14px; }
.tur-eylemler p { margin: 12px 0 0; }
.tur-bitir p { margin: 0 0 14px !important; }
.tur-kartlari li { display: flex; gap: 12px; align-items: baseline; }
.tur-kartlari .etiket { flex: none; }
.tur-listesi { list-style: none; margin: 0; padding: 0; }
.tur-listesi li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) minmax(80px, 18%) 3rem; gap: 6px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--cizgi); }
.tur-listesi li:first-child { border-top: 0; padding-top: 0; }
.tur-listesi a { font-weight: 500; font-size: .95rem; }
.tur-listesi b { text-align: right; font-weight: 600; color: var(--metin); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .tur-sonuc { grid-template-columns: 1fr; padding: 22px; }
  .tur-eylemler { grid-template-columns: 1fr; }
  .tur-eylemler > div { padding: 20px; }
  .tur-listesi li { grid-template-columns: 2.8rem minmax(0, 1fr) 2.8rem; }
  .tur-listesi .parcali { grid-column: 2 / 4; grid-row: 2; }
}

/* ================= Notlarım (kişisel not) ================= */
.notlarim h4 .soluk { font-weight: 400; }
.notlarim .not-metni { white-space: pre-wrap; overflow-wrap: anywhere; }
.notlarim .not-metni.yeni { animation: not-yeni .5s var(--cikis); }
@keyframes not-yeni { from { transform: scale(.98); box-shadow: 0 0 0 6px color-mix(in srgb, var(--limon) 45%, transparent); } }
@media (prefers-reduced-motion: reduce) { .notlarim .not-metni.yeni { animation: none; } }
.notlarim .not-eylemler { display: flex; gap: 4px; margin-top: 8px; }
.notlarim .not-eylemler .ikon-dugme { padding: 6px 12px; }
.notlarim .not-eylemler .not-sil:hover { color: var(--kirmizi); border-color: var(--kirmizi); }
.notlarim .not-yaz textarea { min-height: 96px; background: var(--zemin); max-width: 68ch; display: block; }
.notlarim .not-yaz .dugme-grubu { margin-top: 10px; }
.notlarim [hidden] { display: none !important; }

/* ================= duyarlı ================= */
@media (max-width: 900px) {
  .ana-ust { grid-template-columns: 1fr; gap: 32px; }
  .harita-yerlesim { grid-template-columns: 1fr; }
  .harita-kap { height: 62vh; }
  .harita-panel { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .kap { padding: 0 20px; }
  main { padding-top: 16px; }
  .ust .kap { min-height: 0; padding-top: 18px; padding-bottom: 10px; }
  .menu { margin-left: -14px; width: calc(100% + 14px); }
  .menu a, .menu button { padding: 7px 11px; font-size: 15px; }
  .kart-on, .kart-arka, .cevap-alani, .cevirme { padding-left: 22px; padding-right: 22px; }
  .kart-on { padding-top: 24px; }
  .puanlar { padding: 16px 22px 22px; gap: 8px; }
  .puan { font-size: 15px; padding: 12px 6px; }
  .puan small { display: none; }
  .panel { padding: 22px; }
  .durum { padding: 22px; }
  .alan-satir { grid-template-columns: 2.6rem minmax(0, 1fr) 4.5rem; padding: 18px 4px; gap: 10px 14px; }
  .alan-satir .cubuk { grid-column: 2 / 4; grid-row: 2; }
  .ikili, .ayar-satir { grid-template-columns: 1fr; }
  .sayac { font-size: 1.3rem; padding: 8px 14px; }
  .sinav-soru textarea { min-height: 190px; }
  #sonuc .durum { grid-template-columns: 1fr; }
  .yatay-cubuklar li { grid-template-columns: minmax(0, 1fr) 3rem 3.6rem; }
  .yatay-cubuklar .yatay { grid-column: 1 / -1; grid-row: 2; }
  .sutunlar { height: 160px; }
  .plan-sayi b { font-size: 2.6rem; }
}

/* İlerleme: not aldığın kartlar */
.not-listesi { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.not-listesi li { display: grid; gap: 8px; align-content: start; }
.not-kart { display: grid; gap: 2px; color: inherit; text-decoration: none; }
.not-kart .soluk { font-size: .8rem; }
.not-kart b { font-weight: 600; line-height: 1.35; }
.not-kart:hover b { text-decoration: underline; text-underline-offset: 3px; }
.not-listesi .not-metni { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; max-height: 12em; overflow: auto; }