/**
 * ============================================================
 * İSTANBUL BEYAZ EŞYA SERVİSİ — RESPONSIVE
 * ============================================================
 * Breakpoints: 992px | 768px (tablet) | 480px (mobil)
 * ============================================================
 */

/* ── TABLET (≤ 992px) ────────────────────────────────────── */
@media (max-width: 992px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid      { grid-template-columns: repeat(2, 1fr); }
    .stats-grid    { grid-template-columns: repeat(2, 1fr); }
    .footer-grid   { grid-template-columns: 1fr 1fr; gap: 32px; }
    .contact-layout { grid-template-columns: 1fr; }
}

/* ── TABLET + NAV (≤ 880px) ──────────────────────────────── */
@media (max-width: 880px) {
    /* Hamburger görünür */
    .nav-toggle { display: flex; }

    /* Nav menü — dropdown */
    .main-nav {
        display: none;
        position: absolute;
        top: 70px;
        left: -20px;   /* container padding'i geç */
        right: -20px;
        background: var(--white);
        border-top: 2px solid var(--primary);
        box-shadow: 0 8px 24px rgba(0,0,0,0.14);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0 12px;
        z-index: 999;
    }
    .main-nav.open { display: flex; }

    /* Dropdown nav list — bullet reset */
    .nav-list,
    .nav-list li {
        list-style: none;
        list-style-type: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        margin: 0;
    }
    .nav-link {
        display: block;
        padding: 13px 24px;
        border-radius: 0;
        font-size: 0.92rem;
        border-bottom: 1px solid rgba(0,0,0,0.06);
        color: var(--secondary);
    }
    .nav-link:hover, .nav-link.active {
        background: rgba(255,107,0,0.07);
        color: var(--primary);
        padding-left: 28px;
    }
    .nav-list li:last-child .nav-link { border-bottom: none; }

    .header-phone {
        margin: 10px 24px 4px;
        justify-content: center;
        border-radius: 8px;
    }
}

/* ── MOBİL (≤ 768px) ─────────────────────────────────────── */
@media (max-width: 768px) {
    .hero { padding: 40px 0 36px; }
    .hero-badges { gap: 8px; margin-bottom: 18px; }
    .hero-badge  { font-size: 0.78rem; padding: 5px 10px; }
    .hero-title  { font-size: clamp(1.7rem, 7vw, 2.4rem); }
    .hero-sub    { font-size: 0.95rem; margin-bottom: 24px; }
    .hero-btns { flex-direction: column; gap: 10px; }
    .hero-btns .btn { width: 100%; justify-content: center; }

    .trust-items { flex-direction: column; }
    .trust-item  { border-right: none; border-bottom: 1px solid var(--border); padding: 16px 20px; }
    .trust-item:last-child { border-bottom: none; }

    .services-grid { grid-template-columns: 1fr; gap: 16px; }
    .service-card  { padding: 24px 20px; }

    .why-grid  { grid-template-columns: 1fr 1fr; gap: 14px; }
    .why-item  { padding: 24px 16px; }

    .cta-band-btns { flex-direction: column; align-items: center; }
    .cta-band-btns .btn { width: 100%; max-width: 340px; justify-content: center; }

    .service-detail-inner { grid-template-columns: 1fr; }
    .service-detail-icon  { width: 60px; height: 60px; font-size: 1.5rem; }

    .form-row { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: 1fr; gap: 28px; }

    /* Sticky mobil bar görünür */
    .mobile-cta-bar { display: flex; }
    .whatsapp-float { bottom: 76px; }
    .back-to-top    { bottom: 76px; }

    /* Alt kısımda sticky bar için boşluk */
    body { padding-bottom: 60px; }

    .map-container { height: 260px; }
}

/* ── KÜÇÜK MOBİL (≤ 480px) ───────────────────────────────── */
@media (max-width: 480px) {
    h1 { font-size: 1.7rem; }
    h2 { font-size: 1.4rem; }

    .container { padding: 0 14px; }

    .section    { padding: 48px 0; }
    .section-sm { padding: 32px 0; }

    .btn    { padding: 13px 22px; font-size: 0.9rem; }
    .btn-lg { padding: 15px 28px; }

    .hero-badge { font-size: 0.76rem; padding: 5px 10px; }

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

    .stat-number { font-size: 2.2rem; }

    .contact-form-card,
    .contact-info-card { padding: 24px 18px; }

    .service-card { padding: 24px 18px; }

    .footer-top { padding: 40px 0 32px; }
}