/*==========================================================
    ASAM SAVUNMA TEKNOLOJİ SİSTEMLERİ A.Ş.
    STYLE.CSS
    Version : 1.0
==========================================================*/


/*==========================================================
    GOOGLE FONTS
==========================================================*/

@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700;800&display=swap');


/*==========================================================
    FONT
==========================================================*/

@font-face{
    font-family: 'Champagne';
    src: url('../fonts/ChampagneLimousines.woff2') format('woff2'),
         url('../fonts/ChampagneLimousines.woff') format('woff');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: 'Liomusines';
    src: url('../fonts/Liomusines.woff2') format('woff2'),
         url('../fonts/Liomusines.woff') format('woff');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}


/*==========================================================
    ROOT
==========================================================*/

:root{

    --black:#000000;
    --white:#ffffff;

    --red:#b60018;

    --red-hover:#ffffff;

    --gray:#a7a7a7;

    --glass:rgba(255,255,255,.08);

    --glass-border:rgba(255,255,255,.15);

    --transition:.40s ease;

}

.glass-panel{
    background:transparent !important;
    border:0 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 !important;
}


/*==========================================================
    RESET
==========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    background:transparent;

    color:#fff;

    overflow-x:hidden;

    font-family:'Montserrat','Roboto','Champagne',sans-serif;

}


img{

    display:block;

    max-width:100%;

}


ul{

    list-style:none;

}


a{

    color:inherit;

    text-decoration:none;

}


button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

section{

    position:relative;

    width:100%;

}


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

header{

    position:fixed;

    top:25px;

    height:80px;

    z-index:100000;

    pointer-events:auto;

    backdrop-filter:none;

    background:transparent;

}

header#header:not(.header--logo){
    left:50%;
    transform:translateX(-50%);
    width:min(1087px,70%);
}

header.header--logo{
    left:auto;
    right:10%;
    transform:none;
    width:min(1087px,100%);
    background:none;
    overflow:visible;
}

/* LOGO POSITION LOCKED - DO NOT CHANGE UNTIL USER REQUESTS IT */
header.header--logo::after{
    content:"";
    position:absolute;
    top:1px !important;
    left:calc(15vw - min(1087px,90vw) / 4) !important;
    transform:translate(-50%, -35%) !important;
    width:288px;
    height:288px;
    background:url("../assets/logo/asam_kirmizi_logo.png") no-repeat center/contain;
    z-index:100002;
    pointer-events:none;
}
header.header--logo.scrolled{
    transform:translateY(-120%);
    opacity:0;
    pointer-events:none;
    transition:transform .3s ease, opacity .3s ease;
}
header.header--logo.scrolled::after{
    opacity:0;
    visibility:hidden;
}
header.header--logo{
    overflow:visible;
    transition:transform .3s ease, opacity .3s ease;
}

/*==========================================================
    HEADER - LOGO + MENU LAYOUT FOR SECONDARY PAGES
==========================================================*/

/* Use on pages where header needs a left logo and right-aligned menu */
header.header--logo .header-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
}

.header-logo{
    height:52px;
    width:auto;
    display:block;
}

.header--logo .navbar{
    display:flex;
    flex:0 0 auto;
    margin-left:auto;
    transform:translateX(10%);
}

.header--logo .menu{
    display:flex;
    gap:1.25rem;
}




.header-container{

    width:100%;

    height:100%;

    position:relative;

    pointer-events:auto;

}




.navbar{

    width:100%;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

header#header:not(.header--logo) .header-container{
    display:flex;
    justify-content:center;
    align-items:center;
}

header#header:not(.header--logo) .navbar{
    width:auto;
}

header#header:not(.header--logo) .navbar .menu{
    justify-content:center;
}

.menu{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:center;

    gap:clamp(1rem, 2vw, 3rem);

}


/*==========================================================
    MENU
==========================================================*/

.menu li{

    position:relative;

}


.menu li a{

    font-family:'Montserrat',sans-serif;

    font-size:clamp(0.9rem, 1.2vw, 1.1rem);

    font-weight:700;

    letter-spacing:2px;

    color:#ffffff;

    transition:var(--transition);

    position:relative;

}


.menu li a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--red);

    transition:var(--transition);

}


.menu li a:hover{

    color:var(--red);

}


.menu li a:hover::after{

    width:100%;

}


/*==========================================================
    ACTIVE MENU
==========================================================*/

.menu li a.active{

    color:var(--red);

}


.menu li a.active::after{

    width:100%;

}


/*==========================================================
    HERO
==========================================================*/

.hero{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

}


/*==========================================================
    VIDEO
==========================================================*/

.hero-video{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:-1;

}


/*==========================================================
    VIDEO KARARTMA
==========================================================*/

.hero-overlay{

    display:block !important;

    background:transparent !important;

    z-index:1;
}

header#header.header--logo + .hero .hero-overlay{

    background:rgba(0,0,0,0.30) !important;

}


/*==========================================================
    CONTENT TRANSPARENCY
==========================================================*/

.hero-content > div {

    background:none!important;

    background-color:transparent!important;

    border:none!important;

    backdrop-filter:none!important;

    -webkit-backdrop-filter:none!important;

    box-shadow:none!important;

}

main.container section {

    background:rgba(0,0,0,.25)!important;

    background-color:rgba(0,0,0,.25)!important;

    border:1px solid rgba(255,255,255,.10)!important;

    backdrop-filter:blur(12px)!important;

    -webkit-backdrop-filter:blur(12px)!important;

    border-radius:16px;

    box-shadow:0 20px 50px rgba(0,0,0,.25);

    padding:2rem 2rem 2rem 4pt !important;

}

main.container section > * {

    text-indent:4pt !important;

}

main.container section p,
main.container section ul,
main.container section li,
main.container section h2,
main.container section h3 {

    margin:0 !important;

    padding-left:0 !important;

}

main.container section * {

    box-shadow:none!important;

}

.hero-slogan,
.hero-slogan * {

    background:none!important;

    background-color:transparent!important;

    backdrop-filter:none!important;

    -webkit-backdrop-filter:none!important;

    box-shadow:none!important;

}

.hero-content > div,
main.container section,
main.container section * {

    box-shadow:none!important;

}


/*==========================================================
    HERO CONTENT
==========================================================*/

.hero-content{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:2rem;

    padding:0 1rem;

    text-align:center;

    z-index:2;

}
/*==========================================================
    HERO LOGO
==========================================================*/

.hero-logo{

    position:absolute;

    top:40%;

    left:50%;

    transform:translate(-50%, -50%) scale(0);

    width:clamp(240px, 30vw, 54vw);

    max-width:80vw;

    max-height:70vh;

    height:auto;

    opacity:0;

    filter: drop-shadow(0 0 60px rgba(182,0,24,.60)) saturate(1.25) contrast(1.08) brightness(1.02);

    z-index:2;

    animation:logoIntro 4s ease-out forwards;

}

.hero-slogan{
    position:absolute;
    top:90%;
    left:50%;
    transform:translateX(-50%);
    width:min(90%,900px);
    padding:0 1rem;
    font-family:'Roboto', 'Champagne','Liomusines',sans-serif;
    font-weight:800;
    font-size:2rem;
    color:#ffffff;
    line-height:1.2;
    letter-spacing:0.05em;
    opacity:0;
    animation:logoIntro 4s ease-out forwards;
    animation-delay:0s;
    text-shadow:0 0 12px rgba(0,0,0,0.6);
    z-index:1;
    text-align:center;
    background:none !important;
    background-color:transparent !important;
    box-shadow:none !important;
}


/*==========================================================
    SCROLL INDICATOR
==========================================================*/

/* Scroll indicator removed: slogan now occupies this area */


/*==========================================================
    FOOTER
==========================================================*/

footer{

    width:100%;

    min-height:80px;

    background:#050505;

}


/*==========================================================
    SELECTION
==========================================================*/

::selection{

    background:var(--red);

    color:#fff;

}


/*==========================================================
    SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:var(--red);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--red-hover);

}


/*==========================================================
    GLASS EFFECT
==========================================================*/

.glass{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.10);

}


/*==========================================================
    BUTTON
==========================================================*/

.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:16px 42px;

    font-family:'League Spartan',sans-serif;

    font-size:15px;

    font-weight:700;

    letter-spacing:2px;

    color:#fff;

    border:2px solid var(--red);

    transition:var(--transition);

    cursor:pointer;

}


.btn:hover{

    background:var(--red);

    transform:translateY(-3px);

    box-shadow:0 0 25px rgba(182,0,24,.35);

}


/*==========================================================
    CONTAINER
==========================================================*/

.container{

    width:min(1400px,92%);

    margin:auto;

}


/*==========================================================
    TITLE
==========================================================*/


/*==========================================================
    FOOTER BAR
==========================================================*/

.footer-bar{
    width:100%;
    max-width:1200px;
    margin:24px auto;
    padding:18px 20px;
    text-align:center;
    font-family:'League Spartan',sans-serif;
    font-weight:600;
    color:rgba(255,255,255,0.9);
    font-size:0.95rem;
    background:linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.10));
    border-radius:12px;
    box-shadow:0 4px 30px rgba(0,0,0,0.4);
}


.section-title{

    font-family:'League Spartan',sans-serif;

    font-size:56px;

    font-weight:700;

    color:#fff;

    margin-bottom:25px;

    text-transform:uppercase;

}


.section-text{

    font-family:"Champagne",sans-serif;

    color:#d7d7d7;

    line-height:1.9;

    font-size:22px;

}


/*==========================================================
    ANIMATIONS
==========================================================*/

@keyframes logoIntro{

    0%{

        opacity:0;

        transform:translateX(-50%) scale(0);

    }

    25%{

        opacity:.35;

        transform:translateX(-50%) scale(0.35);

    }

    55%{

        opacity:.75;

        transform:translateX(-50%) scale(0.9);

    }

    100%{

        opacity:1;

        transform:translateX(-50%) scale(1);

    }

}


@keyframes scrollMouse{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    100%{

        transform:translateY(20px);

        opacity:0;

    }

}


/*==========================================================
    UTILITIES
==========================================================*/

.text-center{

    text-align:center;

}

.d-flex{

    display:flex;

}

.align-center{

    align-items:center;

}

.justify-center{

    justify-content:center;

}

.hidden{

    display:none;

}

.visible{

    display:block;

}


/*==========================================================
    END OF FILE
==========================================================*/