/* Classdom — konteyner istifi dili. Fotoğraf yok; bloklar, şablon (stencil) rakamlar ve dar uzun başlıklar. */

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

:root {
  --zemin: #e9ebea;
  --zemin-koyu: #dcdfdd;
  --murekkep: #111315;
  --ikincil: #34393d;
  --cizgi: #b9bebc;
  --turuncu: #ff5b14;
  --amber: #ffb30f;
  --pembe: #f590b4;
  --camgobegi: #00a0aa;
  --kirmizi: #e5361b;
  --lacivert: #2340c8;
  --krem: #fbe6c8;
  --f-baslik: "BSD", "Arial Narrow", sans-serif;
  --f-sablon: "BSS", "BSD", "Arial Narrow", sans-serif;
  --f-govde: "SG", "Helvetica Neue", Arial, sans-serif;
  --kenar: clamp(16px, 4vw, 56px);
  --kaburga: repeating-linear-gradient(90deg, rgb(0 0 0 / .11) 0 3px, transparent 3px 15px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--zemin); color: var(--murekkep); font: 400 1.0625rem/1.6 var(--f-govde); font-feature-settings: "ss01"; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 2px; }
a:hover { text-decoration-color: var(--turuncu); }
:focus-visible { outline: 3px solid var(--lacivert); outline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.05; }
p { margin: 0 0 1em; }
small { font-size: .85em; }

.atla { position: absolute; left: -999px; top: 8px; background: var(--murekkep); color: #fff; padding: 8px 14px; z-index: 50; }
.atla:focus { left: 8px; }

/* renkler */
.renk-turuncu { --renk: var(--turuncu); }
.renk-amber { --renk: var(--amber); }
.renk-camgobegi { --renk: var(--camgobegi); }
.renk-pembe { --renk: var(--pembe); }
.renk-lacivert { --renk: var(--lacivert); --yazi: #fff; }
.renk-kirmizi { --renk: var(--kirmizi); --yazi: #fff; }
.renk-krem { --renk: var(--krem); }

/* üst ve alt */
.ust { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px var(--kenar); border-bottom: 2px solid var(--murekkep); position: relative; z-index: 5; background: var(--zemin); }
.isim { font: 800 1.35rem/1 var(--f-govde); letter-spacing: -.03em; text-decoration: none; }
.menu { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 28px); font-weight: 600; }
.menu a:not(.dugme) { text-decoration: none; }
.menu a:not(.dugme):hover { text-decoration: underline; }
.alt { border-top: 2px solid var(--murekkep); margin-top: clamp(64px, 10vw, 140px); }
.alt-ic { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding: 28px var(--kenar) 40px; }
.alt nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-weight: 600; }
.alt nav a { text-decoration: none; }
.alt-not { margin: 0 0 0 auto; color: var(--ikincil); }
.alt form { margin: 0; }

/* düğmeler */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; background: var(--murekkep); color: #fff; border: 2px solid var(--murekkep); font: 700 1.05rem/1 var(--f-govde); text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.dugme:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--turuncu); color: #fff; }
.dugme-kucuk { min-height: 40px; padding: 0 16px; font-size: .95rem; }
.baglanti { background: none; border: 0; padding: 0; font: 600 1rem var(--f-govde); text-decoration: underline; cursor: pointer; color: inherit; }
.baglanti-ok { font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.baglanti-ok::after { content: " →"; }
.baglanti-ok:hover { border-color: var(--turuncu); }

/* tipografi */
.dev { font: 900 clamp(3.4rem, 9vw, 8.5rem)/.86 var(--f-baslik); text-transform: none; letter-spacing: -.01em; }
.k-no { font: 900 1em/1 var(--f-sablon); }
.bolum-sayi { font: 700 clamp(1.3rem, 2.4vw, 1.9rem)/1.1 var(--f-baslik); margin: 0; }

/* ------------------------------------------------ giriş */
.giris { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: clamp(24px, 4vw, 64px); min-height: calc(100svh - 72px); padding: clamp(28px, 5vw, 64px) var(--kenar) 0; }
.giris-yazi { align-self: center; padding-bottom: 32px; }
.giris-ust { font-weight: 600; margin-bottom: 0; }
.giris-baslik { font: 900 clamp(5rem, 14vw, 13.5rem)/.86 var(--f-baslik); letter-spacing: -.015em; margin: .2em 0 .3em; }
.giris-baslik .satir { display: block; }
.giris-ozet { font-size: clamp(1.08rem, 1.5vw, 1.3rem); max-width: 34em; }
.giris-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 28px; }

/* istif: 4 sütunluk blok ızgarası (Elephant XD dilinin açık zemin hâli) */
.istif-sahne { align-self: center; justify-self: end; width: 100%; max-width: 620px; position: relative; padding-top: 70px; }
.vinc { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vinc-kol { stroke: var(--murekkep); stroke-width: 6; }
.vinc-araba { fill: var(--murekkep); }
.vinc-halat { stroke: var(--murekkep); stroke-width: 2; }
.istif { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; aspect-ratio: 4 / 4.2; width: 100%; }
.istif .b { display: block; background-color: var(--c); }
.b1 { --c: var(--amber); grid-area: 1 / 2; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.b2 { --c: var(--pembe); grid-area: 1 / 3; }
.b3 { --c: var(--krem); grid-area: 1 / 4; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.b4 { --c: var(--turuncu); grid-area: 2 / 1; }
.b5 { --c: var(--amber); grid-area: 2 / 2; clip-path: polygon(0 0, 100% 0, 0 100%); }
.b6 { --c: var(--camgobegi); grid-area: 2 / 2; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.b7 { --c: var(--krem); grid-area: 2 / 3; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.b8 { --c: var(--kirmizi); grid-area: 2 / 4; }
.b9 { --c: var(--lacivert); grid-area: 3 / 1 / 4 / 3; background-image: var(--kaburga); }
.b10 { --c: var(--pembe); grid-area: 3 / 3; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.b11 { --c: var(--murekkep); grid-area: 3 / 4; clip-path: polygon(0 0, 100% 0, 0 100%); }
.b12 { --c: var(--turuncu); grid-area: 4 / 2 / 5 / 5; background-image: var(--kaburga); }
.b13 { --c: var(--camgobegi); grid-area: 4 / 1; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.b14 { --c: var(--amber); grid-area: 1 / 1; clip-path: polygon(50% 50%, 100% 100%, 0 100%); }
.istif .b9, .istif .b12 { position: relative; }
.istif .b9::after, .istif .b12::after { content: ""; position: absolute; top: 12%; bottom: 12%; right: 9%; width: 10%; border-left: 3px solid rgb(0 0 0 / .32); border-right: 3px solid rgb(0 0 0 / .32); }

.rota { grid-column: 1 / -1; display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); margin: clamp(28px, 5vw, 56px) 0 0; padding: 18px 0; border-top: 2px solid var(--murekkep); font: 900 clamp(1rem, 2.4vw, 1.9rem)/1 var(--f-sablon); text-transform: uppercase; letter-spacing: .02em; }
.rota span { white-space: nowrap; }
.rota-cizgi { flex: 1; height: 40px; min-width: 60px; overflow: visible; }
.rota-yol { fill: none; stroke: var(--murekkep); stroke-width: 3; stroke-dasharray: 9 7; vector-effect: non-scaling-stroke; }
.rota-gemi { fill: var(--turuncu); stroke: var(--murekkep); stroke-width: 1.5; }

/* ------------------------------------------------ bölümler */
.bolum { padding: clamp(64px, 9vw, 128px) var(--kenar) 0; }
.bolum-bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(28px, 4vw, 48px); }

/* konteyner kartları */
.konteynerler { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.konteyner { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; column-gap: 18px; min-height: 168px; padding: 20px 64px 18px 20px; background: var(--renk) var(--kaburga); color: var(--yazi, var(--murekkep)); text-decoration: none; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
.konteyner::before, .konteyner::after { content: ""; position: absolute; top: 14px; bottom: 14px; width: 0; border-left: 3px solid rgb(0 0 0 / .3); }
.konteyner::before { right: 34px; }
.konteyner::after { right: 20px; }
.konteyner:hover { transform: translateY(-6px); box-shadow: 0 6px 0 var(--murekkep); }
.konteyner .k-no { grid-row: 1 / 3; font-size: clamp(3.4rem, 5vw, 4.4rem); }
.k-baslik { font: 800 clamp(1.5rem, 2.2vw, 1.85rem)/1.02 var(--f-baslik); align-self: start; }
.k-alt { font-weight: 600; font-size: .95rem; align-self: end; }

/* kimin için */
.uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(28px, 4vw, 48px); border-top: 2px solid var(--murekkep); }
.uclu article { padding: 24px 28px 8px 0; }
.uclu article + article { padding-left: 28px; border-left: 2px solid var(--murekkep); }
.uclu h3 { font: 800 clamp(1.7rem, 2.6vw, 2.3rem)/1 var(--f-baslik); margin-bottom: 12px; }

/* nasıl işler: merdiven istif */
.merdiven { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 10px; }
.merdiven li { background: var(--renk) var(--kaburga); padding: 18px 18px 20px; display: flex; flex-direction: column; justify-content: flex-end; }
.merdiven li:nth-child(1) { min-height: 190px; }
.merdiven li:nth-child(2) { min-height: 250px; }
.merdiven li:nth-child(3) { min-height: 310px; }
.merdiven li:nth-child(4) { min-height: 370px; }
.merdiven .k-no { font-size: 3.6rem; margin-bottom: auto; }
.merdiven h3 { font: 800 1.9rem/1 var(--f-baslik); margin: 16px 0 8px; }
.merdiven p { margin: 0; font-weight: 500; }

/* önizleme kartları */
.onizleme .bolum-sayi { margin: 14px 0 28px; }
.onizleme-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 14px; }
.onizleme-kart { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 2px solid var(--murekkep); background: #fff; text-decoration: none; transition: box-shadow .2s, transform .2s; margin-bottom: 14px; }
.onizleme-kart:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--murekkep); }
.onizleme-modul { font-weight: 700; font-size: .92rem; }
.onizleme-baslik { font: 800 clamp(1.7rem, 2.6vw, 2.2rem)/1.02 var(--f-baslik); }
.onizleme-ozet { color: var(--ikincil); }

/* eğitmen */
.egitmen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.egitmen-foto { display: block; position: relative; background: var(--amber); box-shadow: 14px 14px 0 var(--murekkep); }
.egitmen-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; }
.egitmen-giris { font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 500; margin: 20px 0 24px; max-width: 30em; }
.egitmen-liste { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--murekkep); }
.egitmen-liste li { padding: 12px 0; border-bottom: 1px solid var(--cizgi); font-weight: 500; }

/* son çağrı */
.son-cagri { margin: clamp(64px, 9vw, 128px) var(--kenar) 0; padding: clamp(36px, 6vw, 72px); background: var(--renk) var(--kaburga); display: grid; gap: 18px; justify-items: start; }
.son-cagri p { font-size: 1.2rem; font-weight: 500; margin: 0; }

/* ------------------------------------------------ iç sayfalar */
.sayfa-bas { padding: clamp(40px, 6vw, 80px) var(--kenar) clamp(24px, 3vw, 40px); }
.sayfa-not { margin-top: 16px; max-width: 40em; }
.sayfa-dar { padding: 0 var(--kenar); max-width: calc(760px + 2 * var(--kenar)); }
.sayfa-genis { padding: 0 var(--kenar); display: grid; gap: 56px; }
.iz { font-weight: 600; font-size: .95rem; margin-bottom: 16px; }
.iz a { text-decoration: none; border-bottom: 2px solid currentColor; }

.modul-listesi { padding: 0 var(--kenar); display: grid; gap: 14px; }
.modul-satir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); border: 2px solid var(--murekkep); background: #fff; }
.modul-satir header { display: flex; gap: 18px; padding: 22px; background: var(--renk) var(--kaburga); color: var(--yazi, var(--murekkep)); }
.modul-satir header .k-no { font-size: 3.4rem; }
.modul-satir h2 { font: 800 clamp(1.7rem, 2.6vw, 2.2rem)/1.02 var(--f-baslik); margin-bottom: 10px; }
.modul-satir h2 a { text-decoration: none; }
.modul-satir header p { margin: 0; font-weight: 500; }

.ders-listesi { list-style: none; margin: 0; padding: 8px 0; counter-reset: ders; }
.ders-listesi li { counter-increment: ders; border-bottom: 1px solid var(--cizgi); }
.ders-listesi li:last-child { border-bottom: 0; }
.ders-listesi a { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 18px; text-decoration: none; }
.ders-listesi a::before { content: counter(ders, decimal-leading-zero); font: 900 1.1rem/1 var(--f-sablon); }
.ders-listesi a:hover .d-baslik { text-decoration: underline; }
.ders-listesi .hazirlaniyor .d-baslik, .ders-listesi .kilitli .d-baslik { color: var(--ikincil); }
.ders-listesi .bitti a::before { content: "✓"; color: var(--camgobegi); }
.d-etiketler { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sayfa-dar > .ders-listesi { border: 2px solid var(--murekkep); background: #fff; margin: 28px 0; }

.etiket { display: inline-block; padding: 3px 8px; font-size: .78rem; font-weight: 700; background: var(--murekkep); color: #fff; white-space: nowrap; }
.etiket-soluk { background: var(--zemin-koyu); color: var(--ikincil); }
.etiket-bitti { background: var(--camgobegi); color: var(--murekkep); }

.modul-bas { margin: 0 var(--kenar); padding: clamp(28px, 5vw, 56px); background: var(--renk) var(--kaburga); color: var(--yazi, var(--murekkep)); margin-top: clamp(28px, 4vw, 48px); margin-bottom: 28px; }
.modul-bas .k-no { font-size: clamp(4rem, 9vw, 7rem); display: block; margin-bottom: 8px; }
.modul-ozet { font-size: 1.2rem; font-weight: 500; margin: 18px 0 0; max-width: 34em; }

.kutu { border: 2px solid var(--murekkep); background: var(--renk, #fff) ; padding: 24px; margin: 28px 0; }
.kutu h2 { font: 800 1.9rem/1.05 var(--f-baslik); margin-bottom: 10px; }
.kutu > :last-child { margin-bottom: 0; }
.kutu-eylem { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 18px; }
.kilit { background: #fff var(--kaburga); }

/* ders */
.ders-duzen { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); padding: clamp(28px, 4vw, 48px) var(--kenar) 0; align-items: start; }
.ders-yan { position: sticky; top: 20px; border: 2px solid var(--murekkep); background: #fff; }
.ders-yan-modul { display: flex; gap: 12px; align-items: center; padding: 16px; background: var(--renk) var(--kaburga); color: var(--yazi, var(--murekkep)); font: 800 1.35rem/1.05 var(--f-baslik); text-decoration: none; }
.ders-yan-modul .k-no { font-size: 2.4rem; }
.ders-yan ol { list-style: none; margin: 0; padding: 6px 0; }
.ders-yan li a { display: block; padding: 9px 16px; font-size: .95rem; text-decoration: none; border-left: 4px solid transparent; }
.ders-yan li a:hover { text-decoration: underline; }
.ders-yan li.simdi a { border-left-color: var(--murekkep); font-weight: 700; background: var(--zemin); }
.ders-yan li.bitti a::after { content: " ✓"; color: var(--camgobegi); font-weight: 800; }
.ders { max-width: 760px; min-width: 0; }
.ders-bas h1 { font: 900 clamp(2.6rem, 5.5vw, 4.6rem)/.92 var(--f-baslik); margin-bottom: 18px; }
.ders-ozet { font-size: 1.2rem; font-weight: 500; }
.ders-bas { margin-bottom: 36px; }
.ders-gecis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 56px; border-top: 2px solid var(--murekkep); padding-top: 20px; }
.ders-gecis a { text-decoration: none; font-weight: 700; display: grid; gap: 4px; }
.ders-gecis a:hover { text-decoration: underline; }
.ders-gecis small { font-weight: 600; color: var(--ikincil); }
.ders-gecis .sonraki { text-align: right; }
.tamam-form { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 40px; padding-top: 28px; border-top: 2px dashed var(--murekkep); }
.tamam-not { margin: 40px 0 0; font-weight: 600; }
.tamam-form .tamam-not { margin: 0; }

/* uzun metin */
.metin { font-size: 1.09rem; line-height: 1.7; }
.metin h2 { font: 800 clamp(1.9rem, 3vw, 2.5rem)/1.02 var(--f-baslik); margin: 2em 0 .6em; }
.metin h3 { font: 800 1.5rem/1.1 var(--f-baslik); margin: 1.6em 0 .5em; }
.metin ul, .metin ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.metin li { margin-bottom: .4em; }
.metin li::marker { font-weight: 800; }
.metin blockquote { margin: 1.4em 0; padding: 18px 22px; background: var(--amber) var(--kaburga); font: 800 clamp(1.3rem, 2.2vw, 1.6rem)/1.2 var(--f-baslik); }
.metin blockquote p { margin: 0; }
.metin code { font: .92em/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--zemin-koyu); padding: .1em .35em; }
.metin pre { background: var(--murekkep); color: #f2f2f0; padding: 18px 20px; overflow-x: auto; margin: 1.2em 0 1.6em; }
.metin pre code { background: none; padding: 0; color: inherit; font-size: .88rem; }
.tablo { overflow-x: auto; margin: 1.2em 0 1.6em; border: 2px solid var(--murekkep); background: #fff; }
.tablo table { border-collapse: collapse; width: 100%; font-size: .98rem; }
.tablo th, .tablo td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.tablo th { background: var(--murekkep); color: #fff; font-weight: 700; }
.tablo tr:last-child td { border-bottom: 0; }

/* hesaplayıcı */
.hesap { border: 2px solid var(--murekkep); background: #fff; margin: 1.2em 0 1.6em; }
.hesap-girdiler { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; padding: 18px; }
.hesap label { display: grid; gap: 6px; font-size: .9rem; font-weight: 700; }
.hesap input { font: 600 1.1rem var(--f-govde); padding: 10px; border: 2px solid var(--murekkep); background: var(--zemin); width: 100%; }
.hesap-sonuc { display: block; padding: 18px; background: var(--amber) var(--kaburga); font: 800 1.35rem/1.25 var(--f-baslik); }
.hesap-sonuc small { display: block; font: 500 .95rem/1.5 var(--f-govde); margin-top: 6px; }

/* formlar */
.form { display: grid; gap: 20px; margin: 8px 0 24px; }
.form-dar { max-width: 460px; }
.form-giris { font-size: 1.1rem; max-width: 40em; }
.form label { display: grid; gap: 8px; font-weight: 700; }
.form label small { font-weight: 500; color: var(--ikincil); }
.form input[type=text], .form input[type=email], .form input[type=tel], .form input[type=password], .form textarea { font: 500 1.05rem var(--f-govde); padding: 13px 14px; border: 2px solid var(--murekkep); background: #fff; color: var(--murekkep); border-radius: 0; width: 100%; }
.form input:focus, .form textarea:focus { outline: 3px solid var(--amber); outline-offset: 0; }
.form [aria-invalid=true] { border-color: var(--kirmizi); }
.form fieldset { border: 2px solid var(--murekkep); padding: 16px 18px 18px; margin: 0; display: grid; gap: 10px; background: #fff; }
.form fieldset[aria-invalid=true] { border-color: var(--kirmizi); }
.form legend { font-weight: 700; padding: 0 6px; }
.secenekler { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.form .secenek { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; cursor: pointer; }
.secenek input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--murekkep); flex: none; }
.onay span { line-height: 1.45; }
.iki { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.alan-hata { color: var(--kirmizi); font-weight: 600; font-size: .92rem; }
.form-hata { background: var(--kirmizi); color: #fff; padding: 14px 18px; font-weight: 600; }
.form-alt { margin-top: 18px; }
.dis-giris { display: grid; gap: 12px; margin: 8px 0 20px; }
.dugme-dis { background: #fff; color: var(--murekkep); width: 100%; }
.dugme-dis:hover { color: var(--murekkep); }
.dis-giris-not { margin: 0; font-size: .9rem; color: var(--ikincil); }
.ayirac { display: flex; align-items: center; gap: 14px; margin: 10px 0 0; font-weight: 600; color: var(--ikincil); }
.ayirac::before, .ayirac::after { content: ""; flex: 1; border-top: 2px solid var(--cizgi); }
.tuzak { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bildirim { margin-top: 18px; padding: 14px 18px; background: var(--camgobegi); font-weight: 600; max-width: 46em; }

/* panel */
.ilerleme { margin: 28px 0; }
.ilerleme p { font: 700 1.6rem/1 var(--f-baslik); margin-bottom: 12px; }
.ilerleme-cubuk { appearance: none; -webkit-appearance: none; width: 100%; height: 28px; border: 2px solid var(--murekkep); background: #fff; display: block; }
.ilerleme-cubuk::-webkit-progress-bar { background: #fff var(--kaburga); }
.ilerleme-cubuk::-webkit-progress-value { background: var(--turuncu); }
.ilerleme-cubuk::-moz-progress-bar { background: var(--turuncu); }

/* yönetim */
.tablo-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.tablo-bas h2 { font: 800 2.2rem/1 var(--f-baslik); }
.tablo-bas small { font-size: .6em; color: var(--ikincil); }
.sayfa-genis .tablo { margin: 0; }
.sayfa-genis tr.okundu td { color: var(--ikincil); }
.sayfa-genis td form { margin: 0; }

/* ------------------------------------------------ dar ekran */
/* ------------------------------------------------ v2: kanıt, Omniman, ürünler, videolar */
.kanit-cip { display: inline-flex; gap: 8px; align-items: baseline; margin-top: 26px; padding: 10px 14px; border: 2px solid var(--murekkep); background: #fff; text-decoration: none; font-weight: 600; }
.kanit-cip strong { font: 900 1.35rem/1 var(--f-sablon); color: var(--murekkep); }
.kanit-cip:hover { box-shadow: 4px 4px 0 var(--murekkep); }
.kanit .dev { font-variant-numeric: tabular-nums; }
.kanit-yazi { max-width: 34em; font-size: 1.12rem; font-weight: 500; margin: 0; }
.kanit-duvar { columns: 3 320px; column-gap: 14px; }
.kanit-kart { display: block; width: 100%; margin: 0 0 14px; padding: 0; border: 2px solid var(--murekkep); background: #fff; cursor: zoom-in; break-inside: avoid; text-align: left; font: inherit; color: inherit; transition: transform .2s, box-shadow .2s; }
.kanit-kart:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--murekkep); }
.kanit-kart img { width: 100%; height: auto; }
.kanit-kart span { display: block; padding: 10px 12px; border-top: 2px solid var(--murekkep); font-weight: 600; font-size: .92rem; background: var(--zemin); }
.kanit-not { margin-top: 18px; font: 800 1.3rem/1.2 var(--f-baslik); }
.buyutec { border: 2px solid var(--murekkep); padding: 0; max-width: min(1600px, 96vw); max-height: 92vh; background: #fff; }
.buyutec::backdrop { background: rgb(17 19 21 / .82); }
.buyutec img { display: block; max-width: 100%; max-height: calc(92vh - 60px); width: auto; margin: 0 auto; }
.buyutec p { margin: 0; padding: 12px 16px; font-weight: 600; border-top: 2px solid var(--murekkep); }
.buyutec form { position: absolute; top: 8px; right: 8px; margin: 0; }
.buyutec-kapat { width: 44px; height: 44px; border: 2px solid var(--murekkep); background: var(--amber); font: 800 1.6rem/1 var(--f-govde); cursor: pointer; }

.omniman { margin: clamp(64px, 9vw, 128px) var(--kenar) 0; padding: clamp(32px, 5vw, 64px); background: var(--renk) var(--kaburga); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.omniman .giris-ust { color: #fff; font-weight: 700; margin-bottom: 14px; }
.omniman .dev { font-size: clamp(3rem, 7vw, 6.4rem); margin-bottom: 22px; }
.omniman p { font-size: 1.12rem; font-weight: 500; max-width: 32em; }
.dugme-acik { background: #fff; color: var(--murekkep); border-color: #fff; }
.dugme-acik:hover { color: var(--murekkep); box-shadow: 5px 5px 0 var(--murekkep); }
.roller { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.roller li { min-height: 62px; display: flex; align-items: flex-end; padding: 8px 10px; background: rgb(255 255 255 / .12); border: 2px solid rgb(255 255 255 / .85); font: 700 clamp(.82rem, 1.1vw, .98rem)/1.1 var(--f-govde); }
.roller li:nth-child(5n+1) { background: var(--amber); color: var(--murekkep); border-color: var(--amber); }
.roller li:nth-child(7n+3) { background: #fff; color: var(--murekkep); }

.bolum-dar { padding: clamp(40px, 5vw, 72px) var(--kenar) 0; }
.bolum-dar .bolum-bas { margin-bottom: 24px; }
.bolum-dar .bolum-bas p { margin: 0; max-width: 38em; }
.orta-baslik { font: 800 clamp(1.9rem, 3.2vw, 2.6rem)/1 var(--f-baslik); margin: 0 0 14px; }
.urun-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.urun-izgara-planlar { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.urun-karti { display: flex; flex-direction: column; gap: 14px; padding: 22px; border: 2px solid var(--murekkep); background: #fff; position: relative; }
.urun-karti::before { content: ""; position: absolute; left: -2px; right: -2px; top: -2px; height: 12px; background: var(--renk) var(--kaburga); border: 2px solid var(--murekkep); }
.urun-karti header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding-top: 10px; }
.urun-karti h3 { font: 800 clamp(1.7rem, 2.4vw, 2.1rem)/1 var(--f-baslik); margin: 0; }
.urun-karti.one-cikan { box-shadow: 8px 8px 0 var(--murekkep); }
.urun-kisa { margin: 0; font-weight: 500; }
.urun-maddeler { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.urun-maddeler li { padding-left: 22px; position: relative; font-weight: 500; }
.urun-maddeler li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; background: var(--murekkep); }
.urun-alt { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding-top: 10px; border-top: 2px dashed var(--cizgi); }
.urun-fiyat { margin: 0; display: grid; gap: 2px; }
.urun-fiyat strong { font: 900 2.1rem/1 var(--f-sablon); }
.urun-fiyat s { color: var(--ikincil); font-weight: 600; }
.urun-fiyat small { color: var(--ikincil); font-weight: 600; font-size: .82rem; }
.urun-fiyat.buyuk strong { font-size: 3rem; }
.urun-duzen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(28px, 5vw, 64px); padding: 0 var(--kenar); align-items: start; }
.urun-satin { position: sticky; top: 20px; display: grid; gap: 16px; padding: 22px; border: 2px solid var(--murekkep); background: #fff; }
.urun-moduller { list-style: none; margin: 18px 0 32px; padding: 0; display: grid; gap: 8px; }
.urun-moduller a { display: flex; gap: 14px; align-items: center; padding: 12px 14px; background: var(--renk) var(--kaburga); color: var(--yazi, var(--murekkep)); text-decoration: none; }
.urun-moduller .k-no { font-size: 2.2rem; }
.urun-moduller small { display: block; font-weight: 500; }
.adim-listesi { padding-left: 1.3em; display: grid; gap: 8px; font-weight: 500; }
.dugme-tam { width: 100%; }
.kucuk-not { margin: 0; font-size: .9rem; color: var(--ikincil); font-weight: 500; }
.odeme-bandi { max-width: 100%; height: auto; }
.sozlesme-kutu { border: 2px solid var(--murekkep); background: #fff; }
.sozlesme-kutu summary { padding: 12px 16px; font-weight: 700; cursor: pointer; }
.sozlesme-kutu .metin { padding: 0 16px 16px; max-height: 360px; overflow: auto; font-size: .95rem; }
.satici-bilgi { list-style: none; padding: 0; }

.yt-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; margin-bottom: 18px; }
.yt { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--murekkep); border: 2px solid var(--murekkep); overflow: hidden; color: #fff; text-decoration: none; }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .2s, transform .4s; }
.yt:hover img { opacity: 1; transform: scale(1.03); }
.yt-oynat { position: absolute; left: 14px; top: 14px; width: 54px; height: 40px; background: var(--kirmizi); }
.yt-oynat::after { content: ""; position: absolute; left: 21px; top: 11px; border-left: 16px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.yt-baslik { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; background: linear-gradient(transparent, rgb(0 0 0 / .85)); font-weight: 700; line-height: 1.3; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reel-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 200px), 1fr)); gap: 12px; }
.reel-serit { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 220px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; margin-bottom: 18px; }
.reel-serit .reel { scroll-snap-align: start; }
.reel { margin: 0; border: 2px solid var(--murekkep); background: #fff; }
.reel video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: var(--zemin-koyu); }
.reel figcaption { padding: 8px 10px; font-weight: 700; font-size: .85rem; border-top: 2px solid var(--murekkep); }
.ekitap-serit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding: 20px 24px; background: var(--renk) var(--kaburga); border: 2px solid var(--murekkep); }
.ekitap-serit p { margin: 0; font-weight: 500; font-size: 1.1rem; }
.ders-medya { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 0 0 28px; align-items: start; }
.ders-medya .yt { grid-column: 1 / -1; }
.ders-medya .reel { max-width: 260px; }
.alt-yasal { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; width: 100%; }
.alt-yasal a { text-decoration: none; color: var(--ikincil); }
.satir-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.satir-form input, .satir-form select { font: 500 .9rem var(--f-govde); padding: 6px 8px; border: 2px solid var(--murekkep); background: #fff; }

@media (max-width: 900px) {
  .omniman { grid-template-columns: 1fr; }
  .roller { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .urun-duzen { grid-template-columns: 1fr; }
  .urun-satin { position: static; }
  .giris { grid-template-columns: 1fr; min-height: 0; }
  .istif-sahne { grid-row: 1; justify-self: start; max-width: 360px; width: 72%; margin-bottom: 24px; padding-top: 44px; }
  .giris-yazi { padding-bottom: 0; }
  .uclu { grid-template-columns: 1fr; }
  .uclu article + article { padding-left: 0; border-left: 0; border-top: 2px solid var(--murekkep); }
  .merdiven { grid-template-columns: 1fr 1fr; }
  .merdiven li:nth-child(n) { min-height: 0; }
  .merdiven li:nth-child(2), .merdiven li:nth-child(4) { margin-top: 0; }
  .egitmen { grid-template-columns: 1fr; }
  .egitmen-foto { max-width: 420px; }
  .modul-satir { grid-template-columns: 1fr; }
  .ders-duzen { grid-template-columns: 1fr; }
  .ders-yan { position: static; order: 2; }
}
@media (max-width: 560px) {
  .menu a:not(.dugme):not(:first-child) { display: none; }
  .menu { gap: 14px; }
  .iki { grid-template-columns: 1fr; }
  .merdiven { grid-template-columns: 1fr; }
  .konteyner { min-height: 140px; }
  .alt-not { margin-left: 0; width: 100%; }
  .ders-gecis { grid-template-columns: 1fr; }
  .ders-gecis .sonraki { text-align: left; }
  .ders-listesi a { grid-template-columns: 2em minmax(0, 1fr); }
  .d-etiketler { grid-column: 2; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .ust, .alt, .ders-yan, .ders-gecis, .tamam-form { display: none; }
  body { background: #fff; }
}
.modul-video { margin: 0 0 24px; }
.gun-secici { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(78px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 8px; margin: 0 0 22px; }
.gun { display: grid; gap: 2px; padding: 10px 8px; border: 2px solid var(--murekkep); background: #fff; text-decoration: none; text-align: center; }
.gun small { font-size: .78rem; font-weight: 600; color: var(--ikincil); }
.gun strong { font: 900 1.5rem/1 var(--f-sablon); }
.gun.secili { background: var(--amber) var(--kaburga); }
.saatler { display: flex; flex-wrap: wrap; gap: 8px; }
.saat { position: relative; cursor: pointer; }
.saat input { position: absolute; opacity: 0; }
.saat span { display: block; padding: 10px 16px; border: 2px solid var(--murekkep); background: #fff; font: 900 1.3rem/1 var(--f-sablon); }
.saat input:checked + span { background: var(--murekkep); color: #fff; }
.saat input:focus-visible + span { outline: 3px solid var(--lacivert); outline-offset: 2px; }