/* ===========================
   RESPONSIVE DESIGN
   Mobile-first overrides
   =========================== */

/* Mobile: < 640px */
@media (max-width: 639px) {
    .container {
        padding: 0 16px;
    }

    .section {
        padding: 64px 0;
    }

    /* Müşteriler clients-grid — 2 sütun, küçük slot */
    #musteriler .clients-grid,
    .musteriler .clients-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 16px 0;
    }
    #musteriler .clients-grid__slot,
    .musteriler .clients-grid__slot {
        width: 140px;
        height: 70px;
        padding: 8px;
        border-radius: 8px;
    }

    .section__header {
        margin-bottom: 40px;
    }

    .section__title {
        font-size: 1.875rem;
    }

    .section__subtitle {
        font-size: 1rem;
    }

    /* Navbar */
    .navbar__menu {
        display: none;
    }

    .navbar__hamburger {
        display: flex;
    }

    /* Hero */
    .hero__content {
        padding: 100px 16px 80px;
    }

    .hero__title {
        font-size: 2.25rem;
    }

    .hero__subtitle {
        font-size: 1rem;
    }

    .hero__actions {
        flex-direction: column;
    }

    .hero__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hero__platforms {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .hero__platform-icons {
        gap: 8px;
    }

    .platform-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .hero__scroll-indicator {
        display: none;
    }

    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
    }

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

    /* Timeline */
    .timeline__line {
        left: 24px;
    }

    .timeline__step--left,
    .timeline__step--right {
        flex-direction: row;
        padding-left: 64px;
        padding-right: 0;
    }

    .timeline__number {
        left: 24px;
        width: 40px;
        height: 40px;
        font-size: 0.875rem;
    }

    .timeline__card {
        padding: 24px;
    }

    /* Stats */
    .stats {
        padding: 48px 0;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .stat-item__number {
        font-size: 2.25rem;
    }

    /* Portfolio */
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Ekip */
    .ekip-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .departments-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .hakkimizda-manifesto {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Hakkimizda */
    .hakkimizda-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hakkimizda-content .section__title {
        font-size: 2rem;
    }

    .values-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* İletişim */
    .iletisim-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .iletisim-info .section__title {
        font-size: 1.875rem;
    }

    .iletisim-form-wrapper {
        padding: 24px;
    }

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

    /* Footer */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer__bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    /* Booking modal */
    .booking-modal {
        padding: 12px;
        align-items: flex-start;
        padding-top: 40px;
    }

    .booking-modal__grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        min-height: auto;
        max-height: 85vh;
        overflow-y: auto;
    }

    .booking-modal__aside {
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
        padding: 20px 16px;
    }

    .booking-modal__calendar-wrap {
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
        padding: 16px;
    }

    .booking-modal__dates .booking-modal__date-cell {
        font-size: 0.75rem;
    }

    .booking-form__row {
        grid-template-columns: 1fr;
    }
}

/* Tablet: 640px - 767px */
@media (min-width: 640px) and (max-width: 767px) {
    #musteriler .clients-grid,
    .musteriler .clients-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    #musteriler .clients-grid__slot,
    .musteriler .clients-grid__slot {
        width: 160px;
        height: 80px;
        padding: 10px;
    }

    .navbar__menu {
        display: none;
    }

    .navbar__hamburger {
        display: flex;
    }

    .hero__title {
        font-size: 3rem;
    }

    .hero__content {
        padding: 120px 24px 80px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

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

    .ekip-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .timeline__line {
        left: 24px;
    }

    .timeline__step--left,
    .timeline__step--right {
        flex-direction: row;
        padding-left: 64px;
        padding-right: 0;
    }

    .timeline__number {
        left: 24px;
    }

    .hakkimizda-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .iletisim-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Tablet landscape: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    #musteriler .clients-grid,
    .musteriler .clients-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .navbar__menu {
        display: none;
    }

    .navbar__hamburger {
        display: flex;
    }

    .hero__title {
        font-size: 3.5rem;
    }

    .booking-modal__grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        max-height: 85vh;
        overflow-y: auto;
    }

    .booking-modal__aside {
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
    }

    .booking-modal__calendar-wrap {
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
    }

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

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

    .ekip-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .hakkimizda-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .iletisim-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .footer__grid {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
    .container {
        padding: 0 48px;
    }

    .section {
        padding: 128px 0;
    }

    .navbar__hamburger {
        display: none;
    }

    .navbar__menu {
        display: flex;
    }
}

/* Large desktop: 1280px+ */
@media (min-width: 1280px) {
    .hero__title {
        font-size: 4.5rem;
    }
}