/* ==== */
/* 1. KATMAN: TASARIM KONTROL PANELİ (ULTRA YÖNETİM - v9.2)     */
/* ==== */

/* Özel Arapça Font Tanımlaması */
@font-face {
    font-family: 'ShaikhHamdullah';
    src: url('https://kuranmektebim.com/wp-content/uploads/2025/10/ar7_ShaikhHamdullahBasicVolt.ttf') format('truetype');
    font-weight: normal; font-style: normal; font-display: swap;
}

/* --- YÖNETİM PANELİ (BURADAKİ HER ŞEY SİSTEMİ DEĞİŞTİRİR) --- */
#tecvid-interaktif-scope {
    /* ==== GRUP 1: GENEL RENKLER ==== */
    --primary-color: #A5C0DD;        /* Sitenin ana vurgu rengi (Açık Mavi) */
    --secondary-color: #A84448;      /* İkincil vurgu rengi (Kiremit) */
    --text-color: #000000;           /* Genel yazı rengi */
    --page-bg: transparent;          /* Sayfa arka planı (Elementor'u gösterir) */
    --page-padding: 10px;            /* Gölge kesilmemesi için kenar boşluğu */
    --main-font: 'Segoe UI', Tahoma, sans-serif; /* Genel yazı tipi */
    --transition-speed: 0.3s;        /* Animasyonların hızı */

    /* ==== GRUP 2: ANA ÇERÇEVE ==== */
    --main-bg: rgba(255, 255, 255, 1);   /* Kutunun arka planı */
    --main-border: none;                  /* Dış kenarlık (Yok) */
    --main-radius: 17px;                  /* Köşelerin yuvarlaklığı */
    --main-shadow: 0 4px 15px rgba(0,0,0,0.05);                  /* Gölge */
    --container-width: 1200px;            /* İçeriğin maksimum genişliği */
    --container-padding: 20px;            /* İç kenar boşluğu */
    --layout-gap: 20px;                   /* Video ile Soru alanı arasındaki boşluk */

    /* ==== GRUP 3: BAŞLIK KUTUSU (Sol Üst) ==== */
    --header-bg: rgba(255, 255, 255, 1); /* Yarı şeffaf beyaz */
    --header-border: 1px solid #f8f8f8;    /* Başlık kenarlığı */
    --header-radius: 12px;                 /* Başlık köşe yuvarlaklığı */
    --header-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Belirgin gölge */
    --header-padding: 15px;                /* Başlık iç boşluğu */
    --header-left-bar-width: 2px;          /* Sol taraftaki renkli çizgi */
    --header-box-margin-bottom: 20px;      /* Video ile arasındaki mesafe */
    
    /* Başlık Yazı Detayları */
    --header-text-color: #547792;          /* "Yükleniyor" yazısının rengi */
    --header-text-size: 1rem;              /* Yazı boyutu */
    --header-text-weight: 500;             /* Yazı kalınlığı */
    --header-gap: 12px;                    /* İkon ile yazı arası mesafe */

    /* ==== GRUP 4: VİDEO ALANI ==== */
    --video-wrapper-bg: #000;              /* Video yüklenmeden önceki arka plan */
    --video-radius: 12px;                  /* Videonun köşe yuvarlaklığı */
    --video-border: 0px solid #000;        /* Video kenarlığı */
    --video-shadow: 0 4px 15px rgba(0,0,0,0.15); /* Video gölgesi */
    --video-margin-bottom: 12px;           /* Altındaki çubukla olan mesafe */

    /* ==== GRUP 5: İLERLEME ÇUBUĞU ==== */
    --prog-box-bg: rgba(255, 255, 255, 0.5);                /* Çubuk kutusu zemin (Solid Gri) */
    --prog-box-padding: 8px 15px;          /* Çubuk kutusunun iç boşluğu */
    --prog-box-radius: 30px;               /* Çubuk kutusunun yuvarlaklığı */
    --prog-track-bg: #e0e0e0;              /* Gri yolun rengi (Solid) */
    --prog-bar-height: 8px;                /* Çubuğun kalınlığı */
    --prog-bar-radius: 10px;               /* Çubuğun köşe yuvarlaklığı */
    --prog-text-size: 0.85rem;             /* %0 yazısının boyutu */
    --prog-text-weight: 700;               /* %0 yazısının kalınlığı */
    --prog-text-color: #A84448;            /* %0 yazısının rengi */

    /* ==== GRUP 6: MATERYAL BUTONLARI ==== */
    --mat-bar-margin-top: 15px;            /* Video ile butonlar arası mesafe */
    --mat-btn-size: 42px;                  /* Butonların boyutu (En/Boy) */
    --mat-btn-radius: 50%;                 /* Şekil (50% = Yuvarlak, 8px = Kare) */
    --mat-btn-bg: #ffff;                 /* Buton arka planı (Tam Beyaz) */
    --mat-btn-border: 1px solid #e2e8f0;   /* Buton kenarlığı */
    --mat-btn-color: #64748b;              /* İkon rengi */
    --mat-btn-icon-size: 1.1rem;           /* İkon boyutu */
    --mat-btn-gap: 15px;                   /* Butonlar arası boşluk */
    --mat-btn-hover-move: -3px;            /* Üzerine gelince yukarı zıplama */

    /* ==== GRUP 7: ARAÇ ÇUBUĞU (Sağ Üst) - GÜNCELLENDİ (v9.2) ==== */
    /* Not: Burada sadece değişkenler vardır. CSS kuralları aşağıdadır. */
    
    /* Konum ve Hizalama */
    --tb-margin-top: 10px;        /* Yukarı çekme payı (Negatif değer yukarı çeker) */
    --tb-margin-bottom: -10px;     /* Aşağı çekme payı */
    --tb-gap: 10px;                /* Butonlar arası boşluk */
    --tb-alignment: flex-end;      /* [YENİ] Hizalama: flex-end (Sağ), center (Orta), flex-start (Sol) */
    --tb-z-index: 2;               /* [YENİ] Katman Sırası (Header üstüne çıkmaması için düşürüldü) */
    
    /* Görünüm */
    --tb-btn-width: 40px;          /* Buton Genişliği */
    --tb-btn-height: 30px;         /* Buton Yüksekliği */
    --tb-btn-radius: 6px;          /* Yuvarlaklık */
    --tb-btn-bg: #ffff;            /* Arka Plan */
    --tb-btn-border: 1px solid #E4DCCF; /* Kenarlık */
    --tb-btn-color: #A84448;       /* İkon Rengi */
    
    /* İkon Ayarları */
    --tb-icon-size: 0.9rem;        /* İkon Boyutu */
    --tb-icon-weight: 900;         /* Kalınlık (900: Kalın, 400: İnce) */
    
    /* Hover */
    --tb-hover-bg: #fdf5e6;        /* Hover Rengi */
    --tb-hover-scale: 1.05;        /* Hover Efekti */

    /* ==== GRUP 8: SORU PANELİ (Kutu) ==== */
    --qpanel-bg: rgba(255, 255, 255, 0.8);                  /* Soru kutusu arka planı */
    --qpanel-border: 1px solid #f0f0f0;    /* Soru kutusu kenarlığı */
    --qpanel-radius: 17px;                 /* Köşe yuvarlaklığı */
    --qpanel-shadow: 0 2px 15px rgba(0,0,0,0.03); /* Gölge */
    --qpanel-min-height: 550px;            /* Minimum yükseklik */
    --qpanel-padding: 25px;                /* İç boşluk */

    /* Üst Bilgi (Puan Rozeti Alanı) */
    --qheader-padding: 11px 15px;          /* Üst alan boşluğu */
    --qheader-bg: #F5F5F5;                 /* Üst alan arka planı (Solid Gri) */
    --qheader-border-bottom: 1px solid #eeee; /* Alt çizgi */
    
    /* Puan Rozeti */
    --badge-bg: #FFFDE1;                   /* Rozet arka planı (Sarımtırak #fff9db) */
    --badge-color: #1B3C53;                /* Rozet yazı rengi #b7950b */
    --badge-border: 1px solid #f9e79f;     /* Rozet kenarlığı */
    --badge-radius: 30px;                  /* Rozet yuvarlaklığı */
    --badge-font-size: 0.9rem;             /* Rozet yazı boyutu */
    --badge-padding: 8px 16px;             /* Rozet iç boşluğu */

    /* ==== GRUP 9: SORU İÇERİĞİ (Yazılar) ==== */
    --question-text-color: #222831;        /* Soru metni rengi */
    --question-text-size: 1.4rem;          /* Soru metni boyutu */
    --question-text-weight: 500;           /* Soru metni kalınlığı */
    --question-line-height: 1.4;           /* Satır aralığı */
    --question-margin-bottom: 20px;        /* Şıklarla olan mesafe */
    
    /* Arapça Yazı Ayarları */
    --arabic-text-color: #CC561E;          /* Arapça metin rengi (Turuncu/Kiremit) */
    --arabic-text-size: 1.3em;             /* Arapça yazı büyüklüğü */

    /* ==== GRUP 10: SEÇENEKLER (Şıklar) ==== */
    --option-bg: #ffff;                 /* Şık kutusu arka planı */
    --option-border: 1px solid #e5e7eb;    /* Şık kenarlığı (Solid Gri) */
    --option-radius: 10px;                 /* Köşe yuvarlaklığı */
    --option-padding: 14px 10px;           /* İç boşluk */
    --option-margin-bottom: 10px;          /* Şıklar arası boşluk */
    --option-text-color: #222831;          /* Şık yazı rengi */
    --option-text-size: 1rem;              /* Şık yazı boyutu */
    --option-text-weight: 400;             /* Şık yazı kalınlığı */
    --option-min-height: 50px;             /* Minimum yükseklik */
    
    /* Hover Durumu */
    --option-hover-bg: #f8fafc;            /* Üzerine gelince arka plan (Solid) */
    --option-hover-border: #A5C0DD;        /* Üzerine gelince kenarlık */
    --option-hover-text: #A5C0DD;          /* Üzerine gelince yazı rengi */

    /* Doğru Cevap Vurgusu */
    --option-correct-bg: #ecfdf5;          /* Yeşil zemin (Solid) */
    --option-correct-border: #27ae60;      /* Yeşil kenarlık */
    --option-correct-text: #27ae60;        /* Yeşil yazı */

    /* ==== GRUP 11: BUTONLAR (Devam Et vb.) ==== */
    --action-btn-height: 45px;             /* Buton yüksekliği */
    --action-btn-radius: 8px;              /* Köşe yuvarlaklığı */
    --action-btn-font-size: 1rem;          /* Yazı boyutu */
    --action-btn-weight: 500;              /* Yazı kalınlığı */
    --action-btn-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Gölge */
    --action-btn-hover-opacity: 0.9;       /* Hover şeffaflığı */
    --action-btn-hover-move: -2px;         /* Hover zıplaması */
    
    /* Özel Buton Renkleri (HEPSİ SOLID) */
    --btn-start-bg: #6D94C5;               /* Başla butonu (Mavi 78B3CE) */
    --btn-success-bg: #27ae60;             /* Başarılı butonu (Yeşil) */
    --btn-retry-bg: #A5C0DD;               /* Tekrar butonu (Mor) */
    --btn-skip-bg: #95a5a6;                /* Atla butonu (Gri) */
    --btn-fail-bg: #e74c3c;                /* Hata butonu (Kırmızı) */
    --btn-rapid-bg: #9b59b6;               /* Hızlı mod butonu (Lila) */
    
    /* [EKLENDİ] Navigasyon Butonları Hover (Root Entegreli) */
    --nav-prev-hover-bg: #f0f7ff;          /* Önceki Ders (Çok Açık Mavi) */
    --nav-next-hover-bg: #fff5f5;          /* Sonraki Ders (Çok Açık Kırmızı) */

    /* ==== GRUP 12: BİLGİ KUTULARI (Feedback) ==== */
    --exp-box-bg: #f8f9fa;                 /* Kutucuk arka planı (Solid) */
    --exp-box-border-left: 4px solid #bdc3c7; /* Sol çizgi */
    --exp-box-padding: 15px;               /* İç boşluk */
    --exp-text-size: 0.9rem;               /* Açıklama yazı boyutu */
    --exp-text-color: #2C2C2C;             /* Açıklama yazı rengi */
    --exp-label-color: #176B87;            /* "Bilgi Notu" başlık rengi */
    --exp-label-size: 0.75rem;             /* Başlık boyutu */

    /* ==== GRUP 13: NAVİGASYON (Alt Bar soru numarası alanı) ==== */
    --navbar-bg: #ffff;                  /* Bar arka planı */
    --navbar-height: 50px;                 /* Bar yüksekliği */
    --navbar-border-top: 1px solid #eeee; /* Üst çizgi (Solid) */
    --navbar-side-padding: 11px;            /* Kenar payı */
    
    /* Soru Numaraları (Yuvarlaklar) */
    --dot-size: 25px;                    /* Daire çapı ve yüksekliği */
    --dot-gap: 10px;                    /* Numaralar arası mesafe */
    --dot-radius: 50%;                    /* Tam yuvarlak */
    --dot-bg-default: #f0f2f5;             /* Pasif arka plan */
    --dot-color-default: #95a5a6;          /* Pasif yazı rengi */
    --dot-bg-correct: #27ae60;             /* Doğru Cevap Zemini */
    --dot-bg-wrong: #e74c3c;               /* Yanlış Cevap Zemini */
    --dot-color-active: #ffff;           /* Aktif/Çözülmüş Yazı Rengi */
    --dot-font-size: 0.85rem;              /* Numara boyutu */
    --dot-active-border: 2px solid #f1c40f; /* Aktifken sarı çerçeve */
    --dot-active-scale: 1.41;              /* Aktifken büyüme oranı */

    /* ==== GRUP 14: DERS NOTLARI (Alt Kartlar) === */
    --notes-container-bg: rgba(255, 255, 255, 0.5); /* Yarı şeffaf beyaz */
    --notes-container-border: 1px solid #eeee;    /* Ana kutu kenarlığı */
    --notes-container-radius: 16px;        /* Ana kutu köşeleri */
    --notes-container-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Gölge */
    --notes-padding: 30px;                 /* İç boşluk */
    --notes-header-margin-bottom: 25px; /* Ana Başlık ile Ders notları kartları arasındaki mesafe */
    --card-title-margin-bottom: 10px;   /* Alt karttaki Başlık ile metin arasındaki boşluk */
    
    /* Başlık */
    --notes-head-title-color: #243642;     /* "Ders Notları" başlık rengi */
    --notes-head-title-size: 1.4rem;       /* Başlık boyutu */
    --notes-head-desc-color: #2C3333;      /* Açıklama yazı rengi */
    --notes-head-desc-size: 0.95rem;       /* Açıklama boyutu */
    
    /* Not Kartları */
    --card-bg: rgba(255, 255, 255, 1);                    /* Kart arka planı */
    --card-radius: 12px;                   /* Kart köşeleri */
    --card-border: 1px solid #eeee;      /* Kart kenarlığı (Solid) */
    --card-shadow-hover: 0 5px 15px rgba(0,0,0,0.05); /* Hover gölgesi */
    --card-margin-bottom: 18px;            /* Kartlar arası boşluk */
    --card-padding: 22px;                  /* Kart içi boşluk */
    
    /* Süre Butonu (Play) */
    --card-btn-bg: #5C93C4;                /* Buton rengi (Ana renk) */
    --card-btn-text: #ffff;                /* Buton yazı rengi */
    --card-btn-padding: 6px 10px;          /* Buton boşlukları */
    --card-btn-radius: 25px;                /* Buton köşeleri */
    --card-btn-size: 0.8rem;               /* Yazı boyutu */
    
    /* Kart İçeriği - Ders Notu Alt Başlık ve Açıklama */
    --card-title-color: #A27B5C;           /* Konu başlığı rengi */
    --card-title-size: 1.05rem;            /* Konu başlığı boyutu */
    --card-title-weight: 600;              /* Konu başlığı kalınlığı */
    
    --card-text-color: #393E46;            /* İçerik yazı rengi */
    --card-text-size: 0.95rem;             /* İçerik boyutu */
    --card-text-weight: 400;               /* İçerik kalınlığı */
    --card-line-height: 1.8;               /* Satır aralığı */

    /* ==== GRUP 15: SERTİFİKA ==== */
    --cert-bg-gradient-1: #ffff;         /* Gradyan başlangıç */
    --cert-bg-gradient-2: #fdfbf7;         /* Gradyan bitiş */
    --cert-border-color: #D4AF37;          /* Altın çerçeve */
    --cert-border-width: 3px;              /* Çerçeve kalınlığı */
    --cert-border-style: double;           /* Çerçeve tipi */
    --cert-radius: 12px;                   /* Köşe yuvarlaklığı */
    --cert-padding: 30px;                  /* İç boşluk */
    --cert-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Gölge */
    
    /* Fontlar ve Yazılar */
    --cert-logo-size: 2.5rem;              /* Logo boyutu */
    --cert-title-font: 'Times New Roman', serif; /* Başlık fontu */
    --cert-title-size: 1.8rem;             /* Başlık boyutu */
    --cert-lesson-title-color: #78B3CE;    /* Konu başlığı rengi (Pastel Mavi) */
    --cert-name-font: 'Great Vibes', cursive;    /* İsim fontu (El yazısı) */
    --cert-name-size: 2.8rem;              /* İsim boyutu */
    --cert-input-bg: #f9f9f9;              /* İsim kutusu rengi (Solid) */
    --cert-input-border: 1px solid #ddd;   /* İsim kutusu kenarlığı */
    --cert-source-color: #9999;          /* Web sitesi rengi (Gri) */
    --cert-source-size: 0.85rem;           /* Web sitesi boyutu (Küçük) */

    /* ==== GRUP 16: QR MODAL (Popup) ==== */
    --qr-overlay-bg: rgba(0, 0, 0, 0.6);   /* Arka plan karartması */
    --qr-box-bg: #ffff;                  /* Kutu rengi (Tam Beyaz) */
    --qr-box-border: 1px solid #cccc;    /* Kutu kenarlığı */
    --qr-box-shadow: 0 20px 50px rgba(0,0,0,0.3); /* Kutu gölgesi */
    --qr-box-radius: 20px;                 /* Kutu köşeleri */
    --qr-box-width: 320px;                 /* Kutu genişliği */
    --qr-margin-top: 100px;                /* Yukarıdan mesafe (Videonun üstü) */
}

/* --- KARANLIK MOD (Sadece Değişen Renkler) --- */
#tecvid-interaktif-scope[data-theme="dark"] {
    --page-bg: transparent;
    --text-color: #cbd5e1;
    --secondary-color: #f1f5f9;
    
    /* Renk Değişimleri (Hepsi Solid) */
    --main-bg: transparent;
    --main-border: none;
    --header-bg: #1e293b; 
    --header-border: 1px solid #334155; 
    --header-text-color: #f1f5f9;
    
    /* [KOYU MOD FİX] Soru Alanı Üst Başlık */
    --qheader-bg: rgba(255,255,255,0.03); 
    --qheader-border-bottom: 1px solid #334155;
    
    --qpanel-bg: #1e293b; 
    --qpanel-border: 1px solid #334155;
    --navbar-bg: #1e293b; 
    --navbar-border-top: 1px solid #334155;
    --question-text-color: #f1f5f9;
    --option-bg: #1e293b; 
    --option-border: 1px solid #334155; 
    --option-text-color: #cbd5e1;
    --option-hover-bg: #2d3748;
    
    /* [KOYU MOD FİX] Ders Notları Alanı */
    --notes-container-bg: #1e293b; 
    --notes-container-border: 1px solid #334155;
    --notes-head-title-color: #f1f5f9;
    --notes-head-desc-color: #94a3b8; 
    
    /* [KOYU MOD FİX] Not Kartları */
    --note-card-bg: #334155; 
    --card-bg: #334155; /* Variable adı fix */
    --card-border: 1px solid #475569;
    --card-title-color: #f1f5f9; 
    --card-text-color: #cbd5e1; 
    
    --score-bg: #334155; 
    --badge-border: 1px solid #b7950b; 
    --badge-color: #f1c40f;
    --exp-box-bg: #334155; 
    --exp-text-color: #cbd5e1;
    
    --cert-bg-gradient-1: #1e293b; 
    --cert-bg-gradient-2: #0f172a;
    --cert-input-bg: #2d3748; 
    --cert-input-border: 1px solid #4a5568;
    --cert-lesson-title-color: #A5C0DD;
    
    --qr-box-bg: #1e293b;
    --qr-box-border: 1px solid #334155;
    
    /* Butonlar için koyu mod uyumu */
    --btn-skip-bg: #475569;
    --mat-btn-bg: #334155;
    --mat-btn-border: 1px solid #475569;
    --mat-btn-color: #e2e8f0;
    --tb-btn-bg: #334155;
    --tb-btn-border: 1px solid #475569;
    --tb-hover-bg: #475569;
    
    /* [EKLENDİ] Koyu Modda Navigasyon Hover Rengi */
    --nav-prev-hover-bg: rgba(165, 192, 221, 0.1); 
    --nav-next-hover-bg: rgba(168, 68, 72, 0.1);
    
    --arabic-text-color: #FFB74D;
}

/* [GLOBAL KOYU MOD DESTEĞİ] Tüm Sayfa Arka Planı */
body[data-theme="dark"] {
    background-color: #0f172a !important; /* Tüm sayfa arka planı koyu lacivert */
    color: #cbd5e1 !important;
}

/* --- SİSTEM CSS (DOKUNMAYIN - SADECE YUKARIDAKİ DEĞİŞKENLERİ KULLANIR) --- */
/* Arapça Font Fix */
#tecvid-interaktif-scope .ar { 
    font-family: 'ShaikhHamdullah', sans-serif !important; 
    font-size: var(--arabic-text-size); 
    color: var(--arabic-text-color) !important; 
    line-height: 1.2; 
    direction: rtl; 
    display: inline-block; 
}

#tecvid-interaktif-scope { 
    background-color: var(--page-bg) !important; 
    margin: 0; 
    padding: var(--page-padding); 
    font-family: var(--main-font); 
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

/* YAPI ELEMANLARI (GÜNCELLENDİ - ARAÇ ÇUBUĞU BURADA) */

/* 1. Araç Çubuğu Konumlandırma */
#tecvid-interaktif-scope .toolbar { 
    width: 100%; 
    display: flex; 
    justify-content: var(--tb-alignment); /* [YENİ] Değişkenden hizalama */
    gap: var(--tb-gap); 
    
    /* Konum Düzeltmeleri */
    margin-top: var(--tb-margin-top) !important;       
    margin-bottom: var(--tb-margin-bottom) !important; 
    padding-right: 5px !important;
    z-index: var(--tb-z-index); /* [YENİ] Z-Index kontrolü */
}

/* 2. Buton Stilleri (Font Awesome Fix) */
#tecvid-interaktif-scope .tool-btn { 
    background: var(--tb-btn-bg); 
    border: var(--tb-btn-border); 
    color: var(--tb-btn-color); 
    width: var(--tb-btn-width); 
    height: var(--tb-btn-height); 
    
    display: flex; 
    align-items: center; 
    justify-content: center; 
    
    border-radius: var(--tb-btn-radius); 
    cursor: pointer; 
    transition: all 0.3s; 
    padding: 0; 
    opacity: 0.8;
    
    /* İkon Boyutunu Buradan Alır */
    font-size: var(--tb-icon-size); 
}

/* 3. İkon İnce Ayarları */
#tecvid-interaktif-scope .tool-btn i {
    display: inline-block;
    font-size: inherit;
    color: inherit;
    font-weight: var(--tb-icon-weight) !important;
    pointer-events: none;
}

/* 4. Eklenti Koruması (Anti-Override) */
#tecvid-interaktif-scope .tool-btn svg:not(.fa-moon):not(.fa-expand) {
    display: none !important;
}

/* 5. Hover Efekti */
#tecvid-interaktif-scope .tool-btn:hover { 
    opacity: 1; 
    transform: scale(var(--tb-hover-scale)); 
    background: var(--tb-hover-bg); 
}

/* --- DİĞER YAPI ELEMANLARI --- */
#tecvid-interaktif-scope #interactive-video-wrapper { display: flex; flex-wrap: wrap; gap: var(--layout-gap); background: var(--main-bg); border-radius: var(--main-radius); box-shadow: var(--main-shadow); border: var(--main-border); padding: var(--container-padding); position: relative; max-width: var(--container-width); margin: 20px auto 0 auto; transition: all 0.3s; }
#tecvid-interaktif-scope #interactive-video-wrapper.fullscreen { max-width: 100%; width: 100%; height: 100vh; margin: 0; border-radius: 0; padding: 40px; box-sizing: border-box; overflow-y: auto; z-index: 9999; background-color: #ffff; }
#tecvid-interaktif-scope[data-theme="dark"] #interactive-video-wrapper.fullscreen { background-color: #1e293b; }
#tecvid-interaktif-scope .left-column { flex: 2; min-width: 300px; display: flex; flex-direction: column; gap: var(--element-gap); }

/* BAŞLIK KUTUSU */
#tecvid-interaktif-scope .header-box { background: var(--header-bg); padding: var(--header-padding); border-radius: var(--header-radius); box-shadow: var(--header-shadow); border: var(--header-border); border-left: var(--header-left-bar-width) solid var(--primary-color); display: flex; align-items: center; gap: var(--header-gap); font-weight: var(--header-text-weight); color: var(--header-text-color); font-size: var(--header-text-size); transition: all 0.3s; margin-bottom: var(--header-box-margin-bottom); }
#tecvid-interaktif-scope .header-box.retry-mode { border-left-color: var(--warning-color) !important; background-color: #fff8e1; color: #b7950b; }
#tecvid-interaktif-scope[data-theme="dark"] .header-box.retry-mode { background-color: #3e2046; color: #fff; }

#tecvid-interaktif-scope .video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; background: var(--video-wrapper-bg); border-radius: var(--video-radius); box-shadow: var(--video-shadow); border: var(--video-border); overflow: hidden; margin-bottom: var(--video-margin-bottom); }
#tecvid-interaktif-scope .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#tecvid-interaktif-scope .progress-bar-area { display: flex; align-items: center; gap: 10px; background: var(--prog-box-bg); padding: var(--prog-box-padding); border-radius: var(--prog-box-radius); font-size: var(--prog-text-size); color: var(--secondary-color); }
#tecvid-interaktif-scope .progress-track { flex-grow: 1; height: var(--prog-bar-height); background: var(--prog-track-bg); border-radius: var(--prog-bar-radius); overflow: hidden; }
#tecvid-interaktif-scope .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary-color), #2980b9); transition: width 0.2s linear; }
#tecvid-interaktif-scope #percent-text { font-weight: var(--prog-text-weight); color: var(--prog-text-color); }

/* [GÜNCELLENDİ] MATERIAL BAR (Space-Between) */
#tecvid-interaktif-scope .material-bar { 
    display: flex; 
    justify-content: space-between; /* İki yana yasla */
    align-items: center; 
    margin-top: var(--mat-bar-margin-top); 
    padding-left: 5px; 
}
/* Gruplama için sınıflar */
#tecvid-interaktif-scope .mat-group { display: flex; gap: var(--mat-btn-gap); }

#tecvid-interaktif-scope .material-btn { width: var(--mat-btn-size); height: var(--mat-btn-size); border-radius: var(--mat-btn-radius); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s; font-size: var(--mat-btn-icon-size); background: var(--mat-btn-bg); border: var(--mat-btn-border); color: var(--mat-btn-color); backdrop-filter: blur(4px); cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
#tecvid-interaktif-scope .material-btn:hover { transform: translateY(var(--mat-btn-hover-move)); box-shadow: 0 8px 15px rgba(0,0,0,0.1); }
#tecvid-interaktif-scope .btn-youtube:hover { color: #ef4444; border-color: #fecaca; background: #fef2f2; }
#tecvid-interaktif-scope .btn-pdf:hover { color: #f97316; border-color: #fed7aa; background: #fff7ed; }
#tecvid-interaktif-scope .btn-qrcode:hover { color: #334155; border-color: #cbd5e1; background: #f1f5f9; }

/* [GÜNCELLENDİ] Navigasyon Butonları Hover (Root'a Bağlandı) */
#tecvid-interaktif-scope .btn-prev-lesson:hover { color: var(--primary-color); border-color: var(--primary-color); background: var(--nav-prev-hover-bg); }
#tecvid-interaktif-scope .btn-next-lesson:hover { color: var(--secondary-color); border-color: var(--secondary-color); background: var(--nav-next-hover-bg); }

#tecvid-interaktif-scope[data-theme="dark"] .btn-youtube:hover { background: rgba(239, 68, 68, 0.15); border-color: #ef4444; color: #ef4444; }
#tecvid-interaktif-scope[data-theme="dark"] .btn-pdf:hover { background: rgba(249, 115, 22, 0.15); border-color: #f97316; color: #f97316; }
#tecvid-interaktif-scope[data-theme="dark"] .btn-qrcode:hover { background: rgba(255, 255, 255, 0.15); border-color: #fff; color: #fff; }

#tecvid-interaktif-scope .qr-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--qr-overlay-bg); backdrop-filter: blur(4px); z-index: 20000; align-items: flex-start; justify-content: center; }
#tecvid-interaktif-scope .qr-modal-content { background: var(--qr-box-bg); padding: 30px; border-radius: var(--qr-box-radius); text-align: center; position: relative; max-width: 90%; width: var(--qr-box-width); border: var(--qr-box-border); box-shadow: var(--qr-box-shadow); margin-top: var(--qr-margin-top); animation: popIn 0.3s ease-out; }
@keyframes popIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
#tecvid-interaktif-scope .qr-modal-close { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; color: var(--fail-color); width: 32px; height: 32px; background: rgba(0,0,0,0.05); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
#tecvid-interaktif-scope .qr-modal-close:hover { background: var(--fail-color); color: white; transform: rotate(90deg); }
#tecvid-interaktif-scope .qr-modal-img { max-width: 200px; height: auto; display: block; margin: 15px auto; border-radius: 0; box-shadow: none; border: none; background: transparent; }

/* Question Panel */
#tecvid-interaktif-scope .question-panel { flex: 1; min-width: 320px; background: var(--qpanel-bg); border-radius: var(--qpanel-radius); box-shadow: var(--qpanel-shadow); border: var(--qpanel-border); display: flex; flex-direction: column; min-height: var(--qpanel-min-height); position: relative; overflow: hidden; }
#tecvid-interaktif-scope .panel-header { padding: var(--qheader-padding); background: var(--qheader-bg); border-bottom: var(--qheader-border-bottom); display: flex; justify-content: center; align-items: center; gap: 15px; }
#tecvid-interaktif-scope .score-badge { background: var(--badge-bg); color: var(--badge-color); border: var(--badge-border); padding: var(--badge-padding); border-radius: var(--badge-radius); font-size: var(--badge-font-size); display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
#tecvid-interaktif-scope .manual-reset-btn { background: transparent; border: none; cursor: pointer; font-size: 1.6rem; color: #95a5a6; padding: 5px; transition: all 0.3s; }
#tecvid-interaktif-scope .manual-reset-btn:hover { color: var(--fail-color); transform: scale(1.2); }
#tecvid-interaktif-scope .panel-body { padding: var(--qpanel-padding); flex-grow: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; position: relative; padding-bottom: 70px; overflow-y: auto; color: var(--text-color); }
#tecvid-interaktif-scope #view-question h3#q-text { color: var(--question-text-color) !important; font-size: var(--question-text-size); font-weight: var(--question-text-weight); line-height: var(--question-line-height); margin-bottom: var(--question-margin-bottom); }

#tecvid-interaktif-scope .q-nav-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: var(--navbar-height); background: var(--navbar-bg); display: flex; align-items: center; justify-content: flex-start; gap: var(--dot-gap); padding: 0 var(--navbar-side-padding); box-sizing: border-box; z-index: 1; box-shadow: 0 -4px 20px rgba(0,0,0,0.02); border-top: var(--navbar-border-top); overflow-x: auto; }
#tecvid-interaktif-scope .q-nav-bar::-webkit-scrollbar { display: none; }
#tecvid-interaktif-scope .q-nav-bar { -ms-overflow-style: none; scrollbar-width: none; }

#tecvid-interaktif-scope .q-dot { width: var(--dot-size); height: var(--dot-size); flex-shrink: 0; border-radius: var(--dot-radius); background: var(--dot-bg-default); color: var(--dot-color-default); font-size: var(--dot-font-size); font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: not-allowed; transition: all 0.2s; position: relative; }
#tecvid-interaktif-scope .q-dot.correct { background: var(--dot-bg-correct) !important; color: var(--dot-color-active) !important; cursor: pointer; }
#tecvid-interaktif-scope .q-dot.wrong { background: var(--dot-bg-wrong) !important; color: var(--dot-color-active) !important; cursor: pointer; }
#tecvid-interaktif-scope .q-dot.active-q { transform: scale(var(--dot-active-scale)); border: var(--dot-active-border); background: var(--qpanel-bg); color: var(--secondary-color); font-weight: 800; z-index: 2; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
#tecvid-interaktif-scope .q-dot.correct.active-q { border-color: var(--gold-color); background: var(--dot-bg-correct); color:white; }
#tecvid-interaktif-scope .q-dot.wrong.active-q { border-color: var(--gold-color); background: var(--dot-bg-wrong); color:white; }
#tecvid-interaktif-scope .q-dot:hover { transform: translateY(-3px); }
#tecvid-interaktif-scope .q-dot[data-title]:hover::after { content: attr(data-title); position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); background: var(--secondary-color); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; white-space: nowrap; pointer-events: none; opacity: 1; z-index: 5; }

#tecvid-interaktif-scope .view-section { display: none; width: 100%; animation: fadeEffect 0.4s; }
#tecvid-interaktif-scope .view-section.active { display: block; }
@keyframes fadeEffect { from {opacity: 0; transform: translateY(10px);} to {opacity: 1; transform: translateY(0);} }

#tecvid-interaktif-scope .option-btn { background: var(--option-bg); border: var(--option-border); padding: var(--option-padding); border-radius: var(--option-radius); margin-bottom: var(--option-margin-bottom); cursor: pointer; width: 100%; display: flex; align-items: center; text-align: left; font-size: var(--option-text-size); font-weight: var(--option-text-weight); color: var(--option-text-color); transition: all 0.3s; line-height: 1.4; min-height: var(--option-min-height); box-shadow: 0 2px 5px rgba(0,0,0,0.02); white-space: normal; height: auto; }
#tecvid-interaktif-scope .option-btn:hover { background: var(--option-hover-bg); border-color: var(--option-hover-border); color: var(--option-hover-text); transform: translateX(2px); }
#tecvid-interaktif-scope .option-btn.disabled { pointer-events: none; opacity: 0.6; }
#tecvid-interaktif-scope .option-btn.correct-highlight { background-color: var(--option-correct-bg); border-color: var(--option-correct-border); color: var(--option-correct-text); font-weight: 500; opacity: 1; }

#tecvid-interaktif-scope .action-btn { width: 100%; padding: 12px; margin-top: 12px; border: none; border-radius: var(--action-btn-radius); cursor: pointer; font-weight: var(--action-btn-weight); color: white; font-size: var(--action-btn-font-size); transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: var(--action-btn-height); box-shadow: var(--action-btn-shadow); }
#tecvid-interaktif-scope .action-btn:active { transform: scale(0.98); box-shadow: none; }
#tecvid-interaktif-scope .action-btn:hover { opacity: var(--action-btn-hover-opacity); transform: translateY(var(--action-btn-hover-move)); box-shadow: 0 6px 15px rgba(0,0,0,0.15); }
#tecvid-interaktif-scope .btn-success-continue { background-color: var(--btn-success-bg); }
#tecvid-interaktif-scope .btn-retry { background-color: var(--btn-retry-bg); }
#tecvid-interaktif-scope .btn-skip { background-color: var(--btn-skip-bg); }
#tecvid-interaktif-scope .btn-fail-reset { background-color: var(--btn-fail-bg); }
#tecvid-interaktif-scope .btn-rapid-mode { background-color: var(--btn-rapid-bg); }
#tecvid-interaktif-scope .btn-rapid-next { background-color: var(--btn-rapid-bg); }
#tecvid-interaktif-scope .btn-start-test { background-color: var(--btn-start-bg); }

#tecvid-interaktif-scope .result-icon { font-size: 3rem; display: block; margin-bottom: 15px; opacity: 0.9; }
#tecvid-interaktif-scope .explanation-box { background-color: var(--exp-box-bg); border-left: var(--exp-box-border-left); padding: var(--exp-box-padding); margin: 15px 0; text-align: left; border-radius: 4px; font-size: var(--exp-text-size); line-height: 1.6; color: var(--exp-text-color); }
#tecvid-interaktif-scope .exp-label { font-weight: 600; color: var(--exp-label-color); display: block; margin-bottom: 5px; font-size: var(--exp-label-size); text-transform: uppercase; letter-spacing: 1px; }

#tecvid-interaktif-scope .certificate-container { border: var(--cert-border-width) var(--cert-border-style) var(--cert-border-color); padding: var(--cert-padding); border-radius: var(--cert-radius); background: linear-gradient(135deg, var(--cert-bg-gradient-1) 0%, var(--cert-bg-gradient-2) 100%); text-align: center; position: relative; margin-top: 10px; box-shadow: var(--cert-shadow); }
#tecvid-interaktif-scope .cert-logo { font-size: var(--cert-logo-size); color: var(--cert-border-color); margin-bottom: 10px; }
#tecvid-interaktif-scope .cert-title { font-family: var(--cert-title-font); font-size: var(--cert-title-size); color: var(--secondary-color); margin: 10px 0; font-weight: bold; letter-spacing: 2px; }
#tecvid-interaktif-scope .cert-lesson-title { color: var(--cert-lesson-title-color); font-weight: 600; display: block; margin-top: 5px; font-size: 1.1em; }
#tecvid-interaktif-scope .cert-name-display { font-family: var(--cert-name-font); font-size: var(--cert-name-size); color: var(--cert-border-color); min-height: 60px; border-bottom: 1px solid var(--cert-border-color); margin: 10px 20px 20px 20px; line-height: 1.2; }
#tecvid-interaktif-scope .name-input { width: 80%; padding: var(--cert-input-padding); border: var(--cert-input-border); border-radius: var(--cert-input-radius); font-size: 1rem; text-align: center; margin-top: 15px; background: var(--cert-input-bg); color: var(--text-color); }
#tecvid-interaktif-scope .print-hint { font-size: 0.75rem; color: #95a5a6; margin-top: 15px; }
#tecvid-interaktif-scope .cert-source { color: var(--cert-source-color); font-size: var(--cert-source-size); margin-top: 20px; display: block; }
#tecvid-interaktif-scope .toast-msg { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(44, 62, 80, 0.95); color: white; padding: 10px 20px; border-radius: 30px; font-size: 0.85rem; z-index: 100001; display: none; animation: slideDown 0.5s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.2); white-space: nowrap; }
@keyframes slideDown { from { top: -50px; opacity: 0; } to { top: 20px; opacity: 1; } }

#tecvid-interaktif-scope #lecture-notes-wrapper { font-family: var(--main-font); background: var(--notes-container-bg); border-radius: var(--notes-container-radius); box-shadow: var(--notes-container-shadow); border: var(--notes-container-border); margin: 30px auto; padding: var(--notes-padding); max-width: var(--container-width); box-sizing: border-box; }
#tecvid-interaktif-scope .notes-header { 
    border-bottom: var(--notes-header-border); 
    padding-bottom: 15px; 
    margin-bottom: var(--notes-header-margin-bottom); /* Artık yukarıdan değişir */
}
#tecvid-interaktif-scope .notes-header h3 { color: var(--notes-head-title-color); margin: 0 0 5px 0; font-size: var(--notes-head-title-size); font-weight: 600; }
#tecvid-interaktif-scope .notes-header p { color: var(--notes-head-desc-color); margin: 0; font-size: var(--notes-head-desc-size); }

#tecvid-interaktif-scope .notes-list { display: flex; flex-direction: column; }
#tecvid-interaktif-scope .note-card { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: var(--card-padding); display: flex; align-items: flex-start; gap: 20px; transition: transform 0.3s; margin-bottom: var(--card-margin-bottom); }
#tecvid-interaktif-scope .note-card:last-child { margin-bottom: 0; }
#tecvid-interaktif-scope .note-card:hover { transform: translateX(5px); box-shadow: var(--card-shadow-hover); border-left: 3px solid var(--primary-color); }
#tecvid-interaktif-scope .time-btn { background: var(--card-btn-bg); color: var(--card-btn-text); padding: var(--card-btn-padding); border-radius: var(--card-btn-radius); font-size: var(--card-btn-size); font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; border: none; margin-top: 3px; }
#tecvid-interaktif-scope .time-btn:hover { opacity: 0.9; }
#tecvid-interaktif-scope .note-content { flex-grow: 1; }
#tecvid-interaktif-scope .note-content h4 { 
    margin: 0 0 var(--card-title-margin-bottom) 0; 
    color: var(--card-title-color); 
    font-size: var(--card-title-size); 
    font-weight: var(--card-title-weight); 
}
#tecvid-interaktif-scope .note-content p { margin: 0; color: var(--card-text-color); font-size: var(--card-text-size); line-height: var(--card-line-height); font-weight: var(--card-text-weight); }

@media (max-width: 768px) {
    #tecvid-interaktif-scope #interactive-video-wrapper { flex-direction: column; padding: 10px; }
    #tecvid-interaktif-scope .note-card { flex-direction: column; gap: 10px; }
    #tecvid-interaktif-scope .time-btn { width: 100%; justify-content: center; }
    #tecvid-interaktif-scope .left-column { min-width: 100%; }
    #tecvid-interaktif-scope .question-panel { min-height: 400px; }
}