/* =========================================
   HEADER
========================================= */

body{
    margin:0;
    background:#090909;
    color:#fff;
    font-family:Arial, Helvetica, sans-serif;
}

a{
    text-decoration:none;
}

.container{
    width:96%;
    max-width:1500px;
    margin:auto;
}

/* HEADER */

.majeste-header{

    position:sticky;
    top:0;
    z-index:9999;

    background:rgba(10,10,10,.92);

    backdrop-filter:blur(16px);

    border-bottom:2px solid #D4AF37;

    box-shadow:0 2px 15px rgba(212,175,55,.12);

    transition:.35s;

}

.majeste-navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:85px;

}

/* LOGO */

.logo{

    display:flex;

    align-items:center;

}

.site-logo{

    width:220px;

    height:auto;

    display:block;

    transition:.35s;

}

.site-logo:hover{

    transform:scale(1.03);

}

/* MENU */

.menu{

    display:flex;

    align-items:center;

    gap:38px;

    list-style:none;

    margin:0;

    padding:0;

}

.menu li a{

    color:#fff;

    font-size:15px;

    font-weight:600;

    position:relative;

    transition:.3s;

}

.menu li a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:0;

    height:2px;

    background:#D4AF37;

    transition:.35s;

}

.menu li a:hover{

    color:#D4AF37;

}

.menu li a:hover::after{

    width:100%;

}

/* BUTTONS */

.header-buttons{

    display:flex;

    align-items:center;

    gap:15px;

}

.login-btn{

    padding:11px 24px;

    border:1px solid #D4AF37;

    border-radius:10px;

    color:#fff;

    transition:.35s;

}

.login-btn:hover{

    background:#D4AF37;

    color:#111;

}

.register-btn{

    padding:12px 26px;

    border-radius:10px;

    background:linear-gradient(135deg,#D4AF37,#F4D76A);

    color:#111;

    font-weight:700;

    transition:.35s;

    box-shadow:0 0 18px rgba(212,175,55,.30);

}

.register-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 0 28px rgba(212,175,55,.55);

}

/* MOBİLDE TÜM HEADER ELEMANLARINI GÖSTER */
@media (max-width:768px){

    .majeste-header .container{
        width:94%;
    }

    .majeste-navbar{
        display:flex;
        height:auto;
        min-height:0;
        padding:10px 0 12px;
        align-items:center;
        justify-content:space-between;
        flex-wrap:wrap;
        gap:10px;
    }

    /* Logo solda */
    .logo{
        order:1;
        flex:1 1 auto;
        min-width:0;
    }

    .site-logo{
        width:135px;
        max-width:100%;
    }

    /* Giriş ve kayıt sağda, görünür */
    .header-buttons{
        order:2;
        display:flex;
        flex:0 0 auto;
        gap:7px;
    }

    .login-btn,
    .register-btn{
        padding:9px 10px;
        font-size:11px;
        line-height:1.2;
        white-space:nowrap;
    }

    /* Menü ikinci satırda tam görünür */
    .main-menu{
        order:3;
        display:block;
        flex:0 0 100%;
        width:100%;
    }

    .menu{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:8px;
        flex-wrap:wrap;
        width:100%;
    }

    .menu li a{
        font-size:12px;
        white-space:nowrap;
    }

    .menu li a::after{
        bottom:-5px;
    }
}

/* Çok dar telefonlar */
@media (max-width:390px){

    .site-logo{
        width:120px;
    }

    .login-btn,
    .register-btn{
        padding:8px 8px;
        font-size:10px;
    }

    .menu{
        justify-content:center;
        gap:12px;
    }

    .menu li a{
        font-size:11px;
    }
}