/* dersburada — sade site stili. Renkler yalnız jetonlar.css değişkenlerinden. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--zemin); color: var(--yazi);
  font: 16px/1.65 var(--yazi-govde);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--vurgu); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--yazi-baslik); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 var(--b4); }
h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 800; }
h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; margin-top: var(--b7); }
h3 { font-size: 19px; font-weight: 700; }
p { margin: 0 0 var(--b4); }
.vurgu { color: var(--vurgu); }
.soluk { color: var(--yazi2); }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--vurgu); outline-offset: 2px; border-radius: 4px; }
.atla { position: absolute; left: -9999px; top: 8px; background: var(--vurgu); color: var(--vurgu-ustu); padding: 8px 14px; border-radius: var(--kose-kucuk); z-index: 10; }
.atla:focus { left: 8px; }

/* ── Üst bar ───────────────────────────── */
.ust { border-bottom: 1px solid var(--cizgi); background: var(--zemin); position: relative; }
.ust-ic { max-width: var(--gen-icerik); margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: var(--b5); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--yazi); }
.logo-yazi { display: flex; flex-direction: column; }
.logo-ad { font: 800 22px/1 var(--yazi-baslik); letter-spacing: -0.035em; }
.logo-slogan { font-size: 11.5px; font-weight: 500; color: var(--vurgu); margin-top: 3px; }
.menu { margin-left: auto; }
.menu ul { list-style: none; display: flex; gap: var(--b5); margin: 0; padding: 0; }
.menu a { color: var(--yazi); text-decoration: none; font-weight: 500; font-size: 15px; padding: 10px 0; display: inline-block; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--vurgu); }
.ust-arac { display: flex; gap: 4px; }
.ikon-dugme {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--yazi); border-radius: var(--kose-orta); cursor: pointer;
}
.ikon-dugme:hover { background: var(--zemin2); }
.menu-ac { display: none; }

.gorunum {
  position: absolute; right: 16px; top: calc(100% + 6px); z-index: 20; width: min(340px, calc(100vw - 32px));
  background: var(--yuzey); border: 1px solid var(--cizgi2); border-radius: var(--kose-buyuk); padding: var(--b4);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.12); display: grid; gap: var(--b4);
}
.gorunum[hidden] { display: none; }
.gorunum-satir { display: grid; gap: 8px; }
.gorunum-satir > span { font-size: 13px; font-weight: 600; color: var(--yazi2); }
.secim { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.secim button {
  min-height: 44px; border: 1.5px solid var(--cizgi2); background: transparent; color: var(--yazi);
  border-radius: var(--kose-orta); font: 600 14px var(--yazi-govde); cursor: pointer;
}
.secim button[aria-pressed="true"] { border-color: var(--vurgu); color: var(--vurgu); }
.renkler { display: flex; flex-wrap: wrap; gap: 10px; }
.renk {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; background: var(--r-acik);
  border: 3px solid var(--yuzey); box-shadow: 0 0 0 1px var(--cizgi2);
}
:root[data-tema="koyu"] .renk { background: var(--r-koyu); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .renk { background: var(--r-koyu); } }
.renk[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--yazi); }

/* ── İçerik ───────────────────────────── */
main { max-width: var(--gen-icerik); margin: 0 auto; padding: var(--b6) 16px var(--b8); }
.metin { max-width: var(--gen-metin); }
.giris { font-size: 19px; color: var(--yazi2); }
.kirinti ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 var(--b5); font-size: 14px; color: var(--yazi2); }
.kirinti li + li::before { content: "›"; margin-right: 6px; }
.kirinti a { color: var(--yazi2); }

.kahraman { text-align: center; padding: var(--b7) 0 var(--b6); display: flex; flex-direction: column; align-items: center; gap: var(--b3); }
.kahraman h1 { margin: 0; }
.kahraman .giris { margin: 0 0 var(--b3); }

.arama {
  width: min(640px, 100%); display: flex; align-items: center; gap: 10px; margin: 0 auto var(--b3);
  border: 1.5px solid var(--cizgi2); border-radius: 14px; padding: 6px 6px 6px 16px; background: var(--yuzey); color: var(--yazi2);
}
.arama:focus-within { border-color: var(--vurgu); }
.arama input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--yazi); font: 17px var(--yazi-govde); padding: 10px 0; }
.arama input::placeholder { color: var(--yazi2); }
.metin .arama { margin-left: 0; }

.cipler { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; }
.cipler a {
  display: inline-block; padding: 8px 16px; border: 1px solid var(--cizgi2); border-radius: var(--kose-tam);
  color: var(--yazi); text-decoration: none; font-size: 15px; font-weight: 500; min-height: 40px;
}
.cipler a:hover { border-color: var(--vurgu); color: var(--vurgu); }

.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px;
  border: 1.5px solid var(--vurgu); background: var(--vurgu); color: var(--vurgu-ustu);
  border-radius: var(--kose-orta); font: 600 15px var(--yazi-govde); text-decoration: none; cursor: pointer;
}
.dugme:hover { filter: brightness(1.08); }
.dugme.ikincil { background: transparent; color: var(--vurgu); }
.kart .dugme + .dugme { margin-left: 8px; }

.bolum { margin-top: var(--b7); }
.bolum > h2 { margin-top: 0; }
.izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--b4); }
.izgara.iki { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: var(--b5); }
.kart { border: 1px solid var(--cizgi); border-radius: var(--kose-buyuk); padding: var(--b5); background: var(--yuzey); }
.kart h2 { margin-top: 0; font-size: 21px; }
.kart p:last-child { margin-bottom: 0; }
.kart-baglanti { text-decoration: none; color: var(--yazi); display: block; }
.kart-baglanti:hover { border-color: var(--vurgu); }
.kart-baglanti h3 { color: var(--vurgu); }
.kart-baglanti p { color: var(--yazi2); font-size: 15px; }
.vurgu-kart { border-color: var(--vurgu); margin: var(--b6) 0; }
.iki-sutun { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--b6); align-items: start; }
.kurucu-kart h2 { font-size: 20px; margin-bottom: 4px; }

.adimlar { padding-left: 22px; }
.adimlar li { margin-bottom: 10px; }
blockquote { margin: var(--b6) 0; padding: var(--b4) var(--b5); background: var(--zemin2); border-radius: var(--kose-orta); }
blockquote p { font-size: 18px; margin-bottom: 6px; }
blockquote footer { color: var(--yazi2); font-size: 14px; }
address { font-style: normal; color: var(--yazi2); }
.liste-sade { padding-left: 20px; }
.liste-sade li { margin-bottom: 6px; }
.liste-tik { list-style: none; padding: 0; }
.liste-tik li { padding-left: 28px; position: relative; margin-bottom: 8px; }
.liste-tik li::before { content: "✓"; position: absolute; left: 4px; color: var(--vurgu); font-weight: 700; }
.tema-grup ol { padding-left: 22px; }
.sonuclar { list-style: none; padding: 0; }
.sonuclar li { padding: var(--b4) 0; border-bottom: 1px solid var(--cizgi); }
.sonuclar p { margin: 4px 0 0; color: var(--yazi2); font-size: 15px; }
.sss details { border-bottom: 1px solid var(--cizgi); padding: 14px 0; }
.sss summary { cursor: pointer; font-weight: 600; }

/* ── Alt bilgi ───────────────────────────── */
.alt { border-top: 1px solid var(--cizgi); background: var(--zemin2); font-size: 15px; }
.alt-ic { max-width: var(--gen-icerik); margin: 0 auto; padding: var(--b6) 16px; display: flex; flex-wrap: wrap; gap: var(--b6); justify-content: space-between; }
.alt-marka { max-width: 340px; }
.alt-marka p { color: var(--yazi2); margin: 10px 0 0; }
.alt-menu { display: flex; flex-wrap: wrap; gap: var(--b6); }
.alt-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alt a { color: var(--yazi); }
.alt-yasal { max-width: var(--gen-icerik); margin: 0 auto; padding: 0 16px var(--b4); display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 500; }
.alt-son {
  max-width: var(--gen-icerik); margin: 0 auto; padding: var(--b4) 16px var(--b5); border-top: 1px solid var(--cizgi);
  display: flex; flex-wrap: wrap; gap: var(--b4); align-items: center; justify-content: space-between; color: var(--yazi2);
}
.odeme-logo { height: 24px; width: auto; }
.odeme-koyu { display: none; }
:root[data-tema="koyu"] .odeme-acik { display: none; }
:root[data-tema="koyu"] .odeme-koyu { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .odeme-acik { display: none; }
  :root:not([data-tema="acik"]) .odeme-koyu { display: inline; }
}

/* ── Telefon ───────────────────────────── */
@media (max-width: 860px) {
  .menu-ac { display: inline-flex; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--zemin); border-bottom: 1px solid var(--cizgi); z-index: 15; }
  .menu.acik { display: block; }
  .menu ul { flex-direction: column; gap: 0; padding: 8px 16px; }
  .menu a { display: block; padding: 12px 0; }
  .ust-arac { margin-left: auto; }
  .iki-sutun { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .logo-slogan { display: none; }
  .arama .dugme { padding: 10px 14px; }
}

/* ── Hesaplama araçları ───────────────────────────── */
.arac { max-width: 860px; }
.hesap fieldset { border: 1px solid var(--cizgi); border-radius: var(--kose-buyuk); padding: var(--b4) var(--b5) var(--b5); margin: 0 0 var(--b4); background: var(--yuzey); }
.hesap legend { font: 800 17px var(--yazi-baslik); padding: 0 8px; margin-left: -8px; }
.ders-satir { display: grid; grid-template-columns: minmax(0, 1fr) 76px 76px 70px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--cizgi); }
.ders-satir:last-of-type { border-bottom: 0; }
.ders-baslik { font-size: 13px; font-weight: 600; color: var(--yazi2); border-bottom: 1px solid var(--cizgi2); }
.ders-baslik span:not(:first-child) { text-align: center; }
.ders-ad { font-weight: 500; }
.ders-ad .soluk { font-weight: 400; font-size: 14px; }
.hesap input[type="number"] {
  width: 100%; min-height: 44px; padding: 8px; text-align: center; font: 600 16px var(--yazi-govde);
  border: 1.5px solid var(--cizgi2); border-radius: var(--kose-kucuk); background: var(--zemin); color: var(--yazi);
  -moz-appearance: textfield;
}
.hesap input::-webkit-outer-spin-button, .hesap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hesap input:focus { border-color: var(--vurgu); outline: none; }
.net { text-align: center; font-weight: 700; color: var(--vurgu); font-variant-numeric: tabular-nums; }
.obp-satir { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 8px; align-items: center; }
.toplam { margin: var(--b3) 0 0; text-align: right; font-weight: 600; }
.toplam output { color: var(--vurgu); }
.hesap-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--b4) 0 var(--b6); }
.hesap-sonuc { margin-bottom: var(--b6); scroll-margin-top: 16px; }
.hesap-sonuc h2 { margin-top: 0; }
.tablo-kutu { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: var(--kose-buyuk); }
.tablo-kutu table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tablo-kutu th, .tablo-kutu td { padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.tablo-kutu th:first-child { text-align: left; }
.tablo-kutu thead th { font-size: 13px; color: var(--yazi2); background: var(--zemin2); }
.tablo-kutu tbody tr:last-child th, .tablo-kutu tbody tr:last-child td { border-bottom: 0; }
.tablo-kutu td strong { color: var(--vurgu); }
.sonuc-kutular { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--b4); }
.sonuc-kutular .kart { display: flex; flex-direction: column; gap: 6px; }
.buyuk-sayi { font: 800 36px var(--yazi-baslik); color: var(--vurgu); font-variant-numeric: tabular-nums; }
.uyari { margin-top: var(--b4); font-size: 14px; color: var(--yazi2); }
@media (max-width: 520px) {
  .ders-satir { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ders-ad { grid-column: 1 / -1; }
  .ders-baslik span:first-child { grid-column: 1 / -1; display: none; }
  .hesap fieldset { padding: var(--b3) var(--b4) var(--b4); }
  .obp-satir { grid-template-columns: 1fr; }
}

/* ── Hizmet sayfaları ───────────────────────────── */
.paketler { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: stretch; }
.paket { position: relative; display: flex; flex-direction: column; gap: 6px; }
.paket h3 { margin: 0; font-size: 22px; }
.paket .liste-tik { flex: 1; margin: 8px 0 16px; font-size: 15px; }
.paket .dugme { align-self: stretch; }
.paket-one { border: 2px solid var(--vurgu); }
.paket-etiket { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.rozet { position: absolute; top: -12px; left: 20px; background: var(--vurgu); color: var(--vurgu-ustu); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--kose-tam); }
.fiyat { font: 800 34px var(--yazi-baslik); margin: 4px 0; color: var(--vurgu); }
.fiyat .soluk { font: 500 15px var(--yazi-govde); }
.grup-baslik { margin: var(--b6) 0 var(--b3); }
.kutular { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.kutu { display: flex; flex-direction: column; gap: 4px; }
.kutu h4 { margin: 0; font: 700 17px var(--yazi-baslik); }
.kutu .soluk { font-size: 14px; flex: 1; }
.kutu-saat { font-size: 14px; font-weight: 600; color: var(--vurgu); margin: 4px 0 10px; }
.surec { list-style: none; padding: 0; counter-reset: none; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.surec h3 { margin: 6px 0 4px; font-size: 17px; }
.surec p { margin: 0; color: var(--yazi2); font-size: 15px; }
.adim-no { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; align-items: center; justify-content: center; background: var(--zemin2); color: var(--vurgu); font-weight: 800; }
.net-sec { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 10px; align-items: center; margin: var(--b5) 0; }
.net-sec input { min-height: 48px; text-align: center; font: 700 18px var(--yazi-govde); border: 1.5px solid var(--cizgi2); border-radius: var(--kose-orta); background: var(--yuzey); color: var(--yazi); }
.seviye { margin-bottom: var(--b4); }
.seviye h2 { margin: 0 0 8px; font-size: 21px; }
.seviye.secili { border: 2px solid var(--vurgu); }
/* ── Formlar ───────────────────────────── */
.form { display: grid; gap: var(--b4); }
.alan { display: grid; gap: 6px; }
.alan-cift { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--b4); }
.form label, .alan .etiket { font-weight: 600; font-size: 15px; }
.form input:not([type="checkbox"]):not([type="radio"]), .form select, .form textarea, .admin-giris input {
  width: 100%; min-height: 46px; padding: 10px 12px; font: 16px var(--yazi-govde); color: var(--yazi);
  background: var(--zemin); border: 1.5px solid var(--cizgi2); border-radius: var(--kose-orta);
}
.form textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--vurgu); outline: none; }
.onay { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: 14px !important; color: var(--yazi2); }
.onay input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--vurgu); flex: none; }
.form-hata { color: var(--hata); font-weight: 600; margin: 0; }
.form-tamam h3 { color: var(--basari); }
.ilgi { margin: 0; padding: 10px 12px; background: var(--zemin2); border-radius: var(--kose-orta); font-weight: 500; }
.iletisim-kart { margin: var(--b5) 0 var(--b6); }
.iletisim-kart h2 { margin-top: 0; }
.form .dugme { justify-self: start; }

/* ── Konuşma balonları ───────────────────────────── */
.konusma-liste { list-style: none; padding: 0; margin: var(--b4) 0; display: grid; gap: 10px; }
.balon { max-width: 85%; padding: 10px 14px; border-radius: 14px; background: var(--zemin2); }
.balon p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.balon-ust { font-size: 12.5px; color: var(--yazi2); }
.balon.giden { justify-self: end; background: color-mix(in srgb, var(--vurgu) 12%, var(--zemin)); }
.balon.gelen { justify-self: start; border: 1px solid var(--cizgi); background: var(--yuzey); }

/* ── Yönetim paneli ───────────────────────────── */
.adminim { display: flex; flex-wrap: wrap; gap: var(--b5); align-items: flex-start; }
.admin-giris { max-width: 380px; margin: var(--b7) auto; display: grid; gap: 10px; }
.admin-giris h1 { font-size: 28px; }
.admin-yan { flex: 1 1 200px; max-width: 240px; display: grid; gap: 8px; }
.admin-yan button { min-height: 44px; text-align: left; padding: 10px 14px; border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--yazi); border-radius: var(--kose-orta); font: 600 15px var(--yazi-govde); cursor: pointer; }
.admin-yan button.aktif { border-color: var(--vurgu); color: var(--vurgu); }
.admin-cikis { margin-top: var(--b4); }
.admin-not { font-size: 13px; }
.admin-ana { flex: 999 1 560px; min-width: 0; }
.admin-ust { display: flex; flex-wrap: wrap; gap: var(--b4); align-items: center; justify-content: space-between; margin-bottom: var(--b4); }
.admin-ust h1 { font-size: 26px; margin: 0; }
.admin-filtre { grid-template-columns: repeat(4, auto); }
.admin-filtre button { padding: 0 12px; }
.admin-iki { display: flex; flex-wrap: wrap; gap: var(--b4); align-items: flex-start; }
.admin-liste { list-style: none; margin: 0; padding: 0; flex: 1 1 300px; max-width: 420px; display: grid; gap: 8px; max-height: 75vh; overflow-y: auto; }
.admin-satir { width: 100%; text-align: left; display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: var(--kose-orta); background: var(--yuzey); color: var(--yazi); cursor: pointer; font: 14px var(--yazi-govde); }
.admin-satir.secili { border-color: var(--vurgu); box-shadow: 0 0 0 1px var(--vurgu); }
.admin-satir-ust { display: flex; justify-content: space-between; gap: 8px; }
.admin-ozet { color: var(--yazi2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.durum { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: var(--kose-tam); background: var(--zemin2); white-space: nowrap; }
.durum-yeni, .durum-kullanici_yazdi { background: var(--vurgu); color: var(--vurgu-ustu); }
.admin-detay { flex: 2 1 380px; min-width: 0; }
.admin-detay h2 { margin-top: 0; }
.admin-bilgi { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 14px; margin: 0 0 var(--b4); }
.admin-bilgi dt { color: var(--yazi2); }
.admin-bilgi dd { margin: 0; overflow-wrap: anywhere; }
/* ── Mağaza ───────────────────────────── */
.sepet-dugme { position: relative; }
.sepet-sayi { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--vurgu); color: var(--vurgu-ustu); font: 700 11px/18px var(--yazi-govde); text-align: center; }
.raf-menu ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: var(--b4) 0 0; }
.raf-menu a { display: inline-block; padding: 8px 14px; border: 1px solid var(--cizgi2); border-radius: var(--kose-tam); color: var(--yazi); text-decoration: none; font-weight: 500; font-size: 14px; }
.raf { margin-top: var(--b7); scroll-margin-top: 16px; }
.raf h2 { margin-top: 0; }
.urunler { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.urun-kart { display: flex; flex-direction: column; gap: 8px; padding: var(--b4); }
.urun-kart h3 { margin: 0; font-size: 18px; }
.urun-kart h3 a { color: var(--yazi); text-decoration: none; }
.urun-kart h3 a:hover { color: var(--vurgu); }
.urun-kart > .soluk { font-size: 14px; margin: 0; flex: 1; }
.urun-gorsel { display: block; aspect-ratio: 4 / 3; border-radius: var(--kose-orta); overflow: hidden; background: var(--zemin2); }
.urun-gorsel img, .urun-buyuk-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.urun-yer { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font: 800 56px var(--yazi-baslik); color: var(--vurgu); opacity: 0.35; }
.rozetler { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.rozetler li { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: var(--kose-tam); background: var(--zemin2); color: var(--yazi); }
.rozetler li:first-child { background: var(--vurgu); color: var(--vurgu-ustu); }
.urun-fiyat { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.urun-fiyat strong { font: 800 24px var(--yazi-baslik); color: var(--yazi); }
.indirim { font-size: 13px; font-weight: 700; color: var(--basari); }
.urun-kart .dugme { width: 100%; }
.dugme.buyuk { min-height: 52px; font-size: 17px; padding: 12px 28px; }
.haber-ver { display: grid; gap: 6px; }
.haber-ver input { min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--cizgi2); border-radius: var(--kose-orta); background: var(--zemin); color: var(--yazi); font: 15px var(--yazi-govde); }
.haber-sonuc { font-size: 13px; }
.urun-ust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--b6); align-items: start; }
.urun-buyuk-gorsel { aspect-ratio: 4 / 3; border-radius: var(--kose-buyuk); overflow: hidden; background: var(--zemin2); }
.urun-bilgi { display: grid; gap: var(--b3); }
.urun-bilgi h1 { margin: 0; }
.urun-bilgi .urun-fiyat strong { font-size: 34px; }
.urun-guven { font-size: 15px; color: var(--yazi2); margin-top: var(--b3); }
.urun-aciklama { margin-top: var(--b7); }
.sepet-kalemler { list-style: none; padding: 0; margin: 0 0 var(--b4); border: 1px solid var(--cizgi); border-radius: var(--kose-buyuk); }
.sepet-kalem { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--cizgi); }
.sepet-kalem:last-child { border-bottom: 0; }
.sepet-ad { flex: 1 1 220px; font-weight: 600; color: var(--yazi); }
.adet { display: inline-flex; align-items: center; border: 1px solid var(--cizgi2); border-radius: var(--kose-orta); }
.adet .ikon-dugme { width: 40px; height: 40px; font-size: 20px; }
.adet-sayi { min-width: 28px; text-align: center; font-weight: 700; }
.sepet-tutar { min-width: 90px; text-align: right; }
.sepet-sil { border: 0; background: transparent; color: var(--yazi2); text-decoration: underline; cursor: pointer; font: 14px var(--yazi-govde); min-height: 44px; }
.sepet-toplam { font-size: 20px; text-align: right; }
.sepet-toplam strong { font: 800 26px var(--yazi-baslik); color: var(--vurgu); }
#siparis-form { margin-top: var(--b5); }
#siparis-form h2 { margin-top: 0; }
.fatura-sec { border: 0; padding: 0; margin: 0; display: flex; gap: var(--b5); }
.fatura-sec legend { font-weight: 600; margin-bottom: 6px; }
.odeme-not { margin: 0; }
.sepet-bildirim { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 140%); z-index: 40; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; background: var(--yazi); color: var(--zemin); border-radius: var(--kose-buyuk); box-shadow: 0 10px 30px rgb(0 0 0 / 0.25); transition: transform 0.25s; max-width: calc(100vw - 32px); }
.sepet-bildirim.acik { transform: translate(-50%, 0); }
.sepet-bildirim .dugme { min-height: 38px; padding: 6px 14px; }
@media (max-width: 760px) { .urun-ust { grid-template-columns: 1fr; } }
@media (max-width: 1000px) {
  .menu-ac { display: inline-flex; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--zemin); border-bottom: 1px solid var(--cizgi); z-index: 15; }
  .menu.acik { display: block; }
  .menu ul { flex-direction: column; gap: 0; padding: 8px 16px; }
  .menu a { display: block; padding: 12px 0; }
  .ust-arac { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .sepet-bildirim { transition: none; } }
/* ── Yönetim: mağaza ───────────────────────────── */
.admin-tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-tablo th, .admin-tablo td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.admin-tablo th { background: var(--zemin2); font-size: 13px; color: var(--yazi2); }
.admin-tablo .dugme { min-height: 36px; padding: 4px 12px; font-size: 13px; }
.admin-gonderi { margin: 10px 0; padding: var(--b3) var(--b4); display: grid; gap: 8px; }
.admin-gonderi-satir { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-gonderi-satir input, .admin-gonderi-satir select { min-height: 42px; padding: 6px 10px; border: 1.5px solid var(--cizgi2); border-radius: var(--kose-kucuk); background: var(--zemin); color: var(--yazi); font: 15px var(--yazi-govde); flex: 1 1 160px; }
.admin-gonderi-satir .dugme { min-height: 42px; }
.admin-rozet { display: flex; flex-wrap: wrap; gap: 14px; }
.admin-gorsel img { max-width: 260px; border-radius: var(--kose-orta); border: 1px solid var(--cizgi); }
.admin-fatura { margin-bottom: var(--b4); display: grid; gap: 10px; }
.admin-fatura.bekliyor { border-color: var(--vurgu); }
/* ── Çalışma araçları (ana sayfa) ───────────────────────────── */
.arac-izgara { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.arac-izgara .kart h3 { margin-bottom: 4px; }
.kucuk { font-size: 13px; margin: 4px 0; }
.sayim { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: var(--b3) 0; text-align: center; font-size: 12px; color: var(--yazi2); }
.sayim b { display: block; font: 800 26px var(--yazi-baslik); color: var(--vurgu); font-variant-numeric: tabular-nums; }
.cubuk { height: 10px; border-radius: 5px; background: var(--zemin2); overflow: hidden; margin: 8px 0; }
.cubuk > span { display: block; height: 100%; width: 0; background: var(--vurgu); border-radius: 5px; transition: width 0.4s; }
.satir-form { display: flex; gap: 8px; margin: var(--b3) 0 6px; }
.satir-form input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1.5px solid var(--cizgi2); border-radius: var(--kose-orta); background: var(--zemin); color: var(--yazi); font: 15px var(--yazi-govde); }
.baglanti-dugme { border: 0; background: transparent; color: var(--yazi2); text-decoration: underline; cursor: pointer; font: 13px var(--yazi-govde); padding: 6px 0; min-height: 32px; }
.odak-sure { font: 800 48px var(--yazi-baslik); text-align: center; margin: var(--b3) 0; color: var(--yazi); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
#odak .satir-form .dugme { flex: 1; }

/* ── Çalışma planı ───────────────────────────── */
.plan-sinavlar { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin: 0 0 var(--b4); }
.plan-satir, .plan-dersler .ders-satir { grid-template-columns: minmax(0, 1fr) 120px 100px; }
.plan-cubuklar { margin: var(--b4) 0; }
.plan-cubuklar h3 { margin-top: 0; }
.plan-cubuk { display: grid; grid-template-columns: minmax(110px, 180px) 1fr 48px; gap: 10px; align-items: center; font-size: 14px; }
.plan-cubuk b { text-align: right; color: var(--vurgu); }
.hesap-sonuc h3 { margin-top: var(--b5); }
@media (max-width: 520px) {
  .plan-dersler .ders-satir { grid-template-columns: 1fr 1fr; }
  .plan-satir span:first-child { display: none; }
  .plan-satir { grid-template-columns: 1fr 1fr; }
}
@media print {
  .ust, .alt, .hesap, .plan-sinavlar, .vurgu-kart, .hesap-dugmeler, .giris, .kirinti, .sss { display: none !important; }
  main { padding: 0; }
  .hesap-sonuc { display: block !important; }
}
/* ── Sizi arayalım ───────────────────────────── */
.geri-arama { margin: var(--b6) 0; border-color: var(--vurgu); }
.geri-arama h2 { margin-top: 0; }
.geri-arama .secim { display: flex; gap: var(--b5); }
.geri-arama .alan label { display: grid; gap: 6px; }
/* ── OYSS ───────────────────────────── */
.oyss-tablo { margin: var(--b5) 0 var(--b3); }
.oyss-tablo table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.oyss-tablo th, .oyss-tablo td { padding: 10px 12px; border-bottom: 1px solid var(--cizgi); text-align: center; white-space: nowrap; }
.oyss-tablo tbody th, .oyss-tablo tfoot th { text-align: left; white-space: normal; font-weight: 400; min-width: 260px; }
.oyss-tablo thead th { background: var(--zemin2); font-size: 13px; color: var(--yazi2); }
.oyss-tablo tfoot th, .oyss-tablo tfoot td { font-weight: 700; background: var(--zemin2); }
.cikti-tema { display: block; font-size: 12px; font-weight: 700; color: var(--yazi2); text-transform: uppercase; letter-spacing: 0.03em; }
.cikti-kod { font-weight: 700; color: var(--vurgu); }
.oyss-liste { list-style: none; padding: 0; margin: 0 0 var(--b4); display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; }
.oyss-liste a { display: block; padding: 8px 0; border-bottom: 1px solid var(--cizgi); color: var(--yazi); text-decoration: none; }
.oyss-liste a:hover { color: var(--vurgu); }
/* ── Taktik kapsülleri ───────────────────────────── */
.kapsuller { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--b5); align-items: flex-start; }
.kapsul { border: 1.5px solid var(--vurgu); border-radius: 28px; background: var(--yuzey); max-width: 100%; }
.kapsul summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 20px; min-height: 48px; font-weight: 700; }
.kapsul summary::-webkit-details-marker { display: none; }
.kapsul summary::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--vurgu); flex: none; }
.kapsul[open] { border-radius: var(--kose-buyuk); flex: 1 1 100%; }
.kapsul[open] summary { background: var(--vurgu); color: var(--vurgu-ustu); border-radius: calc(var(--kose-buyuk) - 2px) calc(var(--kose-buyuk) - 2px) 0 0; }
.kapsul[open] summary::before { background: var(--vurgu-ustu); }
.kapsul-ders { font-size: 12px; font-weight: 600; opacity: 0.75; }
.kapsul-ic { padding: 14px 20px 18px; }
.kapsul-ic p { margin: 0 0 12px; }
.kapsul-baglanti { display: inline-flex; align-items: center; padding: 12px 20px; text-decoration: none; color: var(--yazi); font-weight: 700; }
.kapsul-baglanti:hover { background: var(--vurgu); color: var(--vurgu-ustu); }
.alt-menu ul { align-content: start; }

/* ── Deneme yönetimi / takvim ───────────────────────────── */
.anahtar-bloklar { display: grid; gap: 8px; }
.anahtar-blok { display: grid; grid-template-columns: minmax(140px, 220px) 1fr auto auto; gap: 8px; align-items: center; }
.anahtar-blok select, .anahtar-blok input { min-height: 42px; padding: 6px 10px; border: 1.5px solid var(--cizgi2); border-radius: var(--kose-kucuk); background: var(--zemin); color: var(--yazi); font: 15px var(--yazi-govde); }
.anahtar-blok input { font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.takvim-liste { list-style: none; padding: 0; display: grid; gap: 8px; }
.takvim-liste li { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 16px; }
@media (max-width: 600px) { .anahtar-blok { grid-template-columns: 1fr 1fr; } }
/* ── Üyelik ───────────────────────────── */
.hesap-dugme { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; margin-left: 4px; border: 1.5px solid var(--vurgu); border-radius: var(--kose-orta); color: var(--vurgu); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.hesap-dugme:hover { background: var(--vurgu); color: var(--vurgu-ustu); }
.giris-kutu { max-width: 420px; margin: var(--b5) auto; display: grid; gap: var(--b4); }
.giris-kutu h1 { font-size: 30px; margin: 0; }
.google-dugme { background: var(--yuzey); color: var(--yazi); border-color: var(--cizgi2); width: 100%; }
.google-dugme:hover { border-color: var(--vurgu); filter: none; }
.ayrac { display: flex; align-items: center; gap: 10px; color: var(--yazi2); font-size: 13px; margin: 0; }
.ayrac::before, .ayrac::after { content: ""; flex: 1; height: 1px; background: var(--cizgi); }
.giris-kutu .form .dugme { width: 100%; justify-self: stretch; }
.gecis { text-align: center; margin: 0; color: var(--yazi2); }
.panel-ust { display: flex; flex-wrap: wrap; gap: var(--b4); align-items: center; justify-content: space-between; margin-bottom: var(--b4); }
.panel-ust h1 { margin: 0; }
.panel-izgara { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--b5); align-items: start; }
.panel-yan { display: grid; gap: var(--b4); }
.panel .kart h2 { margin-top: 0; font-size: 20px; }
.rol-sec { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px var(--b5); }
.rol-sec legend { font-weight: 600; margin-bottom: 8px; }
.uyari-kart { border-color: var(--uyari); }
@media (max-width: 860px) { .panel-izgara { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .hesap-dugme { padding: 0 10px; } }
/* ── Yönetim: bugün ───────────────────────────── */
.admin-ozet-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: var(--b5); }
.admin-sayi { display: grid; gap: 6px; text-align: left; cursor: pointer; font: inherit; color: var(--yazi); }
.admin-sayi strong { font: 800 30px var(--yazi-baslik); }
.admin-sayi.dikkat { border-color: var(--vurgu); }
.admin-sayi.dikkat strong { color: var(--vurgu); }
#uye-ara { min-height: 42px; padding: 6px 12px; border: 1.5px solid var(--cizgi2); border-radius: var(--kose-orta); background: var(--zemin); color: var(--yazi); font: 15px var(--yazi-govde); min-width: 240px; }
/* ── Duyuru bandı ───────────────────────────── */
.duyuru { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 48px 8px 16px; background: var(--vurgu); color: var(--vurgu-ustu); font-weight: 600; font-size: 14px; text-align: center; position: relative; }
.duyuru[hidden] { display: none; }
.duyuru a { color: var(--vurgu-ustu); }
.duyuru-kapat { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: transparent; color: var(--vurgu-ustu); font-size: 22px; cursor: pointer; border-radius: 50%; }
.duyuru-kapat:hover { background: rgb(255 255 255 / 0.15); }
/* ── YAZDIRMA / PDF — KATI KURAL: tarayıcı üst/alt bilgisi (tarih, başlık, adres) ASLA çıkmaz ── */
@page { margin: 0; }
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  body { padding: 14mm 12mm 12mm; }
  .ust, .alt, .atla, .duyuru, .kirinti, .sepet-bildirim, .gorunum { display: none !important; }
  main { max-width: none; padding: 0; }
  a { color: #000; text-decoration: none; }
  .kart { break-inside: avoid; }
}
/* ── Mini deneme ───────────────────────────── */
.mini-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--b5); align-items: start; margin-top: var(--b4); }
.mini-pdf canvas.pdf-sayfa { display: block; width: 100%; height: auto; margin-bottom: 12px; border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk); background: #fff; }
.mini-optik { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.mini-optik h2 { margin-top: 0; font-size: 20px; }
.optik-satir { border: 0; margin: 0; padding: 4px 0; display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--cizgi); }
.optik-satir legend { float: left; width: 30px; font-weight: 700; font-size: 14px; color: var(--yazi2); padding: 0; }
.optik-satir label { position: relative; }
.optik-satir input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.optik-satir span { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--cizgi2); align-items: center; justify-content: center; font: 700 13px var(--yazi-govde); cursor: pointer; }
.optik-satir input:checked + span { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-ustu); }
.optik-satir input:focus-visible + span { outline: 3px solid var(--vurgu); outline-offset: 2px; }
.optik-satir.dogru legend { color: var(--basari); }
.optik-satir.yanlis legend { color: var(--hata); }
.optik-satir label.anahtar span { box-shadow: 0 0 0 3px var(--basari); }
.optik-satir.yanlis input:checked + span { background: var(--hata); border-color: var(--hata); }
.mini-ozet { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); margin-top: var(--b4); }
.mini-ozet .buyuk-sayi { font-size: 22px; }
@media (max-width: 860px) { .mini-duzen { grid-template-columns: 1fr; } .mini-optik { position: static; max-height: none; } }
/* ── YouTube şeridi: tek satır, küçük kapaklar ───────────────────────────── */
.bolum-ust { display: flex; align-items: baseline; justify-content: space-between; gap: var(--b4); flex-wrap: wrap; }
.bolum-ust h2 { margin: 0 0 var(--b4); }
.yt-serit { list-style: none; margin: 0; padding: 0 0 8px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.yt-serit li { flex: 0 0 160px; scroll-snap-align: start; }
.yt-serit a { display: grid; gap: 6px; color: var(--yazi); text-decoration: none; }
.yt-serit img { width: 160px; height: 90px; object-fit: cover; border-radius: var(--kose-kucuk); background: var(--zemin2); display: block; }
.yt-serit a:hover img { outline: 2px solid var(--vurgu); outline-offset: 1px; }
.yt-serit span { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ── Arama önerileri ───────────────────────────── */
.oneri-liste { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; list-style: none; margin: 0; padding: 6px; background: var(--yuzey); border: 1px solid var(--cizgi2); border-radius: var(--kose-orta); box-shadow: 0 12px 30px rgb(0 0 0 / 0.12); text-align: left; }
.oneri-liste a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--kose-kucuk); color: var(--yazi); text-decoration: none; }
.oneri-liste a small { color: var(--yazi2); font-size: 12px; white-space: nowrap; }
.oneri-liste li[aria-selected="true"] a, .oneri-liste a:hover { background: var(--zemin2); color: var(--vurgu); }
.arama-grup { font-size: 18px; margin: var(--b5) 0 0; }
.cipler.sola { justify-content: flex-start; }
/* ── Üst bar: logo hiç küçülmez, telefonda sadeleşir ───────────────────────────── */
.logo { flex: none; min-width: 0; }
.logo-simge { flex: none; width: 36px; height: 36px; }
.ust-ic { gap: var(--b4); }
.ust-arac { flex: none; display: flex; align-items: center; gap: 4px; }
.sepet-dugme { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: var(--kose-orta); color: var(--yazi); text-decoration: none; font-weight: 600; font-size: 14px; }
.sepet-dugme:hover { background: var(--zemin2); color: var(--vurgu); }
.sepet-sayi { position: static; margin-left: 2px; }
.yalniz-mobil { display: none; }
.menu-tema { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 0; border: 0; background: transparent; color: var(--yazi); font: 500 15px var(--yazi-govde); cursor: pointer; text-align: left; }
.menu .yalniz-mobil a { display: flex; align-items: center; gap: 8px; }
@media (max-width: 1000px) {
  .yalniz-masaustu { display: none !important; }
  .yalniz-mobil { display: block; }
  .menu ul { border-top: 1px solid var(--cizgi); }
}
@media (max-width: 520px) {
  .ust-ic { padding: 10px 12px; gap: 8px; }
  .logo { gap: 8px; }
  .logo-ad { font-size: 20px; }
  .logo-slogan { display: none; }
  .sepet-yazi { display: none; }
  .sepet-dugme { padding: 0 8px; }
  .hesap-dugme { padding: 0 10px; min-height: 40px; }
  .ikon-dugme { width: 42px; height: 42px; }
}
.rehber-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 24px; }
.rehber-liste a { display: block; padding: 10px 0; border-bottom: 1px solid var(--cizgi); color: var(--yazi); text-decoration: none; font-weight: 500; }
.rehber-liste a:hover { color: var(--vurgu); }
.rehber .ilgili { margin-top: var(--b6); }
.rehber .ilgili h2 { margin-top: 0; font-size: 18px; }
/* ── Sepet (net kart düzeni; telefonda altta sabit özet) */
.sepet-adim { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: var(--b5) 0 var(--b3); }
.sepet-adim span { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; background: var(--vurgu); color: var(--vurgu-ustu, #fff); align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex: none; }
#siparis-form .sepet-adim { margin-top: 0; }
.sepet-kalem { display: grid; grid-template-columns: 72px 1fr auto; grid-template-areas: "r b a"; align-items: center; gap: 12px 16px; }
.sepet-resim { grid-area: r; width: 72px; height: 54px; border-radius: var(--kose-orta); overflow: hidden; background: var(--zemin2); display: flex; align-items: center; justify-content: center; text-decoration: none; font: 800 22px var(--yazi-baslik); color: var(--vurgu); }
.sepet-resim.kitap { height: 96px; }
.sepet-resim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sepet-resim.kitap img { object-fit: contain; }
.sepet-bilgi { grid-area: b; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sepet-bilgi .sepet-ad { flex: none; overflow-wrap: anywhere; }
.sepet-birim { font-size: 14px; }
.sepet-alt { grid-area: a; display: flex; align-items: center; gap: 16px; }
.sepet-bos { text-align: center; padding: var(--b6) var(--b4); }
.sepet-bos-baslik { font: 800 22px var(--yazi-baslik); margin: 0 0 4px; }
.sepet-bos .dugmeler { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: var(--b4); }
.sepet-ozet-son { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--cizgi); padding-top: var(--b3); font-weight: 600; }
.sepet-ozet-son strong { font: 800 24px var(--yazi-baslik); color: var(--vurgu); }
#s-gonder { width: 100%; }
.sepet-cubuk { display: none; }
@media (max-width: 700px) {
  .sepet-kalem { grid-template-columns: 64px 1fr; grid-template-areas: "r b" "a a"; padding: 14px; }
  .sepet-resim { width: 64px; height: 48px; }
  .sepet-resim.kitap { height: 86px; }
  .sepet-alt { justify-content: space-between; border-top: 1px dashed var(--cizgi); padding-top: 10px; }
  .sepet-alt .sepet-tutar { margin-left: auto; font-size: 18px; }
  .sepet-toplam { display: none; }
  .sepet-cubuk { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--zemin); border-top: 1px solid var(--cizgi2); box-shadow: 0 -6px 20px rgba(0,0,0,.08); transition: transform .2s; }
  .sepet-cubuk.gizle { transform: translateY(110%); }
  .sepet-cubuk-toplam { display: flex; flex-direction: column; line-height: 1.1; }
  .sepet-cubuk-toplam small { color: var(--yazi2); font-size: 13px; }
  .sepet-cubuk-toplam strong { font: 800 22px var(--yazi-baslik); color: var(--vurgu); }
  .sepet-cubuk .dugme { flex: 1; max-width: 220px; }
  .sepet { padding-bottom: 80px; }
}

/* ── Kitap kartı: dikey kapak, kırpılmadan */
.kitap-kart .urun-gorsel { aspect-ratio: 3 / 4; }
.kitap-kart .urun-gorsel img, .kitap-sayfa .urun-buyuk-gorsel img { object-fit: contain; }
.kitap-sayfa .urun-buyuk-gorsel { aspect-ratio: 3 / 4; max-width: 420px; }
.izgara.urunler:has(.kitap-kart) { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* ── Hata analizi formu ve takip */
.paket-sec { border: 0; padding: 0; margin: 0 0 var(--b4); display: grid; gap: 8px; }
.paket-sec legend { font-weight: 600; margin-bottom: 8px; }
.paket-secenek { border: 1px solid var(--cizgi2); border-radius: var(--kose-orta); padding: 12px 14px; margin: 0; }
.paket-secenek:has(input:checked) { border-color: var(--vurgu); box-shadow: 0 0 0 1px var(--vurgu); }
.dosya-liste { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.dosya-liste li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 12px; background: var(--zemin2); border-radius: var(--kose-orta); font-size: 14px; overflow-wrap: anywhere; }
#analiz-form input[type="file"] { padding: 12px; border: 1px dashed var(--cizgi2); border-radius: var(--kose-orta); width: 100%; background: var(--zemin2); }
#a-gonder { width: 100%; }
.analiz-durum { font: 800 22px var(--yazi-baslik); margin: 0 0 var(--b3); color: var(--vurgu); }
.analiz-durum.durum-iptal { color: var(--yazi2); }
.bilgi-liste { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.bilgi-liste dt { color: var(--yazi2); }
.bilgi-liste dd { margin: 0; font-weight: 500; }
#analiz-takip .kart { margin-bottom: var(--b4); }
.analiz-dosyalar { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.analiz-dosya { display: flex; flex-direction: column; gap: 4px; font-size: 13px; overflow-wrap: anywhere; }
.analiz-dosya img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--kose-orta); border: 1px solid var(--cizgi); display: block; }
/* ── Video şeridi: kaydırma çubuğu yok, kendiliğinden yavaşça akar (üstüne gelince/odakta durur) */
.yt-kap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.yt-serit { overflow: visible; width: max-content; padding-bottom: 0; scroll-snap-type: none; animation: yt-ak var(--yt-sure, 60s) linear infinite; }
.yt-serit li { scroll-snap-align: none; }
.yt-kap:hover .yt-serit, .yt-kap:focus-within .yt-serit { animation-play-state: paused; }
@keyframes yt-ak { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } }
@media (prefers-reduced-motion: reduce) {
  .yt-kap { overflow-x: auto; scrollbar-width: none; } .yt-kap::-webkit-scrollbar { display: none; }
  .yt-serit { animation: none; } .yt-serit li[aria-hidden="true"] { display: none; }
}

/* ── Çalışma hedefi ayarı (⚙) */
.hedef-ayar { margin-top: var(--b3); }
.hedef-ayar summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--yazi2); font-size: 14px; list-style: none; padding: 6px 0; }
.hedef-ayar summary::-webkit-details-marker { display: none; }
.hedef-ayar summary:hover, .hedef-ayar[open] summary { color: var(--vurgu); }
.hedef-ayar[open] summary svg { transform: rotate(60deg); }
.hedef-ayar summary svg { transition: transform .3s; }
.hedef-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 16px; max-width: 720px; margin-top: var(--b2, 8px); }
.hedef-ayar .hedef-form { padding: var(--b4); border: 1px solid var(--cizgi); border-radius: var(--kose-buyuk); }
.hedef-form-alt, .hedef-form > p { grid-column: 1 / -1; }
.hedef-form-alt { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* ── Deneme Takip */
.dt-liste, .dt-benim { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.dt-kart { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--yazi); height: 100%; }
.dt-kart:hover { border-color: var(--vurgu); }
.dt-kart .rozet { align-self: flex-start; }
.dt-uygulama:empty { display: none; }
.dt-uygulama { margin-bottom: var(--b6); }
.dt-giris { margin: var(--b4) 0; }
.dt-optik { display: grid; gap: var(--b4); }
.dt-blok { border: 1px solid var(--cizgi); border-radius: var(--kose-buyuk); padding: var(--b3) var(--b4); margin: 0; }
.dt-blok legend { font-weight: 700; padding: 0 6px; }
.dt-sorular { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px 24px; }
.dt-soru { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.dt-no { width: 30px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--yazi2); flex: none; }
.dt-sik { position: relative; cursor: pointer; }
.dt-sik input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dt-sik span { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--cizgi2); align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--yazi2); transition: background .1s; }
.dt-sik input:checked + span { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-ustu); }
.dt-sik input:focus-visible + span { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.dt-gonder { position: sticky; bottom: 0; background: var(--zemin); border-top: 1px solid var(--cizgi); padding: 12px 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; z-index: 5; }
.dt-sayac { margin: 0; }
.dt-ozet { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: var(--b4) 0; }
.dt-kutu { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.dt-kutu strong { font: 800 24px var(--yazi-baslik); }
.dt-vurgu strong { color: var(--vurgu); font-size: 30px; }
.dt-tablo-kap { overflow-x: auto; }
.dt-tablo { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dt-tablo th, .dt-tablo td { padding: 10px 12px; border-bottom: 1px solid var(--cizgi); text-align: right; white-space: nowrap; }
.dt-tablo th:first-child { text-align: left; }
.dt-tablo thead th { color: var(--yazi2); font-size: 13px; font-weight: 600; }
.dt-ustte { color: #047857; } .dt-altta { color: #B91C1C; }
.dt-izgara { list-style: none; padding: 0; margin: 0 0 var(--b4); display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.dt-h { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: var(--kose-orta); font-size: 13px; font-weight: 700; background: var(--zemin2); }
.dt-hn { font-size: 11px; font-weight: 500; color: var(--yazi2); }
.dt-dogru { background: rgba(4,120,87,.14); color: #047857; }
.dt-yanlis { background: rgba(185,28,28,.12); color: #B91C1C; }
.dt-iptal { opacity: .5; }
.dt-alt-baglanti { display: flex; flex-wrap: wrap; gap: 10px; }
.dt-gelisim { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding: 8px 0; border-bottom: 1px solid var(--cizgi); }
.dt-cubuk { flex: 1; max-width: 48px; background: var(--vurgu); border-radius: 6px 6px 0 0; position: relative; }
.dt-cubuk b { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--yazi2); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .dt-ustte, :root:not([data-tema="acik"]) .dt-dogru { color: #6EE7B7; } :root:not([data-tema="acik"]) .dt-altta, :root:not([data-tema="acik"]) .dt-yanlis { color: #FCA5A5; } }
:root[data-tema="koyu"] .dt-ustte, :root[data-tema="koyu"] .dt-dogru { color: #6EE7B7; }
:root[data-tema="koyu"] .dt-altta, :root[data-tema="koyu"] .dt-yanlis { color: #FCA5A5; }
@media (max-width: 520px) { .dt-sik span { width: 38px; height: 38px; } .dt-soru { gap: 4px; } .dt-blok { padding: 10px; } }
/* Mobil üst bar: tema düğmesi sepetin yanında (kurucu isteği) */
@media (max-width: 520px) {
  .ust-arac { gap: 2px; }
  .ust-arac .ikon-dugme, .ust-arac .sepet-dugme { width: 40px; min-width: 40px; height: 40px; padding: 0; justify-content: center; }
  .hesap-dugme { padding: 6px 10px; font-size: 14px; }
}
@media (max-width: 380px) { .ust .logo-ad { font-size: 19px; } .logo-simge { width: 32px; height: 32px; } }
/* ── Yorumlar */
.yildiz { color: #F59E0B; letter-spacing: 1px; }
.yildiz .soluk { color: var(--cizgi2); }
.yorum-liste { list-style: none; padding: 0; display: grid; gap: 10px; }
.yorum-liste li p { margin: 4px 0; }
.yildiz-sec { border: 0; padding: 0; margin: 6px 0; display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.yildiz-sec input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.yildiz-sec label { font-size: 28px; color: var(--cizgi2); cursor: pointer; line-height: 1; padding: 2px; }
.yildiz-sec input:checked ~ label, .yildiz-sec label:hover, .yildiz-sec label:hover ~ label { color: #F59E0B; }
.yildiz-sec input:focus-visible + label { outline: 2px solid var(--vurgu); border-radius: 4px; }
.yorum-yaz { padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.admin-yorum { margin-bottom: 10px; }
.kod-alan { font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace !important; white-space: pre; tab-size: 2; }
.mini-alan { border-top: 1px dashed var(--cizgi); padding-top: var(--b3); margin-top: var(--b3); }
/* Masaüstü üst menü: yazılar tek satır; dar masaüstünde "Sepet" yazısı gizlenir, yer açılır */
.menu a { white-space: nowrap; }
@media (max-width: 1240px) and (min-width: 1001px) {
  .sepet-yazi, .logo-slogan { display: none; }
  .menu ul { gap: 2px 14px; }
  .menu a { font-size: 15px; }
}
/* ── Bildirimler */
.bildirim-liste { list-style: none; padding: 0; margin: var(--b3) 0 0; display: grid; gap: 2px; max-height: 360px; overflow-y: auto; }
.bildirim-liste li > a, .bildirim-liste li > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--kose-orta); color: var(--yazi); text-decoration: none; }
.bildirim-liste li > a:hover { background: var(--zemin2); }
.bildirim-liste li.yeni > a, .bildirim-liste li.yeni > div { background: var(--zemin2); box-shadow: inset 3px 0 0 var(--vurgu); }
.bildirim-ac { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.bildirim-ac p { flex: 1 1 100%; margin: 0; }
.hesap-dugme .nokta { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #DC2626; margin-left: 6px; vertical-align: middle; }
/* ── Öğretmen ağı */
.ogretmen-izgara { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ogretmen-kart { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: var(--yazi); }
.ogretmen-kart:hover { border-color: var(--vurgu); }
.ogretmen-bilgi { display: grid; gap: 2px; min-width: 0; }
.ogretmen-simge { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--vurgu); color: var(--vurgu-ustu); display: inline-flex; align-items: center; justify-content: center; font: 800 18px var(--yazi-baslik); }
.ogretmen-simge.buyuk { width: 88px; height: 88px; font-size: 30px; }
.ogretmen-ust { display: flex; gap: 20px; align-items: center; margin-bottom: var(--b5); }
.ogretmen-ust h1 { margin: 0; }
.ogretmen-govde { display: grid; grid-template-columns: 1fr 300px; gap: var(--b6); align-items: start; }
.ogretmen-yan { position: sticky; top: 90px; display: grid; gap: 12px; }
@media (max-width: 800px) { .ogretmen-govde { grid-template-columns: 1fr; } .ogretmen-yan { position: static; } .ogretmen-ust { align-items: flex-start; } }
.og-dersler { display: grid; gap: 6px; max-height: 340px; overflow-y: auto; padding-right: 4px; }
.og-ders { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--cizgi); }
.og-ders > span { flex: 1 1 160px; font-weight: 500; }
.og-cip { position: relative; cursor: pointer; }
.og-cip input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.og-cip span { display: inline-block; padding: 4px 10px; border: 1px solid var(--cizgi2); border-radius: 999px; font-size: 13px; }
.og-cip input:checked + span { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-ustu); }
.og-cip input:focus-visible + span { outline: 2px solid var(--vurgu); outline-offset: 2px; }
/* ── Ders Defteri */
.defter-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.defter-ust h2 { margin: 0; min-width: 160px; text-align: center; text-transform: capitalize; }
.defter-ust .baglanti-dugme { margin-left: auto; }
.defter .kart { margin-bottom: var(--b4); }
.defter-liste { list-style: none; padding: 0; margin: 0; }
.defter-liste li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cizgi); flex-wrap: wrap; }
.defter-liste li > div:first-child { display: grid; gap: 2px; min-width: 0; }
.defter-sag { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.og-cip-dugme { border: 1px solid var(--cizgi2); background: transparent; color: var(--yazi2); border-radius: 999px; padding: 4px 12px; font: 600 13px var(--yazi-govde); cursor: pointer; min-height: 32px; }
.og-cip-dugme.acik { background: rgba(4,120,87,.14); border-color: transparent; color: #047857; }
:root[data-tema="koyu"] .og-cip-dugme.acik { color: #6EE7B7; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .og-cip-dugme.acik { color: #6EE7B7; } }
/* fieldset varsayılan min-width: min-content → dar ekranda taşıyordu */
fieldset { min-width: 0; }
.alan fieldset, fieldset.alan { border: 1px solid var(--cizgi); border-radius: var(--kose-orta); padding: 10px 14px; }
@media (max-width: 520px) { .og-ders > span { flex-basis: 100%; } }
@media (max-width: 860px) { .panel-izgara { grid-template-columns: minmax(0, 1fr); } }.panel-yan { grid-template-columns: minmax(0, 1fr); }
/* ── Veli bağlantısı */
.veli-adim { border-top: 1px solid var(--cizgi); padding: 10px 0; }
.veli-adim summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.veli-kod strong { font: 800 28px var(--yazi-baslik); letter-spacing: 4px; color: var(--vurgu); }
.cocuk-kart { margin-bottom: var(--b3); }
.cocuk-kart summary { cursor: pointer; font-weight: 700; }
.cocuk-ic h3 { font-size: 16px; margin: var(--b3) 0 4px; }
#v-kod-gir { text-transform: uppercase; letter-spacing: 2px; }#v-kod-gir::placeholder { text-transform: none; letter-spacing: 0; }
/* ── Flaş kartlar */
.kart-calis { margin-bottom: var(--b6); }
.kart-ust { display: grid; gap: 6px; margin-bottom: var(--b3); }
.kart-sahne { display: grid; gap: var(--b3); max-width: 640px; }
.flas { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; cursor: pointer; font: inherit; color: var(--yazi); width: 100%; border-width: 2px; transition: border-color .15s, transform .15s; }
.flas:hover { border-color: var(--vurgu); }
.flas:active { transform: scale(.99); }
.flas-on { font: 700 26px/1.35 var(--yazi-baslik); overflow-wrap: anywhere; }
.flas-arka { font: 800 30px/1.35 var(--yazi-baslik); color: var(--vurgu); overflow-wrap: anywhere; }
.flas.cevrik .flas-on { font-size: 18px; color: var(--yazi2); font-weight: 600; }
.flas-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; }
.flas-dugmeler .dugme { flex: 1 1 150px; }
.kart-bitti { text-align: center; padding: var(--b6) var(--b4); }
.kart-bitti-baslik { font: 800 24px var(--yazi-baslik); margin: 0 0 6px; }
.kart-not { margin-top: var(--b3); }
.kart-tablo { margin: 0; display: grid; gap: 0; }
.kart-tablo > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--cizgi); }
.kart-tablo dt { font-weight: 600; } .kart-tablo dd { margin: 0; color: var(--vurgu); font-weight: 700; }
.deste-satir { display: grid; gap: 4px; }
/* hidden özniteliği her zaman gizlesin (.dugme gibi display veren sınıflar ezmesin) */
[hidden] { display: none !important; }
/* ── Yardım */
.yardim-ara { max-width: 720px; margin: var(--b4) 0; }
.yardim-cevap { margin-bottom: var(--b3); }
.yardim-cevap h2 { font-size: 18px; margin-top: 0; }
.sss-oge { border-bottom: 1px solid var(--cizgi); padding: 10px 0; }
.sss-oge summary { cursor: pointer; font-weight: 600; }
.sss-oge p { margin: 8px 0 0; color: var(--yazi2); }
.yardim h3 { font-size: 16px; margin-top: var(--b5); }
.bulunamayan { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--cizgi); }
/* ── Sanal koç halkaları */
.halkalar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; margin: var(--b3) 0; }
.halka { position: relative; display: grid; justify-items: center; gap: 2px; }
.halka svg { display: block; }
.halka-zemin { fill: none; stroke: var(--zemin2); stroke-width: 8; }
.halka-dolu { fill: none; stroke: var(--vurgu); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .6s; }
.halka.tamam .halka-dolu { stroke: #059669; }
.halka-ic { position: absolute; top: 44px; left: 50%; transform: translate(-50%, -50%); font: 800 16px var(--yazi-baslik); }
.halka.tamam .halka-ic { color: #059669; font-size: 24px; }
.koc-gecmis { display: flex; align-items: flex-end; gap: 4px; height: 56px; margin: var(--b3) 0 var(--b2, 8px); border-bottom: 1px solid var(--cizgi); }
.koc-cubuk { flex: 1; background: var(--vurgu); opacity: .55; border-radius: 3px 3px 0 0; }
.koc-cubuk.tamam { opacity: 1; background: #059669; }
.koc-cubuk:last-child { opacity: 1; }
/* ── Görseller: kahraman fotoğrafı, sayılar, kapak rafı, vitrin, afiş (2026-11-07) ── */
.kahraman-foto { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; text-align: left; gap: var(--b6); padding: var(--b6) 0 0; }
.kahraman-metin { display: flex; flex-direction: column; align-items: flex-start; gap: var(--b3); }
.kahraman-foto .arama { margin: 0 0 var(--b2); }
.kahraman-foto .cipler { justify-content: flex-start; }
.ust-baslik { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--vurgu); }
.kahraman-gorsel { margin: 0; position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 300px; }
.kahraman-gorsel::before { content: ""; position: absolute; left: 50%; bottom: 0; width: min(380px, 92%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--vurgu) 30%, transparent), color-mix(in srgb, var(--vurgu) 10%, transparent)); }
.kahraman-gorsel img { position: relative; height: 440px; width: auto; max-width: 100%; object-fit: contain; display: block; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }

.sayilar { list-style: none; margin: 0 0 var(--b6); padding: var(--b4); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--b3);
  border: 1px solid var(--cizgi); border-radius: var(--kose-buyuk); background: var(--yuzey); }
.sayilar li { display: grid; text-align: center; gap: 2px; }
.sayilar b { font: 800 clamp(22px, 3.4vw, 32px)/1.1 var(--yazi-baslik); color: var(--vurgu); }
.sayilar span { font-size: 13px; color: var(--yazi2); }

.kapak-raf { list-style: none; margin: 0; padding: 4px 2px 12px; display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: var(--b4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.kapak-raf li { scroll-snap-align: start; }
.kapak-raf a { display: grid; gap: 8px; color: var(--yazi); text-decoration: none; }
.kapak-raf img { width: 150px; height: 200px; object-fit: contain; background: var(--zemin2); border-radius: var(--kose-kucuk); box-shadow: 0 6px 18px rgb(0 0 0 / .14); transition: transform .2s; display: block; }
.kapak-raf a:hover img, .kapak-raf a:focus-visible img { transform: translateY(-4px); }
.kapak-raf span { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.vitrin-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--b4); }
.vitrin { padding: 0; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--yazi); transition: border-color .2s, transform .2s; }
.vitrin:hover { border-color: var(--vurgu); transform: translateY(-2px); }
.vitrin img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; display: block; background: var(--zemin2); }
.vitrin > div { padding: var(--b4) var(--b5) var(--b5); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.vitrin h3 { margin: 0; }
.vitrin p { margin: 0 0 var(--b3); color: var(--yazi2); flex: 1; }
.vitrin .dugme { align-self: flex-start; }

.kurucu-foto { width: 120px; height: 120px; object-fit: cover; object-position: top; border-radius: 50%; background: color-mix(in srgb, var(--vurgu) 18%, transparent); display: block; margin-bottom: var(--b3); }
.afis { margin: var(--b5) 0; }
.afis img { width: 100%; height: auto; border-radius: var(--kose-buyuk); display: block; }
.sag-foto { float: right; width: min(200px, 38%); height: auto; margin: 0 0 var(--b4) var(--b5); border-radius: var(--kose-buyuk); background: color-mix(in srgb, var(--vurgu) 12%, transparent); }
.sag-foto.kare { width: min(240px, 42%); }
.foto-ikili, .foto-uclu { display: grid; gap: var(--b3); margin: var(--b5) 0; }
.foto-ikili { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foto-uclu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.foto-ikili figure { margin: 0; }
.foto-ikili img, .foto-uclu img { width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; border-radius: var(--kose-orta); display: block; }
.foto-ikili figcaption, .belge figcaption { font-size: 13px; color: var(--yazi2); margin-top: 6px; }
.belge { margin: 0 0 var(--b5); max-width: 280px; }
.belge img { width: 100%; height: auto; border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk); display: block; }

@media (max-width: 860px) { .vitrin-izgara { grid-template-columns: minmax(0, 1fr); } .vitrin { flex-direction: row; } .vitrin img { width: 38%; aspect-ratio: auto; height: auto; min-height: 100%; } }
@media (max-width: 760px) {
  .kahraman-foto { grid-template-columns: minmax(0, 1fr); text-align: center; gap: var(--b4); padding-top: var(--b5); }
  .kahraman-metin { align-items: center; }
  .kahraman-foto .cipler { justify-content: center; }
  .kahraman-gorsel { min-height: 0; order: -1; }
  .kahraman-gorsel::before { width: 200px; }
  .kahraman-gorsel img { height: 230px; }
  .sayilar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foto-uclu { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foto-uclu img:first-child { grid-column: 1 / -1; aspect-ratio: 1; }
}
@media (max-width: 520px) { .vitrin { flex-direction: column; } .vitrin img { width: 100%; aspect-ratio: 16 / 10; min-height: 0; } .sag-foto { width: 40%; margin-left: var(--b3); } }

/* ── Alt bilgi: başlıklı sütunlar, kısa (2026-11-07) ── */
.alt-ic { padding: var(--b5) 16px var(--b4); gap: var(--b5) var(--b6); }
.alt-marka { max-width: 300px; }
.alt-marka p { font-size: 14px; margin-top: 8px; }
.alt-sosyal { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.alt-menu { display: grid; grid-template-columns: repeat(3, auto) minmax(0, auto); gap: var(--b4) var(--b6); flex: 1; justify-content: end; }
.alt-baslik { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--yazi2); }
.alt-menu ul { gap: 5px; font-size: 14px; }
.alt-menu ul.iki-kolon { display: block; columns: 2; column-gap: var(--b5); }
.alt-menu ul.iki-kolon li { margin-bottom: 5px; break-inside: avoid; }
@media (max-width: 1000px) { .alt-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; } .alt-genis { grid-column: 1 / -1; } .alt-menu ul.iki-kolon { columns: 3; } }
@media (max-width: 640px) {
  .alt-marka { max-width: none; }
  .alt-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b4); }
  .alt-menu ul.iki-kolon { columns: 2; }
  .alt-menu ul { font-size: 13.5px; }
}
.alt-menu a, .alt-sosyal a { text-decoration: none; }
.alt-menu a:hover, .alt-sosyal a:hover { text-decoration: underline; color: var(--vurgu); }
.alt-menu ul.iki-kolon li { white-space: nowrap; }
@media (max-width: 640px) {
  .alt-ic { padding-top: var(--b4); gap: var(--b4); }
  .alt-menu { gap: var(--b4) var(--b3); }
  .alt-genis { grid-column: auto; }
  .alt-menu ul.iki-kolon { columns: 1; }
  .alt-menu ul, .alt-menu ul.iki-kolon li { gap: 2px; font-size: 13.5px; line-height: 1.5; }
  .alt-menu ul.iki-kolon li { margin-bottom: 2px; white-space: normal; }
  .alt-marka p { margin-top: 6px; }
}

/* ── Çizimler (src/cizimler.js): tema + vurgu rengiyle değişir ── */
.cizim { width: 100%; height: auto; display: block; border-radius: var(--kose-buyuk); }
.cizim text { font-family: var(--yazi-baslik); font-weight: 800; }
.cz-zemin { fill: color-mix(in srgb, var(--vurgu) 11%, var(--yuzey)); }
.cz-hale { fill: color-mix(in srgb, var(--vurgu) 9%, transparent); }
.cz-kagit { fill: var(--yuzey); stroke: var(--cizgi2); stroke-width: 2; }
.cz-satir { fill: var(--cizgi2); }
.cz-v { fill: var(--vurgu); }
.cz-v1 { fill: color-mix(in srgb, var(--vurgu) 12%, var(--yuzey)); }
.cz-v4 { fill: color-mix(in srgb, var(--vurgu) 45%, var(--yuzey)); }
.cz-v6 { fill: color-mix(in srgb, var(--vurgu) 65%, var(--yuzey)); }
.cz-v8 { fill: color-mix(in srgb, var(--vurgu) 82%, var(--yuzey)); }
.cz-bos { fill: none; stroke: var(--cizgi2); stroke-width: 2; }
.cz-saat { fill: var(--yuzey); stroke: var(--vurgu); stroke-width: 8; }
.cz-ibre { stroke: var(--yazi); stroke-width: 6; stroke-linecap: round; }
.cz-ibre-v { stroke: var(--vurgu); stroke-width: 6; stroke-linecap: round; }
.cz-koyu { fill: var(--yazi); }
.cz-yazi-ters { fill: var(--vurgu-ustu); }
.cz-yazi-v { fill: var(--vurgu); }
.cz-yazi-koyu { fill: var(--yazi2); }
.cz-tik { fill: none; stroke: #059669; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.cz-carpi { fill: none; stroke: #DC2626; stroke-width: 6; stroke-linecap: round; }
.cz-hata-halka { fill: none; stroke: #DC2626; stroke-width: 4; stroke-dasharray: 10 7; }
.cz-mercek { fill: color-mix(in srgb, var(--vurgu) 8%, transparent); stroke: var(--vurgu); stroke-width: 10; }
.cz-oynat { fill: var(--vurgu-ustu); }
.vitrin .cizim { border-radius: 0; aspect-ratio: 16 / 10; }
/* vitrin: 4 kart — geniş ekranda 4, ortada 2, telefonda 1 sütun; görsel hep üstte */
.vitrin-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .vitrin-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .vitrin { flex-direction: column; } .vitrin img { width: 100%; aspect-ratio: 16 / 10; min-height: 0; } }
@media (max-width: 560px) { .vitrin-izgara { grid-template-columns: minmax(0, 1fr); } }

/* ── Soru defterim (Hesabım) ── */
.soru-defteri { margin-bottom: var(--b5); }
.sd-ozet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 2fr); gap: var(--b3); margin-bottom: var(--b4); }
.sd-ozet-kutu { border: 1px solid var(--cizgi); border-radius: var(--kose-orta); padding: var(--b3) var(--b4); display: grid; gap: 2px; background: var(--zemin2); }
.sd-ozet-kutu b { font: 800 26px/1.15 var(--yazi-baslik); color: var(--vurgu); }
.sd-ozet-kutu .artis { color: var(--basari); } .sd-ozet-kutu .azalis { color: var(--hata); }
.sd-haftalar { display: flex; align-items: flex-end; gap: 6px; height: 54px; }
.sd-hafta { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.sd-hafta i { display: block; width: 100%; background: var(--vurgu); border-radius: 4px 4px 0 0; opacity: .7; }
.sd-hafta:last-child i { opacity: 1; }
.sd-dagilim-kap { grid-column: 1 / -1; }
.sd-dagilim { margin: 2px 0; }
.sd-ust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b3); max-width: 560px; }
.sd-grup { border: 0; padding: 0; margin: var(--b3) 0; }
.sd-grup legend { font-weight: 700; margin-bottom: 8px; }
.sd-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sd-kutu { border: 1px solid var(--cizgi); border-radius: var(--kose-orta); padding: 10px; display: grid; gap: 6px; background: var(--yuzey); transition: border-color .15s, background .15s; }
.sd-kutu.dolu { border-color: var(--vurgu); background: color-mix(in srgb, var(--vurgu) 6%, var(--yuzey)); }
.sd-kutu label { font-size: 14px; font-weight: 600; margin: 0; }
.sd-form .sd-kutu input { width: 100%; padding: 8px 10px; min-height: 0; }
.sd-dy { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sd-form .sd-dy input { font-size: 13px; padding: 6px 8px; }
.sd-alt { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: var(--b3); }
.sd-alt strong { margin-right: auto; font-size: 18px; }
.sd-gecmis-baslik { margin: var(--b5) 0 var(--b2); font-size: 17px; }
.sd-gecmis { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sd-kayit { border: 1px solid var(--cizgi); border-radius: var(--kose-orta); padding: 10px 14px; }
.sd-kayit p { margin: 4px 0 0; }
.sd-kayit-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.sd-kayit-ust .rozet { margin-left: auto; }
.rozet-tamam { background: color-mix(in srgb, var(--basari) 15%, transparent); color: var(--basari); }
.sd-koc-not { background: color-mix(in srgb, var(--vurgu) 8%, var(--yuzey)); border-left: 3px solid var(--vurgu); padding: 8px 10px; border-radius: 6px; }
.sd-puan { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 8px; }
.sd-puan textarea { flex: 1 1 220px; }
@media (max-width: 640px) {
  .sd-ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sd-grafik { grid-column: 1 / -1; }
  .sd-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-alt strong { flex-basis: 100%; }
}

/* ── Profil kartı (Hesabım üstü): kişiye özel geri sayım ── */
.profil-kart { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--b4) var(--b5); align-items: center; margin-bottom: var(--b5);
  padding: var(--b5); border-radius: var(--kose-buyuk); color: var(--vurgu-ustu);
  background: linear-gradient(135deg, var(--vurgu), color-mix(in srgb, var(--vurgu) 70%, #000)); }
.pk-kimlik { display: flex; align-items: center; gap: 14px; }
.pk-avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 800 22px var(--yazi-baslik);
  background: color-mix(in srgb, var(--vurgu-ustu) 22%, transparent); border: 2px solid color-mix(in srgb, var(--vurgu-ustu) 55%, transparent); flex: none; }
.pk-kimlik strong { display: block; font: 800 22px/1.2 var(--yazi-baslik); }
.pk-alt { opacity: .85; font-size: 14px; }
.pk-sayim { grid-row: span 2; text-align: center; display: grid; gap: 4px; }
.pk-sinav { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .9; }
.pk-sayilar { display: flex; gap: 10px; justify-content: center; }
.pk-sayilar span { display: grid; font-size: 12px; opacity: .9; min-width: 48px; }
.pk-sayilar b { font: 800 34px/1.05 var(--yazi-baslik); font-variant-numeric: tabular-nums; }
.pk-sayilar span:first-child b { font-size: 44px; }
.pk-oneri { font-size: 13px; opacity: .9; }
.pk-rozetler { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pk-rozetler li { background: color-mix(in srgb, var(--vurgu-ustu) 16%, transparent); border-radius: var(--kose-orta); padding: 6px 12px; display: grid; }
.pk-rozetler b { font: 800 17px/1.2 var(--yazi-baslik); }
.pk-rozetler span { font-size: 12px; opacity: .85; }
@media (max-width: 700px) {
  .profil-kart { grid-template-columns: minmax(0, 1fr); }
  .pk-sayim { grid-row: auto; order: 2; }
  .pk-rozetler { order: 3; }
  .pk-sayilar b { font-size: 28px; } .pk-sayilar span:first-child b { font-size: 36px; }
}
.cz-hale-guclu { fill: color-mix(in srgb, var(--vurgu) 13%, transparent); }
.cz-cizgi { fill: none; stroke: var(--cizgi2); stroke-width: 4; stroke-linecap: round; }
.cz-cizgi-v { fill: none; stroke: var(--vurgu); stroke-width: 4; }
.cz-logo-cizgi { fill: none; stroke: var(--vurgu-ustu); stroke-width: 10; stroke-linecap: round; }
.cz-tik-zemin { fill: color-mix(in srgb, #059669 16%, var(--yuzey)); stroke: #059669; stroke-width: 3; }
.kahraman-gorsel .kahraman-cizim { position: relative; width: min(460px, 100%); height: auto; border-radius: 0; }
.kahraman-gorsel:has(.kahraman-cizim)::before { display: none; }
@media (max-width: 760px) { .kahraman-gorsel .kahraman-cizim { width: min(300px, 80%); } }
.cz-hata-zemin { fill: color-mix(in srgb, #DC2626 14%, var(--yuzey)); stroke: #DC2626; stroke-width: 2; }
.cz-ok { fill: none; stroke: var(--vurgu); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 12; }
.cz-ok-uc { fill: none; stroke: var(--vurgu); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }

/* ── Yanlışlar Testi ── */
.yt-grup h3 { margin: var(--b4) 0 var(--b2); }
.yt-sorular { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.yt-soru { padding: var(--b4); display: grid; gap: 8px; transition: opacity .4s, transform .4s; }
.yt-soru.cozuldu { opacity: .4; transform: scale(.98); }
.yt-ust { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.rozet-hata { background: color-mix(in srgb, var(--hata) 12%, transparent); color: var(--hata); }
.yt-siklar { display: flex; gap: 8px; }
.yt-sik { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--cizgi2); background: var(--yuzey); color: var(--yazi); font: 700 16px var(--yazi-baslik); cursor: pointer; }
.yt-sik:hover:not(:disabled) { border-color: var(--vurgu); color: var(--vurgu); }
.yt-sik.dogru { background: var(--basari); border-color: var(--basari); color: #fff; }
.yt-sik.yanlis { background: color-mix(in srgb, var(--hata) 14%, var(--yuzey)); border-color: var(--hata); color: var(--hata); }
.yt-sik:disabled { cursor: default; }
.yt-durum { margin: 0; min-height: 1.2em; }
.uye-ol-kutu { margin-top: var(--b5); }
.cz-isaret { fill: color-mix(in srgb, #F59E0B 35%, transparent); }
.cz-kalp { fill: #E11D48; }
.cz-kalp-bos { fill: none; stroke: #E11D48; stroke-width: 4; stroke-dasharray: 6 5; }
.cz-dogru-zemin { fill: color-mix(in srgb, #059669 18%, var(--yuzey)); stroke: #059669; stroke-width: 2; }
.cz-simsek { fill: #F59E0B; }
.cz-kupa { fill: #F59E0B; }

/* ── Günlük Doz ── */
.doz-izgara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--b3); }
.doz-kart { position: relative; padding: var(--b4) var(--b5); display: grid; gap: 4px; align-content: start; }
.doz-no { position: absolute; top: 12px; right: 14px; font: 800 13px var(--yazi-baslik); color: var(--yazi2); }
.doz-kelime { margin: 0; font: 800 26px/1.15 var(--yazi-baslik); color: var(--vurgu); }
.doz-anlam { margin: 0; font-weight: 600; }
.doz-ornek { margin: 6px 0 0; font-size: 14px; }
.doz-kart .rozet, .doz-bugun .rozet { justify-self: start; }
.doz-bugun { display: grid; gap: 6px; justify-items: start; border-color: var(--vurgu); background: color-mix(in srgb, var(--vurgu) 6%, var(--yuzey)); }
.doz-bugun .doz-kelime { font-size: 40px; }
.doz-gecmis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.doz-gecmis details { border: 1px solid var(--cizgi); border-radius: var(--kose-orta); padding: 8px 12px; }
.doz-gecmis summary { cursor: pointer; }
/* ── Çözüm taktikleri ── */
.taktik-liste { list-style: none; margin: var(--b5) 0 0; padding: 0; display: grid; gap: var(--b3); max-width: 860px; }
.taktik-kart { position: relative; padding-left: 72px; }
.taktik-kart .adim-no { position: absolute; left: 20px; top: 22px; }
.taktik-kart h3 { margin-top: 0; }
.taktik-ornek { background: var(--zemin2); border-left: 3px solid var(--vurgu); padding: 8px 12px; border-radius: 6px; font-size: 15px; }
.taktik-kart.yeni { animation: taktik-gel .5s ease-out; }
@keyframes taktik-gel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.taktik-kilit { max-width: 860px; margin-top: var(--b3); padding: var(--b4) var(--b5); border: 2px dashed var(--cizgi2); border-radius: var(--kose-buyuk); text-align: center; }
.taktik-kilit p { margin: 0; }
/* ── Kapışma ── */
.kapisma-alan { max-width: 720px; }
.kp-ust { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--b3); }
.kp-canlar { display: flex; gap: 6px; font-size: 30px; line-height: 1; }
.kp-can { color: #E11D48; } .kp-can.bos { color: var(--cizgi2); }
.kp-puan { font: 800 22px var(--yazi-baslik); color: var(--vurgu); }
.kp-geri { font-weight: 700; margin: 0 0 var(--b3); } .kp-geri.iyi { color: var(--basari); } .kp-geri.kotu { color: var(--hata); }
.kp-soru { display: grid; gap: var(--b3); }
.kp-metin { margin: 0; font: 800 28px/1.25 var(--yazi-baslik); }
.kp-secenekler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kp-secenek { min-height: 58px; padding: 10px 14px; border: 2px solid var(--cizgi2); border-radius: var(--kose-orta); background: var(--yuzey); color: var(--yazi); font: 600 17px var(--yazi-govde); cursor: pointer; text-align: left; }
.kp-secenek:hover:not(:disabled) { border-color: var(--vurgu); }
.kp-secenek.dogru { background: var(--basari); border-color: var(--basari); color: #fff; }
.kp-secenek.yanlis { background: var(--hata); border-color: var(--hata); color: #fff; }
.kp-son { text-align: center; }
.kp-sira { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 520px; }
.kp-sira li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--cizgi); border-radius: var(--kose-orta); }
.kp-sira li.ben { border-color: var(--vurgu); background: color-mix(in srgb, var(--vurgu) 8%, var(--yuzey)); }
.kp-no { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--zemin2); font-weight: 800; font-size: 14px; }
.kp-sira li:first-child .kp-no { background: #F59E0B; color: #fff; }
@media (max-width: 520px) { .kp-secenekler { grid-template-columns: minmax(0, 1fr); } .kp-metin { font-size: 23px; } .taktik-kart { padding-left: var(--b5); } .taktik-kart .adim-no { position: static; display: inline-grid; margin-bottom: 6px; } }
.cz-tara { stroke: #DC2626; stroke-width: 3; stroke-linecap: round; }
.cizim-kucuk { border-radius: var(--kose-orta); margin-bottom: var(--b3); }
.surec-gorsel li { padding-top: var(--b4); }
.metin .surec-gorsel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .metin .surec-gorsel { grid-template-columns: minmax(0, 1fr); } }
/* "Neler var?" kart ikonları (sade çizgi) */
.kart-ikon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 10px;
  background: color-mix(in srgb, var(--vurgu) 12%, var(--yuzey)); color: var(--vurgu); }
.kart-ikon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Yönetim paneli: sade şablon (sitenin menüsü/alt bilgisi yok) ── */
body.yalin { background: var(--zemin2); }
.yalin-ust { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: var(--yuzey); border-bottom: 1px solid var(--cizgi); }
.yalin-ust .logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--yazi); }
.yalin-ust .logo-ad { font: 800 19px var(--yazi-baslik); }
.yalin-etiket { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--vurgu) 14%, transparent); color: var(--vurgu); }
.yalin-don { font-weight: 600; text-decoration: none; color: var(--vurgu); white-space: nowrap; }
.yalin-don:hover { text-decoration: underline; }
body.yalin main { max-width: none; }
/* Koçlar */
.ogretmen-foto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; background: color-mix(in srgb, var(--vurgu) 16%, var(--yuzey)); }
.ogretmen-kart.koordinator { border-color: var(--vurgu); background: color-mix(in srgb, var(--vurgu) 5%, var(--yuzey)); }

/* ── Haftalık plan ── */
.plan-kart { margin-bottom: var(--b5); }
.pl-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-ust .ikon-dugme { font-size: 22px; line-height: 1; }
.pl-hafta { font: 800 18px var(--yazi-baslik); }
.pl-oran { margin-left: auto; }
.pl-cubuk { margin: 10px 0 14px; }
.pl-izgara { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1100px) { .pl-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pl-izgara { grid-template-columns: minmax(0, 1fr); } }
.pl-gun { border: 1px solid var(--cizgi); border-radius: var(--kose-orta); padding: 10px; background: var(--zemin2); display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.pl-gun.bugun { border-color: var(--vurgu); background: color-mix(in srgb, var(--vurgu) 6%, var(--yuzey)); }
.pl-gun.gecmis { opacity: .8; }
.pl-gun h4 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--yazi2); }
.pl-gun.bugun h4 { color: var(--vurgu); }
.pl-gorevler { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pl-gorev { display: flex; gap: 8px; align-items: flex-start; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 10px; padding: 8px; position: relative; }
.pl-gorev.tamam { border-color: var(--basari); background: color-mix(in srgb, var(--basari) 7%, var(--yuzey)); }
.pl-gorev.tamam .pl-baslik { text-decoration: line-through; opacity: .7; }
.pl-tik { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--cizgi2); background: var(--yuzey); color: #fff; font-weight: 800; cursor: pointer; display: grid; place-items: center; padding: 0; }
.pl-gorev.tamam .pl-tik { background: var(--basari); border-color: var(--basari); }
.pl-tik:disabled { cursor: default; }
.pl-govde { display: grid; gap: 2px; min-width: 0; flex: 1; }
.pl-baslik { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.pl-alt { font-size: 12px; color: var(--yazi2); }
.pl-mini { height: 4px; background: var(--cizgi); border-radius: 3px; overflow: hidden; } .pl-mini i { display: block; height: 100%; background: var(--vurgu); }
.pl-sil { position: absolute; top: 2px; right: 4px; border: 0; background: none; color: var(--yazi2); font-size: 16px; cursor: pointer; padding: 2px 4px; }
.pl-sil:hover { color: var(--hata); }
.pl-gorev:has(.pl-sil) .pl-govde { padding-right: 14px; }
.pl-bos { padding: 4px 2px; }
.pl-ekle { margin-top: auto; border: 1px dashed var(--cizgi2); background: none; border-radius: 10px; padding: 6px; color: var(--vurgu); font-weight: 600; cursor: pointer; }
.pl-ekle:hover { border-color: var(--vurgu); }
.pl-alt-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.pl-form { margin-top: 14px; } .pl-form h4 { margin: 0 0 10px; }
.pl-form-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.pl-genis { grid-column: 1 / -1; }
@media (max-width: 600px) { .pl-form-izgara { grid-template-columns: minmax(0, 1fr); } }
.pl-form-alt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tur-soru_coz .pl-tik:disabled, .tur-kart .pl-tik:disabled, .tur-deneme .pl-tik:disabled, .tur-mini .pl-tik:disabled { border-style: dotted; }

/* ── Kahraman: db sahnesi (yörüngeler, parlayan karo, çizilen harfler) ── */
.kahraman-gorsel .kahraman-cizim { width: min(520px, 100%); overflow: visible; }
.kc-isik1 { stop-color: color-mix(in srgb, var(--vurgu) 28%, transparent); } .kc-isik2 { stop-color: color-mix(in srgb, var(--vurgu) 0%, transparent); }
.kc-karo1 { stop-color: color-mix(in srgb, var(--vurgu) 62%, #fff); } .kc-karo2 { stop-color: var(--vurgu); } .kc-karo3 { stop-color: color-mix(in srgb, var(--vurgu) 72%, #000); }
.kc-golge { flood-color: var(--vurgu); flood-opacity: .45; }
.kc-kenar { fill: none; stroke: rgb(255 255 255 / .35); stroke-width: 3; }
.kc-ciz { fill: none; stroke: #fff; stroke-width: 22; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: kc-ciz 1.4s cubic-bezier(.6,0,.2,1) forwards; }
.kc-ciz.c1 { animation-delay: .2s; } .kc-ciz.c2 { animation-delay: .6s; } .kc-ciz.c3 { animation-delay: .9s; }
@keyframes kc-ciz { to { stroke-dashoffset: 0; } }
.kc-karo-g { animation: kc-suz 6s ease-in-out infinite; transform-origin: 280px 260px; }
@keyframes kc-suz { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
.yorunge { animation: kc-don 60s linear infinite; }
.yorunge.yr2 { animation-duration: 38s; animation-direction: reverse; }
.dik.yr1-dik { animation: kc-don 60s linear infinite reverse; }
@keyframes kc-don { to { transform: rotate(360deg); } }
.yr-cizgi { fill: none; stroke: color-mix(in srgb, var(--vurgu) 30%, transparent); stroke-width: 2; stroke-dasharray: 4 10; }
.yr-cip { fill: var(--yuzey); stroke: color-mix(in srgb, var(--vurgu) 35%, var(--cizgi)); stroke-width: 2; }
.yr-cip-dolu { fill: var(--vurgu); }
.yr-form { fill: color-mix(in srgb, var(--vurgu) 12%, var(--yuzey)); stroke: color-mix(in srgb, var(--vurgu) 40%, transparent); stroke-width: 1.5; }
.yr-yazi { fill: var(--vurgu); font-family: var(--yazi-baslik); font-weight: 800; }
.yr-yazi-ters { fill: var(--vurgu-ustu); font-family: var(--yazi-baslik); font-weight: 800; }
.yr-nokta { fill: color-mix(in srgb, var(--vurgu) 55%, transparent); }
.kc-yildiz { fill: #F5B301; animation: kc-parla 3.2s ease-in-out infinite; }
@keyframes kc-parla { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .kc-ciz { stroke-dashoffset: 0; animation: none; } .yorunge, .dik, .kc-karo-g, .kc-yildiz { animation: none; } }
@media (max-width: 760px) { .kahraman-gorsel .kahraman-cizim { width: min(330px, 88%); } }

/* ── Soru-cevap ── */
.ss-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
@media (max-width: 640px) { .ss-izgara { grid-template-columns: minmax(0, 1fr); } }
.ss-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ss-kart { display: grid; gap: 8px; } .ss-kart.cevapli { border-color: var(--basari); }
.ss-ust { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.ss-gorseller { display: flex; gap: 8px; flex-wrap: wrap; }
.soru-gorsel { max-width: 100%; max-height: 420px; width: auto; border-radius: var(--kose-orta); border: 1px solid var(--cizgi); background: var(--zemin2); display: block; }
.ss-cevap { background: color-mix(in srgb, var(--basari) 7%, var(--yuzey)); border-left: 3px solid var(--basari); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; }
.ss-cevap p { margin: 0; }
.ss-cevap-form { border-top: 1px dashed var(--cizgi2); padding-top: 10px; }
.cozumlu-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cozumlu-liste h3 { font-size: 17px; margin: 8px 0 4px; }
.cozumlu .kart { margin: var(--b4) 0; } .cozum-kart { border-color: var(--basari); }
.yt-cozum { display: inline-grid; gap: 6px; text-decoration: none; font-weight: 700; margin-top: 8px; } .yt-cozum img { border-radius: var(--kose-orta); max-width: 360px; width: 100%; height: auto; }

/* ── Üyeliğe çağrı ── */
.uye-cagri-satir { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 760px) { .uye-cagri-satir { justify-content: center; } }
.uyelik-bant .uyelik-ic { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: var(--b6); align-items: center; padding: clamp(24px, 4vw, 44px);
  border-radius: 28px; color: var(--vurgu-ustu); background: radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--vurgu) 55%, #fff) 0, transparent 45%), linear-gradient(135deg, var(--vurgu), color-mix(in srgb, var(--vurgu) 70%, #000)); box-shadow: 0 30px 60px -30px var(--vurgu); }
.uyelik-metin h2 { color: inherit; font-size: clamp(26px, 3.2vw, 38px); margin: 10px 0; }
.uyelik-metin p { opacity: .9; }
.uyelik-rozet { display: inline-block; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; background: rgb(255 255 255 / .18); }
.uyelik-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.uyelik-bant .dugme { background: #fff; color: var(--vurgu); border-color: #fff; }
.uyelik-bant .dugme.ikincil { background: transparent; color: #fff; border-color: rgb(255 255 255 / .6); }
.uyelik-faydalar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.uyelik-faydalar li { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center; padding: 12px; border-radius: 16px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .16); }
.uf-ikon { grid-row: span 2; font-size: 24px; text-align: center; }
.uyelik-faydalar strong { font-size: 15px; } .uyelik-faydalar span:not(.uf-ikon) { font-size: 13px; opacity: .85; }
@media (max-width: 860px) { .uyelik-bant .uyelik-ic { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .uyelik-faydalar { grid-template-columns: minmax(0, 1fr); } }
.uye-serit { display: none; }
@media (max-width: 760px) {
  .uye-serit { display: flex; align-items: center; gap: 10px; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 70; padding: 10px 10px 10px 14px; border-radius: 16px;
    background: var(--yazi); color: var(--zemin); box-shadow: 0 12px 30px rgb(0 0 0 / .3); font-size: 13.5px; line-height: 1.3; animation: serit-gel .4s ease-out; }
  .uye-serit span { flex: 1; } .uye-serit .dugme { padding: 8px 14px; flex: none; }
  .uye-serit button { background: none; border: 0; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px; opacity: .7; }
}
@keyframes serit-gel { from { transform: translateY(120%); } to { transform: none; } }
.kahraman-metin .uye-cagri-satir { margin-bottom: var(--b4); }

/* Alt bilgi düzeltme (2026-11-09): "Araçlar ve kaynaklar" iki sütun CSS columns + nowrap yüzünden üst üste biniyordu → ızgara, kırılabilir */
.alt-menu ul.iki-kolon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--b5); row-gap: 5px; columns: auto; }
.alt-menu ul.iki-kolon li { white-space: normal; margin: 0; break-inside: auto; }
.alt-menu { grid-template-columns: repeat(3, minmax(0, auto)) minmax(300px, 1.4fr); }
@media (max-width: 1240px) { .alt-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); } .alt-genis { grid-column: 1 / -1; } .alt-menu ul.iki-kolon { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .alt-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); } .alt-genis { grid-column: auto; } .alt-menu ul.iki-kolon { grid-template-columns: minmax(0, 1fr); } }
.paket .shopier-dugme { margin-top: 8px; }

/* Görünür SSS (şablon, 2026-11-09) */
.sss-kap { max-width: var(--gen-metin); margin: var(--b6) 0 var(--b4); }
.sss summary { list-style-position: outside; }
.sss details p { color: var(--yazi2); margin: 8px 0 0; }
/* Deneme seçim kartları */
.deneme-secim { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ds-kart { display: flex; gap: 12px; align-items: center; padding: 16px; }
.ds-kart strong { display: block; } .ds-kart .soluk { display: block; }
.ds-ikon { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font: 800 16px var(--yazi-baslik); color: var(--vurgu-ustu); background: var(--vurgu); }

/* ── Konu anlatımı / soru tipleri ── */
.icindekiler { margin: var(--b4) 0; } .icindekiler ol { margin: 8px 0 0; padding-left: 22px; } .icindekiler li { margin: 4px 0; }
.konu { scroll-margin-top: 90px; border-top: 1px solid var(--cizgi); padding-top: var(--b4); margin-top: var(--b5); }
.formul-kutu { background: color-mix(in srgb, var(--vurgu) 6%, var(--yuzey)); border-color: color-mix(in srgb, var(--vurgu) 30%, var(--cizgi)); }
.formul-kutu ul { margin: 8px 0 0; padding-left: 20px; } .formul-kutu li { margin: 4px 0; font-variant-numeric: tabular-nums; }
.cozumlu-ornek { border: 1px solid var(--cizgi); border-radius: var(--kose-orta); padding: 12px 16px; margin: var(--b3) 0; background: var(--yuzey); }
.cozumlu-ornek .ornek-soru { margin: 0; }
.cozumlu-ornek summary { cursor: pointer; color: var(--vurgu); font-weight: 600; margin-top: 8px; }
.cozumlu-ornek ol { margin: 8px 0; padding-left: 22px; } .ornek-cevap { margin: 0; color: var(--basari); }
.yazili-ipucu { border-left: 3px solid var(--uyari); padding: 6px 12px; background: color-mix(in srgb, var(--uyari) 8%, transparent); border-radius: 6px; }
.ornek-kutu { margin: 8px 0; }
.soru-tipi { border-top: 1px solid var(--cizgi); padding-top: var(--b3); margin-top: var(--b4); }