/* Deneme Okuma — apple.com tasarım dili */

:root {
  --zemin: #f5f5f7;
  --yuzey: #ffffff;
  --yuzey-2: #fbfbfd;
  --metin: #1d1d1f;
  --metin-2: #6e6e73;
  --metin-3: #86868b;
  --cizgi: #d2d2d7;
  --cizgi-ince: rgba(0, 0, 0, .08);
  --mavi: #0071e3;
  --mavi-hover: #0077ed;
  --baglanti: #0066cc;
  --mavi-zemin: rgba(0, 113, 227, .08);
  --yesil: #1d8a3e;
  --yesil-zemin: rgba(52, 199, 89, .14);
  --turuncu: #b25000;
  --turuncu-zemin: rgba(255, 149, 0, .16);
  --kirmizi: #d70015;
  --kirmizi-zemin: rgba(255, 59, 48, .12);
  --nav-zemin: rgba(251, 251, 253, .8);
  --golge: 0 4px 24px rgba(0, 0, 0, .06);
  --golge-hover: 0 10px 40px rgba(0, 0, 0, .10);
  --genislik: 1180px;
  --yaricap: 18px;
  --yaricap-buyuk: 28px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;
  --isi-1: #ffd7d3; --isi-2: #ffe5c2; --isi-3: #fff4c2; --isi-4: #dcf3dc; --isi-5: #c3ebcb;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #000000;
    --yuzey: #1c1c1e;
    --yuzey-2: #161617;
    --metin: #f5f5f7;
    --metin-2: #a1a1a6;
    --metin-3: #86868b;
    --cizgi: #424245;
    --cizgi-ince: rgba(255, 255, 255, .1);
    --mavi: #0a84ff;
    --mavi-hover: #409cff;
    --baglanti: #2997ff;
    --mavi-zemin: rgba(10, 132, 255, .16);
    --yesil: #30d158;
    --yesil-zemin: rgba(48, 209, 88, .16);
    --turuncu: #ff9f0a;
    --turuncu-zemin: rgba(255, 159, 10, .16);
    --kirmizi: #ff453a;
    --kirmizi-zemin: rgba(255, 69, 58, .16);
    --nav-zemin: rgba(22, 22, 23, .8);
    --golge: none;
    --golge-hover: none;
    --isi-1: rgba(255, 69, 58, .32); --isi-2: rgba(255, 159, 10, .28); --isi-3: rgba(255, 214, 10, .22);
    --isi-4: rgba(48, 209, 88, .22); --isi-5: rgba(48, 209, 88, .38);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.022em;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--baglanti); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: rgba(0, 113, 227, .2); }

/* ── Global menü ───────────────────────────────────────── */
.gnav {
  position: sticky; top: 0; z-index: 50;
  height: 48px;
  background: var(--nav-zemin);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--cizgi-ince);
}
.gnav-ic {
  max-width: var(--genislik); height: 100%; margin: 0 auto; padding: 0 22px;
  display: flex; align-items: center; gap: 36px;
}
.gnav a, .gnav button {
  color: var(--metin); opacity: .8; font-size: 12px; letter-spacing: -.01em;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.gnav a:hover, .gnav button:hover { opacity: 1; text-decoration: none; }
.gnav a.aktif { opacity: 1; font-weight: 600; }
.gnav .logo { display: flex; align-items: center; gap: 8px; opacity: 1; font-weight: 600; font-size: 14px; }
.gnav .logo svg { width: 18px; height: 18px; }
.gnav .bosluk { flex: 1; }
.gnav form { margin: 0; display: flex; }
.gnav .kullanici { color: var(--metin-2); font-size: 12px; }

/* ── Yerel (sayfa) menüsü ──────────────────────────────── */
.lnav {
  position: sticky; top: 48px; z-index: 40;
  background: var(--nav-zemin);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--cizgi-ince);
}
.lnav-ic {
  max-width: var(--genislik); margin: 0 auto; padding: 0 22px; min-height: 52px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.lnav .baslik { font-size: 21px; font-weight: 600; letter-spacing: .011em; color: var(--metin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.lnav .baslik:hover { text-decoration: none; }
.lnav nav { margin-left: auto; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.lnav nav a { font-size: 12px; color: var(--metin); opacity: .85; }
.lnav nav a.aktif { opacity: .5; pointer-events: none; }

/* ── Sayfa ─────────────────────────────────────────────── */
main { max-width: var(--genislik); margin: 0 auto; padding: 48px 22px 96px; }

.kahraman { margin: 8px 0 40px; }
.kahraman .ust-yazi { font-size: 17px; font-weight: 600; color: var(--metin-2); margin: 0 0 6px; }
.kahraman h1 { font-size: 56px; line-height: 1.07; font-weight: 600; letter-spacing: -.005em; margin: 0; }
.kahraman p { font-size: 21px; line-height: 1.38; color: var(--metin-2); margin: 12px 0 0; max-width: 680px; letter-spacing: .011em; }
.kahraman .eylemler { margin-top: 24px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

h2 { font-size: 28px; line-height: 1.14; font-weight: 600; letter-spacing: .007em; margin: 0 0 6px; }
h3 { font-size: 21px; line-height: 1.19; font-weight: 600; letter-spacing: .011em; margin: 0 0 6px; }
.bolum { margin-top: 56px; }
.bolum-baslik { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.bolum-baslik p { margin: 0; color: var(--metin-2); font-size: 15px; }
.soluk { color: var(--metin-2); }
.kucuk-yazi { font-size: 12px; line-height: 1.33; color: var(--metin-2); letter-spacing: -.01em; }

/* ── Kartlar ───────────────────────────────────────────── */
.kart {
  background: var(--yuzey);
  border-radius: var(--yaricap);
  padding: 28px;
  box-shadow: var(--golge);
}
.kart + .kart { margin-top: 20px; }
.izgara > .kart, .izgara-2 > .kart, .izgara-4 > * { margin-top: 0; }
.kart.sikisik { padding: 0; overflow: hidden; }
.izgara { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.izgara-2 { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.izgara-4 { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }

a.karo { display: block; color: inherit; transition: transform .3s cubic-bezier(.25,.1,.25,1), box-shadow .3s; }
a.karo:hover { text-decoration: none; transform: scale(1.012); box-shadow: var(--golge-hover); }
.karo .etiket { font-size: 12px; font-weight: 600; color: var(--metin-2); text-transform: none; }
.karo h3 { margin-top: 6px; }
.karo .alt { display: flex; gap: 28px; margin-top: 22px; }
.karo .alt b { display: block; font-size: 28px; font-weight: 600; letter-spacing: .004em; line-height: 1.1; }
.karo .alt span { font-size: 12px; color: var(--metin-2); }
.karo.yeni { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 190px; color: var(--baglanti); border: 2px dashed var(--cizgi); background: transparent; box-shadow: none; }
.karo.yeni .arti { font-size: 40px; line-height: 1; font-weight: 300; }

/* ── Sayı kutuları ─────────────────────────────────────── */
.olcu { background: var(--yuzey); border-radius: var(--yaricap); padding: 24px; box-shadow: var(--golge); }
.olcu .ad { font-size: 12px; font-weight: 600; color: var(--metin-2); }
.olcu .deger { font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -.003em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.olcu .not { font-size: 14px; color: var(--metin-2); margin-top: 4px; }
.olcu.tamam .ad::before, .olcu.eksik .ad::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.olcu.tamam .ad::before { background: #34c759; }
.olcu.eksik .ad::before { background: var(--cizgi); }
.degerler { display: flex; gap: 40px; flex-wrap: wrap; }
.degerler div b { display: block; font-size: 32px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.degerler div span { font-size: 12px; color: var(--metin-2); }
.renkli { background: linear-gradient(90deg, #0071e3, #9b4dff 60%, #e3418e); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Butonlar ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 8px 18px;
  background: var(--mavi); color: #fff;
  border: 0; border-radius: 980px;
  font: 400 15px/1.2 var(--font); letter-spacing: -.01em;
  cursor: pointer; white-space: nowrap;
  transition: background .2s;
}
.btn:hover { background: var(--mavi-hover); text-decoration: none; }
.btn:focus-visible { outline: 4px solid rgba(0, 125, 250, .6); outline-offset: 1px; }
.btn.buyuk { min-height: 44px; padding: 12px 24px; font-size: 17px; }
.btn.kucuk { min-height: 28px; padding: 4px 12px; font-size: 12px; }
.btn.ikincil { background: transparent; color: var(--baglanti); box-shadow: inset 0 0 0 1px var(--baglanti); }
.btn.ikincil:hover { background: var(--baglanti); color: #fff; }
.btn.gri { background: rgba(118, 118, 128, .12); color: var(--metin); }
.btn.gri:hover { background: rgba(118, 118, 128, .2); }
.btn.tehlike { background: transparent; color: var(--kirmizi); box-shadow: inset 0 0 0 1px var(--kirmizi); }
.btn.tehlike:hover { background: var(--kirmizi); color: #fff; }
.baglanti-ok::after { content: " ›"; font-size: 1.1em; }
.satir-icinde { display: inline; margin: 0; }

/* ── Bölümlü kontrol (filtre) ──────────────────────────── */
.segment { display: inline-flex; background: rgba(118, 118, 128, .12); border-radius: 9px; padding: 2px; gap: 2px; flex-wrap: wrap; }
.segment a { padding: 5px 14px; border-radius: 7px; font-size: 13px; color: var(--metin); white-space: nowrap; }
.segment a:hover { text-decoration: none; background: rgba(118, 118, 128, .12); }
.segment a.secili { background: var(--yuzey); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); font-weight: 600; }
.arac-cubugu { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.arac-cubugu .sag { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ── Tablolar ──────────────────────────────────────────── */
.tablo-kap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; letter-spacing: -.016em; }
th, td { padding: 12px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--cizgi-ince); }
th { font-size: 12px; font-weight: 600; color: var(--metin-2); white-space: nowrap; background: var(--yuzey); position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--yuzey-2); }
td.sayi, th.sayi { text-align: right; font-variant-numeric: tabular-nums; }
td.orta, th.orta { text-align: center; }
tr.toplam td { font-weight: 600; background: var(--yuzey-2); }
td a { color: var(--metin); }
td a:hover { color: var(--baglanti); }
.ilk-sutun-kalin td:first-child { font-weight: 600; }

/* ── Rozetler ──────────────────────────────────────────── */
.rozet { display: inline-block; padding: 2px 9px; border-radius: 980px; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.rozet.tamam { background: var(--yesil-zemin); color: var(--yesil); }
.rozet.uyari { background: var(--turuncu-zemin); color: var(--turuncu); }
.rozet.hata { background: var(--kirmizi-zemin); color: var(--kirmizi); }
.rozet.mavi { background: var(--mavi-zemin); color: var(--baglanti); }
.rozet.gri { background: rgba(118, 118, 128, .14); color: var(--metin-2); }

/* ── Bildirimler ───────────────────────────────────────── */
.bildirimler { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 8px; }
.bildirimler li { padding: 14px 18px; border-radius: 14px; font-size: 15px; background: var(--mavi-zemin); color: var(--metin); }
.bildirimler li::before { font-weight: 600; margin-right: 8px; }
.bildirimler li.success { background: var(--yesil-zemin); }
.bildirimler li.success::before { content: "✓"; color: var(--yesil); }
.bildirimler li.error { background: var(--kirmizi-zemin); }
.bildirimler li.error::before { content: "!"; color: var(--kirmizi); }
.bildirimler li.warning { background: var(--turuncu-zemin); }
.bildirimler li.warning::before { content: "!"; color: var(--turuncu); }

/* ── Formlar ───────────────────────────────────────────── */
.alan { margin-bottom: 18px; }
.alan > label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; letter-spacing: -.016em; }
.alan .yardim { display: block; font-size: 12px; color: var(--metin-2); margin-top: 6px; }
.alan .hata-metni { display: block; font-size: 12px; color: var(--kirmizi); margin-top: 6px; }
.alan.hatali input, .alan.hatali select, .alan.hatali textarea { border-color: var(--kirmizi); background: var(--kirmizi-zemin); }
.form-izgara { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form-hata { color: var(--kirmizi); font-size: 14px; margin-bottom: 14px; }

input[type=text], input[type=password], input[type=date], input[type=number], input[type=search], input[type=email], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font: 17px/1.3 var(--font);
  letter-spacing: -.022em;
  color: var(--metin);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.47; }
select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2386868b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--mavi); box-shadow: 0 0 0 4px rgba(0, 125, 250, .25); }
input::placeholder, textarea::placeholder { color: var(--metin-3); }

input[type=file] { font: 14px var(--font); color: var(--metin-2); width: 100%; padding: 12px; border: 1px dashed var(--cizgi); border-radius: 12px; background: var(--yuzey-2); }
input[type=file]::file-selector-button {
  font: 14px var(--font); margin-right: 12px; padding: 6px 14px; border: 0; border-radius: 980px;
  background: var(--mavi-zemin); color: var(--baglanti); cursor: pointer;
}

/* iOS anahtarı */
input[type=checkbox] {
  -webkit-appearance: none; appearance: none;
  width: 44px; height: 26px; flex: none;
  border-radius: 26px; background: rgba(120, 120, 128, .32);
  position: relative; cursor: pointer; vertical-align: middle; margin: 0;
  transition: background .25s;
}
input[type=checkbox]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 3px 1px rgba(0,0,0,.06);
  transition: transform .25s cubic-bezier(.25,.1,.25,1);
}
input[type=checkbox]:checked { background: #34c759; }
input[type=checkbox]:checked::after { transform: translateX(18px); }
input[type=checkbox]:focus-visible { outline: 4px solid rgba(0, 125, 250, .4); outline-offset: 1px; }
.alan.anahtar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--cizgi-ince); }
.alan.anahtar > label { margin: 0; }
.alan.anahtar .yardim { margin-top: 2px; }

.satir-form { display: flex; gap: 8px; align-items: center; }
.satir-form input[type=text], .satir-form select { min-height: 32px; padding: 4px 10px; font-size: 14px; border-radius: 8px; }
.satir-form select { padding-right: 28px; background-position: right 9px center; }

/* ── Karne ─────────────────────────────────────────────── */
.cevaplar { display: flex; flex-wrap: wrap; gap: 4px; }
.cevaplar span {
  width: 34px; text-align: center; border-radius: 8px; padding: 4px 0 3px;
  font: 600 13px/1.2 var(--mono);
}
.cevaplar span small { display: block; font-size: 9px; font-weight: 400; opacity: .65; margin-top: 1px; }
.cevaplar .dogru { background: var(--yesil-zemin); color: var(--yesil); }
.cevaplar .yanlis { background: var(--kirmizi-zemin); color: var(--kirmizi); }
.cevaplar .bos { background: rgba(118, 118, 128, .12); color: var(--metin-2); }
.cevaplar .iptal { background: rgba(118, 118, 128, .08); color: var(--metin-3); text-decoration: line-through; }
.ders-blok + .ders-blok { margin-top: 18px; }
.ders-blok .ad { font-size: 14px; font-weight: 600; margin-bottom: 8px; }

.cubuk { height: 6px; border-radius: 6px; background: rgba(118,118,128,.16); overflow: hidden; min-width: 80px; }
.cubuk i { display: block; height: 100%; border-radius: 6px; background: var(--mavi); }
.cubuk.dusuk i { background: #ff3b30; }
.cubuk.orta i { background: #ff9f0a; }
.cubuk.iyi i { background: #34c759; }

.isi { font-variant-numeric: tabular-nums; text-align: center !important; font-weight: 600; }
.isi.c1 { background: var(--isi-1); } .isi.c2 { background: var(--isi-2); } .isi.c3 { background: var(--isi-3); }
.isi.c4 { background: var(--isi-4); } .isi.c5 { background: var(--isi-5); } .isi.bos { color: var(--metin-3); }

.ham { font: 11px/1.4 var(--mono); white-space: pre; color: var(--metin-2); }
.liste { margin: 0; padding: 0; list-style: none; }
.liste li { padding: 12px 0; border-bottom: 1px solid var(--cizgi-ince); display: flex; gap: 12px; align-items: baseline; }
.liste li:last-child { border-bottom: 0; }

.bos-durum { text-align: center; padding: 56px 24px; color: var(--metin-2); }
.bos-durum h3 { color: var(--metin); }

/* ── Giriş ─────────────────────────────────────────────── */
.giris { min-height: calc(100vh - 48px); display: flex; align-items: center; justify-content: center; padding: 40px 22px; }
.giris-kutu { width: 100%; max-width: 420px; text-align: center; }
.giris-kutu .simge { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 16px; background: linear-gradient(135deg, #0071e3, #9b4dff); display: grid; place-items: center; }
.giris-kutu .simge svg { width: 34px; height: 34px; }
.giris-kutu h1 { font-size: 40px; font-weight: 600; margin: 0 0 8px; letter-spacing: 0; }
.giris-kutu p { color: var(--metin-2); margin: 0 0 32px; font-size: 19px; }
.giris-kutu form { text-align: left; }
.giris-kutu .btn { width: 100%; margin-top: 8px; }

/* ── Alt bilgi ─────────────────────────────────────────── */
.altbilgi { max-width: calc(var(--genislik) - 44px); margin: 0 auto; padding: 18px 22px 40px; font-size: 12px; color: var(--metin-3); border-top: 1px solid var(--cizgi-ince); }

/* ── Duyarlı ───────────────────────────────────────────── */
@media (max-width: 834px) {
  .kahraman h1 { font-size: 40px; }
  .kahraman p { font-size: 19px; }
  .izgara-4 { grid-template-columns: 1fr 1fr; }
  .izgara-2 { grid-template-columns: 1fr; }
  .lnav .baslik { font-size: 19px; max-width: 100%; }
  .lnav nav { margin-left: 0; gap: 16px; padding-bottom: 10px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  main { padding: 32px 16px 72px; }
  .gnav-ic, .lnav-ic { padding: 0 16px; gap: 18px; }
  .gnav .kullanici { display: none; }
  .kahraman h1 { font-size: 32px; }
  .kahraman p { font-size: 17px; }
  h2 { font-size: 24px; }
  .kart { padding: 20px; }
  .olcu .deger { font-size: 30px; }
  .izgara-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .degerler { gap: 24px; }
  .degerler div b { font-size: 24px; }
}

@media print {
  .gnav, .lnav, .yazdirma-gizle, .bildirimler { display: none !important; }
  body { background: #fff; color: #000; }
  main { padding: 0; }
  .kart, .olcu { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}
td.sayi .kucuk-yazi { white-space: nowrap; }

/* Mobil menüler: taşmak yerine yatay kaydır */
.gnav .logo { white-space: nowrap; }
.gnav a, .gnav button { white-space: nowrap; }
@media (max-width: 834px) {
  .gnav-ic { overflow-x: auto; scrollbar-width: none; gap: 22px; }
  .gnav-ic::-webkit-scrollbar, .lnav nav::-webkit-scrollbar { display: none; }
  .gnav .bosluk { flex: 0 0 0; }
  .lnav { position: static; }
  .lnav-ic { flex-wrap: nowrap; flex-direction: column; align-items: stretch; gap: 0; padding-top: 10px; }
  .lnav nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 12px; }
  .lnav nav a { white-space: nowrap; }
}
@media (max-width: 600px) {
  .gnav .logo span { display: none; }
}

/* Optik blok şeridi (deneme türü kartı) */
.blok-serit { display: flex; gap: 3px; margin-top: 18px; height: 10px; }
.blok-serit span { background: rgba(118, 118, 128, .16); border-radius: 3px; overflow: hidden; }
.blok-serit i { display: block; height: 100%; background: var(--mavi); }
.blok-serit span:nth-child(n+5) i { background: #9b4dff; }

/* Cevap anahtarı */
input.mono { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.anahtar-izgara { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.anahtar-izgara span { width: 34px; text-align: center; border-radius: 8px; padding: 4px 0 3px; font: 600 13px/1.2 var(--mono); background: var(--mavi-zemin); color: var(--baglanti); position: relative; }
.anahtar-izgara span small { display: block; font-size: 9px; font-weight: 400; color: var(--metin-2); }
.anahtar-izgara span.iptal { background: rgba(118,118,128,.12); color: var(--metin-3); text-decoration: line-through; }
.anahtar-izgara span.kazanimli::after { content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: #34c759; }

/* Toplu karne: her öğrenci ayrı sayfa */
.karne-sayfa + .karne-sayfa { margin-top: 96px; padding-top: 48px; border-top: 1px solid var(--cizgi); }
@media print {
  .karne-sayfa { break-after: page; }
  .karne-sayfa + .karne-sayfa { margin-top: 0; padding-top: 0; border-top: 0; }
  .karne-sayfa .bolum { margin-top: 18px; }
  .karne-sayfa .kahraman h1 { font-size: 32px; }
}

/* ── Raporlar ─────────────────────────────────────────── */
.oran { position: relative; height: 22px; min-width: 92px; border-radius: 6px; background: rgba(118,118,128,.12); overflow: hidden; }
.oran i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; }
.oran.dogru i { background: linear-gradient(90deg, #1d8a3e, #34c759); }
.oran.yanlis i { background: linear-gradient(90deg, #d70015, #ff6961); }
.oran.bos-renk i { background: rgba(118,118,128,.35); }
.oran span { position: relative; display: block; text-align: center; font: 600 11px/22px var(--font); color: var(--metin); white-space: nowrap; letter-spacing: 0; }
.oran.dolu span { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
td.oran-hucre { padding: 8px 6px; min-width: 96px; }

.secim-paneli { background: var(--yuzey); border-radius: var(--yaricap); box-shadow: var(--golge); padding: 22px 24px; margin-bottom: 28px; }
.secim-paneli .satir { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.secim-paneli .alan { margin-bottom: 0; }
.deneme-secimi { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.deneme-secimi label { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 980px; background: rgba(118,118,128,.1); font-size: 13px; cursor: pointer; font-weight: 500; margin: 0; }
.deneme-secimi input[type=checkbox] { width: 16px; height: 16px; border-radius: 4px; }
.deneme-secimi input[type=checkbox]::after { display: none; }
.deneme-secimi input[type=checkbox]:checked { background: var(--mavi); }
.deneme-secimi label:has(input:checked) { background: var(--mavi-zemin); color: var(--baglanti); }
.rapor-eylemleri { display: flex; gap: 10px; flex-wrap: wrap; }
.konu-grubu + .konu-grubu { margin-top: 22px; }
.konu-grubu .bolum-baslik { margin-bottom: 10px; }
.sayi-rozet { display: inline-block; min-width: 26px; padding: 1px 8px; border-radius: 980px; background: var(--mavi-zemin); color: var(--baglanti); font-size: 12px; font-weight: 700; text-align: center; }
.yuzde-renk-dusuk { color: var(--kirmizi); font-weight: 700; }
.yuzde-renk-orta { color: var(--turuncu); font-weight: 700; }
.yuzde-renk-iyi { color: var(--yesil); font-weight: 700; }
.egilim-yukari { color: var(--yesil); font-weight: 700; }
.egilim-asagi { color: var(--kirmizi); font-weight: 700; }
.izgara-6 { display: grid; gap: 14px; grid-template-columns: repeat(6, 1fr); }
@media (max-width: 834px) { .izgara-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .izgara-6 { grid-template-columns: 1fr 1fr; } }
.olcu.kucuk { padding: 16px 18px; }
.olcu.kucuk .deger { font-size: 26px; margin-top: 4px; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .secim-paneli, .rapor-eylemleri, .segment { display: none !important; }
  table { font-size: 10px; }
  th, td { padding: 4px 6px; }
}