/* ============================================================================
   ETKİLEŞİMLİ TECVİD DERSLERİ — /tecvid-dersleri/interaktif/ (3 Kas 2026)
   Görsel dil anasayfa v6 ile aynı (turkuaz geçiş, pastel altın, serin zemin, Lexend); kendi önekiyle (.idz).
   ========================================================================== */
body.vitrin-idz { background: radial-gradient(900px 860px at 0% 0%, rgba(0,180,219,.11), rgba(0,180,219,0) 62%),
                              radial-gradient(760px 620px at 100% 520px, rgba(198,154,69,.12), rgba(198,154,69,0) 66%),
                              #F4F8F9 no-repeat; }
body.vitrin-idz .vitrin-liste-govde { padding-top: 0; }

.idz {
    --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;
    --altin: #C69A45; --altin-p: #E8D4A6; --altin-m: #8E6A28;
    --golge: 0 1px 2px rgba(17,48,59,.04), 0 12px 34px -14px rgba(17,48,59,.18);
    --kenar: clamp(16px, 5vw, 64px);
    max-width: 1240px; margin: 0 auto; padding: 0 var(--kenar) 72px;
    color: var(--murekkep);
    font-family: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 300; font-size: 16px; line-height: 1.6;
    overflow-x: clip;
}
.idz *, .idz ::before, .idz ::after { box-sizing: border-box; }
.idz a { text-decoration: none; }
.idz h1, .idz h2, .idz h3 { font-family: inherit; color: var(--murekkep); margin: 0; }
.idz h2 { font-weight: 300; font-size: clamp(28px, 3vw, 42px); line-height: 1.14; letter-spacing: -.025em; margin-top: 12px; }
.idz h2 b { font-weight: 400; color: var(--turkuaz-d); }
.idz p { margin: 0; }
.idz :focus-visible { outline: 2px solid var(--turkuaz); outline-offset: 3px; border-radius: 8px; }

.idz-kas { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--altin-m); }
.idz-kas::before { content: ""; width: 28px; height: 1px; background: var(--altin); flex: none; }

.idz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border-radius: 999px;
    background: linear-gradient(120deg, var(--turkuaz), var(--turkuaz-d)); color: #fff; font-weight: 500; font-size: 16px; box-shadow: 0 10px 22px -10px rgba(0,131,176,.7); transition: transform .15s ease; }
.idz-btn:hover { transform: translateY(-1px); }
.idz-btn-ikinci { background: #fff; color: var(--turkuaz-m); box-shadow: inset 0 0 0 1px var(--cizgi-2); }
.idz-btn-acik { background: #fff; color: var(--turkuaz-m); box-shadow: none; }

/* 1 · Açılış */
.idz-acilis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding: 56px 0 44px; }
.idz-acilis h1 { margin-top: 18px; font-weight: 300; font-size: clamp(38px, 4.6vw, 62px); line-height: 1.08; letter-spacing: -.03em; }
.idz-acilis h1 b { font-weight: 400; background: linear-gradient(120deg, var(--turkuaz), var(--turkuaz-d)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.idz-giris { margin-top: 22px !important; font-size: 18px; color: var(--metin-2); max-width: 520px; }
.idz-eylem { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.idz-not { margin-top: 14px !important; font-size: 14px; color: var(--metin-3); }

.idz-ekran { position: relative; margin: 0; padding-bottom: 96px; }
.idz-ekran-cerceve { position: relative; padding: 8px; border-radius: 18px; background: #0D1316; box-shadow: 0 40px 70px -36px rgba(18,48,58,.7); }
.idz-ekran-cerceve img { display: block; width: 100%; height: auto; border-radius: 11px; }
.idz-cubuk { position: absolute; left: 22px; right: 22px; bottom: 20px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.3); }
.idz-cubuk i { display: block; width: 46%; height: 4px; border-radius: 2px; background: #7FD8EE; }
.idz-soru { position: absolute; left: 7%; right: 7%; bottom: 0; display: flex; flex-direction: column; gap: 7px; padding: 18px 20px 20px; border-radius: 16px; background: #fff; box-shadow: var(--golge), 0 30px 50px -28px rgba(18,48,58,.45); }
.idz-soru small { font-size: 12px; font-weight: 400; color: var(--altin-m); }
.idz-soru strong { font-size: 16px; font-weight: 500; line-height: 1.35; margin-bottom: 3px; }
.idz-soru span { padding: 7px 12px; border-radius: 10px; background: #F4F8F9; box-shadow: inset 0 0 0 1px var(--cizgi); font-size: 13px; font-weight: 400; color: var(--metin-2); line-height: 1.35; }

/* 2 · Sayılar */
.idz-sayilar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 12px 0 0; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.14);
    box-shadow: var(--golge); }
.idz-sayilar > div { padding: 26px 20px; text-align: center; background: linear-gradient(135deg, #0B4F66, #062A36); }
.idz-sayilar dt { font-size: clamp(30px, 3.4vw, 42px); font-weight: 300; line-height: 1.1; color: #fff; }
.idz-sayilar dd { margin: 6px 0 0; font-size: 13.5px; color: var(--altin-p); }

/* Bölümler */
.idz-bolum { padding-top: clamp(52px, 7vw, 84px); }
.idz-aciklama { margin-top: 12px !important; max-width: 640px; color: var(--metin-2); }

.idz-adimlar { list-style: none; counter-reset: adim; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 30px 0 0; padding: 0; }
.idz-adimlar li { counter-increment: adim; padding: 22px; border-radius: 18px; background: #fff; box-shadow: var(--golge); }
.idz-adimlar li::before { content: counter(adim); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #E3F4F9; color: var(--turkuaz-m); font-weight: 500; font-size: 15px; }
.idz-adimlar h3 { margin-top: 14px; font-size: 18px; font-weight: 500; }
.idz-adimlar p { margin-top: 6px; font-size: 14.5px; color: var(--metin-2); }

.idz-yaninda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.idz-yaninda ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.idz-yaninda li { position: relative; padding-left: 20px; color: var(--metin-2); }
.idz-yaninda li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--altin); }
.idz-yaninda li b { font-weight: 500; color: var(--murekkep); }
.idz-kapaklar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.idz-kapaklar img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: var(--golge); }

/* Ders listesi */
.idz-gruplar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; align-items: start; }
.idz-grup { padding: 20px 20px 12px; border-radius: 18px; background: #fff; box-shadow: var(--golge); }
.idz-grup-genis { grid-column: 1 / -1; }
.idz-grup h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 17px; font-weight: 500; padding-bottom: 10px; border-bottom: 1px solid var(--cizgi); }
.idz-grup h3 small { font-size: 13px; font-weight: 300; color: var(--metin-3); }
.idz-dersler { list-style: none; margin: 0; padding: 0; }
.idz-grup-genis .idz-dersler { columns: 2; column-gap: 32px; }
.idz-dersler li { break-inside: avoid; }
.idz-ders { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 7px 0; color: var(--murekkep); border-bottom: 1px solid rgba(0,98,128,.06); }
.idz-dersler li:last-child .idz-ders { border-bottom: 0; }
.idz-ders:hover .idz-ders-ad { color: var(--turkuaz-d); }
.idz-ders-no { flex: none; width: 26px; font-size: 13px; color: var(--metin-3); font-variant-numeric: tabular-nums; }
.idz-ders-ad { flex: 1; min-width: 0; font-weight: 400; font-size: 15px; line-height: 1.35; transition: color .15s ease; }
.idz-ders-tur { flex: none; padding: 1px 9px; border-radius: 999px; background: #F7EFDD; color: var(--altin-m); font-size: 11.5px; font-weight: 400; }
.idz-ders-durum { flex: none; display: none; padding: 1px 9px; border-radius: 999px; background: #E4F6EC; color: #1F7A4D; font-size: 11.5px; font-weight: 500; }
.idz-ders.is-bitti .idz-ders-durum { display: inline-block; }

/* SSS */
.idz-sss details { border-bottom: 1px solid var(--cizgi); }
.idz-sss h2 { margin-bottom: 14px; }
.idz-sss summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; font-size: 17px; font-weight: 400; cursor: pointer; list-style: none; }
.idz-sss summary::-webkit-details-marker { display: none; }
.idz-sss summary::after { content: "+"; flex: none; width: 20px; text-align: center; font-size: 22px; font-weight: 300; color: var(--turkuaz-d); }
.idz-sss details[open] summary::after { content: "−"; }
.idz-sss details p { max-width: 760px; padding: 0 0 18px; color: var(--metin-2); }
.idz-sss details a { color: var(--turkuaz-m); text-decoration: underline; text-underline-offset: 3px; }

/* Son çağrı */
.idz-son { margin-top: clamp(52px, 7vw, 84px); padding: clamp(36px, 5vw, 56px) 24px; border-radius: 24px; text-align: center; background: linear-gradient(135deg, #0B4F66, #062A36); }
.idz .idz-son h2 { margin: 0; color: #fff; }
.idz-son p { margin: 10px 0 24px; color: var(--altin-p); }

@media (max-width: 1020px) {
    .idz-acilis { grid-template-columns: 1fr; padding-top: 40px; }
    .idz-giris { max-width: none; }
    .idz-ekran { max-width: 620px; }
    .idz-adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .idz-yaninda { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .idz-acilis { padding-top: 28px; gap: 30px; }
    .idz-acilis h1 { font-size: 38px; }
    .idz-giris { font-size: 17px; }
    .idz-eylem .idz-btn { flex: 1 1 100%; }
    .idz-ekran { padding-bottom: 0; }
    .idz-soru { position: static; margin: 10px 0 0; }
    .idz-ekran-cerceve { padding: 6px; }
    .idz-sayilar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .idz-sayilar > div { padding: 20px 12px; }
    .idz-adimlar, .idz-gruplar { grid-template-columns: 1fr; }
    .idz-grup-genis .idz-dersler { columns: 1; }
    .idz-grup { padding: 18px 16px 8px; }
    .idz-sss summary { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .idz-btn { transition: none; } .idz-btn:hover { transform: none; } }