/* ==========================================================================
   KARABAĞ TAŞIMACILIK — mobile.css
   Clean, consistent mobile + tablet adaptation (loaded last).
   Targets phones (iOS Safari, Android Chrome) and tablets.
   Desktop (>1024px) is untouched.
   ========================================================================== */

/* ---------- Cross-browser base safety ---------- */
* {
    -webkit-tap-highlight-color: rgba(14, 165, 233, 0.15);
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* Prevent horizontal overflow site-wide on small screens */
@media (max-width: 1024px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
    .container {
        padding-left: 18px;
        padding-right: 18px;
        width: 100%;
        box-sizing: border-box;
    }
}

/* iOS safe-area padding for fixed header / floating buttons */
@supports (padding: max(0px)) {
    .site-header { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    .float-contact { right: max(18px, env(safe-area-inset-right)); }
    .scroll-top { right: max(18px, env(safe-area-inset-right)); }
}

/* ==========================================================================
   TABLET  (≤ 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    /* Constructor stacks: form on top, map below */
    .constructor {
        grid-template-columns: 1fr !important;
        gap: var(--space-6);
        padding: var(--space-6);
    }
    .constructor-map {
        position: static !important;
        top: auto !important;
        min-height: 380px;
        order: 2;
    }
    .constructor-form { order: 1; }
    #leafletMap, .map-canvas, .constructor-map > div {
        min-height: 380px;
    }

    /* Grids that were 3-col become 2-col */
    .features-grid,
    .subcats-grid,
    .campaigns-grid,
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Legal pages: sidebar goes on top, single column */
    .legal-layout {
        grid-template-columns: 1fr !important;
    }
    .legal-sidebar { position: static !important; order: -1; }

    /* Promo grid 2-col */
    .promo-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* ==========================================================================
   PHONE  (≤ 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* ----- Header / Nav ----- */
    .main-nav { display: none; }              /* desktop nav hidden */
    .header-cta { display: none; }            /* CTA moves into mobile drawer */
    .mobile-toggle { display: flex; }
    .header-inner { height: 64px; }
    .header-controls { gap: 6px; }
    .dropdown[data-dropdown="lang"] .dropdown-btn span:not(.chevron) { font-size: 0.85rem; }

    /* Brand logo a touch smaller */
    .brand-img { height: 40px; width: auto; }

    /* ----- Mobile nav drawer ----- */
    .mobile-nav {
        padding: var(--space-4);
        gap: 2px;
    }
    .mobile-nav a {
        padding: 14px 16px;
        font-size: 1rem;
        border-radius: var(--radius-md);
    }
    .mobile-nav-cta { margin-top: var(--space-3); justify-content: center; }

    /* ----- Typography scale ----- */
    h1 { font-size: clamp(1.9rem, 8vw, 2.6rem) !important; line-height: 1.15; }
    h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.2; }
    h3 { font-size: 1.2rem !important; }
    .lead { font-size: 1rem !important; }
    .section { padding-top: var(--space-12); padding-bottom: var(--space-12); }

    /* ----- Hero ----- */
    .hero { padding-top: 90px; padding-bottom: var(--space-12); min-height: auto; }
    .hero-inner, .hero-content { text-align: center; }
    .hero-visual { display: none; }           /* heavy decorative visual hidden on phone */
    .hero-badges, .hero-floating { display: none; }
    .hero .cta-actions { justify-content: center; }

    /* ----- Buttons: full-width, tappable ----- */
    .cta-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        width: 100%;
    }
    .cta-actions .btn { width: 100%; justify-content: center; }
    .btn-lg { padding: 14px 20px; font-size: 1rem; min-height: 50px; }
    .btn { min-height: 44px; }   /* min touch target */

    /* ----- Single-column grids ----- */
    .features-grid,
    .subcats-grid,
    .campaigns-grid,
    .promo-grid,
    .stats-grid,
    .blog-grid,
    .testimonials-grid,
    .pricing-grid,
    .feature-list {
        grid-template-columns: 1fr !important;
        gap: var(--space-4);
    }

    /* Stats: 2-col looks better than 1 for short numbers */
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-6) var(--space-3); }
    .stats-grid .num { font-size: 2rem !important; }

    /* ----- Constructor mobile ----- */
    .constructor { padding: var(--space-4); border-radius: var(--radius-xl); }
    .scope-cards {
        grid-template-columns: 1fr !important;
        gap: var(--space-3);
    }
    .scope-card { padding: var(--space-4); }
    .scope-masters-toggle { top: var(--space-4); right: var(--space-3); }

    /* Main 12-service grid → 2 columns on phone */
    #serviceGrid.service-pick-grid:not(.masters-mode) {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
    .service-pick-btn { min-height: 64px; font-size: 0.8rem !important; }

    /* Location / sub grids stay 2-col but tighter */
    .constructor-form .search-grid,
    .constructor-form .search-grid.sm,
    #subServiceGrid.service-pick-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
    .form-row.inner-row { grid-template-columns: 1fr !important; gap: var(--space-4); }

    /* Accordion head: keep label + chevron on one line, allow pill to wrap */
    .form-group.acc .acc-head { padding: var(--space-3) var(--space-4); min-height: 48px; }
    .acc-selected-pill { max-width: 140px; }

    /* Route info: 3 across but compact */
    .route-info { gap: var(--space-2); }
    .route-stat .value { font-size: 1rem; }
    .route-stat .label { font-size: 0.6rem; }
    .route-stat .icon { font-size: 1rem; }

    /* Map height on phone */
    .constructor-map, #leafletMap { min-height: 320px; }

    /* ----- Footer ----- */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-8);
        text-align: center;
    }
    .footer-brand { align-items: center; }
    .footer-socials { justify-content: center; }
    .footer-col ul { align-items: center; }
    .footer-col h5 { margin-bottom: var(--space-3); }
    .footer-contact-list { align-items: center; }
    .footer-bottom {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }
    .footer-bottom-links { justify-content: center; flex-wrap: wrap; gap: var(--space-3); }
    .newsletter-form { max-width: 340px; margin-left: auto; margin-right: auto; }

    /* ----- Section headers centered ----- */
    .section-header, .section-head { text-align: center; }
    .section-header .eyebrow, .section-head .eyebrow { margin-left: auto; margin-right: auto; }

    /* ----- CTA banner ----- */
    .cta-banner .cta-inner { padding: var(--space-8) var(--space-5); text-align: center; }
    .cta-banner .cta-actions { align-items: stretch; }

    /* ----- Tables / wide content scroll ----- */
    .pricing-table, .comparison-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ----- Page hero ----- */
    .page-hero { padding-top: 100px; padding-bottom: var(--space-10); }
    .breadcrumb.breadcrumb-with-eyebrow { justify-content: center; }

    /* ----- Services tabs ----- */
    .services-tabs { gap: var(--space-2); }
    .services-tab { padding: 10px 16px; font-size: 0.9rem; flex: 1; justify-content: center; }

    /* ----- Timeline (about) ----- */
    .timeline::before { left: 18px !important; }
    .timeline-item { padding-left: 48px !important; }
    .timeline-year { font-size: 1rem; }

    /* ----- Testimonials ----- */
    .testimonial-card { padding: var(--space-5); }

    /* ----- Toasts: full width near bottom ----- */
    .toast-container {
        left: 12px; right: 12px; bottom: 12px;
        align-items: stretch;
    }
    .toast { max-width: 100%; }

    /* Floating buttons sizing + raised so they don't cover footer links */
    .float-contact, .scroll-top { width: 50px; height: 50px; font-size: 1.4rem; }
    .float-contact { bottom: calc(var(--space-8) + 26px); }
    .scroll-top    { bottom: calc(var(--space-8) + 26px); }
}

/* ==========================================================================
   SMALL PHONE  (≤ 480px)
   ========================================================================== */
@media (max-width: 480px) {
    .container { padding-left: 14px; padding-right: 14px; }

    h1 { font-size: clamp(1.7rem, 9vw, 2.1rem) !important; }
    h2 { font-size: 1.4rem !important; }

    /* Main service grid → single column on very small screens */
    #serviceGrid.service-pick-grid:not(.masters-mode) {
        grid-template-columns: 1fr !important;
    }
    .service-pick-btn { flex-direction: row; min-height: 52px; }

    /* Location grids → single column */
    .constructor-form .search-grid,
    .constructor-form .search-grid.sm,
    #subServiceGrid.service-pick-grid {
        grid-template-columns: 1fr !important;
    }

    /* Stats single column */
    .stats-grid { grid-template-columns: 1fr !important; }

    /* Route info: stack vertically if cramped */
    .route-info { flex-wrap: wrap; }
    .route-stat { flex: 1 1 30%; }

    /* Dropdowns (lang) compact */
    .dropdown-btn { padding: 6px 8px; }
    .dropdown-btn span:not(.chevron) { display: none; }   /* show only icon on tiny screens */
    .dropdown[data-dropdown="lang"] .dropdown-btn span:not(.chevron) { display: inline; } /* keep TR */

    /* Reduce big paddings */
    .section { padding-top: var(--space-10); padding-bottom: var(--space-10); }
    .constructor { padding: var(--space-3); }

    /* Promo discount smaller */
    .promo-discount { font-size: 2.4rem !important; }
}

/* ==========================================================================
   LANDSCAPE PHONE — keep map usable
   ========================================================================== */
@media (max-width: 920px) and (orientation: landscape) {
    .hero { min-height: auto; }
    .constructor-map, #leafletMap { min-height: 300px; }
}

/* ==========================================================================
   TOUCH DEVICES — remove hover-only lift that can "stick" on tap
   ========================================================================== */
@media (hover: none) {
    .service-pick-btn:hover,
    .scope-card:hover,
    .feature-card:hover,
    .campaign-card:hover,
    .subcat-card:hover {
        transform: none;
    }
    /* keep tap feedback via :active */
    .service-pick-btn:active,
    .scope-card:active { transform: scale(0.99); }
}


/* ==========================================================================
   ROUND #13 — Targeted mobile refinements (phones ≤ 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* ----- Global container padding 20px (was 14px) ----- */
    .container { padding-left: 20px !important; padding-right: 20px !important; }

    /* ----- Hero actions centered ----- */
    .hero-actions,
    .hero .cta-actions,
    .hero-content .cta-actions {
        justify-content: center !important;
        align-items: center !important;
    }

    /* ----- Service cards: 2 per row (TAŞIMACILIK & USTALAR) ----- */
    .services-grid,
    #panel-transport .services-grid,
    #panel-masters .services-grid,
    .service-cards,
    #panel-transport > .container > .services-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: var(--space-3) !important;
    }
    /* Some markups wrap cards directly in a grid container */
    #panel-transport .container,
    #panel-masters .container {
    }
    .service-card {
        min-height: 250px !important;
        position: relative;
    }
    .service-card .service-num {
        font-size: var(--space-4) !important;
        position: absolute;
        top: var(--space-1);
        right: var(--space-1);
        margin: 0;
    }
    .service-card p {
        font-size: 0.7rem !important;
    }
    /* Short button label on mobile */
    .btn-select-service .label-full { display: none; }
    .btn-select-service .label-short { display: inline; }

    /* ----- Constructor ----- */
    .scope-card-desc { display: none !important; }
    .scope-masters-toggle { top: var(--space-7) !important; }
    .scope-card.active::after { display: none !important; }

    /* Header row: "Ana Hizmet" + Kurumsal + chevron on ONE horizontal line.
       The selected-pill drops to its own full-width line UNDER the title.
       Trick: form-label uses display:contents so num/text/pill become direct
       flex children of acc-head — letting the pill wrap independently while
       the title keeps its content width (not full screen). */
    .form-group.acc .acc-head {
        align-items: center !important;
        flex-wrap: wrap;
        row-gap: 6px;
        column-gap: var(--space-2);
    }
    .form-group.acc .acc-head .form-label {
        display: contents;
    }
    /* title text width = content, not full width */
    .form-group.acc .acc-head .main-service-label-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 55vw;
    }
    /* right-side group hugs the end of the first line */
    .form-label-right {
        align-items: center !important;
        margin-left: auto;
    }
    .acc-chevron { align-items: center !important; }
    /* Pill: own line, full width, below the title */
    .form-group.acc .acc-head .acc-selected-pill {
        order: 5;
    }
    .form-group.acc .acc-head .acc-selected-pill.has-value {
        flex-basis: 100%;
        max-width: 100%;
        margin-left: 0;
    }
    /* Kurumsal label 10px on mobile */
    .kurumsal-toggle .kurumsal-label { font-size: 10px !important; }

    /* Ek Hizmetler: shorter so the inner scroll is obvious */
    .extras-scroll-wrap { max-height: 220px !important; overflow-y: auto !important; }

    /* mobile-nav CTA: keep icon + text visible on hover (no disappearing) */
    .mobile-nav-cta i,
    .mobile-nav-cta span { position: relative; z-index: 1; opacity: 1 !important; }
    .mobile-nav-cta:hover i,
    .mobile-nav-cta:hover span { opacity: 1 !important; color: inherit; }

    /* ----- Testimonials: arrows + single full card (no peeking neighbors) ----- */
    .testimonials-viewport {
        gap: var(--space-2);
        padding: 0 4px;
        max-width: 100%;
    }
    .testimonials-viewport .testimonials-marquee {
        gap: var(--space-3) !important;
        padding: var(--space-2) 2px;
    }
    .testimonials-viewport .testimonial-card {
        scroll-snap-align: center;
        flex: 0 0 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        min-height: auto;
    }
    .testi-nav {
        width: 36px; height: 36px;
        font-size: 1.2rem;
    }

    /* ----- ABOUT timeline ----- */
    .timeline-item { padding-left: 10px !important; }
    .timeline-item::before { left: -28px !important; }

    /* ----- Service-type pages: subcats 2 per row, p 0.7rem ----- */
    .subcats-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .subcat-card p { font-size: 0.7rem !important; }

    /* ----- Legal pages: ensure 20px side padding (handled by .container above) ----- */
    .legal-content { padding-left: 0; padding-right: 0; }

    /* ----- Blog single ----- */
    .blog-single-body .container { padding-left: 20px !important; padding-right: 20px !important; }
    .blog-single-cover { margin-top: var(--space-6); }
    /* Tümü button + share icons on the same row */
    .blog-single-actions {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: var(--space-2) !important;
    }
    .blog-single-actions .btn { width: auto !important; flex: 0 0 auto; }
    .blog-single-share { flex-wrap: nowrap; }
    .blog-single-share span { display: none; } /* hide "Paylaş:" label to save space */
}


/* ==========================================================================
   ROUND #13 — Keep service cards 2-per-row down to smallest phones
   (override .services-grid-4 single-column rule)
   ========================================================================== */
@media (max-width: 480px) {
    .services-grid.services-grid-4,
    #panel-transport .services-grid-4,
    #panel-masters .services-grid-4 {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: var(--space-3) !important;
    }
    .services-grid-4 .service-card { min-height: 250px !important; }
    .services-grid-4 .service-card p { font-size: 0.7rem !important; }
    .services-grid-4 .service-card .service-num {
        font-size: var(--space-4) !important;
        position: absolute;
        top: var(--space-1);
        right: var(--space-1);
    }
}