/* ==========================================================
   OZİ MERAK ORMANI v2.0
   RESPONSIVE.CSS FINAL
   Telefon • Tablet • Büyük Ekran
========================================================== */

/* ==========================================================
   1200 PX VE ALTI
========================================================== */

@media (max-width:1200px){

    .container{
        width:min(95%,1100px);
    }

    .hero-container{
        gap:35px;
    }

    .hero h2{
        font-size:3.6rem;
    }

    .hero h2 span{
        font-size:2.6rem;
    }

    .world-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-container{
        grid-template-columns:1fr 1fr;
    }

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

    .header-container{
        height:84px;
    }

    .navbar{
        display:none;
    }

    .mobile-menu{
        display:grid;
        place-items:center;
    }

    .hero{
        padding-top:120px;
        min-height:auto;
    }

    .hero-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-content{
        order:2;
    }

    .hero-character{
        order:1;
    }

    .hero-buttons,
    .hero-features{
        justify-content:center;
    }

    .speech-bubble{
        position:relative;
        left:auto;
        top:auto;
        width:min(340px,90%);
        margin:25px auto 0;
    }

    .ozi-main{
        width:360px;
    }

    .hero-bottom-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .magic-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .talk-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .mission-card{
        grid-template-columns:1fr;
        text-align:center;
    }

    .mission-item{
        text-align:left;
    }

    .footer-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .footer-brand,
    .footer-links,
    .footer-social{
        align-items:center;
    }

    .social-icons{
        justify-content:center;
    }

}

/* ==========================================================
   TELEFON (768 PX)
========================================================== */

@media (max-width:768px){

    section{
        padding:90px 0;
    }

    .section-heading{
        margin-bottom:50px;
    }

    .section-heading h2{
        font-size:2.2rem;
    }

    .hero h2{
        font-size:2.5rem;
    }

    .hero h2 span{
        font-size:1.8rem;
    }

    .hero p{
        font-size:1rem;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .btn{
        width:100%;
    }

    .feature-pill{
        width:100%;
        justify-content:center;
    }

    .hero-bottom-grid,
    .world-grid,
    .quick-grid,
    .badge-grid,
    .map-info-grid{
        grid-template-columns:1fr;
    }

    .video-track{
        grid-template-columns:repeat(6,260px);
    }

    .slider-arrow{
        display:none;
    }

    .map-pin img{
        width:44px;
    }

    .map-pin span{
        font-size:.72rem;
        padding:7px 10px;
    }

    .map-ozi{
        width:90px;
        left:12px;
        bottom:12px;
    }

    .theme-toggle,
    .nature-toggle{
        right:14px;
        padding:10px 14px;
        font-size:.9rem;
    }

    .theme-toggle img,
    .nature-toggle img{
        width:18px;
    }

    .footer-bottom-container{
        flex-direction:column;
        text-align:center;
    }

}

/* ==========================================================
   KÜÇÜK TELEFON
========================================================== */

@media (max-width:560px){

    body{
        font-size:15px;
    }

    .logo{
        width:56px;
        height:56px;
    }

    .logo-text h1{
        font-size:1.25rem;
    }

    .login-btn{
        display:none;
    }

    .hero{
        padding-top:100px;
    }

    .hero h2{
        font-size:2rem;
    }

    .hero h2 span{
        font-size:1.5rem;
    }

    .hero-badge{
        font-size:.82rem;
        padding:10px 18px;
    }

    .ozi-main{
        width:280px;
    }

    .speech-bubble{
        width:100%;
        padding:18px;
    }

    .quick-card{
        padding:22px 18px;
    }

    .world-image{
        height:190px;
    }

    .world-content{
        padding:20px;
    }

    .video-track{
        grid-template-columns:repeat(6,220px);
        gap:18px;
    }

    .video-thumb img{
        height:160px;
    }

    .badge-card img{
        width:82px;
    }

    .footer-ozi{
        width:140px;
    }

    .theme-toggle span,
    .nature-toggle span{
        display:none;
    }

}

/* ==========================================================
   ÇOK KÜÇÜK TELEFONLAR
========================================================== */

@media (max-width:380px){

    .container{
        width:92%;
    }

    .hero h2{
        font-size:1.8rem;
    }

    .hero h2 span{
        font-size:1.35rem;
    }

    .section-heading h2{
        font-size:1.9rem;
    }

    .btn{
        padding:15px 18px;
        font-size:.95rem;
    }

    .world-content h3{
        font-size:1.25rem;
    }

    .quick-box{
        padding:26px 18px;
    }

    .quick-box img{
        width:64px;
    }

}

/* ==========================================================
   BÜYÜK MASAÜSTÜ
========================================================== */

@media (min-width:1600px){

    .container{
        max-width:1400px;
    }

    .hero h2{
        font-size:5rem;
    }

    .hero h2 span{
        font-size:3.5rem;
    }

    .ozi-main{
        width:520px;
    }

    .world-image{
        height:270px;
    }

}