/* ===========================================================
   K-O FAKTÖR WEBSITE V2
   responsive.css — style.css'i tamamlayan mobil/tablet kırılımları
   =========================================================== */

.nav-toggle{
    display:none;
    width:44px;
    height:44px;
    border-radius:10px;
    background:#F3F7FB;
    align-items:center;
    justify-content:center;
    font-size:20px;
    color:var(--primary);
    border:none;
    cursor:pointer;
}

@media (max-width:1024px){
    .hero h1{ font-size:48px; }
    .hero-grid{ gap:50px; }
    .why-grid{ grid-template-columns:repeat(2,1fr); }
    .product-grid{ grid-template-columns:repeat(2,1fr); }
    .blog-grid{ grid-template-columns:repeat(2,1fr); }
    .stats-grid{ grid-template-columns:repeat(2,1fr); gap:40px; }
    .footer-grid{ grid-template-columns:1fr 1fr; gap:40px; }
    .section-title h2{ font-size:36px; }
    section{ padding:80px 0; }
    .detail-layout, .contact-layout{ grid-template-columns:1fr; }
    .detail-side{ position:static; }
    .sogreen-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:1120px){
    .search-box{ display:none; }
}

@media (max-width:900px){
    .nav-toggle{ display:flex; }

    .navbar{
        position:fixed;
        top:90px;
        left:0;
        width:100%;
        max-height:0;
        overflow:hidden;
        background:#fff;
        box-shadow:0 20px 40px rgba(0,0,0,.08);
        transition:max-height .35s ease;
        z-index:998;
    }
    .navbar.open{ max-height:80vh; overflow-y:auto; }

    .navbar ul{ flex-direction:column; align-items:stretch; gap:0; padding:10px 24px 24px; }
    .navbar li{ width:100%; }
    .navbar a{ display:block; padding:14px 0; border-bottom:1px solid var(--border); }

    .dropdown-menu{
        position:static; opacity:1; visibility:visible; transform:none;
        width:100%; box-shadow:none; border:none; display:none; padding:0 0 10px 14px;
    }
    .dropdown.open .dropdown-menu{ display:block; }
    .dropdown-grid{ grid-template-columns:1fr; gap:2px; }
    .dropdown-item{ padding:10px 8px; }
    .dropdown-cta{ margin-top:8px; }
    .dropdown-caret{ margin-left:auto; }

    .header .container .btn-primary{ display:none; }
    .search-box{ display:none; }
}

@media (max-width:768px){
    .hero{ padding-top:150px; }
    .hero-grid{ grid-template-columns:1fr; }
    .hero-image{ order:-1; }
    .hero h1{ font-size:36px; }
    .hero p{ font-size:17px; }
    .hero-buttons{ flex-direction:column; align-items:stretch; }

    .why-grid, .product-grid, .blog-grid, .sogreen-grid{ grid-template-columns:1fr; }
    .stats-grid{ grid-template-columns:1fr 1fr; }
    .stat-card h3{ font-size:38px; }

    .cta-box{ flex-direction:column; text-align:center; }
    .footer-grid{ grid-template-columns:1fr; gap:36px; }

    .section-title h2{ font-size:28px; }
    .section-title p{ font-size:16px; }
    .page-hero h1{ font-size:32px; }

    .support-banner__inner{ flex-direction:column; text-align:center; }
}

@media (max-width:480px){
    .container{ width:92%; }
    .hero h1{ font-size:30px; }
    .stats-grid{ grid-template-columns:1fr; }
    .btn-primary, .btn-secondary{ width:100%; }
}

a:focus-visible, button:focus-visible{
    outline:3px solid var(--secondary);
    outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

@media (max-width:1024px){
    .reference-logo{ width:150px; height:90px; }
}
@media (max-width:768px){
    .reference-logo{ width:130px; height:80px; padding:12px; }
    .reference-track{ gap:16px; animation-duration:28s; }
}
@media (max-width:480px){
    .reference-logo{ width:110px; height:70px; }
}