/*
 * Mobile-first improvements — touch-friendly UI & payment UX
 * Appended on top of style.css; does not override desktop layout.
 */

/* ── Global touch targets ────────────────────────────────────────── */
@media only screen and (max-width: 991px) {
    /* Minimum 44 × 44 px tap target for all interactive elements
       EXCLUDING the slider button (handled separately) */
    a.btn:not(.bx-caption a),
    button:not(.bx-caption button),
    input[type="submit"],
    input[type="button"],
    .btn:not(.bx-caption .btn),
    .color-bg:not(.bx-caption .color-bg),
    .listing-item-category-wrap,
    .scroll-nav-wrapper-opt a,
    .scroll-nav-link,
    .custom-scroll-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Slider button must NOT be stretched by the global touch rule */
    .bx-caption a.btn,
    .bx-caption .btn {
        min-height: unset !important;
        display: inline-block !important;
    }

    /* Form inputs — taller for easy tapping */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    select,
    textarea {
        min-height: 44px;
        font-size: 16px !important; /* prevents iOS auto-zoom on focus */
        padding: 10px 12px !important;
    }

    /* İkonlu form alanları: ikonun üzerine yazı binmemesi için sol padding korunur */
    .custom-form input[type="text"],
    .custom-form input[type="email"],
    .custom-form input[type="tel"],
    .custom-form input[type="number"],
    .custom-form input[type="password"],
    .custom-form input[type="date"],
    .custom-form input[type="search"],
    .custom-form select,
    .custom-form textarea,
    .listsearch-input-item input[type="text"],
    .listsearch-input-item input[type="number"],
    .listsearch-input-item input[type="tel"],
    .listsearch-input-item input[type="date"],
    .listsearch-input-item select {
        padding: 10px 12px 10px 40px !important;
    }

    /* İkonsuz form alanları: sol padding gerekmez */
    .custom-form.no-icons input,
    .custom-form.no-icons textarea,
    .custom-form.no-icons select {
        padding: 10px 12px !important;
    }

    /* Chosen select — keep consistent height */
    .chosen-container .chosen-single {
        min-height: 44px;
        line-height: 44px;
    }

    /* Checkbox / radio — larger touch area */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }
}

/* ── Reservation steps — mobile layout ──────────────────────────── */
@media only screen and (max-width: 768px) {
    /* Progress bar steps */
    #progressbar {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 0 10px 20px;
    }
    #progressbar li span {
        width: 36px;
        height: 36px;
        line-height: 36px;
        font-size: 13px;
    }

    /* Step sidebar summary — collapse to top on mobile */
    .bookiing-form-wrap + .col-md-4,
    .col-md-4 .sidebar-widget {
        margin-top: 20px;
    }

    /* Payment method cards — full width stack */
    .pay-opt-list li {
        width: 100%;
        margin-bottom: 10px;
    }

    /* EFT bank info box */
    .eft-info-box {
        padding: 12px;
        font-size: 14px;
    }

    /* Card form inputs on payment page */
    .card-form-wrap .row [class*="col-sm-"] {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }
    .card-form-wrap .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Reservation summary card — sticky CTA area */
    .booking-sidebar,
    .booking-sidebar_content {
        position: static !important;
    }

    /* Make "Complete Reservation" button always full-width on mobile */
    .bookiing-form-wrap .custom-form .btn,
    .bookiing-form-wrap .custom-form input[type="submit"] {
        width: 100%;
        font-size: 16px;
        padding: 14px !important;
        margin-top: 10px;
    }

    /* Breadcrumbs — prevent overflow */
    .breadcrumbs.inline-breadcrumbs {
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .breadcrumbs.inline-breadcrumbs a,
    .breadcrumbs.inline-breadcrumbs span {
        white-space: nowrap;
    }
}

/* ── Package listing cards — mobile grid ────────────────────────── */
@media only screen and (max-width: 768px) {
    .listing-item.package-listing-item {
        width: 100% !important;
    }

    /* Best-selling widget — single column on small screens */
    .fl-wrap [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── Social proof / urgency band — mobile ───────────────────────── */
@media only screen and (max-width: 768px) {
    .social-proof-band {
        font-size: 13px;
        padding: 8px 14px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .social-proof-band .spb-item {
        width: 100%;
        text-align: center;
    }
}

/* ── Filter sidebar — mobile ────────────────────────────────────── */
@media only screen and (max-width: 768px) {
    /* Filter bar form — column layout */
    .fl-wrap form[style*="flex"] {
        flex-direction: column !important;
    }
    .fl-wrap form[style*="flex"] > div {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    /* Price range inputs — side by side still */
    .fl-wrap form[style*="flex"] > div > div[style*="flex"] {
        flex-direction: row !important;
    }
}

/* ── Sticky mobile reservation button ───────────────────────────── */
@media only screen and (max-width: 768px) {
    .mobile-reservation-scroll-btn {
        bottom: 12px;
        right: 12px;
        left: 12px;
        width: auto !important;
        text-align: center;
        padding: 14px !important;
        font-size: 15px;
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(232,96,44,0.4);
    }
}

/* ── Dashboard / user pages ─────────────────────────────────────── */
@media only screen and (max-width: 768px) {
    .dashboard-menu li a {
        padding: 12px 14px;
        font-size: 14px;
    }

    /* Pending reservation cards */
    .pending-res-card {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .pending-res-card img {
        width: 100% !important;
        height: 140px !important;
        object-fit: cover;
        border-radius: 6px;
    }
    .pending-res-card .prc-body {
        width: 100%;
    }
    .pending-res-card .prc-btn {
        width: 100%;
        text-align: center;
    }
}

/* ── Images — lazy load placeholder styling ─────────────────────── */
img[loading="lazy"] {
    background: #f0f0f0;
}

/* ── Prevent horizontal overflow on all screens ─────────────────── */
body {
    overflow-x: hidden;
}

/* ── Scroll-nav action buttons — compact on mobile ──────────────── */
@media only screen and (max-width: 768px) {
    .scroll-nav-wrapper-opt a.scroll-nav-wrapper-opt-btn {
        padding: 6px 10px;
        font-size: 11px;
        margin-right: 6px;
        margin-left: 0;
    }
    .scroll-nav-wrapper-opt a.scroll-nav-wrapper-opt-btn i {
        margin-right: 3px;
        font-size: 13px;
    }
}

/* Very small screens — icon only (except reservation button) */
@media only screen and (max-width: 768px) {
    /* Container tam genişlik + flex ile sol/sağ hizalama */
    .scroll-nav-wrapper-opt {
        float: none !important;
        display: flex !important;
        align-items: center;
        width: 100%;
    }
    .scroll-nav-wrapper-opt a.scroll-nav-wrapper-opt-btn {
        float: none !important;
    }
    /* Rezervasyon butonu sağa yapışık */
    .scroll-nav-wrapper-opt a.mobile-reservation-scroll-btn {
        margin-left: auto !important;
        margin-right: 0 !important;
    }
}

@media only screen and (max-width: 400px) {
    .scroll-nav-wrapper-opt a.scroll-nav-wrapper-opt-btn {
        padding: 6px 8px;
        font-size: 0;
        line-height: 1;
    }
    .scroll-nav-wrapper-opt a.scroll-nav-wrapper-opt-btn i {
        font-size: 14px;
        margin-right: 0;
    }
    /* Rezervasyon butonu: yazı göster */
    .scroll-nav-wrapper-opt a.mobile-reservation-scroll-btn {
        font-size: 12px !important;
        line-height: normal;
        padding: 6px 10px !important;
    }
    .scroll-nav-wrapper-opt a.mobile-reservation-scroll-btn i {
        margin-right: 4px !important;
        font-size: 13px !important;
    }
}

/* ── Mobile share menu — icons only, no text labels ─────────────── */
.mobile-share-menu li a span {
    display: none;
}
.mobile-share-menu li a {
    justify-content: center;
    padding: 8px 6px;
    gap: 0;
}
.mobile-share-menu li a i {
    font-size: 18px;
}

/* ── Share popup container — compact on mobile ───────────────────── */
@media only screen and (max-width: 768px) {
    .share-holder.hid-share .share-container {
        min-width: unset !important;
        padding: 6px 8px !important;
        gap: 5px !important;
    }
    .share-icon.share-icon-custom {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
    }
}

/* ── WhatsApp floating button — sit above mobile navbar ─────────── */
@media only screen and (max-width: 768px) {
    .whatsapp-float {
        bottom: 74px !important;
        right: 14px !important;
    }
    /* Slight opacity only when at page bottom (class toggled by JS) */
    .whatsapp-float.wp-near-bottom {
        opacity: 0.55;
        transition: opacity .3s ease;
    }
}

/* ── Header redesign on mobile (hamburger breakpoint ≤1250px) ────── */

/* İlan Ver button at the top of the hamburger menu */
.mob-nav-add-listing-wrap {
    display: none; /* hidden on desktop */
    padding: 10px 8px;
    border-bottom: 1px solid #eee;
    margin-bottom: 4px;
}
.mob-nav-add-listing {
    display: block;
    background: #d0202d;
    color: #fff !important;
    padding: 11px 16px;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background .2s;
}
.mob-nav-add-listing:hover {
    background: #b71c1c;
    color: #fff !important;
}
.mob-nav-add-listing i {
    margin-right: 6px;
}

@media only screen and (max-width: 1250px) {
    /* Show İlan Ver inside the mobile nav */
    .mob-nav-add-listing-wrap {
        display: block;
    }
}

/* ── Masaüstü slider özel okları ────────────────────────────────── */
.bx-wrapper {
    position: relative;
}
.bx-custom-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.22);
    color: #d0202d;
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, border-color 0.25s;
    outline: none;
    padding: 0;
    line-height: 1;
}
.bx-custom-arrow:hover {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.4);
    color: #d0202d;
}
.bx-custom-prev { left: 18px; }
.bx-custom-next { right: 18px; }

/* ── Mobil dil seçici (header içi, hamburger yanında) ───────────── */
.mob-header-lang {
    display: none; /* masaüstünde gizli */
    float: right !important;
    margin: 0 8px 0 0 !important;
    position: relative;
}
.mob-header-lang .show-lang {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 4px;
    background: transparent;
    border: none;
    padding: 0;
}
.mob-header-lang .show-lang span {
    position: static;
    margin: 0;
    display: flex;
    align-items: center;
}
.mob-header-lang .show-lang span i {
    font-size: 20px;
    color: #fff;
    line-height: 1;
}
.mob-header-lang .show-lang i.arrlan {
    display: none; /* ok ikonu header'da gereksiz */
}
.mob-header-lang .lang-tooltip {
    position: absolute !important;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    width: 140px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(-6px);
    transition: opacity .2s, transform .2s;
    padding: 4px 0;
    z-index: 9999;
}
.mob-header-lang.lang-open .lang-tooltip {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0);
}
.mob-header-lang .lang-tooltip li {
    padding: 0;
    list-style: none;
}
.mob-header-lang .lang-tooltip li a {
    display: block;
    padding: 9px 14px;
    color: #566985 !important;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}
.mob-header-lang .lang-tooltip li a:hover {
    background: #f5f5f5;
    color: #d0202d !important;
}
@media only screen and (max-width: 1250px) {
    .mob-header-lang {
        display: block;
    }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE SLIDER — full rewrite for correct display on small screens
   ════════════════════════════════════════════════════════════════════ */

/* 1 ── Fixed slider height + cover image (overrides bxSlider inline) */

/* Strip the bottom padding from ALL existing breakpoints at once */
section.hero-section {
    padding-bottom: 0 !important;
}

/* ── Mobile slider: hidden on desktop ──────────────────────────── */
.mobile-hero-slider { display: none; }

@media only screen and (max-width: 768px) {

    /* Desktop slider: hide on mobile */
    .desktop-slider-wrap { display: none !important; }

    /* Mobile slider */
    .mobile-hero-slider {
        display: block;
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    .mobile-slide { display: none; }
    .mobile-slide.active { display: block; }

    .mobile-slide-bg {
        width: 100%;
        height: 420px;
        background-size: cover;
        background-position: center center;
        position: relative;
    }
    .mobile-slide-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px 16px 16px;
        background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 60%, transparent 100%);
    }
    .mobile-slide-caption h2 {
        color: #fff;
        font-size: 1.35rem;
        line-height: 1.25;
        margin: 0 0 6px;
        -webkit-text-stroke: 1px #d0202d;
        font-weight: 700;
    }
    .mobile-slide-caption p {
        color: rgba(255,255,255,0.92);
        font-size: 0.85rem;
        line-height: 1.3;
        margin: 0 0 10px;
    }
    .mobile-slide-caption .btn {
        font-size: 12px !important;
        padding: 8px 14px !important;
        min-height: unset !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        line-height: 1 !important;
    }
    .mobile-slide-caption .btn i {
        font-size: 11px !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
    }

    /* Slider dots */
    .mobile-slider-dots {
        position: absolute;
        bottom: 8px;
        right: 12px;
        display: flex;
        gap: 5px;
        z-index: 5;
    }
    .mobile-slider-dots span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(255,255,255,0.5);
        cursor: pointer;
        transition: background 0.2s;
    }
    .mobile-slider-dots span.active { background: #d0202d; }

    /* Mobil slider okları */
    .mobile-slider-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255,255,255,0.15);
        border: 1px solid rgba(255,255,255,0.22);
        color: #d0202d;
        font-size: 15px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.25s;
        outline: none;
        padding: 0;
        line-height: 1;
    }
    .mobile-slider-arrow:hover {
        background: rgba(255,255,255,0.28);
        color: #d0202d;
    }
    .mobile-slider-prev { left: 10px; }
    .mobile-slider-next { right: 10px; }

    /* Hero section top padding matches sticky header height */
    section.hero-section {
        padding-top: 0px !important;
    }

    /* bxSlider containers */
    .bx-wrapper {
        background: transparent !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
    }
    .bx-viewport {
        height: 420px !important;
    }
    .bxslider > div,
    .bxslider > li {
        height: 420px !important;
    }
    .bxslider img {
        width:  100%   !important;
        height: 420px  !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    /* 2 ── Caption: full width, gradient overlay, positioned outside viewport clip */
    .bx-wrapper {
        position: relative !important;
        overflow: visible  !important;
    }
    .bx-viewport {
        overflow: hidden !important;
    }
    .bx-wrapper .bx-caption {
        position: fixed   !important;
        bottom: 0         !important;
        left:   0         !important;
        right:  0         !important;
        width:  100%      !important;
        z-index: 999      !important;
        background: linear-gradient(
            to top,
            rgba(0,0,0,0.80) 0%,
            rgba(0,0,0,0.45) 55%,
            transparent 100%
        ) !important;
        padding: 14px 16px 12px !important;
    }
    .bx-wrapper .bx-caption span {
        padding: 0 !important;
        display: block !important;
    }

    /* 3 ── Text */
    .bx-wrapper .bx-caption span h1 {
        font-size: 1.35rem !important;
        line-height: 1.25  !important;
        margin: 0 0 4px    !important;
        color: #fff        !important;
        -webkit-text-stroke: 1.2px #d0202d !important;
    }
    .bx-wrapper .bx-caption span h3 {
        font-size: 0.85rem !important;
        line-height: 1.3   !important;
        margin: 0 0 8px    !important;
        color: #fff        !important;
        -webkit-text-stroke: 0.6px #d0202d !important;
    }

    /* 4 ── Button */
    .bx-caption a.btn,
    .bx-wrapper .bx-caption span a.btn {
        min-height: unset   !important;
        display: inline-block !important;
        padding: 7px 32px 7px 12px !important;
        font-size: 12px     !important;
        line-height: 1.4    !important;
        margin-top: 0       !important;
        border-radius: 4px  !important;
    }
    .bx-caption a.btn i {
        right: 10px !important;
        font-size: 10px !important;
    }
}

/* Very small phones — tighten further */
@media only screen and (max-width: 400px) {
    .bx-viewport             { height: 360px !important; }
    .bxslider > div,
    .bxslider > li           { height: 360px !important; }
    .bxslider img            { height: 360px !important; }

    .bx-wrapper .bx-caption span h1 { font-size: 1.1rem !important; }
    .bx-wrapper .bx-caption span h3 { font-size: 0.75rem !important; }
}

/* ── Review platforms — mobile layout ───────────────────────────── */
@media only screen and (max-width: 768px) {
    .review-platforms-section { padding-top: 40px; }
    .review-platforms-list { gap: 20px 16px; padding-bottom: 40px; }

    .rp-logo-circle {
        width: 100px;
        height: 100px;
    }
    .rp-logo-circle img { max-width: 70%; max-height: 70%; }
    .rp-logo-circle i   { font-size: 28px; }
    .rp-cta-overlay span { font-size: 11px; }
    .rp-name { font-size: 12px; max-width: 100px; }
    .rp-meta { font-size: 11px; }
}
@media only screen and (max-width: 400px) {
    .rp-logo-circle { width: 80px; height: 80px; }
    .rp-name { max-width: 80px; font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════════════
   GENERAL RESPONSIVE — site-wide small-screen improvements
   ════════════════════════════════════════════════════════════════════ */

/* ── Images never overflow their containers ──────────────────────── */
img {
    max-width: 100%;
    height: auto;
}

/* ── Tables — horizontal scroll on narrow screens ───────────────── */
@media only screen and (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Footer columns — single column on phone ──────────────────── */
    .main-footer .col-md-3,
    .main-footer .col-md-4 {
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }
    .sub-footer .col-md-4 {
        width: 100%;
        float: none;
        text-align: center;
        margin-bottom: 10px;
    }
    .footer-social ul {
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ── Section titles — scale down on mobile ────────────────────── */
    .section-title h2 {
        font-size: 1.5rem !important;
        line-height: 1.3;
    }
    .section-title p {
        font-size: 0.9rem;
    }

    /* ── Listing cards — prevent tiny card columns ─────────────────── */
    .three-columns-grid .listing-item {
        width: 100% !important;
        float: none !important;
    }
    .listing-item {
        margin-bottom: 16px;
    }

    /* ── Single listing header — readable on phone ─────────────────── */
    .listing-hero-section .list-single-header-item h1 {
        font-size: 1.4rem !important;
        word-break: break-word;
    }

    /* ── Tabs menu — wrap on small screens ────────────────────────── */
    .main-search-input-tabs .tabs-menu {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    /* ── Stats strip — 2-column grid ─────────────────────────────── */
    .listing-counter-wrap {
        flex-wrap: wrap;
    }
    .list-single-stats li {
        width: 50%;
        margin-bottom: 8px;
    }

    /* ── Search form — stack vertically ───────────────────────────── */
    .main-search-input {
        flex-direction: column;
    }
    .main-search-input-item {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #eee;
    }

    /* ── Blog grid — single column on mobile ──────────────────────── */
    .blog-grid .col-md-4,
    .post-container .col-md-4 {
        width: 100%;
        float: none;
    }

    /* ── Box widget items — full width on mobile ───────────────────── */
    .box-widget-item {
        margin-bottom: 16px;
    }

    /* ── Price / reservation sidebar — below content on mobile ──── */
    .list-main-wrap-opt .col-md-8,
    .list-main-wrap-opt .col-md-4 {
        width: 100%;
        float: none;
    }

    /* ── Breadcrumbs — smaller on mobile ──────────────────────────── */
    .breadcrumbs a,
    .breadcrumbs span {
        font-size: 12px;
    }
}

/* ── Accordion / FAQ — prevent text overlapping the +/− button ───── */
.accordion a.toggle {
    padding-right: 72px !important;
    word-break: break-word;
}
/* Ensure the span (+ button) never shrinks on very small screens */
.accordion a.toggle span {
    min-width: 52px;
    width: 52px;
}

/* ════════════════════════════════════════════════════════════════════
   FAZ 1 — GLOBAL TEMEL DÜZELTMELERi
   ════════════════════════════════════════════════════════════════════ */

/* Ensure no element creates horizontal scroll */
@media only screen and (max-width: 768px) {
    .fl-wrap,
    .container,
    .content {
        max-width: 100%;
    }

    /* Inline-block / floated items — prevent tiny overflow */
    .fl-wrap > * {
        max-width: 100%;
    }
}

/* ════════════════════════════════════════════════════════════════════
   FAZ 2 — HEADER & NAVİGASYON
   ════════════════════════════════════════════════════════════════════ */

/* ── Hide header-top on phones — saves 35px of vertical space ───────── */
@media only screen and (max-width: 640px) {
    .header-top {
        display: none;
    }
    /* Without header-top, main-header shrinks to just the logo row */
    .main-header {
        height: 80px !important;
    }
    /* Mobile nav dropdown opens right below the slimmer header */
    .main-menu {
        top: 80px !important;
    }
}

/* ── header-area: tighter padding on narrow phones ───────────────────── */
@media only screen and (max-width: 360px) {
    .header-area {
        padding: 0 6px !important;
    }
}

/* ── show-reg-form: icon-only on small phones ─────────────────────────── */
@media only screen and (max-width: 480px) {
    .show-reg-form {
        font-size: 0 !important;   /* hide text */
        padding: 0 4px !important;
        margin-right: 6px !important;
        min-width: 36px;
        justify-content: center;
    }
    .show-reg-form i {
        font-size: 18px !important;
        margin-right: 0 !important;
    }
    /* Logout: hide completely — too cluttered; dashboard link is enough */
    .show-reg-form.logout {
        display: none !important;
    }
}

/* ── Cart header-modal: never exceed viewport on tiny screens ────────── */
@media only screen and (max-width: 400px) {
    .header-modal {
        width: calc(100vw - 16px) !important;
        right: -8px !important;
        left: auto !important;
    }
}

/* ── Hamburger menu panel: full-width on very small screens ──────────── */
@media only screen and (max-width: 400px) {
    .main-menu {
        width: calc(100vw - 10px) !important;
        right: -5px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   FAZ 3 — ANASAYFA (HERo & ARAMA)
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero search tabs — scrollable on small screens ─────────────────── */
@media only screen and (max-width: 768px) {
    .main-search-input-tabs .tabs-menu {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
        padding-bottom: 6px;
        scrollbar-width: none; /* hide scrollbar Firefox */
    }
    .main-search-input-tabs .tabs-menu::-webkit-scrollbar {
        display: none;
    }
    .main-search-input-tabs .tabs-menu li {
        flex-shrink: 0;
    }

    /* Search inputs: style.css already sets width:100% at ≤768px (float-based) */
    /* Just ensure border-right is removed since items stack */
    .main-search-input-item {
        border-right: none !important;
    }
}

/* ── Listing grid on homepage — responsive columns ───────────────────── */
@media only screen and (max-width: 768px) {
    /* Swiper listing cards — full card visible */
    .listing-slider-item {
        width: 100%;
    }

    /* Featured listings 3-column → 1-column */
    .listing-item {
        width: 100% !important;
        float: none !important;
    }
}

/* ── Tablet: hero search inputs — 2-column float grid ───────────────── */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .main-search-input-item {
        width: 50% !important;
        float: left;
    }
    .main-search-input-item:nth-child(odd) {
        clear: left;
    }
    .main-search-input-item.main-search-button {
        width: 100% !important;
        clear: both;
    }
}

/* ── Hero categories — mobil: sadece yazı, pill tasarım ─────────── */
@media only screen and (max-width: 768px) {
    .hero-categories {
        display: block !important;
        float: none !important;
        padding: 14px 12px !important;
        margin: 0 !important;
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
        overflow-x: unset !important;
    }
    .hero-categories ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 7px 8px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        width: 100% !important;
    }
    .hero-categories li {
        flex: 0 0 calc(50% - 4px) !important;
        display: block !important;
        width: calc(50% - 4px) !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .hero-categories li a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 8px 6px !important;
        border-radius: 20px !important;
        border: 1.5px solid rgba(208, 32, 45, 0.3) !important;
        background: #fff !important;
        color: #d0202d !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        text-align: center !important;
        text-decoration: none;
        transition: background 0.2s, border-color 0.2s;
    }
    .hero-categories li a:hover,
    .hero-categories li:hover a {
        background: #d0202d !important;
        border-color: #d0202d !important;
        color: #fff !important;
        box-shadow: none !important;
    }
    .hero-categories li a img {
        display: none !important;
    }
    .hero-categories li span {
        display: inline !important;
        width: auto !important;
        margin: 0 !important;
        font-size: inherit !important;
        color: inherit !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   FAZ 4 — LİSTE SAYFASI
   ════════════════════════════════════════════════════════════════════ */

@media only screen and (max-width: 768px) {
    /* Listing filter bar — full width */
    .listing-filters,
    .listing-filters a {
        width: 100% !important;
    }

    /* Filter sidebar toggle on mobile — lws_mobile class already handles this */
    .lws_mobile {
        display: block !important;
    }

    /* Sort / grid options row */
    .list-main-wrap-opt {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    .list-main-wrap-title h2 {
        font-size: 1rem;
    }
    .list-main-wrap-title {
        width: 100%;
    }
}

/* Tablet: 2-column listing grid */
@media only screen and (min-width: 600px) and (max-width: 991px) {
    .listing-item {
        width: 50% !important;
        float: left !important;
    }
    .listing-item:nth-child(odd) {
        clear: left;
    }
    .listing-item:nth-child(even) {
        clear: none;
    }
}

/* ════════════════════════════════════════════════════════════════════
   FAZ 5 — DETAY SAYFASI (Otel, Tur, Yat, Villa)
   ════════════════════════════════════════════════════════════════════ */

@media only screen and (max-width: 991px) {
    /* Main col (col-md-8) + sidebar (col-md-4): full width stack */
    .list-single-main-wrapper,
    .list-single-main-wrapper + .col-md-4,
    .gray-bg .col-md-8,
    .gray-bg .col-md-4 {
        width: 100% !important;
        float: none !important;
    }

    /* Swiper gallery on detail page */
    .single-slider-wrap .swiper-container {
        height: 240px !important;
    }
    .single-slider-wrap .swiper-slide img {
        height: 240px !important;
        object-fit: cover;
    }

    /* Room gallery thumbnails */
    .room-gallery-primary img {
        max-height: 280px;
        object-fit: cover;
        width: 100%;
    }

    /* Detail page header */
    .list-single-header-item h1 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }

}

/* ── Scroll-nav: horizontal scroll on tablet (phone handled by existing rules) */
@media only screen and (min-width: 769px) and (max-width: 991px) {
    .scroll-nav-wrapper .container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        white-space: nowrap;
    }
    .scroll-nav-wrapper .container::-webkit-scrollbar { display: none; }
    .scroll-nav {
        float: none !important;
        display: inline-block;
        white-space: nowrap;
        border-right: none !important;
    }
    .scroll-nav li {
        display: inline-block !important;
        float: none !important;
    }
    .scroll-nav a { white-space: nowrap; }
    .scroll-nav-wrapper-opt {
        float: none !important;
        display: inline-flex !important;
        vertical-align: top;
    }
}

/* ── Booking widget: sticky only on desktop, natural flow on mobile ──── */
@media only screen and (max-width: 991px) {
    .booking-sidebar,
    .booking-sidebar_content {
        position: static !important;
        max-height: none !important;
    }

    /* Remove internal scroll on the widget box for mobile */
    .reservation-area .box-widget {
        overflow-y: visible !important;
        max-height: none !important;
    }
}

/* Detail page inner col-md-4 inside the main content area */
@media only screen and (max-width: 768px) {
    .list-single-main-item .col-md-4,
    .list-single-main-item .col-md-8,
    .list-single-main-item .col-md-6 {
        width: 100% !important;
        float: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   FAZ 6 — SEPET & ÖDEME
   ════════════════════════════════════════════════════════════════════ */

@media only screen and (max-width: 991px) {
    /* Checkout: col-md-5 (summary) + col-md-7 (form) → full width stack
       Bootstrap 3 col-md-* already stacks <992px; these are safety rules */
    .col-md-5, .col-md-7 {
        width: 100% !important;
        float: none !important;
    }
}

@media only screen and (max-width: 768px) {
    /* Cart header-modal widget posts — image above text */
    .widget-posts li {
        overflow: hidden;
    }
    .widget-posts-img {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px;
        object-fit: cover;
    }

    /* Payment options — stack vertically on phones */
    .payment-opts-row .col-sm-6 {
        width: 100% !important;
        float: none !important;
    }
    .payment-opt--right::before {
        display: none !important; /* hide vertical divider when stacked */
    }

    /* Reservation steps sidebar */
    .reservation-step-sidebar {
        margin-top: 20px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   FAZ 7 — DASHBOARD
   ════════════════════════════════════════════════════════════════════ */

@media only screen and (max-width: 991px) {
    /* Dashboard: col-md-3 sidebar + col-md-9 content → full width stack
       Bootstrap 3 already handles this at <992px; these are safety overrides */
    .content-holder > .col-md-3,
    .content-holder > .col-md-9 {
        width: 100% !important;
        float: none !important;
    }

    /* user-profile-menu-wrap: hidden by default on mobile
       (JS slideToggle via .init-dsmen button already handles show/hide) */
    .user-profile-menu-wrap {
        display: none; /* JS will slideToggle this */
    }

    /* The toggle button (Menu ☰) — already visible via style.css at ≤1250px */
    .mob-nav-content-btn.init-dsmen {
        margin-bottom: 10px;
        border-radius: 4px;
    }

    /* Dashboard tables — horizontal scroll */
    .fl-wrap table,
    .dashboard-title ~ .fl-wrap table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 13px;
        max-width: 100%;
    }
    .fl-wrap table td,
    .fl-wrap table th {
        white-space: nowrap;
        padding: 8px 10px !important;
    }

    /* Dashboard stat boxes — 2 columns on tablet */
    .inline-facts-wrap {
        width: 50% !important;
    }
}

/* Very small screens: dashboard stats single column */
@media only screen and (max-width: 480px) {
    .inline-facts-wrap {
        width: 100% !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   FAZ 8 — FOOTER & GLOBAL MODALLER
   ════════════════════════════════════════════════════════════════════ */

@media only screen and (max-width: 768px) {
    /* Login / register modal — full width on phones */
    .main-register-holder {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 20px 16px !important;
    }
    .main-register-wrap {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Custom form: all cols full width */
    .custom-form .col-sm-6,
    .custom-form .col-md-6 {
        width: 100% !important;
        float: none !important;
    }

    /* Footer: already covered, extra safety */
    .main-footer .col-md-3,
    .main-footer .col-md-4,
    .main-footer .col-md-2 {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px;
    }

    /* Sub-footer columns */
    .sub-footer .col-md-4,
    .sub-footer .col-md-8 {
        width: 100% !important;
        float: none !important;
        text-align: center;
        margin-bottom: 8px;
    }
}

/* ── Global modal overlay — scrollable on mobile ─────────────────────── */
@media only screen and (max-width: 768px) {
    .main-register-holder {
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Contact / page forms — full-width on mobile ─────────────────────── */
@media only screen and (max-width: 768px) {
    .contact-form-wrap .col-sm-6,
    .contact-form-wrap .col-md-6,
    .contact-form-wrap .col-sm-12 {
        width: 100% !important;
        float: none !important;
    }
}

/* ── Blog grid responsive ─────────────────────────────────────────────── */
@media only screen and (max-width: 768px) {
    .post-container .col-md-4,
    .blog-wrap .col-md-4,
    .blog-wrap .col-md-8 {
        width: 100% !important;
        float: none !important;
    }
}

/* ── Packages listing ─────────────────────────────────────────────────── */
@media only screen and (max-width: 768px) {
    .packages-listing .col-md-6,
    .packages-listing .col-md-4 {
        width: 100% !important;
        float: none !important;
        margin-bottom: 16px;
    }
}

/* ── Map / list toggle — full width on mobile ────────────────────────── */
@media only screen and (max-width: 768px) {
    #map-container {
        height: 280px !important;
    }
}

/* ── Hotel daterangepicker — single column on mobile ────────────────── */
@media only screen and (max-width: 600px) {
    .drp-hotel-dates {
        width: 280px !important;
        min-width: unset !important;
    }
    .drp-hotel-dates .drp-calendar.left {
        display: none !important; /* show only right (current) month on phone */
    }
    .drp-hotel-dates .drp-calendar.right {
        width: 100% !important;
        max-width: 280px !important;
        float: none !important;
        border-left: none !important;
    }
}