/* ═══════════════════════════════════════════════════════════
   KOMUT ROTASI — SINIF-ROTASI.CSS
   Bilişim Defteri (sr) alan sayfası

   Yalnız tema değişkenleri kullanılır; renk hard-code edilmez.
   Ölçüler clamp() ile verilir, gridler standart
   repeat(auto-fit, minmax(min(Xpx, 100%), 1fr)) kalıbını kullanır.
═════════════════════════════════════════════════════════════ */

.bd-wrap {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 40px) clamp(12px, 3vw, 32px) clamp(48px, 6vw, 96px);
}

/* ─── Hero ─────────────────────────────────────────────── */

.bd-hero {
  border: 1px solid var(--border);
  border-radius: clamp(14px, 1.6vw, 22px);
  background: var(--card);
  padding: clamp(14px, 2vw, 26px);
  margin-bottom: clamp(12px, 1.6vw, 20px);
}

.bd-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(.68rem, .8vw, .78rem);
  letter-spacing: .12em;
  color: var(--text3);
  border: 1px solid var(--border2);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: clamp(8px, 1vw, 12px);
}

.bd-hero-kicker span,
.bd-hero-kicker i {
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
}

/* Görünen "Bilişim Defteri" başlığı defter kapağının üzerindedir;
   kapak dekoratif olduğu için sayfanın h1'i burada görsel olarak
   gizlenir ama belgede ve erişilebilirlik ağacında kalır. */
.bd-gizli-baslik {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Tek sütun: defter ortada durur. Açılınca yanında liste çıkmaz;
   kapak açılır ve sayfa ortaokul rafına geçer (bilisim-defteri.js
   sahneAcKapaBagla). */
.bd-hero-govde {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

.bd-sahne-alani {
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════
   3D DEFTER SAHNESİ

   docs/onizlemeler/bilisim-defteri/05-acilan-defter.html önizlemesindeki
   (9 Ekim 2026'da silindi, git geçmişinde) tasarımın alan koduna
   taşınmış hâlidir: kapak önü, kapak arkası,
   sayfa bloğu ve ayraç ayrı 3B yüzeylerdir.

   Önizlemedeki sabit krem paleti yerine tema değişkenleri kullanılır.
   Koyulaştırma gereken yerlerde --text1 yerine siyah karışımı
   tercih edilir: --text1 açık temalarda koyu, koyu temalarda açıktır;
   siyah her iki temada da aynı yönde çalışır.

   Açılış yalnız kullanıcı tıklayınca olur, sayfa yüklenince
   otomatik oynamaz (bkz. bilisim-defteri.js sahneAcKapaBagla).
   ═══════════════════════════════════════════════════════════ */

.bd-sahne {
  position: relative;
  width: 100%;
  height: clamp(300px, calc(100vh - 300px), 680px);
  perspective: 1600px;
  isolation: isolate;
  cursor: pointer;
}

.bd-isik {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  bottom: -20px;
  z-index: -1;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--card) 80%, transparent), transparent 65%);
}

.bd-zemin-yazisi {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  translate: 0 -56%;
  text-align: center;
  font: 850 clamp(65px, 14vw, 200px)/1 system-ui, sans-serif;
  letter-spacing: -.08em;
  color: transparent;
  -webkit-text-stroke: 1px var(--border2);
  pointer-events: none;
}

.bd-masa-golgesi {
  position: absolute;
  left: calc(50% - 200px);
  top: 50%;
  translate: 0 clamp(70px, 13vh, 135px);
  width: 440px;
  height: 120px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .30), transparent 68%);
  filter: blur(12px);
  transform: rotate(-10deg);
  transition: width 1.4s, left 1.4s;
}

.bd-kitap {
  position: absolute;
  left: calc(50% - 140px);
  top: 50%;
  translate: 0 -52%;
  width: 280px;
  height: 355px;
  scale: 1.05;
  transform-style: preserve-3d;
  transform: rotateX(22deg) rotateY(-25deg) rotateZ(-8deg);
  transition: transform 1.6s cubic-bezier(.22, .7, .2, 1), scale 1.6s cubic-bezier(.22, .7, .2, 1);
}

.bd-arka-kapak {
  position: absolute;
  inset: -5px;
  border-radius: 3px 10px 10px 3px;
  background: color-mix(in srgb, var(--bd-kitap-renk, var(--primary)) 62%, black);
  transform: translateZ(-5px);
  box-shadow: 7px 10px 0 color-mix(in srgb, var(--bd-kitap-renk, var(--primary)) 42%, black);
}

.bd-sayfa-blogu {
  position: absolute;
  inset: 3px 0 3px 3px;
  background: var(--card2);
  transform-style: preserve-3d;
  transform: translateZ(1px);
}

/* Sayfa kenarları: kitabın sağ ve alt yüzünde tek tek yaprak izleri. */
.bd-sayfa-blogu::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  width: 22px;
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--card2) 0 2px, var(--bg3) 2px 3px);
  transform-origin: left;
  transform: rotateY(-90deg);
}

.bd-sayfa-blogu::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 22px;
  background: repeating-linear-gradient(0deg, var(--card2) 0 2px, var(--bg3) 2px 3px);
  transform-origin: top;
  transform: rotateX(90deg);
}

/* Sağ boşluk ayracın altında kalmayacak kadar geniş tutulur:
   ayraç kitabın sağından 30px içeride ve 19px genişliktedir. */
.bd-sayfa {
  position: absolute;
  inset: 4px 2px 4px 4px;
  padding: 28px 60px 20px 30px;
  background: linear-gradient(90deg, var(--bg2), var(--card2) 12%);
  border-radius: 0 5px 5px 0;
  transform: translateZ(23px);
  backface-visibility: hidden;
}

.bd-sayfa-ust {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font: 8px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
  color: var(--text2);
}

.bd-sayfa h2 {
  margin: 18px 0 12px;
  font: 400 25px/1.15 Georgia, "Times New Roman", serif;
  letter-spacing: -.035em;
  color: var(--text1);
}

.bd-sayfa p {
  margin: 0 0 9px;
  font-size: 10px;
  line-height: 1.9;
  color: var(--text2);
}

.bd-sayfa-gorev {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: color-mix(in srgb, var(--bd-kitap-renk, var(--primary)) var(--kimlik-yazi-orani, 100%), var(--text1));
  font-size: 9px;
}

.bd-sayfa-no {
  position: absolute;
  right: 62px;
  bottom: 18px;
  font: 10px Georgia, "Times New Roman", serif;
  color: var(--text2);
}

.bd-ayrac {
  position: absolute;
  top: -4px;
  right: 30px;
  width: 19px;
  height: 400px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--secondary) 75%, black), var(--secondary));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 97%, 0 100%);
  opacity: .85;
  transform: translateZ(24px);
  pointer-events: none;
}

.bd-kapak {
  position: absolute;
  inset: -5px -5px -5px -3px;
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: translateZ(27px) rotateY(0deg);
  transition: transform 1.6s cubic-bezier(.22, .7, .2, 1);
}

.bd-kapak-yuzu {
  position: absolute;
  inset: 0;
  border-radius: 3px 9px 9px 3px;
  overflow: hidden;
  backface-visibility: hidden;
}

.bd-kapak-on {
  padding: 30px 28px 25px 35px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bd-kitap-renk, var(--primary)) 52%, black), var(--bd-kitap-renk, var(--primary)) 8%, color-mix(in srgb, var(--bd-kitap-renk, var(--primary)) 76%, black) 100%);
  color: #fff;
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, .3), inset -3px 0 0 rgba(0, 0, 0, .22);
}

/* Bez kapak dokusu. */
.bd-kapak-on::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 2px, rgba(255, 255, 255, .05) 2px 3px),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .05) 2px 3px);
  pointer-events: none;
}

/* Kapak üzerindeki gömme çerçeve. */
.bd-kapak-on::after {
  content: "";
  position: absolute;
  inset: 15px 15px 15px 23px;
  border: 1px solid rgba(255, 255, 255, .32);
}

.bd-kapak-on small {
  display: block;
  font: 8px/1.8 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .16em;
}

.bd-kapak-on strong {
  display: block;
  margin-top: 32px;
  font: 400 42px/1 Georgia, "Times New Roman", serif;
  letter-spacing: -.04em;
}

.bd-kapak-motif {
  margin-top: 22px;
  font: 400 67px/1 Georgia, "Times New Roman", serif;
  color: rgba(255, 255, 255, .5);
}

.bd-kapak-imza {
  position: absolute;
  bottom: 35px;
  font: 8px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .13em;
  color: rgba(255, 255, 255, .72);
}

.bd-kapak-ic {
  padding: 33px 28px;
  background: linear-gradient(90deg, var(--card2) 87%, var(--bg2));
  border: 5px solid color-mix(in srgb, var(--bd-kitap-renk, var(--primary)) 62%, black);
  color: var(--text1);
  transform: rotateY(180deg);
}

.bd-kapak-ic-etiket {
  font: 8px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .1em;
  color: color-mix(in srgb, var(--bd-kitap-renk, var(--primary)) var(--kimlik-yazi-orani, 100%), var(--text1));
}

.bd-kapak-ic h2 {
  margin: 24px 0 15px;
  font: 400 30px/1.1 Georgia, "Times New Roman", serif;
  letter-spacing: -.03em;
  color: var(--text1);
}

.bd-kapak-ic p {
  margin: 0;
  font-size: 10px;
  line-height: 1.9;
  color: var(--text2);
}

.bd-kapak-cicek {
  display: block;
  margin-top: 20px;
  font: 45px Georgia, "Times New Roman", serif;
  color: color-mix(in srgb, var(--bd-kitap-renk, var(--primary)) var(--kimlik-yazi-orani, 100%), var(--text1));
}

/* Sol not: defter kenarına elle düşülmüş, fosforlu kalemle
   işaretlenmiş bir kenar notu. Vurgu ve ok kullanıcının gözünü
   kitabın kapağına yönlendirir. */

.bd-kenar-notu {
  position: absolute;
  left: 3%;
  top: 30%;
  width: 200px;
  transform: rotate(-8deg);
  transition: opacity .6s ease;
}

.bd-kenar-notu-metin {
  display: block;
  padding-left: 16px;
  border-left: 3px solid color-mix(in srgb, var(--accent) 70%, transparent);
  font: italic 21px/1.55 Georgia, "Times New Roman", serif;
  color: var(--text1);
}

.bd-kenar-vurgu {
  font-style: inherit;
  padding: 0 .16em;
  /* Fosforlu kalem izi harflerin altına iner: beş temada da
     metin rengiyle çakışmadan dikkat çeker. */
  background:
    linear-gradient(
      to bottom,
      transparent 76%,
      color-mix(in srgb, var(--accent) 72%, transparent) 76%,
      color-mix(in srgb, var(--accent) 72%, transparent) 98%,
      transparent 98%
    );
  border-radius: 2px;
}

.bd-kenar-notu-ok {
  display: block;
  margin: 8px 0 0 72px;
  font: 52px/1 Georgia, "Times New Roman", serif;
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--primary) 45%, transparent));
  animation: bdOkCagir 2.4s ease-in-out infinite;
}

@keyframes bdOkCagir {
  0%, 100% { transform: translate(0, 0); opacity: .75; }
  50%      { transform: translate(9px, -7px); opacity: 1; }
}

/* Sağ not: raftaki defter sayısını duyuran dizin sekmesi. Maddeler
   ders ailelerini (BT, Robotik Kodlama) sayar. */

.bd-sag-not {
  position: absolute;
  right: 3%;
  top: 28%;
  padding: 16px 18px 16px 20px;
  border: 1px solid var(--border2);
  border-left: 4px solid var(--primary);
  border-radius: 4px 12px 12px 4px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
  transition: opacity .6s ease;
}

.bd-sag-not b {
  display: block;
  font: 400 58px/1 Georgia, "Times New Roman", serif;
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
  text-shadow: 0 0 22px color-mix(in srgb, var(--primary) 35%, transparent);
}

.bd-sag-not-etiket {
  display: block;
  margin: 2px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border2);
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .24em;
  color: var(--text2);
}

.bd-sag-not-liste span {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 11px/2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
  color: var(--text1);
}

.bd-sag-not-liste span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bd-nokta-renk, var(--primary));
  flex: none;
}

/* Üç nokta, üç ders ailesini ayrı renkle işaretler.
   Renkler satır içi style ile verilemez: üretimdeki CSP başlığı
   style-src 'self' olduğu için tarayıcı o özniteliği uygulamaz. */
.bd-sag-not-liste span:nth-child(1) { --bd-nokta-renk: var(--c1); }
.bd-sag-not-liste span:nth-child(2) { --bd-nokta-renk: var(--c2); }
.bd-sag-not-liste span:nth-child(3) { --bd-nokta-renk: var(--c3); }

/* ─── Açık durum ─────────────────────────────────────────
   Kapak menteşede dönerken kitabın kendisi de kayar ve açı
   değiştirir; iki hareket birlikte olmazsa kapak gövdeden
   kopmuş gibi görünür. */

.bd-hero.bd-acik .bd-kapak {
  transform: translateZ(27px) rotateY(-162deg);
}

.bd-hero.bd-acik .bd-kitap {
  transform: translateX(140px) rotateX(15deg) rotateY(8deg) rotateZ(-2deg);
}

.bd-hero.bd-acik .bd-masa-golgesi {
  width: 640px;
  left: calc(50% - 320px);
}

.bd-hero.bd-acik .bd-kenar-notu,
.bd-hero.bd-acik .bd-sag-not {
  opacity: 0;
  pointer-events: none;
}

/* ─── Aç/kapat düğmesi ───────────────────────────────────── */

.bd-kapak-kontrol {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  z-index: 4;
  margin-top: clamp(2px, .8vw, 8px);
}

.bd-kapak-dugme {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 14px 25px;
  border: 0;
  border-radius: 30px;
  background: var(--text1);
  color: var(--bg1);
  font: inherit;
  font-size: clamp(.82rem, .95vw, .92rem);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .18);
  transition: transform .18s ease, box-shadow .18s ease;
}

.bd-kapak-dugme:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(0, 0, 0, .22);
}

.bd-kapak-dugme:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

/* Ses düğmesi ikincil kalır: asıl eylem defteri açmaktır, ses
   yalnız isteğe bağlı bir tercihtir. Açıkken çerçevesi ve metni
   vurgu rengine döner. */
.bd-ses-dugme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 17px;
  border: 1px solid var(--border2);
  border-radius: 30px;
  background: transparent;
  color: var(--text2);
  font: inherit;
  font-size: clamp(.72rem, .8vw, .8rem);
  font-weight: 600;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.bd-ses-dugme:hover {
  color: var(--text1);
  border-color: var(--text3);
  background: color-mix(in srgb, var(--card) 60%, transparent);
}

.bd-ses-dugme[aria-pressed="true"] {
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.bd-ses-dugme:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.bd-ses-ikon {
  font-size: .95em;
}

/* ═══════════════════════════════════════════════════════════
   DUYARLI DÜZEN

   Hedef: hero hem kapalı hem açık durumda ekrana sığar; sayfayı
   kaydırınca yalnız altbilgi gelir. Bu yüzden sahne yüksekliği vh
   ile verilir ve defter ölçeği ekran YÜKSEKLİĞİNE göre kademelenir
   (genişlik tek başına yetmez: geniş ama basık ekranda defter taşar).
   ═══════════════════════════════════════════════════════════ */

/* ─── Geniş ekran ─────────────────────────────────────────── */

@media (min-width: 1025px) {
  .bd-kitap,
  .bd-hero.bd-acik .bd-kitap {
    scale: 1.2;
  }
}

/* Orta genişlikte açık defterin iki yüzü sol sütuna sığmalı; küçülme
   tıklama anında değil, en baştan uygulanır ki defter açılırken
   boyut değiştirmesin. */
@media (min-width: 1025px) and (max-width: 1300px) {
  .bd-kitap,
  .bd-hero.bd-acik .bd-kitap {
    scale: 1;
  }
}

@media (min-width: 1500px) and (min-height: 950px) {
  .bd-kitap,
  .bd-hero.bd-acik .bd-kitap {
    scale: 1.4;
  }
}

@media (min-width: 1025px) and (max-height: 780px) {
  .bd-kitap,
  .bd-hero.bd-acik .bd-kitap {
    scale: .95;
  }
}

@media (min-width: 1025px) and (max-height: 660px) {
  .bd-kitap,
  .bd-hero.bd-acik .bd-kitap {
    scale: .78;
  }
}

/* ─── Dar ekran ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .bd-sahne {
    height: clamp(300px, 42vh, 440px);
  }

  .bd-kitap,
  .bd-hero.bd-acik .bd-kitap {
    scale: 1.05;
  }

  .bd-kenar-notu {
    left: 0;
    width: 156px;
  }

  .bd-kenar-notu-metin {
    font-size: 17px;
  }

  .bd-kenar-notu-ok {
    margin-left: 52px;
    font-size: 42px;
  }

  .bd-sag-not {
    right: 0;
    padding: 12px 14px 12px 16px;
  }

  .bd-sag-not b {
    font-size: 46px;
  }

  .bd-sag-not-liste span {
    font-size: 10px;
  }
}

@media (max-width: 768px) {
  .bd-kenar-notu,
  .bd-sag-not {
    display: none;
  }

  .bd-kitap,
  .bd-hero.bd-acik .bd-kitap {
    scale: .9;
  }
}

@media (max-width: 640px) {
  .bd-kitap,
  .bd-hero.bd-acik .bd-kitap {
    scale: .72;
  }

  .bd-masa-golgesi {
    left: calc(50% - 140px);
    width: 280px;
  }

  .bd-hero.bd-acik .bd-masa-golgesi {
    left: calc(50% - 170px);
    width: 340px;
  }
}

@media (max-width: 430px) {
  .bd-kitap,
  .bd-hero.bd-acik .bd-kitap {
    scale: .58;
  }
}

@media (max-width: 370px) {
  .bd-kitap,
  .bd-hero.bd-acik .bd-kitap {
    scale: .52;
  }
}

/* ─── Akıllı tahta ve 4K ──────────────────────────────────── */

@media (min-width: 1920px) and (min-height: 1000px) {
  .bd-kitap {
    scale: 1.45;
  }

  .bd-hero.bd-acik .bd-kitap {
    scale: 1.1;
  }
}

@media (min-width: 3200px) and (min-height: 1400px) {
  .bd-kitap {
    scale: 1.9;
  }

  .bd-hero.bd-acik .bd-kitap {
    scale: 1.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bd-kitap,
  .bd-kapak,
  .bd-masa-golgesi,
  .bd-kenar-notu,
  .bd-sag-not,
  .bd-kapak-dugme {
    transition: none;
  }

  .bd-kenar-notu-ok {
    animation: none;
    opacity: 1;
  }
}

/* ─── Bölüm başlığı ────────────────────────────────────── */

.bd-bolum-basi {
  margin: clamp(14px, 1.6vw, 22px) 0 clamp(8px, 1.1vw, 14px);
}

.bd-bolum-etiket {
  display: block;
  font-size: clamp(.66rem, .78vw, .74rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 6px;
}

.bd-bolum-basi h2 {
  margin: 0 0 6px;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  color: var(--text1);
}

.bd-bolum-basi p {
  margin: 0;
  max-width: 72ch;
  font-size: clamp(.85rem, 1vw, .95rem);
  line-height: 1.6;
  color: var(--text2);
}

/* ═══════════════════════════════════════════════════════════
   SINIF DEFTERLERİ — ANA SAYFADAKİ DEFTERİN KÜÇÜĞÜ

   Her sınıf, hero'daki defterin aynısıdır: aynı .bd-kitap,
   .bd-arka-kapak, .bd-sayfa-blogu, .bd-sayfa, .bd-ayrac ve
   .bd-kapak parçaları kullanılır. Burada yalnız ölçek, sahne
   ve açılış tetikleyicisi farklıdır; kapak rengi her sınıfa
   --bd-kitap-renk ile verilir.

   Tıklanınca kapak açılır, geçiş bitince hafta listesine gidilir
   (bkz. bilisim-defteri.js miniDefterleriBagla).
   ═══════════════════════════════════════════════════════════ */

.bd-mini-raf {
  position: relative;
  display: grid;
  gap: clamp(14px, 1.8vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}

.bd-mini {
  position: relative;
  display: block;
  height: clamp(300px, 25vw, 340px);
  perspective: 1100px;
  color: var(--text1);
  text-decoration: none;
}

.bd-mini:focus-visible {
  outline: 2px solid var(--bd-kitap-renk, var(--primary));
  outline-offset: 6px;
  border-radius: 12px;
}

/* Kilitli defter <button> olarak basılır; tarayıcının düğme varsayılanları
   (kenarlık, zemin, yazı tipi, iç boşluk) sıfırlanır ki <a> ile birebir
   aynı görünsün. */
.bd-mini-kilitli {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: inherit;
  cursor: not-allowed;
}

.bd-mini-kilitli .bd-kitap.bd-kitap-mini {
  filter: grayscale(.45) brightness(.94);
}

/* Kilitli defterde kapak kalkmaz; yalnız hafifçe öne gelir. */
.bd-mini-kilitli:hover .bd-kitap.bd-kitap-mini,
.bd-mini-kilitli:focus-visible .bd-kitap.bd-kitap-mini {
  transform: rotateX(6deg) rotateY(-6deg);
}

.bd-mini-kilit {
  position: absolute;
  z-index: 4;
  top: clamp(8px, 1.4vw, 16px);
  right: clamp(8px, 1.4vw, 16px);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border2);
  border-radius: 50%;
  background: var(--card);
  color: var(--text2);
  font-size: max(.82rem, 12px);
  box-shadow: 0 4px 12px rgb(0 0 0 / .18);
}

@keyframes bd-kilit-sarsinti {
  0%, 100% { translate: 0 0; }
  20% { translate: -6px 0; }
  40% { translate: 5px 0; }
  60% { translate: -3px 0; }
  80% { translate: 2px 0; }
}

/* Sarsıntı KARTA uygulanır, içindeki .bd-kitap'a değil: kitabın kendi
   "translate: 0 -52%" konumlandırması var ve karelerdeki translate onu
   ezip defteri aşağı düşürüyordu. Kart hiç translate kullanmaz, ayrıca
   kilit rozeti de kitapla birlikte titrer. */
.bd-mini-sarsinti {
  animation: bd-kilit-sarsinti .42s ease;
}

@media (prefers-reduced-motion: reduce) {
  .bd-mini-sarsinti { animation: none; }
}

/* Açılan kapak komşu defterin üstüne taşar; açılan defter öne alınır. */
.bd-mini-acik {
  z-index: 3;
}

.bd-mini .bd-masa-golgesi {
  left: calc(50% - 100px);
  width: 200px;
  height: 60px;
  translate: 0 clamp(40px, 6vh, 72px);
  filter: blur(8px);
}

/* Sınıf defteri hero'daki defterin küçültülmüş hâlidir: iki sınıflı
   seçici, kırılım noktalarındaki .bd-kitap ölçeklerini geçersiz kılar. */
.bd-kitap.bd-kitap-mini {
  scale: .78;
  transition: transform .55s cubic-bezier(.22, .7, .2, 1);
}

.bd-mini:hover .bd-kitap.bd-kitap-mini,
.bd-mini:focus-visible .bd-kitap.bd-kitap-mini {
  transform: rotateX(18deg) rotateY(-16deg) rotateZ(-3deg);
}

.bd-mini .bd-kapak {
  transition: transform .58s cubic-bezier(.22, .7, .2, 1);
}

.bd-mini-acik .bd-kapak {
  transform: translateZ(27px) rotateY(-162deg);
}

.bd-mini-acik .bd-kitap.bd-kitap-mini,
.bd-mini-acik:hover .bd-kitap.bd-kitap-mini {
  transform: translateX(130px) rotateX(15deg) rotateY(8deg) rotateZ(-2deg);
}

.bd-mini-acik .bd-masa-golgesi {
  left: calc(50% - 145px);
  width: 290px;
}

/* Kapaktaki başlık sınıf adıdır; ders adı altında küçük satırda durur. */
.bd-mini .bd-kapak-on strong {
  margin-top: 26px;
  font-size: 40px;
}

.bd-kapak-ders {
  display: block;
  margin-top: 12px;
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .82);
}

.bd-mini .bd-kapak-motif {
  margin-top: 14px;
  font-size: 52px;
}

@media (prefers-reduced-motion: reduce) {
  .bd-kitap.bd-kitap-mini,
  .bd-mini .bd-kapak {
    transition: none;
  }
}

.bd-cip {
  font-size: clamp(.68rem, .8vw, .76rem);
  color: var(--text3);
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 999px;
  padding: 4px 11px;
}

/* ─── Ders seçici (kademe içi birden fazla ders/sekme) ──── */

.bd-ders-secici {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.2vw, 14px);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.bd-ders-sec {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.2vw, 14px);
  flex: 1 1 240px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: clamp(12px, 1.4vw, 16px);
  padding: clamp(12px, 1.5vw, 18px);
  color: var(--text1);
  transition: border-color .18s ease, background .18s ease;
}

.bd-ders-sec:hover,
.bd-ders-sec:focus-visible {
  border-color: var(--primary);
}

.bd-ders-sec.aktif {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
}

.bd-ders-sec-ikon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 3.6vw, 46px);
  height: clamp(38px, 3.6vw, 46px);
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: var(--bg3);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}

.bd-ders-sec-metin {
  min-width: 0;
}

.bd-ders-sec-metin strong {
  display: block;
  font-size: clamp(.92rem, 1.05vw, 1rem);
  color: var(--text1);
}

.bd-ders-sec-metin span {
  display: block;
  margin-top: 3px;
  font-size: clamp(.78rem, .9vw, .86rem);
  line-height: 1.5;
  color: var(--text2);
}

.bd-plan-cipler {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1vw, 12px);
  margin-bottom: clamp(12px, 1.6vw, 18px);
}

/* ─── Hafta listesi ────────────────────────────────────── */

.bd-hafta-listesi {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 12px);
}

.bd-hafta {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: clamp(10px, 1.2vw, 14px);
  padding: clamp(12px, 1.6vw, 18px);
  color: var(--text1);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}

.bd-hafta-acik:hover,
.bd-hafta-acik:focus-visible {
  border-color: var(--primary);
  transform: translateX(2px);
}

.bd-hafta-no {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(38px, 4vw, 46px);
  height: clamp(38px, 4vw, 46px);
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: var(--bg3);
  font-size: clamp(.78rem, .9vw, .88rem);
  font-weight: 600;
  color: var(--text2);
}

.bd-hafta-acik .bd-hafta-no {
  border-color: var(--primary);
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
}

.bd-hafta-govde {
  min-width: 0;
  flex: 1 1 auto;
}

.bd-hafta-konu {
  display: block;
  font-size: clamp(.88rem, 1.05vw, .98rem);
  line-height: 1.45;
}

.bd-hafta-durum {
  display: block;
  margin-top: 4px;
  font-size: clamp(.7rem, .82vw, .78rem);
  color: var(--text3);
}

.bd-hafta-kapali {
  opacity: .62;
  cursor: not-allowed;
}

.bd-hafta-durum-etiket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: clamp(.78rem, .9vw, .88rem);
  font-weight: 600;
  color: var(--text3);
}

.bd-hafta-acik .bd-hafta-durum-etiket {
  color: var(--text1);
}

.bd-hafta-acik .bd-hafta-durum-etiket i {
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
}

/* ─── Kırıntı yolu ─────────────────────────────────────── */

.bd-kirinti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(12px, 1.6vw, 18px);
  font-size: clamp(.76rem, .9vw, .85rem);
  color: var(--text3);
}

.bd-kirinti a {
  color: var(--text2);
  text-decoration: none;
  border-bottom: 1px solid var(--border2);
}

.bd-kirinti a:hover,
.bd-kirinti a:focus-visible {
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
  border-color: var(--primary);
}

.bd-kirinti-ayrac {
  color: var(--text3);
}

/* ─── Bilgi ve durum kutuları ──────────────────────────── */

.bd-bilgi {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.4vw, 16px);
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: clamp(12px, 1.4vw, 16px);
  padding: clamp(14px, 2vw, 22px);
  margin-top: clamp(20px, 3vw, 32px);
}

.bd-bilgi i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
}

.bd-bilgi strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text1);
  font-size: clamp(.88rem, 1vw, .96rem);
}

.bd-bilgi p {
  margin: 0;
  font-size: clamp(.82rem, .95vw, .9rem);
  line-height: 1.6;
  color: var(--text2);
}

.bd-bos {
  text-align: center;
  padding: clamp(28px, 5vw, 60px) clamp(16px, 3vw, 32px);
  background: var(--card);
  border: 1px dashed var(--border2);
  border-radius: clamp(12px, 1.4vw, 18px);
  color: var(--text2);
}

.bd-bos-emoji {
  display: block;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  margin-bottom: clamp(8px, 1.2vw, 14px);
}

.bd-bos strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text1);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
}

.bd-bos p {
  margin: 0 auto;
  max-width: 56ch;
  font-size: clamp(.85rem, 1vw, .94rem);
  line-height: 1.6;
}

/* ─── Yükleniyor ───────────────────────────────────────── */

.bd-yukleniyor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(32px, 6vw, 72px);
  color: var(--text3);
  font-size: clamp(.85rem, 1vw, .95rem);
}

.bd-yukleniyor span {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: srDonus .8s linear infinite;
}

@keyframes srDonus {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bd-yukleniyor span { animation: none; }
  .bd-kart,
  .bd-hafta { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   HAFTA SAYFASI
   scripts/bilisim-defteri-hafta-sayfasi-uret.js ile üretilen
   statik hafta sayfalarının biçimi.
═════════════════════════════════════════════════════════════ */

/* Hafta sayfası artık .bd-wrap ile aynı genişliği kullanır (kart, üstteki
   kırıntı yolu ile aynı hizada iki yana yaslı görünsün diye ayrı bir dar
   okuma genişliği tanımlanmaz). */

.bd-makale {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: clamp(14px, 1.6vw, 22px);
  padding: clamp(20px, 3.4vw, 44px);
}

.bd-makale-basi {
  padding-bottom: clamp(14px, 2vw, 22px);
  margin-bottom: clamp(18px, 2.6vw, 30px);
  border-bottom: 1px solid var(--border2);
}

.bd-makale-ustbilgi {
  margin: 0 0 clamp(8px, 1.2vw, 12px);
  font-size: clamp(.72rem, .86vw, .8rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text3);
}

/* Ünite/tema satırı: yıllık plandaki üst gruptur. Konu başlığının
   hemen üstünde, ondan daha sakin durur. */
.bd-makale-tema {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0 0 clamp(8px, 1.2vw, 12px);
  font-size: clamp(.82rem, .95vw, .92rem);
  font-weight: 600;
  color: var(--text2);
}

.bd-makale-tema-etiket {
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font-size: clamp(.64rem, .74vw, .7rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--primary) var(--rozet-yazi-orani, 100%), var(--text1));
}

.bd-makale-basi h1 {
  margin: 0;
  font-size: clamp(1.45rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  color: var(--text1);
}

.bd-makale-ozet {
  margin: clamp(10px, 1.4vw, 16px) 0 0;
  font-size: clamp(.92rem, 1.1vw, 1.05rem);
  line-height: 1.65;
  color: var(--text2);
}

/* ─── Anlatım gövdesi ──────────────────────────────────── */

.bd-anlatim h2,
.bd-anlatim h3,
.bd-anlatim h4,
.bd-anlatim h5 {
  margin: clamp(20px, 2.8vw, 32px) 0 clamp(8px, 1.2vw, 12px);
  line-height: 1.3;
  color: var(--text1);
}

.bd-anlatim h2 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); }
.bd-anlatim h3 { font-size: clamp(1.02rem, 1.5vw, 1.2rem); }
.bd-anlatim h4,
.bd-anlatim h5 { font-size: clamp(.95rem, 1.25vw, 1.06rem); }

.bd-anlatim > *:first-child {
  margin-top: 0;
}

.bd-anlatim p {
  margin: 0 0 clamp(10px, 1.4vw, 15px);
  font-size: clamp(.9rem, 1.05vw, 1rem);
  line-height: 1.75;
  color: var(--text2);
}

.bd-anlatim strong {
  color: var(--text1);
}

.bd-liste {
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  padding-left: clamp(20px, 2.4vw, 28px);
}

.bd-liste li {
  margin-bottom: clamp(5px, .8vw, 8px);
  font-size: clamp(.9rem, 1.05vw, 1rem);
  line-height: 1.7;
  color: var(--text2);
}

.bd-liste li::marker {
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
}

.bd-kod {
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  padding: clamp(12px, 1.8vw, 18px);
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: clamp(8px, 1vw, 12px);
  overflow-x: auto;
}

/* Anlatım içine {{resim:N}} ile yerleştirilen figür. Markdown resim
   sözdizimi desteklenmez; resimler hafta JSON'unda ayrı dizide durur. */
.bd-resim {
  margin: 0 0 clamp(14px, 1.8vw, 20px);
}

.bd-resim img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border2);
  border-radius: clamp(8px, 1vw, 12px);
  background: var(--bg3);
}

.bd-resim figcaption {
  margin-top: 8px;
  font-size: clamp(.78rem, .9vw, .86rem);
  line-height: 1.55;
  color: var(--text3);
}

/* Anlatımda yerleştirilmemiş resimler panelin sonunda toplanır. */
.bd-resim-galerisi {
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  margin-top: clamp(18px, 2.4vw, 26px);
}

.bd-kod code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(.8rem, .95vw, .88rem);
  line-height: 1.65;
  color: var(--text2);
  white-space: pre;
}

/* ─── Konu anlatımı bölüm kartları ─────────────────────────
   Markdown'daki her seviye-2 başlık (##), numaralı renkli rozetli
   ayrı bir karta dönüşür (bkz. scripts/bilisim-defteri-hafta-
   sayfasi-uret.js markdownCevir). Renk --c1..--c6 arası döner. */

.bd-konu-blok {
  margin-bottom: clamp(18px, 2.4vw, 28px);
  padding: clamp(18px, 2.2vw, 28px);
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: clamp(14px, 1.6vw, 20px);
}

.bd-konu-blok:last-child {
  margin-bottom: 0;
}

.bd-konu-blok-basi {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
  margin-bottom: clamp(10px, 1.4vw, 16px);
}

.bd-anlatim .bd-konu-blok-basi h2 {
  margin: 0;
}

.bd-konu-no {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 3.2vw, 40px);
  height: clamp(32px, 3.2vw, 40px);
  border-radius: 11px;
  font-size: clamp(.8rem, .92vw, .88rem);
  font-weight: 700;
  color: #fff;
}

.bd-konu-blok-1 .bd-konu-no { background: var(--c1); }
.bd-konu-blok-2 .bd-konu-no { background: var(--c2); }
.bd-konu-blok-3 .bd-konu-no { background: var(--c3); }
.bd-konu-blok-4 .bd-konu-no { background: var(--c4); }
.bd-konu-blok-5 .bd-konu-no { background: var(--c5); }
.bd-konu-blok-6 .bd-konu-no { background: var(--c6); }

.bd-konu-blok-govde > *:last-child {
  margin-bottom: 0;
}

/* Tanım listesi: "**Terim:** açıklama" satırlarından üretilir. */
.bd-tanim-listesi {
  display: grid;
  gap: clamp(8px, 1vw, 12px);
  margin: 0 0 clamp(12px, 1.6vw, 18px);
}

.bd-tanim-satiri {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: clamp(10px, 1.2vw, 16px);
  align-items: baseline;
  padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.4vw, 16px);
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: clamp(8px, 1vw, 12px);
}

.bd-tanim-satiri dt {
  margin: 0;
  font-weight: 700;
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
  font-size: clamp(.86rem, 1vw, .95rem);
}

.bd-tanim-satiri dd {
  margin: 0;
  color: var(--text2);
  font-size: clamp(.86rem, 1vw, .95rem);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .bd-tanim-satiri {
    grid-template-columns: 1fr;
  }
}

/* ─── Tablo ────────────────────────────────────────────── */

/* Sarmalayıcı dar ekranda yatay kaydırılır; makale gövdesi asla
   yanal taşma yapmaz. tabindex motorda verilir, klavyeyle de
   kaydırılabilsin diye. */
.bd-tablo-sarmal {
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: clamp(8px, 1vw, 12px);
}

.bd-tablo-sarmal:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.bd-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(.82rem, 1vw, .93rem);
}

.bd-tablo th,
.bd-tablo td {
  padding: clamp(9px, 1.2vw, 14px) clamp(10px, 1.4vw, 16px);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
  border-bottom: 1px solid var(--border2);
}

.bd-tablo thead th {
  background: var(--bg3);
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
  font-weight: 700;
  white-space: nowrap;
}

.bd-tablo tbody tr:nth-child(even) {
  background: var(--bg2);
}

.bd-tablo tbody td:first-child {
  font-weight: 600;
  color: var(--text1);
}

.bd-tablo tbody tr:last-child td {
  border-bottom: 0;
}

/* ─── Sayfa içi oynatıcı ───────────────────────────────── */

/* Çerçeve doğrudan basılır. Oran, gömülen içeriğin kendi oranına
   eşitlenir; eşit olmazsa gömülü görüntüleyici kenarlara siyah şerit
   koyar. Video ve slayt sunumları 16:9'dur. */
.bd-oynatici {
  aspect-ratio: 16 / 9;
  max-width: 100%;
  margin: clamp(12px, 1.6vw, 18px) 0;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: clamp(8px, 1vw, 12px);
  overflow: hidden;
}

.bd-oynatici-cerceve {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ─── Görev kontrol listesi ────────────────────────────── */

.bd-gorev-listesi {
  list-style: none;
  margin: clamp(12px, 1.6vw, 18px) 0 clamp(10px, 1.2vw, 14px);
  padding: 0;
  display: grid;
  gap: clamp(8px, 1vw, 12px);
}

.bd-gorev {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.2vw, 14px);
  padding: clamp(10px, 1.3vw, 15px) clamp(12px, 1.5vw, 17px);
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: clamp(8px, 1vw, 12px);
}

.bd-gorev-kutu {
  flex: 0 0 auto;
  width: clamp(18px, 2.1vw, 22px);
  height: clamp(18px, 2.1vw, 22px);
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.bd-gorev-metin {
  font-size: clamp(.86rem, 1vw, .95rem);
  line-height: 1.55;
  color: var(--text2);
  cursor: pointer;
}

.bd-gorev-bitti {
  border-color: var(--primary);
}

.bd-gorev-bitti .bd-gorev-metin {
  color: var(--text3);
  text-decoration: line-through;
}

.bd-gorev-durum {
  margin: 0 0 clamp(10px, 1.2vw, 14px);
  font-size: clamp(.8rem, .95vw, .88rem);
  font-weight: 600;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
}

.bd-gorev-durum-tam {
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
}

/* ─── Sunum gezgini ────────────────────────────────────── */

/* Yükseklik sayfa görselinin kendi oranından gelir: sabit oran
   verilmediği için kenarda boşluk ya da alttan taşan sayfa olmaz. */
.bd-sunum {
  margin: clamp(12px, 1.6vw, 18px) 0;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: clamp(8px, 1vw, 12px);
  overflow: hidden;
}

.bd-sunum-sayfa {
  display: block;
  width: 100%;
  height: auto;
}

/* Sınıf seçici tarayıcının [hidden] kuralını ezer; gizli sayfa
   bu satır olmadan görünür kalır ve hepsi alt alta dizilir. */
.bd-sunum-sayfa[hidden] {
  display: none;
}

.bd-sunum-kumanda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 20px);
  padding: clamp(8px, 1vw, 12px);
  background: var(--card2);
  border-top: 1px solid var(--border2);
}

.bd-sunum-dugme {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 4vw, 40px);
  height: clamp(34px, 4vw, 40px);
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 50%;
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
  font-size: clamp(.85rem, 1vw, .95rem);
  cursor: pointer;
}

.bd-sunum-dugme:hover:not(:disabled) {
  background: var(--primary);
  color: var(--bg1);
}

.bd-sunum-dugme:disabled {
  opacity: .4;
  cursor: default;
}

.bd-sunum-dugme:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.bd-sunum-sayac {
  min-width: 5ch;
  text-align: center;
  font-size: clamp(.82rem, .95vw, .9rem);
  font-weight: 600;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}

/* Birden çok sunum listelendiğinde araları ayrılır. */
.bd-slayt-oge + .bd-slayt-oge {
  margin-top: clamp(14px, 1.8vw, 20px);
  padding-top: clamp(14px, 1.8vw, 20px);
  border-top: 1px solid var(--border2);
}

/* Kazanım sekmesinin altındaki açıklayıcı infografik. */
.bd-kazanim-resmi {
  margin-top: clamp(16px, 2.2vw, 24px);
  padding-top: clamp(16px, 2.2vw, 24px);
  border-top: 1px solid var(--border2);
}

/* ─── Anlatım içi vurgu kutuları ───────────────────────── */

/* Tür ayrımı sol kenar şeridi ve başlık rengiyle verilir; zemin
   her türde aynı kalır ki tema kontrastı korunsun. */
.bd-vurgu {
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  padding: clamp(12px, 1.6vw, 18px) clamp(14px, 1.8vw, 20px);
  background: var(--card2);
  border: 1px solid var(--border2);
  border-left: clamp(4px, .5vw, 6px) solid var(--c1);
  border-radius: clamp(8px, 1vw, 12px);
}

.bd-vurgu-basi {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 10px);
  margin: 0 0 clamp(6px, .9vw, 10px);
  font-size: clamp(.9rem, 1.05vw, 1rem);
  font-weight: 700;
  color: color-mix(in srgb, var(--c1) var(--kimlik-yazi-orani, 100%), var(--text1));
}

.bd-vurgu-govde p {
  margin: 0 0 clamp(6px, .8vw, 9px);
}

.bd-vurgu-govde h4 {
  margin: 0 0 clamp(4px, .6vw, 7px);
  font-size: clamp(.88rem, 1vw, .96rem);
  color: var(--text1);
}

.bd-vurgu-govde > :last-child {
  margin-bottom: 0;
}

.bd-vurgu-ipucu { border-left-color: var(--c3); }
.bd-vurgu-ipucu .bd-vurgu-basi { color: color-mix(in srgb, var(--c3) var(--kimlik-yazi-orani, 100%), var(--text1)); }

.bd-vurgu-dikkat { border-left-color: var(--c5); }
.bd-vurgu-dikkat .bd-vurgu-basi { color: color-mix(in srgb, var(--c5) var(--kimlik-yazi-orani, 100%), var(--text1)); }

.bd-vurgu-ornek { border-left-color: var(--c2); }
.bd-vurgu-ornek .bd-vurgu-basi { color: color-mix(in srgb, var(--c2) var(--kimlik-yazi-orani, 100%), var(--text1)); }

.bd-vurgu-ozet { border-left-color: var(--c4); }
.bd-vurgu-ozet .bd-vurgu-basi { color: color-mix(in srgb, var(--c4) var(--kimlik-yazi-orani, 100%), var(--text1)); }

/* ─── Çubuk grafik ─────────────────────────────────────── */

.bd-grafik {
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  padding: clamp(12px, 1.6vw, 18px);
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: clamp(8px, 1vw, 12px);
}

.bd-grafik-baslik {
  margin: 0 0 clamp(10px, 1.2vw, 14px);
  font-size: clamp(.9rem, 1.05vw, 1rem);
  font-weight: 700;
  color: var(--text1);
}

.bd-grafik-satir {
  display: grid;
  grid-template-columns: minmax(84px, 28%) 1fr auto;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
  margin-bottom: clamp(7px, .9vw, 10px);
}

.bd-grafik-satir:last-child {
  margin-bottom: 0;
}

.bd-grafik-etiket {
  font-size: clamp(.8rem, .95vw, .88rem);
  color: var(--text2);
  line-height: 1.4;
}

.bd-grafik-oluk {
  height: clamp(14px, 1.6vw, 20px);
  background: var(--bg3);
  border-radius: 999px;
  overflow: hidden;
}

/* Genişlik betikten verilir (CSP: satır içi style yok). */
.bd-grafik-dolgu {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--c1);
  transition: width .45s ease;
}

.bd-grafik-renk-2 { background: var(--c2); }
.bd-grafik-renk-3 { background: var(--c3); }
.bd-grafik-renk-4 { background: var(--c4); }
.bd-grafik-renk-5 { background: var(--c5); }
.bd-grafik-renk-6 { background: var(--c6); }

.bd-grafik-deger {
  font-size: clamp(.8rem, .95vw, .88rem);
  font-weight: 700;
  color: var(--text1);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .bd-grafik-dolgu { transition: none; }
}

@media (max-width: 640px) {
  .bd-grafik-satir {
    grid-template-columns: minmax(64px, 34%) 1fr auto;
    gap: 8px;
  }
}

/* ─── Yan kutular ──────────────────────────────────────── */

.bd-kutu-baslik {
  margin: 0 0 clamp(6px, 1vw, 10px);
  font-size: clamp(.92rem, 1.1vw, 1.02rem);
  font-weight: 600;
  color: var(--text1);
}

.bd-kutu-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bd-kutu-meta:empty {
  display: none;
}

.bd-kutu-durum {
  margin-bottom: 0;
  font-size: clamp(.8rem, .92vw, .88rem);
  color: var(--text3);
}

.bd-dis-baglanti {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(4px, .8vw, 8px);
  padding: clamp(8px, 1.1vw, 11px) clamp(14px, 1.8vw, 20px);
  border: 1px solid var(--primary);
  border-radius: 999px;
  font-size: clamp(.82rem, .95vw, .9rem);
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

.bd-dis-baglanti:hover,
.bd-dis-baglanti:focus-visible {
  background: var(--nav-hover);
}

/* ─── Hafta sayfası sekmeleri ──────────────────────────────
   Kazanım / Konu Anlatımı / Video / Ders Notu / Bu Haftanın Görevi
   arasında assets/js/pages/bilisim-defteri-hafta.js ile geçiş yapılır. */

.bd-tab-cubugu {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, .8vw, 10px);
  padding-bottom: clamp(10px, 1.4vw, 16px);
  margin-bottom: clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--border2);
}

.bd-tab-dugme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  cursor: pointer;
  padding: clamp(8px, 1vw, 11px) clamp(14px, 1.6vw, 18px);
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: var(--card2);
  color: var(--text2);
  font-size: clamp(.85rem, 1vw, .95rem);
  font-weight: 600;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.bd-tab-dugme i {
  color: var(--text3);
}

.bd-tab-dugme:hover,
.bd-tab-dugme:focus-visible {
  border-color: var(--primary);
}

.bd-tab-dugme.aktif {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--card2));
  color: var(--text1);
}

.bd-tab-dugme.aktif i {
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
}

.bd-tab-panel[hidden] {
  display: none;
}

.bd-tab-panel > *:first-child {
  margin-top: 0;
}

.bd-tab-panel:not(.bd-anlatim) p {
  margin: 0 0 clamp(8px, 1.1vw, 12px);
  font-size: clamp(.86rem, 1vw, .95rem);
  line-height: 1.7;
  color: var(--text2);
}

.bd-tab-bos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1vw, 12px);
  min-height: clamp(160px, 20vw, 220px);
  padding: clamp(24px, 3vw, 40px);
  border: 1px dashed var(--border2);
  border-radius: clamp(12px, 1.4vw, 16px);
  text-align: center;
  color: var(--text3);
  font-size: clamp(.88rem, 1vw, .96rem);
}

.bd-tab-bos i {
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  color: var(--text3);
}

/* ─── Hafta sayfası slayt destesi ──────────────────────────
   Yalnız Kazanım + Konu Anlatımı + Görev taşıyan haftalar sırayla
   ilerlenen slaytlara bölünür (bilisim-defteri-hafta.js
   slaytDestesi). Resim slaytın üstünde geniş durur, konu anlatımı
   altından gelir. Geniş ekranda sahne sabit yüksekliktedir ve slayt
   kendi içinde aşağı kayar; aşağıda içerik kaldıkça sahnenin altında
   aşağı ok (.bd-slayt-asagi) görünür. Dar ekranda slayt doğal
   boyundadır, sayfa kayar.

   Tam ekran (.bd-tam-ekran) yalnız desteyi kapsar; header ve
   footer'a hiçbir kural yazılmaz. iPhone Safari'de deste sabit
   konumlu odak görünümüne (.bd-odak) geçer. */

.bd-slayt-destesi {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: clamp(14px, 1.6vw, 20px);
  scroll-margin-top: calc(var(--rota-header-h) + 12px);
}

.bd-slayt-destesi:focus {
  outline: none;
}

.bd-slayt-ust,
.bd-slayt-kumanda {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 14px);
  padding: clamp(10px, 1.2vw, 14px) clamp(14px, 2vw, 24px);
  background: var(--card);
}

.bd-slayt-ust {
  border-bottom: 1px solid var(--border2);
}

.bd-slayt-kumanda {
  justify-content: space-between;
  border-top: 1px solid var(--border2);
}

.bd-slayt-konu {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: clamp(.78rem, .9vw, .86rem);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text3);
}

.bd-slayt-sayac {
  flex: 0 0 auto;
  font-size: clamp(.82rem, .95vw, .9rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text2);
}

.bd-slayt-tam-ekran,
.bd-slayt-dugme {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 clamp(14px, 1.6vw, 20px);
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 999px;
  font: inherit;
  font-size: clamp(.82rem, .95vw, .9rem);
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.bd-slayt-tam-ekran:hover,
.bd-slayt-tam-ekran:focus-visible,
.bd-slayt-dugme:hover:not(:disabled),
.bd-slayt-dugme:focus-visible {
  border-color: var(--primary);
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
}

.bd-slayt-dugme[data-yon="1"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--bg1);
}

.bd-slayt-dugme[data-yon="1"]:hover:not(:disabled),
.bd-slayt-dugme[data-yon="1"]:focus-visible {
  color: var(--bg1);
  background: color-mix(in srgb, var(--primary) 86%, var(--text1));
}

.bd-slayt-dugme:disabled {
  opacity: .4;
  cursor: default;
}

.bd-slayt-ilerleme {
  height: 4px;
  background: var(--bg3);
}

.bd-slayt-ilerleme-dolgu {
  display: block;
  width: 0;
  height: 100%;
  background: var(--primary);
  transition: width .3s ease;
}

.bd-slayt-noktalar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

.bd-slayt-nokta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: width .2s ease;
}

.bd-slayt-nokta::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--border2);
  transition: width .2s ease, background .2s ease;
}

.bd-slayt-nokta.aktif {
  width: 36px;
}

.bd-slayt-nokta.aktif::before {
  width: 26px;
  background: var(--primary);
}

.bd-slayt-nokta:hover::before,
.bd-slayt-nokta:focus-visible::before {
  background: color-mix(in srgb, var(--primary) 60%, var(--border2));
}

.bd-slayt-sahne {
  padding: clamp(16px, 2.4vw, 32px);
}

.bd-slayt {
  animation: bdSlaytGir .28s ease both;
}

@keyframes bdSlaytGir {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.bd-slayt-basi {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
  margin-bottom: clamp(14px, 1.8vw, 22px);
}

.bd-slayt-baslik {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.3;
  color: var(--text1);
}

.bd-slayt-ikon {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
}

/* Slayt sırası yalnız çıktıda görünür; ekranda üst çubuktaki
   sayaç aynı bilgiyi taşır. */
.bd-slayt-sira {
  display: none;
  margin-left: auto;
  font-size: .8rem;
  color: var(--text3);
}

/* Tek sütun da minmax(0, …) ile verilir: kod kutusu ve tablo
   sütunu genişletmesin, kendi içinde yatay kaysın. */
.bd-slayt-govde {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 32px);
}

.bd-slayt-metin > *:first-child {
  margin-top: 0;
}

.bd-slayt-metin > *:last-child,
.bd-slayt-gorsel > *:last-child {
  margin-bottom: 0;
}

.bd-slayt-metin:not(.bd-anlatim) p {
  margin: 0 0 clamp(8px, 1.1vw, 12px);
  font-size: clamp(.86rem, 1vw, .95rem);
  line-height: 1.7;
  color: var(--text2);
}

/* İnfografik slaytın üstünde durur; sekmedeki ayırıcı çizgi ve
   üst boşluk gerekmez. */
.bd-slayt-gorsel .bd-kazanim-resmi {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Resmi olan slaytta başlık şeridi görünmez: resmin içinde zaten
   başlık var. Şerit ekran okuyucu için yerinde kalır. */
.bd-slayt-resimli .bd-slayt-basi {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Slaytta resim altyazısı gösterilmez; resmi alt metni tanımlar. */
.bd-slayt .bd-resim figcaption {
  display: none;
}

/* Resim, altındaki konu anlatımıyla aynı genişliktedir. */
.bd-slayt-gorsel .bd-resim {
  text-align: center;
}

/* Sabit yükseklikli sahne: destenin tamamı header'ın altında bir
   ekrana sığar; slayt kendi içinde aşağı kayar. */
@media (min-width: 1025px) and (min-height: 600px) {
  .bd-slayt-sahne {
    height: clamp(420px, calc(100vh - var(--rota-header-h) - 175px), 1400px);
    height: clamp(420px, calc(100dvh - var(--rota-header-h) - 175px), 1400px);
    padding: 0;
  }

  .bd-slayt {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(18px, 2.4vw, 32px);
  }
}

/* Aşağı ok Önceki/Sonraki şeridinde, noktaların yanında durur;
   yazının üstüne binmez. Aşağıda içerik kalmadığında yeri korunur
   (görünmez olur), şerit kaymaz. Tıklanınca slayt bir ekran boyu
   aşağı iner. */
.bd-slayt-orta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 14px);
  min-width: 0;
}

.bd-slayt-asagi {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--primary);
  border: 0;
  border-radius: 50%;
  font-size: 1.05rem;
  color: var(--bg1);
  cursor: pointer;
  animation: bdAsagiZipla 1.6s ease-in-out infinite;
}

.bd-slayt-asagi[hidden] {
  display: inline-flex;
  visibility: hidden;
}

.bd-slayt-asagi:hover,
.bd-slayt-asagi:focus-visible {
  background: color-mix(in srgb, var(--primary) 86%, var(--text1));
}

@keyframes bdAsagiZipla {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ─── Tam ekran ve odak görünümü ─── */

.bd-slayt-destesi::backdrop {
  background: var(--bg1, #000);
}

.bd-slayt-destesi.bd-tam-ekran {
  width: 100%;
  height: 100%;
  background: var(--bg1);
  border: 0;
  border-radius: 0;
}

.bd-slayt-destesi.bd-odak {
  position: fixed;
  inset: 0;
  z-index: 10010;
  height: 100vh;
  height: 100dvh;
}

.bd-odak .bd-slayt-ust {
  padding-top: max(clamp(10px, 1.2vw, 14px), env(safe-area-inset-top));
}

.bd-odak .bd-slayt-kumanda {
  padding-bottom: max(clamp(10px, 1.2vw, 14px), env(safe-area-inset-bottom));
}

html.bd-odak-acik,
html.bd-odak-acik body {
  overflow: hidden;
}

.bd-tam-ekran .bd-slayt-sahne {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding: 0;
}

.bd-tam-ekran .bd-slayt {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(18px, 3vw, 48px) clamp(18px, 5vw, 96px);
}

/* Tahtada sınıfın arka sırası da okusun: tam ekranda yazı büyür. */
@media (min-width: 1300px) {
  .bd-tam-ekran .bd-slayt-baslik { font-size: clamp(1.6rem, 2.2vw, 2.6rem); }
  .bd-tam-ekran .bd-anlatim p,
  .bd-tam-ekran .bd-slayt-metin:not(.bd-anlatim) p,
  .bd-tam-ekran .bd-slayt-metin li,
  .bd-tam-ekran .bd-slayt-metin td,
  .bd-tam-ekran .bd-slayt-metin th,
  .bd-tam-ekran .bd-slayt-metin dt,
  .bd-tam-ekran .bd-slayt-metin dd,
  .bd-tam-ekran .bd-gorev-metin { font-size: clamp(1rem, 1.15vw, 1.5rem); }
  .bd-tam-ekran .bd-kazanim-cikti { font-size: clamp(1.15rem, 1.4vw, 1.8rem); }
  .bd-tam-ekran .bd-anlatim h3 { font-size: clamp(1.15rem, 1.4vw, 1.75rem); }
  .bd-tam-ekran .bd-slayt-konu { font-size: clamp(.9rem, 1vw, 1.2rem); }
}

@media (max-width: 640px) {
  .bd-slayt-dugme span,
  .bd-slayt-tam-ekran span {
    display: none;
  }

  .bd-slayt-dugme,
  .bd-slayt-tam-ekran {
    padding: 0;
  }

  .bd-slayt-ust,
  .bd-slayt-kumanda {
    padding-inline: 12px;
  }

  /* 8 slaytlı haftada da noktalar, aşağı ok ve iki düğme 360px'te
     tek satıra sığsın. */
  .bd-slayt-kumanda,
  .bd-slayt-orta {
    gap: 6px;
  }

  .bd-slayt-noktalar {
    gap: 0;
  }

  .bd-slayt-nokta {
    width: 16px;
  }

  .bd-slayt-nokta::before {
    width: 8px;
    height: 8px;
  }

  .bd-slayt-nokta.aktif {
    width: 26px;
  }

  .bd-slayt-nokta.aktif::before {
    width: 20px;
  }

  .bd-slayt-asagi {
    width: 40px;
    height: 40px;
  }

  .bd-slayt-sahne {
    padding: 16px 14px;
  }

  .bd-tam-ekran .bd-slayt {
    padding: 16px 14px;
  }
}

@media print {
  .bd-slayt-ust,
  .bd-slayt-ilerleme,
  .bd-slayt-kumanda,
  .bd-slayt-asagi {
    display: none !important;
  }

  .bd-slayt[hidden] {
    display: block !important;
  }

  .bd-slayt-sahne,
  .bd-slayt {
    height: auto !important;
    overflow: visible !important;
  }

  .bd-slayt {
    animation: none;
    break-inside: avoid-page;
  }

  .bd-slayt + .bd-slayt {
    margin-top: 24px;
  }

  .bd-slayt-sira {
    display: inline;
  }

  /* Çıktıda slayt başlıkları yeniden görünür. */
  .bd-slayt-resimli .bd-slayt-basi {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 12px;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}

/* Bir hafta birden çok kazanım taşıyabilir; her biri kendi bloğunda
   durur ve aralarında görünür bir boşluk kalır. */
.bd-kazanim-blok + .bd-kazanim-blok {
  margin-top: clamp(22px, 2.8vw, 32px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px dashed var(--border2);
}

/* Süreç bileşeninin resmî harfi (a, b, c, ç, d). Onay ikonunun
   yerine geçer; belgede "BTY.5.1.1-b" diye referans veriliyor. */
.bd-kazanim-harf {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: color-mix(in srgb, var(--primary) var(--rozet-yazi-orani, 100%), var(--text1));
  font-size: max(.72rem, 10px);
  font-weight: 700;
  line-height: 1;
}

/* Kazanım panelinin üst katmanı: yıllık plandaki öğrenme çıktısı ve
   kodu. Altındaki liste bu çıktının süreç bileşenleridir. */
.bd-kazanim-basi {
  margin-bottom: clamp(16px, 2vw, 22px);
  padding-bottom: clamp(14px, 1.8vw, 18px);
  border-bottom: 1px solid var(--border2);
}

.bd-kazanim-kod {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  font-size: clamp(.7rem, .82vw, .78rem);
  font-weight: 700;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--primary) var(--rozet-yazi-orani, 100%), var(--text1));
}

.bd-kazanim-cikti {
  margin: 0;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--text1);
}

/* Kazanım sekmesindeki liste: madde imi yerine onay ikonu. */
.bd-kazanim-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bd-kazanim-liste li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: clamp(10px, 1.2vw, 14px);
  font-size: clamp(.9rem, 1.05vw, 1rem);
  line-height: 1.7;
  color: var(--text2);
}

.bd-kazanim-liste li:last-child {
  margin-bottom: 0;
}

.bd-kazanim-liste li i {
  flex: 0 0 auto;
  margin-top: 3px;
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
}

/* ─── Komşu hafta gezinmesi ────────────────────────────── */

.bd-komsular {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(8px, 1.2vw, 14px);
  margin-top: clamp(22px, 3.2vw, 36px);
  padding-top: clamp(16px, 2.2vw, 24px);
  border-top: 1px solid var(--border2);
}

.bd-komsu {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: clamp(9px, 1.2vw, 13px) clamp(14px, 1.8vw, 20px);
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 999px;
  font-size: clamp(.82rem, .95vw, .9rem);
  color: var(--text2);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}

.bd-komsu:hover,
.bd-komsu:focus-visible {
  border-color: var(--primary);
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
}

.bd-komsu-sonraki {
  margin-left: auto;
}

/* ─── Duyarlı düzen ────────────────────────────────────── */

@media (max-width: 1024px) {
  .bd-wrap { max-width: 100%; }
}

@media (max-width: 768px) {
  .bd-hero { padding: clamp(16px, 4vw, 24px); }
}

@media (max-width: 640px) {
  .bd-hafta { gap: 10px; }
  .bd-makale { padding: clamp(16px, 4vw, 24px); }
  .bd-komsular { flex-direction: column; }
  .bd-komsu { justify-content: center; }
  .bd-komsu-sonraki { margin-left: 0; }
}

@media (min-width: 1920px) {
  .bd-wrap { max-width: 1800px; }
}

@media (min-width: 3200px) {
  .bd-wrap { max-width: 2400px; }
}