/* ============================================================================
   VİTRİN — BÖLÜM SAYFASI (yeni şablon, 30 Eyl 2026)
   22 Eyl prototipinin (https://claude.ai/artifact/UsfABQbJXQ7RFuB7dERSq5)
   tasarım dili: Lexend, turkuaz (#00B4DB → #0083B0) + pastel altın, Arapça
   Elif1 — Diyanet'in yazı tipi (30 Eyl'e kadar Amiri Quran — aşağıdaki @font-face notu). Tüm kurallar .vb kökünün altında — sitenin menüsü ve alt
   bilgisi (vitrin iskeleti) etkilenmesin. Koyu tema ŞİMDİLİK YOK: iskelet
   (menü/alt bilgi) açık renkli; sayfa tek başına kararırsa uyumsuz durur.
   ========================================================================== */

/* ARAPÇA YAZI TİPİ — ELİF1, Diyanet'in Kur'an portalının yazı tipi (30 Eyl 2026, kullanıcı: "Diyanet
   nasıl ve hangi fontla çözdüyse onu kullanalım"). kuran.diyanet.gov.tr/mushaf_v2 KKStyle.css:
   `@font-face { font-family: KuranFontElif1; src: url(../../fonts/Elif1.ttf) }` — dosya panelin
   fonts/elif1/elif1.ttf'iyle SHA-256 AYNI. Diyanet kodlamasını (çeker U+0656, çeker üstün elifin
   ÜSTÜNDE, şeddeli esre yukarıda, sekte U+08DD …) tam çizen tek yazı tipi (Mushaf Merkezi C24).
   Denenip bırakılanlar: Amiri Quran (hadiste hareke çakışması), Scheherazade New (اٰ'da asar elifin
   YANINA düşüyor), Hamdullah (U+0656 yok), Noto Naskh (﴿ ﴾ yok).
   ⚠ Elif1 KÜÇÜK çizer (aynı px'te ~%70): boyutlar ~1,45 kat. İnce çizgi → gradyan koyu altın.
   ⚠ LİSANS: künyesi "All Rights Reserved", sahibi yazılı değil — panelde (giriş arkası) kullanıcı
   onayıyla (28 Eyl); herkese açık sitede kullanım kararı kullanıcının (30 Eyl). */
@font-face { font-family: "Elif1"; font-style: normal; font-weight: 400; font-display: swap;
    src: url(/medya/font/elif1/elif1.ttf) format("truetype");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }

body.vitrin-bolum-sayfa { background: #F4F8F9; }

.vb {
    --zemin: #F4F8F9; --zemin-2: #EAF3F5; --yuzey: #FFFFFF; --yuzey-2: #FBFDFD;
    --murekkep: #11303B; --metin-2: #4F6A75; --metin-3: #7F96A0;
    --cizgi: rgba(0, 98, 128, .11); --cizgi-2: rgba(0, 98, 128, .2);
    --turkuaz: #00B4DB; --turkuaz-d: #0083B0; --turkuaz-m: #006F93; --turkuaz-sis: rgba(0, 180, 219, .10);
    --altin: #C69A45; --altin-p: #E8D4A6; --altin-sis: #F6EDD8; --altin-m: #8E6A28; --vurgu: #B07F2E;
    --yesil: #1E9C74;
    --golge: 0 1px 2px rgba(17, 48, 59, .04), 0 12px 34px -14px rgba(17, 48, 59, .18);
    --golge-b: 0 2px 6px rgba(17, 48, 59, .05), 0 30px 70px -28px rgba(0, 111, 147, .35);
    --arap: "Elif1", "Amiri", serif;
    --ui: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--murekkep);
    font-family: var(--ui);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.vb *, .vb *::before, .vb *::after { box-sizing: border-box; }
.vb a { color: inherit; text-decoration: none; }
.vb :focus-visible { outline: 2px solid var(--turkuaz); outline-offset: 3px; border-radius: 8px; }
/* Lexend'de yalnız 300/400/500 yüklü (Google Fonts isteği) — 600/700 kullanma. */
.vb b, .vb strong { font-weight: 500; }

/* ---------- HERO ---------- */
.vb .b-hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--cizgi); }
.vb .b-hero::before { content: ""; position: absolute; inset: 0; z-index: -2;
    background: radial-gradient(70% 80% at 0% 0%, var(--turkuaz-sis), transparent 60%),
                radial-gradient(50% 60% at 100% 100%, var(--altin-sis), transparent 65%), var(--zemin); }
.vb .b-hero-ic { max-width: 1200px; margin: 0 auto; padding: 36px 24px 56px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.vb .ust-yazi { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--altin-m); font-weight: 400; display: flex; align-items: center; gap: 12px; margin: 0; }
.vb .ust-yazi::before { content: ""; width: 28px; height: 1px; background: var(--altin); flex: none; }
.vb .b-hero h1 { margin: 14px 0 4px; font-size: clamp(44px, 6vw, 72px); font-weight: 300; letter-spacing: -.03em; line-height: 1; color: var(--murekkep); }
.vb .b-hero .anlam { font-size: 17px; color: var(--altin-m); margin: 0 0 18px; }
.vb .b-hero .ozet-p { color: var(--metin-2); font-size: 16.5px; max-width: 52ch; margin: 0 0 24px; }
.vb .eylemler { display: flex; gap: 10px; flex-wrap: wrap; }
.vb .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; font-size: 14px; font-weight: 400; border: 1px solid var(--cizgi-2); cursor: pointer; background: var(--yuzey); color: var(--murekkep); }
.vb .btn:hover { border-color: var(--turkuaz); }
.vb .btn.ana { color: #fff; border-color: transparent; background: linear-gradient(120deg, var(--turkuaz), var(--turkuaz-d)); }
.vb .b-arap { text-align: center; }
/* Renk, harfe kırpılmış gradyan (background-clip: text) — gradyan yalnız kutunun
   içini boyar; alttaki hareke (إ'nin kesresi) kutudan taşarsa GÖRÜNMEZ. Alt pay
   bu yüzden var; eksi alt boşluk aradaki mesafeyi eski hâlinde tutar (30 Eyl). */
.vb .b-arap .buyuk { font-family: var(--arap); font-size: clamp(92px, 14.5vw, 160px); line-height: 1.7; padding: .15em 0 .45em; margin-bottom: -.45em; direction: rtl;
    background: linear-gradient(160deg, var(--altin-m), var(--altin) 50%, #DDBB78); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ---------- HUZUR KÖŞESİ (30 Eyl 2026, görünüm A "sade") ----------
   Hero'nun sağında ayet/hadis/söz (Site Merkezi > Huzur Köşesi). Arkada anasayfa
   taslağının dönen silik logosu; taslaktaki .28 saydamlık burada metni bastırdı
   (altın logo + altın yazı) → .15 ve merkez sağa. Terimin Arapçası anlam satırına iner. */
.vb .b-hero .rozet { position: absolute; z-index: -1; width: min(620px, 90vw); aspect-ratio: 1; right: -300px; top: 55%; translate: 0 -50%; pointer-events: none;
    -webkit-mask: url(/medya/logo/rozet.webp) center/contain no-repeat; mask: url(/medya/logo/rozet.webp) center/contain no-repeat;
    background: linear-gradient(135deg, var(--altin-p), var(--altin) 60%, var(--altin-p)); opacity: .15; }
@media (prefers-reduced-motion: no-preference) { .vb .b-hero .rozet { animation: rozet-don 140s linear infinite; } }
@keyframes rozet-don { to { rotate: 360deg; } }
.vb .anlam-ar { font-family: var(--arap); font-size: 1.9em; color: var(--altin); margin-left: 10px; line-height: 1; }
.vb .huzur { margin: 0; text-align: center; }
.vb .huzur .ar { font-family: var(--arap); font-size: clamp(46px, 5.2vw, 62px); direction: rtl; line-height: 1.7; padding: .1em 0 .4em; margin: 0 0 -.4em;
    background: linear-gradient(160deg, #7A5A1F, var(--altin-m) 45%, var(--altin)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vb .huzur .ar .kp { font-size: .8em; opacity: .75; }
/* Alıntı devam işareti (metnin başındaki/sonundaki noktalar): Arapça yazı tipiyle değil, küçük ve ince
   (Elif1 noktayı iri damla çiziyor — kullanıcı, 30 Eyl). Renk kendisinde: üst öğenin metni saydam (gradyan). */
.vb .huzur .ar .uc { font-family: var(--ui); font-size: .42em; font-weight: 300; color: var(--altin-m); margin: 0 .15em; vertical-align: .35em; }
.vb .huzur .etiket { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--altin-m); margin: 0 0 6px; }
.vb .huzur .cizgi { display: block; width: 48px; height: 1px; background: linear-gradient(90deg, transparent, var(--altin), transparent); margin: 14px auto 0; }
.vb .huzur .tr { font-size: 16px; color: var(--metin-2); margin: 10px auto 0; line-height: 1.55; max-width: 40ch; }
.vb .huzur .kay { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--altin-m); margin: 12px 0 0; }
@media (max-width: 860px) {
    .vb .b-hero .rozet { width: 380px; right: -150px; top: 0; translate: 0 -12%; }
    /* Telefonda başlığı ve düğmeleri itmesin: en alta, ince çizgiyle ayrılmış. */
    .vb .b-arap.huzur { order: 3; text-align: center; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--cizgi); }
    .vb .huzur .ar { font-size: 44px; }
}
@media (max-width: 860px) {
    /* Ferah: menünün altında nefes payı; Arapça harekeler (hemze) kırpılmasın diye
       satır yüksekliği 2 + üst pay (kullanıcı geri bildirimi 30 Eyl). */
    .vb .b-hero-ic { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 40px 20px 44px; }
    .vb .b-arap { order: -1; text-align: left; }
    .vb .b-arap .buyuk { font-size: 92px; line-height: 1.7; padding: .1em 0 .45em; margin-bottom: calc(24px - .45em); }
    .vb .b-hero h1 { margin-top: 18px; }
    .vb .b-hero .anlam { margin-bottom: 22px; }
    .vb .b-hero .ozet-p { margin-bottom: 28px; }
}

/* ---------- DÜZEN: yapışkan içindekiler + içerik ---------- */
.vb .b-duzen { max-width: 1200px; margin: 0 auto; padding: 40px 24px 48px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; align-items: start; }
.vb .icindekiler { position: sticky; top: 110px; display: grid; gap: 2px; font-size: 13.5px; }
.vb .icindekiler b { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--altin-m); font-weight: 400; margin-bottom: 10px; }
.vb .icindekiler a { padding: 7px 12px; border-left: 1px solid var(--cizgi); color: var(--metin-2); }
.vb .icindekiler a:hover { color: var(--murekkep); }
.vb .icindekiler a.aktif { border-left: 2px solid var(--turkuaz); padding-left: 11px; color: var(--turkuaz-m); }
.vb .icerik-s { min-width: 0; display: grid; gap: 64px; }
@media (max-width: 960px) {
    .vb .b-duzen { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0 16px 32px; }
    /* Sitenin menüsü (.mekteb-master-header) sabit ve mobilde üstten 96 px yer tutuyor
       (ölçüldü) — şerit onun hemen altına yapışır, altında kaybolmaz. */
    .vb .icindekiler { top: 96px; z-index: 20; display: flex; overflow-x: auto; gap: 6px; padding: 10px 16px; margin: 0 -16px;
        background: color-mix(in srgb, var(--zemin) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--cizgi); scrollbar-width: none; }
    .vb .icindekiler::-webkit-scrollbar { display: none; }
    .vb .icindekiler b { display: none; }
    .vb .icindekiler a { flex: none; border: 1px solid var(--cizgi); border-radius: 999px; padding: 6px 12px; font-size: 13px; background: var(--yuzey); }
    .vb .icindekiler a.aktif { border: 1px solid var(--turkuaz); padding-left: 12px; background: var(--turkuaz-sis); }
}

/* ---------- BÖLÜM (anlatım) ---------- */
.vb .bolum, .vb .bolum h3, .vb .etkinlik-kap { scroll-margin-top: 110px; }
@media (max-width: 960px) { .vb .bolum, .vb .bolum h3, .vb .etkinlik-kap { scroll-margin-top: 170px; } }
/* Dersin interaktif sayfası (video + sorular) */
.vb .bolum p.etk-video { margin-top: 18px; }
/* Metin içindeki Arapça kelime (ör. خَلَقَ / حَلَقَ) */
.vb .ar-i { font-family: var(--arap); font-size: 2.2em; line-height: 1; }
.vb .bolum > h2 { margin: 0 0 18px; font-weight: 300; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.015em; line-height: 1.2; color: var(--murekkep); }
.vb .bolum > h2 small { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--altin-m); font-weight: 400; margin-bottom: 10px; }
.vb .bolum h3 { margin: 36px 0 10px; font-weight: 400; font-size: 21px; line-height: 1.35; color: var(--murekkep); }
.vb .bolum h4 { margin: 22px 0 6px; font-weight: 400; font-size: 16.5px; color: var(--turkuaz-m); }
.vb .bolum p { margin: 0 0 12px; color: var(--metin-2); max-width: 68ch; font-size: 15.5px; line-height: 1.75; }
.vb .bolum p b { color: var(--murekkep); font-weight: 400; }
/* WP anlatımındaki madde listeleri (medlere-giris, 30 Eyl) — p ile aynı ölçü */
.vb .bolum ul, .vb .bolum ol { margin: 0 0 14px; padding-left: 22px; max-width: 68ch; color: var(--metin-2); font-size: 15.5px; line-height: 1.75; }
.vb .bolum li { margin: 0 0 6px; }
.vb .bolum li > ul, .vb .bolum li > ol { margin: 6px 0 4px; }
.vb .bolum li::marker { color: var(--altin); }
.vb .bolum ol { list-style: none; } /* WP metninde numara metnin içinde ("1) …") — çift numara olmasın */
.vb .bolum li b { color: var(--murekkep); font-weight: 400; }
/* Videonun ilgili anına giden işaret (WP'deki ▶ bağlantıları; aynı hedef + zaman). */
.vb .an { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 1px 9px 1px 7px; border-radius: 999px; border: 1px solid var(--cizgi-2); background: var(--yuzey); font-size: 12px; color: var(--turkuaz-m); cursor: pointer; vertical-align: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vb .an:hover { border-color: var(--turkuaz); background: var(--turkuaz-sis); }
.vb .an::before { content: ""; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }

/* 15 harf */
.vb .harfler { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 6px; direction: rtl; margin: 18px 0 10px; }
.vb .harf { aspect-ratio: 1 / 1.15; border-radius: 12px; border: 1px solid var(--cizgi); background: var(--yuzey); display: grid; place-items: center; font-family: var(--arap); font-size: 46px; line-height: 1; color: var(--turkuaz-m); }
.vb .harf.kalin { color: var(--vurgu); background: var(--altin-sis); border-color: var(--altin-p); }
@media (max-width: 760px) { .vb .harfler { grid-template-columns: repeat(8, minmax(0, 1fr)); } .vb .harf { font-size: 42px; } }
@media (max-width: 420px) { .vb .harfler { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.vb .bolum p.lejant { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--metin-3); margin: 0 0 18px; }
.vb .lejant i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--yuzey); border: 1px solid var(--cizgi-2); }
.vb .lejant i.k { background: var(--altin-sis); border-color: var(--altin-p); }

/* Beyit */
.vb .beyit { margin: 22px 0 8px; padding: 22px 16px 16px; text-align: center; border-top: 1px solid var(--altin-p); border-bottom: 1px solid var(--altin-p); }
.vb .beyit .ar { font-family: var(--arap); font-size: clamp(38px, 5.6vw, 52px); line-height: 1.8; direction: rtl; color: var(--murekkep); max-width: none; margin: 0; }
.vb .beyit small { display: block; color: var(--metin-3); font-size: 12.5px; margin-top: 6px; }
/* Terkipte her kelimenin ilk harfi (ihfa harfleri) altın (kullanıcı isteği 30 Eyl). */
.vb .beyit .ar b { font-weight: 400; color: var(--vurgu); }

/* ---------- MİSALLER ---------- */
.vb .misaller { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
@media (max-width: 860px) { .vb .misaller { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .vb .misaller { grid-template-columns: minmax(0, 1fr); } }
.vb .misal { position: relative; font: inherit; color: inherit; border: 1px solid var(--cizgi); background: var(--yuzey); border-radius: 18px; padding: 18px 16px 14px; cursor: pointer; text-align: center; display: grid; gap: 4px; transition: border-color .2s, box-shadow .2s; }
.vb .misal:hover { border-color: var(--cizgi-2); box-shadow: var(--golge); }
.vb .misal.caliyor { border-color: var(--turkuaz); box-shadow: 0 0 0 4px var(--turkuaz-sis); }
.vb .misal .ar { font-family: var(--arap); font-size: 56px; line-height: 1.8; padding-top: 6px; direction: rtl; color: var(--murekkep); }
.vb .misal .n, .vb .renk-not .n { color: var(--vurgu); }
.vb .misal .h, .vb .renk-not .h { color: var(--turkuaz-d); }
.vb .misal small { font-size: 12.5px; color: var(--metin-2); line-height: 1.45; }
.vb .misal .oy { position: absolute; top: 12px; left: 12px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--turkuaz-sis); color: var(--turkuaz-m); }
.vb .misal.caliyor .oy { background: var(--turkuaz); color: #fff; }
.vb .bolum p.renk-not { font-size: 12.5px; color: var(--metin-3); margin-top: 12px; }

/* ---------- VİDEO ---------- */
.vb .video { border-radius: 22px; overflow: hidden; border: 1px solid var(--cizgi); background: var(--yuzey); box-shadow: var(--golge); margin-top: 18px; }
.vb .poster { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer; background: #0b2530; }
.vb .poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vb .poster .oynat-b { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--turkuaz-d); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.vb .poster .v-baslik { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px; color: #fff; font-size: 13px; text-align: left; background: linear-gradient(transparent, rgba(8, 26, 33, .78)); }
.vb .video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.vb .bolumler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; padding: 14px 20px 18px; }
.vb .bolumler button { display: flex; gap: 12px; align-items: baseline; text-align: left; font: inherit; border: 0; border-bottom: 1px solid var(--cizgi); background: none; padding: 10px 2px; cursor: pointer; font-size: 14px; color: var(--metin-2); }
.vb .bolumler button:hover { color: var(--murekkep); }
.vb .bolumler .ar { font-family: var(--arap); font-size: 2.3em; line-height: .6; vertical-align: -.12em; margin-right: 2px; color: var(--murekkep); }
.vb .bolumler button i { font-style: normal; flex: none; min-width: 42px; color: var(--turkuaz-m); font-variant-numeric: tabular-nums; font-size: 13px; }
@media (max-width: 640px) { .vb .bolumler { grid-template-columns: minmax(0, 1fr); padding: 8px 16px 12px; } }

/* ---------- BİLGİ KARTLARI ---------- */
.vb .kartlar { display: grid; gap: 14px; max-width: 640px; margin-top: 18px; }
.vb .kart-sahne { perspective: 1400px; }
.vb .bkart { position: relative; height: 240px; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .7, .2, 1); cursor: pointer; }
.vb .bkart.cevir { transform: rotateY(180deg); }
.vb .yuz { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 22px; padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 10px; border: 1px solid var(--cizgi); }
.vb .yuz.on { background: var(--yuzey); box-shadow: var(--golge); }
.vb .yuz.arka { transform: rotateY(180deg); background: linear-gradient(150deg, #0B4F66, #083847); color: #EAF6F8; border-color: transparent; }
.vb .yuz small { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--altin-m); }
.vb .yuz.arka small { color: #E8D4A6; }
.vb .bolum .yuz p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--murekkep); max-width: none; }
.vb .bolum .yuz.arka p { font-size: 16px; color: #D6EBF0; }
.vb .yuz .dokun { font-size: 12.5px; color: var(--metin-3); }
.vb .kart-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vb .kart-alt .btns { display: flex; gap: 8px; }
.vb .yuv { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cizgi-2); background: var(--yuzey); cursor: pointer; display: grid; place-items: center; font: inherit; color: var(--murekkep); }
.vb .yuv:hover { border-color: var(--turkuaz); }
.vb .nokta { display: flex; gap: 5px; flex-wrap: wrap; }
.vb .nokta i { width: 6px; height: 6px; border-radius: 50%; background: var(--cizgi-2); }
.vb .nokta i.on { background: var(--altin); width: 18px; border-radius: 3px; }
@media (max-width: 560px) { .vb .bkart { height: 280px; } .vb .yuz { padding: 22px; } .vb .bolum .yuz p { font-size: 16.5px; } }

/* ---------- SINAV ---------- */
.vb .sinav { border-radius: 22px; border: 1px solid var(--cizgi); background: var(--yuzey); padding: 26px; max-width: 720px; margin-top: 18px; }
.vb .sinav-ust { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--metin-3); margin-bottom: 14px; }
.vb .cubuk { height: 4px; border-radius: 2px; background: var(--zemin-2); overflow: hidden; margin-bottom: 22px; }
.vb .cubuk i { display: block; height: 100%; background: linear-gradient(90deg, var(--turkuaz), var(--altin)); transition: width .3s; }
.vb .bolum p.soru { font-size: 18px; font-weight: 400; margin: 0 0 18px; line-height: 1.5; color: var(--murekkep); }
.vb .siklar { display: grid; gap: 10px; }
.vb .sik { display: flex; gap: 12px; align-items: center; text-align: left; font: inherit; color: var(--murekkep); border: 1px solid var(--cizgi-2); background: var(--yuzey-2); border-radius: 14px; padding: 13px 16px; cursor: pointer; font-size: 15px; }
.vb .sik:hover:not(:disabled) { border-color: var(--turkuaz); }
.vb .sik i { font-style: normal; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--cizgi-2); font-size: 12px; color: var(--metin-3); }
.vb .sik.dogru { border-color: var(--yesil); background: color-mix(in srgb, var(--yesil) 8%, var(--yuzey)); }
.vb .sik.dogru i { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.vb .sik.yanlis { border-color: #D9826B; background: color-mix(in srgb, #D9826B 7%, var(--yuzey)); }
.vb .sik:disabled { cursor: default; }
.vb .aciklama { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--altin-sis); font-size: 14px; color: var(--murekkep); }
.vb .sinav-alt { display: flex; justify-content: flex-end; margin-top: 18px; }
.vb .sonuc { text-align: center; padding: 12px 0; }
.vb .sonuc .puan { font-size: 56px; font-weight: 300; letter-spacing: -.03em; background: linear-gradient(120deg, var(--turkuaz-d), var(--altin)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 560px) { .vb .sinav { padding: 20px; } .vb .bolum p.soru { font-size: 16.5px; } }

/* ---------- TAHMİN ET (Tecvid Haritası iğneleri) ---------- */
/* Kesintisiz kâğıt (kullanıcı seçimi B, 30 Eyl): kartın tamamı harita sayfasının zemin renginde
   (#FFFADE) — sayfa görseli karta karışır, sarı↔beyaz kenar hiç oluşmaz. Çerçeve/çizgi YOK. */
.vb .tahmin { margin-top: 18px; padding: 14px; border-radius: 22px; background: #FFFADE; border: 1px solid rgba(142, 106, 40, .20);
              box-shadow: 0 1px 2px rgba(70, 50, 15, .06), 0 14px 34px -14px rgba(70, 50, 15, .28); }
.vb .th-ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 2px 6px 10px; border-bottom: 1px solid rgba(142, 106, 40, .14); font-size: 13px; color: var(--metin-3); }
.vb .th-ust a { color: var(--turkuaz-m); }
.vb .th-skor { padding: 4px 12px; border-radius: 999px; background: rgba(198, 154, 69, .16); color: var(--altin-m); }
.vb .th-skor b { font-weight: 500; }
.vb .th-sahne { position: relative; background: #FFFADE; }
.vb .th-sahne > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* İğne: UCU (alt orta) noktada — translate(-50%, -100%); boy motordaki gibi slayda orantılı */
.vb .th-igne { position: absolute; width: clamp(24px, 4%, 38px); aspect-ratio: 24 / 36; padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, -100%); transform-origin: bottom center; filter: drop-shadow(0 3px 4px rgba(0, 40, 60, .35)); transition: transform .2s; }
.vb .th-igne svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vb .th-igne .g { fill: var(--turkuaz-d); }
.vb .th-igne .i { fill: #fff; }
.vb .th-igne text { fill: var(--turkuaz-m); font: 500 9.5px Lexend, sans-serif; text-anchor: middle; dominant-baseline: central; }
.vb .th-igne:hover, .vb .th-igne.acik { transform: translate(-50%, -100%) scale(1.15); }
.vb .th-igne.acik .g { fill: var(--altin); } .vb .th-igne.acik text { fill: var(--altin-m); }
.vb .th-igne.dogru .g { fill: #2E9D6A; } .vb .th-igne.dogru text { fill: #2E9D6A; }
.vb .th-igne.yanlis .g { fill: #C8553D; } .vb .th-igne.yanlis text { fill: #C8553D; }
.vb .th-soru { padding: 14px 6px 4px; }
.vb .th-baslik { margin: 0; font-size: 15px; color: var(--murekkep); }
.vb .th-baslik b { font-weight: 500; }
.vb .th-secenekler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vb .th-secenekler:empty { display: none; }
.vb .th-secenekler button { font: inherit; font-size: 14px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--cizgi-2); background: var(--yuzey); color: var(--murekkep); cursor: pointer; }
.vb .th-secenekler button:hover:not(:disabled) { border-color: var(--turkuaz); }
.vb .th-secenekler button:disabled { cursor: default; opacity: .6; }
.vb .th-secenekler button.dogru { opacity: 1; border-color: #2E9D6A; background: rgba(46, 157, 106, .1); color: #1F6E4A; }
.vb .th-secenekler button.yanlis { opacity: 1; border-color: #C8553D; background: rgba(200, 85, 61, .08); color: #9A3B28; }
.vb .th-son { flex-basis: 100%; margin: 6px 0 0; font-size: 14px; color: var(--altin-m); }
@media (max-width: 560px) { .vb .tahmin { padding: 10px; border-radius: 18px; } }
.vb .bolum p.kurs-satir { margin-top: 22px; font-size: 16px; color: var(--murekkep); }
.vb .donen { display: inline-grid; vertical-align: bottom; }
.vb .donen > span { grid-area: 1 / 1; color: var(--turkuaz-d); font-weight: 400; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.vb .donen > span.gor { opacity: 1; transform: none; }
.vb .vitrin-gizli { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- VİDEO EKLERİ + ETKİNLİKLER ---------- */
/* Uygulama dersi + ilgili videolar (ana videonun altında küçük ızgara) */
.vb .v-ek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.vb .v-kart .video { margin-top: 0; border-radius: 16px; box-shadow: none; }
.vb .v-kart .poster .oynat-b { width: 52px; height: 52px; }
.vb .v-kart small { display: block; margin-top: 12px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--altin-m); }
.vb .v-kart b { display: block; margin-top: 4px; font-weight: 400; font-size: 16px; line-height: 1.4; color: var(--murekkep); }
.vb .v-kart a { display: inline-block; margin-top: 6px; font-size: 14px; color: var(--turkuaz-m); }
.vb .v-kart a:hover { color: var(--turkuaz-d); }
@media (max-width: 640px) { .vb .v-ek { grid-template-columns: minmax(0, 1fr); } }

/* Etkinlikler: motor başına bir satır, numara hapları; kardeş kurallar */
.vb .etk-lejant { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13px; color: var(--metin-3); }
.vb .etk-lejant > span { display: inline-flex; align-items: center; gap: 8px; }
.vb .etk-lejant .etk-no { min-width: 32px; height: 26px; font-size: 12px; }
.vb .etk-aile { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: start; padding: 14px; margin-top: 12px; border-radius: 18px; border: 1px solid var(--cizgi); background: var(--yuzey); }
.vb .etk-aile img { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 12px; background: var(--zemin-2); }
.vb .etk-ic > b { display: flex; align-items: baseline; gap: 8px; font-weight: 400; font-size: 17px; color: var(--murekkep); }
.vb .etk-ic > b small { font-size: 12.5px; color: var(--metin-3); }
.vb .etk-nolar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vb .etk-no { display: inline-grid; place-items: center; min-width: 40px; height: 34px; padding: 0 8px; border-radius: 10px; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--turkuaz-m); background: var(--turkuaz-sis); border: 1px solid transparent; }
.vb .etk-no.ileri { color: var(--metin-3); background: transparent; border-color: var(--cizgi-2); }
.vb a.etk-no:hover { border-color: var(--turkuaz); color: var(--turkuaz-d); }
.vb .kardesler { display: flex; flex-wrap: wrap; gap: 10px; }
.vb .kardes { display: inline-flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--cizgi); background: var(--yuzey); }
.vb .kardes b { font-weight: 400; font-size: 15px; color: var(--murekkep); }
.vb .kardes small { font-size: 12px; color: var(--metin-3); }
.vb a.kardes:hover { border-color: var(--turkuaz); }
@media (max-width: 640px) {
    .vb .etk-aile { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px; }
    .vb .etk-no { min-width: 38px; height: 36px; }
}

/* ---------- KOMŞU DERSLER ---------- */
.vb .komsu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vb .komsu a { border-radius: 18px; border: 1px solid var(--cizgi); background: var(--yuzey); display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; }
.vb .komsu a:last-child { direction: rtl; } .vb .komsu a:last-child > * { direction: ltr; }
.vb .komsu img { border-radius: 10px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; }
.vb .komsu small { color: var(--metin-3); font-size: 12px; }
.vb .komsu b { display: block; font-weight: 400; font-size: 15px; }
.vb .komsu a:hover { border-color: var(--cizgi-2); box-shadow: var(--golge); }
@media (max-width: 640px) { .vb .komsu { grid-template-columns: minmax(0, 1fr); } .vb .komsu a { grid-template-columns: 96px minmax(0, 1fr); } .vb .komsu a:last-child { direction: ltr; } }

/* ---------- KAYIT ÇAĞRISI ---------- */
.vb .son { max-width: 1152px; margin: 8px auto 56px; padding: 36px 32px; border-radius: 28px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: center;
    background: radial-gradient(60% 90% at 0% 0%, var(--turkuaz-sis), transparent 60%), radial-gradient(60% 90% at 100% 100%, var(--altin-sis), transparent 60%), var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge); }
.vb .son img { width: 100%; height: auto; border-radius: 14px; }
.vb .son-ust { margin: 0; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--altin-m); font-weight: 400; }
.vb .son h2 { margin: 8px 0 10px; font-weight: 300; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.01em; }
.vb .son p { color: var(--metin-2); margin: 0 0 18px; max-width: 62ch; }
.vb .btn.altin { color: #3B2A0B; border-color: transparent; background: linear-gradient(120deg, #E8D4A6, var(--altin)); }
@media (max-width: 760px) { .vb .son { grid-template-columns: minmax(0, 1fr); margin: 8px 16px 40px; padding: 26px 20px; gap: 16px; } .vb .son img { max-width: 140px; } }