@viewport{width:device-width;initial-scale:1.0}

/* =================================
   TABLET RESPONSIVE (769px - 1024px)
   ================================= */
@media screen and (min-width:769px) and (max-width:1024px){
    .overlay h2{
        font-size:24px!important
    }
    .overlay p{
        font-size:15px!important
    }
    .buttons a{
        font-size:12px!important;
        padding:10px 8px!important
    }
}

/* =================================
   MOBİL RESPONSIVE (Max 768px)
   ================================= */
@media screen and (max-width:768px){
    /* Video arka plan tam ekran */
    .video-bg,.video-overlay{
        position:fixed!important;
        top:0!important;
        left:0!important;
        width:100vw!important;
        height:100vh!important;
        object-fit:cover!important
    }
    
    .video-bg{
        z-index:-2!important
    }
    
    .video-overlay{
        background:rgba(0,0,0,.5)!important;
        z-index:-1!important
    }
    
    body,html{
        width:100%!important;
        max-width:100%!important;
        overflow-x:hidden!important;
        font-size:14px!important;
        position:relative!important
    }
    
    /* İçerik alanı - Daha ortalanmış */
    .content,.content-wrapper{
        position:relative!important;
        width:100%!important;
        min-height:100vh!important;
        padding:35vh 15px 140px!important;
        display:flex!important;
        flex-direction:column!important;
        justify-content:flex-start!important;
        align-items:center!important;
        z-index:10!important;
        box-sizing:border-box!important;
        text-align:center!important
    }
    
    .overlay{
        position:relative!important;
        width:100%!important;
        max-width:100%!important;
        padding:0 10px!important;
        left:auto!important;
        top:auto!important;
        transform:none!important;
        text-align:center!important
    }
    
    .overlay h1,.overlay h2{
        font-size:18px!important;
        line-height:1.3!important;
        margin-bottom:15px!important;
        text-shadow:2px 2px 8px rgba(0,0,0,.95)!important;
        font-weight:700!important;
        text-align:center!important;
        width:100%!important;
        color:#fff!important;
        word-wrap:break-word!important
    }
    
    .overlay p{
        font-size:12px!important;
        line-height:1.4!important;
        margin-bottom:10px!important;
        text-shadow:1px 1px 5px rgba(0,0,0,.95)!important;
        text-align:center!important;
        width:100%!important;
        color:#fff!important;
        word-wrap:break-word!important
    }
    
    .buttons{
        display:grid!important;
        grid-template-columns:repeat(2,1fr)!important;
        gap:8px!important;
        margin-top:20px!important;
        width:100%!important;
        max-width:100%!important;
        padding:0!important
    }
    
    .buttons a{
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        padding:8px 5px!important;
        min-height:38px!important;
        font-size:9px!important;
        font-weight:600!important;
        color:#fff!important;
        background:rgba(255,255,255,.2)!important;
        border:1px solid rgba(255,255,255,.7)!important;
        border-radius:6px!important;
        text-decoration:none!important;
        text-shadow:1px 1px 4px rgba(0,0,0,.9)!important;
        backdrop-filter:blur(5px)!important;
        transition:.3s!important;
        word-break:break-word!important;
        line-height:1.2!important;
        white-space:normal!important
    }
    
    .buttons a:active,.buttons a:hover{
        background:rgba(255,255,255,.95)!important;
        color:#222!important;
        text-shadow:none!important;
        transform:translateY(-2px)!important
    }
    
    /* MENÜ - TRANSPARENT VE YUKARIDA */
    nav.main-menu{
        display:flex!important;
        visibility:visible!important;
        opacity:1!important;
        position:fixed!important;
        bottom:70px!important;
        left:50%!important;
        transform:translateX(-50%)!important;
        z-index:9999!important;
        align-items:center!important;
        justify-content:space-between!important;
        gap:5px!important;
        background:transparent!important;
        padding:10px 12px!important;
        border-radius:25px!important;
        border:2px solid rgba(255,255,255,.6)!important;
        backdrop-filter:blur(15px)!important;
        box-shadow:0 8px 25px rgba(0,0,0,.5)!important;
        width:92%!important;
        max-width:92%!important;
        flex-wrap:nowrap!important;
        overflow:visible!important
    }
    
    nav.main-menu a{
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        visibility:visible!important;
        color:#fff!important;
        text-decoration:none!important;
        font-size:9.5px!important;
        font-weight:700!important;
        padding:9px 8px!important;
        border-radius:18px!important;
        transition:all 0.3s!important;
        white-space:nowrap!important;
        background:rgba(255,255,255,.2)!important;
        border:1.5px solid rgba(255,255,255,.4)!important;
        line-height:1.1!important;
        text-shadow:1px 1px 4px rgba(0,0,0,.9)!important;
        letter-spacing:0.1px!important;
        flex:1!important;
        text-align:center!important;
        min-width:0!important;
        height:36px!important;
        box-sizing:border-box!important
    }
    
    nav.main-menu a:hover,
    nav.main-menu a:active{
        background:rgba(255,255,255,.5)!important;
        transform:translateY(-2px)!important;
        box-shadow:0 4px 12px rgba(255,255,255,.4)!important
    }
    
    .menu-logo{
        display:none!important;
        visibility:hidden!important
    }
    
    /* Sosyal medya - En altta */
    .floating-social{
        position:fixed!important;
        bottom:0!important;
        left:0!important;
        right:0!important;
        top:auto!important;
        transform:none!important;
        flex-direction:row!important;
        justify-content:space-around!important;
        gap:0!important;
        background:rgba(0,0,0,.95)!important;
        padding:0!important;
        z-index:10000!important;
        border-top:1px solid rgba(255,255,255,.2)!important;
        display:flex!important
    }
    
    .floating-social a{
        flex:1!important;
        height:50px!important;
        border-radius:0!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        width:auto!important;
        font-size:22px!important
    }
    
    /* Modal ayarları */
    .modal-content,.modal-inner{
        padding:20px!important;
        width:95%!important;
        max-height:85vh!important
    }
    
    .modal-content h2,.modal-inner h2{
        font-size:18px!important
    }
    
    .modal-content p,.modal-inner p{
        font-size:14px!important
    }
    
    .hero-slider,.hero-slider img{
        height:200px!important
    }
    
    .modal-actions,.modal-buttons{
        flex-direction:column!important
    }
    
    .btn{
        width:100%!important;
        text-align:center!important;
        margin-bottom:5px!important
    }
    
    .modal-buttons .btn i{
        margin-right:8px!important
    }
}

/* =================================
   KÜÇÜK MOBİL (Max 480px)
   ================================= */
@media screen and (max-width:480px){
    .content,.content-wrapper{
        padding:30vh 12px 130px!important
    }
    
    .overlay h1,.overlay h2{
        font-size:16px!important;
        margin-bottom:12px!important
    }
    
    .overlay p{
        font-size:11px!important;
        line-height:1.3!important;
        margin-bottom:8px!important
    }
    
    .buttons a{
        font-size:8px!important;
        padding:6px 3px!important;
        min-height:32px!important
    }
    
    .buttons{
        gap:6px!important;
        margin-top:15px!important
    }
    
    nav.main-menu{
        gap:4px!important;
        padding:8px 10px!important;
        display:flex!important;
        bottom:68px!important;
        width:90%!important;
        max-width:90%!important
    }
    
    nav.main-menu a{
        font-size:8.5px!important;
        padding:8px 6px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        flex:1!important;
        height:34px!important;
        line-height:1.1!important
    }
    
    .modal-content,.modal-inner{
        padding:15px!important
    }
    
    .hero-slider,.hero-slider img{
        height:150px!important
    }
}

/* =================================
   ÇOK KÜÇÜK MOBİL (Max 320px)
   ================================= */
@media screen and (max-width:320px){
    .content,.content-wrapper{
        padding:28vh 8px 120px!important
    }
    
    .overlay h2{
        font-size:14px!important
    }
    
    .overlay p{
        font-size:10px!important
    }
    
    .buttons a{
        font-size:7px!important;
        min-height:28px!important;
        padding:5px 2px!important
    }
    
    nav.main-menu{
        gap:3px!important;
        padding:7px 8px!important;
        display:flex!important;
        width:88%!important;
        max-width:88%!important
    }
    
    nav.main-menu a{
        font-size:7.5px!important;
        padding:7px 5px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        flex:1!important;
        height:32px!important;
        line-height:1.1!important
    }
}