.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

/* Packages tab: kayan pill (arka planda beyaz/gri kutu) */
.packages-tab-slider {
    position: absolute;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), top 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.28s cubic-bezier(0.4, 0, 0.2, 1), height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}
.dark .packages-tab-slider {
    background: #374151;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}
/* Aktif sekme: arka plan pill’den gelir, sadece metin rengi */
.packages-tab-btn.packages-tab-active {
    background: transparent !important;
    color: #1193d4 !important;
}
.packages-tab-btn.packages-tab-active:hover {
    background: transparent !important;
    color: #1193d4 !important;
}
.dark .packages-tab-btn.packages-tab-active {
    background: transparent !important;
    color: #60a5fa !important;
}
.dark .packages-tab-btn.packages-tab-active:hover {
    background: transparent !important;
    color: #60a5fa !important;
}

/* İçerik geçişi: fade */
.packages-tab-content {
    transition: opacity 0.22s ease-out;
}
.packages-tab-content.packages-tab-content--hide {
    opacity: 0;
    pointer-events: none;
}

.day-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    border-radius: 0.5rem;
    text-align: center;
    min-height: 80px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.day-cell.available {
    background-color: var(--green-available);
    color: #36b251;
}

.day-cell.available:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.day-cell.unavailable {
    background-color: var(--red-unavailable);
    color: #ef4444;
    opacity: 0.6;
    cursor: not-allowed;
}

.day-cell.unavailable:hover {
    transform: none;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.day-cell.selected {
    border: 2px solid var(--primary);
    box-shadow: 0 0 0 3px rgba(17, 147, 212, 0.3);
}

.day-cell.today {
    outline: 1px dashed var(--gray-selected);
    outline-offset: 1px;
}

.calendar-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.calendar-month-grid .day-name {
    text-align: center;
    font-weight: 600;
    color: #4a5568;
}

.calendar-month-grid .day-number {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: #1a202c;
}

.day-cell .old-price {
    font-size: 0.75rem;
    color: #ef4444;
    text-decoration: line-through;
    line-height: 1;
    margin-bottom: 2px;
}

.day-cell .current-price {
    font-size: 1rem;
    font-weight: 700;
    color: #1a202c;
    line-height: 1;
}

.dark .day-cell.available {
    background-color: rgba(52, 211, 153, 0.2);
    color: var(--green-available-dark);
}

.dark .day-cell.unavailable {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--red-unavailable-dark);
}

.dark .calendar-month-grid .day-name {
    color: #cbd5e0;
}

.dark .day-cell .day-number {
    color: white;
}

.dark .day-cell .current-price {
    color: white;
}

.dark .day-cell.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(17, 147, 212, 0.3);
}

.dark .day-cell.today {
    outline-color: var(--gray-selected);
}

#booking-calendar .day-cell-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#booking-calendar .day-cell .day-number {
    position: absolute;
    top: 8px;
    right: 10px;
    margin: 0 !important;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
}

/* Rooms & Guests Selector Styles */
#guests-dropdown.show {
    opacity: 1;
    translate: 0;
}

.room-item {
    animation: slideIn 0.3s ease-out;
}

.room-item.removing {
    animation: slideOut 0.3s ease-in;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Booking Summary Sidebar Styles */
.rooms-layout-container {
    width: 100%;
}

.rooms-layout-split {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    transition: all 0.3s ease-out;
}

#rooms-list-container {
    flex: 1;
    min-width: 0;
    transition: max-width 0.3s ease-out;
}

.rooms-layout-split.has-sidebar #rooms-list-container {
    max-width: calc(100% - 420px);
}

.booking-summary-sidebar {
    width: 400px;
    flex-shrink: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    position: sticky;
    top: 3rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.dark .booking-summary-sidebar {
    background: #1f2937;
    border-color: #374151;
}

.booking-summary-sidebar.visible {
    opacity: 1;
    transform: translateX(0);
}

.booking-summary-sidebar.hidden {
    display: none;
}

#booking-summary-sidebar {
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: var(--scroll-thumb) transparent;
}

#booking-summary-sidebar::-webkit-scrollbar {
    width: 6px;
}

/* Light theme */
:root {
    --scroll-thumb: rgba(0, 0, 0, 0.25);
    --scroll-thumb-hover: rgba(0, 0, 0, 0.45);
    /* Amber palette (oklch) */
    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-200: oklch(92.4% 0.12 95.746);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-800: oklch(47.3% 0.137 46.201);
    --color-amber-900: oklch(41.4% 0.112 45.904);
    --color-amber-950: oklch(27.9% 0.077 45.635);
}

/* Dark theme */
.dark {
    --scroll-thumb: rgba(255, 255, 255, 0.25);
    --scroll-thumb-hover: rgba(255, 255, 255, 0.45);
}

/* Amber background utilities (oklch from :root) */
.bg-amber-50 { background-color: var(--color-amber-50); }
.bg-amber-100 { background-color: var(--color-amber-100); }
.bg-amber-200 { background-color: var(--color-amber-200); }
.bg-amber-300 { background-color: var(--color-amber-300); }
.bg-amber-400 { background-color: var(--color-amber-400); }
.bg-amber-500 { background-color: var(--color-amber-500); }
.bg-amber-600 { background-color: var(--color-amber-600); }
.bg-amber-700 { background-color: var(--color-amber-700); }
.bg-amber-800 { background-color: var(--color-amber-800); }
.bg-amber-900 { background-color: var(--color-amber-900); }
.bg-amber-950 { background-color: var(--color-amber-950); }
.dark\:bg-amber-900\/30 { background-color: oklch(41.4% 0.112 45.904 / 0.3); }

/* Amber text utilities */
.text-amber-700 { color: var(--color-amber-700); }
.text-amber-800 { color: var(--color-amber-800); }
.dark .dark\:text-amber-300 { color: var(--color-amber-700); }
.dark .dark\:text-amber-400 { color: var(--color-amber-800); }

#booking-summary-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

#booking-summary-sidebar::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb);
    border-radius: 9999px;
    transition: background-color 0.2s ease;
}

#booking-summary-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: var(--scroll-thumb-hover);
}


.booking-summary-header {
    margin-bottom: .5rem;
}

.booking-summary-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.dark .booking-summary-title {
    color: #f9fafb;
}

.booking-summary-hotel {
    font-size: 0.875rem;
    color: #6b7280;
}

.dark .booking-summary-hotel {
    color: #9ca3af;
}

.booking-summary-image {
    width: 100%;
    height: calc(var(--spacing) * 24);
    object-fit: cover;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.booking-summary-room-item {
    padding: 0.5rem 1rem;
    background: #f9fafb;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.dark .booking-summary-room-item {
    background: #374151;
}

.booking-summary-packages-offers {
    margin-top: 1.5rem;
}

.booking-summary-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.75rem;
}

.dark .booking-summary-section-title {
    color: #f9fafb;
}

.booking-summary-packages-offers-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.booking-summary-packages-offers-list .booking-summary-room-item {
    margin-bottom: 1rem;
}

.booking-summary-packages-offers-list .booking-summary-room-item:last-child {
    margin-bottom: 0;
}

.booking-summary-room-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.booking-summary-room-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    flex: 1;
}

.dark .booking-summary-room-name {
    color: #f9fafb;
}

.booking-summary-remove-btn {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1.25rem;
    line-height: 1;
    transition: opacity 0.2s;
}

.booking-summary-remove-btn:hover {
    opacity: 0.7;
}

.booking-summary-room-details {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.dark .booking-summary-room-details {
    color: #9ca3af;
}

.booking-summary-room-price {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
}

.dark .booking-summary-room-price {
    color: #f9fafb;
}

.booking-summary-info {
    padding: 1rem 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    margin: 1rem 0;
}

.dark .booking-summary-info {
    border-color: #374151;
}

.booking-summary-info-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.booking-summary-info-item:last-child {
    margin-bottom: 0;
}

.booking-summary-info-label-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.booking-summary-info-label {
    font-size: 0.875rem;
    color: #6b7280;
}

.dark .booking-summary-info-label {
    color: #9ca3af;
}

.booking-summary-info-icon {
    font-size: 1.125rem;
    color: #6b7280;
}

.dark .booking-summary-info-icon {
    color: #9ca3af;
}

.booking-summary-info-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
}

.dark .booking-summary-info-value {
    color: #f9fafb;
}

.booking-summary-price-breakdown {
    margin: 1rem 0;
}

.booking-summary-price-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.booking-summary-price-row.total {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1193d4;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 2px solid #e5e7eb;
}

.dark .booking-summary-price-row.total {
    border-color: #374151;
}

.booking-summary-price-label {
    color: #6b7280;
}

.dark .booking-summary-price-label {
    color: #9ca3af;
}

.booking-summary-price-value {
    font-weight: 600;
    color: #1f2937;
}

.dark .booking-summary-price-value {
    color: #f9fafb;
}

.booking-summary-total-note {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.5rem;
    text-align: center;
}

.dark .booking-summary-total-note {
    color: #9ca3af;
}

.booking-summary-checkout-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #1193d4;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 1rem;
}

.booking-summary-checkout-btn:hover {
    background: #0d7bb8;
}

.booking-summary-checkout-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

/* Ödeme sayfası: oda seçimine dön (arka plan + odak — Tailwind’de olmayan utility’ler) */
.payment-back-to-room-selection {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: #4b5563;
    background-color:#e4e4e4;
    border-radius: 0.375rem;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.payment-back-to-room-selection .material-symbols-outlined {
    position: relative;
    top: 0.06em;
}

.payment-back-to-room-selection:hover {
    color: #1193d4;
    background-color: #e5e7eb;
}

.payment-back-to-room-selection:focus {
    outline: none;
}

.payment-back-to-room-selection:focus-visible {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #1193d4;
}

.dark .payment-back-to-room-selection {
    color: #d1d5db;
    background-color: #374151;
}

.dark .payment-back-to-room-selection:hover {
    color: #60a5fa;
    background-color: #4b5563;
}

.dark .payment-back-to-room-selection:focus-visible {
    box-shadow: 0 0 0 2px #111827, 0 0 0 4px #60a5fa;
}

/* Responsive */
/* NOT: Eski @media (max-width: 1024px) blogu buradan kaldirildi.
   Rezervasyon ozetini 769-1024 bandinda TAM GENISLIK ALTA diziyordu; tasarimda
   boyle bir sunum yok. CSS o bantta yan yanayi birakiyor, JS ise ayni bandi mobil
   saymiyordu -- ikisinin arasinda kimsenin tanimlamadigi ucuncu bir hal olusuyordu
   (iPad Pro dikey, 1024px). Artik o bant mobil sunuma dahil: asagidaki mobil
   bloklarin esigi 1024px'e cekildi ve booking-core.js icindeki
   isBookingMobileViewport() ayni esikle hizalandi. Ikisi birlikte degismeli. */

/* Desktop (768px+): hide mobile-only button, link and mobile price line; show both price blocks */
@media (min-width: 768px) {
    .room-mobile-price-gece {
        display: none !important;
    }
    .room-toggle-btn {
        display: none !important;
    }
    .room-card-details-mobile {
        display: block !important;
    }
    .show-other-price-wrapper {
        display: none !important;
    }
    /* İkinci fiyat bloğu da üstteki gibi flex row olsun (display: block flex'i bozuyordu) */
    .accommodation-price-section-secondary {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 1rem !important;
    }
}

@media (max-width: 1024px) {
    .rooms-layout-container {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .rooms-layout-split {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        align-items: stretch;
    }

    #rooms-list-container {
        width: 100%;
        flex: 1;
        min-width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
    }

    .rooms-layout-split.has-sidebar #rooms-list-container {
        max-width: 100%;
    }

    .booking-summary-sidebar {
        width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* Force room cards to full width on mobile */
    #rooms-list-container>div>.@container {
        width: 100%;
        max-width: 100%;
    }

    #rooms-list-container>div>.@container >div {
        width: 100%;
        max-width: 100%;
    }

    /* Mobile room card: description clamp (mobile only) and expand */
    @media (max-width: 767px) {
        .room-description-text.line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    }
    .room-description-text.line-clamp-none {
        display: block;
        overflow: visible;
        -webkit-line-clamp: unset;
    }

    /* Mobile Floating Cart Button - flat, modern, non-3D */
    .mobile-booking-cart {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1050;

        padding: 12px 18px;
        border-radius: 9999px;

        display: none !important;
        align-items: center;
        gap: 12px;

        background: var(--color-primary);
        color: #fff;
        border: none;
        cursor: pointer;

        font-weight: 600;
        font-size: 0.95rem;

        /* FLAT SHADOW – no 3D */
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);

        /* entrance animation */
        opacity: 0;
        transform: translateY(8px) scale(0.96);
        transition:
            opacity 0.25s ease,
            transform 0.25s ease,
            box-shadow 0.25s ease;
    }

    /* visible state */
    .mobile-booking-cart.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* tap feedback */
    .mobile-booking-cart:active {
        transform: scale(0.97);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
    }

    /* icon area */
    .mobile-booking-cart .cart-icon {
        position: relative;
        font-size: 1.2rem;
        line-height: 1;
    }

    /* count badge */
    .mobile-booking-cart .cart-count {
        position: absolute;
        top: -6px;
        right: -8px;

        min-width: 18px;
        height: 18px;
        padding: 0 5px;

        border-radius: 9999px;
        background: #ef4444;
        /* red badge */
        color: #fff;

        font-size: 0.7rem;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
    }

    /* price text */
    .mobile-booking-cart .cart-price {
        font-size: 1rem;
        font-weight: 700;
        white-space: nowrap;
    }

    /* dark mode tweak */
    .dark .mobile-booking-cart {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    }

    /* desktop hidden */
    @media (min-width: 1025px) {
        .mobile-booking-cart {
            display: none !important;
        }
    }

    /* mobile only */
    @media (max-width: 1024px) {
        .mobile-booking-cart.visible {
            display: flex !important;
        }
    }


    .mobile-cart-divider {
        opacity: 0.7;
        font-weight: 600;
    }

    /* Fly-to-cart animation (mobile) */
    .fly-to-cart {
        position: fixed;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--color-primary);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        z-index: 1060;
        pointer-events: none;
        transform: translate(-50%, -50%);
        transition: left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            opacity 0.2s ease;
    }

    .fly-to-cart.landed {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    /* Select button shrink to circle (mobile only) */
    @media (max-width: 1024px) {
        .select-room-btn {
            transition: width 0.32s ease, height 0.32s ease, min-width 0.32s ease,
                padding 0.32s ease, border-radius 0.32s ease;
        }

        .select-room-btn--shrinking {
            width: 32px !important;
            min-width: 32px !important;
            height: 32px !important;
            padding: 0 !important;
            border-radius: 50% !important;
        }

        .select-package-btn {
            transition: width 0.32s ease, height 0.32s ease, min-width 0.32s ease,
                padding 0.32s ease, border-radius 0.32s ease;
        }

        .select-package-btn--shrinking {
            width: 32px !important;
            min-width: 32px !important;
            height: 32px !important;
            padding: 0 !important;
            border-radius: 50% !important;
        }

        .yolcu360-select-vehicle-btn {
            transition: width 0.32s ease, height 0.32s ease, min-width 0.32s ease,
                padding 0.32s ease, border-radius 0.32s ease;
        }

        .yolcu360-select-vehicle-btn--shrinking {
            width: 32px !important;
            min-width: 32px !important;
            height: 32px !important;
            padding: 0 !important;
            border-radius: 50% !important;
        }
    }

    /* Mobile Bottom Sheet Overlay */
    .mobile-booking-sheet-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
        display: none !important;
    }

    .mobile-booking-sheet-overlay.visible {
        opacity: 1;
        visibility: visible;
        display: block !important;
    }

    .mobile-booking-sheet-overlay.visible.closing {
        opacity: 0;
    }

    /* Mobile Bottom Sheet */
    .mobile-booking-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 85vh;
        max-height: 95vh;
        background: white;
        z-index: 1001;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.4s ease;
        display: none;
        flex-direction: column;
        overflow: hidden;
    }

    .mobile-booking-sheet.visible {
        transform: translateY(0);
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.2);
    }

    .mobile-booking-sheet.visible.closing {
        transform: translateY(100%);
    }

    .mobile-booking-sheet.dragging {
        transition: none;
    }

    .mobile-booking-sheet-handle {
        flex-shrink: 0;
        padding: 12px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: grab;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
    }

    .mobile-booking-sheet-handle:active {
        cursor: grabbing;
    }

    .mobile-booking-sheet-handle-bar {
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #d1d5db;
    }

    .dark .mobile-booking-sheet-handle-bar {
        background: #6b7280;
    }

    .mobile-booking-sheet-body {
        flex: 1;
        width: 100%;
        min-width: 0;
        overflow-y: auto;
        padding: 0 1rem 1.5rem;
        min-height: 0;
        box-sizing: border-box;
    }

    .dark .mobile-booking-sheet {
        background: #1f2937;
    }

    @media (max-width: 1024px) {
        .mobile-booking-sheet {
            display: flex;
        }
    }

    /* Hide desktop sidebar on mobile.
       DİKKAT: #booking-summary-sidebar ID'si iki ayrı sayfada kullanılıyor —
       booking/index'te (bu blok) mobilde yerini .mobile-booking-sheet alıyor, ama
       ödeme sayfasındaki <aside> aynı ID'yi taşıyor ve orada mobil karşılığı YOK.
       Bu yüzden sadece index varyantını (.booking-summary-sidebar class'ı da olan)
       hedefliyoruz; aksi halde ödeme sayfasında özet mobilde tamamen kayboluyor. */
    @media (max-width: 1024px) {
        #booking-summary-sidebar.booking-summary-sidebar {
            display: none !important;
        }
    }
}

/* Desktop: hide mobile cart and sheet overlay (only for mobile when room selected) */
@media (min-width: 1025px) {
    .mobile-booking-cart,
    .mobile-booking-sheet-overlay {
        display: none !important;
    }
}

/*
 * Telefon yatay (genişlik >768): .mobile-booking-cart / sheet kuralları sadece max-width:768 içinde
 * tanımlı olduğu için burada yeniden verilmezse eleman body sonunda akışta (footer altı) kalır.
 */
@media (min-width: 769px) and (orientation: landscape) and (max-height: 640px) and (max-width: 1200px) {
    .mobile-booking-cart {
        position: fixed;
        bottom: 20px;
        right: 20px;
        left: auto;
        z-index: 1050;
        padding: 12px 18px;
        border-radius: 9999px;
        align-items: center;
        gap: 12px;
        flex-direction: row;
        background: var(--color-primary);
        color: #fff;
        border: none;
        cursor: pointer;
        font-weight: 600;
        font-size: 0.95rem;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
        margin: 0;
        box-sizing: border-box;
        max-width: calc(100vw - 40px);
        opacity: 0;
        transform: translateY(8px) scale(0.96);
        transition:
            opacity 0.25s ease,
            transform 0.25s ease,
            box-shadow 0.25s ease;
    }

    .mobile-booking-cart:not(.visible) {
        display: none !important;
    }

    .mobile-booking-cart.visible {
        display: flex !important;
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .mobile-booking-cart:active {
        transform: scale(0.97);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
    }

    .dark .mobile-booking-cart {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    }

    .mobile-booking-sheet-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
    }

    .mobile-booking-sheet-overlay:not(.visible) {
        display: none !important;
    }

    .mobile-booking-sheet-overlay.visible {
        opacity: 1;
        visibility: visible;
        display: block !important;
    }

    .mobile-booking-sheet-overlay.visible.closing {
        opacity: 0;
    }

    .mobile-booking-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 85vh;
        max-height: 95vh;
        background: white;
        z-index: 1001;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.4s ease;
        flex-direction: column;
        overflow: hidden;
    }

    .mobile-booking-sheet:not(.visible) {
        display: none !important;
    }

    .mobile-booking-sheet.visible {
        display: flex !important;
        transform: translateY(0);
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.2);
    }

    .mobile-booking-sheet.visible.closing {
        transform: translateY(100%);
    }

    .mobile-booking-sheet.dragging {
        transition: none;
    }

    .mobile-booking-sheet-handle {
        flex-shrink: 0;
        padding: 12px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: grab;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
    }

    .mobile-booking-sheet-handle:active {
        cursor: grabbing;
    }

    .mobile-booking-sheet-handle-bar {
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #d1d5db;
    }

    .dark .mobile-booking-sheet-handle-bar {
        background: #6b7280;
    }

    .mobile-booking-sheet-body {
        flex: 1;
        width: 100%;
        min-width: 0;
        overflow-y: auto;
        padding: 0 1rem 1.5rem;
        min-height: 0;
        box-sizing: border-box;
    }

    .dark .mobile-booking-sheet {
        background: #1f2937;
    }

    .fly-to-cart {
        position: fixed;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--color-primary);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        z-index: 1060;
        pointer-events: none;
        transform: translate(-50%, -50%);
        transition: left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            opacity 0.2s ease;
    }

    .fly-to-cart.landed {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
}

.counter-btn {
    transition: all 0.2s ease-in-out;
}

.counter-btn:hover:not(:disabled) {
    transform: scale(1.1);
}

.counter-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.child-age-select {
    animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Global tooltip: JS-driven (booking-core.js) — data-tooltip="text" data-tooltip-placement="top|bottom|left|right" */
#global-tooltip {
    max-width: 280px;
    word-break: break-word;
}

/* Currency Conversion Loading Overlay */
.currency-conversion-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.currency-conversion-overlay.active {
    opacity: 1;
    visibility: visible;
}

.currency-conversion-spinner {
    background: white;
    border-radius: 0.75rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.dark .currency-conversion-spinner {
    background: #1f2937;
}

.currency-conversion-spinner-icon {
    width: 48px;
    height: 48px;
    border: 4px solid #e5e7eb;
    border-top-color: #1193d4;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.dark .currency-conversion-spinner-icon {
    border-color: #374151;
    border-top-color: #1193d4;
}

.currency-conversion-spinner-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
}

.dark .currency-conversion-spinner-text {
    color: #9ca3af;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Price transition animation */
.price-updating {
    opacity: 0.5;
    transition: opacity 0.3s ease-out;
}

.price-updated {
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

/* Toast: smaller on mobile (+ telefon yatay: genişlik md+ iken aynı küçük toast) */
@media (max-width: 768px), (min-width: 769px) and (orientation: landscape) and (max-height: 640px) and (max-width: 1200px) {
    .swal2-toast {
        max-width: 85%;
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }

    .swal2-toast .swal2-title {
        font-size: 0.875rem;
        padding: 0 0.25rem;
    }

    .swal2-toast .swal2-icon {
        width: 1.75rem;
        height: 1.75rem;
        margin: 0 0.35rem 0 0;
    }
}

/* TAKVİM CSSLER */

@media (max-width: 768px), (min-width: 769px) and (orientation: landscape) and (max-height: 640px) and (max-width: 1200px) {
    /* Mobile stacked calendar: padding around scrollable content (no wrapper; layout via order above) */
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-month,
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-weekdaycontainer,
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .dayContainer {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-month {
        padding-top: 0 !important;
        padding-bottom: 8px !important;
        min-height: 44px !important;
        padding-top: 2% !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-month:not(:first-of-type) {
        margin-top: 24px !important;
        padding-top: 8px !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-weekdaycontainer {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        margin-bottom: 6px !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .dayContainer {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    .flatpickr-current-month input.cur-year {
        box-shadow: none !important;
    }

    .yolcu360-calendar-backdrop{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,0.45);
        backdrop-filter:blur(6px);
        -webkit-backdrop-filter:blur(6px);
        z-index:99998;

        opacity:0;
        transition:opacity .25s ease;
    }

    .yolcu360-calendar-backdrop.visible{
        opacity:1;
    }


    .flatpickr-calendar.yolcu360-dates-fp-mobile{
        animation:calendarFadeIn .28s cubic-bezier(.2,.8,.2,1);
    }

    @keyframes calendarFadeIn{
        from{
            opacity:0;
            transform:translate(-50%, -40%) scale(.96);
        }
        to{
            opacity:1;
            transform:translate(-50%, -50%) scale(1);
        }
    }
}


/* DESKTOP: Yolcu360 takvimini Flatpickr'ın normal 2 aylık görünümüne zorla döndür
   (.yolcu360-dates-fp-mobile hariç: telefon yatayda genişlik >768 olsa da stacked mobil takvim kalsın) */
@media (min-width: 769px) {
    .flatpickr-calendar.yolcu360-dates-fp:not(.yolcu360-dates-fp-mobile) {
        width: 640px !important;
        max-width: 640px !important;
        min-width: 640px !important;
        overflow: visible !important;
        transform: none !important;
        bottom: auto !important;
        border-radius: 12px !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp:not(.yolcu360-dates-fp-mobile) .flatpickr-months {
        display: flex !important;
        width: 100% !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp:not(.yolcu360-dates-fp-mobile) .flatpickr-month {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp:not(.yolcu360-dates-fp-mobile) .flatpickr-innerContainer,
    .flatpickr-calendar.yolcu360-dates-fp:not(.yolcu360-dates-fp-mobile) .flatpickr-rContainer {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp:not(.yolcu360-dates-fp-mobile) .flatpickr-weekdays {
        display: flex !important;
        width: 100% !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp:not(.yolcu360-dates-fp-mobile) .flatpickr-weekdaycontainer {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp:not(.yolcu360-dates-fp-mobile) .flatpickr-days {
        display: flex !important;
        width: 100% !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp:not(.yolcu360-dates-fp-mobile) .dayContainer {
        width: 50% !important;
        min-width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp:not(.yolcu360-dates-fp-mobile) .flatpickr-day {
        max-width: 14.2857% !important;
    }

    @media (min-width: 769px) {

        /* mobil stacked layout'u desktop'ta iptal et */
        .flatpickr-calendar.yolcu360-dates-fp:not(.yolcu360-dates-fp-mobile) .flatpickr-months,
        .flatpickr-calendar.yolcu360-dates-fp:not(.yolcu360-dates-fp-mobile) .flatpickr-innerContainer,
        .flatpickr-calendar.yolcu360-dates-fp:not(.yolcu360-dates-fp-mobile) .flatpickr-rContainer,
        .flatpickr-calendar.yolcu360-dates-fp:not(.yolcu360-dates-fp-mobile) .flatpickr-weekdays,
        .flatpickr-calendar.yolcu360-dates-fp:not(.yolcu360-dates-fp-mobile) .flatpickr-days {
            display: flex !important;
        }

        /* mobile grid'i desktop'ta kapat */
        .flatpickr-calendar.yolcu360-dates-fp:not(.yolcu360-dates-fp-mobile) .dayContainer {
            display: block !important;
        }

        /* mobile flex column'u desktop'ta iptal et */
        .flatpickr-calendar.yolcu360-dates-fp:not(.yolcu360-dates-fp-mobile) {
            flex-direction: row !important;
        }

    }
}

/* #dates dropdown: sadece tema rengi (primary #1193d4), layout Flatpickr varsayılanı */
.flatpickr-calendar.dates-fp .day-price {
    display: none !important;
}

.flatpickr-calendar.dates-fp .flatpickr-day.selected,
.flatpickr-calendar.dates-fp .flatpickr-day.startRange,
.flatpickr-calendar.dates-fp .flatpickr-day.endRange {
    background: #1193d4 !important;
    border-color: #1193d4 !important;
    color: #fff !important;
}

.dark .flatpickr-day:hover {
    background: rgba(17, 147, 212, 0.12) !important;
}

.flatpickr-day:hover {
    background: rgba(17, 147, 212, 0.12) !important;
}

.flatpickr-calendar.dates-fp .flatpickr-day.inRange {
    background: rgba(17, 147, 212, 0.12) !important;
    box-shadow: none !important;
    border-radius: 0.375rem !important;
}

.dark .flatpickr-calendar.dates-fp .flatpickr-day.selected,
.dark .flatpickr-calendar.dates-fp .flatpickr-day.startRange,
.dark .flatpickr-calendar.dates-fp .flatpickr-day.endRange {
    background: #1193d4 !important;
    border-color: #1193d4 !important;
    color: #fff !important;
}

.dark .flatpickr-calendar.dates-fp .flatpickr-day.inRange {
    background: rgba(17, 147, 212, 0.18) !important;
    box-shadow: none !important;
}

/* #dates dropdown dark mode: takvim kutusu, başlık, günler */
.dark .flatpickr-calendar.dates-fp {
    background: #1f2937;
    border-color: #374151;
}

.dark .flatpickr-calendar.dates-fp .flatpickr-current-month,
.dark .flatpickr-calendar.dates-fp .flatpickr-current-month .cur-month,
.dark .flatpickr-calendar.dates-fp .flatpickr-current-month input.cur-year {
    color: #f3f4f6;
}

.dark .flatpickr-calendar.dates-fp .flatpickr-weekday {
    color: #9ca3af;
}

.dark .flatpickr-calendar.dates-fp .flatpickr-day {
    color: #e5e7eb;
}

.dark .flatpickr-calendar.dates-fp .flatpickr-day.flatpickr-disabled,
.dark .flatpickr-calendar.dates-fp .flatpickr-day.prevMonthDay,
.dark .flatpickr-calendar.dates-fp .flatpickr-day.nextMonthDay {
    color: #6b7280;
}

.dark .flatpickr-calendar.dates-fp .flatpickr-prev-month,
.dark .flatpickr-calendar.dates-fp .flatpickr-next-month {
    color: #e5e7eb;
}

.dark .flatpickr-calendar.dates-fp .flatpickr-prev-month:hover,
.dark .flatpickr-calendar.dates-fp .flatpickr-next-month:hover {
    color: #fff;
}

/* Yolcu360 date range: mobile-only stacked months + header (web unchanged) */
.flatpickr-calendar.yolcu360-dates-fp .yolcu360-fp-mobile-header {
    display: none;
}

@media (max-width: 768px), (min-width: 769px) and (orientation: landscape) and (max-height: 640px) and (max-width: 1200px) {
    /* Tam ekran overlay: takvim kesilmeden, kaydırılabilir */
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100% - 32px) !important;
        max-width: 520px !important;
        max-height: 85vh !important;
        margin: 0 !important;
        border-radius: 16px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #fff !important;
        box-shadow:
            0 20px 40px rgba(0,0,0,0.18),
            0 6px 12px rgba(0,0,0,0.08) !important;
        z-index: 99999 !important;
        padding-bottom: 20px !important;
        box-sizing: border-box !important;
    }

    .dark .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile {
        background: #1f2937 !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile::before,
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile::after {
        display: none !important;
    }

    /* Mobilde önceki/sonraki ay oklarını gizle (büyük siyah ok sorunu) */
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-prev-month,
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-next-month {
        display: none !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .yolcu360-fp-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px 16px;
        background: #1193d4;
        color: #fff;
        position: sticky;
        top: 0;
        z-index: 10;
        flex-shrink: 0;
    }

    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .yolcu360-fp-mobile-header-title {
        font-size: 1rem;
        font-weight: 600;
    }

    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .yolcu360-fp-mobile-close {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px;
        background: transparent;
        border: none;
        color: #fff;
        cursor: pointer;
        border-radius: 0.375rem;
    }

    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .yolcu360-fp-mobile-close:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    /* CSS-only stacked layout: no DOM moves. Calendar is flex column; wrappers use display:contents
       so month, weekdaycontainer, dayContainer become flex children; order interleaves them. */
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .yolcu360-fp-mobile-header {
        order: -1;
        flex-shrink: 0;
    }

    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-months,
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-innerContainer,
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-rContainer,
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-weekdays,
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-days {
        display: contents !important;
    }

    /* Order: month1, weekday1, days1, month2, weekday2, days2, ... (1,2,3,4,5,6,...) */
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-month:nth-of-type(1) { order: 1; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-month:nth-of-type(2) { order: 4; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-month:nth-of-type(3) { order: 7; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-month:nth-of-type(4) { order: 10; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-month:nth-of-type(5) { order: 13; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-month:nth-of-type(6) { order: 16; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-month:nth-of-type(7) { order: 19; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-month:nth-of-type(8) { order: 22; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-month:nth-of-type(9) { order: 25; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-month:nth-of-type(10) { order: 28; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-month:nth-of-type(11) { order: 31; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-month:nth-of-type(12) { order: 34; }

    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(1) { order: 2; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(2) { order: 5; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(3) { order: 8; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(4) { order: 11; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(5) { order: 14; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(6) { order: 17; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(7) { order: 20; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(8) { order: 23; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(9) { order: 26; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(10) { order: 29; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(11) { order: 32; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(12) { order: 35; }

    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .dayContainer:nth-of-type(1) { order: 3; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .dayContainer:nth-of-type(2) { order: 6; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .dayContainer:nth-of-type(3) { order: 9; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .dayContainer:nth-of-type(4) { order: 12; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .dayContainer:nth-of-type(5) { order: 15; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .dayContainer:nth-of-type(6) { order: 18; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .dayContainer:nth-of-type(7) { order: 21; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .dayContainer:nth-of-type(8) { order: 24; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .dayContainer:nth-of-type(9) { order: 27; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .dayContainer:nth-of-type(10) { order: 30; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .dayContainer:nth-of-type(11) { order: 33; }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .dayContainer:nth-of-type(12) { order: 36; }

    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-month {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
        min-height: 40px;
        box-sizing: border-box !important;
    }
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-month:not(:first-of-type) {
        margin-top: 24px !important;
        padding-top: 8px !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-current-month {
        font-size: 1.125rem !important;
        font-weight: 700 !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-weekdaycontainer {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-weekday {
        font-size: 0.8125rem !important;
        color: #1193d4 !important;
        font-weight: 600 !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .dayContainer {
        width: 100% !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 4px !important;
        margin-bottom: 0 !important;
    }

    /* Gün hücreleri: sabit boyut, 7 sütunda düzgün hizalı (Flatpickr 14.28% width override) */
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-day {
        width: auto !important;
        min-height: 2.75rem !important;
        height: 2.75rem !important;
        line-height: 2.75rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* Seçili aralık: başlangıç mavi, bitiş turuncu (2. ekran görüntüsü gibi) */
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-day.selected,
    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-day.startRange {
        background: #1193d4 !important;
        border: none !important;
        color: #fff !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-day.endRange {
        background: #ea580c !important;
        border: none !important;
        color: #fff !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
    }

    .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-day.inRange {
        background: rgba(17, 147, 212, 0.2) !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        color: #0f172a !important;
        border: none !important;
    }

    .dark .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .flatpickr-day.inRange {
        color: #e5e7eb !important;
        background: rgba(17, 147, 212, 0.3) !important;
    }
}

.dark .flatpickr-calendar.yolcu360-dates-fp.yolcu360-dates-fp-mobile .yolcu360-fp-mobile-header {
    background: #1193d4;
}

/* --- Yolcu360 mobil/desktop görünürlük (Tailwind yerine CSS; 768px sınır) --- */
.yolcu360-mobile-only {
    display: block;
}
.yolcu360-desktop-only {
    display: none !important;
}
@media (min-width: 769px) {
    .yolcu360-mobile-only {
        display: none !important;
    }
    .yolcu360-desktop-only {
        display: block !important;
    }
}

/* --- Index dates: mobil/desktop görünürlük (768px sınır) --- */
.index-dates-mobile-only {
    display: block;
}
.index-dates-desktop-only {
    display: none !important;
}
@media (min-width: 769px) {
    .index-dates-mobile-only {
        display: none !important;
    }
    .index-dates-desktop-only {
        display: block !important;
    }
}

/* --- Index dates: desktop takvimi (mevcut .dates-fp ile uyumlu) --- */
/* Desktop dates calendar: açıldığında biraz aşağıda görünsün (flatpickr inline top’u buna göre override) */
.flatpickr-calendar.index-dates-fp-desktop.open {
    margin-top: 12px !important;
}

.flatpickr-calendar.index-dates-fp-desktop {
    width: 640px !important;
    max-width: 640px !important;
    min-width: 640px !important;
    overflow: visible !important;
    transform: none !important;
    bottom: auto !important;
    border-radius: 12px !important;
}

/* --- Index dates: mobil fullscreen takvim + backdrop --- */
.index-dates-calendar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99998;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.index-dates-calendar-backdrop.visible {
    opacity: 1;
}

.flatpickr-calendar.dates-fp .index-dates-fp-mobile-header {
    display: none;
}

@media (max-width: 768px), (min-width: 769px) and (orientation: landscape) and (max-height: 640px) and (max-width: 1200px) {
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100% - 32px) !important;
        max-width: 520px !important;
        max-height: 85vh !important;
        margin: 0 !important;
        border-radius: 16px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #fff !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18), 0 6px 12px rgba(0, 0, 0, 0.08) !important;
        z-index: 99999 !important;
        padding-bottom: 20px !important;
        box-sizing: border-box !important;
    }

    .dark .flatpickr-calendar.dates-fp.index-dates-fp-mobile {
        background: #1f2937 !important;
    }

    .flatpickr-calendar.dates-fp.index-dates-fp-mobile::before,
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile::after {
        display: none !important;
    }

    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-prev-month,
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-next-month {
        display: none !important;
    }

    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .index-dates-fp-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px 16px;
        background: #1193d4;
        color: #fff;
        position: sticky;
        top: 0;
        z-index: 10;
        flex-shrink: 0;
    }

    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .index-dates-fp-mobile-header-title {
        font-size: 1rem;
        font-weight: 600;
    }

    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .index-dates-fp-mobile-close {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px;
        background: transparent;
        border: none;
        color: #fff;
        cursor: pointer;
        border-radius: 0.375rem;
    }

    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .index-dates-fp-mobile-close:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    .flatpickr-calendar.dates-fp.index-dates-fp-mobile {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .index-dates-fp-mobile-header {
        order: -1;
        flex-shrink: 0;
    }

    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-months,
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-innerContainer,
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-rContainer,
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-weekdays,
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-days {
        display: contents !important;
    }

    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-month:nth-of-type(1) { order: 1; margin-top: 20px; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-month:nth-of-type(2) { order: 4; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-month:nth-of-type(3) { order: 7; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-month:nth-of-type(4) { order: 10; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-month:nth-of-type(5) { order: 13; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-month:nth-of-type(6) { order: 16; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-month:nth-of-type(7) { order: 19; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-month:nth-of-type(8) { order: 22; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-month:nth-of-type(9) { order: 25; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-month:nth-of-type(10) { order: 28; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-month:nth-of-type(11) { order: 31; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-month:nth-of-type(12) { order: 34; }

    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(1) { order: 2; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(2) { order: 5; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(3) { order: 8; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(4) { order: 11; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(5) { order: 14; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(6) { order: 17; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(7) { order: 20; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(8) { order: 23; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(9) { order: 26; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(10) { order: 29; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(11) { order: 32; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-weekdaycontainer:nth-of-type(12) { order: 35; }

    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .dayContainer:nth-of-type(1) { order: 3; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .dayContainer:nth-of-type(2) { order: 6; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .dayContainer:nth-of-type(3) { order: 9; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .dayContainer:nth-of-type(4) { order: 12; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .dayContainer:nth-of-type(5) { order: 15; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .dayContainer:nth-of-type(6) { order: 18; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .dayContainer:nth-of-type(7) { order: 21; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .dayContainer:nth-of-type(8) { order: 24; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .dayContainer:nth-of-type(9) { order: 27; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .dayContainer:nth-of-type(10) { order: 30; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .dayContainer:nth-of-type(11) { order: 33; }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .dayContainer:nth-of-type(12) { order: 36; }

    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-month {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
        min-height: 40px;
        box-sizing: border-box !important;
    }
    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-month:not(:first-of-type) {
        margin-top: 24px !important;
        padding-top: 8px !important;
    }

    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-current-month {
        font-size: 1.125rem !important;
        font-weight: 700 !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-weekdaycontainer {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-weekday {
        font-size: 0.8125rem !important;
        color: #1193d4 !important;
        font-weight: 600 !important;
    }

    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .dayContainer {
        width: 100% !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 4px !important;
        margin-bottom: 0 !important;
    }

    .flatpickr-calendar.dates-fp.index-dates-fp-mobile .flatpickr-day {
        width: auto !important;
        min-height: 2.75rem !important;
        height: 2.75rem !important;
        line-height: 2.75rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .dayContainer + .dayContainer {
        box-shadow: -1px 0 0 #e6e6e600;
    }
}

.dark .flatpickr-calendar.dates-fp.index-dates-fp-mobile .index-dates-fp-mobile-header {
    background: #1193d4;
}

/* --- Sadece desktop Yolcu360 takvimi (.yolcu360-dates-fp-desktop); mobil CSS'e dokunulmaz --- */
/* top/left onOpen'da #yolcu360-checkin-date-desktop ile hizalı ayarlanıyor */
.flatpickr-calendar.yolcu360-dates-fp-desktop {
    width: 640px !important;
    max-width: 640px !important;
    min-width: 640px !important;
    overflow: visible !important;
    transform: none !important;
    bottom: auto !important;
    border-radius: 12px !important;
}
.flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-months {
    display: flex !important;
    width: 100% !important;
}
.flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-month {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
}
.flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-innerContainer,
.flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-rContainer {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
}
.flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-rContainer {
    flex-direction: column !important;
}
.flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-weekdays {
    display: flex !important;
    width: 100% !important;
}
.flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-weekdaycontainer {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
}
.flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-days {
    display: flex !important;
    width: 100% !important;
}
.flatpickr-calendar.yolcu360-dates-fp-desktop .dayContainer {
    width: 50% !important;
    min-width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    display: block !important;
}
.flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-day {
    max-width: 14.2857% !important;
}
/* Desktop Yolcu360: tema renkleri (primary) */
.flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-day.selected,
.flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-day.startRange,
.flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-day.endRange {
    background: #1193d4 !important;
    border-color: #1193d4 !important;
    color: #fff !important;
}
.flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-day.inRange {
    background: rgba(17, 147, 212, 0.12) !important;
    box-shadow: none !important;
    border-radius: 0.375rem !important;
}
.dark .flatpickr-calendar.yolcu360-dates-fp-desktop {
    background: #1f2937;
    border-color: #374151;
}
.dark .flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-current-month,
.dark .flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-current-month .cur-month,
.dark .flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-current-month input.cur-year {
    color: #f3f4f6;
}
.dark .flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-weekday {
    color: #9ca3af;
}
.dark .flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-day {
    color: #e5e7eb;
}
.dark .flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-day.selected,
.dark .flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-day.startRange,
.dark .flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-day.endRange {
    background: #1193d4 !important;
    border-color: #1193d4 !important;
    color: #fff !important;
}
.dark .flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-day.inRange {
    background: rgba(17, 147, 212, 0.18) !important;
    box-shadow: none !important;
}
.dark .flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-day.flatpickr-disabled,
.dark .flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-day.prevMonthDay,
.dark .flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-day.nextMonthDay {
    color: #6b7280;
}
.dark .flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-prev-month,
.dark .flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-next-month {
    color: #e5e7eb;
}
.dark .flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-prev-month:hover,
.dark .flatpickr-calendar.yolcu360-dates-fp-desktop .flatpickr-next-month:hover {
    color: #fff;
}

.dark #booking-calendar-card .flatpickr-next-month{
    background-color: #ffffffcc;
    border-radius: 100%;
}

#booking-calendar-card .flatpickr-next-month{
    background-color: rgb(243 237 237);
    border-radius: 100%;
}
.dark #booking-calendar-card .flatpickr-prev-month{
    background-color: #ffffffcc;
    border-radius: 100%;
}

#booking-calendar-card .flatpickr-prev-month{
    background-color: rgb(243 237 237);
    border-radius: 100%;
}

.booking-fp .flatpickr-day.today {
    background-color: #0977eb3b !important;
}

/* #packages-container: mobilde yatay kart (sol: foto, orta: başlık/detay, sağ: fiyat + seç butonu)
   + telefon yatay: genişlik md+ iken aynı kart düzeni */
@media (max-width: 767px), (min-width: 768px) and (orientation: landscape) and (max-height: 640px) and (max-width: 1200px) {
    #packages-container .grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    #packages-container .package-card {
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        min-height: 0;
    }
    #packages-container .package-card-image {
        width: 100px;
        min-width: 100px;
        flex-shrink: 0;
        aspect-ratio: 1;
        background-size: cover;
        background-position: center;
    }
    #packages-container .package-card-content {
        flex: 1;
        min-width: 0;
        padding: 0.75rem 1rem;
        gap: 0.5rem;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        align-content: center;
    }
    #packages-container .package-card-price-block,
    #packages-container .package-card-price-block > div {
        display: contents;
    }
    #packages-container .package-card-content > h3 {
        grid-column: 1;
        grid-row: 1;
        font-size: 0.9375rem;
        line-height: 1.3;
        margin: 0;
    }
    #packages-container .package-card-content .package-price {
        grid-column: 2;
        grid-row: 1;
        font-size: 1rem;
        text-align: right;
        margin: 0;
        align-self: start;
    }
    #packages-container .package-card-content p:not(.package-price) {
        grid-column: 1;
        grid-row: 2;
        margin: 0;
        align-self: start;
    }
    #packages-container .package-card-content > .flex.items-center.gap-2.mt-2 {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 0.375rem;
    }
    #packages-container .package-card-content > .flex.items-center.gap-2.mt-2 .package-quantity-select {
        flex: none;
        min-width: 2.5rem;
    }
    #packages-container .package-card-content > .flex.items-center.gap-2.mt-2 .select-package-btn {
        flex: none;
    }
}

/*
 * Telefon yatay: genişlik Tailwind md (768px) üzerindeyken portrait mobil ile aynı booking davranışı.
 * Dar yükseklik + landscape ile masaüstü/tablet (yüksek yatay) etkilenmez.
 */
@media (min-width: 768px) and (orientation: landscape) and (max-height: 640px) and (max-width: 1200px) {
    .rooms-layout-container {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .rooms-layout-split {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        align-items: stretch;
    }

    #rooms-list-container {
        width: 100%;
        flex: 1;
        min-width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
    }

    .rooms-layout-split.has-sidebar #rooms-list-container {
        max-width: 100%;
    }

    .booking-summary-sidebar {
        width: 100%;
        position: relative;
        top: 0;
        max-height: none;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    #rooms-list-container>div>.@container {
        width: 100%;
        max-width: 100%;
    }

    #rooms-list-container>div>.@container >div {
        width: 100%;
        max-width: 100%;
    }

    /* Yalnızca booking/index varyantı gizlenir; ödeme sayfasındaki aynı ID'li <aside>
       etkilenmemeli (yukarıdaki max-width:768px bloğundaki not geçerli). */
    #booking-summary-sidebar.booking-summary-sidebar {
        display: none !important;
    }

    .room-mobile-price-gece {
        display: block !important;
    }

    .room-toggle-btn {
        display: block !important;
    }

    .room-card-details-mobile.hidden {
        display: none !important;
    }

    .show-other-price-wrapper:not(.hidden) {
        display: block !important;
    }

    .show-other-price-wrapper.hidden {
        display: none !important;
    }

    .accommodation-price-section-secondary.hidden {
        display: none !important;
    }

    .accommodation-price-section {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .accommodation-price-section-secondary:not(.hidden) {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }

    .yolcu360-mobile-only {
        display: block !important;
    }

    .yolcu360-desktop-only {
        display: none !important;
    }

    .index-dates-mobile-only {
        display: block !important;
    }

    .index-dates-desktop-only {
        display: none !important;
    }

    .room-description-text.line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .select-room-btn {
        transition: width 0.32s ease, height 0.32s ease, min-width 0.32s ease,
            padding 0.32s ease, border-radius 0.32s ease;
    }

    .select-room-btn--shrinking {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    .select-package-btn {
        transition: width 0.32s ease, height 0.32s ease, min-width 0.32s ease,
            padding 0.32s ease, border-radius 0.32s ease;
    }

    .select-package-btn--shrinking {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    .yolcu360-select-vehicle-btn {
        transition: width 0.32s ease, height 0.32s ease, min-width 0.32s ease,
            padding 0.32s ease, border-radius 0.32s ease;
    }

    .yolcu360-select-vehicle-btn--shrinking {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }
}

.shadow-gray-200\/50 {
    box-shadow: 0 4px 12px rgba(229, 231, 235, 0.5);
}

.dark\:shadow-black\/20 {
    box-shadow: 0 4px 12px rgb(183 179 179 / 24%)
}

.personal-info-blur{
    filter: blur(4px);
    opacity: 0.7;
    pointer-events: none;
    user-select: none;
    transition: all .2s ease;
}

/* Contact: Google / Yandex / Apple Maps icon buttons */
.contact-map-providers {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.375rem;
    width: max-content;
    max-width: 100%;
    align-self: flex-start;
}

.contact-map-providers--embedded {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e8ecef;
}

.dark .contact-map-providers--embedded {
    border-top-color: #293a45;
}

.contact-map-providers a.contact-map-provider-btn {
    width: 2.5rem !important;
    max-width: 2.5rem !important;
}

.contact-map-provider-btn {
    display: inline-flex;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    text-decoration: none;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.dark .contact-map-provider-btn {
    background-color: transparent;
}

.contact-map-provider-btn:hover {
    background-color: #e8e8e8;
    transform: scale(1.04);
}

.dark .contact-map-provider-btn:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.contact-map-provider-btn:focus {
    outline: none;
}

.contact-map-provider-btn:focus-visible {
    outline: 2px solid rgba(17, 147, 212, 0.55);
    outline-offset: 2px;
}

.dark .contact-map-provider-btn:focus-visible {
    outline-color: rgba(96, 165, 250, 0.65);
}

.contact-map-provider-btn img {
    width: 1.375rem;
    height: 1.375rem;
    max-width: 1.375rem;
    max-height: 1.375rem;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.icon-apple{
    filter: invert(0);
}

.dark .icon-apple{
    filter: invert(1);
}

.dark .contact-map-provider-btn img {
    opacity: 0.95;
}

/* --------------------------------------------------------------------------
   Ödeme sayfası: mobilde rezervasyon özeti (#booking-summary-sidebar <aside>)

   Masaüstünde 3'lü grid'in sol kolonunda sticky duruyor. Mobilde grid tek kolona
   düştüğü için DOM sırası gereği zaten "1. Kişisel Bilgiler" adımının üstünde
   çıkıyor; burada sadece kompaktlaştırıyoruz. Seçiciler ID üzerinden yazıldı ki
   element üstündeki Tailwind utility'lerini (p-6, text-xl, sticky, h-24 …) yükleme
   sırasından bağımsız olarak ezebilsin.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Masaüstündeki gap-12 (3rem) mobilde özet ile formu birbirinden çok koparıyor. */
    #payment-layout-grid {
        gap: 1.25rem;
    }

    #booking-summary-sidebar .payment-summary-card {
        /* Kart zaten sayfanın en üstünde; sticky burada işe yaramadığı gibi
           uzun formda ekranı da işgal ediyor. */
        position: static;
        padding: 0.875rem;
    }

    #booking-summary-sidebar .payment-summary-title {
        font-size: 1rem;
        line-height: 1.4;
        margin-bottom: 0.625rem;
    }

    #booking-summary-sidebar .booking-summary-image {
        height: 4.5rem;
    }

    /* Oda / paket / araç satırlarının iç boşluğu ve aralarındaki dikey boşluk. */
    #booking-summary-sidebar .space-y-3 > * + * {
        margin-top: 0.5rem;
    }

    #booking-summary-sidebar .p-3 {
        padding: 0.625rem;
    }

    /* Giriş/çıkış/misafir/gece satırları (space-y-4 = 1rem) mobilde daha sık dursun. */
    #booking-summary-sidebar .booking-summary-info {
        padding: 0.75rem 0;
        margin: 0.75rem 0;
    }

    #booking-summary-sidebar .booking-summary-info > * + * {
        margin-top: 0.5rem;
    }

    #booking-summary-sidebar .booking-summary-info-icon {
        font-size: 1rem;
    }

    /* Oturum sayacı rozeti */
    #booking-summary-sidebar #session-countdown-widget {
        margin-bottom: 0.625rem;
        padding: 0.375rem 0.625rem;
    }

    #booking-summary-sidebar .booking-summary-price-row.total {
        align-items: center;
        gap: 0.5rem;
        font-size: 1rem;
    }

    #booking-summary-sidebar .booking-summary-price-row.total .booking-summary-price-label {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.875rem;
        line-height: 1.35;
    }

    #booking-summary-sidebar .booking-summary-price-row.total .booking-summary-price-value {
        flex: 0 0 auto;
        font-size: 1.125rem;
        white-space: nowrap;
    }
}

.payment-summary-aside #coupon-success-container {
    border-color: #bbf7d0;
}

.dark .payment-summary-aside #coupon-success-container {
    border-color: #166534;
}

/* --------------------------------------------------------------------------
   Ödeme sayfası: KVKK + Yolcu360 bilgi kartları (border hafif, gölge odaklı)
   -------------------------------------------------------------------------- */
.payment-info-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.875rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: #ffffff;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 8px 28px -10px rgba(15, 23, 42, 0.1);
}

.dark .payment-info-callout {
    border-color: rgba(75, 85, 99, 0.4);
    background: rgba(31, 41, 55, 0.65);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.25),
        0 10px 32px -12px rgba(0, 0, 0, 0.5);
}

.payment-info-callout--privacy {
    margin-top: 1.25rem;
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
}

.dark .payment-info-callout--privacy {
    background: linear-gradient(165deg, rgba(55, 65, 81, 0.55) 0%, rgba(31, 41, 55, 0.78) 100%);
}

.payment-info-callout--rental {
    margin-top: 1rem;
    border-color: rgba(251, 191, 36, 0.3);
    background: linear-gradient(165deg, #ffffff 0%, #fffbf5 100%);
}

.dark .payment-info-callout--rental {
    border-color: rgba(217, 119, 6, 0.35);
    background: linear-gradient(165deg, rgba(55, 48, 36, 0.45) 0%, rgba(41, 37, 28, 0.75) 100%);
}

.payment-info-callout__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
}

.payment-info-callout__icon .material-symbols-outlined {
    font-size: 1.375rem;
    line-height: 1;
}

.payment-info-callout__icon--privacy {
    background: rgba(17, 147, 212, 0.12);
    color: #1193d4;
}

.dark .payment-info-callout__icon--privacy {
    background: rgba(96, 165, 250, 0.18);
    color: #93c5fd;
}

.payment-info-callout__icon--rental {
    background: rgba(251, 191, 36, 0.28);
    color: #b45309;
}

.dark .payment-info-callout__icon--rental {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

.payment-info-callout__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.125rem;
}

.payment-info-callout__text {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #4b5563;
}

.dark .payment-info-callout__text {
    color: #d1d5db;
}

.payment-info-callout__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.payment-info-callout__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.payment-info-callout__list-dot {
    flex-shrink: 0;
    width: 0.35rem;
    height: 0.35rem;
    margin-top: 0.4rem;
    border-radius: 9999px;
    background: rgba(217, 119, 6, 0.65);
}

.dark .payment-info-callout__list-dot {
    background: rgba(252, 211, 77, 0.85);
}

.bg-orange-custom {
  background-color: oklch(0.79 0.18 90.56);
}

.dark\:bg-orange-custom {
  &:where(.dark, .dark *) {
    background-color: color-mix(in srgb, oklch(0.8 0.16 53.35) 40%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, oklch(0.8 0.16 53.35) 40%, transparent);
    }
  }
}

:root {
  --orange-custom: oklch(0.72 0.17 53.35);
}

/* LIGHT */
.bg-orange-soft {
  background-color: color-mix(in oklab, var(--orange-custom) 12%, white);
}

.text-orange-soft {
  color: color-mix(in oklab, var(--orange-custom) 70%, black);
}

.border-orange-soft {
  border: 1px solid color-mix(in oklab, var(--orange-custom) 35%, white);
}

/* HOVER */
.bg-orange-soft-hover:hover {
  background-color: color-mix(in oklab, var(--orange-custom) 20%, white);
}

/* DARK MODE */
.dark .bg-orange-soft {
  background-color: color-mix(in oklab, var(--orange-custom) 18%, #221e1e);
}

.dark .text-orange-soft {
  color: color-mix(in oklab, var(--orange-custom) 65%, white);
}

.dark .border-orange-soft {
  border: 1px solid color-mix(in oklab, var(--orange-custom) 40%, #221e1e);
}

.dark .bg-orange-soft-hover:hover {
  background-color: color-mix(in oklab, var(--orange-custom) 28%, #221e1e);
}

.form-meta-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ==========================================================================
   Rezervasyon Özeti — modern kart (v2)
   --------------------------------------------------------------------------
   KAPSAM / MOBİL GÜVENLİĞİ:
   Mobil alt sayfa (.mobile-booking-sheet-body) bu kartla AYNI HTML'i kopyalıyor.
   Masaüstü sidebar .bs-v2'yi doğrudan alır; mobil sheet ise davranış
   kancalarını değiştirmeden .mobile-booking-summary.booking-summary-sidebar.bs-v2
   sarmalayıcısıyla aynı görsel dili kullanır.

   ÖLÇEK:
   Taban değerler DAR kolona (sidebar 400px => ~358px içerik) göre ayarlıdır;
   referans tasarımın oranları bu genişliğe uyarlanmıştır. Sidebar tam genişliğe
   geçtiğinde (<=1024px viewport'ta kolon alt alta düşer) @container ile daha
   ferah kademeye çıkılır. Ölçek viewport'a değil KOLON genişliğine bağlıdır;
   viewport sorgusu kolon aynı genişlikteyken boşuna küçültürdü.

   TEMA GEÇİŞİ:
   Buraya renk/arka plan üzerinde KALICI transition eklenmemeli. Tema değişimi
   <html>'e .theme-switching eklenerek yapılıyor ve o kural yalnızca yapısal
   kapsayıcıları (body/main/header/...) hedefliyor; aşağıdaki div/span'ler anlık
   renk değiştirir. Genel seçicilere transition eklemek eski kasma sorununu geri getirir.
   ========================================================================== */

/* v2'ye özel öğeler: varsayılan GİZLİ, yalnızca v2 kapsamında açılır. */
.bs-v2-only {
    display: none;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 {
    container-type: inline-size;
    container-name: bs-summary;
    padding: 0 1.25rem 1.25rem;
    border-radius: 1rem;
    overflow-x: hidden;
    background: #ffffff;
    border-color: #e6ebf2;
    box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.18), 0 2px 6px -2px rgba(15, 23, 42, 0.08);
}

/* Ödeme sayfasında sticky/kart kabuğu bir iç sarmalayıcıdır. v2'nin görsel
   yüzeyi aside kökünde üretildiği için içteki eski kart yüzeyini nötrleştir;
   aksi hâlde iki ayrı kenarlık, gölge ve padding üst üste biner. */
.payment-summary-aside.bs-v2 {
    position: sticky;
    top: 2.5rem;
    align-self: start;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
}

.payment-summary-aside.bs-v2 .payment-summary-card {
    position: static;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Ödeme adımındaki sayaç kartın üst yüzeyidir: yan boşluk ve hero ile arasındaki
   beyaz şerit kaldırılır. Mobil ödeme kartı da aynı yüzeyi kullanır. */
.payment-summary-aside.bs-v2 #session-countdown-widget {
    margin: 0 -1.25rem;
    padding: 0.75rem 1.25rem;
    border: 0;
    border-radius: 1rem 1rem 0 0;
}

.dark :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 {
    background: #17222D;
    border-color: #17324c;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.6);
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-v2-hide {
    display: none;
}

/* ----- Hero: arka plan görseli + başlık + tarih şeridi -----
   Hero TEK parça bir yüzeydir: başlıktan Giriş/Çıkış/Misafir/Gece satırının
   altına kadar aynı fotoğraf ve aynı peçe kesintisiz devam eder. Bu yüzden
   içerideki hiçbir bloğa ayrı arka plan, yatay çizgi veya ek katman verilmez;
   yalnızca sütun aralarındaki dikey ayraçlar kalır. */
:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-hero {
    position: relative;
    margin: 0 -1.25rem 1rem;
    padding: 1.375rem 1.25rem 1.125rem;
    overflow: hidden;
    isolation: isolate;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-hero-bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Fotoğrafın üstündeki peçe: metin kontrastını garanti eder.
   DÜZ renk kullanılıyor (gradyan değil): hero boyunca tonu değişmesin, üstte ve
   altta aynı yoğunlukta kalsın — aksi halde şeridin başladığı yerde görünür bir
   geçiş oluşuyor. Fotoğraf her iki temada da hafifçe görünmeye devam eder. */
:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(245, 249, 252, 0.87);
}

.dark :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-hero-bg::after {
    background: rgba(8, 20, 33, 0.86);
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    margin-bottom: 1.125rem;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-title {
    flex: 0 0 100%;
    font-size: 1.375rem;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #0f172a;
    margin-bottom: 0;
}

.dark :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-title {
    color: #f8fafc;
}

/* Otel adı v2'de gösterilmiyor (hero'yu kısaltmak için). Markup'tan SİLİNMEDİ:
   aynı HTML mobil alt sayfada da kullanılıyor ve orada görünmeye devam ediyor. */
:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-hotel {
    display: none;
}

/* Hero içindeki eski tek görsel: v2'de oda kartına taşındı. */
:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-image {
    display: none;
}

/* ----- Tarih / misafir / gece şeridi: 4 eşit sütun -----
   Şerit hero'nun DEVAMIDIR: kendi arka planı, üst/alt çizgisi ve iç paneli yok.
   Buraya background veya border-top eklenirse hero ikiye bölünmüş görünür. */
:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-info {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    /* Hafif taşma: sütunlara tarihin tek satıra sığacağı genişliği kazandırır. */
    margin: 0 -0.75rem;
    padding: 0;
    border: none;
    background: transparent;
}

.dark :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-info {
    border: none;
    background: transparent;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.1875rem;
    margin-bottom: 0;
    padding: 0.125rem 0.1875rem;
    text-align: center;
    /* Yalnızca sütunlar arası dikey ayraç; düşük kontrast ve tema duyarlı. */
    border-left: 1px solid rgba(15, 23, 42, 0.09);
}

.dark :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-info-item {
    border-left-color: rgba(255, 255, 255, 0.11);
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-info-item:first-child {
    border-left: none;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-info-label-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-info-icon {
    font-size: 1.25rem;
    color: #1193d4;
}

.dark :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-info-icon {
    color: #38a8e8;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-info-label {
    font-size: 0.6875rem;
    color: rgb(0 0 0);
}

.dark :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-info-label {
    color: #d6dde7;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-info-value {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.dark :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-info-value {
    color: #f1f5f9;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-info-sub {
    display: block;
    font-size: 0.6875rem;
    color: #1e2022;
}

.dark :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-info-sub {
    color: #d0d7df;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-night-unit {
    display: inline;
}

/* ----- Oda kartı -----
   DİKKAT: .booking-summary-room-item class'ını paket ve araç satırları da
   kullanıyor. Aşağıdaki iki sütunlu yerleşim yalnızca ODA satırları için
   geçerli olmalı; bu yüzden [data-room-index] ile daraltıldı. Class'ın
   kendisine yazılırsa paket/araç satırları yan yana düşüp bozuluyor. */
:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-room-item[data-room-index] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0;
    margin-bottom: 1rem;
    background: transparent;
}

/* Görsel ~%37, bilgi sütunu ~%60 (aradaki boşluk dahil). Sabit px yerine
   oransal genişlik + en-boy oranı: dar kolonda kartı ezmez, geniş kolonda
   max-width ile sınırlanır. */
:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 37%;
    min-width: 0;
    max-width: 9rem;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    border-radius: 0.625rem;
    background: #eef2f7;
}

.dark :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-img {
    background: #13293d;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-dots {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-dot {
    width: 0.4375rem;
    height: 0.4375rem;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: #cbd5e1;
    cursor: pointer;
}

.dark :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-dot {
    background: #35506b;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-dot.is-active {
    background: #1193d4;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-dot:focus-visible {
    outline: 2px solid #1193d4;
    outline-offset: 2px;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

/* Sıralama: ad → pansiyon → olanaklar → iade rozeti → fiyat.
   DOM sırası değiştirilmiyor (aynı HTML mobil sheet'te de kullanılıyor); yalnızca
   v2'de flex order ile yeniden diziliyor. Mobilde .bs-room-body flex olmadığı
   için order'ın hiçbir etkisi yok. */
:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-body .booking-summary-room-header {
    order: 1;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-body .bs-room-board {
    order: 2;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-body .bs-room-facts {
    order: 3;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-body .booking-summary-room-details {
    order: 4;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-body .booking-summary-room-price {
    order: 5;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 [data-room-index] .booking-summary-room-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #0f172a;
}

.dark :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 [data-room-index] .booking-summary-room-name {
    color: #f8fafc;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-board {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: #64748b;
}

.dark :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-board {
    color: #94a3b8;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-board .material-symbols-outlined {
    font-size: 1.0625rem;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-room-details {
    margin: 0.5rem 0 0;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-facts {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.4375rem;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-fact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #64748b;
}

.dark :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-fact {
    color: #94a3b8;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-fact .material-symbols-outlined {
    font-size: 1.0625rem;
    color: #94a3b8;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 [data-room-index] .booking-summary-room-price {
    margin-top: auto;
    padding-top: 0.625rem;
    text-align: right;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.dark :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 [data-room-index] .booking-summary-room-price {
    color: #f8fafc;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-price-note {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #94a3b8;
}

/* Silme butonu: v2'de çerçeveli çöp kutusu. */
:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    background: #fff5f5;
}

.dark :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-remove-btn {
    border-color: #4c1d24;
    background: #24121a;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-remove-icon {
    display: inline-flex;
    font-size: 1.0625rem;
}

/* ----- Toplam paneli -----
   Ağır dolu blok yerine: çok hafif zemin + ince kenarlık. Renkler primary'nin
   saydam türevleri olduğu için iki temada da aynı dilde çalışır. */
:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-price-breakdown {
    margin: 0.875rem 0 0;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-price-row.total {
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.6875rem 0.875rem;
    border-top: none;
    border: 1px solid rgba(17, 147, 212, 0.20);
    border-radius: 0.75rem;
    background: rgba(17, 147, 212, 0.06);
}

.dark :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-price-row.total {
    border-color: rgba(56, 168, 232, 0.24);
    background: rgba(56, 168, 232, 0.09);
}

/* Toplam, karttaki en güçlü fiyattır: oda fiyatından büyük tutulur. Etiket,
   uzun TR metni tek satıra sığsın diye ölçülü; sığmazsa sarar, taşma yapmaz. */
:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-price-row.total .booking-summary-price-label {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    color: #1193d4;
}

.dark :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-price-row.total .booking-summary-price-label {
    color: #4db4ec;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-price-row.total .booking-summary-price-value {
    flex: 0 0 auto;
    font-size: 1.1875rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: #1193d4;
}

.dark :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-price-row.total .booking-summary-price-value {
    color: #4db4ec;
}

/* ----- Ödeme butonu + SSL notu -----
   Karttaki en güçlü eylem: yüksek gövde ve belirgin tipografi. Renk mevcut
   primary sisteminden geliyor, yeni renk eklenmiyor. */
:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-checkout-btn {
    align-items: center;
    padding: 0.8125rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-top: 0.875rem;
    box-shadow: 0 8px 18px -10px rgba(17, 147, 212, 0.6);
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-checkout-btn .material-symbols-outlined {
    font-size: 1.125rem;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin: 0.75rem 0 0;
    font-size: 0.6875rem;
    color: #94a3b8;
    text-align: center;
}

.dark :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-secure-note {
    color: #7f93a8;
}

:is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-secure-note .material-symbols-outlined {
    font-size: 1rem;
}

/* ----- Mobil alt sayfa: masaüstü v2 kartın sheet'e uyarlanmış kabuğu -----
   Sheet açma/kapatma, sürükleme ve içerik kaydırma dış kapsayıcılarda
   kalır. Bu sarmalayıcı yalnızca kartın görsel yüzeyini tanımlar. */
.mobile-booking-summary.booking-summary-sidebar.bs-v2 {
    width: calc(100vw - 2rem);
    max-width: min(44rem, calc(100vw - 2rem));
    min-width: 0;
    max-height: none;
    margin: 0 auto;
    padding: 0 1rem 1rem;
    position: static;
    top: auto;
    overflow: hidden;
    opacity: 1;
    transform: none;
    border: 1px solid #e6ebf2;
    border-radius: 1rem;
    box-sizing: border-box;
}

.dark .mobile-booking-summary.booking-summary-sidebar.bs-v2 {
    border-color: #17324c;
}

.mobile-booking-summary.booking-summary-sidebar.bs-v2 .bs-hero {
    margin-right: -1rem;
    margin-left: -1rem;
    padding-right: 1rem;
    padding-left: 1rem;
}

/* ----- Ödeme sayfası: v2 kartın mobil normal-akış varyantı -----
   Desktopteki görsel dil korunur; yalnızca sidebar davranışı mobil forma uyarlanır.
   ID'li seçiciler, dosyanın başındaki eski kompakt mobil kuralları bilinçli olarak
   ezer. Böylece hero/grid/oda kartı görünümü v2 kalırken sticky iç scroll oluşmaz. */
#booking-summary-sidebar.payment-summary-aside.bs-v2.bs-v2-mobile {
    width: 100%;
    max-width: 100%;
    max-height: none;
    padding: 0 1rem 1rem;
    position: static;
    top: auto;
    align-self: start;
    overflow: hidden;
    box-sizing: border-box;
}

#booking-summary-sidebar.payment-summary-aside.bs-v2.bs-v2-mobile .payment-summary-card {
    width: 100%;
    min-width: 0;
    padding: 0;
    position: static;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#booking-summary-sidebar.payment-summary-aside.bs-v2.bs-v2-mobile #session-countdown-widget {
    margin: 0 -1rem;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 1rem 1rem 0 0;
}

#booking-summary-sidebar.payment-summary-aside.bs-v2.bs-v2-mobile .bs-hero {
    margin-right: -1rem;
    margin-left: -1rem;
    padding-right: 1rem;
    padding-left: 1rem;
}

#booking-summary-sidebar.payment-summary-aside.bs-v2.bs-v2-mobile .payment-summary-title {
    margin-bottom: 0;
    font-size: 1.375rem;
    line-height: 1.15;
}

#booking-summary-sidebar.payment-summary-aside.bs-v2.bs-v2-mobile .booking-summary-info {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

#booking-summary-sidebar.payment-summary-aside.bs-v2.bs-v2-mobile .booking-summary-info > * + * {
    margin-top: 0;
}

#booking-summary-sidebar.payment-summary-aside.bs-v2.bs-v2-mobile .booking-summary-info-icon {
    font-size: 1.25rem;
}

#booking-summary-sidebar.payment-summary-aside.bs-v2.bs-v2-mobile .booking-summary-price-row.total {
    align-items: center;
    gap: 0.5rem;
    font-size: inherit;
}

#booking-summary-sidebar.payment-summary-aside.bs-v2.bs-v2-mobile .booking-summary-price-row.total .booking-summary-price-label {
    font-size: 0.75rem;
}

#booking-summary-sidebar.payment-summary-aside.bs-v2.bs-v2-mobile .booking-summary-price-row.total .booking-summary-price-value {
    font-size: 1.1875rem;
}

@media (max-width: 390px) {
    .mobile-booking-summary.booking-summary-sidebar.bs-v2 {
        padding-right: 0.875rem;
        padding-left: 0.875rem;
    }

    .mobile-booking-summary.booking-summary-sidebar.bs-v2 .bs-hero {
        margin-right: -0.875rem;
        margin-left: -0.875rem;
        padding-right: 0.875rem;
        padding-left: 0.875rem;
    }

    .mobile-booking-summary.booking-summary-sidebar.bs-v2 .booking-summary-room-item[data-room-index] {
        gap: 0.625rem;
    }

    .mobile-booking-summary.booking-summary-sidebar.bs-v2 .bs-room-media {
        flex-basis: 36%;
    }

    #booking-summary-sidebar.payment-summary-aside.bs-v2.bs-v2-mobile {
        padding-right: 0.875rem;
        padding-left: 0.875rem;
    }

    #booking-summary-sidebar.payment-summary-aside.bs-v2.bs-v2-mobile .bs-hero {
        margin-right: -0.875rem;
        margin-left: -0.875rem;
        padding-right: 0.875rem;
        padding-left: 0.875rem;
    }

    #booking-summary-sidebar.payment-summary-aside.bs-v2.bs-v2-mobile #session-countdown-widget {
        margin-right: -0.875rem;
        margin-left: -0.875rem;
        padding-right: 0.875rem;
        padding-left: 0.875rem;
    }

    #booking-summary-sidebar.payment-summary-aside.bs-v2.bs-v2-mobile .booking-summary-room-item[data-room-index] {
        gap: 0.625rem;
    }

    #booking-summary-sidebar.payment-summary-aside.bs-v2.bs-v2-mobile .bs-room-media {
        flex-basis: 36%;
    }
}

/* --------------------------------------------------------------------------
   GENİŞ KOLON kademesi: sidebar tam genişliğe geçtiğinde (<=1024px viewport'ta
   kolon alt alta düşer) referansın ferah oranlarına çıkılır. Taban değerler dar
   kolona ayarlı olduğu için burada BÜYÜTÜYORUZ.
   -------------------------------------------------------------------------- */
@container bs-summary (min-width: 460px) {
    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-hero {
        margin: 0 -1.25rem 1.375rem;
        padding: 1.875rem 1.5rem 1.5rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-title {
        font-size: 1.625rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-header {
        margin-bottom: 1.625rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-info-icon {
        font-size: 1.5rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-info-label {
        font-size: 0.8125rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-info-value {
        font-size: 0.9375rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-info-sub {
        font-size: 0.75rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-room-item[data-room-index] {
        gap: 1rem;
        margin-bottom: 1.125rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-media {
        max-width: 10rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 [data-room-index] .booking-summary-room-name {
        font-size: 1.0625rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-board {
        font-size: 0.875rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-fact {
        font-size: 0.875rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 [data-room-index] .booking-summary-room-price {
        font-size: 1.25rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-room-price-note {
        font-size: 0.75rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-price-row.total {
        padding: 0.8125rem 1rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-price-row.total .booking-summary-price-label {
        font-size: 0.8125rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-price-row.total .booking-summary-price-value {
        font-size: 1.3125rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-checkout-btn {
        padding: 0.9375rem 1rem;
        font-size: 1rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-secure-note {
        font-size: 0.75rem;
    }
}

/* --------------------------------------------------------------------------
   ÇOK DAR kolon: taşmayı önlemek için son bir kademe.
   -------------------------------------------------------------------------- */
@container bs-summary (max-width: 300px) {
    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-title {
        font-size: 1.3125rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-info-icon {
        font-size: 1.1875rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-info-value {
        font-size: 0.75rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-info-label,
    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .bs-info-sub {
        font-size: 0.625rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 [data-room-index] .booking-summary-room-name {
        font-size: 1rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 [data-room-index] .booking-summary-room-price {
        font-size: 1.0625rem;
    }

    :is(.booking-summary-sidebar, .payment-summary-aside).bs-v2 .booking-summary-price-row.total .booking-summary-price-value {
        font-size: 1.1875rem;
    }
}

/* ==========================================================================
   İade durumu rozetleri (.refund-badge)
   --------------------------------------------------------------------------
   Üç varyant, tek görsel dil: yumuşak zemin + aynı tonda ince kenarlık +
   renkli ikon/metin. Markup booking-summary.js -> buildRefundBadgeHtml().
     --no    kırmızı  / gpp_bad       -> İade Edilemez
     --yes   yeşil    / verified_user -> İade Edilebilir
     --maybe amber    / gpp_maybe     -> Koşullu İade
   Rozet hem oda listesinde hem özet kartında hem mobil alt sayfada kullanılır;
   bu yüzden .bs-v2 kapsamına alınmadı, üç yerde de aynı görünür.
   Tema geçişinde kasmaması için KALICI transition yok; yalnızca tıklanabilir
   varyantlarda hover'da arka plan değişir (tek eleman, ucuz).
   ========================================================================== */
.refund-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    padding: 0.3125rem 0.6875rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
}

.refund-badge__icon {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    font-variation-settings: 'FILL' 1;
}

.refund-badge.refundable-badge-tooltip {
    cursor: pointer;
}

.refund-badge:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ----- İade Edilemez ----- */
.refund-badge--no {
    color: #b91c1c;
    background: rgba(220, 38, 38, 0.09);
    border-color: rgba(220, 38, 38, 0.28);
}

.refund-badge--no.refundable-badge-tooltip:hover {
    background: rgba(220, 38, 38, 0.15);
}

.dark .refund-badge--no {
    color: #f87171;
    background: rgba(248, 113, 113, 0.13);
    border-color: rgba(248, 113, 113, 0.32);
}

.dark .refund-badge--no.refundable-badge-tooltip:hover {
    background: rgba(248, 113, 113, 0.2);
}

/* ----- İade Edilebilir ----- */
.refund-badge--yes {
    color: #15803d;
    background: rgba(22, 163, 74, 0.09);
    border-color: rgba(22, 163, 74, 0.28);
}

.refund-badge--yes:hover {
    background: rgba(22, 163, 74, 0.15);
}

.dark .refund-badge--yes {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.3);
}

.dark .refund-badge--yes:hover {
    background: rgba(74, 222, 128, 0.19);
}

/* ----- Koşullu İade ----- */
.refund-badge--maybe {
    color: #b45309;
    background: rgba(245, 158, 11, 0.11);
    border-color: rgba(245, 158, 11, 0.32);
}

.refund-badge--maybe:hover {
    background: rgba(245, 158, 11, 0.18);
}

.dark .refund-badge--maybe {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.13);
    border-color: rgba(251, 191, 36, 0.32);
}

.dark .refund-badge--maybe:hover {
    background: rgba(251, 191, 36, 0.2);
}

/* Özet kartında (v2) rozet biraz daha küçük dursun. */
.booking-summary-sidebar.bs-v2 .refund-badge {
    padding: 0.25rem 0.5625rem;
    font-size: 0.6875rem;
    gap: 0.3125rem;
}

.booking-summary-sidebar.bs-v2 .refund-badge__icon {
    font-size: 0.9375rem;
}

/* ==========================================================================
   Oda kartı görsel alanı (.room-card-media)
   --------------------------------------------------------------------------
   SADECE oda seçilmemişken geçerlidir.

   Oda seçilince liste kolonu daralıyor (.has-sidebar -> max-width: 100% - 420px)
   ve görsel zaten kendiliğinden küçülüyor; o hâl iyi olduğu için ELLENMİYOR.
   Bu yüzden kural :not(.has-sidebar) ile sınırlandırıldı.

   Seçim yokken liste tam genişlikte olduğundan 1/3'lük görsel kolonu kare oranla
   birlikte gereğinden baskın duruyordu. Küçültmeyi GÖRSELE değil KOLONA
   uyguluyoruz (1/3 -> 1/4, yani %75'i): görsel kolon içinde küçültülseydi
   metinle arasında büyük bir boşluk kalırdı.

   Neden düz CSS: derlenmiş public/assets/css/style.css'te yalnızca 4 adet @xl
   varyantı var (aspect-square, w-1/3, flex-row, items-start). İhtiyaç duyulan
   @xl:w-1/4 çıktıda YOK; markup'a eklense sessizce hiçbir şey yapmazdı.

   Breakpoint, style.css'teki @xl varyantlarıyla birebir aynı: 36rem. Bu sorgunun
   altında (mobil/tablet) hiçbir şey değişmez: görsel orada tam genişlik + 16:9.
   ========================================================================== */
@container (width >= 36rem) {
    .rooms-layout-split:not(.has-sidebar) .room-card-media {
        width: 25%;
        align-items: flex-start;
    }
}

/* ==========================================================================
   ARAMA BUTONU — AKTİFLEŞME SALLANMASI
   --------------------------------------------------------------------------
   Arama yapıldıktan sonra #searchButton disabled'a alınıyor (bkz.
   disableSearchButtons); tarih veya misafir sayısı değişince tekrar açılıyor.
   Kullanıcı o sırada takvime ya da misafir sayacına bakıyor oluyor, formun
   sağ ucundaki butonun rengi griden maviye dönerken bunu kaçırabiliyor.
   Kısa bir sallanma, imleci oraya çekmeden değişimi görünür kılıyor.

   Sınıf yalnızca gerçek disabled -> enabled geçişinde ekleniyor
   (nudgeSearchButton, booking-summary.js); sayaç her tıklandığında değil,
   yoksa buton zaten açıkken sürekli titrerdi.

   transform kullanılıyor: butonun kendi transition-colors'ı ile çakışmaz ve
   layout'u kaydırmadan yalnız compositor'da çalışır.
   ========================================================================== */
@keyframes searchBtnNudge {

    0%,
    100% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-4px);
    }

    30% {
        transform: translateX(4px);
    }

    45% {
        transform: translateX(-3px);
    }

    60% {
        transform: translateX(3px);
    }

    75% {
        transform: translateX(-1px);
    }
}

.search-btn-nudge {
    animation: searchBtnNudge 0.5s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .search-btn-nudge {
        animation: none;
    }
}

/* ==========================================================================
   ODA KARTI — UC KOLONLU DUZEN
   --------------------------------------------------------------------------
   Hedef: gorsel | (baslik + aciklama + ozellikler) | (pansiyon secenekleri)

   Neden duz CSS, neden Tailwind utility degil: derlenmis style.css kaynaktan
   sapmis ve icinde SADECE su 12 container varyanti var --
     @lg: flex-row, flex-shrink-0, gap-6, justify-between, justify-end,
          min-w-[280px], w-1/2, w-auto
     @xl: aspect-square, flex-row, items-start, w-1/3
   Bunlarin disinda bir @lg:/@xl: sinifi markup'a yazilsa CIKTIDA OLMADIGI ICIN
   sessizce hicbir sey yapardi (ayni tuzak contact.blade.php'de de notlu).
   Bu yuzden yeni duzen semantik siniflara baglanip burada tanimlaniyor.

   Kapsayici .room-card uzerindeki .@container (container-type: inline-size),
   dolayisiyla asagidaki sorgular KART genisligini olcuyor, ekrani degil: yan
   panel acilip kart daraldiginda duzen kendiliginde tek kolona doner.
   ========================================================================== */
.room-card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.room-card-info {
    min-width: 0;
    /* min-width:0 sart: flex cocugu varsayilan min-width:auto ile uzun
       aciklama metninde tasar ve yan kolonu ezerdi. */
}

.room-features-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.375rem 0.75rem;
    margin-top: 0.75rem;
}

/* Tum sutunlari kaplayan "+N daha fazla" satiri. */
.room-features-more {
    grid-column: 1 / -1;
    margin-top: 0.25rem;
}

.room-card-board {
    min-width: 0;
}

/*
 * Pansiyon sekmesindeki baslik.
 *
 * Oteller HMS'te pansiyon adi alanina bazen koca bir uyari cumlesi giriyor
 * ("Oda Kahvalti - [14+] 14 YASINDA KUCUK COCUK KABUL EDILEMEZ...").
 * Tek satirda kirpmak (truncate) bilgiyi mobilde tamamen kaybettiriyordu
 * -- tooltip dokunmatikte acilmiyor. Bu yuzden metin alt satira sariyor,
 * ama sekme kartin yarisini yemesin diye 2 satirda duruyor; artani title'da.
 */
.accommodation-tab-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/*
 * Kart yeterince genisleyince ikiye ayril.
 *
 * Esik neden 78rem (once 52rem, sonra 64rem idi):
 *
 * Pansiyon kolonunun gercek genisligi karttan su zincirle turuyor:
 *   kart -> medya kolonu (@xl:w-1/3) dusulur -> sag blok p-5 (2 x 1.25rem)
 *        -> room-card-body gap (1.5rem) -> board "flex: 0 1 46%", min-width 21rem
 *
 * Hesap (rem):
 *   kart 64 -> basis 17.8 -> min-width devreye girer -> kolon 21.0  (pay YOK)
 *   kart 72 -> basis 20.2 -> min-width devreye girer -> kolon 21.0  (pay YOK)
 *   kart 76 -> basis 21.5 -> min-width asilir        -> kolon 21.5  (pay basliyor)
 *
 * Yani 76rem'e kadar kolon min-width'e YAPISIK kaliyor ve kompakt satirin
 * ihtiyaci (~21rem: rozet + fiyat + adet + buton + bosluklar) ile arasinda pay
 * kalmiyordu; satir tek sira olmaya devam ettigi ve icindeki her eleman
 * white-space:nowrap + flex-shrink:0 oldugu icin sikismak yerine UST USTE
 * biniyordu (rozet fiyatin uzerine). 64rem bu yuzden yetmedi.
 *
 * 78rem, payin acildigi ilk noktanin (76rem) bir tik ustu: bu esigin altinda
 * kart tek kolona doner, yani pansiyon secenekleri bilgi kolonunun ALTINA
 * kayar ve satir tam genislikte rahat durur. Sikistirmaktan iyi.
 *
 * min-width, yuzdenin kolonu ezmesini engelliyor: bilgi kolonu flex:1 1 0 +
 * min-width:0 oldugu icin gerektiginde o feragat ediyor.
 */
@container (width >= 78rem) {
    .room-card-body {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .room-card-info {
        flex: 1 1 0;
    }

    .room-card-board {
        flex: 0 1 46%;
        min-width: 21rem;
    }

    .room-features-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ==========================================================================
   PANSIYON KOLONU — KOMPAKT SATIR
   --------------------------------------------------------------------------
   Yan panel (rezervasyon ozeti) acilinca liste kolonu ~420px daraliyor, kart
   da onunla daraliyor. Iki kolonlu duzen korundugu icin pansiyon kolonu ~330px'e
   dusuyordu ve satirdaki bes eleman (ad + rozet + fiyat + adet + buton) sigmiyordu:
   ad "O." / "Y..." diye kirpiliyor, rozet fiyatin uzerine biniyordu.

   Ilk denemede satira flex-wrap verilmisti; o TASMAYI COZMEDI, sadece elemanlari
   alt alta atip ust uste binmeyi uretti. Dogru cozum satiri tek satirda tutup
   icerigi kucultmek.

   En buyuk kazanc pansiyon adini gizlemek: hemen ustundeki AKTIF SEKME zaten
   ayni metni ("Oda Kahvalti") gosteriyor, satirdaki tekrar bilgi katmiyordu.
   Kirpilmis "O." ise hic katmiyordu.

   Esik yukaridaki iki-kolon esigiyle AYNI olmak zorunda (78rem). Kompakt satir
   yalnizca kolon dar oldugu icin, yani yalnizca IKI KOLONLU duzende gerekli.
   Ikisi ayrisirsa (ornegin burasi 64rem'de kalirsa) kart tek kolona dondugu ve
   satir zaten tam genislige kavustugu halde ad/ayirici gizli, yazilar kucuk
   kalirdi: sebepsiz bir daraltma.
   ========================================================================== */
@container (width >= 78rem) {
    /* Satir tek satir kalir; alt eleman gruplari kuculerek sigar. */
    .room-card-board .accommodation-price-section {
        gap: 0.625rem;
        padding: 0.75rem;
    }

    /* Ustteki sekme ayni bilgiyi verdigi icin satirdaki ad gereksiz. */
    .room-card-board .accommodation-board-title {
        display: none;
    }

    /* Dar satirda gorsel ayirici yer kaybi. */
    .room-card-board .accommodation-price-divider {
        display: none;
    }

    .room-card-board .refund-badge {
        padding: 0.1875rem 0.5rem;
        font-size: 0.6875rem;
        gap: 0.25rem;
    }

    .room-card-board .refund-badge__icon {
        font-size: 0.875rem;
    }

    .room-card-board .accommodation-price {
        font-size: 1rem;
        line-height: 1.25;
    }

    .room-card-board .room-count-select {
        width: 4.75rem;
        height: 2rem;
        padding-left: 0.375rem;
        padding-right: 1.25rem;
        font-size: 0.75rem;
    }

    .room-card-board .select-room-btn {
        height: 2rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        font-size: 0.75rem;
    }

    /* Fiyat + adet + buton grubu arasi bosluk; md:gap-5 buradan daraliyor. */
    .room-card-board .accommodation-price-section > div:last-child {
        gap: 0.5rem;
    }
}