/* ==========================================
   KUR'AN MEKTEBİM MENÜ KONTROL PANELİ
   ========================================== */
:root {
    --banner-arkaplan: linear-gradient(90deg, #016bd3, #C62828); 
    --banner-yazi-rengi: #ffffff; 
    --banner-yazi-boyutu: 15px; 

    --logo-genislik: auto;             
    --logo-yukseklik: 70px;            
    --logo-ust-bosluk: 0px;            
    --logo-alt-bosluk: 0px;            
    --logo-sol-bosluk: 20px;           /* İSTEK: masaüstünde logo-sol mesafesi arttı (0px -> 20px) */
    --logo-sag-bosluk: 0px;            

    --menu-genislik: 1200px;           
    --menu-dis-bosluk: 10px;           
    --menu-ic-bosluk: 7px 30px;       
    
    --cam-arkaplan: rgba(255, 255, 255, 0.55); 
    --cam-blur: blur(16px);          
    --cam-golge: 0 10px 30px rgba(0, 0, 0, 0.2); 
    --cam-border: 1px solid rgba(255, 255, 255, 0.5); 
    --kapsul-ovallik: 50px;           

    --yazi-fontu: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --yazi-rengi: #6D4C41;            
    --yazi-boyutu: 17px;              
    --yazi-kalinligi: 500;             
    --yazi-araligi: 0.6px;             
    --link-arasi-bosluk: 25px;        
    --ayrac-rengi: #C8B2A7;           

    --buton-renk-1: #F9E79F;     
    --buton-renk-2: #C8A96B;     
    --buton-yazi-rengi: #4A3028; 
    --buton-padding: 10px 24px;  
}

.mekteb-master-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 99999; display: flex; flex-direction: column; }

.mekteb-inline-banner { background: var(--banner-arkaplan); color: var(--banner-yazi-rengi); font-family: var(--yazi-fontu); font-size: var(--banner-yazi-boyutu); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 15px; padding: 12px 25px; width: 100%; box-sizing: border-box; box-shadow: 0 2px 10px rgba(0,0,0,0.1); max-height: 150px; overflow: hidden; opacity: 1; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; }
.mekteb-master-header.is-scrolled .mekteb-inline-banner { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border: none; }
.mekteb-inline-banner .badge { background: #fff; color: #016bd3; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.mekteb-inline-banner .banner-text { line-height: 1.4; }
.mekteb-inline-banner a { color: #fff; text-decoration: none; font-weight: 700; background: rgba(255, 255, 255, 0.15); padding: 6px 16px; border-radius: 20px; transition: all 0.3s ease; white-space: nowrap; }
.mekteb-inline-banner a:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }

.mekteb-header-wrapper { width: 100%; padding-top: var(--menu-dis-bosluk); display: flex; justify-content: center; pointer-events: none; transition: padding-top 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.mekteb-master-header.is-scrolled .mekteb-header-wrapper { padding-top: 5px; }

/* İSTEK: position:relative eklendi — mobil açılır menü artık bu kutuya göre
   konumlanıyor (banner açık/kapalı fark etmeksizin her zaman doğru yerde). */
.mekteb-container { pointer-events: auto; position: relative; width: 100%; max-width: var(--menu-genislik); display: flex; align-items: center; justify-content: space-between; padding: var(--menu-ic-bosluk); background: var(--cam-arkaplan); backdrop-filter: var(--cam-blur); -webkit-backdrop-filter: var(--cam-blur); border: var(--cam-border); border-radius: var(--kapsul-ovallik); box-shadow: var(--cam-golge); font-family: var(--yazi-fontu); margin: 0 20px; }

.mekteb-logo { display: flex; align-items: center; margin: var(--logo-ust-bosluk) var(--logo-sag-bosluk) var(--logo-alt-bosluk) var(--logo-sol-bosluk); }
.mekteb-logo img { width: var(--logo-genislik); height: var(--logo-yukseklik); object-fit: contain; }

.mekteb-nav { display: flex; align-items: center; gap: var(--link-arasi-bosluk); }
.mekteb-nav a { color: var(--yazi-rengi); text-decoration: none; font-size: var(--yazi-boyutu); font-weight: var(--yazi-kalinligi); letter-spacing: var(--yazi-araligi); transition: all 0.2s ease; display: flex; align-items: center; position: relative; }
.mekteb-nav a:hover { color: var(--buton-renk-2); }
.mekteb-nav a:not(.son-gorunur-link)::after { content: ""; position: absolute; right: calc( (var(--link-arasi-bosluk) / 2) * -1 ); top: 50%; transform: translateY(-50%); height: 14px; width: 1px; background-color: var(--ayrac-rengi); }

.mekteb-gizli { display: none !important; }
.kalici-gizli { display: none !important; }

.rol-ozel-menu { color: #4A3028 !important; font-weight: 700 !important; background: rgba(109, 76, 65, 0.08); padding: 4px 12px; border-radius: 20px; }

/* İSTEK: masaüstünde "Sisteme Giriş" butonunun sağ mesafesi arttı (5px -> 18px) */
.mekteb-actions { display: flex; align-items: center; margin-right: 18px; position: relative; }

.mekteb-btn { padding: var(--buton-padding); border-radius: 30px; font-size: 0.9rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.mekteb-btn:hover { transform: scale(1.03); }

/* ========================================================
   MİSAFİR AÇILIR MENÜ (PREMİUM TASARIM & HOVER KÖPRÜSÜ)
   ======================================================== */
.dropdown-container { position: relative; display: inline-block; }

.dropdown-content { 
    visibility: hidden;
    opacity: 0;
    position: absolute; 
    top: 100%; right: 0; 
    margin-top: 12px; /* Görsel boşluk (Premium his için) */
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    min-width: 195px; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.12); 
    border-radius: 16px; 
    z-index: 1000; 
    border: 1px solid rgba(0,0,0,0.05); 
    display: flex;
    flex-direction: column;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Farenin menüye geçerken boşlukta kaybolmasını önleyen GÖRÜNMEZ KÖPRÜ */
.dropdown-content::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    height: 15px;
    background: transparent;
}

.dropdown-container:hover .dropdown-content { 
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.dropdown-item { color: var(--text-dark); padding: 14px 18px; text-decoration: none; display: block; font-size: 14px; font-weight: 600; border-bottom: 1px dashed rgba(0,0,0,0.05); transition: background 0.2s; }
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: rgba(0, 180, 219, 0.1); color: #0083B0; }

/* -------------------------------------------------------- */

.btn-guest { background: linear-gradient(135deg, var(--buton-renk-1), var(--buton-renk-2)); color: var(--buton-yazi-rengi) !important; box-shadow: 0 4px 15px rgba(198, 154, 69, 0.3); border: 1px solid rgba(255,255,255,0.4); }

/* Öğrenci 1: Bireysel (Pastel Turkuaz) */
.btn-student-individual { background: linear-gradient(135deg, #00b4db 0%, #0083b0 100%); color: #ffffff !important; box-shadow: 0 4px 15px rgba(0, 180, 219, 0.3); }

/* Öğrenci 2: Gruplu Sınıf Panosu (Koyu Gül/Siyah) */
.btn-student-group { background: linear-gradient(135deg, #ff758c 0%, #3a3a3a 100%); color: #ffffff !important; position: relative; box-shadow: 0 4px 15px rgba(255, 117, 140, 0.4); }

.btn-teacher, .btn-admin { background-color: #4b6584; color: #ffffff !important; }

/* Dinamik Rozet */
.mekteb-badge { position: absolute; top: -6px; right: -6px; background-color: #ff3b30; color: white; font-size: 11px; font-weight: 800; height: 22px; min-width: 22px; border-radius: 11px; display: flex; align-items: center; justify-content: center; border: 2px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 2; }

.btn-logout { background: rgba(255, 59, 48, 0.1); color: #ff3b30 !important; padding: 10px; border-radius: 50%; margin-left: 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 59, 48, 0.2); transition: all 0.2s; }
.btn-logout:hover { background: #ff3b30; color: #fff !important; transform: scale(1.1); box-shadow: 0 4px 10px rgba(255,59,48,0.3); }

.mekteb-mobile-toggle { display: none; font-size: 1.8rem; background: none; border: none; cursor: pointer; color: var(--yazi-rengi); }

@media (max-width: 1024px) {
    /* İSTEK: Masaüstü için eklenen 20px logo-sol mesafesi mobilde alanı
       daraltıyordu. Mobilde bu değişkeni sıfırlıyoruz; masaüstündeki
       20px değeri (yukarıdaki :root) bu breakpoint'in dışında aynen kalır. */
    :root { --logo-sol-bosluk: 0px; }

    .mekteb-inline-banner { flex-direction: column; text-align: center; gap: 10px; padding: 15px; }

    /* ============================================================
       İSTEK: Mobil açılır menü düzeltmeleri
       - top:70px sabit değeri kaldırıldı -> artık .mekteb-container'a
         göre "top:100%" ile konumlanıyor. Banner açık/kapalı ya da
         sayfa kaydırılmış olsa bile menü artık asla üst bara girmiyor.
       - Arkaplan neredeyse tam opak (0.98) yapıldı -> arkadaki
         yazılarla karışma sorunu bitti.
       - Her menü öğesi artık ayrı bir "kart/buton" gibi: yuvarlak
         köşe, hafif arkaplan, basılınca belirgin tepki -> tıklanabilir
         olduğu açıkça belli oluyor (düz yazı gibi durmuyor).
       ============================================================ */
    .mekteb-nav {
        display: none;
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: var(--cam-blur);
        -webkit-backdrop-filter: var(--cam-blur);
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 14px;
        border-radius: 22px;
        box-shadow: var(--cam-golge);
        border: var(--cam-border);
    }
    .mekteb-nav.active { display: flex; }
    .mekteb-nav a:not(.son-gorunur-link)::after { display: none; }
    .mekteb-nav a {
        justify-content: center;
        padding: 14px 18px;
        border-radius: 14px;
        background: rgba(109, 76, 65, 0.05);
    }
    .mekteb-nav a:active { background: rgba(200, 169, 107, 0.3); transform: scale(0.98); }
    .mekteb-mobile-toggle { display: block; }
}