*, *::before, *::after {


    box-sizing: border-box;


    margin: 0;


    padding: 0;


}



*, *::before, *::after,


html, body, a, button, input, select, textarea, #enter-screen {


    cursor: none !important; /* Sistem imlecini her yerde gizle */


}



body {


    overflow: hidden;


    height: 100vh;


    color: #e0e0e0;


    background: #000;


    font-family: 'Cinzel', serif;


}



/* --- ÖZEL İMLEÇ --- */


#custom-cursor {


    position: fixed;


    top: 0; left: 0; width: 48px; height: 48px;


    background-image: url('cursor1.png');


    background-size: contain; background-repeat: no-repeat;


    pointer-events: none; z-index: 999999;


    will-change: transform; transform: translate3d(0, 0, 0);


    opacity: 0; transition: opacity 0.5s ease; 


}



#custom-cursor.active { opacity: 1; }


#custom-cursor.landing-cursor {


    background-image: url('cursor3.png');


    width: 16px; height: 16px;


    margin-left: -8px; margin-top: -8px;


}


#custom-cursor.hover {


    background-image: url('cursor2.png') !important;


    width: 48px !important;


    height: 48px !important;


    margin-left: 0 !important;


    margin-top: 0 !important;


}



/* --- GİRİŞ EKRANI (EPİK AÇILIŞ) --- */


#enter-screen {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 100; display: flex;
}

.door {
    position: absolute;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: #050505;
    overflow: hidden;
    z-index: 5;
    transition: transform 1.8s cubic-bezier(0.77, 0, 0.175, 1);
    will-change: transform, clip-path;
}



.left-door {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    border-right: 3px solid #d4af37; /* Altın sarısı kalın düz çizgi */
    box-shadow: 2px 0 15px rgba(212, 175, 55, 0.8); /* Parlama */
}



.right-door {
    clip-path: polygon(100% 0, 50% 0, 50% 100%, 100% 100%);
}



/* YAZILARIN DUVARLA HAREKET ETMESİ İÇİN CSS KURALLARI */


.split-text {
    position: absolute;
    top: 50%; left: 0; width: 100vw;
    transform: translateY(-50%);
    text-align: center;
    color: #d4af37;
    font-size: 32px;
    letter-spacing: 5px;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
    pointer-events: none;
    will-change: opacity, transform;
    
    /* Taşmayı engellemek için */
    white-space: nowrap; 
}



/* Tıklama Tetikleyici Yazı (Başlangıçta birleşik durur) */


#enter-text-trigger {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #d4af37;
    font-size: 32px;
    letter-spacing: 5px;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
    z-index: 10;
    opacity: 1;
    transition: opacity 0.1s ease;
    
    /* Taşmayı engellemek için */
    white-space: nowrap;
}



#enter-text-trigger:hover {


    text-shadow: 0 0 25px rgba(212, 175, 55, 0.8);


}



/* --- ANIMASYON DURUMLARI --- */



/* 1. Tıklanma Alanı Söner */


.trigger-fade { opacity: 0 !important; }



/* 2. Çatlak Efekti (Tam Tamamlayan Poligonlar Belirir) */


.door.crack-left {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}


.door.crack-right {
    clip-path: polygon(100% 0, 50% 0, 50% 100%, 100% 100%);
}



/* 3. Kapılar (ve içindeki yazılar) iki yana açılır (Smooth) */


.door.open-left { transform: translateX(-100%); }


.door.open-right { transform: translateX(100%); }



/* --- ARKA PLAN VE SES --- */


#bg-video {


    position: fixed;


    top: 0; left: 0; width: 100vw; height: 100vh;


    object-fit: cover; z-index: -1;


    filter: brightness(0.35) sepia(0.25) saturate(0.85);


}



.volume-control {


    position: absolute;


    top: 25px; right: 25px;


    background: rgba(10, 10, 10, 0.25); /* Şeffaf */


    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Glassmorphism */


    border: 1px solid rgba(212, 175, 55, 0.15); /* İnce sınır */


    border-radius: 30px; /* Yuvarlak kapsül */


    display: flex; align-items: center; 


    justify-content: center; /* Logonun tam ortalanması için */


    padding: 0; 


    z-index: 10; box-shadow: 0 4px 15px rgba(0,0,0,0.5);


    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Pürüzsüz genişleme */


    width: 44px; height: 44px; /* Kusursuz çember boyutu */


    overflow: hidden;


    white-space: nowrap;


}



.volume-control:hover,


.volume-control:focus-within {


    width: min(226px, calc(100vw - 50px)); /* Genişleme — küçük ekranlarda taşmaz */


    padding: 0 20px 0 16px; /* Sağ tarafa ekstra boşluk eklendi */


    justify-content: flex-start;


    gap: 12px;


    border-color: rgba(212, 175, 55, 0.35);


    background: rgba(10, 10, 10, 0.55);


}



.vol-logo-wrapper {


    width: 28px; height: 28px;


    border-radius: 50%;


    border: 1px solid rgba(212, 175, 55, 0.4);


    display: flex; align-items: center; justify-content: center;


    overflow: hidden;


    flex-shrink: 0;


    cursor: pointer;


    transition: border-color 0.3s ease;


}



.vol-logo {


    width: 100%; height: 100%;


    object-fit: cover;


    object-position: center; /* Resmi tam ortalar */


    opacity: 0.5;


    transition: opacity 0.3s ease, transform 0.3s ease;


    will-change: transform;


}



.volume-control:hover .vol-logo,


.volume-control:focus-within .vol-logo {


    opacity: 1;


}



.vol-logo-wrapper.muted {


    border-color: rgba(212, 175, 55, 0.1) !important;


}



.vol-logo-wrapper.muted .vol-logo {


    opacity: 0.25 !important;


}



.volume-slider-container {


    display: flex; align-items: center; gap: 10px; width: 0px;


    opacity: 0;


    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;


    pointer-events: none;


}



.volume-control:hover .volume-slider-container,


.volume-control:focus-within .volume-slider-container {


    width: 140px; /* Sürgü alanının tam oturması için genişletildi */


    opacity: 1;


    pointer-events: auto;


}



/* --- SES SÜRGÜSÜ (Responsive + Çapraz Tarayıcı + Dikey Ortalanmış) --- */


#volume-slider {


    -webkit-appearance: none; appearance: none;


    flex-grow: 1; width: 100%;


    height: 4px; border-radius: 2px;


    /* Altın dolgu JS tarafından güncellenir; bu varsayılan zemindir */


    background: rgba(255, 255, 255, 0.15);


    outline: none;


    margin: 0;


}


#volume-slider::-webkit-slider-runnable-track {


    height: 4px; border-radius: 2px; background: transparent;


}


#volume-slider::-moz-range-track {


    height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.15);


}


#volume-slider::-moz-range-progress {


    height: 4px; border-radius: 2px; background: #d4af37;


}


#volume-slider::-webkit-slider-thumb {


    -webkit-appearance: none; appearance: none;


    width: 11px; height: 11px;


    margin-top: -3.5px; /* 4px ray üzerinde dikey tam ortalama */


    background: #d4af37; border: none; border-radius: 50%;


    box-shadow: 0 0 6px rgba(212, 175, 55, 0.9);


}


#volume-slider::-moz-range-thumb {


    width: 11px; height: 11px;


    background: #d4af37; border: none; border-radius: 50%;


    box-shadow: 0 0 6px rgba(212, 175, 55, 0.9);


}


#vol-percentage {


    font-size: 10px; min-width: 30px; text-align: right;


    color: #d4af37; opacity: 0.85; font-family: monospace;


    margin-right: 2px; flex-shrink: 0;


}



/* --- MERKEZ PANEL --- */


.panel-container {


    display: flex; justify-content: center; align-items: center;


    height: 100vh; perspective: 2500px;


    opacity: 0; /* Giriş sonrası 'revealed' sınıfı ile belirir */


}


.panel-container.revealed {


    animation: panelRise 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;


}


@keyframes panelRise {


    from { opacity: 0; transform: translateY(34px) scale(0.985); }


    to   { opacity: 1; transform: translateY(0) scale(1); }


}



.panel {
    position: relative;
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.85), rgba(0, 0, 0, 0.95));
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    
    /* İŞTE BU KISIM KAYDIRMAYI (SLIDER'I) VE ALTTAKİ BOŞLUĞU ÇÖZER */
    aspect-ratio: 16 / 9;        /* 16:9 oranını koru */
    width: 90vw;                 
    max-width: 640px;            
    height: auto;
    max-height: 85vh;
    
    /* GICIK SLIDER'I VE TAŞMAYI ENGELLE */
    overflow: hidden;            /* Taşma yaparsa içeriği kaydırma çubuğu göstermeden gizle */
    
    padding: 5vh 3vw;
    text-align: center;
    box-shadow: 0 30px 60px rgba(0,0,0,0.9), inset 0 0 15px rgba(212, 175, 55, 0.05);
    transform-style: preserve-3d;
    transition: box-shadow 0.4s ease;
    will-change: transform;
}



/* İmleci takip eden altın ışık parlaması (gilded sheen) */


.panel-sheen {


    position: absolute; inset: 0;


    border-radius: 6px;


    pointer-events: none;


    z-index: 0;


    opacity: 0;


    transition: opacity 0.5s ease;


    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),


        rgba(212, 175, 55, calc(var(--glare, 0.16) * 1.25)),


        rgba(212, 175, 55, calc(var(--glare, 0.16) * 0.4)) 32%,


        transparent 60%);


    mix-blend-mode: screen;


}


.panel:hover .panel-sheen { opacity: 1; }



/* LOGO BUG'I VE TİTREME KESİN ÇÖZÜM UYGULANDI */


.panel-header {


    display: flex; align-items: center; justify-content: center;


    gap: 20px; margin-bottom: 35px; width: 100%;


    transform: translateZ(40px);


    transform-style: preserve-3d;


}



/* LOGO ÇERÇEVESİ — sabit yuvarlak çerçeve, içindeki arma zoom yapılabilir */


.logo-frame {


    width: 85px; height: 85px; border-radius: 50%;


    border: 2px solid #8a0303;


    box-shadow: 0 0 15px rgba(138, 3, 3, 0.5);


    overflow: hidden;


    flex-shrink: 0;


    /* Titreme/Jitter Önleyici Donanım Hızlandırma */


    transform: translateZ(1px);


    -webkit-transform: translateZ(1px);


    backface-visibility: hidden;


    -webkit-backface-visibility: hidden;


    will-change: transform;


}



.logo {


    width: 100%; height: 100%;


    object-fit: cover; object-position: center;


    display: block;


    transform: scale(1); /* JS, CONFIG.PANEL_LOGO_ZOOM değeriyle günceller */


    transform-origin: center;


    will-change: transform;


    backface-visibility: hidden;


    -webkit-backface-visibility: hidden;


}



.title-area { text-align: left; }


.title { 
    font-size: clamp(18px, 4.5vw, 24px); 
    font-weight: 700; 
    color: #ffffff; 
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9); 
    letter-spacing: 1.5px;
    
    /* İŞTE BU KISIM */
    white-space: nowrap; 
}


.subtitle { 
    font-size: clamp(8px, 2vw, 9px); 
    color: #888; 
    margin-top: 6px; 
    letter-spacing: 2px;
    
    /* İŞTE BU KISIM */
    white-space: nowrap; 
}



/* --- HAÇ MOTİFLİ AYIRICI (Kudüs Haçı teması) --- */


.ornament-divider {


    display: flex; align-items: center; justify-content: center;


    gap: 16px; margin: -16px 0 30px;


    transform: translateZ(30px);


}


.ornament-divider .rule {


    height: 1px; width: clamp(40px, 14vw, 72px);


    background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.55));


}


.ornament-divider .rule:last-child {


    background: linear-gradient(to left, transparent, rgba(212, 175, 55, 0.55));


}


.ornament-divider .cross-mark {


    width: 13px; height: 13px; flex-shrink: 0;


    background:


        linear-gradient(#d4af37, #d4af37) center / 3px 100% no-repeat,


        linear-gradient(#d4af37, #d4af37) center / 100% 3px no-repeat;


    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.6));


}

#typewriter-text {
    font-size: clamp(8px, 2vw, 9px); 
    color: #e0e0e0; /* Yazı rengini biraz açtık daha iyi görünsün */
    margin-top: 6px; 
    letter-spacing: 2px;
    
    display: block;
    width: 100%;
    min-height: 28px;
    text-align: left;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden; /* Taşmaları kesinlikle engelle */
    position: relative;
}

/* İmleç artık metinden bağımsız, hep görünür */
.cursor-style {
    display: inline-block;
    width: 2px;
    height: 10px;
    background-color: #d4af37;
    margin-left: 4px;
    animation: blink 0.75s step-end infinite;
}

@keyframes blink { from, to { opacity: 0 } 50% { opacity: 1 } }

.join-btn {
    position: relative; 
    overflow: hidden;
    width: 100%; 
    padding: 18px; 
    background: #8a0303; 
    color: #fff;
    border: 1px solid #5a0202; 
    
    /* Üst köşeler 0px olsun, alt köşeler 4px (veya kaç istiyorsan) kalsın */
    border-radius: 10px 10px 0 0; 
    
    font-size: 15px; 
    font-weight: bold;
    letter-spacing: 3px; 
    transform: translateZ(45px); 
    text-shadow: 1px 1px 2px black;
    transition: all 0.3s ease;
}


.join-btn::before {


    content: ''; position: absolute; top: 0; left: -140%;


    width: 55%; height: 100%;


    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.28), transparent);


    transform: skewX(-20deg); pointer-events: none;


}



.join-btn:hover { background: #b30000; box-shadow: 0 0 25px rgba(138, 3, 3, 0.7); border-color: #8a0303; }


.join-btn:hover::before { animation: ctaSweep 0.9s ease; }


@keyframes ctaSweep { to { left: 150%; } }


.stats-box {
    background: rgba(0, 0, 0, 0.7); 
    border: 1px solid rgba(212, 175, 55, 0.1);
    padding: 5px; 
    
    /* Üst köşeler 0px kalsın, alt köşeler 5px olsun */
    border-radius: 0 0 10px 10px; 
    
    display: flex; 
    justify-content: space-around;
    margin-bottom: 0px; 
    transform: translateZ(0px);
}



.stat { font-size: 13px; display: flex; align-items: center; gap: 8px; color: #ccc; letter-spacing: 1px; }


.dot { width: 8px; height: 8px; border-radius: 50%; }


.dot.active { background: #d4af37; box-shadow: 0 0 10px #d4af37; }


.dot.total { background: #444; }



.socials {


    margin-top: 35px; display: flex; justify-content: center; gap: 25px;


    transform: translateZ(15px);


}



.socials a { color: #777; text-decoration: none; font-size: 12px; letter-spacing: 2px; transition: 0.3s; }


.socials a:hover { color: #d4af37; text-shadow: 0 0 10px rgba(212, 175, 55, 0.6); }



/* --- ERİŞİLEBİLİRLİK: Klavye Odak Halkası (altın) --- */


.join-btn:focus-visible,


.socials a:focus-visible,


#enter-text-trigger:focus-visible,


#volume-slider:focus-visible,


.vol-logo-wrapper:focus-visible {


    outline: 2px solid #d4af37;


    outline-offset: 3px;


    border-radius: 4px;


}



/* --- DUYARLI (RESPONSIVE) DÜZEN --- */


@media (max-width: 640px) {


    .panel-header { gap: 14px; }


    .logo-frame { width: 70px; height: 70px; }


    .stats-box { padding: 13px; margin-bottom: 28px; }


    .stat { font-size: 12px; }


    .socials { gap: 18px; flex-wrap: wrap; margin-top: 28px; }


    .split-text, #enter-text-trigger {


        font-size: clamp(18px, 6.2vw, 32px);


        letter-spacing: 3px;


        padding: 0 12px;


    }


    .volume-control { top: 16px; right: 16px; }


}



@media (max-width: 380px) {


    .panel-header { flex-direction: column; gap: 12px; }


    .title-area { text-align: center; }


    .ornament-divider { margin-top: 4px; }


    .socials a { font-size: 11px; }


}



/* --- HAREKET AZALTMA TERCİHİNE SAYGI --- */


@media (prefers-reduced-motion: reduce) {


    *, *::before, *::after {


        animation-duration: 0.001ms !important;


        animation-iteration-count: 1 !important;


        transition-duration: 0.001ms !important;


    }


    .panel-container { opacity: 1 !important; }


    .door { transition: none !important; }


}