/* CSS Reset & Variables */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #faa819;
    --dark: #2d3436;
    --text-main: #4a4a4a;
    --text-muted: #9c9c9c;
    --white: #ffffff;
    --bg-light: #f8f9fa;
    --container-max: 1280px;
    --transition: all 0.3s ease;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    line-height: 1.5;
    background-color: var(--white);
    overflow-x: hidden;
}

h1,
.logo-main {
    font-family: 'Outfit', sans-serif;
}

/* Layout Utilities */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.text-center {
    text-align: center;
}

/* Top Bar Styles */
/* Top Bar - Modern Dark Theme */
.top-bar {
    background-color: var(--text-dark); /* Dark theme */
    height: 48px;
    font-size: 0.85rem;
    font-weight: 500;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1010;
    display: flex;
    align-items: center;
    color: #e2e8f0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 1.5rem;
}

.top-bar-left, .top-bar-right {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 1.5rem;
}

.top-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.2s;
    height: 100%;
}

.top-item:hover {
    color: var(--white);
}

.top-item i {
    color: var(--primary);
    font-size: 0.95rem;
}

.top-item span {
    font-weight: 500;
}

.top-divider {
    width: 1px;
    height: 16px;
    background-color: rgba(255, 255, 255, 0.15);
}

.social-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.social-links a {
    color: #cbd5e1;
    transition: color 0.2s;
    display: flex;
    align-items: center;
}

.social-links a:hover {
    color: var(--primary);
}

.top-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 100%;
}

.top-dropdown .dropdown-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #cbd5e1;
}

.top-dropdown .dropdown-label i.fa-chevron-down {
    font-size: 0.7rem;
    color: #94a3b8;
}

.top-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: #cbd5e1;
    height: 100%;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

.top-action-btn:hover {
    background: transparent;
    color: var(--white);
}

.top-action-btn i {
    color: var(--primary);
}

.show-on-mobile {
    display: none !important;
}

/* Mobile Responsive Top Bar */
@media (max-width: 1024px) {
    .top-bar {
        display: none !important;
    }
    
    .top-bar-content {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 0 1rem;
    }
    
    .top-bar-left, .top-bar-right {
        display: contents; /* Allows children to participate directly */
    }
    
    .top-divider, .top-dropdown, .hide-on-mobile {
        display: none !important;
    }
    
    .show-on-mobile {
        display: flex !important;
    }
    
    .top-item, .top-action-btn {
        font-size: 0.8rem;
    }
}

/* Navbar Styles */
.navbar {
    position: fixed;
    top: 48px;
    /* Height of top-bar */
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1.25rem 0;
    /* py-5 approx */
    background: #f1f5f9;
    backdrop-filter: blur(8px);
    transition: var(--transition);
    display: block !important; /* Force block to override Bootstrap */
}

.navbar > .container {
    display: block !important; /* Force block to override Bootstrap's flex */
    max-width: var(--container-max) !important;
    padding: 0 1.5rem !important;
    width: 100% !important;
}

@media (max-width: 1024px) {
    .navbar {
        top: 0;
        padding: 0.75rem 0;
        height: auto;
        display: block;
        background-color: #f8fafc !important;
        border-bottom: 1px solid #f1f5f9;
        backdrop-filter: none;
    }
}

.navbar.scrolled {
    padding: 0.6rem 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    background: var(--white);
}

.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    flex-shrink: 0;
}

.search-btn {
    background: var(--primary) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 0 1.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

.logo-icon {
    background: var(--primary);
    padding: 0.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.umbrella-icon {
    color: var(--white);
    width: 24px;
    height: 24px;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-main {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -0.02em;
}

.logo-main .highlight {
    color: var(--primary);
}

.logo-sub {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-top: -0.25rem;
    margin-left: 0.1rem;
}

/* Desktop Menu */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dark);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.nav-item a {
    text-decoration: none;
    color: inherit;
}

.nav-item:hover {
    color: var(--primary);
}

.nav-item.dropdown svg {
    color: var(--text-muted);
    transition: var(--transition);
}

.nav-item.dropdown:hover svg {
    color: var(--primary);
    transform: rotate(180deg);
}

/* Mega Menu Styles */
.mega-menu-wrapper {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    min-width: 480px;
    /* Reduced to minimize right space */
    border-radius: 1.25rem;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(0, 0, 0, 0.02);
    padding: 1.25rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

.nav-item.dropdown:hover .mega-menu-wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mega-menu-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.mega-column:first-child {
    border-right: none;
    /* Removed vertical line */
}

.mega-link {
    display: block;
    padding: 0.85rem 1.25rem;
    font-size: 13px;
    font-weight: 500;
    color: #333333 !important;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
    /* For pseudo-element positioning */
}

/* Floating horizontal divider */
.mega-link:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: #eeeeee;
}

.mega-link:hover {
    background: rgba(250, 168, 25, 0.05);
    color: var(--primary) !important;
    border-radius: 0.75rem;
    /* Bring back radius for hover state */
}

.mega-link:hover::after {
    opacity: 0;
    /* Hide divider on hover for cleaner look */
}

/* Arrow indicator for mega menu focus */
.mega-menu-wrapper::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(255, 255, 255, 0.98);
}

.badge {
    background: #7c3aed;
    /* purple-600 */
    color: var(--white);
    font-size: 0.55rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-weight: 800;
    margin-left: 0.25rem;
}

/* Base Regular Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: block;
    min-width: 220px;
    background: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 0.8rem 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

.nav-item.dropdown:hover>.dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-submenu {
    position: relative;
}

.dropdown-menu a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    color: var(--dark);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.dropdown-menu a svg {
    color: #94a3b8;
    transform: rotate(-90deg);
    /* Arrow points to the right */
    transition: transform 0.2s ease, color 0.2s ease;
}

.dropdown-menu a:hover {
    color: var(--primary);
    background: rgba(250, 168, 25, 0.05);
    /* Highlight color */
}

.dropdown-menu a:hover svg {
    color: var(--primary);
}

/* Deep Sub-menus (Side menus) */
.sub-menu {
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 220px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 0.8rem 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(15px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
    pointer-events: none;
    display: none;
    /* Crucial fix for layout */
}

/* Only show the direct child sub-menu when the parent li is hovered */
.dropdown-submenu:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    display: block;
    /* Crucial fix for layout */
}

/* 3rd level sub-menus (Patara, Sarıbelen etc) - Grid Mega Menu Style */
.sub-menu .sub-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateX(15px);
    pointer-events: none;
    display: none;

    /* Grid layout properties */
    min-width: 550px;
    /* Wider for 3 columns */
    padding: 1.25rem;
}

/* Show 3rd level when 2nd level is hovered - as a Grid */
.sub-menu .dropdown-submenu:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    display: grid;
    /* Use grid instead of block */
    grid-template-columns: repeat(3, 1fr);
    /* 3 columns requested */
    gap: 0.5rem;
}

/* Adjust link styling inside the grid to fit better */
.sub-menu .sub-menu a {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 6px;
}

/* Sub-menu scrollbar */
.sub-menu::-webkit-scrollbar {
    width: 6px;
}

.sub-menu::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 4px;
}

.sub-menu::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.sub-menu::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Actions */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.search-bar {
    position: relative;
    display: flex;
    align-items: center;
}

.search-bar input {
    background: #ffffff !important;
    border: 1px solid var(--primary);
    border-radius: 12px !important;
    padding: 0.75rem 5rem 0.75rem 1rem !important;
    width: 280px !important;
    font-size: 0.875rem !important;
    line-height: normal !important;
    outline: none !important;
    transition: var(--transition);
}

.search-bar input:focus {
    background: var(--white);
}

.search-icon {
    display: none;
}

.search-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 0 12px 12px 0;
    padding: 0 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-login {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--dark);
    cursor: pointer;
    transition: var(--transition);
}

.btn-login:hover {
    color: var(--primary);
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}

/* Mobile Menu Panel */
.mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 400px;
    height: 100vh;
    bottom: 0;
    overflow-y: auto;
    background: var(--white);
    border-top: none;
    padding: 1.5rem 1rem;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.1);
    z-index: 1100;
    transition: left 0.3s ease;
    display: block;
}

.mobile-menu.active {
    left: 0;
}

/* Menu Close Button */
.menu-close-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.menu-close-btn:hover {
    color: var(--dark);
}

.mobile-menu .mobile-nav-list {
    margin-top: 3rem;
    padding-left: 2rem;
    transform: translateX(-10px);
}

/* Mobile Menu Footer */
.mobile-menu-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mobile-contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mobile-phone, .mobile-email {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--dark);
    text-decoration: none;
}

.mobile-phone i, .mobile-email i {
    color: var(--primary);
    font-size: 1.25rem;
    width: 24px;
    text-align: center;
}

.mobile-phone div, .mobile-email div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.mobile-phone .label, .mobile-email .label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

.mobile-phone .value, .mobile-email .value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark);
}

.mobile-whatsapp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #25D366;
    color: white;
    padding: 0.55rem 1.25rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    width: 100%;
    margin: 0.75rem 0;
    transition: all 0.2s ease;
    border: none;
}

.mobile-whatsapp-btn:hover {
    background: #dcfce7;
    transform: translateY(-1px);
}

.mobile-whatsapp-btn i {
    font-size: 1.2rem;
}

.mobile-social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding-top: 0.5rem;
}

.mobile-social-links .social-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f8fafc;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s;
    font-size: 1rem;
}

.mobile-social-links .social-link:hover {
    background: var(--primary);
    color: white;
}

/* Hero Section */
.hero {
    position: relative;
    width: 100%;
}

@media (max-width: 1024px) {
    .hero {
        margin-top: -30px;
    }
}

.hero-bg {
    position: relative;
    height: 600px;
    width: 100%;
    overflow: hidden;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 10s ease;
}

.hero:hover .hero-bg img {
    transform: scale(1.05);
}

.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, transparent 60%, rgba(0, 0, 0, 0.2) 100%);
}

.hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 10rem;
    color: var(--white);
    z-index: 100; /* stays above promotion cards below it */
    pointer-events: none; /* Allows clicks to pass through to underlying elements */
}

.hero-content > * {
    pointer-events: auto; /* Re-enables clicks for inner contents */
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    text-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    text-align: center !important;
    width: 100%;
    display: block;
    margin: 0 auto 1.5rem auto !important;
    max-width: 900px;
}

.hero-title .highlight {
    color: var(--primary);
    transition: opacity 0.5s ease, transform 0.5s ease;
    display: inline-block;
}

.hero-title .highlight.fade-out {
    opacity: 0;
    transform: translateY(-5px);
}

.location-badge {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.825rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--white);
}

.location-badge svg circle,
.location-badge svg path {
    fill: var(--primary-color) !important;
}

.pin-icon {
    color: var(--primary);
    filter: drop-shadow(0 0 2px rgba(250, 168, 25, 0.4));
    /* Glow for prominence */
}

/* Refining Measurements */
.logo-main {
    font-size: 1.5rem;
    /* text-2xl */
}

.nav-item {
    font-size: 0.875rem;
    /* text-sm */
}

.hero-title {
    font-size: 2.25rem;
    /* text-4xl */
    line-height: 2.5rem;
}

/* Tablets (landscape and portrait) */
@media (max-width: 1024px) {

    .nav-menu,
    .btn-login {
        display: none;
    }

    .nav-content {
        flex-wrap: wrap !important;
        gap: 0.75rem 0.5rem;
        justify-content: space-between;
    }

    .logo {
        gap: 0.4rem;
    }

    .logo-icon {
        padding: 0.4rem;
    }

    .umbrella-icon {
        width: 18px;
        height: 18px;
    }

    .logo-main {
        font-size: 1.1rem;
    }

    .logo-sub {
        font-size: 0.5rem;
        letter-spacing: 0.1em;
    }

    .mobile-nav-icons {
        display: none; /* Base is hidden, overridden by show-on-mobile */
        align-items: center;
        gap: 0.75rem;
        margin-left: auto;
        order: 1;
    }

    .mobile-nav-icons.show-on-mobile {
        display: flex !important;
    }

    .mobile-icon-btn {
        color: var(--dark);
        font-size: 1.15rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .mobile-icon-btn:hover {
        color: var(--primary);
    }

    .mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: static;
        margin-left: 0.75rem;
        flex-shrink: 0;
        order: 2;
        color: var(--dark);
        padding: 5px;
        z-index: 10;
    }

    .nav-actions {
        display: flex !important;
        justify-content: center;
        flex: 0 0 100%;
        width: 100%;
        margin-top: 0.75rem;
        order: 3;
    }

    .nav-actions .search-bar {
        display: flex;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        border-radius: 12px;
        background: #fff;
        overflow: visible;
        position: relative;
        border: 1px solid #fca510;
    }

    .nav-actions .search-bar input {
        width: 100% !important;
        padding: 0.5rem 5rem 0.5rem 1rem !important; /* Keep right padding so text doesn't go under absolute button */
        font-size: 0.8rem !important;
        border: none !important;
        background: transparent !important;
        height: 36px !important;
    }

    .nav-actions .search-btn {
        padding: 0 1.25rem;
        height: 36px;
        font-size: 0.8rem;
        border-radius: 0 12px 12px 0;
        background: var(--primary);
        color: white;
        border: none;
        flex-shrink: 0;
    }

    .hero-bg {
        height: 500px;
    }

    .hero-content {
        padding-top: 8rem;
    }

    .hero-title {
        font-size: 1.5rem;
        line-height: 2rem;
        margin-bottom: 0.75rem;
    }
}

/* Premium Search Suggestions Dropdown */
.search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #f1f5f9;
}

.search-suggestions.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.suggestion-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.suggestion-item:hover {
    background-color: #f8fafc;
    border-left-color: var(--primary);
}

.suggestion-img {
    width: 80px;
    height: 50px;
    border-radius: 6px;
    object-fit: cover;
    margin-right: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* Premium shadow on image */
}

.suggestion-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.suggestion-name {
    font-weight: 700;
    font-size: 14px;
    color: #1e293b;
    line-height: 1.2;
}

.suggestion-location {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
}

/* Search Box */
.search-box-container {
    width: 100%;
    margin-top: 2rem;
    position: relative;
    z-index: 50;
}

.desktop-search {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 100;
}

.search-box {
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    padding: 0.25rem;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    border: 1px solid #f3f4f6;
}

.search-field {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0.35rem 0.75rem; /* Reduced from 1.75rem for compression */
    border-right: 1px solid #f3f4f6;
    transition: var(--transition);
    cursor: pointer;
    min-width: 0; /* Allow shrinking below 200px */
}

.search-field:last-of-type {
    border-right: none;
}

.search-field.no-icon {
    padding-left: 2rem;
}

.search-field svg {
    color: var(--primary);
    margin-right: 6px; /* Reduced for compression */
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    stroke-width: 1; 
}

.area-field {
    width: 170px; /* Rigidly fixed for stability */
    flex: 0 0 170px; 
}

.type-field {
    width: 190px; /* Rigidly fixed for stability */
    flex: 0 0 190px;
}

/* Desktop-specific guest field refinements */
@media (min-width: 1024px) {
    .guests-field {
        width: 210px; /* Expanded for better text legibility per request */
        flex: 0 0 210px;
    }

    .guests-field .select-field {
        padding-right: 10px; /* Pushed chevron/placeholder 10px to the left per request */
    }
}

.desktop-date-wrapper {
    display: flex;
    flex: 2; /* Spans across Giriş & Çıkış */
}

.search-field.date-field {
    width: 135px; /* Rigidly fixed to prevent selection-based expansion */
    padding: 0.35rem 0.75rem; 
    flex: 0 0 135px;
}

.checkin-field {
    border-right: none; 
}

.checkin-field .field-content label {
    transform: translateY(-3px); /* Shifted up visually without affecting siblings per request */
}

.date-selector-panel {
    position: absolute;
    top: calc(100% + 11px);
    left: -22rem; /* Centered under the pair */
    width: 650px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    border: 1px solid #f1f5f9;
    padding: 1.5rem;
}

.field-icon {
    margin-right: 6px;
    flex-shrink: 0;
}

.field-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Enforce vertical centering */
    text-align: left;
    flex-grow: 1;
    min-width: 0;
}

.field-content label {
    font-size: 11px;
    font-weight: 800;
    color: #000000;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.2;
    margin-bottom: 2px; /* Consistent gap to selection text */
}

.field-content input {
    border: none;
    outline: none;
    font-size: 0.95rem;
    color: var(--dark);
    font-weight: 600;
    background: transparent;
    width: 100%;
    padding: 0;
}

.field-content input::placeholder {
    color: var(--text-muted);
    font-weight: 500;
}

.field-content .placeholder {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* Switched from flex to block for ellipsis to work */
}

/* Unifying result styling for all field types */
.field-content .placeholder.has-value {
    font-size: 11px;
    font-weight: 600;
    color: #475569;
}

.select-field {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Anchored to far right for stable positioning */
    width: 100%;
    min-width: 0;
}

.chevron {
    color: #d1d5db;
    /* text-gray-300 */
    transition: var(--transition);
    stroke-width: 1; /* More minimal look as requested */
}

.search-field:hover .chevron {
    color: var(--primary);
}

/* Ultra-Minimal Location Selector */
.location-selector-wrapper {
    position: relative;
    width: 100%;
}

.location-selector-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
}

.location-selector-panel {
    position: absolute;
    top: calc(100% + 11px);
    left: -2rem; /* Sağa kaydırıldı (önceki: -3.95rem) */
    background: var(--white);
    border-radius: 8px; /* Slightly squarer than before, matching reference */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Minimal shadow */
    z-index: 1000;
    display: none;
    border: 1px solid #f1f5f9;
}

.area-panel {
    width: 170px; /* Aligned with the field width */
    left: -42px; /* Pull left to align with the search box left edge */
}

.type-panel {
    width: calc(100% + 9rem); /* Wide for 14 options */
}

/* Date Selector Panel */
.date-selector-wrapper {
    position: relative;
    width: 100%;
}

.date-selector-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
}

.date-selector-panel {
    position: absolute;
    top: calc(100% + 11px);
    left: -10rem; /* Center the wide panel relative to the field */
    width: 650px; /* Wide enough for two calendars */
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    border: 1px solid #f1f5f9;
    padding: 1.5rem;
}

.date-selector-wrapper.active .date-selector-panel {
    display: block;
}


/* Simplified Calendar Styles */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.calendar-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 36px;
    padding: 0 10px;
}

.calendar-month {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    z-index: 1;
}

.calendar-nav {
    color: #cbd5e1;
    cursor: pointer;
    font-size: 0.8rem;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.calendar-weekday {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.4rem;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.calendar-day:hover {
    background: #f8fafc;
    color: #334155;
    border-color: #e2e8f0;
}

.calendar-day.selected-start,
.calendar-day.selected-end {
    background: #fff !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
}

.calendar-day.selected-start {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.calendar-day.selected-end {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.calendar-day.in-range {
    background: rgba(250, 168, 25, 0.1) !important;
    border-radius: 0;
    border-color: transparent;
}

.calendar-day.empty {
    border: none;
    cursor: default;
}

.calendar-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* display:flex!important — Font Awesome'un .fas{display:inline-block} kuralı sonra
       yüklendiği için flex'i ezip oku kaydırıyordu; !important ile ortalanır. */
    display: flex!important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: all 0.2s ease;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    color: #64748b;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    z-index: 2;
}

.calendar-nav.prev {
    left: 5px;
}

.calendar-nav.next {
    right: 5px;
}

.calendar-nav:hover {
    background: #f8fafc;
    color: var(--primary);
    transform: translateY(-50%) scale(1.05);
}

.calendar-nav svg {
    display: block;
}


/* Added scrollbar helper for tall dropdowns like Villa Tipi */
.styled-scroll {
    max-height: 280px;
    overflow-y: auto;
}
.styled-scroll::-webkit-scrollbar {
    width: 6px;
}
.styled-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.styled-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.styled-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

@media (max-width: 1024px) {
    .location-selector-panel {
        width: 100%;
        left: 0;
        top: calc(100% + 8px);
    }
}

.location-selector-wrapper.active .location-selector-panel {
    display: block;
    animation: fadeInMinimal 0.2s ease-out forwards;
}

.location-option {
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.location-option:hover {
    background-color: #f1f5f9; /* Matching the light gray hover */
}

/* Actual checkboxes in minimal design */
.checkbox-container {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    user-select: none;
    position: relative;
    gap: 0.75rem; /* Space between checkbox and text */
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 1.5px solid #e2e8f0; /* subtle gray border */
    border-radius: 4px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.checkbox-container:hover input ~ .checkmark {
    border-color: #cbd5e1;
}

.checkbox-container input:checked ~ .checkmark {
    background-color: var(--primary);
    border-color: var(--primary);
}

.checkmark:after {
    content: "";
    display: none;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

.option-text {
    font-size: 12px;
    font-weight: 700;
    color: #475569d6;
    text-transform: none; /* remove earlier uppercase */
    transition: color 0.2s ease;
    display: block;
}

/* Selected state styling only using typography/color */
.checkbox-container input:checked~.option-text {
    color: var(--primary);
    font-weight: 500;
}

/* Selection badge removed to unify all search results with plain typography */
.selection-badge-removed { 
    display: none; 
}

@keyframes fadeInMinimal {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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


/* Guest Selector Dropdown */
.guest-selector-wrapper {
    position: relative;
    width: 100%;
    min-width: 0;
}

.guest-selector-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    cursor: pointer;
    min-width: 0;
}

.guest-selector-trigger .placeholder {
    padding-right: 0; /* Removing gap to allow chevron to stay on the far right */
}

.guest-selector-panel {
    position: absolute;
    top: calc(100% + 11px);
    right: -92px; /* Pull it to the right to be flush with the search box outer edge */
    width: 240px; /* Narrowed as requested */
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    border: 1px solid #f3f4f6;
    cursor: default;
}

.guest-selector-wrapper.active .guest-selector-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.guest-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.guest-row:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.guest-label {
    display: flex;
    flex-direction: column;
}

.guest-label span {
    font-size: 11px;
    font-weight: 700;
    color: var(--dark);
}

.guest-label small {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.guest-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-minus,
.btn-plus {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.btn-minus:hover:not(:disabled),
.btn-plus:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-minus:disabled,
.btn-plus:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.guest-count {
    font-size: 0.8rem !important;
    /* Override field-content span */
    font-weight: 700;
    width: 1.5rem;
    text-align: center;
    color: var(--dark, #1e293b);
}

/* Ensure mobile search area overflow doesn't hide panel */
@media (max-width: 1024px) {
    .guest-selector-panel {
        width: 100%;
        left: 0;
        right: auto;
        top: calc(100% + 10px);
    }
}

.search-btn-wrapper {
    padding: 0.25rem 0.5rem 0.25rem 0;
    display: flex;
    align-items: center;
    margin-left: 5px; /* Spaced 5px from the divider to its left */
}

.search-submit {
    background: var(--primary);
    color: var(--white);
    border: none;
	transform:translateX(3px);
    padding: 0.65rem 0.75rem; /* Reverted to original compact size */
    border-radius: 0.75rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
}


/* Mobile Search Area */
.mobile-search-area {
    display: none;
    padding: 0;
    margin-top: -1rem;
    position: relative;
    z-index: 30;
}


/* Mobile Search Area Tablets */
@media (max-width: 1024px) {
    .desktop-search {
        display: none;
    }

    .mobile-search-area {
        display: block;
    }

    .mobile-search-box .search-box {
        display: flex;
        flex-direction: column;
        border-radius: 14px;
        padding: 0.5rem;
        width: 100%;
    }

    .mobile-search-box .search-field {
        border-right: none;
        border-bottom: 1px solid #e2e8f070;
        padding: 0.75rem 1rem;
        width: 100%;
        flex: auto;
    }

    .mobile-search-box .search-field:last-of-type {
        border-bottom: none;
    }

    .mobile-date-wrapper {
        display: flex;
        flex-direction: row;
        width: 100%;
        border-bottom: 1px solid #e2e8f070;
    }

    .mobile-date-wrapper .date-field {
        flex: 1;
        width: auto !important;
        border-bottom: none;
        border-right: none;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .mobile-date-wrapper .checkin-field {
        padding-left: 1rem;
        padding-right: 0.5rem;
    }

    .mobile-date-wrapper .checkout-field {
        padding-left: 0.5rem;
        padding-right: 1rem;
    }

    .mobile-date-wrapper .select-field {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .mobile-date-wrapper .date-field:last-of-type {
        border-right: none;
    }

    .mobile-search-box .search-submit {
        background: var(--primary);
        color: var(--white);
        border: none;
        width: 50%;
        /* Further shortened to 50% */
        margin: 0.5rem auto;
        /* Centered */
        gap: 0.5rem;
        padding: 0.75rem;
        border-radius: 0.75rem;
        box-shadow: 0 4px 12px rgba(250, 168, 25, 0.2);
    }

    .mobile-search-box .search-submit .mob-txt {
        display: inline;
        font-weight: 700;
        font-size: 0.8rem;
        letter-spacing: 0.05em;
    }

    /* Mobile Calendar Adjustments — sağ/sol 3px daraltıldı (kullanıcı isteği) */
    .mobile-search-box .date-selector-panel {
        width: calc(100% + 2.5rem - 6px);
        left: calc(-1.25rem + 3px);
        padding: 1.25rem 1rem;
    }

    .mobile-search-box .calendar-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .navbar {
        padding: 0.75rem 0;
    }

    .hero {
        margin-top: 70px;
    }

    .hero-bg {
        height: 450px;
    }

    .hero-content {
        padding-top: 5rem;
    }

    .hero-title {
        font-size: 1.15rem;
        line-height: 1.5rem;
        padding: 0 1.5rem;
        margin-bottom: 2rem;
    }

    .location-badge {
        padding: 0.2rem 0.6rem;
        font-size: 0.5rem;
    }

    .pin-icon {
        width: 10px;
        height: 10px;
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .mobile-search-area {
        margin-top: -7.125rem;
        z-index: 50;
    }

    .mobile-search-area .container {
        padding: 0 0.5rem;
        /* Increased width by reducing side padding */
    }
}

/* Main Content Container */
.main-content {
    flex-grow: 1;
}

.content-container {
    width: 95%;
    max-width: var(--container-max);
    margin: 1.5rem auto 5rem;
    position: relative;
    z-index: 30;
}

@media (min-width: 1024px) {
    .content-container {
        width: 85%;
        margin-top: calc(-2rem - 10px);
    }
}

/* Promotion Cards Grid */
.promotion-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    /* Original gap-5 */
    margin-bottom: 3rem;
    width: 100%;
}

@media (min-width: 768px) {
    .promotion-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .promotion-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Promo Card Base */
.promo-card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 8rem;
    /* h-32 */
    background: var(--white);
    border: 2px solid var(--primary);
    border-radius: 1.2rem;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

@media (min-width: 1024px) {
    .promo-card {
        height: 9rem;
        /* h-36 */
    }
}

.promo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Card Expanding Background */
.side-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 5rem;
    /* w-20 */
    height: 100%;
    background: var(--primary);
    opacity: 0.1;
    /* bg-primary/10 */
    transition: width 0.5s ease;
    z-index: 1;
}

.promo-card:hover .side-bg {
    /* width expansion removed as requested */
    opacity: 0.15;
}

/* Icon Area */
.icon-area {
    position: relative;
    z-index: 10;
    width: 5rem;
    /* w-20 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-right: 1px solid #f3f4f6;
}

.icon-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    /* w-12 */
    height: 4rem;
    background: rgba(250, 168, 25, 0.05);
    /* iconBg: bg-primary/5 */
    color: var(--primary);
    border: 1px solid #dbdbdb;
    border-radius: 0.75rem;
    /* rounded-xl */
    transition: transform 0.5s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.promo-card:hover .icon-box {
    transform: scale(1.05);
}

.card-id {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    background: var(--primary);
    color: var(--white);
    font-size: 7px;
    font-weight: 900;
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Card Content Area */
.card-content {
    position: relative;
    z-index: 10;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1.25rem;
    /* px-5 */
}

.subtitle-badge {
    display: inline-block;
    width: fit-content;
    /* Fit to text content */
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.1em;
    padding: 0.125rem 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary);
    border: 1px solid #f3f4f6;
    border-radius: 9999px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #000;
    line-height: 1.4;
    padding-right: 1.5rem;
}

@media (min-width: 1024px) {
    .card-title {
        font-size: 14px;
    }
}

.sub-action {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    margin-top: 0.125rem;
}

/* Card Footer */
.card-footer {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.footer-line {
    height: 1px;
    width: 0.75rem;
    background: var(--primary);
    border-radius: 9999px;
}

.footer-text {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    /* text-gray-500 */
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

/* Arrow Icon */
.arrow-icon {
    position: absolute;
    right: 0.5rem;
    top: 0;
    height: 100%;
    width: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    color: #9ca3af;
    /* text-gray-400 */
    transition: opacity 0.3s ease, color 0.3s ease;
    z-index: 10;
}

.promo-card:hover .arrow-icon {
    opacity: 1;
    color: #4b5563;
    /* text-gray-600 */
}

/* Early Bird Promo Section */
.early-bird-promo {
    width: 100%;
    margin-bottom: 3rem;
    margin-top: -90px;
    position: relative;
    z-index: 20;
}

.promo-wrapper {
    position: relative;
    padding: 3px;
    /* Slightly thicker */
    border-radius: 2.2rem;
    overflow: hidden;
    border: 1px solid rgba(209, 213, 219, 0.8);
}

/* Border Gradient Animation - Aggressive Glow */
.border-gradient {
    position: absolute;
    inset: -50%;
    /* Adjusted for better blur coverage */
    background: conic-gradient(from 0deg,
            transparent 0%,
            var(--primary) 15%,
            #fbbf24 25%,
            /* Added secondary bright orange */
            transparent 40%,
            transparent 60%,
            #3b82f6 75%,
            #60a5fa 85%,
            /* Added secondary bright blue */
            transparent 100%);
    opacity: 1;
    filter: blur(15px);
    /* Glow effect */
    animation: border-rotate 4s linear infinite;
    /* Faster rotation */
    z-index: 0;
}

@keyframes border-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.promo-inner {
    position: relative;
    z-index: 10;
    background: var(--white);
    border-radius: 2.1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .promo-inner {
        flex-direction: row;
        align-items: stretch;
    }
}

.campaign-block {
    flex: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.campaign-block.early-booking {
    align-items: flex-start;
    text-align: left;
}

.campaign-block.payment-opp {
    align-items: center;
    text-align: center;
}

.campaign-block.honeymoon-spec {
    align-items: flex-end;
    text-align: right;
}

/* Block Header Badges */
.block-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.badge-premium {
    background: rgba(250, 168, 25, 0.1);
    border: 1px solid rgba(250, 168, 25, 0.2);
    color: var(--primary);
    font-size: 9px;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    letter-spacing: 0.2em;
    width: fit-content;
}

.badge-limited {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #9ca3af;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.badge-flexible {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #059669;
    font-size: 9px;
    font-weight: 900;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    letter-spacing: 0.2em;
    width: fit-content;
}

/* Campaign Typography */
.campaign-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: #111827;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.gradient-text {
    background: linear-gradient(to right, var(--primary), rgba(250, 168, 25, 0.8));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.emerald-text {
    color: #10b981;
}

.campaign-detail {
    margin-bottom: 1.25rem;
}

.detail-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #374151;
    margin-bottom: 0.25rem;
}

.early-booking .detail-row {
    justify-content: flex-start;
}

.payment-opp .detail-row {
    justify-content: center;
}

.honeymoon-spec .detail-row {
    justify-content: flex-end;
}

.detail-row strong {
    font-size: 13px;
    font-weight: 700;
}

.campaign-detail p {
    font-size: 12px;
    color: #6b7280;
    max-width: 240px;
    line-height: 1.6;
}

/* Promo Buttons */
.btn-promo {
    padding: 0.625rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-promo:active {
    transform: scale(0.95);
}

.btn-promo.dark {
    background: #030712;
    color: var(--white);
}

.btn-promo.dark:hover {
    background: var(--primary);
}

.btn-promo.emerald {
    background: #059669;
    color: var(--white);
}

.btn-promo.emerald:hover {
    background: #030712;
}

/* Dividers */
.divider {
    background: #f3f4f6;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .divider {
        width: 1px;
        height: 10rem;
        align-self: center;
    }
}

@media (max-width: 1023px) {
    .divider {
        height: 1px;
        width: calc(100% - 3rem);
        margin: 0 auto;
    }
}

/* Trust & Transparency Section (Güvenli Tatil Deneyimi) */
.trust-transparency {
    padding: 3rem 0;
    width: 100%;
}

.trust-header {
    margin-bottom: 2.5rem;
    text-align: left;
}

.trust-subtitle {
    color: #000;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.3em;
    display: block;
    margin-bottom: 0.25rem;
}

.trust-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 900;
    color: #faa819;
    margin-top: 0.25rem;
}

@media (min-width: 1024px) {
    .trust-title {
        font-size: 1.55rem;
    }
}

.trust-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .trust-grid {
        grid-template-columns: 350px 1fr;
    }
}

/* Left main info box */
.trust-info-box {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 1.25rem;
    border: 1px solid #cbd5e1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}


.trust-info-box .box-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.trust-info-box .box-title .highlight {
    color: var(--primary);
}

.trust-info-box .box-desc {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.6;
    font-weight: 500;
}

/* Right features grid */
.trust-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .trust-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.trust-feature-card {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #cbd5e1;
    padding: 1rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}

.trust-feature-card:hover {
    background: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}

.feature-icon-box {
    width: 2.25rem;
    height: 2.25rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease;
}

.trust-feature-card:hover .feature-icon-box {
    transform: scale(1.1);
}

.feature-icon-box svg {
    width: 1rem;
    height: 1rem;
}

/* Colors for icons */
.feature-icon-box.orange {
    color: #faa819;
}

.feature-icon-box.blue {
    color: #059ad3;
}

.feature-icon-box.emerald {
    color: #10b981;
}

.feature-icon-box.purple {
    color: #a855f7;
}

.trust-feature-card h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.25rem;
}

.trust-feature-card p {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 500;
    line-height: 1.4;
}

/* Mobile Nav List Styling */
@media (max-width: 768px) {
    .mobile-nav-list {
        list-style: none;
        margin-bottom: 2rem;
        padding-left: 2rem;
        transform: translateX(-10px);
    }

    .mobile-nav-list li {
        border-bottom: 1px solid #f3f4f6;
    }

    .mobile-nav-item {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .mobile-nav-item a {
        flex: 1;
        padding: 1rem 0;
        text-decoration: none !important;
        color: var(--dark) !important;
        font-weight: 400 !important;
        display: block; /* Ensure it takes space */
    }

    /* Sub-menu styling for mobile */
    .mobile-sub {
        list-style: none;
        padding-left: 1rem;
        margin-top: 0;
        margin-bottom: 0.5rem;
        border-left: 2px solid #f1f5f9;
        margin-left: 0.5rem;
        display: none;
        /* Hidden by default */
    }

    .mobile-sub.active {
        display: block;
        /* Show when active */
    }

    .mobile-sub li {
        border-bottom: none !important;
    }

    .mobile-sub-title {
        color: var(--primary);
        font-weight: 700;
        font-size: 0.85rem;
        padding: 0.5rem 0;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .mobile-sub a {
        padding: 0.5rem 0.5rem;
        font-size: 0.9rem;
        color: #475569;
        font-weight: 500;
        display: block;
        text-decoration: none !important;
    }

    .mobile-sub a:hover {
        color: var(--primary);
    }

    /* New Submenu Toggle Button */
    .submenu-toggle {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        position: relative;
    }

    .submenu-toggle::after {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        border-right: 2px solid #94a3b8;
        border-bottom: 2px solid #94a3b8;
        transform: rotate(45deg);
        transition: transform 0.3s ease, border-color 0.3s ease;
        margin-top: -4px; /* Adjust for centering rotated box */
    }

    .submenu-toggle.expanded::after {
        transform: rotate(-135deg);
        border-color: var(--primary);
        margin-top: 2px;
    }

    /* Inner level adjustments */
    .mobile-sub .mobile-nav-item a {
        padding: 0.5rem 0;
        font-size: 0.95rem;
    }

    .mobile-sub .submenu-toggle {
        width: 44px;
        height: 44px;
    }

    .mobile-actions {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .mobile-search {
        position: relative;
        display: flex;
        align-items: center;
    }

    .mobile-search input {
        width: 100%;
        background: #ffffff;
        border: 1px solid var(--primary);
        border-radius: 4px;
        padding: 0.75rem 5rem 0.75rem 1rem;
        font-size: 0.875rem;
    }

    .mobile-search svg {
        display: none;
    }
}

/* Villa Types Section */
.villa-types {
    padding: 3rem 0;
    position: relative;
    overflow: hidden;
}

.villa-types-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    gap: 1rem;
}

@media (min-width: 768px) {
    .villa-types-header {
        flex-direction: row;
        align-items: flex-end;
    }
}

.subtitle-blue {
    color: #000;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    display: block;
    margin-bottom: 0.25rem;
}

.main-title {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--primary);
    font-family: 'Outfit', sans-serif;
}

@media (min-width: 1024px) {
    .main-title {
        font-size: 1.55rem;
    }
}

.gray-text {
    color: #9ca3af;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.btn-all-categories {
    display: none;
    align-items: center;
    gap: 0.5rem;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

@media (min-width: 768px) {
    .btn-all-categories {
        display: flex;
    }
}

.btn-all-categories:hover {
    color: #059ad3;
}

.btn-all-categories svg {
    transition: transform 0.3s ease;
}

.btn-all-categories:hover svg {
    transform: translateX(4px);
}

.scroll-nav {
    display: flex;
    gap: 0.75rem;
}

.nav-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 2px solid #f3f4f6;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.nav-btn:hover {
    background: #059ad3;
    color: var(--white);
    border-color: #059ad3;
}

.nav-btn:active {
    transform: scale(0.9);
}

/* Scroll Container */
.villa-types-scroll {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding-bottom: 1.5rem;
    padding-top: 0.5rem;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    scroll-snap-type: x mandatory;
}

.villa-types-scroll::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari and Opera */
}

/* Type Card */
.type-card {
    min-width: 65vw;
    background: var(--white);
    border: 1px solid #cbd5e1;
    border-radius: 2rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    scroll-snap-align: center;
    text-decoration: none; /* Ensure no underline for link */
}

@media (min-width: 768px) {
    .type-card {
        min-width: 200px;
        scroll-snap-align: start;
    }
}

.type-card:hover,
.type-card.active {
    transform: translateY(-2px);
    border-color: #059ad3;
    box-shadow: 0 15px 30px -10px rgba(5, 154, 211, 0.2);
}

.icon-stage {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
    border: 1px solid rgba(5, 154, 211, 0.1);
}

.blue-bg {
    background: rgba(5, 154, 211, 0.1);
}

.type-card:hover .icon-stage,
.type-card.active .icon-stage {
    transform: scale(1.05);
}

.type-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    transition: color 0.3s ease;
}

.type-card:hover .type-title,
.type-card.active .type-title {
    color: #059ad3;
}

/* Badges */
.badge-populer,
.badge-yeni {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: #059ad3;
    color: var(--white);
    font-size: 7px;
    font-weight: 900;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    box-shadow: 0 2px 4px rgba(5, 154, 211, 0.2);
}

/* Corner Arrow */
.corner-arrow {
    position: absolute;
    top: 1rem;
    right: 1rem;
    opacity: 0.4;
    /* Faded / Soluk */
    color: var(--text-muted);
    /* Gray color */
    transform: translate(0, 0);
    transition: all 0.3s ease;
}

.type-card:hover .corner-arrow,
.type-card.active .corner-arrow {
    opacity: 1;
    color: #059ad3;
    /* Blue on hover */
}


/* Progress Bar on Hover */
.progress-bar {
    position: absolute;
    bottom: 0;
    left: 15%;
    width: 70%;
    height: 3px;
    background: transparent;
    overflow: hidden;
    border-radius: 9999px;
}

.progress-bar div {
    width: 0;
    height: 100%;
    background: #059ad3;
    transition: width 0.4s ease;
}


/* Trending Villas Section */
.trending-villas {
    padding: 2rem 0 0;
}

.trending-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
}

.subtitle-orange {
    color: #000;
    /* Black color */
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    display: block;
}

.btn-all-villas {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 700;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.btn-all-villas:hover {
    color: var(--primary);
}

.btn-all-villas svg {
    transition: transform 0.3s ease;
}

.btn-all-villas:hover svg {
    transform: translateX(4px);
}

/* Trending Grid */
.trending-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .trending-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Villa Card */
.villa-card {
    background: var(--white);
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid #cbd5e1;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .villa-card {
        flex-direction: row;
        border-radius: 2rem;
    }
}

.villa-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #059ad3;
}

/* Image Box */
.card-image-box {
    position: relative;
    width: 100%;
    height: 13rem;
    overflow: hidden;
    background: #f3f4f6;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .card-image-box {
        width: 42%;
        height: auto;
    }
}

.card-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.villa-card:hover .card-image-box img {
    transform: scale(1.05);
}

.top-badges {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.badge-blue,
.badge-orange {
    font-size: 9px;
    font-weight: 900;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    color: var(--white);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.badge-blue {
    background: #059ad3;
}

.badge-orange {
    background: var(--primary);
}

.btn-wishlist {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-wishlist:hover {
    background: var(--white);
    color: #f43f5e;
}

.rating-badge {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    backdrop-filter: blur(4px);
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.rating-badge span {
    font-size: 12px;
    font-weight: 900;
    color: #64748b;
}

/* Card Body */
.card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    background: var(--white);
}

@media (min-width: 768px) {
    .card-body {
        padding: 1.5rem;
    }
}

.body-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.location {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #9ca3af;
    margin-bottom: 0.125rem;
}

.location span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.villa-name {
    font-size: 1rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1.2;
}

.price-box {
    text-align: right;
}

.price {
    display: block;
    font-size: 0.875rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
}

@media (min-width: 768px) {
    .price {
        font-size: 1rem;
    }
}

.price-label {
    font-size: 7px;
    font-weight: 900;
    color: #d1d5db;
    letter-spacing: 0.1em;
}

/* Features Bar */
.features-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid #f9fafb;
    border-bottom: 1px solid #f9fafb;
    margin: 1rem 0;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.feature-item span {
    font-size: 13px;
    font-weight: 700;
    color: #374151de;
	margin-top:7px;
}

.features-bar {
	margin-top: 13px;
}

.features-bar .sep {
    width: 1px;
    height: 0.75rem;
    background: #e5e7eb;
}

/* Amenities List */
.amenities-list {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.125rem 0;
    margin-bottom: 1rem;
}

.amenities-list::-webkit-scrollbar {
    display: none;
}

.amenity {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.amenity span {
    font-size: 10px;
    font-weight: 700;
    color: #6b7280;
    white-space: nowrap;
}

/* Promo Info */
.promo-info {
    background: rgba(5, 154, 211, 0.05);
    border: 1px solid rgba(5, 154, 211, 0.1);
    border-radius: 0.75rem;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.promo-info p {
    font-size: 10px;
    font-weight: 700;
    color: #059ad3;
    line-height: 1.3;
    margin: 0;
}

.promo-info svg {
    flex-shrink: 0;
}

/* Actions */
.card-actions {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    width: 100%;
}

.card-actions .btn-primary {
    flex: 1;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: #059ad3;
    color: var(--white);
    border: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(5, 154, 211, 0.2);
    padding: 0 0.5rem;
}

.card-actions .btn-primary:hover {
    background: #0487b9;
    box-shadow: 0 10px 15px -3px rgba(5, 154, 211, 0.3);
}

.card-actions .btn-primary svg {
    transition: transform 0.3s ease;
}

.card-actions .btn-primary:hover svg {
    transform: translateX(4px);
}

.card-actions .btn-outline {
    flex: 1;
    height: 2.5rem;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid #059ad3;
    background: transparent;
    color: #059ad3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    cursor: default;
    white-space: nowrap;
}

@media (max-width: 360px) {

    .card-actions .btn-primary,
    .card-actions .btn-outline {
        font-size: 9px;
        gap: 0.25rem;
        padding: 0 0.25rem;
    }
}

/* Monthly Deals Bento Design (Aylara Göre Fırsatlar) */
.monthly-deals {
    background-color: #fafbfc;
    padding: 3rem 0;
    color: var(--dark);
}

.monthly-deals .container {
    padding: 0;
}

.bento-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 2.5rem;
    padding: 2rem;
    /* Reduced padding from 3.5rem 2.5rem */
    /* Internal padding for content */
    box-shadow: none;
    /* Explicitly removing any shadow */
}

.deals-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

@media (min-width: 1200px) {
    .deals-wrapper {
        flex-direction: row;
        align-items: flex-start;
        gap: 4rem;
    }
}

.deals-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

@media (min-width: 1200px) {
    .deals-info {
        flex: 0 0 auto;
        margin-bottom: 0;
        gap: 1.5rem;
    }
}

.deals-icon-box {
    width: 3.5rem;
    height: 3.5rem;
    background: rgba(250, 168, 25, 0.1);
    color: #faa819;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.deals-title {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.25;
    color: #1e293b;
    letter-spacing: -0.02em;
    margin: 0;
}

@media (min-width: 1200px) {
    .deals-title {
        font-size: 1.875rem;
        /* Bir tık büyütüldü (Masaüstü için ideal küçültülmüş boy) */
        line-height: 1.1;
    }
}

.deals-description {
    font-size: 1.1rem;
    color: #64748b;
    line-height: 1.6;
}

.deals-content {
    flex: 1;
    min-width: 0;
}

/* Month Tabs Navigation */
.deals-nav-row {
    margin-bottom: 1.5rem;
}

.month-nav-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    background: #f8fafc;
    padding: 0.25rem 0.5rem;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

@media (min-width: 1024px) {
    .month-nav-wrapper {
        padding: 0.25rem 1.5rem;
    }
}

.month-nav-btn {
    background: white;
    border: 1px solid #e2e8f0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
    transition: all 0.3s ease;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
    .month-nav-btn {
        display: none !important;
    }
}

.month-nav-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(250, 168, 25, 0.05);
}

.month-tabs-minimal {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.25rem 0.5rem;
    flex: 1;
}

.month-tabs-minimal::-webkit-scrollbar {
    display: none;
}

.month-tab-ref {
    background: none;
    border: none;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.5rem 0;
    white-space: nowrap;
    position: relative;
    transition: all 0.3s ease;
}

.month-tab-ref.active {
    color: #faa819;
}

.month-tab-ref.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #faa819;
    border-radius: 4px;
}

/* Square Card Refined Detail */
.deals-grid-premium {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

@media (min-width: 1200px) {
    .deals-grid-premium {
        grid-template-columns: repeat(6, 1fr);
    }
}

.square-card {
    aspect-ratio: 1 / 1;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: none;
    /* Removed as requested */
    position: relative;
}

.square-card:hover,
.square-card:active {
    transform: translateY(-8px);
    border-color: #faa819;
    box-shadow: 0 15px 30px -5px rgba(250, 168, 25, 0.05);
}

@media (max-width: 768px) {

    .square-card:hover,
    .square-card:active {
        transform: translateY(-4px);
        /* Mobilde daha hafif bir yükselme */
    }

    /* Mobilde aktif kartların her zaman vurgulu (turuncu) görünmesi */
    .square-card.active {
        border-color: #faa819;
        box-shadow: 0 5px 15px -3px rgba(250, 168, 25, 0.05);
    }

    .square-card.active .square-arrow {
        color: #faa819;
        transform: scale(1) translate(2px, -2px);
    }

    .square-card.active .square-count {
        background: rgba(250, 168, 25, 0.1);
        color: #faa819;
    }
}

.square-card.sold-out {
    pointer-events: none;
    opacity: 0.6;
    background-color: #f8fafc;
    border-color: #e2e8f0;
}

.square-card.sold-out:hover {
    transform: none;
    box-shadow: none;
    border-color: #e2e8f0;
}

.square-card.sold-out .square-arrow {
    display: none;
}

.square-arrow {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    color: #94a3b8;
    transition: all 0.3s ease;
    transform: scale(0.8);
}

.square-card:hover .square-arrow,
.square-card:active .square-arrow {
    color: #faa819;
    transform: scale(1) translate(2px, -2px);
}

.square-night {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: #faa819;
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.02em;
}

/* Deals Footer Info */
.deals-footer-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
    padding: 1rem;
    background-color: #f8fafc;
    border-radius: 1rem;
    color: #64748b;
    font-size: 0.95rem;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.deals-footer-info svg {
    color: #059ad3;
    flex-shrink: 0;
}

.square-night::after {
    content: 'GECE';
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.2em;
    margin-top: 2px;
}

.square-count {
    margin-top: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    background: #f8fafc;
    padding: 0.35rem 0.85rem;
    border-radius: 2rem;
    transition: all 0.3s ease;
}

.square-card.active:hover .square-count {
    background: rgba(250, 168, 25, 0.1);
    color: #faa819;
}

.square-count b {
    color: #1e293b;
}

/* Sold Out State */
.square-card.sold-out {
    opacity: 0.5;
    background: #f1f5f9;
    cursor: default;
}

.square-card.sold-out .square-night,
.square-card.sold-out .square-night::after {
    color: #94a3b8;
}

.square-card.sold-out:hover {
    transform: none;
    border-color: #e2e8f0;
    box-shadow: none;
}


/* Guest Reviews Section (Premium Redesign) */
.guest-reviews {
    background-color: #fafbfc;
    padding: 3rem 0 0;
    /* Reduced bottom padding to fix the large gap */
    border-top: 1px solid #f1f5f9;
    position: relative;
    z-index: 1;
}

.guest-reviews-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3.5rem;
}

.guest-reviews-header .section-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
}

@media (max-width: 768px) {
    .guest-reviews-header .section-title {
        font-size: 1.5rem;
    }

    .guest-reviews-header {
        margin-bottom: 2rem;
    }
}

.guest-reviews-header .section-subtitle {
    font-size: 1.1rem;
    color: #64748b;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .guest-reviews-header .section-subtitle {
        font-size: 0.95rem;
    }
}

/* Premium Review Grid */
.guest-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .guest-reviews-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 1.5rem;
        margin-left: -1rem;
        margin-right: -1rem;
    }
}

/* Premium Review Card */
.review-card-premium {
    background: #ffffff;
    border-radius: 1.5rem;
    padding: 1.75rem;
    position: relative;
    box-shadow: none;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

@media (max-width: 768px) {
    .review-card-premium {
        padding: 1.25rem;
    }
}

.review-card-premium:hover {
    transform: translateY(-3px);
    /* Reduced lift */
    border-color: #faa819;
    /* Border accent on hover */
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    /* Very subtle hover shadow */
}

/* Quote Icon Background */
/* Quote Icon Background - Removed for minimalism */
.quote-icon {
    display: none;
}

.review-body {
    position: relative;
    z-index: 1;
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .review-body {
        margin-bottom: 1rem;
    }
}

.review-body .stars {
    color: #faa819;
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: 1.25rem;
}

@media (max-width: 768px) {
    .review-body .stars {
        margin-bottom: 0.75rem;
        font-size: 0.875rem;
    }
}

.review-text {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.7;
    color: #334155;
    font-style: normal;
}

@media (max-width: 768px) {
    .review-text {
        font-size: 0.875rem;
        line-height: 1.5;
    }
}

/* Review Footer & Meta */
.review-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid #f8fafc;
    padding-top: 1.5rem;
}

@media (max-width: 768px) {
    .review-footer {
        padding-top: 1rem;
        gap: 0.75rem;
    }
}

.reviewer-avatar {
    width: 3rem;
    height: 3rem;
    background-color: #e2e8f0;
    color: #64748b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .reviewer-avatar {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0.8rem;
    }
}

.reviewer-avatar.orange {
    background-color: #ffedd5;
    color: #9a3412;
}

.reviewer-avatar.green {
    background-color: #dcfce7;
    color: #166534;
}

.reviewer-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.reviewer-name {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .reviewer-name {
        font-size: 0.875rem;
    }
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: #16a34a;
    font-weight: 600;
    background: #f0fdf4;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    width: fit-content;
}

@media (max-width: 768px) {
    .verified-badge {
        font-size: 0.65rem;
        padding: 0.1rem 0.4rem;
    }
}

.review-date {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.15rem;
}

@media (max-width: 768px) {
    .review-date {
        font-size: 0.7rem;
    }
}

/* Section Footer */
.guest-reviews-footer {
    text-align: center;
    margin-bottom: 0;
    /* Removed margin completely */
    position: relative;
    z-index: 10;
    /* Keep button above wave */
}

.btn-view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background-color: #faa819;
    color: #ffffff;
    padding: 0.85rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 2rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(250, 168, 25, 0.3);
}

.btn-view-all:hover {
    background-color: #e89608;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(250, 168, 25, 0.4);
}

@media (max-width: 768px) {
    .btn-view-all {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
        gap: 0.5rem;
    }

    .btn-view-all svg {
        width: 14px;
        height: 14px;
    }
}

/* Corporate Footer (White Theme) */
.corporate-footer {
    background-color: #ffffff;
    color: #475569;
    position: relative;
    font-size: 0.95rem;
    margin-top: 0;
    z-index: 2;
    border-top: 1px solid #e2e8f0;
}

.footer-wave {
    display: none;
}

.corporate-footer .container {
    padding-top: 4rem;
    padding-bottom: 2rem;
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 2rem;
    /* Reduced from 3rem */
    margin-bottom: 2rem;
    /* Reduced from 4rem */
}

/* Footer Headings */
/* Footer Headings */
.footer-heading {
    color: #0f172a;
    /* Dark heading */
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}

.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 30px;
    height: 3px;
    background-color: #fca510;
    border-radius: 2px;
}

/* Brand Column */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Reduced from 1.5rem */
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 800;
}

.footer-logo .text-white {
    color: #0f172a;
    /* Dark text for logo */
}

.footer-logo .text-orange-500 {
    color: #fca510;
}

.brand-tagline {
    color: #94a3b8;
    line-height: 1.6;
    max-width: 300px;
    font-size: 0.9rem;
    /* Slightly smaller text */
}

.social-links {
    display: flex;
    gap: 0.75rem;
    /* Reduced from 1rem */
}

.social-link {
    width: 2.25rem;
    /* Slightly smaller icons */
    height: 2.25rem;
    border-radius: 50%;
    background-color: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.social-link:hover {
    background-color: #fca510;
    color: #ffffff;
    transform: translateY(-3px);
    border-color: #fca510;
}

/* Link Columns */
.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    /* Reduced from 0.85rem */
}

.footer-links a {
    color: #475569;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-block;
    font-size: 0.9rem;
    /* Slightly smaller text */
}

.footer-links a:hover {
    color: #fca510;
    transform: translateX(5px);
}

/* Contact Column */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Reduced from 1.25rem */
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    /* Reduced from 1rem */
    line-height: 1.4;
    font-size: 0.9rem;
}

.contact-item .icon-box {
    width: 1.75rem;
    /* Smaller icons */
    height: 1.75rem;
    background-color: #eff6ff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    flex-shrink: 0;
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid #e2e8f0;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    margin-top: 2rem;
}

.ssl-notice {
    color: #64748b;
    font-size: 0.85rem;
    text-align: left;
}

.copyright {
    color: #64748b;
    font-size: 0.9rem;
}

.payment-badges {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.badge-text {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

.badges-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.trust-badge {
    background-color: #ffffff;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.payment-icons {
    display: flex;
    gap: 0.5rem;
    opacity: 1;
}

/* Responsive Footer */
@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

/* SSL Logo Container */
.ssl-logo-container {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.ssl-logo-container img {
    height: 50px;
    width: auto;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.ssl-logo-container img:hover {
    opacity: 1;
}

@media (max-width: 640px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .payment-badges {
        flex-direction: column;
        gap: 1rem;
    }

    .badges-row {
        justify-content: center;
    }
}

/* TURSAB Logo at Footer Bottom Right */
.footer-tursab-logo {
    position: absolute;
    bottom: calc(1.5rem - 50px);
    right: calc(8% + 100px);
    z-index: 10;
}

.footer-tursab-logo img {
    height: 60px;
    width: auto;
    opacity: 0.9;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.footer-tursab-logo img:hover {
    opacity: 1;
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .footer-tursab-logo {
        position: static;
        text-align: center;
        margin-top: 2rem;
    }

    .footer-tursab-logo img {
        height: 50px;
    }
}

/* Modern Footer Styles */
.modern-footer {
    background-color: #ffffff;
    padding: 4rem 0 2rem;
    color: #334155;
    border-top: 1px solid #f1f5f9;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.modern-footer .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Top Section Layout */
.footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Footer Logo */
.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.footer-logo .logo-icon svg {
    width: 32px;
    height: 32px;
}

.footer-logo .logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.footer-logo .highlight {
    color: #f97316;
}

/* Contact Info */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact-group h5 {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.25rem;
}

.contact-group a,
.contact-group p {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.2s;
}

.contact-group a:hover {
    color: #f97316;
}

/* Footer Links Columns */
.footer-col h4.footer-heading {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1.5rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links li a {
    font-size: 0.9rem;
    color: #475569;
    text-decoration: none;
    transition: all 0.2s;
}

.footer-links li a:hover {
    color: #faa819;
    padding-left: 4px;
}

/* Bottom Trust Section */
.footer-bottom-trust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* QR Code */
.qr-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.qr-box {
    width: 48px;
    height: 48px;
    border: 1px solid #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.qr-code span {
    font-size: 0.7rem;
    font-weight: 700;
    color: #ef4444;
    /* Red color for text as in image */
}

/* SSL Badge */
.ssl-badge .ssl-content {
    display: flex;
    align-items: center;
    background: #16a34a;
    /* Green */
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    gap: 0.5rem;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
}

.ssl-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.ssl-bit {
    font-size: 0.65rem;
    font-weight: 700;
    background: #f97316;
    padding: 1px 3px;
    border-radius: 2px;
    margin-bottom: 2px;
    display: inline-block;
    width: fit-content;
}

.ssl-https {
    font-size: 0.85rem;
    font-weight: 700;
}

.check-circle {
    background: #f97316;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.25rem;
    border: 2px solid white;
}

/* Secure Shopping */
.secure-shopping .secure-badge-box {
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.secure-badge-box .stars {
    color: #ef4444;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

.secure-badge-box span {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.1;
    color: #64748b;
}

/* Payment Logos */
.payment-logos-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pay-logo {
    height: 24px;
    width: auto;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* TURSAB Badge */
.tursab-badge-container {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.5rem;
}

.tursab-img {
    height: 60px;
    /* Reduced from original huge sizing */
    width: auto;
    display: block;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
    }

    .footer-bottom-trust {
        justify-content: center;
        gap: 1.5rem;
    }
}

@media (max-width: 640px) {
    .footer-top {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .footer-col {
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
    }

    .contact-info {
        align-items: center;
    }
}

/* --- New Global Footer Styles (Based on React Footer) --- */

.main-footer {
    background-color: #0f172a;
    color: #ffffff;
    padding: 4rem 0 2rem 0;
    font-family: 'Inter', sans-serif;
}

@media (max-width: 768px) {
    .main-footer {
        padding: 0.5rem 0 2rem 0;
    }
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin-bottom: 4rem;
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* Brand Column */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.brand-logo-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brand-icon-bg {
    background-color: #faa819;
    padding: 0.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-text-content {
    display: flex;
    flex-direction: column;
}

.brand-name-main {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.02em;
}

.brand-name-main .highlight {
    color: #faa819;
}

.brand-sub-tag {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-top: -2px;
}

.brand-description {
    color: #94a3b8;
    font-size: 0.875rem;
    line-height: 1.6;
}

.social-links-row {
    display: flex;
    gap: 0.75rem;
}

.social-link-item {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-link-item:hover {
    background-color: #faa819;
    transform: scale(1.1);
}

/* Link Columns */
.footer-column h4 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dot-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot-orange {
    background-color: #faa819;
}

.dot-blue {
    background-color: #059ad3;
}

.dot-green {
    background-color: #10b981;
}

.footer-link-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-link-list a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-link-list a:hover {
    color: #faa819;
    padding-left: 4px;
}

.footer-link-list .arrow-small {
    width: 12px;
    height: 12px;
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.3s ease;
}

.footer-link-list a:hover .arrow-small {
    opacity: 1;
    transform: translateX(0);
}

/* Contact Details */
.contact-group-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact-card-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact-icon-box {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.contact-card-item:hover .contact-icon-box {
    background-color: rgba(250, 168, 25, 0.1);
}

.contact-text-wrap {
    display: flex;
    flex-direction: column;
}

.contact-label-tag {
    font-size: 10px;
    font-weight: 900;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.contact-value-txt {
    font-size: 0.875rem;
    font-weight: 700;
    color: #e2e8f0;
    margin-top: 2px;
}

/* Trust & Certification Area */




.security-badge-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 0.75rem 1.25rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.3s ease;
}

.security-badge-item:hover {
    border-color: rgba(16, 185, 129, 0.5);
}

.badge-icon-wrap {
    padding: 0.5rem;
    border-radius: 8px;
}

.bg-emerald-soft {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.bg-orange-soft {
    background-color: rgba(250, 168, 25, 0.2);
    color: #faa819;
}

.badge-details-wrap span:first-child {
    display: block;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.badge-details-wrap span:last-child {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #cbd5e1;
}

.payment-systems-block {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-end;
}

@media (max-width: 1024px) {
    .payment-systems-block {
        align-items: center;
    }
}

.payment-label-small {
    font-size: 10px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.payment-icon-strip {
    display: flex;
    gap: 0.75rem;
}



.payment-icon-card img {
    max-height: 1.5rem !important;
    max-width: 100% !important;
    filter: brightness(1) !important;
    transition: transform 0.3s ease !important;
}

.payment-icon-card:hover img {
    transform: scale(1.1) !important;
}

/* Footer Bottom Bar */
.footer-bottom-bar {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .footer-bottom-bar {
        flex-direction: column;
        text-align: center;
    }
}

.copyright-txt {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 500;
}

.copyright-txt b {
    color: #e2e8f0;
}

.bottom-link-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

@media (max-width: 480px) {
    .bottom-link-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    .spacer-dot {
        display: none;
    }
}

.bottom-anchor {
    color: #64748b;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    transition: color 0.3s ease;
}

.bottom-anchor:hover {
    color: #ffffff;
}

.spacer-dot {
    width: 4px;
    height: 4px;
    background-color: #334155;
    border-radius: 50%;
}

.lang-selector-mini {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

/* --- New Global Footer Styles (Based on React Footer) --- */

.main-footer {
    background-color: #0f172a;
    color: #ffffff;
    padding: 4rem 0 2rem 0;
    font-family: 'Inter', sans-serif;
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin-bottom: 4rem;
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* Brand Column */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.brand-logo-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brand-icon-bg {
    background-color: #faa819;
    padding: 0.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-text-content {
    display: flex;
    flex-direction: column;
}

.brand-name-main {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.02em;
}

.brand-name-main .highlight {
    color: #faa819;
}

.brand-sub-tag {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-top: -2px;
}

.brand-description {
    color: #94a3b8;
    font-size: 0.875rem;
    line-height: 1.6;
}

.social-links-row {
    display: flex;
    gap: 0.75rem;
}

.social-link-item {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-link-item:hover {
    background-color: #faa819;
    transform: scale(1.1);
}

/* Link Columns */
.footer-column h4 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dot-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot-orange {
    background-color: #faa819;
}

.dot-blue {
    background-color: #059ad3;
}

.dot-green {
    background-color: #10b981;
}

.footer-link-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-link-list a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-link-list a:hover {
    color: #faa819;
    padding-left: 4px;
}

.footer-link-list .arrow-small {
    width: 12px;
    height: 12px;
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.3s ease;
}

.footer-link-list a:hover .arrow-small {
    opacity: 1;
    transform: translateX(0);
}

/* Contact Details */
.contact-group-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact-card-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact-icon-box {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.contact-card-item:hover .contact-icon-box {
    background-color: rgba(250, 168, 25, 0.1);
}

.contact-text-wrap {
    display: flex;
    flex-direction: column;
}

.contact-label-tag {
    font-size: 10px;
    font-weight: 900;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.contact-value-txt {
    font-size: 0.875rem;
    font-weight: 700;
    color: #e2e8f0;
    margin-top: 2px;
}

/* Trust & Certification Area */




.security-badge-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 0.75rem 1.25rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.3s ease;
}

.security-badge-item:hover {
    border-color: rgba(16, 185, 129, 0.5);
}

.badge-icon-wrap {
    padding: 0.5rem;
    border-radius: 8px;
}

.bg-emerald-soft {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.bg-orange-soft {
    background-color: rgba(250, 168, 25, 0.2);
    color: #faa819;
}

.badge-details-wrap span:first-child {
    display: block;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.badge-details-wrap span:last-child {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #cbd5e1;
}

.payment-systems-block {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-end;
}

@media (max-width: 1024px) {
    .payment-systems-block {
        align-items: center;
    }
}

.payment-label-small {
    font-size: 10px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.payment-icon-strip {
    display: flex;
    gap: 0.75rem;
}



.payment-icon-card img {
    max-height: 1.5rem !important;
    max-width: 100% !important;
    filter: brightness(1) !important;
    transition: transform 0.3s ease !important;
}

.payment-icon-card:hover img {
    transform: scale(1.1) !important;
}

/* Footer Bottom Bar */
.footer-bottom-bar {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .footer-bottom-bar {
        flex-direction: column;
        text-align: center;
    }
}

.copyright-txt {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 500;
}

.copyright-txt b {
    color: #e2e8f0;
}

.bottom-link-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

@media (max-width: 480px) {
    .bottom-link-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    .spacer-dot {
        display: none;
    }
}

.bottom-anchor {
    color: #64748b;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    transition: color 0.3s ease;
}

.bottom-anchor:hover {
    color: #ffffff;
}

.spacer-dot {
    width: 4px;
    height: 4px;
    background-color: #334155;
    border-radius: 50%;
}

.lang-selector-mini {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}



/* --- Refined TURSAB Badge (Matched to SSL Sizes) --- */
.tursab-badge-refined {
    padding: 0.75rem 1.75rem !important;
    /* Adjusted padding for better balance with large logo */
    position: relative !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    background: transparent !important;
    min-height: 85px;
    /* Ensure enough height for the 60px logo + padding */
}

.tursab-badge-refined:hover {
    border-color: #faa819 !important;
    background-color: rgba(250, 168, 25, 0.05) !important;
}

.tursab-badge-refined .badge-details-wrap {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tursab-badge-refined .badge-details-wrap span {
    text-decoration: none !important;
    color: #cbd5e1 !important;
    /* Matching SSL color */
    display: block;
}

.tursab-badge-refined .badge-details-wrap span:first-child {
    color: #faa819 !important;
    font-size: 10px !important;
    /* Matched to SSL header */
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
}

.tursab-badge-refined .badge-details-wrap span:nth-child(2) {
    font-size: 11px !important;
    /* Matched to SSL subtext */
    font-weight: 700 !important;
    color: #cbd5e1 !important;
}

.tursab-badge-refined .verification-text {
    font-size: 9px !important;
    /* Slightly smaller for hierarchy */
    color: #64748b !important;
    margin-top: 4px !important;
}

.tursab-badge-refined .tursab-logo-footer {
    height: 60px !important;
    /* 2 sizes larger than 48px */
    width: auto !important;
    margin-left: 1rem !important;
    border-radius: 6px !important;
    background-color: white !important;
    padding: 5px !important;
    filter: none !important;
    transition: transform 0.3s ease !important;
    border: none !important;
}

.tursab-badge-refined .diagonal-arrow {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    color: #64748b !important;
    opacity: 0.4;
    transition: all 0.3s ease !important;
}

.tursab-badge-refined:hover .diagonal-arrow {
    opacity: 1;
    color: #faa819 !important;
    transform: translate(2px, -2px);
}




/* Unified Payment Badge Styles - Minimized */
.payment-badge-unified {
    padding: 0.6rem 1.25rem !important;
    /* Slightly reduced padding */
    min-height: 85px !important;
    /* Reverted to 85px to match other badges */
    gap: 0.85rem !important;
    /* Reduced gap to minimize width */
    width: fit-content;
    transition: all 0.3s ease !important;
}

.payment-badge-unified:hover {
    border-color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.bg-blue-soft {
    background-color: rgba(5, 154, 211, 0.2);
    color: #059ad3;
}

.payment-label-unified {
    font-size: 10px;
    font-weight: 700;
    /* Slightly reduced from 900 for lowercase look */
    color: #64748b;
    text-transform: none !important;
    /* Remove uppercase */
    letter-spacing: normal !important;
    /* Reset spacing */
    display: block;
    max-width: 100px;
    /* Tighter width for the text block */
    line-height: 1.3;
}

.payment-logos-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* Tighter gap between logos */
    padding-left: 0.6rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.payment-logos-group img {
    height: 18px;
    /* Slightly smaller logos to help minimize width */
    width: auto;
    max-width: 56px;
    min-width: 0;
    object-fit: contain;
    filter: brightness(1);
    transition: transform 0.3s ease;
}

.payment-badge-unified:hover .payment-logos-group img {
    transform: scale(1.1);
}

/* --- Centering & Layout Refinement --- */
.certification-area {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.badge-row-flex {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
    max-width: 1200px !important;
    width: 100% !important;
}

@media (max-width: 1024px) {
    .badge-row-flex {
        gap: 1rem !important;
    }
}


/* Final Height Correction for SSL and Other Security Badges */
.security-badge-item {
    min-height: 85px !important;
}




/* Special hover color for Regions column */
.footer-column:nth-child(3) .footer-link-list a:hover {
    color: #059ad3 !important;
}

/* Simple Nested Dropdown */
.nav-item.dropdown.simple-dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #ffffff;
    min-width: 200px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 0.5rem 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

.nav-item.dropdown.simple-dropdown:hover>a,
.nav-item.dropdown.simple-dropdown:hover>svg {
    color: var(--primary) !important;
}

.nav-item.dropdown.simple-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-item.dropdown.simple-dropdown .dropdown-menu::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #ffffff;
}

.nav-item.dropdown.simple-dropdown .dropdown-menu li {
    position: relative;
    padding: 0 0.5rem;
}

.nav-item.dropdown.simple-dropdown .dropdown-menu li:not(:last-child) {
    border-bottom: 1px solid #f1f5f9;
}

.nav-item.dropdown.simple-dropdown .dropdown-menu a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 0.75rem;
    font-size: 13px;
    color: #333333 !important;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.nav-item.dropdown.simple-dropdown .dropdown-menu a svg {
    width: 14px;
    height: 14px;
    color: #94a3b8;
    transition: transform 0.2s ease, color 0.2s ease;
    transform: rotate(0) !important;
}

.nav-item.dropdown.simple-dropdown .dropdown-menu li:hover>a {
    background: rgba(250, 168, 25, 0.05);
    color: var(--primary) !important;
    border-radius: 0.75rem;
}

.nav-item.dropdown.simple-dropdown .dropdown-menu li:hover>a>svg {
    color: var(--primary) !important;
    transform: translateX(3px) !important;
}

/* Sub-menu */
.nav-item.dropdown.simple-dropdown .dropdown-submenu .sub-menu {
    position: absolute;
    top: -0.5rem;
    left: 100%;
    transform: translateX(10px);
    background: #ffffff;
    min-width: 180px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 0.5rem 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1001;
}

.nav-item.dropdown.simple-dropdown .dropdown-submenu:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* 2. seviye: Kalkan/Kaş/Demre tek sütun, çerçevesiz */
.nav-item.dropdown.simple-dropdown>.dropdown-menu>.dropdown-submenu>.sub-menu {
    background: #ffffff;
    box-shadow: none;
    border: none;
    padding: 0;
    min-width: 220px;
}

/* 3. seviye: Patara/Sarıbelen... 3 sütun, kart görünüm */
.nav-item.dropdown.simple-dropdown>.dropdown-menu>.dropdown-submenu>.sub-menu>.dropdown-submenu>.sub-menu {
    min-width: 420px;
    padding: 1.25rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.nav-item.dropdown.simple-dropdown>.dropdown-menu>.dropdown-submenu>.sub-menu>.dropdown-submenu:hover>.sub-menu {
    display: grid;
}

/* Kiralama Bölgeleri Section */
.rental-regions-section {
    padding: 3rem 0;
    margin-top: 1rem;
}

.rental-regions-section .regions-header {
    margin-bottom: 2rem;
    text-align: center;
}

.rental-regions-section .main-title.text-center {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark, #1e293b);
}

.regions-cards-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.region-card-premium {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: 16px;
    background: transparent;
    transition: transform 0.3s ease;
}

.region-card-premium:hover {
    transform: translateY(-5px);
}

.region-image-box {
    width: 100%;
    aspect-ratio: 1 / 1.1;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    margin-bottom: 0.75rem;
}

.region-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.region-card-premium:hover .region-image-box img {
    transform: scale(1.05);
}

.region-name-tag {
    font-size: 1.15rem;
    color: #475569;
    font-weight: 500;
    text-align: left;
    margin-left: 0.25rem;
    line-height: 1.3;
}

@media (max-width: 1024px) {
    .regions-cards-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

@media (max-width: 640px) {
    .regions-cards-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .region-name-tag {
        font-size: 0.9rem; /* Slightly smaller text for 2-col mobile view */
        margin-left: 0.15rem;
    }
}

/* Blog Gallery Section */
.blog-gallery-section {
    padding: 3rem 0;
    margin-top: 2rem;
}

.bento-blog-gallery {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 190px;
    gap: 1.25rem;
}

.blog-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    background: #000;
    grid-column: span 4; /* İleride eklenecek standart yazılar 3'lü yan yana dizilir */
    grid-row: span 1;
}

.item-large {
    grid-column: span 6;
    grid-row: span 2;
}

.item-wide {
    grid-column: span 6;
    grid-row: span 1;
}

.item-small {
    grid-column: span 3;
    grid-row: span 1;
}

.blog-img-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.blog-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.8;
}

.blog-item:hover img {
    transform: scale(1.08);
    opacity: 0.95;
}

.blog-overlay {
    position: relative;
    z-index: 2;
    padding: 1.5rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    min-height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    color: white;
}

.blog-tag {
    align-self: flex-start;
    background: var(--primary);
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    margin-bottom: 0.6rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.blog-tag.bg-red {
    background: #ef4444; /* red-500 */
}

.blog-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.4rem;
    color: white;
}

.item-large .blog-title {
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
}

.item-small .blog-title {
    font-size: 1rem;
}

.blog-read-more {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.blog-item:hover .blog-read-more {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1024px) {
    .bento-blog-gallery {
        grid-auto-rows: 230px;
        gap: 1.25rem;
    }
    
    .blog-item { 
        grid-column: span 6; /* Standart yeni yazılar tablette 2'li yan yana olur */
    }
    
    .item-large { 
        grid-column: span 12; 
        grid-row: span 2; 
    }
    
    .item-wide { 
        grid-column: span 12; 
        grid-row: span 1; 
    }
    
    .item-small { 
        grid-column: span 6; 
        grid-row: span 1; 
    }
    
    .item-large .blog-title {
        font-size: 1.4rem;
    }
}

@media (max-width: 768px) {
    .bento-blog-gallery {
        grid-auto-rows: 250px;
    }
    
    .blog-item, .item-large, .item-wide, .item-small {
        grid-column: span 12; /* Mobilde tüm yazılar alt alta dizilir */
        grid-row: span 1;
    }
}

/* Blog Slider Specifics */
.blog-slider-container {
    padding: 0;
}
.blog-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
    display: flex;
    overflow: hidden; /* Fixes hover bleed from sibling slides */
}
.blog-slide .blog-img-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.blog-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.8;
}
.blog-slide:hover img {
    transform: scale(1.08);
    opacity: 0.95;
}
.blog-slider-controls {
    position: absolute;
    bottom: 1.2rem;
    right: 1.2rem;
    z-index: 10;
    display: flex;
    gap: 0.4rem;
}
.blog-slider-controls button {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.4);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}
.blog-slider-controls button:hover {
    background: var(--primary);
    border-color: var(--primary);
}

/* Mobile Unified Blog Slider Adjustments */
.mobile-blog-slider-wrapper {
    display: none;
}

@media (max-width: 768px) {
    .desktop-blog-gallery {
        display: none !important; /* Masaüstü bento görünümünü mobilde tamamen gizle */
    }
    
    .mobile-blog-slider-wrapper {
        display: block;
        margin-top: 1rem;
        margin-left: -1rem;
        margin-right: -1rem;
    }
    
    .mobile-slider-container {
        aspect-ratio: 4 / 4.5;
        max-height: 480px;
        width: 100%;
        border-radius: 1.5rem;
        overflow: hidden;
        background: #000;
        position: relative;
    }
    
    /* Antalya ve Muğla ok oklarını sağa kaydırmak için */
    .mobile-nav-list > li > .mobile-sub > li > .mobile-nav-item > .submenu-toggle {
        transform: translateX(-30px);
    }
    
    /* Daha alt seviye (Kalkan, Kaş vb.) oklarını hareket ettirmek için */
    .mobile-nav-list > li > .mobile-sub > li > .mobile-sub > li > .mobile-nav-item > .submenu-toggle {
        transform: translateX(-60px);
    }
}
/* Added from villa-list.css */
/* Reset & Base */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --primary-color: #faa819;
  --secondary-color: #059ad3;
  --text-dark: #1a2b3c;
  --text-slate-800: #1e293b;
  --text-slate-700: #334155;
  --text-slate-600: #475569;
  --text-slate-500: #64748b;
  --text-slate-400: #94a3b8;
  --text-slate-300: #cbd5e1;
  --border-color: #e2e8f0;
  --bg-color: #fafbfc;
  --white: #ffffff;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-slate-700);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

input {
  font-family: inherit;
}

/* Layout */
.container {
  width: 100%;
  margin: 0 auto;
}

.main-content {
  padding-top: 100px;
  padding-bottom: 5rem;
  padding-left: 1rem;
  /* px-4 reduced from px-6 */
  padding-right: 1rem;
  /* px-4 reduced from px-6 */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* gap-4 reduced from gap-6 */
  align-items: flex-start;
  /* Required for sticky sidebars to have room to move */
  max-width: 100%;
}

@media (min-width: 1024px) {
  .main-content {
    flex-direction: row;
    justify-content: center;
    gap: 0rem;
    /* Reduced gap */
  }
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  z-index: 100;
  border-bottom: 1px solid var(--border-color);
  padding: 0.875rem 1.5rem;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo-icon {
  background-color: var(--primary-color, #faa819);
  color: white !important;
  padding: 0.375rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(250, 168, 25, 0.2);
}
.logo-icon svg, .logo-icon .umbrella-icon {
  color: white !important;
  stroke: white !important;
}

.logo-text {
  color: var(--primary-color);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.05em;
}

.nav-links {
  display: none;
}

@media (min-width: 1024px) {
  .nav-links {
    display: flex;
    gap: 2rem;
  }
}

.nav-item {
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  transition: color 0.2s;
}

.nav-item:hover {
  color: var(--primary-color);
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border-color);
  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.user-menu:hover {
  background-color: #f8fafc;
}

.user-avatar {
  width: 1.75rem;
  height: 1.75rem;
  background-color: #f8fafc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-slate-400);
}

/* Sidebar */
.sidebar {
  display: none;
  width: 320px;
  flex-shrink: 0;
  position: sticky;
  top: 145px;
  z-index: 40;
  max-height: calc(100vh - 165px);
  overflow-y: auto;
  padding-right: 4px;
  /* Space for scrollbar */
}

.sidebar::-webkit-scrollbar,
.right-sidebar::-webkit-scrollbar {
  width: 4px;
}

.sidebar::-webkit-scrollbar-thumb,
.right-sidebar::-webkit-scrollbar-thumb {
  background: var(--text-slate-200);
  border-radius: 10px;
}

.sidebar::-webkit-scrollbar-track,
.right-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

/* Right Sidebar */
.right-sidebar {
  display: none;
  width: 320px;
  flex-shrink: 0;
  position: sticky;
  top: 145px;
  z-index: 40;
  height: auto;
  max-height: calc(100vh - 165px);
  overflow-y: auto;
  padding-right: 4px;
  /* Space for scrollbar */
}

/* Mobile Sidebar Styles */
@media (max-width: 1023px) {
  .sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    max-height: 100% !important;
    width: 90%;
    max-width: 340px;
    background-color: white;
    border-radius: 0 px;
    z-index: 1001;
    overflow-y: auto;
    padding: 1.5rem;
    padding-bottom: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateX(-100%);
  }

  .sidebar.active {
    display: block;
    transform: translateX(0);
  }

  .sidebar-card {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
}

@media (min-width: 1024px) {
  .sidebar {
    display: block;
    transform: none;
    position: sticky;
  top: 145px;
    height: fit-content;
    /* Ensure the sidebar is only as tall as its content */
    z-index: 40;
  }

  .right-sidebar {
    display: block;
  }
}

.sidebar-card {
  background-color: white;
  border: 1px solid var(--border-color);
  border-radius: 1.8rem;
  /* rounded-[1.8rem] */
  padding: 1.5rem;
  /* p-6 */
  box-shadow: var(--shadow-sm);
  position: relative;
  border-radius: 1.8rem;
  /* rounded-[1.8rem] */
  padding: 1.5rem;
  /* p-6 */
  box-shadow: var(--shadow-sm);
  position: relative;
}

/* Mobile Sidebar Overlay */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 23, 42, 0.4);
  /* slate-900/40 */
  -webkit-backdrop-filter: blur(8px);
  /* Safari support */
  backdrop-filter: blur(8px);
  /* Increased blur */
  z-index: 1000;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* Close Button */
.sidebar-close-btn {
  display: none;
  position: absolute;
  top: 1rem;
  /* top-4 */
  right: 1rem;
  /* right-4 */
  width: 2.5rem;
  /* ~10 (40px) sized for ease */
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  color: var(--text-slate-400);
  transition: background-color 0.2s;
  z-index: 50;
}

.sidebar-close-btn:hover {
  background-color: #f8fafc;
  /* hover:bg-slate-50 */
}

@media (max-width: 1023px) {
  .sidebar-close-btn {
    display: flex;
  }
}

.sidebar-section-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  /* gap-2.5 */
  padding-bottom: 0.25rem;
  /* pb-1 */
  margin-bottom: 0.5rem;
  /* Significantly reduced from 1.75rem */
}

.sidebar-bar {
  width: 0.375rem;
  /* w-1.5 */
  height: 1.5rem;
  /* h-6 */
  background-color: var(--primary-color);
  border-radius: 9999px;
}

.sidebar-heading {
  font-size: 0.8125rem;
  /* text-[13px] */
  font-weight: 700;
  /* font-bold */
  color: var(--text-slate-800);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* tracking-[0.1em] */
}

.filter-group {
  margin-bottom: 1rem;
  /* space-y-4 */
}

.filter-label {
  font-size: 0.625rem;
  /* text-[10px] */
  font-weight: 700;
  color: var(--text-slate-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* tracking-widest */
  padding-left: 0.25rem;
  /* pl-1 */
  margin-bottom: 0.5rem;
  display: block;
}

/* Date Inputs */
.date-input-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
  /* gap-2.5 */
}

@media (min-width: 1024px) {
  .date-input-group {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .input-styled-date {
    padding: 0.6rem 0.5rem 0.6rem 2.25rem !important;
    font-size: 0.75rem !important;
  }

  .date-icon {
    left: 0.75rem !important;
    width: 14px !important;
    height: 14px !important;
  }
}

.date-input {
  position: relative;
  width: 100%;
}

.date-icon {
  position: absolute;
  left: 0.875rem;
  /* left-3.5 */
  top: 50%;
  transform: translateY(-50%);
  color: #faa819;
  /* primary color direct */
  z-index: 10;
  width: 16px;
  height: 16px;
}

.input-styled-date {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  /* pl-10 pr-4 py-3 */
  background-color: #f8fafc;
  /* bg-slate-50 */
  border: 1px solid var(--border-color);
  /* border-slate-200 */
  border-radius: 0.75rem;
  /* rounded-xl */
  font-size: 0.8125rem;
  /* text-[13px] */
  font-weight: 600;
  /* font-semibold */
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s;
}

.input-styled-date:hover {
  background-color: white;
  border-color: rgba(250, 168, 25, 0.2);
}

/* Listeleme tarih seçici: HTML şablonu görünümü (etiket) + çalışan native input (üstte şeffaf) */
.date-input .vl-date-disp {
  display: block;
  color: var(--text-slate-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.date-input .date-icon { pointer-events: none; }
.date-input .vl-date-disp:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
}
.date-input .vl-date-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}
.date-input .vl-date-native::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.counter-box {
  padding: 0.875rem;
  /* p-3.5 */
  background-color: #f8fafc;
  /* bg-slate-50 */
  border: 1px solid var(--border-color);
  /* border-slate-200 */
  border-radius: 0.75rem;
  /* rounded-xl */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* space-y-4 */
}

@media (min-width: 1024px) {
  .counter-box {
    padding: 0.5rem !important;
    gap: 0.75rem !important;
  }
}

.counter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.counter-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  /* gap-2.5 */
}

.counter-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* gap-3 */
}

.btn-counter {
  width: 1.75rem;
  /* w-7 */
  height: 1.75rem;
  /* h-7 */
  background-color: white;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  /* rounded-lg */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-slate-400);
  transition: all 0.2s;
}

@media (min-width: 1024px) {
  .btn-counter {
    width: 1.45rem !important;
    height: 1.45rem !important;
  }

  .counter-controls {
    gap: 0.5rem !important;
  }

  .counter-controls span {
    font-size: 12px !important;
  }
}

.btn-counter:hover {
  border-color: rgba(250, 168, 25, 0.3);
  color: var(--primary-color);
}

.seperator {
  height: 1px;
  background-color: #f1f5f9;
  /* bg-slate-100 */
  margin: 0;
}

/* Filter Sections */
.filter-section {
  margin-bottom: 0.75rem;
}

.sidebar-heading-sm {
  font-size: 0.875rem;
  /* text-[14px] */
  font-weight: 700;
  /* font-bold */
  color: var(--text-slate-800);
  letter-spacing: 0.025em;
  /* tracking-wide */
  margin: 0;
}

.scrollable-list {
  padding-left: 0.25rem;
  /* pl-1 */
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  /* gap-0.5 */
}

/* Custom Scrollbar */
.scrollable-list::-webkit-scrollbar {
  width: 4px;
}

.scrollable-list::-webkit-scrollbar-track {
  background: transparent;
}

.scrollable-list::-webkit-scrollbar-thumb {
  background-color: var(--text-slate-300);
  border-radius: 4px;
}

.nested-list {
  margin-left: 0.75rem;
  border-left: 1px solid var(--border-color);
  padding-left: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/* Tree View Logic */
.tree-view {
  padding-left: 0.125rem;
}

.tree-item {
  margin-bottom: 0.125rem;
}

.tree-header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0;
}

.tree-chevron {
  width: 18px;
  height: 18px;
  cursor: pointer;
  color: var(--text-slate-400);
  transition: transform 0.2s ease, background-color 0.2s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.tree-chevron:hover {
  background-color: #f1f5f9;
  color: var(--primary-color);
}

.tree-children {
  display: none;
  margin-left: 0.65rem;
  margin-top: 0.125rem;
  margin-bottom: 0.25rem;
  padding-left: 0.75rem;
  border-left: 1.5px solid #f1f5f9;
  flex-direction: column;
  gap: 0.125rem;
}

.tree-item.expanded>.tree-children {
  display: flex;
}

.ml-auto {
  margin-left: auto;
}

.cursor-pointer {
  cursor: pointer;
}

.section-toggle-icon {
  transition: transform 0.3s ease;
  color: var(--text-slate-400);
}

.filter-section.closed .scrollable-list {
  display: none !important;
}

.filter-section.closed .section-toggle-icon {
  transform: rotate(-90deg);
}

.tree-view .filter-checkbox {
  padding: 0.25rem 0;
  flex: 1;
}

/* Filter Checkbox Component */
.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.125rem 0;
  /* Reduced from 0.375rem for a tighter list */
  cursor: pointer;
  /* for reference, css doesn't use this but it's conceptual */
  transition: all 0.2s;
}

.checkbox-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.checklist-input {
  display: none;
  /* We use a visual separate div */
}

/* Hide default checkbox but keep it for logic if using JS, here we rely on visual structure matching */
/* Hide default checkbox but keep it for logic if using JS, here we rely on visual structure matching 
*/
.filter-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 10;
}

.checkbox-visual {
  width: 17px;
  height: 17px;
  border: 1px solid var(--text-slate-300);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  transition: all 0.2s;
}

/* Input Checked State Logic */
.filter-checkbox input:checked+.checkbox-visual {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.filter-checkbox:hover .checkbox-visual {
  border-color: rgba(5, 154, 211, 0.6);
}

.checkbox-visual .check-icon {
  width: 12px !important;
  height: 12px !important;
  stroke-width: 4 !important;
  color: white;
  opacity: 0;
  transition: opacity 0.1s;
}

.filter-checkbox input:checked+.checkbox-visual .check-icon {
  opacity: 1;
}

.checkbox-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-slate-500);
  transition: color 0.2s;
  letter-spacing: -0.01em;
}

.filter-checkbox:hover .checkbox-label {
  color: var(--text-slate-800);
}


.checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0;
  cursor: pointer;
}

.checkbox-custom {
  width: 17px;
  height: 17px;
  border: 1px solid var(--text-slate-300);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.checkbox-input {
  display: none;
}

.checkbox-input:checked+.checkbox-custom {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.checkbox-text {
  font-size: 0.78rem;
  font-weight: 500;
}

.arrow-icon {
  position: absolute;
  right: 0;
  top: 20%;
  transform: translateY(-20%);
  color: var(--text-slate-300);
  transition: color 0.3s;
}

.checkbox-item:hover .checkbox-text {
  color: var(--text-slate-800);
}

.btn-primary {
  width: 100%;
  background-color: #1a2b3c;
  color: white;
  height: 48px;
  border-radius: 0.75rem;
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  transition: all 0.2s;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
  transform: translateY(-2px);
  background-color: #0f172a;
}

.btn-secondary {
  width: 100%;
  background-color: white;
  border: 1px solid var(--border-color);
  color: var(--text-slate-500);
  height: 48px;
  border-radius: 0.75rem;
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  transition: all 0.2s;
  margin-top: 0.75rem;
}

.btn-secondary:hover {
  background-color: #f8fafc;
}


/* Main Listing Area */
.listing-area {
  flex: 1;
  min-width: 0;
  max-width: 1100px;
  width: 100%;
}

.results-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
  .results-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.page-title {
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--text-dark);
  letter-spacing: -0.025em;
  line-height: 1;
}

@media (min-width: 1024px) {
  .page-title {
    font-size: 1.375rem;
  }
}

.page-title span {
  color: var(--primary-color);
}

.results-count {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-slate-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dot {
  width: 6px;
  height: 6px;
  background-color: var(--primary-color);
  border-radius: 50%;
}

/* ===== Listeleme Toolbar: Action Buttons + Sort Dropdown (villa-list.html'den taşındı) ===== */
.action-buttons-container {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  align-items: center;
}

@media (min-width: 1024px) {
  .action-buttons-container {
    width: auto;
  }
}

.mobile-filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  flex: 0 0 auto;
  min-width: 0;
  background: white;
  border: 1px solid #cbd5e1;
  height: 32px;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-slate-600);
  transition: all 0.2s;
  cursor: pointer;
  white-space: nowrap;
}

.mobile-filter-btn:active {
  background-color: #f8fafc;
  transform: scale(0.98);
}

@media (min-width: 1024px) {
  .mobile-filter-btn {
    display: none;
  }
}

.sort-dropdown {
  cursor: pointer;
  position: relative;
  z-index: 40;
  display: flex;
  flex: 1;
  min-width: 0;
}

@media (min-width: 1024px) {
  .sort-dropdown {
    flex: 0 0 auto;
  }
}

.sort-trigger {
  position: relative;
  background-color: white;
  border: 1px solid #cbd5e1;
  padding: 0 0.5rem;
  height: 32px;
  border-radius: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-slate-600);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  transition: all 0.2s;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .sort-trigger {
    min-width: 200px;
    width: auto;
    padding: 0.4500rem 1.25rem;
    height: auto;
    justify-content: space-between;
    gap: 1rem;
    border-radius: 1.15rem;
  }
}

.sort-trigger:hover {
  border-color: #059ad399;
}

.sort-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-slate-500);
  display: none;
}

@media (min-width: 1024px) {
  .sort-label {
    display: block;
  }
}

.sort-current {
  color: var(--text-slate-500);
  font-weight: 700;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}

@media (min-width: 1024px) {
  .sort-current {
    max-width: none;
  }
}

.chevron-icon {
  color: var(--text-slate-300);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.sort-dropdown.open .chevron-icon {
  transform: rotate(180deg);
}

.sort-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  width: max-content;
  min-width: 0;
  background-color: white;
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  z-index: 60;
  overflow: hidden;
  flex-direction: column;
  padding: 0.5rem 0;
}

.sort-dropdown.open .sort-options {
  display: flex;
}

.sort-option {
  width: 100%;
  text-align: left;
  padding: 0.75rem 1.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  background: white;
  color: #94a3b8;
  transition: all 0.2s;
}

.sort-option:hover {
  background-color: white;
  color: var(--secondary-color);
  box-shadow: none;
}

.sort-option.active {
  background-color: white;
  font-weight: 800;
}

/* Villa Card */
.villa-card {
  background-color: white;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
  transition: all 0.3s;
}

@media (min-width: 768px) {
  .villa-card {
    flex-direction: row;
    border-radius: 1rem;
  }
}

.villa-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border-color: var(--secondary-color);
}

.card-image-wrapper {
  position: relative;
  width: 100%;
  height: 13rem;
  /* h-52 */
  flex-shrink: 0;
  background-color: #f3f4f6;
  overflow: hidden;
}

@media (min-width: 768px) {
  .card-image-wrapper {
    width: 42%;
    height: auto;
    min-height: 14rem;
  }
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

.villa-card:hover .card-img {
  transform: scale(1.05);
}

.badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-items: flex-start;
}

.badge {
  font-size: 0.625rem;
  /* Increased from 0.5rem (10px) */
  font-weight: 600;
  color: white;
  padding: 0.25rem 0.75rem;
  /* Increased from 0.125rem 0.5rem */
  border-radius: 0.375rem;
  /* Slightly more rounded */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-blue {
  background-color: var(--secondary-color);
}

.badge-orange {
  background-color: var(--primary-color);
}

.like-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 1.75rem;
  height: 1.75rem;
  background-color: white;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-300);
  transition: all 0.2s;
}

.like-btn.active {
  color: var(--primary-color) !important;
  fill: var(--primary-color) !important;
}
.like-btn.active svg {
  fill: var(--primary-color) !important;
}

.like-btn:hover {
  background-color: white;
  color: var(--primary-color);
}

.rating-badge {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  background-color: white;
  backdrop-filter: blur(4px);
  padding: 0.125rem 0.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-slate-800);
}

.villa-card .rating-badge {
  padding-top: calc(-0.75rem - 1px) !important;
  padding-bottom: calc(-0.75rem - 1px) !important;
}

.card-content {
  padding: 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Changed from space-between to tighten gap */
  gap: 0.25rem;
  /* Consistent internal spacing */
}

@media (min-width: 768px) {
  .card-content {
    padding: 1.25rem;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.card-header > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.location-text {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-slate-400);
  font-size: 0.600rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.villa-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-color);
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0;
  /* Removed bottom margin so space-between handles spacing naturally */
}

@media (min-width: 768px) {
  .villa-title {
    font-size: 1.2rem;
  }
}

.price-box {
  text-align: right;
  flex-shrink: 0;
  align-items: flex-end;
}

.price {
  color: var(--primary-color);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 3px;
}

@media (min-width: 768px) {
  .price {
    font-size: 1.2rem;
  }
}

.price-label {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-slate-300);
  letter-spacing: 0.1em;
  margin-top: 0;
  margin-bottom: 1px;
}

.features-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 25px 0 0 0;
  padding: 0;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--text-slate-500);
}

.feature-text {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-slate-700);
}

.divider-vertical {
  width: 1px;
  height: 12px;
  background-color: var(--border-color);
}

/* Sadece ikonları ve dikey çizgileri metne (rakamlara) göre 5px daha aşağı kaydırmak için */
.feature-item i,
.feature-item svg,
.divider-vertical,
.features-bar .sep {
  transform: translateY(2px);
}

.amenities-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0;
  margin-top:-1.5rem;
}

.amenity-tag {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.amenity-text {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-slate-500);
}

.payment-options-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: nowrap;
  margin-bottom: 0.75rem;
  margin-top: 10px;
}

.payment-options-row .payment-info {
  flex: 1;
  margin-top: 0;
  margin-bottom: 0;
}

.payment-info {
  background-color: rgba(5, 154, 211, 0.05);
  border: 1px solid rgba(5, 154, 211, 0.2);
  border-radius: 8px;
  padding: 0.4375rem 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  margin-top:10px;
}
.payment-info svg, .payment-info i {
  width: 12px !important;
  height: 12px !important;
}

.payment-text {
  font-size: 11px;
  color: var(--secondary-color);
  line-height: 1.2;
  white-space: nowrap;
}

.card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: -10px;
  transform: translateY(11px);
}

.btn-view {
  flex: 1;
  background-color: var(--secondary-color);
  color: white;
  height: 36px;
  /* Compact elegant height */
  border-radius: 0.5rem;
  font-size: 0.6600rem;
  /* 11px */
  font-weight: 600;
  /* Semi-bold */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* Slightly more spacing */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s;
  box-shadow: none;
  /* Flat design */
}

.btn-view:hover {
  background-color: #0487b9;
}

.btn-calendar {
  flex: 1;
  border: 1px solid #e2e8f0;
  /* Very subtle border */
  background-color: white;
  border-color: #059ad3;
  color: #059ad3;
  /* Softer text */
  height: 36px;
  /* Compact elegant height */
  border-radius: 0.5rem;
  font-size: 0.6600rem;
  /* 11px */
  font-weight: 600;
  /* Semi-bold */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s;
}

.btn-calendar:hover {
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

/* Right Sidebar */
.right-sidebar {
  width: 320px;
  flex-shrink: 0;
  position: sticky;
  top: 145px;
}

@media (max-width: 1023px) {
  .right-sidebar {
    display: block;
    position: relative;
    top: auto;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
}

@media (min-width: 1024px) {
  .right-sidebar {
    display: block;
  }
}

.info-box {
  padding: 0.875rem;
  background-color: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  margin-bottom: 1rem;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.icon-box {
  width: 3.25rem;
  height: 3.25rem;
  background-color: white;
  border: 1px solid #f1f5f9;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-slate-400);
}

.info-text-group {
  display: flex;
  flex-direction: column;
}

.info-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-slate-800);
  line-height: 1.25;
}

.info-subtitle {
  font-size: 11px;
  color: var(--text-slate-400);
  margin-top: 0.25rem;
  font-weight: 500;
}

.review-card {
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.review-card .arrow-icon {
  position: absolute;
  right: 0.5rem;
  bottom: -4rem;
  top: auto;
  transform: none;
}

.review-card:hover {
  border-color: rgba(250, 168, 25, 0.3);
}

.review-quote {
  font-size: 11px;
  color: var(--text-slate-500);
  font-weight: 500;
  line-height: 1.6;
  font-style: italic;
  border-left: 2px solid rgba(250, 168, 25, 0.3);
  padding-left: 0.75rem;
  margin-top: 0.75rem;
}

/* Mobile Footer */
.mobile-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.875rem 1.5rem;
  z-index: 100;
}

@media (min-width: 1024px) {
  .mobile-footer {
    display: none;
  }
}

.mf-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-slate-300);
}

.mf-item.active {
  color: var(--primary-color);
}

.mf-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Icons (Lucide placeholders handled via SVG/CDN) */
svg {
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pagination Styles */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 5rem !important;
  /* Increased significantly to ensure visibility */
  margin-bottom: 2rem;
}

.page-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: white;
  color: var(--text-slate-600);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.page-btn:hover:not(:disabled) {
  border-color: var(--secondary-color);
  color: var(--secondary-color);
  background-color: rgba(5, 154, 211, 0.04);
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.page-btn.active {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: white;
  box-shadow: 0 4px 12px rgba(5, 154, 211, 0.3);
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: #f8fafc;
}

.page-dots {
  color: var(--text-slate-400);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0 0.25rem;
}

@media (max-width: 640px) {
  .page-btn {
    width: 36px;
    height: 36px;
  }
}


.hover-blue:hover .icon-box {
  border-color: var(--secondary-color) !important;
}

.hover-blue:hover .arrow-icon {
  color: var(--secondary-color) !important;
}

/* Custom Hover Trigger for Info Boxes */
.hover-orange:hover .icon-box {
  border-color: var(--primary-color) !important;
}

.hover-orange:hover .arrow-icon {
  color: var(--primary-color) !important;
}
/* Promosyon kartlarini yukari al */
.promotion-cards-grid { transform: translateY(-10px); margin-top: 0 !important; position: relative; z-index: 10; }


.promotion-cards-grid { bottom: 100px; position: relative; z-index: 40; transform: none; margin-top: 0 !important; }


/* Villa List Main Spacing */
.villa-list-main { margin-top: 105px; }
@media (max-width: 1024px) { .villa-list-main { margin-top: 30px; } }



/* ============================================ */

/* VILLA DETAY PAGE MERGED STYLES */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


/* ============================================
   Villa Detay – React kaynaklı tasarım
   HTML + Bootstrap + özel CSS
   Renkler: --brand-blue, --brand-orange (index.html)
   ============================================ */


html.villa-detay-page {
  scroll-behavior: smooth;
}
body.villa-detay-page {
  --brand-blue: #059ad3;
  --brand-orange: #faa819;
  --bg-page: #fcfdfe;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
}
.villa-detay-page * {
  box-sizing: border-box;
}
.villa-detay-page img {
  max-width: 100%;
  height: auto;
}

/* Footer ödeme logoları: genel img reset'i (height:auto + max-width:100%) Visa vb. SVG'leri devasa gösterir */
.villa-detay-page .main-footer .payment-logos-group img {
  height: 18px !important;
  width: auto !important;
  max-width: 56px !important;
  min-width: 0;
  object-fit: contain;
  flex-shrink: 0;
}

.villa-detay-page .main-footer .tursab-badge-refined .tursab-logo-footer {
  height: 60px !important;
  width: auto !important;
  max-width: 140px !important;
}

body.villa-detay-page {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-page);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--slate-800);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Sabit üst barlar (top-bar + navbar) içerik üstüne binmesin */
  padding-top: 150px;
  /* Mobil taşmaları önle */
}

@media (max-width: 1024px) {
  body.villa-detay-page {
    padding-top: 130px;
  }
}

/* (Header dropdown z-index override kullanılmıyor) */

/* ----- Header: ince ve zarif ----- */
.villa-header {
  background: #fff;
  border-bottom: 1px solid var(--slate-300);
  padding: 0.5rem 1.25rem;
}

.villa-header .header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate-400);
}

.villa-header .header-contact,
.villa-header .header-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.villa-header a,
.villa-header .nav-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.villa-header a:hover,
.villa-header .nav-link:hover {
  color: var(--brand-blue);
}

.villa-header .btn-rezervasyon {
  background: var(--brand-orange);
  color: #fff !important;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.villa-header .btn-rezervasyon:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(250, 168, 25, 0.3);
}

@media (max-width: 767.98px) {
  .villa-header {
    display: none;
  }
}

/* ----- Main container: dar, kenar boÅŸluklu ----- */
/* Alt boşluk index.html main.main-content (padding-bottom: 5rem) ile aynı — footer hizası */
.villa-main {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0.85rem 1.25rem 5rem;
  position: relative;
  /* Masaüstü sidebar-area için */
}

@media (min-width: 768px) {
  .villa-main {
    padding: 1.5rem 2rem 5rem;
  }
}

@media (min-width: 1200px) {
  .villa-main {
    padding: 1.5rem 2.5rem 5rem;
  }
}

/* MOBİL AKIŞ GÜVENCESİ */
@media (max-width: 1023.98px) {
  .villa-main {
    display: block !important;
  }

  .sidebar-area {
    display: none !important;
  }
}

.full-breadcrumb {
  background-color: #f8fafc;
  padding: 0.75rem 1.25rem;
  border-radius: 6px;
  margin-bottom: 1.25rem;
  overflow-x: auto;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px #f1f5f9;
}

.full-breadcrumb::-webkit-scrollbar {
  height: 4px;
}
.full-breadcrumb::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}

.full-breadcrumb .breadcrumb {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  font-weight: 500;
  flex-wrap: nowrap;
}

.full-breadcrumb .breadcrumb-item {
  display: flex;
  align-items: center;
  color: #64748b;
}

.full-breadcrumb .breadcrumb-item a {
  color: #94a3b8; /* Soft blue color matching the image */
  text-decoration: none;
  transition: color 0.2s;
}

.full-breadcrumb .breadcrumb-item a:hover {
  text-decoration: underline;
  color: #3b82f6;
  font-weight:500px;
}

.full-breadcrumb .breadcrumb-item i {
  font-size: 0.6rem;
  margin: 0 0.6rem;
  color: #0f172a; /* Dark bold chevron */
  font-weight: 900;
}

.full-breadcrumb .breadcrumb-item.current {
  color: var(--brand-orange, #faa819);
  font-weight: 700;
  text-transform: uppercase;
}

/* Remove Bootstrap's default '/' divider */
.full-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  display: none;
  content: none;
}

.gallery-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  height: 420px;
  border-radius: 24px;
  overflow: hidden;
  
  margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .gallery-section {
    grid-template-columns: 1.55fr 1fr;
  }
}

@media (max-width: 1024px) {
  .gallery-section {
    height: 360px;
  }
}

@media (max-width: 767.98px) {
  .gallery-section {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
    gap: 6px;
    border-radius: 20px;
    margin-bottom: 1.25rem;
  }

  .gallery-section .gallery-main {
    aspect-ratio: 16/10;
  }

  .gallery-section .gallery-side-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 16/6;
  }
}
.gallery-section .gallery-main {
  position: relative;
  overflow: hidden;
  grid-row: 1 / -1;
}


.gallery-section .gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

.gallery-section .gallery-main:hover img {
  transform: scale(1.05);
}

.gallery-side-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gallery-section .gallery-side {
  position: relative;
  overflow: hidden;
  flex: 1;
}

.gallery-section .gallery-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

.gallery-section .gallery-side:hover img {
  transform: scale(1.1);
}

.gallery-view-all {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

@media (min-width: 768px) {
  .gallery-view-all {
    font-size: 11px;
  }
}

/* ----- Detail card: yumuşak gölge, zarif köşe ----- */
.detail-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--slate-300);
  box-shadow: 0 4px 20px -8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
  /* Alttaki içeriklerden ayırdık */
}

@media (min-width: 768px) {
  .detail-card {
    border-radius: 20px;
    box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.07);
    flex-direction: row;
    align-items: flex-start;
  }
}

.detail-section {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem;
}

@media (min-width: 768px) {
  .detail-section {
    padding: 1.5rem 2rem;
  }
}

/* Sol: İçerik (flex-1) */
.detail-left {
  flex: 1;
  min-width: 0;
}

@media (min-width: 768px) {
  .detail-left {
    /* Eski mutlak konumlu fiyat paneli için ayrılan 250px boşluk artık gereksiz
       (panel flex sütun oldu). Bu boşluk amenities/başlık satırını sıkıştırıp
       vdAmenitiesFit() ile yazıyı minicik yapıyordu — kaldırıldı. */
    padding-right: 2rem;
  }
}

.detail-left .location-breadcrumb {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--slate-400);
  margin: 0 0 0.35rem 0;
}

@media (min-width: 768px) {
  .detail-left .location-breadcrumb {
    font-size: 9px;
  }
}

.detail-left .location-breadcrumb .sep {
  color: var(--slate-300);
  margin: 0 0.25rem;
}

.detail-left .location-breadcrumb .location-highlight {
  color: var(--brand-blue);
}

.villa-title {
  font-size: 1.25rem;
  font-weight: 700;
  
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 0.5rem 0;
}

@media (min-width: 768px) {
  .villa-title {
    font-size: 1.4rem;
    margin-bottom: 0;
    /* Wrapper içinde margin sıfırla */
  }
}

.title-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  /* Makul seviyede aşağı kaydırıldı (Eski: 0.15rem) */
}



.title-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* TGA Certificate Box */
.tga-certification {
  display: flex;
  padding: 0;
  margin-top: 0;
  background: transparent;
  gap: 10px;
  align-items: center;
  transform: translateX(-5px);
}

@media (min-width: 768px) {
  .tga-certification {
    position: static;
    transform: none;
    width: max-content;
    margin-top: 63px;
    padding: 10px 0 0 0;
  }
}

.tga-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tga-logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.tga-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

.tga-title {
  font-size: 10px;
  font-weight: 500;
  color: var(--slate-500);
  line-height: 1.2;
}

.tga-no {
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-800);
  margin: 1px 0;
  line-height: 1.2;
}

.tga-link {
  font-size: 9px;
  color: var(--slate-500);
  text-decoration: underline;
  font-weight: 500;
  margin-top: 2px;
}

.tga-link:hover {
  color: var(--brand-blue);
}

/* HTML referansı: 2. ve 3. satırı sağa doğru genişlet */
@media (min-width: 768px) {
  .tga-certification .tga-no { letter-spacing: 2.6px; }
  .tga-certification .tga-link { letter-spacing: 1.6px; }
}

/* Mobile TGA Box Position Adjustment */
@media (max-width: 767.98px) {
  .mobile-tga-box {
    margin-top: -29px !important;
    margin-bottom: 5px !important;
    width: 100% !important;
  }
}

/* Eski title-row'u kaldırıyoruz veya uyumlu hale getiriyoruz */
.title-row {
  display: none;
}

.title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-bottom: 0.75rem;
}

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem 0.4rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--slate-300);
  border-radius: 9999px;
  font-size: 11px;
  white-space: nowrap;
}

.rating-badge .fa-star {
  color: var(--brand-orange);
  font-size: 11px;
}

.rating-num {
  font-weight: 600;
  color: var(--slate-700);
}

.rating-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--slate-300);
  text-transform: uppercase;
}

.actions {
  /* margin-left: auto; -- Artık wrapper içinde sağa itme gerekebilir ama flex gap yeterli */
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.actions .rating-badge {
  position: static;
  margin-left: 0.5rem;
}

.actions .rating-badge span {
  font-weight: 500;
}

.btn-icon {
  background: none;
  border: none;
  padding: 0.2rem;
  color: var(--slate-300);
  cursor: pointer;
  transition: color 0.2s;
  font-size: 0.95rem;
}

.btn-icon:hover {
  color: var(--primary-color);
}

.btn-icon.active,
.btn-icon.active i {
  color: var(--primary-color) !important;
}

.btn-icon.btn-icon-share:hover {
  color: var(--brand-blue);
}

/* --- Share Dropdown --- */
.share-dropdown-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.share-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: auto;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 9999px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  padding: 6px 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: all 0.2s ease;
  z-index: 100;
  white-space: nowrap;
}

.share-dropdown-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.share-options {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.share-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--slate-600);
  font-size: 16px;
}

.share-option:hover {
  background: var(--slate-100);
  transform: translateY(-2px);
}

.share-option.whatsapp:hover { color: #25D366; }
.share-option.facebook:hover { color: #1877F2; }
.share-option.twitter:hover { color: #000000; }
.share-option.copy-link:hover { color: var(--brand-orange); }

.share-option.copy-link.copied {
  color: #10b981;
  background: #ecfdf5;
}

/* Özellikler: yatak, banyo, kapasite */
.features-row {
  display: flex;
  flex-wrap: nowrap;
  /* Tek satıra zorla */
  align-items: center;
  justify-content: space-between; /* Mobilde eşit aralıklarla yay */
  width: 100%;
  gap: 0.4rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-600);
  margin-bottom: 2.5rem;
  /* Aşağı doğru kaydırıldı (Eski: 1.25rem) */
}

@media (min-width: 768px) {
  .features-row {
    justify-content: flex-start; /* Masaüstünde sola dayalı kalsın */
    width: auto;
    gap: 0 1.25rem;
	transform:translateY(-9px);
  }
}

.feature-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.feature-item i {
  color: #cbd5e1;
  font-size: 0.9rem;
}

.features-row .divider {
  width: 1px;
  height: 0.75rem;
  background: var(--slate-200);
  display: none;
}

@media (min-width: 576px) {
  .features-row .divider {
    display: block;
  }
}

/* Olanaklar: renkli nokta */
.amenities-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

@media (min-width: 768px) {
  .amenities-row {
    gap: 0.6rem 1.25rem;
  }
}

.amenity-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-500);
}

@media (min-width: 768px) {
  .amenity-item {
    font-size: 13px;
  }
}

.amenity-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.amenity-dot.blue {
  background: var(--brand-blue);
}

.amenity-dot.green {
  background: #4ade80;
}

.amenity-dot.orange {
  background: var(--brand-orange);
}

/* ----- Sağ: Fiyat paneli (320px) – zarif ----- */
.detail-right {
  background: #fff;
  border-top: 1px solid var(--slate-300);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  text-align: right;
  gap: 1rem;
}

@media (min-width: 768px) {
  .detail-right {
    width: 320px;
    flex-shrink: 0;
    border-top: none;
    border-left: none;
    padding: 1.5rem 2rem;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    text-align: right;
    gap: 0;
  }
}

.detail-right .price-block {
  margin-bottom: 0.5rem;
}

.price-top {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.4rem;
}

.price-top .price-label,
.price-top .price-gecelik {
  display: none; /* Mobilde gizli */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #94a3b8;
  margin: 0;
  font-style: normal;
}

.price-bottom {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #94a3b8;
  margin-top: 0.3rem;
  text-align: right;
}

.price-top .price-amount {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary-color);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}

.price-bottom {
  text-align: right;
}

@media (min-width: 768px) {
  .price-top .price-label {
    display: inline-block; /* Masaüstünde tekrar görünür */
    font-size: 12px;
	letter-spacing:3.3px;	
  }
  .price-top .price-gecelik {
    display: inline-block; /* Masaüstünde tekrar görünür */
    font-size: 12px;
    letter-spacing: 3.3px;
    transform: translateY(-3px);
  }
  .price-top .price-amount {
    font-size: 22px;
  }
  .price-bottom {
    font-size: 10px;
  }
}

.payment-terms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem 0;
  font-size: 9px;
  font-weight: 600;
  color: var(--slate-500);
  opacity: 0.9;
}

@media (min-width: 768px) {
  .payment-terms {
    justify-content: center;
    /* Merkeze hizalandı (Eski: flex-end) */
    font-size: 10px;
  }
}

.payment-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-orange);
  flex-shrink: 0;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.6;
  }
}

/* İptal Şartları Linki ----- */
.cancellation-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  max-width: 320px;
  padding: 0.55rem 1rem;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #475569;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  text-decoration: none;
  margin-top: 26px;
  white-space: nowrap;
}

.cancellation-link i {
  font-size: 14px;
  color: #faa819;
}

@media (min-width: 768px) {
  .cancellation-link {
    font-size: 12px;
    padding: 0.65rem 1.25rem;
    border-radius: 12px;
  }
}

/* ----- Tab menü ----- */
.tabs-wrapper {
  width: 100%;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .tabs-wrapper {
    margin-bottom: 1.75rem;
  }
}


.tabs-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  padding: 0.4rem 0.5rem;
  background: #fff;
  border: 1px solid var(--slate-300);
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0.75rem;
  z-index: 40;
}

@media (min-width: 768px) {
  .tabs-nav {
    padding: 0.5rem 0.55rem;
    border-radius: 16px;
    top: 1rem;
  }

  .tab-btn {
    padding: 0.55rem 1.1rem;
    font-size: 11.5px;
  }
}

.tabs-nav::-webkit-scrollbar {
  display: none;
}

.tabs-nav {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--slate-600);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.tab-btn:hover {
  color: var(--brand-blue);
  background: var(--slate-50);
  border-color: var(--slate-200);
}

.tab-btn.active {
  color: #fff;
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  box-shadow: 0 4px 12px -4px rgba(5, 154, 211, 0.3);
}

.tab-btn .tab-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-orange);
  flex-shrink: 0;
}

/* Mobile Reservation Box Wrapper */
.mobile-reservation-wrapper {
  display: block;
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  .mobile-reservation-wrapper {
    display: none;
  }
}

.tab-btn.active .tab-dot {
  background: rgba(255, 255, 255, 0.9);
}

/* Mobile Tab Menu (Grid Layout) */
/* Mobile Tab Menu (Flex Layout for better spacing control) */
@media (max-width: 767.98px) {
  .tabs-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* Eşit dağılım */
    gap: 0;
    padding: 8px 4px;
    overflow-x: visible;
    white-space: normal;
    height: auto;
  }

  /* Horizontal Separator Line */
  .tabs-nav::before {
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--slate-200);
    margin: 8px 12px;
    /* Margin azaltıldı */
    opacity: 0.6;
    order: 4;
    /* İlk 3 öğeden sonra gelsin */
  }

  .tab-btn {
    display: flex;
    /* Flex yap */
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 0;
    /* Yan padding sıfırlandı, width ile kontrol */
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
    border: none;
    background: transparent;
    gap: 3px;
    /* İkon boşluğu azaltıldı */
  }

  /* Row 1: 3 items */
  #tab-detay,
  #tab-fiyatlar,
  #tab-takvim {
    width: 33.33%;
    order: 1;
  }

  /* Takvim menüsü özel ayar */
  #tab-takvim {
    letter-spacing: -0.3px;
    /* Sıkıştır */
  }

  /* Ä°nce ayar: Fiyatlar ve Takvim'i 2px sola it */
  #tab-fiyatlar,
  #tab-takvim {
    transform: translateX(-2px);
  }

  /* Row 2: 2 items */
  #tab-konum,
  #tab-yorumlar {
    width: 50%;
    order: 5;
    /* Çizgiden sonra */
  }

  /* Restore dots */
  .tab-btn .tab-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 2px;
  }
}

/* Tab paneller */
.tab-panels {
  margin-top: 0;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* Align all tab headings with description section */
.tab-panel .panel-title,
.tab-panel .calendar-header-top {
  margin-top: 0;
  padding-top: 0;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 15px;
  font-weight: 800;
  color: var(--slate-800);
  margin: 17px 0 0.35rem 0;
  /* 0.5rem -> 0.35rem */
}

@media (min-width: 768px) {
  .panel-title {
    font-size: 17px;
    margin-bottom: 0.45rem;
    /* 0.625rem -> 0.45rem */
  }
}

@media (min-width: 1024px) {
  .panel-title {
    font-size: 16px;
    margin-bottom: 0.5rem;
    /* 0.75rem -> 0.5rem */
  }
}

.panel-title .panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0.375rem;
  background: rgba(250, 168, 25, 0.08);
  border: 1px solid rgba(250, 168, 25, 0.15);
  border-radius: 10px;
  color: var(--brand-orange);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .panel-title .panel-icon {
    width: 28px;
    height: 28px;
    padding: 0.5rem;
    border-radius: 12px;
  }
}

.panel-title .panel-icon i {
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .panel-title .panel-icon i {
    font-size: 14px;
  }
}

/* Kart: zarif köşe, hafif gölge */
.card-elevated {
  background: #fff;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 19px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: border-color 0.25s, box-shadow 0.25s;
}

.card-elevated:hover {
  border-color: var(--slate-300);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.panel-card {
  padding: 1rem 0.875rem;
  /* 1.25rem 1rem -> 1rem 0.875rem */
}

@media (min-width: 768px) {
  .panel-card {
    padding: 1.25rem 1.125rem;
    /* 1.5rem 1.25rem -> 1.25rem 1.125rem */
  }
}

@media (min-width: 1024px) {
  .panel-card {
    padding: 1.5rem 1.25rem;
    /* 1.75rem 1.5rem -> 1.5rem 1.25rem */
  }
}

.panel-card p {
  margin: 0 0 0.75rem 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--slate-600);
}

@media (min-width: 768px) {
  .panel-card p {
    font-size: 0.9375rem;
    margin-bottom: 0.875rem;
  }
}

@media (min-width: 1024px) {
  .panel-card p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
  }
}

.panel-card p:last-child {
  margin-bottom: 0;
}

/* Villa açıklama font boyutu özelleştirmesi (Kullanıcı İsteği: 3px küçült) */
.description-content p {
  font-size: 11px;
}

@media (min-width: 768px) {
  .description-content p {
    font-size: 12px;
  }
}

@media (min-width: 1024px) {
  .description-content p {
    font-size: 13px;
  }
}

/* Villa açıklama başlığının üst margin'ini kaldır - tab menünün hemen altında */
.description-section .panel-title:first-child {
  margin-top: 0;
  padding-top: 0;
}

/* Villa açıklaması kutusu — takvim / konum / yorum ile aynı başlık aralığı ve çerçeve */
.description-section .panel-title {
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .description-section .panel-title {
    margin-bottom: 17px;
  }
}

.description-section .card-elevated {
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.description-section .panel-card {
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .description-section .panel-card {
    padding: 1.5rem;
  }
}

@media (min-width: 1024px) {
    .description-section .panel-card {
        padding: 1.5rem;
        max-height: 600px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
}

/* Tab menü ve açıklama alanını daralt (Kullanıcı İsteği) */
@media (min-width: 1024px) {

  .tabs-wrapper,
  .description-section {
    max-width: 60%;
  }
}

/* ----- Ek Ücretler :root Şartlar ----- */
.fees-rules-section {
  width: 100%;
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .fees-rules-section {
    margin-top: 1.5rem;
  }
}

.fees-rules-section .panel-title {
  margin-bottom: 0.35rem;
  /* 1.25rem -> 0.35rem */
/*margin-top:93px;*/
}

@media (min-width: 768px) {
  .fees-rules-section .panel-title {
    margin-bottom: 0.45rem;
    /* 1.5rem -> 0.45rem */
  }
}

.fees-rules-card {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .fees-rules-card {
    padding: 1.75rem;
    gap: 2rem;
  }
}

/* Ana Kutu: Depozito, Kısa Konaklama ve Check-in/out */
.fees-rules-main {
  background: rgba(248, 250, 252, 0.25);
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

@media (min-width: 768px) {
  .fees-rules-main {
    border-radius: 20px;
  }
}

.fees-rules-main-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 16rem;
  height: 16rem;
  background: rgba(248, 250, 252, 0.5);
  border-radius: 50%;
  transform: translate(8rem, -8rem);
  pointer-events: none;
}

.fees-rules-grid {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  z-index: 10;
  margin-bottom: -30px;
}

@media (min-width: 1024px) {
  .fees-rules-grid {
    grid-template-columns: 8fr 4fr;
  }
}

/* Sol: Finansal Bilgiler */
.fees-rules-left {
  padding: 1.25rem;
  padding-bottom: 0;
}

@media (min-width: 768px) {
  .fees-rules-left {
    padding: 1.5rem 2rem;
    padding-bottom: 0.0625rem;
  }
}

.fees-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
  .fees-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (min-width: 768px) {
  .fees-grid {
    gap: 2.25rem;
    margin-bottom: 1.5rem;
  }
}

.fee-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.fee-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  border: 1px solid;
}

.fee-icon-orange {
  background: rgba(250, 168, 25, 0.08);
  color: var(--brand-orange);
  border-color: rgba(250, 168, 25, 0.1);
}

.fee-icon-blue {
  background: rgba(59, 130, 246, 0.08);
  color: var(--brand-blue);
  border-color: rgba(59, 130, 246, 0.1);
}

.fee-icon i {
  font-size: 1.5rem;
}

.fee-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.fee-label {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
}

.fee-icon-orange+.fee-content .fee-label {
  color: var(--brand-orange);
}

.fee-icon-blue+.fee-content .fee-label {
  color: var(--brand-blue);
}

.fee-amount {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--slate-800);
  letter-spacing: -0.02em;
  line-height: 1;
}

@media (min-width: 768px) {
  .fee-amount {
    font-size: 1.425rem;
  }
}

/* Bilgi Notları */
.fees-info {
  padding-top: 0.625rem;
  border-top: 1px solid rgba(203, 213, 225, 0.9);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

@media (min-width: 768px) {
  .fees-info {
    padding-top: 0.875rem;
  }
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.info-icon-orange {
  color: var(--brand-orange);
  margin-top: 7px;
  flex-shrink: 0;
}

.info-icon-blue {
  color: var(--brand-blue);
  margin-top: 5px;
  flex-shrink: 0;
}

.info-item p {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--slate-500);
  line-height: 1.75;
  font-style: italic;
  margin: 4px;
  max-width: 32rem;
}

/* Sağ: Check-in/out Zamanları */
.fees-rules-right {
  background: white;
  padding: 1.5rem;
  padding-bottom: 0;
  color: var(--slate-800);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Dikeyde ortalayarak alanı dolduralım */
  align-items: center;
  /* Yatayda ortalayalım */
  min-height: 100%;
  border-top: 1px solid rgba(203, 213, 225, 0.9);
}

@media (min-width: 768px) {
  .fees-rules-right {
    padding: 2rem 2.5rem;
    padding-bottom: 0.5625rem;
  }
}

@media (min-width: 1024px) {
  .fees-rules-right {
    border-top: none;
    border-left: 1px solid rgba(203, 213, 225, 0.9);
  }
}

.btn-cancel-policy {
  position: relative;
  top: -40px;
  margin-top: 38px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  text-decoration: none;
  background: rgba(59, 130, 246, 0.04);
  color: var(--brand-blue, #3b82f6);
  border: 1px solid rgba(59, 130, 246, 0.15);
  padding: 0.5625rem 1rem;
  border-radius: 12px;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-cancel-policy:hover {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.25);
}

.btn-cancel-policy i {
  font-size: 1rem;
}

/* Calendar Legend Styles */
.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding: 1rem 1.5rem;
  background: white;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

.legend-available {
  border: 2px solid rgba(203, 213, 225, 0.8);
  background: white !important;
}

.legend-booked {
  background: rgba(254, 202, 202, 0.8);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.legend-pending {
  background: rgba(253, 230, 138, 0.9);
  border: 1px solid rgba(251, 191, 36, 0.4);
}

.legend-checkin {
  background: linear-gradient(to bottom right, rgba(255, 219, 219, 0.8) 50%, white 50%);
  border: 1px solid rgba(248, 113, 113, 0.3);
  position: relative;
  overflow: hidden;
}

.legend-checkin::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, transparent 45%, rgba(248, 113, 113, 0.6) 45%, rgba(248, 113, 113, 0.6) 55%, transparent 55%);
}

.legend-text {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
}

/* Calendar Legend Styles */
.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding: 1rem 1.5rem;
  background: white;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

.legend-available {
  border: 2px solid rgba(203, 213, 225, 0.8);
  background: white;
}

.legend-booked {
  background: rgba(254, 202, 202, 0.8);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.legend-pending {
  background: rgba(253, 230, 138, 0.9);
  border: 1px solid rgba(251, 191, 36, 0.4);
}

.legend-checkin {
  background: linear-gradient(to bottom right, rgba(255, 219, 219, 0.8) 50%, white 50%);
  border: 1px solid rgba(248, 113, 113, 0.3);
  position: relative;
  overflow: hidden;
}

.legend-checkin::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, transparent 45%, rgba(248, 113, 113, 0.6) 45%, rgba(248, 113, 113, 0.6) 55%, transparent 55%);
}

.legend-text {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
}

@media (min-width: 768px) {
  .btn-cancel-policy {
    margin-top: 2rem;
	transform:translateY(6px);
  }
}

.check-timeline {
  position: relative;
  top: -5px;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  /* Boşluğu artırarak alanı yayalım */
  width: 100%;
  max-width: 280px;
  /* Çok yayılmaması için kontrol altında tutalım */
}

@media (min-width: 768px) {
  .check-timeline {
    gap: 3.5rem;
  }
}

.timeline-line {
  display: none;
  /* Timeline çizgisini modern görünüm için kaldıralım */
}

.check-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  position: relative;
}

.check-icon {
  width: 2.25rem;
  /* 2.8125rem -> 2.25rem (oranda küçültüldü) */
  height: 2.25rem;
  border-radius: 10px;
  /* Daire yerine yumuÅŸak kare daha modern durur */
  background: white;
  border: 1px solid rgba(203, 213, 225, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.check-in-icon {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1) !important;
}

.check-out-icon {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1) !important;
}

.check-icon i {
  font-size: 0.9375rem;
}

.check-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.check-label {
  font-size: 13px;
  /* 9px -> 6px (3px küçültüldü) */
  font-weight: 800;
  text-transform: uppercase;
  color: var(--slate-500);
  line-height: 1;
}

.check-item:has(.check-in-icon) .check-label {
  color: #3b82f6;
}

.check-item:has(.check-out-icon) .check-label {
  color: #ef4444;
}

.check-item:has(.check-out-icon) {
  transform: translateY(-20px);
}

@media (min-width: 768px) {
  .check-label {
    font-size: 13px;
    /* 12px -> 9px (3px küçültüldü) */
  }
}

.check-type {
  font-size: 10px;
  /* 11px -> 8px (3px küçültüldü) */
  font-weight: 700;
  color: var(--slate-800);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-top: 0.125rem;
}

.check-time {
  font-size: 0.9375rem;
  /* 18px -> 15px (3px küçültüldü) */
  font-weight: 800;
  color: var(--slate-800);
  letter-spacing: -0.02em;
  line-height: 1;
  transform:translateY(-4px);
}

@media (min-width: 768px) {
  .check-time {
    font-size: 20px;
    /* 22.8px -> 19.8px (3px küçültüldü) */
  }
}

/* Alt Kısım: Fiyata Dahil Olanlar ve Önemli Kurallar */
.fees-rules-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .fees-rules-bottom {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

.included-rules-box {
  background: rgba(248, 250, 252, 0.4);
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .included-rules-box {
    border-radius: 18px;
    padding: 1.5rem;
  }
}

.included-rules-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--slate-800);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
}

.included-rules-title i {
  font-size: 1rem;
}

.included-rules-title i.fa-check-circle {
  color: #10b981;
}

.included-rules-title i.fa-exclamation-circle {
  color: var(--brand-orange);
}

/* Fiyata Dahil Olanlar — template estetiği (ikon üstte, metin altta, ortalı)
   ancak uzun metinler için düzenli 2 sütun grid (flex-wrap dağılması giderildi) */
.included-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* Uzun çok kelimeli etiketler için ikon-sol / metin-sağ satır düzeni
   (template'in ikon kutusu/renk/font token'ları korunur, dağılma olmaz) */
.included-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.included-icon {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 12px;
  background: white;
  border: 1px solid rgba(203, 213, 225, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s;
}

.included-item:hover .included-icon {
  transform: scale(1.05);
}

.included-icon i {
  font-size: 1rem;
}

.included-icon .fa-bolt {
  color: #eab308;
}

.included-icon .fa-tint {
  color: var(--brand-blue);
}

.included-icon .fa-wifi {
  color: var(--brand-blue);
}

.included-icon .fa-water {
  color: var(--brand-blue);
}

.included-icon .fa-fire {
  color: #ea580c;
}

.included-item span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--slate-600);
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-align: left;
}

/* Önemli Kurallar — template ile birebir (3 sütun, ikon üstte, ortalı) */
.rules-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.rule-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.rule-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 12px;
  background: white;
  border: 1px solid rgba(203, 213, 225, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s;
}

.rule-item:hover .rule-icon {
  transform: scale(1.05);
}

.rule-icon i {
  font-size: 1rem;
}

.rule-icon .fa-ban {
  color: #e11d48;
}

.rule-icon .fa-paw {
  color: #92400e;
}

.rule-icon .fa-volume-mute {
  color: #4338ca;
}

.rule-item span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--slate-600);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* ----- Fiyatlar Sekmesi ----- */
/* Takvim / konum / yorum kutuları ile aynı başlık ve dış çerçeve */
.pricing-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pricing-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.875rem;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .pricing-header {
    flex-direction: row;
    align-items: center;
    margin-bottom: 0;
  }
}

.pricing-section .panel-title {
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .pricing-section .panel-title {
    margin-bottom: 17px;
  }
}

.currency-selector {
  display: flex;
  background: rgba(241, 245, 249, 1);
  padding: 0.25rem;
  border-radius: 8px;
  gap: 0.25rem;
  flex-shrink: 0;
  width: fit-content;
}

.currency-btn {
  padding: 0.3125rem 0.625rem;
  border-radius: 6px;
  font-size: 0.5625rem;
  font-weight: 800;
  color: var(--slate-400);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.currency-btn:hover {
  color: var(--slate-600);
}

.currency-btn.active {
  background: white;
  color: var(--brand-blue);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.pricing-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

@media (min-width: 768px) {
  .pricing-list {
    gap: 1.25rem;
  }
}

.pricing-card {
  background: white;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 14px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  transition: background 0.2s, border-color 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.pricing-card:hover {
  background: rgba(248, 250, 252, 0.5);
  box-shadow: none;
}

@media (min-width: 768px) {
  .pricing-card {
    padding: 1.5rem;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }
}

.pricing-card-left {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  justify-content: center;
}

@media (min-width: 768px) {
  .pricing-card-left {
    justify-content: flex-start;
    width: auto;
  }
}

.pricing-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: rgba(250, 168, 25, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-orange);
  transition: all 0.3s;
  flex-shrink: 0;
}

.pricing-card:hover .pricing-icon {
  color: var(--brand-orange);
  background: rgba(250, 168, 25, 0.1);
}

.pricing-icon i {
  font-size: 1rem;
}

.pricing-dates {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
}

@media (min-width: 768px) {
  .pricing-dates {
    text-align: left;
  }
}

.pricing-date-range {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-800);
  letter-spacing: -0.01em;
  line-height: 1;
}

@media (min-width: 768px) {
  .pricing-date-range {
    font-size: 0.8375rem;
  }
}

.pricing-min-stay {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--slate-400);
  margin-top: 0.25rem;
  justify-content: center;
}

@media (min-width: 768px) {
  .pricing-min-stay {
    justify-content: flex-start;
  }
}

.pricing-min-stay i {
  font-size: 0.5625rem;
}

.pricing-card-right {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  justify-content: space-between;
  padding-top: 0.625rem;
  border-top: 1px solid #cbd5e1;
}

@media (min-width: 768px) {
  .pricing-card-right {
    width: auto;
    padding-top: 0;
    border-top: none;
    gap: 3rem;
  }
}

.pricing-divider {
  width: 1px;
  height: 2rem;
  /* Yüksekliği ayarladık */
  background: #cbd5e1;
  display: block;
  /* Mobilde görünür yap */
  margin: 0 auto;
  /* Ortala */
  align-self: center;
  /* Dikeyde ortala */
}

@media (min-width: 768px) {
  .pricing-divider {
    display: block;
  }
}

.pricing-price-item {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  text-align: center;
  flex: 1;
}

@media (min-width: 768px) {
  .pricing-price-item {
    text-align: right;
    flex: none;
  }
}

.pricing-price-label {
  font-size: 0.5rem;
  font-weight: 800;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pricing-price-value {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--brand-blue);
  letter-spacing: -0.02em;
  line-height: 1;
}

@media (min-width: 768px) {
  .pricing-price-value {
    font-size: 1.15rem;
  }
}

.pricing-currency {
  font-size: 0.6875rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .pricing-currency {
    font-size: 0.75rem;
  }
}

/* ----- Müsaitlik Takvimi ----- */
.calendar-section {
  width: 100%;
}

.calendar-section .panel-title {
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .calendar-section .panel-title {
    margin-bottom: 17px;
  }
}

.calendar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  width: 100%;
}

@media (min-width: 768px) {
  .calendar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

.calendar-card {
  background: white;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .calendar-card {
    padding: 1.5rem;
    gap: 1.5rem;
  }
}

/* Takvimi Tek Çerçeveye Alma */
.calendar-section .calendar-grid {
  background: white;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

@media (min-width: 768px) {
  .calendar-section .calendar-grid {
    padding: 1.25rem;
  }
}

.calendar-section .calendar-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 800;
  color: var(--slate-800);
  letter-spacing: -0.01em;
  position: relative;
}

.calendar-header .fa-chevron-left.calendar-nav {
  left: 0;
}

.calendar-header .fa-chevron-right.calendar-nav {
  right: 0;
}

@media (min-width: 768px) {
  .calendar-header {
    font-size: 15px;
  }
}

.calendar-month {
  flex: 1;
  text-align: center;
}

.calendar-nav {
  font-size: 1rem;
  color: #faa819;
  cursor: pointer;
  transition: color 0.2s;
}

.calendar-nav:hover {
  color: var(--slate-400);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

@media (min-width: 768px) {
  .calendar-weekdays {
    gap: 0.5rem;
  }
}

.calendar-weekday {
  text-align: center;
  font-size: 0.5625rem;
  font-weight: 800;
  color: var(--slate-400);
  text-transform: uppercase;
  padding-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .calendar-weekday {
    font-size: 0.625rem;
  }
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

@media (min-width: 768px) {
  .calendar-days {
    gap: 0.5rem;
  }
}

.calendar-day {
  aspect-ratio: 1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.3s;
  cursor: pointer;
  border: 1px solid;
}

@media (min-width: 768px) {
  .calendar-day {
    border-radius: 12px;
    font-size: 0.875rem;
  }
}

.calendar-day.empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
}

.calendar-day.available {
  background: white;
  color: var(--slate-700);
  border-color: rgba(226, 232, 240, 0.8);
}

.calendar-day.available:hover {
  transform: scale(1.05);
  border-color: #e2e8f0;
}

.calendar-day.booked {
  background: rgb(255 219 219 / 80%);
  color: #1e293b;
  border-color: #e2e8f0;
  cursor: not-allowed;
}

.calendar-day.today {
  border: 2px #e2e8eecc;
  position: relative;
  z-index: 1;
}

/* ----- Konum Sekmesi ----- */
/* Başlık–kutu aralığı ve kutu stili: .calendar-section / .calendar-grid ile aynı hiza */
.location-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.location-section .panel-title {
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .location-section .panel-title {
    margin-bottom: 17px;
  }
}

.location-section .distance-info-card {
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .location-section .distance-info-card {
    margin-bottom: 1.5rem;
  }
}

/* Mesafe Bilgileri — takvim kutusu ile aynı border-radius ve padding */
.distance-info-card {
  background: white;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

@media (min-width: 768px) {
  .distance-info-card {
    padding: 1.5rem;
    border-radius: 14px;
  }
}

.distance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1rem;
}

/* Mobilde ikon ve yazı boyutlarını optimize edelim ki 2 sütuna sığsın */
@media (max-width: 639.98px) {
  .distance-icon i {
    font-size: 1.125rem;
  }

  .distance-label {
    font-size: 0.75rem;
  }

  .distance-value {
    font-size: 0.75rem;
  }

  .distance-item {
    gap: 0.625rem;
  }
}

@media (min-width: 640px) {
  .distance-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1.5rem;
  }
}

@media (max-width: 1023.98px) {
  .distance-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
  }

  .distance-grid .distance-item {
    justify-self: stretch;
    width: 100%;
    display: flex;
    align-items: center;
    /* İkon ve metni dikeyde ortalayalım */
  }

  /* İkonların genişliğini sabitleyerek metinlerin aynı hizada olmasını garanti edelim */
  .distance-icon {
    min-width: 32px;
    display: flex;
    justify-content: center;
  }

  .distance-grid .distance-item:nth-child(even) .distance-content {
    align-items: flex-start;
  }

  .distance-grid .distance-item:nth-child(even) {
    flex-direction: row;
    text-align: left;
    padding-left: 1.5rem;
    /* Hizayı bozmadan tüm grubu sağa çeker */
  }
}

@media (min-width: 1024px) {
  .distance-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 3rem;
  }
}

.distance-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.distance-icon {
  padding: 0.25rem;
  color: #f39c12;
  flex-shrink: 0;
  transition: transform 0.3s;
  opacity: 0.9;
}

.distance-item:hover .distance-icon {
  transform: scale(1.1);
  opacity: 1;
}

.distance-icon i {
  font-size: 1.25rem;
}

@media (min-width: 768px) {
  .distance-icon i {
    font-size: 1.375rem;
  }
}

.distance-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-top: 0.25rem;
}

.distance-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1;
}

@media (min-width: 768px) {
  .distance-label {
    font-size: 0.9375rem;
  }
}

.distance-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate-500);
  line-height: 1;
  margin-top: 0.375rem;
}

@media (min-width: 768px) {
  .distance-value {
    font-size: 0.9375rem;
  }
}

/* Harita Container */
.map-container {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.9);
  height: 500px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
  .map-container {
    border-radius: 14px;
    height: 600px;
  }
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Harita Üzerindeki Bilgi Kartı */
.map-info-card {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  width: 100%;
  max-width: 320px;
  background: white;
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  border: 1px solid white;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .map-info-card {
    padding: 1.5rem;
    border-radius: 20px;
    max-width: 340px;
  }
}

.map-info-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.map-info-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.map-coordinates {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--slate-900);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}

@media (min-width: 768px) {
  .map-coordinates {
    font-size: 1rem;
  }
}

.map-address {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--slate-500);
  margin: 0;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .map-address {
    font-size: 0.8125rem;
  }
}

.map-directions-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
  flex-shrink: 0;
}

.map-directions-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(203, 213, 225, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue);
  transition: all 0.3s;
}

.map-directions-btn:hover .map-directions-icon {
  background: var(--brand-blue);
  color: white;
  border-color: var(--brand-blue);
}

.map-directions-icon i {
  font-size: 0.875rem;
  transform: rotate(45deg);
}

.map-directions-text {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--brand-blue);
  text-transform: uppercase;
  white-space: nowrap;
}

.map-info-divider {
  height: 1px;
  background: rgba(226, 232, 240, 0.8);
  width: 100%;
}

.map-view-larger {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--brand-blue);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s;
  text-decoration: none;
}

.map-view-larger:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.map-view-larger i {
  font-size: 0.625rem;
}

/* ----- Havuz Detayları ----- */
.pools-section {
  width: 100%;
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .pools-section {
    margin-top: 1.5rem;
  }
}

.pools-section .panel-title {
  margin-bottom: 0.35rem;
  /* 1.25rem -> 0.35rem */
}

@media (min-width: 768px) {
  .pools-section .panel-title {
    margin-bottom: 0.45rem;
    /* 1.5rem -> 0.45rem */
  }
}

.pools-card {
  padding: 1.125rem;
}

@media (min-width: 768px) {
  .pools-card {
    padding: 1.25rem;
  }
}

.pools-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}

@media (min-width: 768px) {
  .pools-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .pools-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.125rem;
  }
}

.pool-item {
  background: linear-gradient(135deg, #ffffff 0%, #fcfdfe 100%);
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: 20px;
  overflow: visible;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
  padding: 1.25rem;
  position: relative;
}

@media (min-width: 768px) {
  .pool-item {
    padding: 1.5rem;
  }
}

.pool-item:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
  z-index: 10;
}

.pool-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.pool-title-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.pool-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--slate-800);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

@media (min-width: 768px) {
  .pool-title {
    font-size: 14px;
  }
}

.pool-type-badge {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.pool-type {
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--brand-blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.pool-heated-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.35rem 0.65rem;
  background: rgba(250, 168, 25, 0.08);
  color: var(--brand-orange);
  font-size: 0.625rem;
  font-weight: 800;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(250, 168, 25, 0.1);
}

.pool-heated-badge i {
  font-size: 0.6875rem;
}

.pool-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
  background: rgba(59, 130, 246, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue);
  transition: all 0.4s;
  flex-shrink: 0;
  border: 1px solid rgba(59, 130, 246, 0.1);
}

.pool-item:hover .pool-icon {
  background: var(--brand-blue);
  color: white;
  transform: rotate(-10deg) scale(1.1);
}

.pool-icon i {
  font-size: 1.25rem;
}

.pool-specs {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.pool-spec-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.4);
  background: transparent;
  border-radius: 0;
  transition: all 0.3s;
}

.pool-spec-item:last-child {
  border-bottom: none;
}

.pool-item:hover .pool-spec-item {
  border-bottom-color: rgba(226, 232, 240, 0.8);
}

.spec-label-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.spec-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--slate-400);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.pool-item:hover .spec-icon {
  color: var(--brand-blue);
  transform: translateX(2px);
}

.spec-icon i {
  font-size: 0.875rem;
}

.spec-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--slate-500);
  letter-spacing: 0;
  text-transform: none;
}

.spec-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-800);
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .spec-value {
    font-size: 13px;
  }
}

.pool-not-available {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 140px;
  width: 100%;
  margin-top: 1rem;
}

.pool-not-available i {
  font-size: 7rem;
  color: var(--slate-50);
  position: absolute;
  z-index: 1;
}

.pool-not-available span {
  font-size: 18px;
  font-weight: 600;
  color: var(--slate-500);
  z-index: 2;
  position: relative;
}

/* ----- Konfor :root Donanım ----- */
.features-section {
  width: 100%;
  margin-top: -15px;
  /* 15px yukarı taşı */
}

@media (min-width: 768px) {
  .features-section {
    margin-top: -15px;
    /* 15px yukarı taşı */
  }
}

.features-section .panel-title {
  margin-bottom: 0.35rem;
  /* 1.25rem -> 0.35rem */
}

@media (min-width: 768px) {
  .features-section .panel-title {
    margin-bottom: 0.45rem;
    /* 1.5rem -> 0.45rem */
  }
}

.features-card {
  padding: 1.25rem;
  overflow: hidden;
}

@media (min-width: 768px) {
  .features-card {
    padding: 1.5rem;
  }
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 0.75rem;
  width: 100%;
}

@media (min-width: 640px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.125rem 1rem;
  }
}

@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem 1.25rem;
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem 1.5rem;
  }
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .feature-item {
    gap: 0.625rem;
  }
}

/* Dış wrapper: Yuvarlatılmış kare arka plan */
.feature-icon-wrapper {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 6px;
  background: rgba(248, 250, 252, 0.85);
  border: 1px solid rgba(203, 213, 225, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .feature-icon-wrapper {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 7px;
  }
}

/* İç çember: Mavi border'lu çember */
.feature-icon-circle {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: 1.5px solid var(--brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

@media (min-width: 768px) {
  .feature-icon-circle {
    width: 1.25rem;
    height: 1.25rem;
    border: 1.5px solid var(--brand-blue);
  }
}

.feature-icon-circle i {
  font-size: 0.5625rem;
  color: var(--brand-blue);
  font-weight: 600;
}

@media (min-width: 768px) {
  .feature-icon-circle i {
    font-size: 0.625rem;
  }
}

.feature-text {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--slate-600);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .feature-text {
    font-size: 0.75rem;
  }
}

/* ----- Sık Sorulan Sorular ----- */
.faq-section {
  width: 100%;
  margin-top: -15px;
  /* 15px yukarı taşı */
}

@media (min-width: 768px) {
  .faq-section {
    margin-top: -15px;
    /* 15px yukarı taşı */
  }
}

.faq-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
  /* 0.5rem -> 0.35rem */
}

@media (min-width: 768px) {
  .faq-header {
    flex-direction: row;
    align-items: flex-end;
    margin-bottom: 0.45rem;
    /* 0.75rem -> 0.45rem */
  }
}

.faq-title {
  font-size: 1.375rem;
  font-weight: 900;
  color: var(--slate-900);
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0;
}

@media (min-width: 768px) {
  .faq-title {
    font-size: 17px;
    text-align: left;
  }
}

.faq-view-all {
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--brand-blue);
  letter-spacing: 0.2em;
  border-bottom: 2px solid rgba(59, 130, 246, 0.3);
  padding-bottom: 0.25rem;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  transition: border-color 0.2s;
}

.faq-view-all:hover {
  border-bottom-color: var(--brand-blue);
}

.faq-card {
  padding: 1.25rem;
  overflow: hidden;
}

@media (min-width: 768px) {
  .faq-card {
    padding: 1.5rem;
  }
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .faq-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 3rem;
  }
}

.faq-item {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(203, 213, 225, 0.9);
}

.faq-item:last-child {
  border-bottom: none;
}

@media (min-width: 768px) {
  .faq-item {
    padding: 1.25rem 0;
  }
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  color: var(--slate-800);
  cursor: pointer;
  list-style: none;
  user-select: none;
  width: 100%;
  transition: color 0.2s;
}

.faq-question:hover {
  color: var(--brand-blue);
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

@media (min-width: 768px) {
  .faq-question-content {
    gap: 1rem;
  }
}

.faq-number {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #1e293b;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  border: 1px solid #334155;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .faq-number {
    width: 2rem;
    height: 2rem;
    font-size: 0.625rem;
  }
}

.faq-question-text {
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .faq-question-text {
    font-size: 14px;
  }
}

.faq-chevron {
  font-size: 0.875rem;
  color: var(--slate-400);
  transition: transform 0.3s, color 0.2s;
  flex-shrink: 0;
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-question:hover .faq-chevron {
  color: var(--brand-blue);
}

.faq-answer {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(248, 250, 252, 0.5);
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 14px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--slate-500);
  line-height: 1.75;
  width: 100%;
}
.card-elevated.panel-card {
  height: 358px !important;
  flex: none !important;
  max-height: none !important;
}
/* #1: Villa Açıklaması kutusunda iç içe İKİ scroll vardı (panel-card + description-content);
   içteki scrollbar kartın iç padding'i kadar (≈20px) içeride kalıp "sola kaymış" görünüyordu.
   Çözüm: TEK scroll alanı = KARTIN KENDİSİ. Scrollbar artık kartın sağ KENARINDA çıkar
   (içerik kendi başına scroll etmez). İçerik kartı doldurur; uzunsa kart kayar.
   Bu override yalnızca açıklama kutusunu kapsar (diğer panel-card'lar etkilenmez). */
.description-section .card-elevated.panel-card {
  height: auto !important;          /* masaüstünde JS rezervasyona eşitler; mobilde auto */
  max-height: none !important;
  overflow-y: auto !important;      /* scroll KART üzerinde → scrollbar sağ kenarda */
  overflow-x: hidden !important;
  padding: 1.25rem !important;
}
/* İçerik KESİNLİKLE kendi scroll'unu üretmesin (aksi halde scrollbar kart padding'i kadar
   içeride/solda kalıyordu). !important ile tüm .description-content kurallarını ezer. */
.description-section .description-content {
  /*height: auto !important;*/
  max-height: none !important;
  overflow: visible !important;
  padding:12px;
  text-align: justify;
}
/* Kartın scrollbar'ı belirgin ve KARTIN SAĞ KENARINDA olsun
   (≥1024 için tanımlı width:1px görünmez kuralını ezer). */
.description-section .card-elevated.panel-card::-webkit-scrollbar { width: 6px !important; }
.description-section .card-elevated.panel-card::-webkit-scrollbar-track { background:#f1f5f9 !important; border-radius:10px !important; }
.description-section .card-elevated.panel-card::-webkit-scrollbar-thumb { background:#faa819 !important; border-radius:10px !important; }
/* Mobilde (tek kolon) JS yükseklik vermez; çok uzun açıklama kart içinde kaysın */
@media (max-width: 1023.98px) {
  .description-section .card-elevated.panel-card { max-height: 460px !important; }
}
@media (min-width: 768px) {
  .faq-answer {
    margin-top: 1.25rem;
    padding: 1.25rem;
    border-radius: 18px;
    font-size: 0.875rem;
  }
}

.description-content {
  max-width: none;
  color: var(--slate-600);
  line-height: 1.65;
  max-height: 450px;
  overflow-y: auto;
  padding-right: 10px;
}

/* Global Scrollbar Styling (Brand Orange) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    display: block; /* Ensure it is visible */
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #faa819; /* Brand Orange */
    border-radius: 10px;
    transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
    background: #e59400;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #faa819 #f1f5f9;
}

/* Read More for Description on Mobile */
.description-content {
    position: relative;
}

@media (max-width: 767.98px) {
    /* Önceki -80px negatif margin (kullanılmayan "read more" hack'i) Konaklama Koşulları
       başlığını Villa Açıklaması kutusunun içine çekiyordu. Normal akışa döndürüldü. */
    .description-section {
        margin-bottom: 1.25rem !important;
    }
    .content-main-wrapper {
        margin-top: 0 !important;
    }
    .fees-rules-section {
        margin-top: 1.5rem !important;
    }
}
.description-content p {
  margin: 0 0 0.875rem 0;
  font-size: 0.8125rem;
  font-weight: 400;
}

@media (min-width: 768px) {
  .description-content p {
    font-size: 0.875rem;
    margin-bottom: 1rem;
  }
}

@media (min-width: 1024px) {
  .description-content p {
    font-size: 0.9375rem;
    margin-bottom: 1.125rem;
  }
}

.description-content p:last-child {
  margin-bottom: 0;
}

.description-content strong {
  font-weight: 600;
  color: var(--slate-700);
}

.tab-panel .text-muted {
  color: var(--slate-500);
  font-size: 0.8125rem;
  margin: 0;
}

/* ----- Content Main Wrapper ----- */
.content-main-wrapper {
    width: 100%;
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .content-main-wrapper {
        margin-top: 1.75rem;
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .content-main-wrapper {
        grid-template-columns: 8fr 4fr;
        gap: 2.5rem;
        align-items: start;
        margin-top: 2.5rem;
    }
}

/* Villa Açıklaması: Tab menünün hemen altında */
.description-section {
  width: 100%;
  margin-top: 0;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .description-section {
    margin-bottom: 10px;
  }
}

/* ----- Content Main: Diğer tab içerikleri ----- */
.content-main {
  width: 100%;
  min-width: 0;
  margin-top: 0;
  /* Default margin removed to align with description-section */
}

@media (min-width: 768px) {
  .content-main {
    margin-top: 0;
  }
}

@media (min-width: 1024px) {

  /* Diğer tab içerikleri villa açıklamasının altında - sol kolon genişliğinde */
  .content-main {
    max-width: calc((100% - 2.5rem) * (2 / 3));
    /* Aligns width with tab menu */
    margin-top: 0;
    /* Villa açıklama ile diğer içerik arası boşluk */
  }
}

/* ----- Rezervasyon Kutusu ----- */
.reservation-sidebar {
  width: 100%;
}

@media (min-width: 1024px) {
  .tabs-reservation-row .reservation-sidebar {
    position: sticky;
    top: 1rem;
    /* Tab menü ile aynı seviye (tabs-nav top: 1rem) */
    align-self: start;
  }
}

.reservation-box {
  background: #fff;
  border: 2px solid rgba(250, 168, 25, 0.2);
  border-radius: 14px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.04);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (min-width: 768px) {
  .reservation-box {
    padding: 2rem;
  }
}

.reservation-icon-bg {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem;
  opacity: 0.03;
  pointer-events: none;
  transform: scale(1.5);
}

.reservation-icon-bg i {
  font-size: 7.5rem;
  color: var(--slate-800);
}

.reservation-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--slate-900);
  margin: 0 0 0.5rem 0;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .reservation-title {
    font-size: 1.5rem;
  }
}

.reservation-subtitle {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--slate-400);
  margin: 0 0 1.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .reservation-subtitle {
    font-size: 10px;
    margin-bottom: 2rem;
  }
}

.reservation-subtitle i {
  color: var(--brand-orange);
  font-size: 12px;
}

.reservation-highlight {
  color: var(--brand-blue);
}

.reservation-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  flex: 1;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .reservation-form {
    gap: 1.25rem;
  }
}

.reservation-form-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

@media (min-width: 768px) {
  .reservation-form-fields {
    gap: 1rem;
  }
}

.reservation-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.reservation-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--slate-400);
  margin-left: 0.25rem;
}

@media (min-width: 768px) {
  .reservation-label {
    font-size: 10px;
  }
}

.reservation-input-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  background: var(--slate-50);
  border: 1px solid var(--slate-300);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .reservation-input-wrapper {
    padding: 1rem;
  }
}

.reservation-input-wrapper:hover {
  background: #fff;
  border-color: rgba(5, 154, 211, 0.4);
}

.reservation-input-wrapper i:first-child {
  color: var(--slate-400);
  font-size: 16px;
  flex-shrink: 0;
}

.reservation-input-text {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--slate-400);
  text-align: left;
}

.reservation-input-wrapper i:last-child {
  color: var(--slate-400);
  font-size: 14px;
  flex-shrink: 0;
}

.reservation-select {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--slate-50);
  border: 1px solid var(--slate-300);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  color: var(--slate-800);
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  transition: all 0.3s;
}

@media (min-width: 768px) {
  .reservation-select {
    padding: 1rem;
    padding-right: 2.5rem;
  }
}

.reservation-select:hover {
  background-color: #fff;
  border-color: rgba(5, 154, 211, 0.4);
}

.reservation-select:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(5, 154, 211, 0.1);
}

.reservation-submit {
  margin-top: 1rem;
  width: 100%;
  padding: 1rem 1.25rem;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  box-shadow: 0 25px 50px -12px rgba(250, 168, 25, 0.5);
}

@media (min-width: 768px) {
  .reservation-submit {
    padding: 1.25rem 1.25rem;
    font-size: 12px;
  }
}

/* ----- Yorumlar Bölümü ----- */
/* Takvim / konum sekmesi ile aynı başlık–kutu aralığı ve kutu stili */
.comments-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.comments-section .panel-title {
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .comments-section .panel-title {
    margin-bottom: 17px;
  }
}

.comments-section .comments-list {
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .comments-section .comments-list {
    margin-bottom: 1.5rem;
  }
}

/* Yorum listesi: tek dış kutu (distance-info-card / calendar-grid ile aynı) */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: white;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Yorum Kartı — içte ayırıcı, dış çerçeve .comments-list’te */
.comment-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 0 0.875rem 0;
  margin: 0;
  box-shadow: none;
  transition: background 0.2s;
}

.comment-card:not(:last-child) {
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
  margin-bottom: 0.875rem;
}

.comment-card:hover {
  border-color: transparent;
  box-shadow: none;
}

.comment-card:last-child {
  padding-bottom: 0;
}

@media (min-width: 768px) {
  .comment-card:not(:last-child) {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }
}

.comment-header {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
}

.comment-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue);
  flex-shrink: 0;
}

.comment-avatar i {
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .comment-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
  }

  .comment-avatar i {
    font-size: 1rem;
  }
}

.comment-author-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.comment-author {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .comment-author {
    font-size: 0.9375rem;
  }
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.comment-rating {
  display: flex;
  gap: 0.125rem;
}

.comment-rating i {
  font-size: 0.6875rem;
  color: var(--brand-orange);
}

.comment-date {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.comment-text {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--slate-600);
  margin: 0;
  font-weight: 400;
}

@media (min-width: 768px) {
  .comment-text {
    font-size: 0.875rem;
    line-height: 1.6;
  }
}

/* Yorum Formu — dış kutu takvim / mesafe ile aynı */
.comment-form-card {
  background: white;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  margin-bottom: 15px;
}

@media (min-width: 768px) {
  .comment-form-card {
    padding: 1.5rem;
    border-radius: 14px;
  }
}

.comment-form-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0 0 0.875rem 0;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .comment-form-title {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .form-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.form-group label {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--slate-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--slate-900);
  background: white;
  transition: all 0.3s;
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.06);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--slate-400);
}

.form-group textarea {
  resize: vertical;
  min-height: 90px;
}

/* Rating Input */
.rating-input {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.25rem;
}

.rating-input input[type="radio"] {
  display: none;
}

.rating-input label {
  cursor: pointer;
  font-size: 1.125rem;
  color: var(--slate-300);
  transition: all 0.2s;
  padding: 0.125rem;
}

.rating-input label:hover,
.rating-input label:hover~label {
  color: var(--brand-orange);
}

.rating-input input[type="radio"]:checked~label {
  color: var(--brand-orange);
}

.comment-submit-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, var(--brand-orange) 0%, #f39c12 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  transition: all 0.3s;
  box-shadow: 0 1px 3px rgba(250, 168, 25, 0.15);
  margin-top: 0.125rem;
}

.comment-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(250, 168, 25, 0.2);
}

.comment-submit-btn:active {
  transform: translateY(0);
}

.comment-submit-btn i {
  font-size: 0.6875rem;
}

@media (min-width: 768px) {
  .comment-submit-btn {
    padding: 0.875rem 1rem;
    font-size: 0.75rem;
    border-radius: 12px;
  }
}

/* RADİKAL TASARIM: FLOATING DOCK (YÜZEN MENÜ) */
.floating-mobile-dock {
  display: none;
}

@media (max-width: 991.98px) {
body.villa-detay-page {
    padding-bottom: 100px !important;
  }

  /* RADÄ°KAL TASARIM: COLORFUL BOX (Minimal Revize) */
  .floating-mobile-dock {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 72px;
    /* Daha ince */
    background: #ffffff;
    border-top: 1px solid var(--slate-100);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.03);
    padding: 0 16px;
    /* Kenarlardan boÅŸluk */
    z-index: 2147483647;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    /* Elemanlar arası boşluk */
  }

  /* Animasyon Tanımı (Güçlü Halka Efekti) */
  @keyframes strong-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.8), 0 0 0 0 rgba(245, 158, 11, 0.4);
    }

    40% {
      box-shadow: 0 0 0 8px rgba(245, 158, 11, 0), 0 0 0 0 rgba(245, 158, 11, 0.4);
    }

    80% {
      box-shadow: 0 0 0 0 rgba(245, 158, 11, 0), 0 0 0 12px rgba(245, 158, 11, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(245, 158, 11, 0), 0 0 0 0 rgba(245, 158, 11, 0);
    }
  }

  .floating-mobile-dock::after {
    display: none;
  }

  .dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--slate-400);
    transition: all 0.2s;
    height: 100%;
    border-radius: 8px;
    /* Tıklanma alanı yumuşatma */
    gap: 4px;
    flex: 1;
    position: relative;
    padding: 2px 0;
    /* Padding azaltıldı */
  }

  /* Aktif durum efekti */
  .dock-item:active {
    transform: scale(0.95);
    background-color: var(--slate-50);
  }

  /* --- Renkli İkon Kutuları --- */
  .dock-icon-box {
    width: 35px;
    /* 38px -> 35px (3px Küçüldü) */
    height: 35px;
    /* 38px -> 35px */
    border-radius: 9px;
    /* Orantılı köşe */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    margin-bottom: 2px;
  }

  .dock-icon-box i {
    font-size: 18px !important;
    /* İkon da 20px -> 18px küçüldü */
    color: #ffffff !important;
    line-height: 1;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: none !important;
    animation: none !important;
    box-shadow: none !important;
  }

  /* Renkler :root Gölgeler (Daha soft) */
  .dock-icon-box.blue {
    background: #3b82f6;
  }

  .dock-icon-box.orange {
    background: #f59e0b;
    /* Güçlü Halka Animasyonu */
    animation: strong-pulse 1.5s infinite linear;
  }

  .dock-icon-box.dark {
    background: #1e293b;
  }

  .dock-icon-box.green {
    background: #22c55e;
  }

  /* Metinler (Daha minimal) */
  .dock-item span {
    font-size: 8px !important;
    /* Daha küçük font */
    font-weight: 700 !important;
    color: var(--slate-500) !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
    text-align: center;
    margin-top: 2px;
  }

  /* Özel Ayar Reset */
  .dock-item:nth-child(1),
  .dock-item:nth-child(2),
  .dock-item:nth-child(3) {
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 0 !important;
    transform: none !important;
  }

  .dock-item:nth-child(2) i {
    width: auto !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    animation: none !important;
  }
}

/* ============================================
   LAYOUT :root SIDEBAR (Rezervasyon Kutusu)
   ============================================ */

/* Çakışan content-main-wrapper kuralları temizlendi - scroll senkronizasyonu için */
/* Sol Kolon Yapısı (sadece villa-detay içindeki kullanım) */
.content-main-wrapper .main-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;            /* doğal yükseklik — sticky sidebar ile gereksiz boşluk olmasın */
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;       /* alttaki 5rem boşluk kaldırıldı */
}

.description-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.description-section .panel-card {
    background: #fff;
}

@media (min-width: 1024px) {
    .description-section .panel-card {
        scrollbar-width: thin;
        scrollbar-color: #faa819 transparent;
    }

    .description-section .panel-card::-webkit-scrollbar {
        width: 1px;
    }

    .description-section .panel-card::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 10px;
    }

    .description-section .panel-card::-webkit-scrollbar-thumb {
        background: #faa819;
        border-radius: 10px;
    }

    .description-section .panel-card::-webkit-scrollbar-thumb:hover {
        background: #faa819;
    }
}

.description-content {
    height: 100%;
    padding-right: 0.5rem;
}

@media (min-width: 1024px) {
    /* Detay bölümleri grid dışında olduğundan span 2 gerekmiyor */
    .fees-rules-section,
    .pools-section,
    .features-section,
    .faq-section {
        max-width: 100% !important;
        margin-top: 1.5rem;
    }

    .tabs-wrapper,
    .description-section,
    .content-main {
        max-width: 100% !important;
    }
}

/* Sidebar Alanı */
.sidebar-area {
    width: 100%;
}

@media (min-width: 1024px) {
    .sidebar-area {
        position: sticky;        /* sayfa kayarken solu takip etsin */
        top: 90px;               /* navbar yüksekliği kadar boşluk */
        width: 100%;
        max-width: 340px;
        margin-left: auto;
        z-index: 30;
        display: flex;
        flex-direction: column;
        align-self: flex-start;  /* grid hücresinde üste hizalı, sticky çalışsın */
        height: auto;            /* height:100% sticky'yi bozar — kaldırıldı */
    }
}

/* Yeni Rezervasyon Kartı Tasarımı (App.tsx bazlı) */
.reservation-card {
    background: #fff;
    border: 1px solid #ffc107;
    border-radius: 20px;
    padding: 1rem;
    position: relative;
    box-shadow: 0 15px 40px -15px rgba(0, 0, 0, 0.04);
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
}

@media (min-width: 768px) {
    .reservation-card {
        padding: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .reservation-card {
        position: relative;
        align-self: flex-start;
        /* Dikey scroll kaldırıldı */
    }
}

/* Arkaplan Ä°konu */
.reservation-card .bg-icon-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 6rem;
    height: 6rem;
    overflow: hidden;
    pointer-events: none;
    border-top-right-radius: 28px;
}

.reservation-card .bg-icon {
    font-size: 100px;
    color: #000;
    opacity: 0.015;
    transform: scale(1.25) translate(1.5rem, -1.5rem);
}

.reservation-card-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.reservation-title {
    font-size: 1.125rem;
    font-weight: 900;
    color: var(--slate-900, #0f172a);
    margin: 0 0 0.125rem 0;
    letter-spacing: -0.025em;
}

@media (min-width: 768px) {
    .reservation-title {
        font-size: 1.25rem;
    }
}

.reservation-stats {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    background: rgba(5, 154, 211, 0.03);
    /* brand-blue/3 */
    border-radius: 9999px;
    width: fit-content;
    margin-bottom: 0.75rem;
}

.reservation-stats i {
    font-size: 9px;
    color: var(--brand-orange, #ff7b00);
    margin-left: -9px;
    margin-top: 5px;
}

.reservation-stats span {
    font-size: 9.5px;
    font-weight: 500;
    color: var(--brand-blue, #059ad3);
    margin-top:5px;
}

/* Form Alanları */
.reservation-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    flex: 1;
}

.form-group-new {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    position: relative;
}

.form-label-new {
    font-size: 9.5px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--slate-400, #94a3b8);
    letter-spacing: 0.15em;
    margin-left: 0.25rem;
}

.form-input-box {
    padding: 0.625rem;
    background: rgba(248, 250, 252, 0.3);
    /* slate-50/30 */
    border-radius: 0.75rem;
    border: 1px solid var(--slate-200, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #475569;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s;
}

.form-input-box:hover {
    background: #fff;
    border-color: rgba(5, 154, 211, 0.2);
    /* brand-blue/20 */
}

.form-input-box.guest-select {
    color: var(--slate-600, #475569);
    font-size: 11px;
    font-weight: 700;
}

.box-left {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.box-left i {
    font-size: 14px;
    color: #059ad3;
    transition: color 0.2s;
}

.form-input-box:hover .box-left i {
    color: var(--brand-blue, #059ad3);
}

.box-text {
    font-size: 12px;
    font-weight: 700;
}

.box-chevron {
    font-size: 12px;
    color: var(--slate-300, #cbd5e1);
    transition: transform 0.3s;
}

.box-chevron.rotate {
    transform: rotate(180deg);
}

.hidden {
    display: none !important;
}

/* Misafir Dropdown */
.guest-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5rem;
    background: #fff;
    border-radius: 1rem;
    border: 1px solid var(--slate-300, #cbd5e1);
    box-shadow: 0 15px 40px -12px rgba(0, 0, 0, 0.12);
    z-index: 60;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.2s;
}

.guest-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.guest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0;
}

.guest-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.guest-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--slate-50, #f8fafc);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--slate-400, #94a3b8);
}

.guest-icon i {
    font-size: 19px;
	color:#059ad3;
}

.guest-icon .fa-user {
    font-size: 14px;
	color:#059ad3;
}

.guest-text {
    display: flex;
    flex-direction: column;
}

.guest-text-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-800, #1e293b);
}

.guest-text-desc {
    font-size: 9px;
    font-weight: 700;
    color: var(--slate-400, #94a3b8);
}

.guest-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.g-btn {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--slate-200, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--slate-400, #94a3b8);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.g-btn i {
    font-size: 12px;
}

.g-btn:hover:not(:disabled) {
    color: var(--brand-blue, #059ad3);
    background: var(--slate-50, #f8fafc);
}

.g-btn:disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

.g-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-800, #1e293b);
    width: 1rem;
    text-align: center;
}

.guest-footer {
    display: none;
}

/* Fiyat Dökümü Section */
.price-breakdown {
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--slate-200, #e2e8f0);
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.price-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 0.125rem;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-label {
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
    letter-spacing: -0.025em;
    transform:translateY(-7px);
}

.price-val {
    font-size: 12px;
    font-weight: 500;
    color: var(--slate-800, #1e293b);
}

.price-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--slate-200, #e2e8f0);
}

.price-total-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--slate-800, #1e293b);
    letter-spacing: -0.025em;
}

.price-total-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--slate-900, #0f172a);
}

/* Ödeme Planı */
.payment-plan {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 0.125rem;
}

.plan-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.125rem;
}

.plan-line {
    height: 1px;
    flex: 1;
    background: var(--slate-50, #f8fafc);
}

.plan-title {
    font-size: 8px;
    font-weight: 900;
    color: var(--slate-300, #cbd5e1);
    text-transform: uppercase;
    letter-spacing: 0.3em;
}

.plan-bar-wrapper {
    height: 6px;
    width: 100%;
    display: flex;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--slate-50, #f8fafc);
    margin-bottom: 0.5rem;
}

.plan-bar-fill {
    height: 100%;
    background: var(--brand-orange, #ff7b00);
}

.plan-bar-remain {
    height: 100%;
    background: var(--brand-blue, #059ad3);
}

.plan-details {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.plan-col {
    display: flex;
    flex-direction: column;
}

.plan-col.right {
    align-items: flex-end;
}

.plan-dot-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.125rem;
}

.plan-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.plan-dot.orange {
    background: var(--brand-orange, #ff7b00);
}

.plan-dot.blue {
    background: var(--brand-blue, #059ad3);
}

.plan-lbl {
    font-size: 10px;
    font-weight: 500;
    color: var(--slate-600, #475569);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.plan-amount {
    font-size: 14px;
    font-weight: 700;
    color: var(--slate-800, #1e293b);
}

/* Submit Butonu */
.res-submit-btn {
    display: block;
    width: 100%;
    background: var(--brand-orange, #ff7b00);
    color: #fff;
    border: none;
    padding: 9px;
    border-radius: 0.75rem;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 0.25rem;
    text-align: center;
    text-decoration: none;
}

.res-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(255, 123, 0, 0.3);
    color: #fff;
}

/* Tarih Araligi Dropdown */
.date-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    /* right: 0; */
    width: 310px; /* fit one calendar nicely */
    margin-top: 0.5rem;
    background: #fff;
    border-radius: 1rem;
    border: 1px solid var(--slate-300, #cbd5e1);
    box-shadow: 0 15px 40px -12px rgba(0, 0, 0, 0.12);
    z-index: 60;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.2s;
}

@media (min-width: 1300px) {
    .date-dropdown-menu {
        width: max-content;
        right: 0;
        left: auto;
    }
}

.date-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.date-dropdown-menu .calendar-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1300px) {
    .date-dropdown-menu .calendar-grid {
         grid-template-columns: 1fr 1fr;
    }
}

/* Date Box Icon Hover */
.date-dropdown-btn .date-box-icon {
    font-size: 14px;
    color: #059ad3;
    transition: color 0.3s ease;
}

.date-dropdown-btn:hover .date-box-icon {
    color: var(--brand-blue, #059ad3) !important;
}


/* Fix for Bootstrap line-height inherit on search forms */
.search-bar input, .search-btn { line-height: normal !important; }

/* 
  Similar Villas Card Styles
  Ayrı CSS dosyası kuralları buraya taşındı: Sadece villa detay sayfasındaki benzer villalar için.
*/

/* Benzer villalar — HTML tasarımıyla birebir tek sıra yatay carousel:
   Mobil: 1 kart görünür. Tablet (≥768px): 2 kart görünür. Masaüstü (≥1024px): 4 kart görünür.
   Tüm villalar tek sırada kalır, fazlası yatay kaydırma + yön oklarıyla gezilir (alt alta dizilmez). */
.similar-villas-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.similar-villas-grid::-webkit-scrollbar {
  display: none;
}
.similar-villas-grid .sv-card {
  scroll-snap-align: start;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  /* 2 kart görünür: (alan − 1 boşluk) / 2 */
  .similar-villas-grid {
    grid-auto-columns: calc((100% - 1.1rem) / 2);
  }
}
@media (min-width: 1024px) {
  /* 4 kart görünür: (alan − 3 boşluk) / 4 */
  .similar-villas-grid {
    grid-auto-columns: calc((100% - 3 * 1.1rem) / 4);
  }
}

/* Nav butonları mobilde de görünür — görseldeki gibi sağ/sol oklar.
   Görünürlüğü JS guncelle() içerik taşıyorsa flex yapar; mobilde tek kart
   gösterildiği için her zaman taşar ve oklar çıkar. */
@media (max-width: 767.98px) {
  .sv-nav-btn {
    width: 38px !important;
    height: 38px !important;
    top: 38% !important;
  }
  .sv-nav-btn.prev { left: 2px !important; }
  .sv-nav-btn.next { right: 2px !important; }
}

.sv-card {
  background-color: white;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
  transition: all 0.3s;
  position: relative;
}

@media (min-width: 768px) {
  .sv-card {
    border-radius: 1rem;
  }
}

.sv-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border-color: var(--secondary-color);
}

.sv-image-wrapper {
  position: relative;
  width: 100%;
  height: 220px;
  flex-shrink: 0;
  background-color: #f3f4f6;
  overflow: hidden;
}

.sv-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

.sv-card:hover .sv-img {
  transform: scale(1.05);
}

.sv-badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-items: flex-start;
}

.sv-badge {
  font-size: 0.625rem;
  font-weight: 600;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sv-badge-blue {
  background-color: var(--secondary-color);
}

.sv-badge-orange {
  background-color: var(--primary-color);
}

.sv-rating-badge {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  background-color: white;
  backdrop-filter: blur(4px);
  padding: 0.125rem 0.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-slate-800);
}

.sv-favorite-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cdd4e0; /* light gray outline by default */
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  cursor: pointer;
  z-index: 2;
  transition: all 0.2s;
}

.sv-favorite-btn:hover {
  transform: scale(1.1);
}

.sv-favorite-btn.active,
.sv-favorite-btn.active i {
  color: var(--primary-color) !important;
}
.sv-favorite-btn.active i.far {
  font-weight: 900;
}

.sv-card-content {
  padding: 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.25rem;
}

@media (min-width: 768px) {
  .sv-card-content {
    padding: 1.25rem;
  }
}

.sv-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.sv-location {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-slate-400);
  font-size: 0.600rem;
  font-weight: 500;
}

.sv-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-color);
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.25rem;
}

@media (min-width: 768px) {
  .sv-title {
    font-size: 1.2rem;
  }
}

.sv-price-box {
  text-align: right;
  flex-shrink: 0;
}

.sv-price {
  color: var(--primary-color);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
}

@media (min-width: 768px) {
  .sv-price {
    font-size: 1.2rem;
  }
}

.sv-price-label {
  font-size: 0.600rem;
  font-weight: 500;
  color: #94a3b8;
  margin-top: 0.25rem;
}

.sv-features-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-600);
  margin-top: 25px;
  margin-bottom: 2.5rem;
  padding: 0;
}

.sv-image-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
  z-index: 5;
}

.sv-image-nav-btn {
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #334155;
  font-size: 11px;
  border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  cursor: pointer;
}

@media (min-width: 768px) {
  .sv-image-nav {
    display: none;
  }
}

.sv-feature-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-slate-500);
}

.sv-feature-item i {
  color: var(--slate-400);
  font-size: 0.9rem;
}

.sv-feature-text {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-slate-700);
}

.sv-divider {
  width: 1px;
  height: 12px;
  background-color: var(--border-color);
  transform: translateY(2px);
}

.sv-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: -25px;
}

.sv-btn-calendar {
  flex: 1;
  background-color: white;
  color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
  height: 36px;
  border-radius: 0.5rem;
  font-size: 0.6600rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s;
  cursor: pointer;
}


.sv-btn-view {
  flex: 1;
  background-color: var(--secondary-color);
  color: white;
  height: 36px;
  border-radius: 0.5rem;
  font-size: 0.6600rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s;
  box-shadow: none;
  border: none;
  cursor: pointer;
}

.sv-btn-view:hover {
  background-color: #0487b9;
}

.similar-villas-title {
  text-align: center;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 2.5rem;
  letter-spacing: -0.02em;
  font-size: 30px;
}

@media (max-width: 768px) {
  .similar-villas-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }
}

/* Desktop and mobile visible */


/* --- Detail Middle Trust Badges --- */
.detail-middle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Eklenen kısım: Nesneleri merkeze hizala */
    padding: 1.5rem;
    border-top: 1px solid rgba(226,232,240,0.8);
    border-bottom: 1px solid rgba(226,232,240,0.8);
}
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 0.5rem;
}
.trust-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    width: calc(50% - 0.5rem);
}
.trust-badge-item .icon-wrapper {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.trust-badge-item .icon-wrapper.blue { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.trust-badge-item .icon-wrapper.green { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.trust-badge-item .icon-wrapper.orange { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.trust-badge-item .tb-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: normal;
}
.trust-badge-item .tb-title {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
	margin-top:5px;
}
.trust-badge-item .tb-desc {
    font-size: 11px;
    color: #64748b;
}

@media (min-width: 768px) {
    .trust-badges {
        flex-direction: column;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 1.25rem;
    }
    .trust-badge-item {
        flex-direction: row;
        text-align: left;
        width: auto;
        gap: 1rem;
    }
    .trust-badge-item .tb-text {
        align-items: flex-start;
        white-space: nowrap;
    }
    .title-wrapper {
        flex-wrap: nowrap !important;
        gap: 1rem !important;
    }
    .villa-title {
        white-space: nowrap;
    }
    .amenities-row {
        flex-wrap: nowrap !important;
        white-space: nowrap;
    }
    .detail-left {
        flex: 1 1 45% !important;
    }
    .detail-middle {
        flex: 1 1 25% !important;
        align-self: stretch;
        border-top: none;
        border-bottom: none;
        border-left: 1px solid rgba(226,232,240,0.8);
        border-right: 1px solid rgba(226,232,240,0.8);
        margin: 1.5rem 0;
        padding: 0 1rem;
    }
    .detail-right {
        flex: 0 0 30% !important;
    }
}
/* --- Calendar Section --- */
@media (min-width: 768px) {
    .calendar-section .calendar-grid {
        padding: 1.5rem 4px !important;
        gap: 1rem !important;
        position: relative;
    }
    .calendar-section .calendar-grid::after {
        content: '';
        position: absolute;
        top: 1.5rem;
        bottom: 1.5rem;
        left: 50%;
        width: 1px;
        background: rgba(203, 213, 225, 0.9);
        transform: translateX(-50%);
    }
}
.calendar-section .calendar-days,
.calendar-section .calendar-weekdays {
    gap: 4px !important;
}
/* Gerçek gecelik fiyat (varsa) gün altında gösterilir — sabit/sahte değer YOK.
   JS, müsait günlere data-fiyat ekler; yoksa hiçbir şey gösterilmez. */
/* Gecelik fiyat — tab (.calendar-section) ve modal (#takvim-govde) içinde, tüm fiyatlı günlerde.
   Datepicker popover'ında (#rezervasyon-takvim) gösterilmez. */
.calendar-section .calendar-day[data-fiyat]:not([data-fiyat=""]),
#takvim-govde .calendar-day[data-fiyat]:not([data-fiyat=""]) {
    padding-bottom: 4px;
    position: relative;
}
.calendar-section .calendar-day[data-fiyat]:not([data-fiyat=""])::after,
#takvim-govde .calendar-day[data-fiyat]:not([data-fiyat=""])::after {
    content: attr(data-fiyat);
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
    letter-spacing: 0.2px;
}
/* Çapraz (Yarım) Rezervasyon Günleri */
.calendar-day.booked-start {
    background: linear-gradient(to bottom right, white 50%, rgba(255, 219, 219, 0.8) 50%) !important;
    color: #1e293b !important;
}
.calendar-day.booked-end {
    background: linear-gradient(to bottom right, rgba(255, 219, 219, 0.8) 50%, white 50%) !important;
    color: #1e293b !important;
}

/* Calendar Legend Styles */
.availability-legend {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.legend-box {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(203, 213, 225, 0.8);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.legend-box.available {
    background-color: white !important;
}
.legend-box.booked {
    background-color: rgba(255, 219, 219, 0.8);
    border-color: rgba(255, 200, 200, 0.8);
}
.legend-box.booked-half {
    background: linear-gradient(to bottom right, white 50%, rgba(255, 219, 219, 0.8) 50%);
}
.legend-text {
    font-size: 12px;
    color: #475569;
    font-weight: 500;
}

.calendar-header-top {
    margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
    .calendar-header-top {
        margin-bottom: 17px;
    }
}
@media (max-width: 768px) {
    .calendar-section {
        display: flex;
        flex-direction: column;
    }
    .calendar-section .calendar-header-top {
        display: contents !important;
    }
    .calendar-section .panel-title {
        order: 1;
        margin-bottom: 1.25rem !important;
    }
    /* Entegre versiyonda takvim '#takvim-render' içine basılır ve legend '.takvim-legend' sınıfını kullanır;
       HTML'deki '.calendar-grid'/'.availability-legend' sınıfları yerine bunları da hedefle ki
       başlık üstte, takvim ortada, legend altta sıralansın (başlık dibe düşmesin). */
    .calendar-section .calendar-grid,
    .calendar-section #takvim-render {
        order: 2;
    }
    .calendar-section .availability-legend,
    .calendar-section .takvim-legend {
        order: 3;
        width: 100% !important;
        margin-top: 15px !important;
        justify-content: space-between !important;
    }
}

/* Villa Categories Header - Premium */
.villa-categories-header {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 16px 24px;
    border-radius: 12px;
    margin-bottom: 30px;
    gap: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0,0,0,0.03);
    border: 1px solid rgba(226, 232, 240, 0.8);
    position: relative;
    overflow: hidden;
}

.villa-categories-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: linear-gradient(to bottom, #2563eb, #3b82f6);
}

.villa-categories-header .vc-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.villa-categories-header .vc-title::before {
    content: '\f02b';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #3b82f6;
    font-size: 1.1rem;
}

.villa-categories-header .vc-list {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.villa-categories-header .vc-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 8px 18px;
    border-radius: 30px;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.villa-categories-header .vc-item:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .villa-categories-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 16px;
    }
    
    .villa-categories-header .vc-list {
        width: 100%;
    }
    
    .villa-categories-header .vc-item {
        flex: 1 1 auto;
        text-align: center;
    }
}


/* Isıtmalı Havuz Fiyat ve Info Tooltip */
.pool-heated-price {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff8f1;
    color: #ea580c;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    border: 1px solid #fed7aa;
}

/* "Isıtmalı" satırının değer hücresi: değer metni + günlük ücret rozeti yan yana, sağda hizalı */
.spec-value-heated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    text-align: right;
}

.info-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}

.info-icon-trigger {
    color: #ea580c;
    font-size: 13px;
    transition: color 0.2s;
}

.info-icon-wrapper:hover .info-icon-trigger {
    color: #c2410c;
}

.info-tooltip {
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    pointer-events: none;
}

.info-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

.info-icon-wrapper:hover .info-tooltip {
    opacity: 1;
    visibility: visible;
    bottom: 170%; /* Hover olunca hafif yukarı kayar */
}

/* TÜRSAB Modal */
.tursab-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tursab-modal.active {
    opacity: 1;
    visibility: visible;
}

.tursab-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.tursab-modal-content {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    width: 90%;
    max-width: 615px;
    position: relative;
    z-index: 10000;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    text-align: justify;
}

.tursab-modal.active .tursab-modal-content {
    transform: translateY(0);
}

.tursab-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #f1f3f5;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #495057;
    transition: all 0.2s ease;
}

.tursab-modal-close:hover {
    background: #e9ecef;
    color: #212529;
}

.tursab-modal-header {
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
}

.tursab-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tursab-modal-logo {
    height: 60px;
    margin-bottom: 15px;
    object-fit: contain;
}

.tursab-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 10px;
}

.tursab-modal-desc {
    font-size: 0.95rem;
    color: #495057;
    line-height: 1.6;
    margin-bottom: 25px;
    text-align: center; /* Mobilde ortalı */
}

@media (min-width: 768px) {
    .tursab-modal-desc {
        text-align: justify; /* Masaüstünde iki yana yaslı */
    }
}

.tursab-verify-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #059ad3;
    color: white;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .tursab-verify-btn {
        font-size: 0.9rem;
        padding: 12px 10px;
    }
}

.tursab-verify-btn:hover {
    background-color: #0482b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(5, 154, 211, 0.3);
}

.tursab-verify-btn svg {
    width: 18px;
    height: 18px;
}

/* ============================================
   Legacy iç sayfalar – yeni tema uyum katmanı
   (talep-son, odeme-son, odeme-basarisiz, odeme-sonuc, online-odeme)
   ============================================ */
.ic-govde .container > .row{display:flex;flex-wrap:wrap;margin:0 -0.5rem;}
.ic-govde .container > .row > [class*="col-"]{padding:0 0.5rem;width:100%;}
.post-details.text-center{text-align:center;background:#fff;border:1px solid var(--border-color,#e2e8f0);border-radius:1rem;box-shadow:0 1px 3px rgba(0,0,0,.04);padding:3rem 2rem;max-width:640px;margin:0 auto;color:#475569;line-height:1.7;}
.post-details.text-center h1{margin:0 0 1.1rem;line-height:1;}
.post-details.text-center h1 i{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;font-size:2.4rem;background:#dcfce7;color:#16a34a;}
.post-details.text-center h1 i.fa-times,.post-details.text-center h1 i.fa-xmark,.post-details.text-center h1 i.fa-circle-xmark{background:#fee2e2;color:#dc2626;}
.post-details.text-center h2{color:#1e293b;font-family:'Outfit',sans-serif;font-weight:700;font-size:1.4rem;margin:0 0 .75rem;}

/* similar-villas-grid slider kuralları yukarıda (~satır 12898) tanımlı */

/* ============ Müsaitlik Takvimi (vdTakvimCiz çıktısı) ============ */
/* Ödeme bekleyen gün (sarı) */
.calendar-day.calendar-day-pending{ background:#fef9c3!important;color:#a16207!important;border-color:#fde68a!important;cursor:not-allowed; }
/* NOT: selected-start/end/in-range KURALLARI KALDIRILDI — template'in kendi kuralları
   (style.css ~1458) geçerli olsun (beyaz uç + turuncu tint), datepicker birebir eşleşsin. */
/* Nav okları tıklanabilir */
.calendar-nav{ cursor:pointer; }
.calendar-nav.nav-disabled{ opacity:.3;pointer-events:none; }
/* takvim-render içindeki calendar-grid kutu görünümü (tab paneli) */
#takvim-render .calendar-grid{
    background:white;
    border:1px solid rgba(203,213,225,0.9);
    border-radius:14px;
    padding:1.25rem;
    box-shadow:0 1px 2px rgba(0,0,0,0.03);
}
#takvim-render .calendar-card{ background:transparent;border:none;padding:0;box-shadow:none; }

/* ============ Favori butonu aktif durumu (kalp dolu) ============ */
/* Lucide, <i data-lucide> etiketini <svg> ile değiştirir — SVG'ye göre hedefle */
.like-btn.active svg,.vl-fav-btn.active svg{ fill:var(--primary-color,#059ad3)!important;color:var(--primary-color,#059ad3)!important;stroke:var(--primary-color,#059ad3)!important; }
/* FA icon (far fa-heart → fas fa-heart) aktif renk */
.like-btn.active i,.vl-fav-btn.active i{ color:var(--primary-color,#059ad3)!important; }
.sv-favorite-btn.active i,.sv-favorite-btn.active svg{ color:#ef4444!important;fill:#ef4444!important;stroke:#ef4444!important; }
/* Ana villa kalp butonu */
.btn-icon[aria-label="Favorilere ekle"].active i,.btn-icon[aria-label="Favorilere ekle"].active svg{ color:#ef4444!important;fill:#ef4444!important;stroke:#ef4444!important; }

/* pool-not-available zaten style.css içinde tanımlı (satır ~10958) */
.post-details.text-center h3{color:var(--primary-color,#059ad3);font-size:1rem;font-weight:600;margin:.5rem 0 0;}

/* ============ MOBİL DÜZELTMELER ============ */

/* Villalarimiz filtre takvim popover — mobilde de giriş kutusunun hemen altında açılsın
   (önceden ekranın en dibine sabitleniyordu; kullanıcı "takvim çok aşağıda" diye bildirdi). */
@media(max-width:640px){
  .vl-cal-pop{ position:absolute!important;left:0!important;right:0!important;top:calc(100% + 8px)!important;bottom:auto!important;border-radius:1rem;z-index:1000; }
}

/* Kısa süreli kiralama mobil */
@media(max-width:640px){
  .ks-grid{ grid-template-columns:1fr!important; }
}

/* Lightbox thumbnail şeridi mobilde daha küçük */
@media(max-width:640px){
  #vd-lb-thumbs img{ width:48px!important;height:34px!important; }
  #vd-lightbox-img{ max-width:96vw!important;max-height:60vh!important; }
  #vd-lb-prev,#vd-lb-next{ width:36px!important;height:36px!important;left:8px!important; }
  #vd-lb-next{ right:8px!important;left:auto!important; }
}

/* Havuz kartları mobilde tek sütun */
@media(max-width:640px){
  .pools-grid{ grid-template-columns:1fr!important; }
}

/* Villa listeleme favori butonu (lucide SVG) dokunma alanını büyüt */
@media(max-width:768px){
  .like-btn,.vl-fav-btn{ width:2.25rem!important;height:2.25rem!important; }
}

/* URL filtre ile gelen GET parametrelerinde temizle butonu koruması */
.btn-secondary{ flex-shrink:0; }

/* Price breakdown (sonuc satiri) mobilde taşmasın */
@media(max-width:400px){
  .yeni-rezervasyon-sonuc .sonuc-satir{ flex-wrap:wrap;gap:0.2rem; }
  .yeni-rezervasyon-sonuc .satir-sonuc{ font-size:0.82rem; }
}

/* =====================================================================
   İZOLE DATEPICKER (rezervasyon kutusu popover) — htmltemam/style.css
   birebir kopya, dp- prefixli sınıflar. Diğer takvimlerle (tab/modal/
   liste) HİÇBİR sınıf paylaşmaz → CSS çakışması imkansız.
   Kaynak satırlar: template .calendar-* (1390-1479, 1486-1517, 13174-13181)
   ===================================================================== */
.dp-cal{ display:grid; grid-template-columns:1fr; }
.dp-card{ display:flex; flex-direction:column; gap:1rem; box-shadow:none; border:none; padding:0; background:transparent; }
.dp-head{
  display:flex; align-items:center; justify-content:center;
  position:relative; height:36px; padding:0 10px; margin:0;
}
.dp-month{ font-size:13px; font-weight:700; color:#1e293b; z-index:1; }
.dp-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  /* display:flex!important — Font Awesome'un .fas{display:inline-block} kuralı tema CSS'inden
     sonra yüklendiği için flex'i ezip oku sola/yukarı kaydırıyordu; !important ile oku ortalıyoruz. */
  display:flex!important; align-items:center; justify-content:center;
  line-height:1; text-align:center;
  width:30px; height:30px; border-radius:50%;
  transition:all 0.2s ease;
  background:#ffffff; border:1px solid #f1f5f9; color:#64748b;
  cursor:pointer; box-shadow:0 2px 5px rgba(0,0,0,0.05);
  z-index:2; font-size:0.8rem;
}
.dp-nav.dp-nav-prev{ left:5px; }
.dp-nav.dp-nav-next{ right:5px; }
.dp-nav:hover{ background:#f8fafc; color:var(--primary,#faa819); transform:translateY(-50%) scale(1.05); }
.dp-nav.nav-disabled{ opacity:.3; pointer-events:none; }
.dp-wdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:0.5rem; }
.dp-wday{ text-align:center; font-size:0.65rem; font-weight:800; color:#94a3b8; text-transform:uppercase; }
.dp-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:0.4rem; }
.dp-day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:0.85rem; font-weight:600; border-radius:8px;
  cursor:pointer; transition:all 0.2s; color:#334155; border:1px solid #e2e8f0;
  background:#fff; position:relative; padding:0;
}
.dp-day:hover{ background:#f8fafc; color:#334155; border-color:#e2e8f0; }
.dp-day.empty{ border:none; cursor:default; background:transparent; }
.dp-day.available{ background:#fff; color:#334155; }
.dp-day.booked{ background:rgb(255 219 219 / 80%); color:#1e293b; border-color:#e2e8f0; cursor:not-allowed; }
.dp-day.booked-start{ background:linear-gradient(to bottom right, #fff 50%, rgba(255,219,219,0.8) 50%)!important; color:#1e293b!important; }
.dp-day.booked-end{ background:linear-gradient(to bottom right, rgba(255,219,219,0.8) 50%, #fff 50%)!important; color:#1e293b!important; }
/* Yarım günler gerçekte seçilebilir (biri çıkış/diğeri giriş) — imleç "yapılamaz"
   yerine "tıklanabilir" göstersin (item 4). */
.dp-day.is-selectable, .calendar-day.is-selectable{ cursor:pointer!important; }
.dp-day.booked.is-selectable:hover, .calendar-day.booked.is-selectable:hover{ filter:brightness(0.97); }
.dp-pending{ background:#fef9c3!important; color:#a16207!important; border-color:#fde68a!important; cursor:not-allowed; }
/* Seçili aralık renklendirmesi (hem masaüstü hem mobil):
   - Giriş/çıkış uçları = logo turuncusu (#faa819) dolu, beyaz yazı, belirgin.
   - Aradaki günler = açık logo mavisi (#059ad3 tint).
   Uçların dış köşeleri yuvarlak, iç köşeleri düz → giriş→çıkış tek bütün bant okunur. */
.dp-day.selected-start,
.dp-day.selected-end{ background:var(--primary,#faa819)!important; color:#fff!important; border:1px solid var(--primary,#faa819)!important; font-weight:800; box-shadow:0 4px 10px -3px rgba(250,168,25,0.55); z-index:2; }
.dp-day.selected-start{ border-top-right-radius:0; border-bottom-right-radius:0; }
.dp-day.selected-end{ border-top-left-radius:0; border-bottom-left-radius:0; }
.dp-day.in-range{ background:rgba(5,154,211,0.14)!important; border-radius:0; border-color:transparent!important; color:#075985; font-weight:700; }

/* === Gerçek logo görselleri (header & footer) === */
.logo .brand-logo-img{ height:46px; width:auto; display:block; }
.navbar.scrolled .logo .brand-logo-img{ height:42px; }
.footer-brand .brand-logo-wrap{ display:flex; align-items:center; }
.footer-brand .footer-brand-logo-img{ height:46px; width:auto; display:block; }
@media (max-width: 768px){
  .logo .brand-logo-img{ height:38px; }
  .footer-brand .footer-brand-logo-img{ height:42px; }
}

/* === "Şu an X kişi görüntülüyor" bildirimi (profesyonel kart) === */
.vd-viewing-badge{
  /* Sağ alt köşe WhatsApp + yukarı-çık + (varsa) canlı destek ile çakışıyordu;
     sola alındı (item 2). */
  position:fixed; left:22px; right:auto; bottom:22px; z-index:9985;
  display:inline-flex; align-items:center; gap:12px;
  background:#fff; border:1px solid #eef2f7; border-radius:16px;
  padding:12px 16px 12px 13px; box-shadow:0 18px 40px -12px rgba(15,23,42,0.28);
  color:#1e293b; max-width:330px;
  opacity:0; transform:translateY(18px) scale(.96); pointer-events:none;
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.vd-viewing-badge.vvb-show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.vd-viewing-badge.vvb-hidden{ opacity:0!important; transform:translateY(18px) scale(.96)!important; pointer-events:none!important; }
.vd-viewing-badge .vvb-icon{
  position:relative; flex-shrink:0; width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#ecfdf5,#d1fae5); color:#059669; font-size:16px;
}
.vd-viewing-badge .vvb-icon .vvb-dot{
  position:absolute; top:-2px; right:-2px; width:11px; height:11px; border-radius:50%;
  background:#22c55e; border:2px solid #fff;
}
.vd-viewing-badge .vvb-icon .vvb-dot::after{
  content:""; position:absolute; inset:-2px; border-radius:50%; background:#22c55e; opacity:.6;
  animation:vvbPulse 1.8s ease-out infinite;
}
@keyframes vvbPulse{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(2.4); opacity:0; } }
.vd-viewing-badge .vvb-text{ line-height:1.35; font-size:13px; color:#64748b; }
.vd-viewing-badge .vvb-text strong{ display:block; color:#0f172a; font-weight:800; font-size:13.5px; }
.vd-viewing-badge .vvb-close{ align-self:flex-start; background:none; border:none; color:#cbd5e1; font-size:17px; line-height:1; cursor:pointer; padding:0 0 0 2px; flex-shrink:0; }
.vd-viewing-badge .vvb-close:hover{ color:#64748b; }
@media (max-width: 768px){
  .vd-viewing-badge{ left:12px; right:auto; bottom:84px; max-width:240px; padding:10px 12px; }
  .vd-viewing-badge .vvb-text{ font-size:12px; }
}

/* Lightbox (tam ekran galeri) açıkken yüzen öğeler gizlensin — fotoğrafın üstüne
   binip kaydırmayı engellemesinler (item 3). */
body.vd-lb-open .float-whatsapp,
body.vd-lb-open .float-top,
body.vd-lb-open .vd-viewing-badge,
body.vd-lb-open .floating-mobile-dock{ display:none !important; }

/* === 5 parçalı galeri (1 büyük + 2x2 dört küçük) === */
.gallery-section.gallery-5 .gallery-side-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:8px;
}
.gallery-section.gallery-5 .gallery-side{ flex:none; min-height:0; }
.gallery-section.gallery-5 .gallery-side img{ width:100%; height:100%; object-fit:cover; }
/* Küçük hücrede "Tümünü Gör" — ikon üstte, metin altta, taşmasız */
.gallery-section.gallery-5 .gallery-view-all{
  flex-direction:column; gap:5px; text-align:center; line-height:1.25;
  font-size:10px; letter-spacing:0.04em; padding:8px; backdrop-filter:blur(1px);
}
.gallery-section.gallery-5 .gallery-view-all i{ font-size:17px; margin:0; }
.gallery-section.gallery-5 .gallery-view-all .me-2{ margin-right:0; }
@media (min-width:768px){
  .gallery-section.gallery-5 .gallery-view-all{ font-size:11px; }
  .gallery-section.gallery-5 .gallery-view-all i{ font-size:19px; }
}
/* Masaüstü: yan ızgara iki satırı da kaplasın (büyük görselle aynı yükseklik) */
@media (min-width: 768px){
  .gallery-section.gallery-5 .gallery-side-wrap{ grid-row:1 / -1; }
}
/* Mobil: HTML tasarımı gibi → 1 büyük görsel üstte (16/10), altında yan yana 2 küçük (16/6).
   5'li galeride 4 küçük yerine yalnızca 1. ve 4. (Tümünü Gör'lü) küçük gösterilir; 2. ve 3. gizlenir. */
@media (max-width: 767.98px){
  .gallery-section.gallery-5 .gallery-side-wrap{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
    aspect-ratio:16/6;
    gap:6px;
  }
  .gallery-section.gallery-5 .gallery-side:nth-child(2),
  .gallery-section.gallery-5 .gallery-side:nth-child(3){ display:none; }
}

/* Sağ sidebar Instagram bloğu mobilde gizli (müşteri talebi) */
@media (max-width: 768px){
  .right-sidebar .rs-instagram-block{ display:none !important; }
}

/* Villalarımız: mobilde sayfanın en altında stack olan KURUMSAL sağ sidebar kaldırıldı (müşteri talebi).
   Masaüstünde (≥1024px) sağ kolon olarak görünmeye devam eder. */
@media (max-width: 1023px){
  .right-sidebar{ display:none !important; }
}

/* Giriş seçilince takvimin kısa "gidip gelme" animasyonu (item 9) */
@keyframes calFlash{ 0%{opacity:1;} 35%{opacity:0.12;transform:scale(0.985);} 100%{opacity:1;transform:scale(1);} }
.calendar-grid.cal-flash, .vl-cal-pop.cal-flash{ animation:calFlash .34s ease; }

/* === Anasayfa arama takvimi: villa detay rezervasyon takvimi (dp-*) ile aynı kompakt görünüm === */
.date-selector-panel .calendar-card{ gap:0.85rem; }
.date-selector-panel .calendar-weekdays{ gap:0.4rem; margin:0; }
.date-selector-panel .calendar-days{ gap:0.4rem; }
.date-selector-panel .calendar-day{ border-radius:8px; font-size:0.85rem; font-weight:600; }
.date-selector-panel .calendar-weekday{ font-size:0.65rem; padding-bottom:0; }

/* Takvim Musait (Available) Kutusu Beyaz Yapma Garantisi */
.takvim-legend .legend-item:first-child .legend-box,
.availability-legend .legend-item:first-child .legend-box,
.calendar-legend .legend-item:first-child .legend-box,
.legend-box.bg-emerald-soft,
.legend-box.musait {
    background: white !important;
    background-color: white !important;
}


/* --- KESIN VE NIHAI MUSAIT BEYAZLATMA STRATEJISI --- */
.legend-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
}
.legend-box.booked, .legend-booked {
    background: rgba(254, 202, 202, 0.8) !important;
    background-color: rgba(254, 202, 202, 0.8) !important;
}
.legend-box.booked-half, .legend-checkin {
    background: linear-gradient(to bottom right, rgba(255, 219, 219, 0.8) 50%, white 50%) !important;
}
.legend-box.pending, .legend-box.payment-pending, .legend-pending {
    background: rgba(253, 230, 138, 0.9) !important;
    background-color: rgba(253, 230, 138, 0.9) !important;
}