.wizard-summary-meta {
    margin-left: 6px;
    font-size: 12px;
    color: rgba(229, 236, 245, 0.9);
}

.reservation-wizard--page .wizard-summary-meta {
    color: #4a5568;
    font-weight: 500;
}

.reservation-wizard--inline .wizard-summary-meta {
    color: rgba(229, 236, 245, 0.95);
    font-weight: 500;
}
/* CSS Variables for Theming */
:root {
  color-scheme: light;
  --primary-color: #1a4d7a;
  --secondary-color: #1b5e20;
  --accent-orange: #ff6b35;
  --accent-green: #34d399;
  --accent-green-dark: #059669;
  --text-primary: #1f2937;
  --text-secondary: #4b5563;
  --text-light: #6b7280;
  --text-muted: #94a3b8;
  --surface-primary: #ffffff;
  --surface-secondary: #f8f9fa;
  --surface-tertiary: #e9ecef;
  --surface-soft: #f8fbff;
  --surface-muted: #f5f5f5;
  --surface-neutral: #f0f0f0;
  --surface-highlight: #edf3fb;
  --surface-info: #f1f6ff;
  --surface-warm: #fef3eb;
  --status-amber: #fef3c7;
  --status-green: #d1fae5;
  --status-rose: #fee2e2;
  --status-blue: #dbeafe;
  --bg-primary: var(--surface-primary);
  --bg-secondary: var(--surface-secondary);
  --bg-tertiary: var(--surface-tertiary);
  --border-color: #dee2e6;
  --border-subtle: #e5e9f0;
  --border-strong: #bac4d2;
  --shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-hover: 0 10px 24px rgba(15, 23, 42, 0.12);
  --shadow-soft: 0 2px 12px rgba(15, 23, 42, 0.05);
  --primary-hover: #1d4ed8;
  --blog-accent: #5aa6ff;
  --blog-accent-dark: #082133;
  --blog-surface: #142335;
  --blog-heading: #e6f1ff;
  --blog-muted: rgba(203, 229, 255, 0.72);
  --blog-green: var(--blog-accent);
  --blog-green-dark: var(--blog-accent-dark);
  --blog-cream: var(--blog-surface);
  --blog-navy: var(--blog-heading);
  --on-primary: #ffffff;
  --on-secondary: #ffffff;
  --on-surface: var(--text-primary);
  --overlay-backdrop: rgba(15, 23, 42, 0.6);
}

/* Dark Mode Variables */
[data-theme="dark"] {
  color-scheme: dark;
  --primary-color: #2563eb;
  --secondary-color: #16a34a;
  --accent-orange: #ff8b5c;
  --accent-green: #34d399;
  --accent-green-dark: #22c55e;
  --text-primary: #e2e8f0;
  --text-secondary: #cbd5f5;
  --text-light: #9aa6c2;
  --text-muted: #7b8ea3;
  --surface-primary: #0f172a;
  --surface-secondary: #16213b;
  --surface-tertiary: #1f2a44;
  --surface-soft: #1a243a;
  --surface-muted: #202d44;
  --surface-neutral: #25324a;
  --surface-highlight: #1c2b45;
  --surface-info: #1a365d;
  --surface-warm: #3b2f1f;
  --status-amber: rgba(251, 191, 36, 0.22);
  --status-green: rgba(34, 197, 94, 0.22);
  --status-rose: rgba(244, 63, 94, 0.24);
  --status-blue: rgba(59, 130, 246, 0.22);
  --bg-primary: var(--surface-primary);
  --bg-secondary: var(--surface-secondary);
  --bg-tertiary: var(--surface-tertiary);
  --border-color: #2b3b55;
  --border-subtle: #1f2c44;
  --border-strong: #3f4d63;
  --shadow: 0 12px 28px rgba(2, 6, 23, 0.6);
  --shadow-hover: 0 18px 36px rgba(2, 6, 23, 0.7);
  --shadow-soft: 0 8px 20px rgba(2, 6, 23, 0.4);
  --primary-hover: #1d4ed8;
  --blog-accent: #5aa6ff;
  --blog-accent-dark: #4c8dff;
  --blog-surface: #0b1221;
  --blog-heading: #dbeafe;
  --blog-muted: rgba(148, 179, 216, 0.78);
  --blog-green: var(--blog-accent);
  --blog-green-dark: var(--blog-accent-dark);
  --blog-cream: var(--blog-surface);
  --blog-navy: var(--blog-heading);
  --on-primary: #f8fafc;
  --on-secondary: #f8fafc;
  --on-surface: var(--text-primary);
  --overlay-backdrop: rgba(2, 6, 23, 0.72);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.menu-open {
    overflow-y: hidden;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 50px;
}

@media (max-width: 1200px) {
    .container {
        padding: 0 32px;
    }
}

@media (max-width: 992px) {
    .container {
        padding: 0 26px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }
}

@media (max-width: 576px) {
    .container {
        padding: 0 18px;
    }
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Top Bar */
.top-bar {
    background-color: var(--primary-color);
    padding: 12px 0;
    color: var(--on-primary);
    position: sticky;
    top: 0;
    z-index: 1802;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: auto;
    min-height: 50px;
    position: relative;
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1801;
    position: relative;
}

.mobile-menu-toggle span {
    width: 100%;
    height: 3px;
    background-color: var(--on-primary);
    border-radius: 3px;
    transition: all 0.3s ease;
    transform-origin: center;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px);
}

.top-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.top-nav .mobile-menu-logo {
    display: none;
}

.top-nav > a,
.top-nav > .nav-item {
    display: flex;
    align-items: center;
}

.top-nav .nav-item {
    position: relative;
}

.top-nav a {
    color: var(--on-primary);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    white-space: nowrap;
    letter-spacing: 0.2px;
    line-height: 1.4;
    padding: 10px 18px;
    border-radius: 999px;
    background: transparent;
}

.top-nav a:hover,
.top-nav a:focus-visible {
    color: var(--on-primary);
    background: var(--secondary-color);
    transform: translateY(-2px);
}

/* Aktif menü öğesi stili */
.top-nav a.active,
.top-nav .nav-item.current > .has-dropdown {
    color: var(--on-primary);
    background: var(--secondary-color);
    box-shadow: 0 10px 20px rgba(15, 81, 50, 0.35);
    font-weight: 600;
}

.top-nav .dropdown-menu a.active {
    background-color: var(--secondary-color);
    color: var(--on-secondary);
    font-weight: 500;
}

.top-nav .dropdown:hover > .has-dropdown,
.top-nav .dropdown:focus-within > .has-dropdown {
    color: var(--on-primary);
    background: var(--secondary-color);
    box-shadow: 0 10px 20px rgba(15, 81, 50, 0.35);
}

.top-nav .has-dropdown {
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
    cursor: pointer;
}

.top-nav .has-dropdown i {
    color: inherit;
    font-size: 11px;
    transition: color 0.3s, transform 0.3s;
}

.top-nav .has-dropdown:hover i,
.top-nav .dropdown:hover .has-dropdown i,
.top-nav .dropdown:hover > .has-dropdown i,
.top-nav .dropdown:focus-within > .has-dropdown i {
    color: #ffffff;
}

.top-nav .dropdown {
    position: relative;
}

.top-nav .dropdown:hover .has-dropdown i {
    transform: rotate(180deg);
}

.top-nav .dropdown-menu {
    list-style: none;
    position: absolute;
    top: calc(100% + 20px);
    left: 0;
    background: var(--surface-primary);
    min-width: 220px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 12px 0;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    z-index: 1001;
    pointer-events: none;
}

.top-nav .dropdown-menu li {
    margin: 0;
    padding: 0;
}

/* Add invisible bridge between dropdown trigger and menu to prevent gap */
.top-nav .dropdown::before {
    content: '';
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    height: 20px;
    background: transparent;
    z-index: 1002;
    pointer-events: auto;
    opacity: 1;
}

.top-nav .dropdown.active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.top-nav .dropdown.active::before {
    opacity: 1;
    pointer-events: auto;
}

.top-nav .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.top-nav .dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: #1a4d7a;
    font-size: 14px;
    font-weight: 400;
    transition: background-color 0.3s, color 0.3s;
    white-space: nowrap;
}

.top-nav .dropdown-menu a:hover {
    background-color: var(--surface-secondary);
    color: #1b5e20;
}

@media (max-width: 992px) {
    .top-bar-content {
        gap: 16px;
    }

    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
    }

    body.menu-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.85);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 1798;
        transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 0.35s ease;
    }

    .top-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0;
        background: linear-gradient(180deg, rgba(26, 77, 122, 0.98) 0%, rgba(15, 47, 84, 0.98) 100%);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        overflow-y: auto;
        overflow-x: hidden;
        transform: translateX(-100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, visibility 0.35s ease;
        z-index: 1800;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }

    .top-nav::-webkit-scrollbar {
        width: 6px;
    }

    .top-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .top-nav::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
    }

    .top-nav::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    .top-nav.active {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Mobile menu logo container */
    .top-nav .mobile-menu-logo {
        display: flex;
        align-items: center;
        padding: 20px 24px;
        min-height: 70px;
        flex-shrink: 0;
        background: rgba(15, 47, 84, 0.6);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .top-nav .mobile-menu-logo a {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        color: inherit;
        padding: 0;
        border: none;
        background: transparent;
        border-radius: 0;
    }

    .top-nav .mobile-menu-logo a:hover {
        transform: none;
        background: transparent;
    }

    .top-nav .mobile-menu-logo .logo-img {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .top-nav .mobile-menu-logo .logo-text-group {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }

    .top-nav .mobile-menu-logo .logo-text {
        display: block;
        font-size: 18px;
        font-weight: 700;
        color: white;
        letter-spacing: 3px;
        line-height: 1.2;
        font-family: 'Oswald', sans-serif;
        font-style: normal;
        text-transform: uppercase;
    }

    .top-nav .mobile-menu-logo .logo-subtext {
        display: block;
        font-size: 10px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.8);
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-top: 2px;
    }

    .top-nav > a,
    .top-nav > .nav-item {
        width: 100%;
        padding: 0;
        margin: 0;
        border-bottom: none;
        position: relative;
        overflow: visible;
    }

    .top-nav a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 24px;
        font-size: 16px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.95);
        background: transparent;
        border-radius: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .top-nav a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 0;
        background: rgba(255, 255, 255, 0.1);
        transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 0;
    }

    .top-nav a > * {
        position: relative;
        z-index: 1;
    }

    .top-nav a:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.05);
        transform: translateX(4px);
    }

    .top-nav a:hover::before {
        width: 100%;
    }

    .top-nav a:active {
        transform: translateX(2px);
    }

    .top-nav .dropdown {
        position: relative;
        overflow: visible;
    }

    .top-nav .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 0;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        background: rgba(10, 30, 60, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 1000;
        max-height: 70vh;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }

    .top-nav .dropdown-menu::-webkit-scrollbar {
        width: 6px;
    }

    .top-nav .dropdown-menu::-webkit-scrollbar-track {
        background: transparent;
    }

    .top-nav .dropdown-menu::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
    }

    .top-nav .dropdown-menu::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    .top-nav .dropdown.active .dropdown-menu {
        display: block;
        animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    .top-nav .dropdown-menu li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .top-nav .dropdown-menu li:last-child {
        border-bottom: none;
    }

    .top-nav .dropdown-menu a {
        color: rgba(255, 255, 255, 0.85);
        padding: 14px 24px 14px 48px;
        font-size: 15px;
        font-weight: 400;
        white-space: normal;
        background: transparent;
        border-radius: 0;
        position: relative;
    }

    .top-nav .dropdown-menu a::before {
        content: '\f105';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        left: 24px;
        opacity: 0.6;
        transition: all 0.2s ease;
        font-size: 12px;
        margin-top: 17px;
    }

    .top-nav .dropdown-menu a:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
        padding-left: 52px;
    }

    .top-nav .dropdown-menu a:hover::before {
        opacity: 1;
        transform: translateX(4px);
    }

    /* Mobile aktif menü stili */
    .top-nav a.active,
    .top-nav .nav-item.current > .has-dropdown {
        background: linear-gradient(90deg, rgba(15, 81, 50, 0.3) 0%, rgba(15, 81, 50, 0.15) 100%);
        color: #ffffff;
        font-weight: 600;
        border-left: 4px solid #0f5132;
        padding-left: 20px;
    }

    .top-nav a.active::before {
        background: rgba(15, 81, 50, 0.2);
        width: 100%;
    }

    .top-nav .dropdown-menu a.active {
        background: rgba(15, 81, 50, 0.25);
        color: #ffffff;
        font-weight: 500;
        border-left: 4px solid #0f5132;
        padding-left: 44px;
    }

    .top-nav .dropdown-menu a.active::before {
        opacity: 1;
        color: rgba(15, 81, 50, 0.9);
    }

    [data-theme="dark"] .top-nav {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 15, 28, 0.98) 100%);
    }

    [data-theme="dark"] .top-nav a {
        background: transparent;
        color: rgba(226, 232, 240, 0.95);
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    [data-theme="dark"] .top-nav a:hover,
    [data-theme="dark"] .top-nav a:focus-visible {
        background: rgba(37, 99, 235, 0.15);
        color: #ffffff;
    }

    [data-theme="dark"] .top-nav .dropdown-menu {
        background: rgba(8, 15, 28, 0.8);
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    [data-theme="dark"] .top-nav .dropdown-menu a {
        color: rgba(203, 213, 245, 0.85);
        background: transparent;
    }

    [data-theme="dark"] .top-nav .dropdown-menu a:hover {
        background: rgba(37, 99, 235, 0.2);
        color: var(--accent-green);
    }

    [data-theme="dark"] .top-nav a.active,
    [data-theme="dark"] .top-nav .nav-item.current > .has-dropdown,
    [data-theme="dark"] .top-nav .dropdown-menu a.active {
        background: linear-gradient(90deg, rgba(37, 99, 235, 0.3) 0%, rgba(37, 99, 235, 0.15) 100%);
        border-left-color: #2563eb;
        color: #ffffff;
    }

    [data-theme="dark"] .top-nav .dropdown.active > .has-dropdown {
        background: rgba(37, 99, 235, 0.15);
    }

    [data-theme="dark"] .top-nav .dropdown.active > .has-dropdown::before {
        background: linear-gradient(180deg, rgba(37, 99, 235, 0.9) 0%, rgba(37, 99, 235, 0.5) 100%);
    }

    [data-theme="dark"] .top-nav .dropdown.active > .has-dropdown i {
        background: rgba(37, 99, 235, 0.4);
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    }

    [data-theme="dark"] .top-nav .dropdown.active > .has-dropdown:hover i {
        background: rgba(37, 99, 235, 0.5);
    }

    .top-nav .has-dropdown {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        position: relative;
    }

    .top-nav .has-dropdown i {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 12px;
        opacity: 0.6;
        margin-left: 12px;
        color: rgba(255, 255, 255, 0.8);
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.05);
        flex-shrink: 0;
        line-height: 1;
    }

    .top-nav .has-dropdown:hover i {
        opacity: 1;
        background: rgba(255, 255, 255, 0.1);
        transform: scale(1.1);
    }

    .top-nav .dropdown.active > .has-dropdown {
        background: rgba(255, 255, 255, 0.12);
        padding-left: 21px;
    }

    .top-nav .dropdown.active > .has-dropdown::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(180deg, rgba(15, 81, 50, 0.9) 0%, rgba(15, 81, 50, 0.5) 100%);
        z-index: 1;
    }

    .top-nav .dropdown.active > .has-dropdown i {
        transform: rotate(180deg);
        opacity: 1;
        background: rgba(15, 81, 50, 0.3);
        color: #ffffff;
        box-shadow: 0 2px 8px rgba(15, 81, 50, 0.3);
    }

    .top-nav .dropdown.active > .has-dropdown:hover i {
        background: rgba(15, 81, 50, 0.4);
        transform: rotate(180deg) scale(1.1);
    }

    /* Rezervasyon butonu özel stil */
    .top-nav .header-reservation {
        margin: 16px 24px 24px;
        padding: 0;
        width: auto;
    }

    .top-nav .header-reservation-toggle {
        width: 100%;
        padding: 16px 24px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(15, 81, 50, 0.4);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .top-nav .header-reservation-toggle:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(15, 81, 50, 0.5);
    }

    .top-nav .header-reservation-toggle:active {
        transform: translateY(0);
    }
}

.top-nav a.login-btn {
    background-color: #4a90e2;
    color: white;
    padding: 8px 22px;
    border-radius: 50px;
    font-weight: 400;
    font-size: 14px;
    transition: background-color 0.3s;
    text-align: center;
}

.top-nav a.login-btn:hover {
    background-color: #3a7bc8;
    color: white;
}

.top-bar .logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.top-bar .logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.top-bar .logo-text-group {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

/* Logo O harfi beyaz yapmak için - Logo dosyası güncellenmeli */
.top-bar .logo-img {
    max-width: 180px;
    height: auto;
    object-fit: contain;
}

.top-bar .logo-text {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: white;
    letter-spacing: 3px;
    line-height: 1.2;
    font-family: 'Oswald', sans-serif;
    font-style: normal;
    text-transform: uppercase;
}

.top-bar .logo-subtext {
    display: block;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

/* Hero Section */
.hero {
    position: relative;
    height: 80vh;
    min-height: 600px;
    max-height: 800px;
    overflow: hidden;
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-slide.active {
    opacity: 1;
    z-index: 1;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.hero-background-overlay {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: opacity 1s ease-in-out, background-color 1s ease-in-out;
}

.hero-slide--reservation .hero-background::after {
    background: linear-gradient(135deg, rgba(12, 38, 74, 0.82), rgba(59, 130, 246, 0.75));
}

.hero-slide--reservation .hero-content {
    align-items: flex-end;
    text-align: right;
    padding: 0 60px;
    gap: 24px;
}

.hero-reservation-slide {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 560px;
    margin-left: auto;
}

.hero-reservation-slide-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    align-self: flex-end;
}

.hero-reservation-slide-description {
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.92);
}

.hero-slide--reservation .reservation-cta-title {
    margin-bottom: 0;
    font-size: 64px;
}

.hero-slide--reservation .reservation-cta-btn {
    align-self: flex-end;
}

@media (max-width: 1200px) {
    .hero-slide--reservation .hero-content {
        padding: 0 40px;
    }

    .hero-slide--reservation .reservation-cta-title {
        font-size: 48px;
    }
}

@media (max-width: 768px) {
    .hero-slide--reservation .hero-content {
        align-items: center;
        text-align: center;
        padding: 40px 20px;
    }

    .hero-reservation-slide {
        margin-left: 0;
        max-width: 100%;
    }

    .hero-reservation-slide-eyebrow,
    .hero-slide--reservation .reservation-cta-btn {
        align-self: center;
    }

    .hero-slide--reservation .reservation-cta-title {
        font-size: 40px;
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    justify-content: flex-end;
    height: 100%;
}

.hero-content * {
    color: inherit;
}

.hero-content a,
.hero-content button,
.hero-content .hero-title-link {
    color: #ffffff;
}

.hero-content a:hover,
.hero-content button:hover {
    color: rgba(255, 255, 255, 0.9);
}

.hero-title {
    font-weight: 700;
    margin: 0;
    text-shadow: 0 4px 20px rgba(0,0,0,0.4);
    letter-spacing: -2.5px;
    line-height: 1.1;
}

.hero-title-link {
    text-decoration: none;
    display: inline-block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hero-title-link:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.hero-title-link .hero-title {
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-title-link:hover .hero-title {
    text-shadow: 0 6px 25px rgba(0,0,0,0.5);
}

.hero-search-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    pointer-events: none;
}

.hero-search-overlay .hero-search {
    pointer-events: all;
    width: 100%;
    display: flex;
    justify-content: center;
}

.hero-search {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: center;
}

.hero-dots {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.dot:hover {
    transform: scale(1.3);
}

.dot.active {
    background-color: white;
    transform: scale(1.3);
}

.hero .search-form {
    display: flex;
    background-color: white;
    border-radius: 50px;
    padding: 8px;
    max-width: 950px;
    width: 100%;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.search-field {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.search-field label {
    display: none;
}

.search-field input {
    padding: 14px 25px;
    border: none;
    border-radius: 50px;
    font-size: 15px;
    color: var(--text-primary);
    width: 100%;
    background: transparent;
    transition: none;
    line-height: 1.5;
}

.search-field input::placeholder {
    color: #666;
    font-weight: 400;
    font-size: 15px;
    opacity: 0.8;
}

.search-field input:focus {
    outline: none;
    background: transparent;
}

.search-btn {
    background-color: #1b5e20;
    color: white;
    border: none;
    padding: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.3s, transform 0.3s;
}

.search-btn:hover {
    background-color: #e55a2b;
    transform: scale(1.05);
}

.search-btn i {
    margin: 0;
}

/* Sections */
.section {
    padding: 70px 0;
}

/* Featured Tours */
.featured-tours {
    background-color: var(--surface-secondary);
}

/* Destinations */
.destinations {
    background-color: white;
}

/* Regions */
.regions {
    background-color: var(--surface-secondary);
}

/* Ways to go */
.ways-to-go {
    background-color: white;
}

/* Rental */
.rental {
    background-color: var(--surface-secondary);
}
/* Travel Blog */
.travel-blog {
    background-color: white;
}

/* Media Center */
.media-center {
    background-color: var(--surface-secondary);
}

/* Catalog */
.catalog {
    background-color: white;
}

.section-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 35px;
    color: #1a4d7a;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.section-title,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
    color: #1a4d7a;
}
h1, .hero-title {
    font-weight: 700;
    color: white;
}
.section-title {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 28px;
    color: #1a4d7a;
    margin-bottom: 35px;
}
h3, .tour-title, .region-name, .rental-brand, .blog-title {
    font-weight: 600;
}

p, a, span, li, div {
    font-family: 'Roboto', sans-serif;
}

/* Carousel Styles */
.carousel-nav {
    background: rgba(255, 255, 255, 0.95);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.carousel-nav i {
    font-size: 14px;
    color: #1a4d7a;
}

.carousel-nav:hover {
    background-color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.carousel-nav:hover i {
    color: #1b5e20;
}

.carousel-nav.prev {
    left: 25px;
}

.carousel-nav.next {
    right: 25px;
}

.carousel-nav.hidden {
    display: none !important;
}

.carousel-wrapper {
    position: relative;
    padding: 0 50px;
}

.tours-carousel-wrapper,
.regions-carousel-wrapper,
.rental-carousel-wrapper,
.media-carousel-wrapper {
    position: relative;
    /* Remove horizontal padding to allow cards to go to the edge */
    padding: 0;
    margin: 0;
}

.tours-carousel,
.regions-carousel,
.rental-carousel,
.media-carousel {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Add padding here so the first and last items are not at the very edge */
    padding: 10px 50px;
    /* Clip the overflow */
    clip-path: inset(0 0 0 0);
}

.tours-carousel > *,
.regions-carousel > *,
.rental-carousel > *,
.media-carousel > * {
    scroll-snap-align: start;
}

.tours-carousel::-webkit-scrollbar,
.regions-carousel::-webkit-scrollbar,
.rental-carousel::-webkit-scrollbar,
.media-carousel::-webkit-scrollbar {
    display: none;
}

/* Tour Cards */
.tour-card {
    min-width: 320px;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    flex-shrink: 0;
    border: none;
}
.tour-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.tour-card-link:focus-visible {
    outline: 2px solid #1a4d7a;
    outline-offset: 4px;
}
.tour-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
.tour-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}

.tour-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tour-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: #1b5e20;
    color: white;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.tour-content {
    padding: 25px;
    flex: 1;
}

.tour-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #1a4d7a;
    line-height: 1.3;
}

.tour-description {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 15px;
}

.tour-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px 16px;
    font-size: 14px;
}

.tour-price {
    font-weight: 700;
    color: #1a4d7a;
    font-size: 16px;
}

.tour-days {
    color: var(--text-secondary);
    font-size: 14px;
}

.section-link {
    text-align: right;
    margin-top: 30px;
}

.section-link a {
    color: #1a4d7a;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s;
}

.section-link a:hover {
    color: #1b5e20;
}

/* Destinations */
.destinations-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-top: 40px;
}

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

.destination-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 12px;
    background-color: var(--surface-muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    transition: background-color 0.3s;
}

.destination-item:hover .destination-icon {
    background-color: var(--surface-neutral);
}

.destination-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.destination-item h3 {
    font-size: 14px;
    color: #555;
    font-weight: 300;
    line-height: 1.3;
    min-height: 36px; /* Ensures consistent height for 1 or 2 lines */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Regions */
.region-card {
    min-width: 280px;
    text-align: center;
    flex-shrink: 0;
    position: relative;
}

.region-image {
    width: 280px;
    height: 350px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
}

.region-card:hover .region-image {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.region-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.region-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    pointer-events: none;
}

.region-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #1b5e20;
    color: white;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.region-name {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    font-size: 22px;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7);
    text-align: left;
    z-index: 2;
    margin: 0;
}

/* Ways to go */
.ways-to-go-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    align-items: center;
}

.ways-to-go-left .section-title {
    margin-bottom: 30px;
}

.tour-types {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tour-types li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 17px;
    color: #1a4d7a;
    font-weight: 300;
    transition: color 0.3s;
}

.tour-types li a:hover {
    color: #1b5e20;
}

.tour-types li a i {
    font-size: 12px;
    color: #999;
    transition: color 0.3s;
}

.tour-types li a:hover i {
    color: #1b5e20;
}

.ways-to-go-left .section-link {
    margin-top: 20px;
    text-align: right;
}

.ways-to-go-right {
    height: 450px;
    overflow: hidden;
    border-radius: 8px;
}

.ways-to-go-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Rental */
.rental-card {
    min-width: 250px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
    flex-shrink: 0;
    transition: box-shadow 0.3s, border-color 0.3s;
}

.rental-card:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: transparent;
}

.rental-logo {
    width: 150px;
    height: 120px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rental-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.rental-logo-fallback {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.rental-description {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    flex-grow: 1; /* Allow description to take up space */
}

.rental-brand {
    font-size: 18px;
    font-weight: 600;
    color: #1a4d7a;
}

/* Blog Hero Section */
.blog-hero {
    position: relative;
    padding: 120px 0 100px;
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
}

.blog-hero .vehicles-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10, 25, 41, 0.85), rgba(7, 36, 61, 0.75));
    backdrop-filter: blur(6px);
    z-index: 1;
}

.blog-hero .container {
    position: relative;
    z-index: 2;
}

.blog-hero .vehicles-hero-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 48px;
    align-items: center;
}

.blog-hero .vehicles-hero-text {
    grid-column: span 7;
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: #ffffff;
}

.blog-hero .vehicles-hero-card {
    grid-column: span 5;
}

.blog-hero .vehicles-hero-card-inner {
    background: rgba(10, 25, 41, 0.78);
    border-radius: 28px;
    padding: 36px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 25px 60px rgba(4, 9, 20, 0.38);
    display: flex;
    flex-direction: column;
    gap: 22px;
    color: rgba(241, 245, 249, 0.95);
}

.blog-hero .vehicles-hero-card-inner h2 {
    font-size: 22px;
    margin: 0;
    color: #fff;
}

.blog-hero .vehicles-hero-card-inner p {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(241, 245, 249, 0.85);
}

/* Blog */
.blog-card {
    min-width: 260px;
    background: #f6f7f9;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    transition: opacity 0.3s;
    display: block;
    text-decoration: none;
    color: inherit;
}

.blog-card:hover {
    transform: none;
    opacity: 0.85;
}

/* Blog Detail */
.blog-detail-page {
    padding: 60px 0;
    background: #eef1f6;
}

.blog-detail-wrapper {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    gap: 40px;
}

.blog-post {
    background: #f6f7f9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0,0,0,0.08);
    border: 1px solid rgba(26,77,122,0.06);
}

.blog-featured-image {
    width: 100%;
    max-height: 420px;
    overflow: hidden;
}

.blog-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-post-header {
    padding: 36px 40px 0;
}

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 14px;
    color: #5c6570;
    margin-bottom: 24px;
}

.blog-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blog-meta i {
    color: #1a4d7a;
}

.blog-post-title {
    margin: 0 0 18px;
    color: #1f2933;
    font-size: 34px;
    line-height: 1.25;
}

.blog-post-excerpt {
    margin: 0;
    color: #4a5562;
    font-size: 18px;
    line-height: 1.8;
}

.blog-post-content {
    padding: 24px 40px 40px;
    line-height: 1.85;
    color: #404854;
}

.blog-post-content p,
.blog-post-content ul,
.blog-post-content ol {
    margin-bottom: 24px;
}

.blog-post-content img,
.blog-post-content iframe {
    max-width: 100%;
    border-radius: 12px;
    margin: 20px 0;
}

.blog-post-content blockquote {
    border-left: 4px solid #1a4d7a;
    padding: 20px 24px;
    background: rgba(26,77,122,0.08);
    color: #1f2933;
    border-radius: 12px;
    margin: 30px 0;
    font-style: italic;
}

.related-posts {
    margin-top: 32px;
    padding: 40px;
    background: #f6f7f9;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.06);
    border: 1px solid rgba(26,77,122,0.06);
}

.related-posts h3 {
    margin: 0 0 24px;
    color: #1f2933;
    font-size: 22px;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.related-post-card {
    background: #f6f7f9;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(26,77,122,0.05);
    display: flex;
    flex-direction: column;
}

.related-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0,0,0,0.1);
}

.related-post-image {
    width: 100%;
    height: 160px;
    overflow: hidden;
}

.related-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.related-post-content {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.related-post-content h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
}

.related-post-content a {
    color: #1f2933;
    text-decoration: none;
}
.related-post-content a:hover {
    color: #1a4d7a;
}

.related-post-date {
    font-size: 13px;
    color: #6c7480;
}

@media (max-width: 992px) {
    .blog-detail-wrapper {
        padding: 0 20px;
    }

    .blog-post-header,
    .blog-post-content,
    .related-posts {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 576px) {
    .blog-detail-page {
        padding: 40px 0;
    }

    .blog-post-header {
        padding: 28px 24px 0;
    }

    .blog-post-title {
        font-size: 28px;
    }

    .blog-post-content {
        padding: 20px 24px 30px;
    }

    .related-posts {
        padding: 28px 24px;
    }

    .related-post-image {
        height: 140px;
    }
}

.blog-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    margin-bottom: 12px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    position: relative;
}

.blog-date {
    padding: 0;
    font-size: 13px;
    color: var(--text-light);
    background-color: transparent;
    margin-bottom: 8px;
    font-weight: 400;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-title {
    padding: 0;
    font-size: 17px;
    font-weight: 600;
    color: #1a4d7a;
    line-height: 1.4;
}

/* Media Center */
.media-card {
    min-width: 320px;
    position: relative;
    flex-shrink: 0;
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

.media-card:hover {
    opacity: 0.85;
}

.media-image {
    position: relative;
    width: 100%;
    height: 220px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.media-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-icon-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    color: #1b5e20;
    font-size: 20px;
}

.play-icon-wrapper:hover {
    background-color: white;
    transform: translate(-50%, -50%) scale(1.1);
}

.play-icon-wrapper i {
    margin-left: 4px; /* Adjust for perfect centering */
}

.media-title {
    margin-top: 15px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-hero-topics--contrast {
    background: rgba(148, 163, 184, 0.28);
    border: 1px solid rgba(30, 41, 59, 0.18);
    color: #0f172a;
}

.blog-hero-topics--contrast .blog-hero-topic-number {
    color: #0f172a;
    font-weight: 700;
}

.blog-hero-topics--contrast .blog-hero-topic-label {
    color: #1f2937;
    font-weight: 600;
}
.blog-hero-topics--contrast li {
    background: rgba(148, 163, 184, 0.28);
    border-color: rgba(30, 41, 59, 0.22);
}

.blog-hero-topics--contrast .blog-hero-article-title {
    color: #0f172a;
    font-weight: 600;
}

.blog-hero-topics--contrast .blog-hero-topic-count {
    color: #1f2937;
    font-weight: 600;
}

.blog-hero-card-footer--contrast {
    color: #0f172a;
}

.blog-detail-share--contrast {
    background: rgba(148, 163, 184, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #0f172a;
}

.blog-detail-share--contrast:hover {
    background: rgba(148, 163, 184, 0.2);
}

.blog-detail-share--contrast .blog-detail-share-label {
    color: #0f172a;
}

.blog-detail-share--contrast a,
.blog-detail-share--contrast button {
    background: rgba(148, 163, 184, 0.3);
    color: #0f172a;
}

.blog-detail-share--contrast a:hover,
.blog-detail-share--contrast button:hover {
    background: rgba(148, 163, 184, 0.5);
    color: #0b1120;
}
.media-lightbox {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 40px 20px;
}

.media-lightbox.is-visible {
    display: flex;
}

.media-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
}

.media-lightbox__dialog {
    position: relative;
    max-width: 960px;
    width: 100%;
    background: #0a1a2a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.media-lightbox__close {
    position: absolute;
    top: 12px;
    right: 12px;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    z-index: 2;
}

.media-lightbox__close:hover {
    background: rgba(0, 0, 0, 0.75);
}

.media-lightbox__body {
    display: flex;
    flex-direction: column;
    background: #041224;
}

.media-lightbox__video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000;
}

.media-lightbox__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.media-lightbox__meta {
    padding: 24px;
    color: #e7eef7;
}

.media-lightbox__title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #ffffff;
}

.media-lightbox__description {
    font-size: 15px;
    line-height: 1.6;
    color: #b3c2d1;
}

body.media-lightbox-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .media-lightbox {
        padding: 20px 12px;
    }

    .media-lightbox__dialog {
        border-radius: 8px;
    }

    .media-lightbox__meta {
        padding: 18px 16px;
    }

    .media-lightbox__title {
        font-size: 18px;
    }

    .media-lightbox__description {
        font-size: 14px;
    }
}

/* Catalog */
.catalog-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.catalog-title {
    font-size: 68px;
    font-weight: 700;
    color: #1a4d7a;
    margin-bottom: 18px;
    line-height: 1;
    letter-spacing: -3px;
}

.catalog-description {
    font-size: 17px;
    color: var(--text-secondary);
    margin-bottom: 28px;
    line-height: 1.6;
    font-weight: 400;
}
.catalog-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
}
.btn {
    padding: 16px 32px;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.5;
}

.btn-primary {
    background-color: #1b5e20;
    color: white;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.btn-primary:hover {
    background-color: #e55a2b;
}

.catalog-right {
    height: 400px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.catalog-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Newsletter Section */
/* Site İçeriği Özeti */
.site-content-summary {
    background-color: var(--surface-primary);
}

.summary-intro {
    font-size: 18px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 50px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}

.content-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 40px;
}

.summary-category {
    background-color: var(--surface-secondary);
    padding: 30px;
    border-radius: 8px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.summary-category:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.summary-category h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1a4d7a;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.summary-category h3 i {
    font-size: 24px;
    color: #1b5e20;
}

.summary-category ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.summary-category ul li {
    margin-bottom: 12px;
}

.summary-category ul li:last-child {
    margin-bottom: 0;
}

.summary-category ul li a {
    color: var(--text-secondary);
    font-size: 15px;
    transition: color 0.3s, padding-left 0.3s;
    display: block;
    padding: 5px 0;
}

.summary-category ul li a:hover {
    color: #1a4d7a;
    padding-left: 10px;
}

.newsletter {
    background-color: var(--surface-secondary);
}

.newsletter-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.newsletter-title {
    font-size: 24px;
    font-weight: 600;
    color: #1a4d7a;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.newsletter-description {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.newsletter-right {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.newsletter-form {
    display: flex;
    gap: 10px;
}

.newsletter-form input {
    flex: 1;
    padding: 14px 20px;
    border: 1px solid #ddd;
    border-radius: 50px;
    background-color: white;
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.newsletter-form input::placeholder {
    color: #999;
}

.newsletter-form input:focus {
    outline: none;
    border-color: #1b5e20;
    box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.1);
}

.newsletter-form button {
    white-space: nowrap;
    background-color: #1a4d7a;
    color: white;
    padding: 14px 28px;
    border-radius: 50px;
    border: none;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s;
}

.newsletter-form button:hover {
    background-color: #0f3a5c;
}

.newsletter-form button.btn-primary {
    background-color: #1a4d7a;
}

.newsletter-form button.btn-primary:hover {
    background-color: #0f3a5c;
}

.recaptcha-note {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.recaptcha-note a {
    color: #1a4d7a;
    text-decoration: underline;
}

/* Footer */
.footer {
    position: relative;
    background: radial-gradient(circle at top left, #214a78 0%, #132c4a 38%, #071320 100%);
    color: #e9f2ff;
    padding: 72px 0 48px;
    font-size: 15px;
    overflow: hidden;
}

.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(64, 128, 187, 0.18) 0%, rgba(4, 23, 43, 0.6) 55%, rgba(2, 8, 16, 0.9) 100%);
    pointer-events: none;
    opacity: 0.9;
}

.footer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at bottom right, rgba(47, 114, 198, 0.35) 0%, transparent 45%);
    pointer-events: none;
    opacity: 0.45;
}

.footer .container {
    position: relative;
    z-index: 1;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.footer-top {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.footer-top-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.footer-top-content {
    display: grid;
    grid-template-columns: minmax(260px, 0.95fr) 1fr;
    gap: 60px;
    align-items: start;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 420px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
}

.footer-logo a:hover {
    opacity: 0.85;
}

.footer-logo-img {
    max-width: 180px;
    height: auto;
    object-fit: contain;
}

.footer-logo-text-group {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.footer-logo-text {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: white;
    letter-spacing: 3px;
    line-height: 1.2;
    font-family: 'Oswald', sans-serif;
    font-style: normal;
    text-transform: uppercase;
}

.footer-logo-subtext {
    display: block;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.footer-tagline {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(233, 242, 255, 0.82);
}

.footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-action {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 999px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
    border: 1px solid transparent;
}

.footer-action-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.16);
}

.footer-action--call {
    background: rgba(23, 139, 124, 0.2);
    border-color: rgba(120, 214, 192, 0.35);
}

.footer-action--call:hover {
    background: rgba(23, 139, 124, 0.32);
    box-shadow: 0 15px 28px rgba(11, 52, 54, 0.45);
    transform: translateY(-2px);
}

.footer-action--whatsapp {
    background: linear-gradient(135deg, #1ebe5d 0%, #0a8c3a 100%);
    box-shadow: 0 12px 30px rgba(22, 119, 62, 0.45);
}

.footer-action--whatsapp:hover {
    box-shadow: 0 16px 36px rgba(22, 119, 62, 0.55);
    transform: translateY(-2px);
}

.footer-action-hint {
    display: block;
    margin-top: 6px;
    color: rgba(233, 242, 255, 0.65);
    letter-spacing: 0.4px;
    font-size: 13px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 36px 40px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer-brand-social {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer-brand-social .footer-heading {
    margin-bottom: 0;
    padding-bottom: 10px;
}

.footer-brand-social .footer-heading::after {
    width: 46px;
}

.footer-heading {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #f4f9ff;
    margin: 0;
    position: relative;
    padding-bottom: 12px;
}

.footer-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background: rgba(243, 249, 255, 0.4);
}

.footer-address {
    margin: 0;
    line-height: 1.8;
    color: rgba(233, 242, 255, 0.85);
}

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

.footer-links a {
    color: rgba(222, 234, 255, 0.88);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    font-size: 15px;
}

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

.footer-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-contact-label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.45px;
    text-transform: uppercase;
    color: rgba(201, 219, 242, 0.7);
    margin-bottom: 4px;
}

.footer-contact-link {
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact-link:hover {
    color: #9ee4ff;
}

.footer-contact-text {
    display: block;
    color: rgba(233, 242, 255, 0.86);
    line-height: 1.7;
}

.footer-contact-note {
    display: inline;
    font-size: 13px;
    color: rgba(233, 242, 255, 0.7);
    margin-left: 4px;
}

.footer-contact-phones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-contact-separator {
    color: rgba(255, 255, 255, 0.35);
    margin: 0 4px;
}

.footer-contact-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0.2) 60%, transparent 100%);
    opacity: 0.6;
    margin: 20px 0 16px 0;
}

.footer-language-selector {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.footer-language-selector .language-separator {
    color: rgba(255, 255, 255, 0.35);
}

.footer-language-selector .lang-link {
    color: rgba(214, 228, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-language-selector .lang-link.active {
    color: #ffffff;
}

.footer-language-selector .lang-link:not(.active):hover {
    color: #9ee4ff;
    transform: translateY(-1px);
}

.footer-contact-info .language-selector {
    margin-top: 0;
}

.footer-reservations-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(214, 228, 255, 0.85);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.4px;
    transition: color 0.2s ease, transform 0.2s ease;
    padding: 8px 0;
}

.footer-reservations-link:hover {
    color: #9ee4ff;
    transform: translateX(2px);
}

.footer-reservations-link i {
    font-size: 16px;
}

.social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.social-icons a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    font-size: 16px;
}

.social-icons a:hover {
    background: #1ebe5d;
    border-color: #1ebe5d;
    box-shadow: 0 12px 26px rgba(27, 94, 32, 0.45);
    transform: translateY(-2px);
}

.footer-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0.2) 60%, transparent 100%);
    opacity: 0.6;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: rgba(230, 240, 255, 0.8);
    font-size: 15px;
}

.footer-bottom-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-bottom-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.footer-copy {
    color: rgba(230, 240, 255, 0.82);
}

.language-selector {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.language-selector .language-separator {
    color: rgba(255, 255, 255, 0.35);
}

.language-selector .lang-link {
    color: rgba(214, 228, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.language-selector .lang-link.active {
    color: #ffffff;
}

.language-selector .lang-link:not(.active):hover {
    color: #9ee4ff;
    transform: translateY(-1px);
}

.language-selector .lang-link .lang-status {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.82);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--on-primary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 18px;
    margin-left: 15px;
}

.dark-mode-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.dark-mode-toggle.is-dark {
    border-color: rgba(148, 163, 184, 0.4);
}

.theme-light .dark-mode-toggle {
    border-color: rgba(15, 23, 42, 0.12);
    color: var(--text-primary);
}

.theme-light .dark-mode-toggle:hover {
    background-color: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.18);
}

/* Dark Mode Styles */
[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #888;
    --border-color: #444;
    --shadow-color: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .top-bar {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .featured-tours,
[data-theme="dark"] .regions,
[data-theme="dark"] .rental,
[data-theme="dark"] .media-center,
[data-theme="dark"] .newsletter {
    background-color: var(--bg-secondary);
}
[data-theme="dark"] .destinations,
[data-theme="dark"] .ways-to-go,
[data-theme="dark"] .travel-blog,
[data-theme="dark"] .catalog {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .section-title,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] .tour-title,
[data-theme="dark"] .rental-brand,
[data-theme="dark"] .blog-title {
    color: var(--text-primary);
}

[data-theme="dark"] .tour-card,
[data-theme="dark"] .rental-card {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .section-link a,
[data-theme="dark"] .tour-title,
[data-theme="dark"] .rental-brand,
[data-theme="dark"] .blog-title {
    color: var(--text-primary);
}

[data-theme="dark"] .section-link a:hover {
    color: var(--accent-green);
}

[data-theme="dark"] .tour-types li a {
    color: white;
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .tour-types li a:hover {
    color: var(--accent-green);
}
[data-theme="dark"] .tour-types li a i {
    color: var(--text-secondary);
}

[data-theme="dark"] .tour-types li a:hover i {
    color: var(--accent-green);
}

[data-theme="dark"] .top-nav .dropdown-menu {
    background-color: var(--bg-tertiary);
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .top-nav .dropdown-menu a {
    color: var(--text-primary);
}

[data-theme="dark"] .top-nav .dropdown-menu a:hover {
    background-color: var(--bg-secondary);
    color: var(--accent-green);
}

[data-theme="dark"] .tour-description,
[data-theme="dark"] .rental-description,
[data-theme="dark"] .catalog-description,
[data-theme="dark"] .newsletter-description {
    color: var(--text-secondary);
}

[data-theme="dark"] .destination-icon {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .destination-item h3 {
    color: var(--text-secondary);
}

[data-theme="dark"] .destination-item:hover .destination-icon {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .search-form {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .search-field input {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .search-field input::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .newsletter-form input {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .newsletter-form input::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .blog-date {
    color: var(--text-muted);
}

[data-theme="dark"] .media-title {
    color: var(--text-secondary);
}

[data-theme="dark"] .footer {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .dark-mode-toggle {
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

[data-theme="dark"] .dark-mode-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Page Header Styles */
.page-header {
    background: linear-gradient(135deg, #1a4d7a 0%, #2d5f8f 100%);
    padding: 80px 0 60px;
    text-align: center;
    color: white;
}

.page-title {
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.page-description {
    font-size: 18px;
    font-weight: 300;
    opacity: 0.9;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    margin-top: 15px;
    opacity: 0.9;
}

.breadcrumbs a {
    color: white;
    text-decoration: none;
    transition: opacity 0.3s;
}

.breadcrumbs a:hover {
    opacity: 0.8;
}

.breadcrumbs span {
    color: rgba(255, 255, 255, 0.6);
}

/* About Page Styles */
.about-content {
    background-color: white;
}

.about-intro {
    max-width: 900px;
    margin: 0 auto 60px;
    text-align: center;
}

.about-main-title {
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #1a4d7a;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

.about-description {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 20px;
    text-align: left;
}

.about-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.about-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.about-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.about-card-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    position: relative;
}

.about-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

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

.about-card-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.about-card-title {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #1a4d7a;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.about-card-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 20px;
    flex-grow: 1;
}

.about-card-text + .about-card-text {
    margin-top: 15px;
}

.about-card-link {
    color: #1a4d7a;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s;
    margin-top: auto;
}

.about-card-link:hover {
    color: #1b5e20;
}

.about-card-link i {
    font-size: 12px;
    transition: transform 0.3s;
}

/* Firma Profili Page */
.profile-hero {
    position: relative;
    padding: 120px 0 90px;
    color: white;
    background-image: linear-gradient(135deg, rgba(18, 44, 73, 0.9), rgba(28, 76, 119, 0.85)), url('../images/hakkindaprofil.jpg');
    background-size: cover;
    background-position: center;
}

.profile-hero--faq {
    background-image: linear-gradient(140deg, rgba(18, 44, 73, 0.94), rgba(32, 87, 132, 0.9), rgba(11, 35, 56, 0.92));
}

.profile-hero--faq .profile-hero-card {
    background-color: rgba(255, 255, 255, 0.97);
    color: #1a4d7a;
}

.profile-hero--faq .profile-hero-card p {
    color: #2c567d;
}

.profile-hero--faq .profile-hero-card-footer {
    background-color: rgba(26, 77, 122, 0.12);
}

.profile-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 50px;
    align-items: stretch;
}

.profile-hero-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.profile-hero-eyebrow {
    display: inline-block;
    font-size: 14px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.85;
}


.profile-brand {
    background: linear-gradient(180deg, #f1f5fb 0%, #edf3fa 100%);
}

.profile-brand-card {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 40px;
    background-color: white;
    border-radius: 20px;
    padding: 48px 56px;
    box-shadow: 0 24px 70px rgba(18, 44, 73, 0.12);
    min-height: 220px;
}

.profile-brand-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profile-brand-logo {
    flex: 0 0 200px;
    display: flex;
    align-items: stretch;
    position: relative;
}

.profile-brand-logo-left {
    justify-content: flex-start;
}

.profile-brand-logo-right {
    justify-content: flex-end;
}

.profile-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(18, 44, 73, 0.22));
}

.profile-hero-title {
    font-family: 'Oswald', sans-serif;
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -1.5px;
    margin: 0;
}

.profile-hero-description {
    font-size: 18px;
    line-height: 1.8;
    opacity: 0.9;
}
.profile-hero-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.profile-hero-highlights li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.08);
}

.profile-hero-highlights i {
    font-size: 20px;
    color: #1b5e20;
}

.profile-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
}

.profile-hero-cta .btn {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.5 !important;
    min-height: 44px !important;
    padding: 12px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.btn-outline {
    background-color: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.6);
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.btn-outline:hover {
    border-color: #1b5e20;
    color: white;
    background-color: rgba(27, 94, 32, 0.2);
}

.profile-hero-card {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    color: #1a4d7a;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: stretch;
}

.profile-hero-card-inner {
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.profile-hero-card h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    margin: 0;
}

.profile-hero-card p {
    font-size: 16px;
    line-height: 1.7;
    color: #2c567d;
    margin: 0;
}

.profile-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.profile-hero-stat {
    background-color: rgba(26, 77, 122, 0.08);
    border-radius: 12px;
    padding: 18px 14px;
    text-align: center;
}

.profile-hero-stat-number {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #1a4d7a;
}

.profile-hero-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: #406b95;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.profile-hero-card-footer {
    margin-top: auto;
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 14px;
    color: #406b95;
    background-color: rgba(26, 77, 122, 0.08);
    padding: 16px 18px;
    border-radius: 12px;
}

.profile-hero-card-footer i {
    color: #1b5e20;
    font-size: 18px;
}

.profile-overview {
    background-color: var(--surface-soft);
}

.profile-intro {
    max-width: 860px;
    margin: 0 auto 60px;
    text-align: center;
}

.profile-section-title {
    font-family: 'Oswald', sans-serif;
    font-size: 44px;
    font-weight: 700;
    color: #1a4d7a;
    margin-bottom: 20px;
}

.profile-section-description {
    font-size: 18px;
    line-height: 1.8;
    color: #555;
    margin: 0 auto;
    max-width: 780px;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 28px;
}

.profile-stat-card {
    background-color: white;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 15px 45px rgba(16, 40, 65, 0.08);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-stat-card i {
    font-size: 28px;
    color: #1b5e20;
}

.profile-stat-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1a4d7a;
    margin: 0;
}

.profile-stat-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #56697f;
    margin: 0;
}

.profile-story {
    background-color: white;
}

.profile-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

.profile-story-media {
    position: relative;
}

.profile-story-media img {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 25px 60px rgba(16, 40, 65, 0.25);
}

.profile-story-badge {
    position: absolute;
    left: 30px;
    bottom: 30px;
    background-color: rgba(26, 77, 122, 0.95);
    color: white;
    padding: 18px 24px;
    border-radius: 14px;
    box-shadow: 0 15px 30px rgba(16, 40, 65, 0.35);
    max-width: 280px;
}
.profile-story-badge-title {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 600;
}

.profile-story-badge-text {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.9;
}

.profile-story-content h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #1a4d7a;
    margin-bottom: 24px;
}

.profile-story-content p {
    font-size: 16px;
    line-height: 1.9;
    color: #56697f;
    margin-bottom: 18px;
}

.profile-values {
    background-color: var(--surface-soft);
}

.profile-values-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 50px;
}

.profile-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.profile-value-card {
    background-color: white;
    border-radius: 16px;
    padding: 28px;
    text-align: left;
    box-shadow: 0 15px 45px rgba(16, 40, 65, 0.08);
}

.profile-value-card i {
    font-size: 28px;
    color: #1b5e20;
    margin-bottom: 18px;
}

.profile-value-card h3 {
    font-size: 20px;
    color: #1a4d7a;
    margin-bottom: 12px;
}

.profile-value-card p {
    font-size: 15px;
    color: #56697f;
    line-height: 1.7;
    margin: 0;
}

.profile-expertise {
    background-color: white;
}

.profile-expertise-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 50px;
}

.profile-expertise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 28px;
}

.profile-expertise-card {
    background-color: var(--surface-soft);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 15px 45px rgba(16, 40, 65, 0.06);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.profile-expertise-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(27, 94, 32, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1b5e20;
    font-size: 22px;
}

.profile-expertise-card h3 {
    font-size: 20px;
    color: #1a4d7a;
    margin: 0;
}

.profile-expertise-card p {
    font-size: 15px;
    color: #56697f;
    line-height: 1.7;
    margin: 0;
}

.profile-timeline {
    background-color: var(--surface-soft);
}

.profile-timeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.profile-timeline-item {
    background-color: white;
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 15px 45px rgba(16, 40, 65, 0.08);
    position: relative;
}

.profile-timeline-year {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-size: 32px;
    color: #1b5e20;
    margin-bottom: 12px;
}

.profile-timeline-item h3 {
    font-size: 18px;
    color: #1a4d7a;
    margin-bottom: 12px;
}

.profile-timeline-item p {
    font-size: 15px;
    color: #56697f;
    line-height: 1.7;
    margin: 0;
}

.profile-managed {
    background: linear-gradient(180deg, #eef3f8 0%, #f6f8fb 100%);
    position: relative;
}

.profile-managed-content {
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #f6f7f9 100%);
    border-radius: 22px;
    padding: 48px;
    box-shadow: 0 24px 55px rgba(16, 40, 65, 0.12);
    border: 1px solid rgba(26, 77, 122, 0.08);
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.profile-managed-content::before,
.profile-managed-content::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.22;
}
.profile-managed-content::before {
    width: 280px;
    height: 280px;
    top: -120px;
    right: -90px;
    background: radial-gradient(circle at center, rgba(27, 94, 32, 0.3) 0%, rgba(27, 94, 32, 0) 70%);
}

.profile-managed-content::after {
    width: 240px;
    height: 240px;
    bottom: -130px;
    left: -100px;
    background: radial-gradient(circle at center, rgba(26, 77, 122, 0.32) 0%, rgba(26, 77, 122, 0) 72%);
}

.profile-managed-layout {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
    justify-content: space-between;
}

.profile-managed-info {
    flex: 1 1 420px;
    min-width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.profile-managed-info h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 34px;
    color: #1a4d7a;
    margin: 0;
}

.profile-managed-info p {
    color: #4b5f72;
    line-height: 1.8;
    margin: 0;
}
.profile-managed-services {
    flex: 0 0 320px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.profile-managed-services h3 {
    color: #1a4d7a;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.profile-managed-services ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.profile-managed-services ul li {
    position: relative;
    padding: 14px 20px 14px 48px;
    background: rgba(255, 255, 255, 0.88);
    border-radius: 16px;
    border: 1px solid rgba(26, 77, 122, 0.08);
    color: #43556b;
    box-shadow: 0 12px 30px rgba(16, 40, 65, 0.08);
}

.profile-managed-services ul li::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff6b35;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.mission-hero {
    position: relative;
    padding: 140px 0 120px;
    background: linear-gradient(160deg, rgba(16, 40, 65, 0.85) 0%, rgba(27, 94, 32, 0.75) 55%, rgba(16, 40, 65, 0.9) 100%), url('../images/golkackar.jpg') center/cover;
    overflow: hidden;
}

.mission-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}

.mission-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 36px;
    position: relative;
    z-index: 1;
    align-items: stretch;
}

.mission-hero-content {
    display: flex;
    flex-direction: column;
    gap: 28px;
    color: white;
}

.mission-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}

.mission-hero-title {
    font-family: 'Oswald', sans-serif;
    font-size: 52px;
    line-height: 1.1;
    margin: 0;
}

.mission-hero-description {
    font-size: 17px;
    line-height: 1.9;
    max-width: 560px;
    margin: 0;
    opacity: 0.9;
}

.mission-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.mission-hero-stat {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    border-radius: 20px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mission-hero-stat-label {
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.8;
}

.mission-hero-stat strong {
    font-size: 32px;
    font-family: 'Oswald', sans-serif;
}

.mission-hero-stat-info {
    font-size: 13px;
    opacity: 0.85;
}

.mission-hero-media {
    display: flex;
    align-items: stretch;
}

.mission-hero-card {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    border-radius: 26px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: white;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.mission-hero-card-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(27, 94, 32, 0.3);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}

.mission-hero-card p {
    margin: 0;
    line-height: 1.8;
    opacity: 0.88;
}

.mission-hero-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.mission-hero-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    opacity: 0.95;
}

.mission-hero-list i {
    color: #ffcf99;
}

.mission-hero-card-footer {
    padding: 20px;
    border-radius: 18px;
    background: rgba(16, 40, 65, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mission-hero-card-footer-label {
    display: block;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 8px;
}

.mission-overview {
    background: linear-gradient(180deg, #f6f8fb 0%, #eef3f8 100%);
    padding: 110px 0;
}

.mission-overview-content {
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    border-radius: 24px;
    padding: 56px;
    box-shadow: 0 28px 65px rgba(16, 40, 65, 0.15);
    border: 1px solid rgba(26, 77, 122, 0.08);
    position: relative;
    overflow: hidden;
}

.mission-overview-content.rich-text {
    display: grid;
    gap: 28px;
    color: #3c5169;
    line-height: 1.9;
}

.mission-overview-content.rich-text > * {
    margin: 0;
}

.mission-overview-content.rich-text h2,
.mission-overview-content.rich-text h3,
.mission-overview-content.rich-text h4 {
    position: relative;
    padding-left: 22px;
    color: #174067;
}

.mission-overview-content.rich-text h2::before,
.mission-overview-content.rich-text h3::before,
.mission-overview-content.rich-text h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 32px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff6b35 0%, #ff8b5c 100%);
}

.mission-overview-content.rich-text p + p {
    margin-top: 6px;
}

.mission-overview-content.rich-text ul,
.mission-overview-content.rich-text ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.mission-overview-content.rich-text ul li,
.mission-overview-content.rich-text ol li {
    position: relative;
    padding-left: 28px;
    color: #405875;
}

.mission-overview-content.rich-text ul li::before,
.mission-overview-content.rich-text ol li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at center, #ff6b35 0%, #ff9a76 70%);
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.15);
}

.mission-overview-content.rich-text blockquote {
    margin: 0;
    padding: 24px 28px 24px 46px;
    background: rgba(26, 77, 122, 0.06);
    border-radius: 18px;
    position: relative;
    color: #1a4d7a;
    font-style: italic;
}

.mission-overview-content.rich-text blockquote::before {
    content: "“";
    position: absolute;
    left: 18px;
    top: 12px;
    font-size: 40px;
    color: rgba(26, 77, 122, 0.25);
    line-height: 1;
}

.mission-overview-content.rich-text blockquote::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    border: 1px solid rgba(26, 77, 122, 0.12);
    pointer-events: none;
}

.mission-overview-content.rich-text figure {
    margin: 0;
    display: grid;
    gap: 14px;
}

.mission-overview-content.rich-text figure img {
    border-radius: 18px;
    width: 100%;
    box-shadow: 0 20px 45px rgba(17, 44, 67, 0.18);
}

.mission-overview-content.rich-text figure figcaption {
    font-size: 14px;
    color: #54708c;
    text-align: center;
}

.mission-overview-content.rich-text hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, rgba(26, 77, 122, 0.25) 0%, rgba(26, 77, 122, 0) 100%);
}

.mission-overview-content.rich-text strong {
    color: #0f2d49;
}

.mission-overview-content.rich-text a {
    color: #ff6b35;
    font-weight: 600;
    text-decoration: none;
    position: relative;
}

.mission-overview-content.rich-text a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: rgba(255, 107, 53, 0.35);
    transition: opacity 0.2s ease;
    opacity: 0;
}

.mission-overview-content.rich-text a:hover::after {
    opacity: 1;
}

.mission-overview-content.rich-text .highlight,
.mission-overview-content.rich-text .callout {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 251, 255, 0.9) 100%);
    border: 1px solid rgba(26, 77, 122, 0.12);
    border-left: 6px solid #ff6b35;
    border-radius: 20px;
    padding: 24px 28px;
    box-shadow: 0 18px 40px rgba(16, 40, 65, 0.12);
}

.mission-overview-content.rich-text .highlight-title,
.mission-overview-content.rich-text .callout-title {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    color: #1a4d7a;
    margin-bottom: 10px;
}

.mission-overview-content.rich-text .metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 18px;
}

.mission-overview-content.rich-text .metric-card {
    background: white;
    border-radius: 18px;
    padding: 20px 22px;
    border: 1px solid rgba(26, 77, 122, 0.1);
    box-shadow: 0 16px 36px rgba(16, 40, 65, 0.1);
    text-align: center;
}

.mission-overview-content.rich-text .metric-card strong {
    display: block;
    font-size: 28px;
    color: #ff6b35;
    margin-bottom: 4px;
}

.mission-overview-content.rich-text .metric-card span {
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #587190;
}

.mission-overview-content.rich-text table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(16, 40, 65, 0.1);
}

.mission-overview-content.rich-text table thead {
    background: linear-gradient(135deg, #1a4d7a 0%, #274f8a 100%);
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
}

.mission-overview-content.rich-text table th,
.mission-overview-content.rich-text table td {
    padding: 16px 18px;
    border: 1px solid rgba(26, 77, 122, 0.1);
    text-align: left;
}

.mission-overview-content.rich-text table tbody tr:nth-child(even) {
    background: rgba(26, 77, 122, 0.04);
}

.mission-overview-content.rich-text table tbody tr:hover {
    background: rgba(255, 107, 53, 0.08);
}

.mission-overview-content.rich-text code {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(15, 45, 73, 0.08);
    color: #0f2d49;
    font-size: 13px;
}

.mission-overview-content.rich-text pre {
    background: rgba(15, 45, 73, 0.92);
    color: rgba(255, 255, 255, 0.85);
    padding: 24px;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(16, 40, 65, 0.25);
    overflow-x: auto;
}

.mission-overview-content.rich-text pre code {
    background: none;
    color: inherit;
}

.mission-overview-content.rich-text .icon-list {
    display: grid;
    gap: 18px;
}

.mission-overview-content.rich-text .icon-list-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    align-items: center;
    background: rgba(26, 77, 122, 0.06);
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(26, 77, 122, 0.1);
}

.mission-overview-content.rich-text .icon-list-item i,
.mission-overview-content.rich-text .icon-list-item svg {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(26, 77, 122, 0.2) 0%, rgba(26, 77, 122, 0.05) 100%);
    color: #1a4d7a;
}

.mission-overview-content.rich-text .icon-list-item strong {
    margin: 0;
    font-size: 16px;
    color: #1a4d7a;
}

.mission-overview-content.rich-text .icon-list-item p {
    margin: 0;
    color: #4b5f72;
}

.mission-overview-content.rich-text .timeline {
    position: relative;
    display: grid;
    gap: 24px;
    padding-left: 28px;
}

.mission-overview-content.rich-text .timeline::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(26, 77, 122, 0.2) 0%, rgba(26, 77, 122, 0) 100%);
}

.mission-overview-content.rich-text .timeline-item {
    position: relative;
    padding: 16px 20px;
    background: white;
    border-radius: 16px;
    border: 1px solid rgba(26, 77, 122, 0.12);
    box-shadow: 0 14px 30px rgba(16, 40, 65, 0.14);
}

.mission-overview-content.rich-text .timeline-item::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 24px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff6b35;
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.15);
}

.mission-overview-content.rich-text .timeline-item strong {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
}

.mission-overview-content.rich-text .stat-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    margin-top: 10px;
}

.mission-overview-content.rich-text .stat-card {
    background: rgba(26, 77, 122, 0.07);
    border-radius: 16px;
    padding: 18px 20px;
    border: 1px solid rgba(26, 77, 122, 0.1);
    text-align: center;
}

.mission-overview-content.rich-text .stat-card strong {
    font-size: 26px;
    color: #1a4d7a;
}

.mission-overview-content.rich-text .stat-card span {
    font-size: 13px;
    color: #4b5f72;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.mission-overview-content.rich-text[data-theme="dark"],
[data-theme="dark"] .mission-overview-content.rich-text {
    color: rgba(255, 255, 255, 0.85);
}

.mission-overview-content.rich-text[data-theme="dark"] strong,
[data-theme="dark"] .mission-overview-content.rich-text strong {
    color: #ffffff;
}

.mission-overview-content.rich-text[data-theme="dark"] a,
[data-theme="dark"] .mission-overview-content.rich-text a {
    color: #ffb089;
}

.mission-overview-content.rich-text .metric-card,
.mission-overview-content.rich-text .timeline-item,
.mission-overview-content.rich-text .stat-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mission-overview-content.rich-text .metric-card:hover,
.mission-overview-content.rich-text .timeline-item:hover,
.mission-overview-content.rich-text .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px rgba(16, 40, 65, 0.16);
}

.mission-overview-content.rich-text .icon-list-item:hover {
    box-shadow: 0 18px 45px rgba(16, 40, 65, 0.16);
}

.mission-overview-content.rich-text .highlight,
.mission-overview-content.rich-text .callout,
.mission-overview-content.rich-text .icon-list-item,
.mission-overview-content.rich-text .metric-card,
.mission-overview-content.rich-text .timeline-item,
.mission-overview-content.rich-text .stat-card {
    backdrop-filter: blur(4px);
}

.mission-overview-content.rich-text .colored-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(26, 77, 122, 0.12);
    color: #1a4d7a;
    font-weight: 600;
}

.mission-overview-content.rich-text .colored-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff6b35;
}

.mission-overview-content.rich-text .grid-two {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.mission-overview-content.rich-text .grid-three {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.mission-overview-content.rich-text .btn-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 107, 53, 0.12);
    color: #ff6b35;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 107, 53, 0.2);
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mission-overview-content.rich-text .btn-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(255, 107, 53, 0.24);
}

.mission-overview-content.rich-text .btn-link i,
.mission-overview-content.rich-text .btn-link svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 991px) {
    .mission-overview-content {
        padding: 42px;
    }

    .mission-overview-content.rich-text {
        gap: 24px;
    }

    .mission-overview-content.rich-text h2::before,
    .mission-overview-content.rich-text h3::before,
    .mission-overview-content.rich-text h4::before {
        height: 26px;
    }

    .mission-overview-content.rich-text .icon-list-item {
        grid-template-columns: 1fr;
        text-align: left;
    }
}

@media (max-width: 575px) {
    .mission-overview-content {
        padding: 34px 28px;
        border-radius: 20px;
    }

    .mission-overview-content.rich-text {
        gap: 20px;
    }

    .mission-overview-content.rich-text blockquote {
        padding: 20px 22px 20px 40px;
    }

    .mission-overview-content.rich-text blockquote::before {
        left: 14px;
    }

    .mission-overview-content.rich-text figure img {
        border-radius: 14px;
    }
}

.mission-overview-content::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle at center, rgba(27, 94, 32, 0.16) 0%, rgba(27, 94, 32, 0) 70%);
    top: -140px;
    right: -100px;
    pointer-events: none;
}

.mission-overview-content > *:last-child {
    margin-bottom: 0;
}

.mission-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}
.mission-overview-card {
    background: white;
    border-radius: 22px;
    padding: 40px;
    box-shadow: 0 24px 55px rgba(16, 40, 65, 0.1);
    border: 1px solid rgba(26, 77, 122, 0.06);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.mission-overview-card h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    color: #1a4d7a;
    margin: 0;
}

.mission-overview-card p {
    margin: 0;
    color: #4b5f72;
    line-height: 1.9;
}

.mission-overview-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.mission-overview-card ul li {
    position: relative;
    padding-left: 26px;
    color: #51657b;
    font-size: 15px;
}

.mission-overview-card ul li::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff6b35;
    left: 0;
    top: 8px;
}
.mission-overview-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mission-overview-points span {
    background: rgba(26, 77, 122, 0.08);
    color: #1a4d7a;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
}

.mission-pillars {
    background: white;
    padding: 110px 0;
}

.mission-pillars-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 50px auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mission-pillars-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: 999px;
    background: rgba(27, 94, 32, 0.12);
    color: #1b5e20;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
}

.mission-pillars-header h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 40px;
    margin: 0;
    color: #1a4d7a;
}

.mission-pillars-header p {
    margin: 0;
    color: #556878;
    line-height: 1.8;
}

.mission-pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 26px;
}
@media (max-width: 768px) {
    .profile-community-grid {
        grid-template-columns: 1fr;
    }

    .profile-community-card {
        gap: 16px;
    }

    .profile-community-card > div {
        padding: 28px;
    }

    .profile-social-links {
        justify-content: center;
    }

    .profile-social-link {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }
}

@media (max-width: 576px) {
    .profile-community-card > div {
        padding: 24px;
    }

    .profile-social-links {
        gap: 12px;
    }

    .profile-social-link {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }
}

.mission-pillar {
    background: linear-gradient(145deg, #f8fbff 0%, #ffffff 100%);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 18px 40px rgba(16, 40, 65, 0.12);
    border: 1px solid rgba(26, 77, 122, 0.05);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mission-pillar i {
    font-size: 28px;
    color: #1b5e20;
}
.mission-pillar h3 {
    margin: 0;
    font-size: 20px;
    color: #1a4d7a;
}

.mission-pillar p {
    margin: 0;
    color: #4b5f72;
    line-height: 1.7;
}

.mission-cta {
    position: relative;
    padding: 110px 0;
    background: linear-gradient(180deg, #f5f8fb 0%, #e9f1f7 100%);
    color: #153852;
    overflow: hidden;
}

.mission-cta::before,
.mission-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(255, 107, 53, 0.15) 0%, rgba(255, 107, 53, 0) 70%);
    pointer-events: none;
}

.mission-cta::before {
    width: 420px;
    height: 420px;
    top: -180px;
    right: -120px;
}

.mission-cta::after {
    width: 360px;
    height: 360px;
    bottom: -160px;
    left: -140px;
    background: radial-gradient(circle at center, rgba(26, 77, 122, 0.16) 0%, rgba(26, 77, 122, 0) 70%);
}

.mission-cta-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 34px;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 30px;
    padding: 52px 58px;
    border: 1px solid rgba(26, 77, 122, 0.08);
    box-shadow: 0 32px 70px rgba(17, 44, 67, 0.18);
    backdrop-filter: blur(4px);
}

.mission-cta-card::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 26px;
    border: 1px solid rgba(26, 77, 122, 0.05);
    pointer-events: none;
}

.mission-cta-content {
    display: grid;
    gap: 18px;
}

.mission-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(26, 77, 122, 0.1);
    color: #1a4d7a;
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 700;
}

.mission-cta-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff6b35;
}

.mission-cta-content h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 40px;
    margin: 0;
    color: #123453;
    letter-spacing: -0.02em;
}

.mission-cta-content p {
    margin: 0;
    font-size: 16px;
    line-height: 1.85;
    color: #486178;
}

.mission-cta-actions {
    display: inline-flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.mission-cta .btn-primary {
    box-shadow: 0 14px 32px rgba(255, 107, 53, 0.35);
}

.mission-cta .btn-primary:hover {
    box-shadow: 0 18px 40px rgba(255, 107, 53, 0.4);
}

.mission-cta .btn-outline {
    border-color: rgba(26, 77, 122, 0.3);
    color: #1a4d7a;
    background: rgba(255, 255, 255, 0.7);
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.mission-cta .btn-outline:hover {
    background: rgba(26, 77, 122, 0.1);
    color: #123453;
    box-shadow: 0 14px 30px rgba(18, 52, 83, 0.18);
}

.rich-text h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 32px;
    color: #1a4d7a;
    margin: 32px 0 18px 0;
}

.rich-text h3 {
    color: #1a4d7a;
    margin-top: 28px;
    margin-bottom: 14px;
}

.rich-text p {
    color: #4b5f72;
    line-height: 1.9;
    margin-bottom: 18px;
}

.rich-text ul,
.rich-text ol {
    margin-left: 22px;
    color: #4b5f72;
    line-height: 1.8;
}

.faq-hero {
    position: relative;
    padding: 120px 0 100px;
    background: linear-gradient(160deg, #1a4d7a 0%, #2d5f8f 50%, #133047 100%);
    color: white;
}

.faq-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}

.faq-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 36px;
    position: relative;
    z-index: 1;
    align-items: stretch;
}

.faq-hero-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.faq-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}

.faq-hero h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
    margin: 0;
}

.faq-hero p {
    margin: 0;
    font-size: 16px;
    line-height: 1.9;
    opacity: 0.9;
}

.faq-hero-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.faq-highlight {
    background: rgba(255, 255, 255, 0.12);
    padding: 18px 22px;
    border-radius: 18px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.faq-highlight-number {
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    line-height: 1;
    opacity: 0.6;
}

.faq-hero-media {
    display: flex;
    align-items: stretch;
}

.faq-hero-card {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    border-radius: 24px;
    padding: 38px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: white;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

.faq-hero-card i {
    font-size: 34px;
    color: #ffcf99;
}

.faq-hero-card h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.5;
}

.faq-hero-card p {
    margin: 0;
    line-height: 1.8;
    opacity: 0.85;
}

.faq-section {
    background: #f6f8fb;
    padding: 110px 0;
}

.faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 36px;
    align-items: start;
}

.faq-sidebar-card {
    background: white;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 24px 55px rgba(16, 40, 65, 0.1);
    border: 1px solid rgba(26, 77, 122, 0.06);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-sidebar-card h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    margin: 0;
    color: #1a4d7a;
}

.faq-sidebar-card p {
    margin: 0;
    color: #52647a;
    line-height: 1.8;
}

.faq-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

.faq-sidebar-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #43556b;
    font-weight: 500;
}

.faq-sidebar-list i {
    color: #1b5e20;
}

.faq-sidebar-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #1a4d7a;
    font-weight: 600;
    text-decoration: none;
}

.faq-sidebar-link::after {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
}

.faq-sidebar-link:hover {
    color: #ff6b35;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.faq-item {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(16, 40, 65, 0.08);
    border: 1px solid rgba(26, 77, 122, 0.05);
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-item.active {
    border-color: rgba(27, 94, 32, 0.3);
    box-shadow: 0 26px 55px rgba(27, 94, 32, 0.15);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 26px;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    color: #1a4d7a;
    cursor: pointer;
    transition: color 0.3s ease;
}

.faq-question:focus {
    outline: none;
}

.faq-question-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(26, 77, 122, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1a4d7a;
    flex-shrink: 0;
}

.faq-question-chevron {
    margin-left: auto;
    color: #98a5b5;
    transition: transform 0.3s ease, color 0.3s ease;
}

.faq-item.active .faq-question {
    color: #1b5e20;
}

.faq-item.active .faq-question-icon {
    background: rgba(27, 94, 32, 0.12);
    color: #1b5e20;
}

.faq-item.active .faq-question-chevron {
    transform: rotate(180deg);
    color: #1b5e20;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
}

.faq-answer-inner {
    padding: 0 26px 26px 26px;
    color: #4b5f72;
    line-height: 1.85;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding-top: 6px;
}

.faq-empty {
    background: white;
    border-radius: 24px;
    padding: 60px;
    text-align: center;
    box-shadow: 0 24px 55px rgba(16, 40, 65, 0.08);
    border: 1px solid rgba(26, 77, 122, 0.05);
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

.faq-empty h3 {
    margin: 0;
    font-size: 26px;
    color: #1a4d7a;
}

.faq-empty p {
    margin: 0;
    color: #4b5f72;
    line-height: 1.8;
}

[data-theme="dark"] .mission-hero {
    background: linear-gradient(160deg, rgba(10, 24, 40, 0.92) 0%, rgba(12, 36, 20, 0.88) 55%, rgba(8, 20, 34, 0.94) 100%), url('../images/golkackar.jpg') center/cover;
}

[data-theme="dark"] .mission-overview {
    background: linear-gradient(180deg, rgba(8, 20, 34, 0.96) 0%, rgba(12, 28, 46, 0.94) 100%);
}

[data-theme="dark"] .mission-overview-content,
[data-theme="dark"] .mission-overview-card,
[data-theme="dark"] .mission-pillars,
[data-theme="dark"] .mission-pillars-grid .mission-pillar {
    background: rgba(18, 44, 73, 0.75);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 28px 65px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .mission-overview-card h2,
[data-theme="dark"] .mission-pillars-header h2,
[data-theme="dark"] .mission-pillar h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .mission-overview-card p,
[data-theme="dark"] .mission-overview-card ul li,
[data-theme="dark"] .mission-overview-points span,
[data-theme="dark"] .mission-pillars-header p,
[data-theme="dark"] .mission-pillar p,
[data-theme="dark"] .mission-cta-content p,
[data-theme="dark"] .rich-text p {
    color: var(--text-secondary);
}

[data-theme="dark"] .mission-overview-points span {
    background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .mission-pillar {
    background: rgba(18, 44, 73, 0.7);
}

[data-theme="dark"] .mission-pillar i {
    color: #8dd09b;
}

[data-theme="dark"] .mission-cta {
    background: linear-gradient(145deg, #081422 0%, #10263f 100%);
    color: var(--text-primary);
}

[data-theme="dark"] .mission-cta::before {
    background: radial-gradient(circle at center, rgba(255, 107, 53, 0.28) 0%, rgba(255, 107, 53, 0) 70%);
}

[data-theme="dark"] .mission-cta::after {
    background: radial-gradient(circle at center, rgba(26, 77, 122, 0.42) 0%, rgba(26, 77, 122, 0) 75%);
}

[data-theme="dark"] .mission-cta-card {
    background: rgba(18, 44, 73, 0.7);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 32px 70px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .mission-cta-card::before {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mission-cta-badge {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

[data-theme="dark"] .mission-cta-badge::before {
    background: #ffb089;
}

[data-theme="dark"] .mission-cta-content p {
    color: var(--text-secondary);
}

[data-theme="dark"] .mission-cta .btn-outline {
    background: rgba(8, 20, 34, 0.45);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text-primary);
}

[data-theme="dark"] .mission-cta .btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

[data-theme="dark"] .faq-hero {
    background: linear-gradient(160deg, rgba(8, 20, 34, 0.96) 0%, rgba(12, 28, 46, 0.94) 50%, rgba(8, 20, 34, 0.96) 100%);
}

[data-theme="dark"] .faq-section {
    background: linear-gradient(180deg, rgba(8, 20, 34, 0.96) 0%, rgba(12, 28, 46, 0.94) 100%);
}

[data-theme="dark"] .faq-sidebar-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .faq-empty {
    background: rgba(18, 44, 73, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 28px 65px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .faq-sidebar-card h2,
[data-theme="dark"] .faq-question {
    color: var(--text-primary);
}

[data-theme="dark"] .faq-sidebar-card p,
[data-theme="dark"] .faq-sidebar-list li,
[data-theme="dark"] .faq-answer-inner,
[data-theme="dark"] .faq-empty p {
    color: var(--text-secondary);
}

[data-theme="dark"] .faq-question-icon {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

[data-theme="dark"] .faq-item.active .faq-question-icon {
    background: rgba(27, 94, 32, 0.25);
    color: #8dd09b;
}

[data-theme="dark"] .faq-item.active {
    border-color: rgba(27, 94, 32, 0.35);
    box-shadow: 0 28px 65px rgba(27, 94, 32, 0.3);
}

[data-theme="dark"] .faq-sidebar-link {
    color: #8cb8f0;
}

[data-theme="dark"] .faq-sidebar-link:hover {
    color: #ff9b66;
}
@media (max-width: 1200px) {
    .mission-hero-grid,
    .faq-hero-grid,
    .faq-layout {
        grid-template-columns: 1fr;
    }

    .mission-hero-stats {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .mission-hero-media,
    .faq-hero-media {
        justify-content: center;
    }

    .mission-hero-card,
    .faq-hero-card {
        max-width: 520px;
        margin: 0 auto;
    }

    .faq-layout {
        gap: 24px;
    }
}

@media (max-width: 992px) {
    .mission-hero {
        padding: 110px 0 90px;
    }

    .mission-hero-title {
        font-size: 44px;
    }

    .mission-overview-content {
        padding: 46px;
    }

    .mission-cta-card {
        grid-template-columns: 1fr;
        padding: 44px;
        text-align: center;
    }

    .mission-cta-actions {
        justify-content: center;
    }

    .faq-hero {
        padding: 100px 0 80px;
    }

    .faq-sidebar-card {
        padding: 36px;
    }
}
@media (max-width: 768px) {
    .mission-hero {
        padding: 96px 0 80px;
    }

    .mission-hero-title {
        font-size: 38px;
    }

    .mission-hero-description {
        max-width: none;
    }

    .mission-hero-stats {
        grid-template-columns: 1fr 1fr;
    }

    .mission-hero-card,
    .mission-overview-content,
    .mission-cta-card,
    .faq-hero-card,
    .faq-sidebar-card {
        padding: 32px;
    }

    .mission-pillars-header h2 {
        font-size: 34px;
    }

    .mission-cta-content h2 {
        font-size: 34px;
    }

    .mission-cta-actions {
        width: 100%;
        justify-content: center;
    }

    .faq-hero h1 {
        font-size: 40px;
    }

    .faq-layout {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 576px) {
    .mission-hero {
        padding: 96px 0 80px;
    }

    .mission-hero-title {
        font-size: 38px;
    }

    .mission-hero-description {
        max-width: none;
    }

    .mission-hero-stats {
        grid-template-columns: 1fr;
    }

    .mission-hero-card,
    .mission-overview-content,
    .mission-overview-card,
    .mission-cta-card,
    .faq-hero-card,
    .faq-sidebar-card,
    .faq-item {
        border-radius: 18px;
    }

    .mission-overview-card,
    .faq-item {
        padding: 28px;
    }

    .faq-question {
        padding: 18px 20px;
        font-size: 17px;
    }

    .faq-answer-inner {
        padding: 0 20px 20px 20px;
    }
}

@media (max-width: 992px) {
    .profile-managed-content {
        padding: 38px;
    }

    .profile-managed-layout {
        flex-direction: column;
        gap: 26px;
    }

    .profile-managed-services {
        flex-basis: auto;
        min-width: auto;
    }
}

@media (max-width: 768px) {
    .profile-managed-content {
        padding: 32px;
    }

    .profile-managed-services ul {
        gap: 12px;
    }

    .profile-managed-services ul li {
        padding: 12px 18px 12px 42px;
    }
}

@media (max-width: 576px) {
    .profile-managed-content {
        padding: 28px;
        border-radius: 18px;
    }

    .profile-managed-info h2 {
        font-size: 30px;
    }

    .profile-managed-services ul {
        margin: 0;
    }
}

.profile-leadership {
    background-color: white;
}

.profile-leadership-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    align-items: stretch;
}

.profile-leader-card {
    background-color: var(--surface-soft);
    border-radius: 20px;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 28px;
    padding: 32px;
    box-shadow: 0 20px 45px rgba(16, 40, 65, 0.1);
}

.profile-leader-card--secondary {
    grid-column: span 2;
    background-color: var(--surface-highlight);
    grid-template-columns: 240px minmax(0, 1fr);
}

.profile-leader-photo img {
    width: 100%;
    border-radius: 18px;
    object-fit: cover;
    height: 100%;
}
.profile-leader-role {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1b5e20;
    margin-bottom: 12px;
    font-weight: 600;
}
.profile-leader-content h3 {
    font-size: 26px;
    color: #1a4d7a;
    margin-bottom: 16px;
}

.profile-leader-content p {
    font-size: 15px;
    color: #56697f;
    line-height: 1.8;
}

.profile-leader-highlights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.profile-leader-highlights li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #1a4d7a;
    font-weight: 500;
}

.profile-leader-highlights i {
    color: #1b5e20;
}

.profile-leader-links {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}
.profile-leader-links a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: rgba(26, 77, 122, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a4d7a;
    transition: background-color 0.3s, color 0.3s;
}
.profile-leader-links a:hover {
    background-color: #1a4d7a;
    color: white;
}

.profile-leader-actions {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.profile-leader-actions .btn.btn-outline {
    color: #1a4d7a;
    border: 2px solid rgba(26, 77, 122, 0.35);
    background-color: transparent;
}

.profile-leader-actions .btn.btn-outline:hover,
.profile-leader-actions .btn.btn-outline:focus {
    color: #ffffff;
    border-color: #1a4d7a;
    background-color: #1a4d7a;
}

.profile-crew-card {
    background-color: var(--surface-warm);
    border-radius: 20px;
    padding: 36px;
    box-shadow: 0 20px 45px rgba(27, 94, 32, 0.25);
    display: flex;
    flex-direction: column;
    gap: 18px;
    grid-column: span 2;
}

.profile-crew-card h3 {
    font-size: 24px;
    color: #b45124;
    margin: 0;
}

.profile-crew-card p {
    font-size: 15px;
    color: #7a482b;
    line-height: 1.8;
    margin: 0;
}

.profile-crew-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-crew-tags span {
    background-color: rgba(26, 77, 122, 0.12);
    color: #1a4d7a;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 600;
}

.profile-community {
    background-color: var(--surface-soft);
}

.profile-community-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px;
    align-items: center;
}

.profile-community-card > div {
    background-color: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 20px 45px rgba(16, 40, 65, 0.08);
}

.profile-community-social {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.profile-community-social::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26,77,122,0.12), rgba(27,94,32,0.12));
    z-index: 0;
}

.profile-community-social > * {
    position: relative;
    z-index: 1;
}

.profile-social-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(26, 77, 122, 0.65);
    font-weight: 600;
}

.profile-social-links {
    display: flex;
    gap: 16px;
}

.profile-social-link {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: linear-gradient(135deg, #122c49, #1c4c77);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 15px 30px rgba(18, 44, 73, 0.28);
}

.profile-social-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 36px rgba(27, 94, 32, 0.38);
    color: white;
}

.profile-social-link--secondary {
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
}

.profile-community-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.profile-community-card h3 {
    font-size: 24px;
    color: #1a4d7a;
    margin: 0;
}

.profile-community-card p {
    font-size: 15px;
    color: #56697f;
    line-height: 1.8;
    margin: 0;
}


.profile-community-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.profile-community-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #1a4d7a;
    font-weight: 500;
}

.profile-community-list i {
    color: #1b5e20;
    font-size: 18px;
}

.profile-community-media {
    position: relative;
}

.profile-community-media img {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 25px 60px rgba(16, 40, 65, 0.25);
}

.profile-community-caption {
    position: absolute;
    left: 24px;
    bottom: 24px;
    background-color: rgba(18, 44, 73, 0.9);
    color: white;
    padding: 14px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
}

.profile-cta {
    background-color: white;
}

.profile-cta-card {
    background: linear-gradient(135deg, #1a4d7a 0%, #2d5f8f 100%);
    border-radius: 24px;
    padding: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    box-shadow: 0 30px 70px rgba(16, 40, 65, 0.25);
    color: white;
}

.profile-cta-content h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    margin-bottom: 16px;
    color: white;
}

.profile-cta-content p {
    font-size: 17px;
    line-height: 1.8;
    opacity: 0.9;
    margin: 0;
}

.profile-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.profile-cta .btn-outline {
    border-color: rgba(255, 255, 255, 0.6);
    color: white;
}

.profile-cta .btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

@media (max-width: 1200px) {
    .profile-hero-grid {
        grid-template-columns: 1fr;
    }

    .profile-hero-card {
        max-width: 520px;
        margin: 0 auto;
    }

    .profile-leader-card {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .profile-leader-card--secondary {
        grid-template-columns: 200px minmax(0, 1fr);
    }
}

@media (max-width: 992px) {
    .profile-hero {
        padding: 100px 0 80px;
    }

    .profile-brand-card {
        flex-direction: column;
        text-align: center;
        padding: 40px 36px;
        gap: 32px;
    }

    .profile-brand-info {
        max-width: 560px;
        margin: 0 auto;
    }

    .profile-brand-logo {
        flex: 0 0 160px;
        justify-content: center;
    }

    .profile-hero-title {
        font-size: 44px;
    }

    .profile-values-grid,
    .profile-expertise-grid,
    .profile-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .profile-story-grid,
    .profile-leadership-grid,
    .profile-community-grid {
        grid-template-columns: 1fr;
    }

    .profile-story-media {
        max-width: 520px;
        margin: 0 auto;
    }

    .profile-leader-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .profile-leader-card--secondary {
        grid-column: span 1;
    }

    .profile-crew-card {
        grid-column: span 1;
    }

    .profile-leader-photo img {
        max-height: 320px;
        margin: 0 auto;
    }

    .profile-leader-highlights {
        text-align: left;
    }

    .profile-crew-card {
        text-align: center;
    }

    .profile-crew-tags {
        justify-content: center;
    }

    .profile-cta-card {
        flex-direction: column;
        text-align: center;
    }

    .profile-cta-actions {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .profile-hero {
        padding: 90px 0 70px;
    }

    .profile-hero-highlights {
        grid-template-columns: 1fr;
    }

    .profile-hero-card-inner {
        padding: 32px 28px;
    }

    .profile-hero-stats {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 14px;
        max-width: 100%;
        overflow-x: hidden;
    }

    .profile-hero-stat {
        max-width: 100%;
        overflow: hidden;
        word-wrap: break-word;
    }

    .profile-section-title {
        font-size: 34px;
    }

    .profile-story-content h2 {
        font-size: 30px;
    }

    .profile-story-badge {
        max-width: 220px;
        padding: 16px 20px;
    }

    .profile-timeline-grid {
        grid-template-columns: 1fr;
    }

    .profile-cta-card {
        padding: 36px 28px;
    }
}

@media (max-width: 576px) {
    .profile-hero-title {
        font-size: 36px;
    }

    .profile-brand-card {
        gap: 24px;
    }

    .profile-brand-logo {
        flex: 0 0 140px;
    }

    .profile-hero-card-inner {
        gap: 18px;
    }

    .profile-hero-card {
        margin-top: 16px;
    }

    .profile-hero-stats {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 12px;
        max-width: 100%;
        overflow-x: hidden;
    }

    .profile-hero-stat {
        padding: 14px 10px;
        max-width: 100%;
        overflow: hidden;
        word-wrap: break-word;
    }

    .profile-hero-stat-number {
        font-size: 24px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .profile-hero-stat-label {
        font-size: 11px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .profile-story-badge {
        position: static;
        margin-top: 16px;
    }
}

@media (max-width: 768px) {
    .profile-community-grid {
        grid-template-columns: 1fr;
    }

    .profile-community-card {
        gap: 16px;
    }

    .profile-community-card > div {
        padding: 28px;
    }

    .profile-social-links {
        justify-content: center;
    }

    .profile-social-link {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }
}

@media (max-width: 576px) {
    .profile-community-card > div {
        padding: 24px;
    }

    .profile-social-links {
        gap: 12px;
    }

    .profile-social-link {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }
}

[data-theme="dark"] .profile-overview,
[data-theme="dark"] .profile-values,
[data-theme="dark"] .profile-timeline,
[data-theme="dark"] .profile-community {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .profile-section-title {
    color: white;
}

[data-theme="dark"] .profile-section-description,
[data-theme="dark"] .profile-stat-card p,
[data-theme="dark"] .profile-story-content p,
[data-theme="dark"] .profile-value-card p,
[data-theme="dark"] .profile-expertise-card p,
[data-theme="dark"] .profile-timeline-item p,
[data-theme="dark"] .profile-leader-content p,
[data-theme="dark"] .profile-crew-card p,
[data-theme="dark"] .profile-community-card p {
    color: var(--text-secondary);
}
[data-theme="dark"] .profile-stat-card,
[data-theme="dark"] .profile-value-card,
[data-theme="dark"] .profile-expertise-card,
[data-theme="dark"] .profile-timeline-item,
[data-theme="dark"] .profile-community-card {
    background-color: var(--bg-primary);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .profile-expertise-card {
    background-color: rgba(18, 44, 73, 0.35);
}

[data-theme="dark"] .profile-crew-card {
    background-color: rgba(27, 94, 32, 0.08);
    box-shadow: 0 20px 45px rgba(27, 94, 32, 0.15);
    color: var(--text-primary);
}

[data-theme="dark"] .profile-hero-card {
    color: var(--text-primary);
}

[data-theme="dark"] .profile-hero-card p,
[data-theme="dark"] .profile-hero-card-footer {
    color: var(--text-secondary);
}
[data-theme="dark"] .profile-leader-card {
    background-color: rgba(18, 44, 73, 0.4);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .profile-community-card,
[data-theme="dark"] .profile-managed-content {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .profile-managed {
    background: linear-gradient(180deg, rgba(12, 28, 46, 0.95) 0%, rgba(8, 20, 34, 0.94) 100%);
}

[data-theme="dark"] .profile-managed-content {
    background: rgba(18, 44, 73, 0.68);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .profile-managed-content::before {
    background: radial-gradient(circle at center, rgba(27, 94, 32, 0.5) 0%, rgba(27, 94, 32, 0) 70%);
    opacity: 0.35;
}

[data-theme="dark"] .profile-managed-content::after {
    background: radial-gradient(circle at center, rgba(26, 77, 122, 0.55) 0%, rgba(26, 77, 122, 0) 72%);
    opacity: 0.32;
}

[data-theme="dark"] .profile-managed-info h2,
[data-theme="dark"] .profile-managed-services h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .profile-managed-info p {
    color: var(--text-secondary);
}

[data-theme="dark"] .profile-managed-services ul li {
    background: rgba(10, 24, 40, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
}

.about-card-link:hover i {
    transform: translateX(4px);
}

/* Filters Section */
.filters-section {
    padding: 30px 0;
    background-color: var(--surface-secondary);
    border-bottom: 1px solid #e0e0e0;
}
.filters {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.filter-group {
    flex: 1;
    min-width: 250px;
}

.filter-group label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 8px 20px;
    border: 1px solid #ddd;
    background: white;
    color: var(--text-primary);
    border-radius: 25px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 400;
}

.filter-btn:hover {
    border-color: #1b5e20;
    color: #1b5e20;
}

.filter-btn.active {
    background-color: #1a4d7a;
    border-color: #1a4d7a;
    color: white;
}

/* Tours Grid */
.tours-grid-section {
    padding: 60px 0;
}

.tours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.tour-card-grid {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    color: inherit;
    display: block;
}

.tour-card-grid:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.tour-card-grid .tour-image {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.tour-card-grid .tour-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.tour-card-grid:hover .tour-image img {
    transform: scale(1.05);
}

.tour-card-grid .tour-content {
    padding: 20px;
    overflow: hidden;
    word-wrap: break-word;
    max-width: 100%;
}

.tour-card-grid .tour-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-primary);
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.tour-card-grid .tour-info {
    display: flex;
    gap: 15px;
    margin-top: 12px;
    flex-wrap: wrap;
    max-width: 100%;
    overflow: hidden;
}

.tour-card-grid .tour-type,
.tour-card-grid .tour-destination {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 3px;
    background-color: var(--surface-neutral);
    color: var(--text-secondary);
    font-weight: 500;
}

.tour-card-grid .tour-type {
    background-color: #e3f2fd;
    color: #1976d2;
}

.load-more {
    text-align: center;
    margin-top: 40px;
}

/* Contact Section */
.contact-section {
    padding: 70px 0;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
}

.contact-info h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.contact-info > p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 40px;
    line-height: 1.6;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background-color: #1a4d7a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
}
.contact-text h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.contact-text p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 5px 0;
}
.contact-text a {
    color: #1a4d7a;
    text-decoration: none;
    transition: color 0.3s;
}

.contact-text a:hover {
    color: #1b5e20;
}

/* Contact Form */
.contact-form-wrapper {
    background: #f6f7f9;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.contact-form-wrapper h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 30px;
    color: var(--text-primary);
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--text-primary);
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 18px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    font-family: 'Roboto', sans-serif;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #1a4d7a;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-group select {
    cursor: pointer;
}

/* Dark Mode Styles for New Pages */
[data-theme="dark"] .page-header {
    background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
}

[data-theme="dark"] .breadcrumbs a {
    color: var(--text-primary);
}

[data-theme="dark"] .breadcrumbs span {
    color: var(--text-secondary);
}

[data-theme="dark"] .filters-section {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .filter-group label {
    color: var(--text-primary);
}
[data-theme="dark"] .filter-btn {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="dark"] .filter-btn:hover {
    border-color: #1b5e20;
    color: #1b5e20;
}

[data-theme="dark"] .filter-btn.active {
    background-color: #1a4d7a;
    border-color: #1a4d7a;
    color: white;
}

[data-theme="dark"] .tour-card-grid {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .tour-card-grid .tour-title {
    color: var(--text-primary);
}

[data-theme="dark"] .contact-info h2,
[data-theme="dark"] .contact-form-wrapper h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .contact-info > p {
    color: var(--text-secondary);
}

[data-theme="dark"] .contact-text h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .contact-text p {
    color: var(--text-secondary);
}

[data-theme="dark"] .contact-form-wrapper {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .form-group label {
    color: var(--text-primary);
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus {
    border-color: #1a4d7a;
}

/* Tour Detail Page Styles */
.tour-hero {
    position: relative;
    height: 500px;
    overflow: hidden;
}

.tour-hero-image {
    width: 100%;
    height: 100%;
}

.tour-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tour-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    padding: 60px 0 40px;
    color: white;
}

.tour-breadcrumb {
    margin-bottom: 15px;
    font-size: 14px;
    opacity: 0.9;
}

.tour-breadcrumb a {
    color: white;
    text-decoration: none;
    transition: opacity 0.3s;
}

.tour-breadcrumb a:hover {
    opacity: 0.7;
}

.tour-breadcrumb span {
    opacity: 0.7;
}

.tour-hero-title {
    font-family: 'Oswald', sans-serif;
    font-size: 56px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -2px;
}

.tour-detail-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;
}

.tour-badge-large {
    display: inline-block;
    background-color: #1b5e20;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.tour-highlights {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    padding: 25px;
    background-color: var(--surface-secondary);
    border-radius: 8px;
    flex-wrap: wrap;
}

.tour-highlight {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}

.tour-highlight i {
    color: #1a4d7a;
    font-size: 18px;
}

.tour-description-full {
    margin-bottom: 40px;
}

.tour-description-full h2,
.tour-highlights-list h2,
.tour-itinerary h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.tour-description-full p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 15px;
}

.tour-highlights-list ul {
    list-style: none;
    padding: 0;
}

.tour-highlights-list li {
    padding: 12px 0;
    font-size: 16px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.tour-highlights-list li i {
    color: #1b5e20;
}

.tour-itinerary {
    margin-top: 40px;
}

.itinerary-day {
    margin-bottom: 25px;
    padding: 20px;
    background-color: var(--surface-secondary);
    border-radius: 8px;
    border-left: 4px solid #1a4d7a;
}

.itinerary-day-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.day-number {
    background-color: #1a4d7a;
    color: white;
    padding: 6px 14px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
}

.day-title {
    font-weight: 600;
    font-size: 18px;
    color: var(--text-primary);
}

.itinerary-day p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.tour-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.tour-booking-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    padding: 30px;
    margin-bottom: 30px;
}

.booking-price {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e0e0e0;
}

.price-label {
    display: block;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.price-amount {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #1a4d7a;
}

.btn-block {
    width: 100%;
    margin-bottom: 12px;
}
.btn-secondary {
    background-color: transparent;
    border: 2px solid #1a4d7a;
    color: #1a4d7a;
}

.btn-secondary:hover {
    background-color: #1a4d7a;
    color: white;
}

/* Reservation Form Styles */
.reservation-form-section {
    padding: 40px 20px;
}

.reservation-form-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.reservation-form {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.form-section {
    margin-bottom: 40px;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 8px;
}

.form-section h2 {
    margin: 0 0 25px 0;
    color: #1a4d7a;
    font-size: 24px;
    font-family: 'Oswald', sans-serif;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.form-control {
    width: 100%;
    padding: 12px 18px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    font-family: 'Roboto', sans-serif;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
}

.form-control:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-control:required {
    border-left: 3px solid #3b82f6;
}

.radio-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    color: #1a4d7a;
}

.radio-label:hover {
    border-color: #3b82f6;
    background: #f0f7ff;
}

.radio-label input[type="radio"] {
    margin: 0;
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.radio-label input[type="radio"]:checked + span {
    color: #3b82f6;
    font-weight: 600;
}

.radio-label span {
    color: #1a4d7a;
    font-weight: 500;
    transition: color 0.3s ease;
}

.radio-label:has(input[type="radio"]:checked) {
    border-color: #3b82f6;
    background: #e7f3ff;
}

.form-actions {
    text-align: center;
    margin-top: 30px;
}

.btn-large {
    padding: 16px 32px;
    font-size: 16px;
}

.error-message {
    color: #ef4444;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

.alert-error {
    background: #fee2e2;
    color: #991b1b;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    border: 1px solid #fecaca;
}

.alert-error ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

/* Responsive - Reservation Form */
@media (max-width: 768px) {
    .reservation-form {
        padding: 25px;
    }

    .form-section {
        padding: 20px;
    }

    .radio-group {
        flex-direction: column;
    }

    .radio-label {
        width: 100%;
    }
}

/* Dark Mode - Reservation Form */
[data-theme="dark"] .reservation-form {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .form-section {
    background: var(--bg-secondary);
}

[data-theme="dark"] .form-section h2 {
    color: var(--text-primary);
}
[data-theme="dark"] .form-group label {
    color: var(--text-primary);
}

[data-theme="dark"] .form-control {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .radio-label {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .radio-label:hover {
    background: var(--bg-secondary);
}

[data-theme="dark"] .radio-label:has(input[type="radio"]:checked) {
    background: var(--bg-secondary);
    border-color: #3b82f6;
}

[data-theme="dark"] .alert-error {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fecaca;
}

.booking-info {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.booking-info p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.booking-info i {
    color: #1a4d7a;
}

.tour-includes {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    padding: 30px;
}
.tour-includes h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.tour-includes ul {
    list-style: none;
    padding: 0;
}

.tour-includes li {
    padding: 10px 0;
    font-size: 15px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.tour-includes li i {
    color: #1b5e20;
}

/* Dark Mode for Tour Detail */
[data-theme="dark"] .tour-highlights {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .tour-highlight {
    color: var(--text-primary);
}

[data-theme="dark"] .tour-description-full h2,
[data-theme="dark"] .tour-highlights-list h2,
[data-theme="dark"] .tour-itinerary h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .tour-description-full p {
    color: var(--text-secondary);
}

[data-theme="dark"] .tour-highlights-list li {
    color: var(--text-secondary);
}

[data-theme="dark"] .itinerary-day {
    background-color: var(--bg-secondary);
    border-left-color: #1a4d7a;
}

[data-theme="dark"] .day-title {
    color: var(--text-primary);
}

[data-theme="dark"] .itinerary-day p {
    color: var(--text-secondary);
}

[data-theme="dark"] .tour-booking-card,
[data-theme="dark"] .tour-includes {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .price-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .booking-info p {
    color: var(--text-secondary);
}

[data-theme="dark"] .tour-includes h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .tour-includes li {
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 1200px) {
    .container {
        max-width: 1200px;
        padding: 0 30px;
    }

    .hero-title {
        font-size: 60px;
    }

    .catalog-title {
        font-size: 42px;
    }

    .destinations-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

@media (max-width: 992px) {
    .container {
        padding: 0 25px;
    }

    .hero-title {
        font-size: 48px;
    }

    .section-title {
        font-size: 24px;
    }

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

    .ways-to-go-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

    .newsletter-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}
@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }

    .top-bar {
        padding: 10px 0;
    }

    .top-bar-content {
        flex-direction: row;
        gap: 0;
        align-items: center;
        justify-content: space-between;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .top-bar .logo {
        flex: 1;
    }

    /* 768px altında menü stilleri 992px'teki stilleri kullanır */

    .header-reservation {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }

    .header-reservation-toggle {
        width: 100%;
        justify-content: center;
    }

    .header-reservation-dropdown {
        right: 50%;
        width: min(100vw - 36px, 520px);
        transform: translate(50%, -10px);
    }

    .header-reservation.open .header-reservation-dropdown {
        transform: translate(50%, 0);
    }

    .header-reservation-dropdown::before {
        right: calc(50% - 16px);
    }

    .header-reservation-dropdown .reservation-tabs {
        gap: 12px;
    }

    .reservation-page .reservation-tabs {
        flex-wrap: wrap;
        max-width: none;
    }

    .reservation-page .reservation-tab {
        flex: 1 1 48%;
    }

    /* Remove bridge on mobile */
    .top-nav .dropdown::before {
        display: none;
    }

    .hero {
        height: 60vh;
        min-height: 400px;
        max-height: 600px;
    }

    .hero-title {
        font-size: 36px;
        letter-spacing: -1px;
        margin-bottom: 20px;
    }

    .hero-search-overlay {
        padding: 0 20px;
    }

    .hero .search-form {
        flex-direction: column;
        padding: 12px;
        max-width: 100%;
    }

    .search-field {
        width: 100%;
    }

    .search-field input {
        padding: 12px 18px;
        font-size: 14px;
    }

    .search-btn {
        width: 100%;
        height: 44px;
        justify-content: center;
        margin-top: 8px;
    }

    .hero-dots {
        bottom: 15px;
    }

    .dot {
        width: 8px;
        height: 8px;
    }

    .section {
        padding: 50px 0;
    }

    .section-title {
        font-size: 22px;
        margin-bottom: 25px;
    }

    .carousel-nav {
        display: none !important;
    }

    .tours-carousel-wrapper,
    .regions-carousel-wrapper,
    .rental-carousel-wrapper,
    .blog-carousel-wrapper,
    .media-carousel-wrapper {
        padding: 0;
        margin: 0;
    }

    .tours-carousel,
    .regions-carousel,
    .rental-carousel,
    .blog-carousel,
    .media-carousel {
        padding: 10px 20px;
        gap: 15px;
    }

    .tour-card {
        min-width: 280px;
    }

    .region-card {
        min-width: 240px;
    }

    .region-image {
        width: 240px;
        height: 300px;
    }

    .rental-card {
        min-width: 220px;
        padding: 20px 15px;
    }

    .blog-card {
        min-width: 260px;
    }

    .media-card {
        min-width: 280px;
    }

    .destinations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .destination-icon {
        width: 60px;
        height: 60px;
    }

    .destination-item h3 {
        font-size: 13px;
    }

    .newsletter-form {
        flex-direction: column;
        gap: 12px;
    }

    .newsletter-form input {
        width: 100%;
    }

    .newsletter-form button {
        width: 100%;
    }

    .content-summary-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .summary-category {
        padding: 25px;
    }

    .summary-intro {
        font-size: 16px;
        margin-bottom: 35px;
    }

    .ways-to-go-right,
    .catalog-right {
        height: 250px;
    }

    .catalog-title {
        font-size: 32px;
        letter-spacing: -2px;
    }

    .catalog-description {
        font-size: 15px;
    }

    .btn {
        padding: 12px 24px;
        font-size: 14px;
    }

    .footer-top {
        gap: 32px;
    }

    .footer-top-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .footer-top-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-brand {
        max-width: none;
    }

    .footer-grid {
        gap: 30px;
    }

    .footer-actions {
        gap: 10px;
    }

    .social-icons {
        justify-content: flex-start;
    }
}

/* ============================================
   NEW HOME PAGE SECTIONS STYLES
   ============================================ */

/* Hero Subtitle */
.hero-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.95);
    margin-top: 20px;
    font-weight: 400;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Services Cards Section */
.services-cards {
    background: #f8f9fa;
    padding: 80px 0;
}

.services-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 40px;
}

.service-card {
    background: white;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    text-align: center;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.service-card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
}

.service-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 20px;
    font-family: 'Oswald', sans-serif;
}

.service-card-description {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 25px;
}

.service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #3b82f6;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.service-card-link:hover {
    color: #2563eb;
    gap: 15px;
}

/* Adventure Ready Section */
.adventure-ready {
    padding: 80px 0;
    background: white;
}

.adventure-ready-description {
    font-size: 1.2rem;
    text-align: center;
    color: #555;
    margin: 30px auto 50px;
    max-width: 800px;
    line-height: 1.8;
}

.adventure-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.adventure-option {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 50px 40px;
    border-radius: 16px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.adventure-option:hover {
    transform: translateY(-8px);
    border-color: #3b82f6;
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.15);
}

.adventure-option-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.5rem;
}

.adventure-option-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 15px;
    font-family: 'Oswald', sans-serif;
}

.adventure-option-text {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 25px;
    line-height: 1.6;
}

.adventure-option-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #3b82f6;
    font-weight: 600;
    transition: all 0.3s ease;
}

.adventure-option:hover .adventure-option-link {
    gap: 15px;
}

/* Adventure Detail Sections */
.motorcycle-adventure-detail,
.offroad-adventure-detail {
    padding: 80px 0;
    background: white;
}

.adventure-detail-content {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.adventure-detail-reverse {
    flex-direction: row-reverse;
}

.adventure-detail-image {
    flex: 1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.adventure-detail-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.adventure-detail-image:hover img {
    transform: scale(1.05);
}

.adventure-detail-text {
    flex: 1;
}

.adventure-detail-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 25px;
    font-family: 'Oswald', sans-serif;
}

.adventure-detail-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
}

.adventure-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 35px;
    background: #3b82f6;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.adventure-detail-link:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    gap: 15px;
}

/* Instagram Section */
.instagram-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
    color: white;
    text-align: center;
}

.instagram-section .section-title {
    color: white;
    margin-bottom: 30px;
}

.instagram-content {
    margin-top: 40px;
}
.instagram-link {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 20px 40px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid rgba(255,255,255,0.3);
}

.instagram-link:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.instagram-link i {
    font-size: 2rem;
}

.instagram-placeholder {
    padding: 40px;
    color: rgba(255,255,255,0.9);
}

.instagram-placeholder i {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

/* About Section */
.about-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.about-content {
    max-width: 900px;
    margin: 40px auto 0;
    text-align: center;
}

.about-text {
    font-size: 1.1rem;
    line-height: 1.9;
    color: #555;
    margin-bottom: 25px;
}
.about-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    padding: 15px 35px;
    background: #3b82f6;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.about-link:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    gap: 15px;
}

/* Testimonials Subtitle */
.testimonials-subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 40px;
    font-size: 1rem;
    font-style: italic;
}
/* Reservation CTA Section */
.reservation-cta {
    padding: 100px 0;
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    color: white;
    text-align: center;
}

.reservation-cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.reservation-cta-title {
    font-size: 3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 25px;
    font-family: 'Oswald', sans-serif;
}

.reservation-cta-description {
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.95);
    margin-bottom: 40px;
}

.reservation-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 20px 50px;
    background: white;
    color: #3b82f6;
    text-decoration: none;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.reservation-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    gap: 20px;
}

.reservation-cta-btn i {
    transition: transform 0.3s ease;
}

.reservation-cta-btn:hover i {
    transform: translateX(5px);
}

/* Responsive Styles for New Sections */
@media (max-width: 968px) {
    .services-cards-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .adventure-options {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .adventure-detail-content {
        flex-direction: column !important;
        gap: 40px;
    }

    .adventure-detail-title {
        font-size: 2rem;
    }

    .reservation-cta-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 576px) {
    .profile-community-card > div {
        padding: 24px;
    }

    .profile-social-links {
        gap: 12px;
    }

    .profile-social-link {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }
}

/* -------------------------------------------
   Blog Experience Refresh 2025 Q4
------------------------------------------- */
.profile-hero--blog {
    position: relative;
    padding: 110px 0 100px;
    background: linear-gradient(135deg, #102236 0%, #184063 55%, #102236 100%);
    color: #f5f9ff;
}

.profile-hero--blog::before,
.profile-hero--blog::after {
    content: none;
}

.profile-hero--blog .profile-hero-eyebrow {
    color: rgba(255, 255, 255, 0.76);
    letter-spacing: 0.16em;
}

.profile-hero--blog .profile-hero-description {
    color: rgba(241, 248, 255, 0.86);
    font-size: 18px;
    line-height: 1.8;
}

.profile-hero--blog .profile-hero-highlights li {
    background: rgba(8, 26, 48, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(241, 248, 255, 0.88);
    box-shadow: none;
    backdrop-filter: blur(6px);
}

.profile-hero--blog .profile-hero-highlights i {
    color: #fcd34d;
}

.profile-hero--blog .profile-hero-card {
    background: rgba(247, 250, 255, 0.96);
    border: 1px solid rgba(12, 30, 49, 0.12);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(12, 30, 49, 0.22);
}

.blog-hero-text {
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.blog-hero-search-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.blog-hero-search-group {
    display: flex;
    gap: 12px;
    align-items: center;
}

.blog-hero-search-input {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    padding: 14px 20px;
    background: rgba(15, 33, 54, 0.48);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.blog-hero-search-input i {
    color: rgba(255, 255, 255, 0.78);
    font-size: 18px;
}

.blog-hero-search-input input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    color: #ffffff;
    outline: none;
}

.blog-hero-search-input input::placeholder {
    color: rgba(255, 255, 255, 0.68);
}

.blog-search-button {
    padding: 14px 28px;
    border-radius: 16px;
    border: none;
    background: #f7c948;
    color: #102236;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 14px 30px rgba(247, 201, 72, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-search-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(247, 201, 72, 0.34);
}

.blog-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.blog-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(240, 248, 255, 0.18);
    color: #f1f5f9;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.blog-filter-chip:hover {
    border-color: rgba(255, 255, 255, 0.36);
    color: #0f172a;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 14px 28px rgba(15, 31, 51, 0.22);
}

.blog-filter-chip.is-active {
    background: #f7c948;
    border-color: rgba(247, 201, 72, 0.85);
    color: #0f172a;
    box-shadow: 0 16px 32px rgba(247, 201, 72, 0.3);
}

.blog-filter-chip.is-static {
    border-style: dashed;
    opacity: 0.85;
}

.blog-filter-chip.blog-filter-chip-clear {
    background: rgba(15, 33, 54, 0.52);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f8fbff;
}

.blog-filter-chip.blog-filter-chip-clear:hover {
    background: rgba(255, 255, 255, 0.24);
    color: #0f172a;
}

.blog-hero-card-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(12, 30, 49, 0.1);
}

.blog-hero-card-subtext {
    margin: 0;
    color: #4c5d70;
    font-size: 14px;
    line-height: 1.6;
}

.blog-hero-topics,
.blog-hero-articles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blog-hero-topics li,
.blog-hero-articles li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 16px;
    background: rgba(241, 247, 255, 0.92);
    border: 1px solid rgba(26, 77, 122, 0.08);
}

.blog-hero-topics li a,
.blog-hero-articles li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    text-decoration: none;
    color: #0f2c43;
    font-weight: 600;
}


.blog-detail-hero-grid {
    align-items: stretch;
}

.blog-detail-hero .profile-hero-card {
    background: rgba(247, 250, 255, 0.96);
    border: 1px solid rgba(12, 30, 49, 0.12);
    color: #0f2c43;
}

.blog-detail-hero .profile-hero-card-inner {
    gap: 18px;
}

.blog-detail-share--hero {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.blog-detail-share--hero:hover {
    background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 992px) {
    .profile-hero--blog {
        padding: 90px 0 70px;
    }
}

@media (max-width: 768px) {
    .blog-hero-search-group {
        flex-direction: column;
        align-items: stretch;
    }

    .blog-search-button {
        width: 100%;
    }

    .blog-hero-topics li,
    .blog-hero-articles li {
        flex-direction: column;
        align-items: flex-start;
    }

    .blog-hero-topics li a,
    .blog-hero-articles li a {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

[data-theme="dark"] .profile-hero--blog {
    background: linear-gradient(135deg, rgba(8, 18, 32, 0.95), rgba(26, 77, 122, 0.85));
}

[data-theme="dark"] .blog-filter-chip {
    background: rgba(15, 32, 54, 0.68);
    border-color: rgba(191, 219, 254, 0.22);
    color: #e2e8f0;
}

[data-theme="dark"] .blog-filter-chip.blog-filter-chip-clear {
    background: rgba(8, 17, 31, 0.82);
    border-color: rgba(191, 219, 254, 0.24);
    color: #f8fbff;
}

[data-theme="dark"] .blog-category-filter-title {
    color: #e2e8f0;
}

.blog-catalog {
    padding: 110px 0 130px;
    background: linear-gradient(180deg, rgba(12, 30, 49, 0.02) 0%, #ffffff 58%, rgba(12, 30, 49, 0.02) 100%);
}

.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    gap: 44px;
    align-items: flex-start;
}

.blog-main {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.blog-category-filter {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 8px;
}

.blog-category-filter-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.blog-category-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.blog-featured-card {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(12, 30, 49, 0.12);
    background: rgba(247, 250, 255, 0.96);
    box-shadow: 0 28px 68px rgba(12, 30, 49, 0.14);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.blog-featured-link {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    min-height: 340px;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.blog-featured-media {
    position: relative;
    background: rgba(26, 77, 122, 0.1);
    overflow: hidden;
}

.blog-featured-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, rgba(4, 16, 28, 0.05) 0%, rgba(4, 16, 28, 0.45) 100%);
    opacity: 0.45;
    pointer-events: none;
}

.blog-featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.blog-featured-placeholder {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(135deg, rgba(12, 34, 60, 0.12), rgba(12, 34, 60, 0.12) 12px, rgba(26, 77, 122, 0.12) 12px, rgba(26, 77, 122, 0.12) 24px);
}

.blog-featured-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.94);
}

.blog-featured-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: center;
    font-size: 14px;
    color: rgba(12, 35, 54, 0.68);
}

.blog-featured-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.blog-featured-meta i {
    color: var(--blog-accent);
}

.blog-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(90, 166, 255, 0.16);
    color: #0f2c43;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blog-featured-title {
    margin: 0;
    font-size: 32px;
    line-height: 1.25;
    color: var(--text-primary);
}

.blog-featured-summary {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(12, 35, 54, 0.74);
}

.blog-featured-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--blog-accent);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.blog-featured-cta i {
    transition: transform 0.2s ease;
}

.blog-featured-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 34px 78px rgba(12, 30, 49, 0.18);
}

.blog-featured-card:hover .blog-featured-media img {
    transform: scale(1.05);
}

.blog-featured-card:hover .blog-featured-cta i {
    transform: translateX(4px);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}

.blog-card {
    display: block;
}

.blog-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(12, 30, 49, 0.12);
    border-radius: 22px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: inherit;
    text-decoration: none;
    box-sizing: border-box;
}

.blog-card-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(15, 35, 54, 0.18);
}

.blog-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: rgba(26, 77, 122, 0.1);
    overflow: hidden;
}

.blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card-link:hover .blog-card-media img {
    transform: scale(1.05);
}

.blog-card-placeholder {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(135deg, rgba(12, 34, 60, 0.1), rgba(12, 34, 60, 0.1) 12px, rgba(26, 77, 122, 0.1) 12px, rgba(26, 77, 122, 0.1) 24px);
}

.blog-card-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 24px 26px;
    flex: 1;
    justify-content: space-between;
}

.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    font-size: 13px;
    color: rgba(12, 35, 54, 0.65);
}

.blog-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.blog-card-meta i {
    color: var(--blog-accent);
}

.blog-card-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.35;
    color: var(--text-primary);
}

.blog-card-excerpt {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(12, 35, 54, 0.7);
}

.blog-card-link-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--blog-accent);
    letter-spacing: 0.02em;
}

.blog-single-note {
    padding: 26px 32px;
    border-radius: 18px;
    background: rgba(90, 166, 255, 0.12);
    color: rgba(12, 35, 54, 0.76);
    font-weight: 500;
}

.blog-empty {
    text-align: center;
    padding: 60px;
    border-radius: 24px;
    border: 1px dashed rgba(12, 30, 49, 0.18);
    background: rgba(245, 248, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
}

.blog-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: rgba(26, 77, 122, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blog-accent);
    font-size: 26px;
}

.blog-pagination {
    display: flex;
    justify-content: center;
    padding-top: 16px;
}

.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.sidebar-block {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(12, 30, 49, 0.08);
    border-radius: 22px;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 20px 42px rgba(15, 35, 54, 0.08);
}

.sidebar-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.sidebar-text {
    margin: 0;
    color: rgba(12, 35, 54, 0.7);
    line-height: 1.7;
}
.sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sidebar-list a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sidebar-list a:hover {
    color: var(--blog-accent);
}

.sidebar-list-title {
    font-weight: 600;
}

.sidebar-list-meta {
    font-size: 13px;
    color: rgba(12, 35, 54, 0.55);
}

.sidebar-block-highlight {
    background: linear-gradient(145deg, rgba(26, 77, 122, 0.97), rgba(12, 42, 70, 0.92));
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 28px 54px rgba(12, 42, 70, 0.32);
}

.sidebar-block-highlight .sidebar-title {
    color: #ffffff;
}

.sidebar-block-highlight .sidebar-text {
    color: rgba(233, 242, 255, 0.85);
}

.sidebar-block-highlight .sidebar-list-meta {
    color: rgba(233, 242, 255, 0.7);
}

.sidebar-block-highlight .btn {
    align-self: flex-start;
    box-shadow: 0 16px 32px rgba(4, 23, 43, 0.35);
}
.blog-detail-body {
    padding: 110px 0 140px;
    background: linear-gradient(180deg, rgba(12, 30, 49, 0.03) 0%, #ffffff 55%, rgba(12, 30, 49, 0.04) 100%);
}

.blog-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
    gap: 52px;
    align-items: flex-start;
}

.blog-detail-article {
    display: flex;
    flex-direction: column;
    gap: 52px;
}

.blog-detail-content {
    display: flex;
    flex-direction: column;
    gap: 26px;
    font-size: 17px;
    line-height: 1.85;
    color: rgba(12, 35, 54, 0.84);
}

.blog-detail-content img {
    border-radius: 20px;
    box-shadow: 0 18px 45px rgba(12, 30, 49, 0.16);
}

.blog-detail-content blockquote {
    margin: 24px 0;
    padding: 22px 28px;
    border-left: 4px solid var(--blog-accent);
    border-radius: 0 18px 18px 0;
    background: rgba(90, 166, 255, 0.12);
    color: rgba(12, 35, 54, 0.75);
    font-style: italic;
}

.blog-author-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 26px 30px;
    border-radius: 20px;
    background: rgba(26, 77, 122, 0.08);
    border: 1px solid rgba(12, 30, 49, 0.08);
}

.blog-author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: rgba(26, 77, 122, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blog-accent);
    font-size: 22px;
}

.blog-author-info h3 {
    margin: 0;
    font-size: 20px;
    color: var(--text-primary);
}

.blog-author-info p {
    margin: 6px 0 0;
    font-size: 15px;
    color: rgba(12, 35, 54, 0.7);
}

.blog-author-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(12, 35, 54, 0.55);
}

.blog-detail-back {
    display: flex;
}

.blog-detail-back .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.blog-detail-aside {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.blog-aside-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(12, 30, 49, 0.1);
    border-radius: 22px;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 24px 54px rgba(15, 35, 54, 0.12);
}

.blog-aside-card h3 {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary);
}

.blog-aside-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blog-aside-card ul li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: rgba(12, 35, 54, 0.68);
}

.blog-aside-card ul strong {
    color: var(--text-primary);
}

.blog-related {
    padding: 100px 0 120px;
    background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%);
}

.blog-related .section-heading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 40px;
}

.blog-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
}

@media (max-width: 768px) {
    .blog-related-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .blog-related-grid {
        gap: 16px;
    }
}

.blog-detail-share {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 8px 16px;
    transition: all 0.3s ease;
}

.blog-detail-share:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.blog-detail-share-label {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    margin-right: 4px;
}

.blog-detail-share a,
.blog-detail-share button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
}

.blog-detail-share a:hover,
.blog-detail-share button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.blog-detail-share button.is-copied {
    background: var(--blog-accent);
    color: #ffffff;
}

@media (max-width: 768px) {
    .blog-detail-share {
        padding: 6px 12px;
        gap: 8px;
    }

    .blog-detail-share a,
    .blog-detail-share button {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

.profile-hero--blog .blog-detail-excerpt {
    color: rgba(241, 248, 255, 0.88);
}

.blog-detail-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    font-size: 14px;
    color: rgba(240, 248, 255, 0.85);
}

.blog-detail-stats li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.blog-detail-stats i {
    color: #fcd34d;
    font-size: 14px;
}

mark.search-highlight {
    background: rgba(90, 166, 255, 0.3);
    padding: 0 4px;
    border-radius: 4px;
}

.travel-blog {
    padding: 100px 0;
    background: linear-gradient(180deg, rgba(12, 35, 54, 0.04) 0%, #ffffff 55%, rgba(12, 35, 54, 0.04) 100%);
}

.travel-blog .blog-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 40px;
}

.travel-blog .blog-heading .section-description {
    max-width: 560px;
    color: rgba(12, 35, 54, 0.62);
}

.travel-blog .blog-layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 32px;
}

.travel-blog .blog-featured-card {
    background: linear-gradient(145deg, rgba(12, 35, 54, 0.95), rgba(26, 77, 122, 0.88));
    border: none;
    box-shadow: 0 28px 68px rgba(7, 19, 32, 0.45);
}

.travel-blog .blog-featured-media::after {
    opacity: 0.3;
}

.travel-blog .blog-featured-content {
    background: transparent;
    color: rgba(233, 242, 255, 0.92);
}

.travel-blog .blog-featured-title {
    color: #ffffff;
}

.travel-blog .blog-featured-summary {
    color: rgba(233, 242, 255, 0.82);
}

.travel-blog .blog-featured-meta {
    color: rgba(233, 242, 255, 0.75);
}

.travel-blog .blog-featured-meta i {
    color: rgba(255, 255, 255, 0.8);
}

.travel-blog .blog-featured-cta {
    color: #fcd34d;
}

.travel-blog .blog-card-link {
    background: rgba(255, 255, 255, 0.96);
}

.travel-blog .blog-empty {
    background: rgba(12, 35, 54, 0.06);
    border-color: rgba(12, 35, 54, 0.12);
}

@media (max-width: 1200px) {
    .blog-layout,
    .blog-detail-layout {
        grid-template-columns: 1fr;
    }

    .blog-featured-link {
        grid-template-columns: 1fr;
    }

    .blog-featured-media {
        min-height: 280px;
    }
}

@media (max-width: 992px) {
    .blog-catalog,
    .blog-detail-body,
    .blog-related,
    .travel-blog {
        padding: 90px 0 100px;
    }

    .blog-featured-title {
        font-size: 28px;
    }

    .blog-card-title {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .blog-featured-content {
        padding: 32px;
    }

    .blog-featured-meta {
        font-size: 13px;
    }

    .blog-card-body {
        padding: 22px;
    }

    .blog-card-title {
        font-size: 18px;
    }

    .blog-empty {
        padding: 48px 32px;
    }

    .sidebar-block {
        padding: 24px;
    }

    .travel-blog .blog-heading {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .blog-featured-title {
        font-size: 24px;
    }

    .blog-featured-link {
        min-height: 0;
    }

    .blog-featured-media {
        min-height: 220px;
    }

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

    .blog-detail-content {
        font-size: 16px;
    }

    .blog-detail-article,
    .blog-detail-layout {
        gap: 32px;
    }
}

[data-theme="dark"] .blog-catalog {
    background: linear-gradient(180deg, rgba(12, 30, 49, 0.6) 0%, rgba(9, 15, 28, 0.9) 60%, rgba(12, 30, 49, 0.65) 100%);
}

[data-theme="dark"] .blog-featured-card,
[data-theme="dark"] .blog-card-link,
[data-theme="dark"] .sidebar-block,
[data-theme="dark"] .blog-aside-card {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.16);
}

[data-theme="dark"] .blog-featured-content,
[data-theme="dark"] .blog-card-body,
[data-theme="dark"] .sidebar-text,
[data-theme="dark"] .blog-card-excerpt {
    color: rgba(226, 232, 240, 0.82);
}

[data-theme="dark"] .blog-featured-title,
[data-theme="dark"] .blog-card-title,
[data-theme="dark"] .sidebar-title,
[data-theme="dark"] .blog-aside-card h3 {
    color: rgba(226, 232, 240, 0.94);
}

[data-theme="dark"] .blog-featured-meta,
[data-theme="dark"] .blog-card-meta,
[data-theme="dark"] .sidebar-list-meta {
    color: rgba(148, 163, 184, 0.85);
}

[data-theme="dark"] .blog-empty {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(148, 163, 184, 0.22);
}

[data-theme="dark"] .blog-related {
    background: linear-gradient(180deg, rgba(12, 30, 49, 0.9) 0%, rgba(12, 30, 49, 0.76) 100%);
}

.blog-hero-search-group {
    display: flex;
    gap: 12px;
    align-items: center;
}

.blog-hero-search-input {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    border: none;
}

.blog-hero-search-input i {
    color: var(--blog-accent-dark);
    font-size: 18px;
}

.blog-hero-search-input input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    color: var(--blog-accent-dark);
    outline: none;
}

.blog-search-button {
    padding: 14px 26px;
    border-radius: 16px;
    border: none;
    background: var(--blog-accent);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 14px 30px rgba(31, 106, 202, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-search-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(31, 106, 202, 0.32);
}

.blog-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.blog-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(31, 106, 202, 0.28);
    background: rgba(247, 250, 255, 0.95);
    color: #0f2c43;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.25s ease;
    text-decoration: none;
}

.blog-filter-chip:hover {
    border-color: var(--blog-accent);
    color: var(--blog-accent);
    background: rgba(31, 106, 202, 0.12);
}

.blog-filter-chip.is-active {
    background: var(--blog-accent);
    border-color: var(--blog-accent);
    color: #fff;
    box-shadow: 0 18px 34px rgba(31, 106, 202, 0.32);
}

.blog-filter-chip.is-static {
    border-style: dashed;
    opacity: 0.85;
}

.blog-filter-chip.blog-filter-chip-clear {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.blog-filter-chip.blog-filter-chip-clear:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #0f2c43;
}

.blog-hero-card-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.blog-hero-card-subtext {
    margin: 0;
    color: #4c5d70;
    font-size: 14px;
    line-height: 1.6;
}

.blog-hero-topics,
.blog-hero-articles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blog-hero-topics li,
.blog-hero-articles li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(31, 106, 202, 0.08);
}

.blog-hero-topics li a,
.blog-hero-articles li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    text-decoration: none;
    color: #0f2c43;
    font-weight: 600;
}

.blog-detail-hero-grid {
    align-items: stretch;
}

.blog-detail-hero .profile-hero-card {
    background: rgba(247, 250, 255, 0.96);
    border: 1px solid rgba(12, 30, 49, 0.12);
    color: #0f2c43;
}

.blog-detail-hero .profile-hero-card-inner {
    gap: 18px;
}

.blog-detail-share--hero {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.blog-detail-share--hero:hover {
    background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 992px) {
    .profile-hero--blog {
        padding: 90px 0 70px;
    }
}

@media (max-width: 768px) {
    .blog-hero-search-group {
        flex-direction: column;
        align-items: stretch;
    }

    .blog-search-button {
        width: 100%;
    }

    .blog-hero-topics li,
    .blog-hero-articles li {
        flex-direction: column;
        align-items: flex-start;
    }

    .blog-hero-topics li a,
    .blog-hero-articles li a {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

[data-theme="dark"] .profile-hero--blog {
    background: linear-gradient(135deg, rgba(8, 18, 32, 0.95), rgba(26, 77, 122, 0.85));
}

[data-theme="dark"] .blog-filter-chip {
    background: rgba(31, 106, 202, 0.22);
    border-color: rgba(31, 106, 202, 0.32);
    color: #e2e8f0;
}

[data-theme="dark"] .blog-filter-chip.blog-filter-chip-clear {
    background: rgba(255, 255, 255, 0.22);
    color: #0f172a;
}
@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .hero {
        height: 60vh;
        min-height: 400px;
        max-height: 500px;
    }

    .hero-content {
        padding: 25px 14px 60px;
        gap: 16px;
    }

    .hero-title {
        font-size: 28px;
        letter-spacing: -0.8px;
        line-height: 1.25;
    }

    .hero-search-overlay {
        padding: 0 14px;
    }

    .hero .search-form {
        padding: 12px;
        border-radius: 16px;
    }

    .hero .search-form .search-field input {
        padding: 10px 12px;
        font-size: 13px;
    }

    .hero .search-form .search-btn {
        height: 42px;
        font-size: 13px;
    }

    .hero-dots {
        bottom: 14px;
        gap: 4px;
    }

    .dot {
        width: 7px;
        height: 7px;
    }

    .hero-background img {
        object-position: center;
    }

    .section-title {
        font-size: 20px;
    }

    .destinations-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .content-summary-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .summary-category {
        padding: 20px;
    }

    .summary-intro {
        font-size: 15px;
        margin-bottom: 30px;
    }

    .tour-card {
        min-width: 260px;
    }

    .region-image {
        width: 100%;
        height: 280px;
    }

    .catalog-title {
        font-size: 28px;
    }

    .newsletter-title {
        font-size: 20px;
    }

    /* Page Header Responsive */
    .page-title {
        font-size: 32px;
    }

    .page-description {
        font-size: 16px;
    }

    /* Filters Responsive */
    .filters {
        flex-direction: column;
        gap: 25px;
    }

    /* Tours Grid Responsive */
    .tours-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    /* Contact Section Responsive */
    .contact-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-form-wrapper {
        padding: 25px;
    }

    /* Tour Detail Responsive */
    .tour-hero-title {
        font-size: 36px;
    }

    .tour-detail-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .tour-sidebar {
        position: static;
    }

    .tour-highlights {
        flex-direction: column;
        gap: 15px;
    }

    /* About Page Responsive */
    .services-cards-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .service-card {
        padding: 30px 20px;
    }

    .adventure-option {
        padding: 40px 25px;
    }

    .adventure-option-icon {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }

    .adventure-option-title {
        font-size: 1.5rem;
    }

    .adventure-detail-title {
        font-size: 1.8rem;
    }

    .reservation-cta-title {
        font-size: 1.8rem;
    }

    .reservation-cta-description {
        font-size: 1rem;
    }

    .reservation-cta-btn {
        padding: 15px 30px;
        font-size: 1rem;
    }

    .about-main-title {
        font-size: 36px;
    }

    .about-description {
        font-size: 16px;
        text-align: center;
    }

    .about-cards-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .about-card-content {
        padding: 20px;
    }

    .about-card-title {
        font-size: 20px;
    }
}

/* Dark Mode for About Page */
[data-theme="dark"] .about-content {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .about-main-title {
    color: var(--text-primary);
}

[data-theme="dark"] .about-description {
    color: var(--text-secondary);
}

[data-theme="dark"] .about-card {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .about-card-title {
    color: var(--text-primary);
}

[data-theme="dark"] .about-card-text {
    color: var(--text-secondary);
}
[data-theme="dark"] .about-card-link {
    color: var(--text-primary);
}

[data-theme="dark"] .about-card-link:hover {
    color: #1b5e20;
}

/* Locations Page Styles */
.location-hero {
    background: linear-gradient(135deg, rgba(16, 32, 48, 0.55), rgba(12, 65, 38, 0.45)), url('../images/offroad-jeep.jpg');
    background-size: cover;
    background-position: center;
    padding: 80px 0 60px;
    color: #fff;
}

.location-hero .profile-hero-card {
    backdrop-filter: blur(10px);
    color: #102a40;
}

.location-hero-card .profile-hero-card-inner {
    background: white;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(20, 38, 66, 0.08);
}

.location-hero-stats .profile-hero-stat {
    background: rgba(26, 77, 122, 0.05);
    border-radius: 18px;
    padding: 18px 16px;
}

.location-hero-stats .profile-hero-stat-number {
    color: #0f52ba;
}

.location-hero-stats .profile-hero-stat-label {
    color: #1a4d7a;
}

.location-overview {
    padding: 60px 0 40px;
}

.location-pillar-grid {
    margin-top: 45px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.location-pillar-card {
    background: white;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 20px 45px rgba(19, 32, 54, 0.08);
    border: 1px solid rgba(26, 77, 122, 0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.location-pillar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 60px rgba(26, 77, 122, 0.12);
}

.location-pillar-card i {
    font-size: 26px;
    color: #1a4d7a;
    margin-bottom: 16px;
}

.location-pillar-card h3 {
    font-size: 20px;
    margin-bottom: 12px;
    color: #123652;
}

.location-pillar-card p {
    font-size: 15px;
    color: #516070;
    line-height: 1.65;
}

.location-explorer {
    padding: 40px 0 80px;
    background: linear-gradient(180deg, rgba(19, 32, 54, 0.03), transparent 48%);
}
.location-filter-card {
    background: white;
    border-radius: 28px;
    padding: 36px;
    box-shadow: 0 24px 60px rgba(19, 32, 54, 0.09);
    border: 1px solid rgba(26, 77, 122, 0.08);
    margin-bottom: 48px;
}

.location-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px;
}

.location-filter-header h2 {
    font-size: 26px;
    color: #102a40;
    margin-bottom: 6px;
}

.location-filter-header p {
    color: #516070;
    margin: 0;
}

.location-filter-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.location-filter-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #184061;
    padding: 8px 14px;
    background: rgba(26, 77, 122, 0.08);
    border-radius: 20px;
}

.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    border: 1px solid rgba(26, 77, 122, 0.22);
    background: rgba(26, 77, 122, 0.06);
    color: #1a3655;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.28s ease;
}

.filter-tab:hover {
    background: rgba(26, 77, 122, 0.16);
    border-color: rgba(26, 77, 122, 0.4);
    transform: translateY(-2px);
}

.filter-tab.active {
    background: #1a4d7a;
    border-color: #1a4d7a;
    color: #fff;
    box-shadow: 0 18px 32px rgba(26, 77, 122, 0.25);
}

.search-results-info {
    margin-top: 24px;
    padding: 18px 24px;
    background: rgba(26, 77, 122, 0.08);
    border-radius: 18px;
    border: 1px solid rgba(26, 77, 122, 0.18);
    color: #184061;
    font-weight: 600;
}

.locations-grid {
    display: grid;
}

.locations-grid.enhanced {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 32px;
}

.location-card-elevated {
    background: white;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(17, 38, 61, 0.06);
    box-shadow: 0 28px 70px rgba(12, 26, 44, 0.12);
    display: flex;
    flex-direction: column;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.location-card-elevated:hover {
    transform: translateY(-6px);
    box-shadow: 0 34px 80px rgba(12, 26, 44, 0.18);
}

.location-card-media {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.featured-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1a4d7a, #1b5e20);
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-weight: 700;
    box-shadow: 0 18px 40px rgba(17, 38, 61, 0.28);
}

.location-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.location-card-elevated:hover .location-card-media img {
    transform: scale(1.05);
}

.location-card-body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
}

.location-card-header {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.location-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(26, 77, 122, 0.12);
    color: #1a3655;
}

.location-chip.secondary {
    background: rgba(27, 94, 32, 0.12);
    color: #1b5e20;
}

.location-title {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    letter-spacing: 0.4px;
    color: #0f2c43;
}

.location-description {
    color: #526173;
    line-height: 1.7;
    font-size: 15px;
}

.location-card-footer {
    margin-top: auto;
}

.location-btn-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #1a4d7a;
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 2px solid rgba(26, 77, 122, 0.18);
    transition: gap 0.3s ease, color 0.3s ease;
}

.location-btn-link i {
    transition: transform 0.3s ease;
}

.location-btn-link:hover {
    color: #0f2c43;
    gap: 14px;
}

.location-btn-link:hover i {
    transform: translateX(4px);
}

.no-results {
    text-align: center;
    padding: 70px 30px;
    background: white;
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(12, 26, 44, 0.12);
    border: 1px solid rgba(26, 77, 122, 0.08);
}

.no-results p {
    font-size: 20px;
    margin-bottom: 18px;
    color: #102a40;
}

.no-results-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #1a4d7a;
    text-decoration: none;
    border-bottom: 2px solid rgba(26, 77, 122, 0.22);
}

.location-detail-hero {
    background: linear-gradient(130deg, rgba(16, 42, 64, 0.9), rgba(27, 94, 32, 0.85)), url('../images/hero-bg-2.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 100px 0 70px;
}

.location-detail-hero .profile-hero-text p {
    color: rgba(255, 255, 255, 0.85);
}

.location-detail-highlights li {
    background: rgba(17, 38, 61, 0.42);
    border-radius: 16px;
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.9);
}

.location-gallery-card {
    background: white;
    border-radius: 24px;
    padding: 0;
    box-shadow: 0 20px 50px rgba(12, 26, 44, 0.12);
    border: 1px solid rgba(26, 77, 122, 0.1);
    overflow: hidden;
}
.location-gallery-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.location-gallery-main {
    position: relative;
}

.location-gallery-main-link {
    display: block;
    position: relative;
}

.location-gallery-main-link img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.location-gallery-zoom {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 16px;
    background: rgba(16, 42, 64, 0.75);
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
}

.location-gallery-counter {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 14px;
    background: rgba(16, 42, 64, 0.75);
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
}

.location-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 12px;
    padding: 0 18px 18px;
}

.location-gallery-thumb {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(12, 26, 44, 0.16);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.location-gallery-thumb img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    display: block;
}

.location-gallery-thumb:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(12, 26, 44, 0.18);
}

.location-gallery-card .featured-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
}

.location-lightbox {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(8, 20, 32, 0.92);
    z-index: 2000;
}

.location-lightbox.is-active {
    display: flex;
}

.location-lightbox-close {
    position: absolute;
    top: 28px;
    right: 36px;
    background: rgba(15, 28, 44, 0.6);
    border: none;
    color: #ffffff;
    font-size: 36px;
    line-height: 1;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.location-lightbox-content {
    max-width: 960px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
}

.location-lightbox-image-wrapper {
    width: 100%;
    max-height: 70vh;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.location-lightbox-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0d1b2a;
}

.location-lightbox-nav {
    background: rgba(15, 28, 44, 0.65);
    border: none;
    color: #ffffff;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 18px;
    transition: background 0.25s ease;
}

.location-lightbox-nav:hover {
    background: rgba(26, 77, 122, 0.85);
}

.location-lightbox-thumbs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 12px;
}

.location-lightbox-thumb {
    border: none;
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    height: 68px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    opacity: 0.6;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.location-lightbox-thumb.is-active,
.location-lightbox-thumb:hover {
    transform: translateY(-2px);
    opacity: 1;
}

.vehicle-detail-hero {
    background: linear-gradient(128deg, rgba(13, 32, 54, 0.9), rgba(19, 84, 52, 0.85)), url('../images/hero-bg-3.jpg');
    background-size: cover;
    background-position: center;
    color: #ffffff;
    padding: 96px 0 68px;
}

.vehicle-detail-hero .profile-hero-eyebrow {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 6px 18px;
    color: #ffffff;
}

.vehicle-detail-hero .profile-hero-description {
    color: rgba(255, 255, 255, 0.82);
}

.vehicle-detail-highlights li {
    background: rgba(14, 32, 52, 0.42);
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.88);
    padding: 12px 18px;
}

.vehicle-hero-card .profile-hero-card-inner {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 24px;
    box-shadow: 0 28px 65px rgba(10, 18, 32, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.32);
}

.vehicle-hero-card .profile-hero-card h2,
.vehicle-hero-card .profile-hero-card p {
    color: var(--text-primary);
}

.vehicle-hero-stats .profile-hero-stat {
    background: rgba(26, 77, 122, 0.06);
    border-radius: 18px;
    padding: 18px 16px;
}

.vehicle-hero-stats .profile-hero-stat-number {
    color: #1a4d7a;
}

.vehicle-hero-stats .profile-hero-stat-label {
    color: #305473;
}

.vehicle-story-detail {
    background: linear-gradient(180deg, rgba(18, 38, 58, 0.05), transparent 75%);
}

.vehicle-story-grid {
    align-items: flex-start;
}

.vehicle-description-rich p {
    font-size: 16px;
    line-height: 1.8;
    color: #27394d;
    margin-bottom: 18px;
}

.vehicle-description-rich p:last-child {
    margin-bottom: 0;
}

.vehicle-specifications-panel {
    margin-top: 32px;
    background: white;
    border-radius: 24px;
    padding: 24px 28px;
    box-shadow: 0 18px 48px rgba(12, 26, 44, 0.12);
    border: 1px solid rgba(26, 77, 122, 0.08);
}

.vehicle-specifications-panel h3 {
    margin-bottom: 18px;
    color: #0f2c43;
}

.vehicle-specifications-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px 24px;
    margin: 0;
    padding: 0;
}

.vehicle-specifications-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-weight: 600;
    color: #1a3655;
}

.vehicle-specifications-list strong {
    color: #27496d;
    margin-right: 6px;
}

.vehicle-specifications-list li i {
    font-size: 16px;
    color: #1a4d7a;
    margin-top: 4px;
}

.vehicle-specification-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vehicle-specification-text span {
    font-weight: 500;
    color: #41566f;
}

.vehicle-story-meta {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.vehicle-story-meta span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 16px;
    background: rgba(26, 77, 122, 0.1);
    color: #1a4165;
    font-weight: 600;
}

.vehicle-gallery-card .location-gallery-main-link img {
    height: 320px;
    object-fit: cover;
}

.vehicle-gallery-thumbs img {
    height: 95px;
}

.vehicle-sidecard-section {
    background: white;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(12, 26, 44, 0.12);
    border: 1px solid rgba(26, 77, 122, 0.1);
}

.vehicle-sidecard-section h3 {
    margin-bottom: 16px;
    color: #0f2c43;
}

.vehicle-sidecard-section ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.vehicle-sidecard-section li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0f2c43;
    font-weight: 600;
}

.vehicle-sidecard-section li i {
    color: #1a4d7a;
}

.vehicle-sidecard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.vehicle-sidecard-grid > * {
    height: 100%;
}

.vehicle-availability-card,
.vehicle-reservation-card {
    background: white;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 18px 44px rgba(12, 26, 44, 0.12);
    border: 1px solid rgba(26, 77, 122, 0.1);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vehicle-availability-card h3,
.vehicle-reservation-card h3 {
    margin-bottom: 0;
    color: #0f2c43;
}

.vehicle-availability-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    background: rgba(26, 77, 122, 0.12);
    color: #1a4165;
}

.vehicle-availability-status.available {
    background: rgba(34, 197, 94, 0.18);
    color: #0f7a39;
}

.vehicle-availability-status.rented {
    background: rgba(249, 115, 22, 0.18);
    color: #b45309;
}

.vehicle-availability-status.maintenance {
    background: rgba(248, 113, 113, 0.18);
    color: #b91c1c;
}

.vehicle-reservation-card p {
    margin: 0;
    color: #475569;
}

.vehicle-reservation-card--wide {
    margin-top: 32px;
}

.vehicle-reservation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.vehicle-reservation-card .btn.btn-outline {
    border-color: rgba(26, 77, 122, 0.18);
    color: #1a4d7a;
}

.vehicle-reservation-card .btn.btn-outline:hover {
    border-color: #1a4d7a;
    background: rgba(26, 77, 122, 0.08);
    color: #123652;
}

@media (max-width: 576px) {
    .vehicle-reservation-actions {
        flex-direction: column;
    }
}

.vehicle-lightbox .location-lightbox-image-wrapper {
    max-height: 75vh;
}

.vehicle-lightbox .location-lightbox-thumb {
    height: 72px;
}

@media (max-width: 992px) {
    .vehicle-detail-hero {
        padding: 80px 0 60px;
    }

    .vehicle-gallery-card .location-gallery-main-link img {
        height: 260px;
    }

    .vehicle-specifications-list {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .vehicle-detail-hero {
        padding: 70px 0 56px;
    }

    .vehicle-sidecard-grid {
        grid-template-columns: 1fr;
    }

    .vehicle-detail-highlights li {
        padding: 12px 14px;
    }

    .vehicle-specifications-panel {
        padding: 20px;
    }

    .vehicle-reservation-card,
    .vehicle-availability-card {
        padding: 20px;
    }
}

@media (max-width: 576px) {
    .vehicle-detail-highlights li {
        width: 100%;
    }

    .vehicle-reservation-card .btn + .btn {
        margin-top: 10px;
    }
}

[data-theme=\"dark\"] .vehicle-detail-hero {
    background: linear-gradient(128deg, rgba(14, 28, 46, 0.92), rgba(24, 70, 34, 0.88)), url('../images/hero-bg-3.jpg');
}

[data-theme=\"dark\"] .vehicle-hero-card .profile-hero-card-inner {
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(59, 130, 246, 0.18);
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.65);
}

[data-theme=\"dark\"] .vehicle-specifications-panel,
[data-theme=\"dark\"] .vehicle-availability-card,
[data-theme=\"dark\"] .vehicle-reservation-card,
[data-theme=\"dark\"] .vehicle-sidecard-section {
    background: var(--surface-secondary);
    border: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.55);
}

[data-theme=\"dark\"] .vehicle-specifications-list li,
[data-theme=\"dark\"] .vehicle-reservation-card p {
    color: var(--text-secondary);
}

[data-theme=\"dark\"] .vehicle-story-meta span,
[data-theme=\"dark\"] .vehicle-availability-status {
    background: rgba(59, 130, 246, 0.16);
    color: var(--text-secondary);
}

[data-theme=\"dark\"] .vehicle-availability-status.available {
    background: rgba(34, 197, 94, 0.18);
    color: #bbf7d0;
}

[data-theme=\"dark\"] .vehicle-availability-status.rented {
    background: rgba(249, 115, 22, 0.18);
    color: #fed7aa;
}

[data-theme=\"dark\"] .vehicle-availability-status.maintenance {
    background: rgba(248, 113, 113, 0.18);
    color: #fecaca;
}

[data-theme=\"dark\"] .vehicle-reservation-card .btn.btn-outline {
    border-color: rgba(59, 130, 246, 0.32);
    color: var(--on-surface);
}

[data-theme=\"dark\"] .vehicle-reservation-card .btn.btn-outline:hover {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.5);
}

[data-theme=\"dark\"] .vehicle-detail-highlights li {
    background: rgba(148, 179, 216, 0.18);
}

[data-theme=\"dark\"] .vehicle-description-rich p {
    color: var(--text-secondary);
}

[data-theme=\"dark\"] .vehicle-gallery-card .location-gallery-main-link img {
    background: var(--surface-secondary);
}

[data-theme=\"dark\"] .vehicle-lightbox .location-lightbox-image-wrapper img {
    background: var(--surface-primary);
}

body.lightbox-open {
    overflow: hidden;
}

.location-story-detail {
    padding: 40px 0 90px;
}

.location-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 40px;
}

.location-description-rich p {
    font-size: 16px;
    line-height: 1.8;
    color: #243848;
    margin-bottom: 18px;
}

.location-story-meta {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.location-story-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 16px;
    background: rgba(26, 77, 122, 0.08);
    color: #184061;
    font-weight: 600;
}
.location-sidecard {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.location-sidecard-section {
    background: white;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(12, 26, 44, 0.12);
    border: 1px solid rgba(26, 77, 122, 0.1);
}

.location-sidecard-section h3 {
    margin-bottom: 16px;
    color: #0f2c43;
}

.location-sidecard-section ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.location-sidecard-section li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0f2c43;
    font-weight: 600;
}

.location-sidecard-section li i {
    color: #1a4d7a;
}

.location-map-card {
    background: white;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(12, 26, 44, 0.12);
    border: 1px solid rgba(26, 77, 122, 0.1);
}

.location-map-frame {
    margin: 18px 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(12, 26, 44, 0.18);
}

.location-map-card p {
    font-size: 14px;
    color: #4b5967;
}

.location-tours {
    padding: 60px 0 80px;
    background: linear-gradient(180deg, rgba(16, 42, 64, 0.05), transparent 60%);
}

.location-tours-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 48px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.location-tours-header .profile-section-title {
    margin-bottom: 0;
}

.location-tours-header .profile-section-description {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
}

.location-tours-grid {
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.location-tour-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 58px rgba(12, 26, 44, 0.14);
    border: 1px solid rgba(26, 77, 122, 0.08);
    display: flex;
    flex-direction: column;
}

.location-tour-media img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.location-tour-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.location-tour-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #184061;
    font-weight: 600;
}

.location-tour-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(26, 77, 122, 0.1);
    padding: 6px 12px;
    border-radius: 14px;
}

.location-tour-body h3 {
    font-size: 20px;
    color: #0f2c43;
}
.location-tour-body p {
    color: #4b5967;
    line-height: 1.6;
    flex: 1;
}

.location-tour-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #1a4d7a;
    text-decoration: none;
}

.location-tour-link i {
    transition: transform 0.3s ease;
}

.location-tour-link:hover i {
    transform: translateX(4px);
}

.related-locations {
    padding: 30px 0 90px;
}

.related-locations-grid {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}

.related-location-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(26, 77, 122, 0.08);
    box-shadow: 0 20px 45px rgba(12, 26, 44, 0.12);
    display: flex;
    flex-direction: column;
}
.related-location-media img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}
.related-location-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.related-location-body h3 {
    font-size: 18px;
    color: #0f2c43;
}
/* Responsive - Locations */
@media (max-width: 992px) {
    .location-filter-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .location-gallery-grid {
        grid-template-columns: 1fr;
    }

    .location-story-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .filter-tabs {
        flex-direction: column;
    }

    .filter-tab {
        width: 100%;
        justify-content: center;
    }

    .location-filter-card {
        padding: 28px;
    }

    .locations-grid.enhanced {
        grid-template-columns: 1fr;
    }

    .location-gallery-main,
    .location-gallery-thumbs img {
        height: auto;
    }

    .location-gallery-thumbs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .location-pillar-grid {
        grid-template-columns: 1fr;
    }
}

/* Dark Mode - Locations */
[data-theme="dark"] .location-hero {
    background: linear-gradient(135deg, rgba(26, 77, 122, 0.25), rgba(27, 94, 32, 0.12));
}

[data-theme="dark"] .location-hero-card .profile-hero-card-inner,
[data-theme="dark"] .location-gallery-card,
[data-theme="dark"] .location-pillar-card,
[data-theme="dark"] .location-filter-card,
[data-theme="dark"] .location-card-elevated,
[data-theme="dark"] .location-sidecard-section,
[data-theme="dark"] .location-map-card,
[data-theme="dark"] .location-tour-card,
[data-theme="dark"] .related-location-card,
[data-theme="dark"] .no-results {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    box-shadow: var(--shadow);
}

[data-theme="dark"] .location-tours {
    background: linear-gradient(180deg, rgba(16, 42, 64, 0.15), transparent 60%);
}

[data-theme="dark"] .no-tours {
    background: linear-gradient(135deg, rgba(18, 44, 73, 0.95), rgba(12, 28, 46, 0.98));
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .no-tours h3 {
    color: #ffffff;
}

[data-theme="dark"] .no-tours p {
    color: var(--text-secondary);
}

[data-theme="dark"] .cta-section {
    background: linear-gradient(135deg, rgba(8, 20, 34, 0.98), rgba(12, 28, 46, 0.95));
}

[data-theme="dark"] .cta-section::before {
    background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.05), transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(148, 163, 184, 0.04), transparent 50%);
}

[data-theme="dark"] .location-pillar-card p,
[data-theme="dark"] .location-filter-header p,
[data-theme="dark"] .location-description,
[data-theme="dark"] .location-description-rich p,
[data-theme="dark"] .location-tour-body p,
[data-theme="dark"] .location-map-card p,
[data-theme="dark"] .no-results p {
    color: var(--text-secondary);
}

[data-theme="dark"] .filter-tab {
    background: rgba(26, 77, 122, 0.22);
    border-color: rgba(26, 77, 122, 0.32);
    color: #e1efff;
}

[data-theme="dark"] .filter-tab:hover {
    background: rgba(26, 77, 122, 0.32);
    border-color: rgba(26, 77, 122, 0.5);
}

[data-theme="dark"] .search-results-info {
    background: rgba(26, 77, 122, 0.18);
    border-color: rgba(26, 77, 122, 0.32);
    color: #e1efff;
}

[data-theme="dark"] .location-chip,
[data-theme="dark"] .location-story-meta span,
[data-theme="dark"] .location-filter-meta span,
[data-theme="dark"] .location-tour-meta span {
    background: rgba(26, 77, 122, 0.28);
    color: #e1efff;
}

[data-theme="dark"] .location-gallery-zoom,
[data-theme="dark"] .location-gallery-counter {
    background: rgba(6, 18, 32, 0.85);
    color: #f5f9ff;
}

[data-theme="dark"] .location-lightbox {
    background: rgba(4, 10, 18, 0.94);
}

[data-theme="dark"] .location-title,
[data-theme="dark"] .location-filter-header h2,
[data-theme="dark"] .location-sidecard-section li {
    color: #ffffff;
}

[data-theme="dark"] .location-detail-hero {
    background: linear-gradient(130deg, rgba(10, 23, 36, 0.8), rgba(26, 77, 122, 0.7));
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    background: transparent;
    border: none;
    color: white;
    font-size: 18px;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 15px;
}

.dark-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.dark-mode-toggle:active {
    transform: scale(0.95);
}

[data-theme="dark"] .dark-mode-toggle {
    color: #fbbf24;
}

/* Dark Mode Header Styles */
[data-theme="dark"] .top-bar {
    background: var(--bg-secondary);
    box-shadow: var(--shadow);
}

[data-theme="dark"] .top-nav a {
    color: var(--text-secondary);
}

[data-theme="dark"] .top-nav a:hover {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-menu {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    box-shadow: var(--shadow);
}

[data-theme="dark"] .dropdown-menu a {
    color: var(--text-secondary);
}

[data-theme="dark"] .dropdown-menu a:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Dark Mode Hero Section */
[data-theme="dark"] .hero-slide {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .hero-content h1 {
    color: var(--text-primary);
}

[data-theme="dark"] .hero-content p {
    color: var(--text-secondary);
}

[data-theme="dark"] .search-form input {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .search-form input::placeholder {
    color: var(--text-light);
}

/* Dark Mode Sections */
[data-theme="dark"] .section {
    background: var(--bg-primary);
}

[data-theme="dark"] .section-title {
    color: var(--text-primary);
}

[data-theme="dark"] .section-subtitle {
    color: var(--text-secondary);
}

/* Dark Mode Cards */
[data-theme="dark"] .tour-card,
[data-theme="dark"] .location-card,
[data-theme="dark"] .vehicle-card,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .testimonial-card {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    box-shadow: var(--shadow);
}

[data-theme="dark"] .tour-title,
[data-theme="dark"] .location-title,
[data-theme="dark"] .vehicle-title,
[data-theme="dark"] .blog-title,
[data-theme="dark"] .testimonial-name {
    color: var(--text-primary);
}

[data-theme="dark"] .tour-description,
[data-theme="dark"] .location-description,
[data-theme="dark"] .vehicle-description,
[data-theme="dark"] .blog-excerpt,
[data-theme="dark"] .testimonial-content {
    color: var(--text-secondary);
}

/* Dark Mode Footer */
[data-theme="dark"] .footer {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .footer h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .footer p,
[data-theme="dark"] .footer a {
    color: var(--text-secondary);
}

[data-theme="dark"] .footer a:hover {
    color: var(--text-primary);
}

/* Services Home Section */
.services-home {
    padding: 80px 0;
    background: var(--bg-light);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 50px;
}

.service-item {
    text-align: center;
    padding: 40px 30px;
    background: var(--bg-primary);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.service-icon {
    font-size: 48px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.service-item h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.service-item p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 20px;
}

.service-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.service-link:hover {
    color: var(--primary-hover);
}

/* Adventure Locations Section */
.adventure-locations {
    padding: 100px 0;
    background: linear-gradient(145deg, #f4f9ff 0%, #ffffff 60%);
}

.adventure-locations__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 60px;
    align-items: stretch;
}

.adventure-locations__primary {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.section-eyebrow {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 600;
    color: #1f6aca;
}

.adventure-locations__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.adventure-locations__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px;
    min-height: 200px;
    border-radius: 18px;
    color: #ffffff;
    text-decoration: none;
    overflow: hidden;
    background: radial-gradient(circle at 15% 20%, rgba(255,255,255,0.25), rgba(9,42,70,0.6)), #0b2c46;
}

.adventure-locations__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--card-image);
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.adventure-locations__card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(9, 42, 70, 0.85), rgba(9, 42, 70, 0.45));
}

.adventure-locations__card > * {
    position: relative;
    z-index: 1;
}
.adventure-locations__card-eyebrow {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    opacity: 0.75;
}

.adventure-locations__card strong {
    font-size: 24px;
    font-weight: 700;
}

.adventure-locations__card-link {
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.adventure-locations__card:hover::before {
    opacity: 0.55;
}

.adventure-locations__actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

.link-underlined {
    position: relative;
    font-weight: 600;
    color: #1f6aca;
    text-decoration: none;
}

.link-underlined::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: currentColor;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.link-underlined:hover::after {
    opacity: 1;
}

.adventure-locations__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-content: start;
}

.adventure-locations__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 16px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(31, 106, 202, 0.08);
    box-shadow: 0 10px 30px rgba(15, 81, 120, 0.08);
    color: #12324a;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.adventure-locations__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(15, 81, 120, 0.12);
}

.adventure-locations__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(31, 106, 202, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.adventure-locations__icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.adventure-locations__item-title {
    font-weight: 600;
}

.adventure-locations__item i {
    margin-left: auto;
    color: rgba(18, 50, 74, 0.45);
}

/* Travel Blog Section */
.travel-blog {
    padding: 100px 0;
    background: #ffffff;
}

.blog-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 40px;
}

.blog-heading .section-description {
    max-width: 560px;
    color: rgba(18, 50, 74, 0.68);
}

.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 36px;
}

.blog-featured {
    background: linear-gradient(160deg, rgba(9, 42, 70, 0.85), rgba(9, 42, 70, 0.55));
    border-radius: 24px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    min-height: 320px;
    box-shadow: 0 20px 45px rgba(9, 42, 70, 0.18);
}

.blog-featured__image {
    position: relative;
    display: block;
    overflow: hidden;
}

.blog-featured__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-featured__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(130deg, rgba(9, 25, 39, 0.15), rgba(9, 25, 39, 0.55));
}

.blog-featured:hover .blog-featured__image img {
    transform: scale(1.06);
}

.blog-featured__body {
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    color: #f4f8fb;
}

.blog-featured__title {
    font-size: 28px;
    line-height: 1.3;
}

.blog-featured__title a {
    color: inherit;
    text-decoration: none;
}

.blog-featured__excerpt {
    color: rgba(244, 248, 251, 0.78);
    line-height: 1.7;
}
.blog-featured__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #f5ba42;
    font-weight: 600;
    text-decoration: none;
}

.blog-featured__cta::after {
    content: '\f061';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 13px;
}

.blog-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.blog-list__item {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 18px;
    padding: 18px 20px;
    border-radius: 18px;
    background: #f6f9fc;
    border: 1px solid rgba(18, 50, 74, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-list__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15, 81, 120, 0.18);
}

.blog-list__thumb {
    width: 96px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    display: block;
}
.blog-list__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-list__meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.blog-list__title {
    font-size: 18px;
    line-height: 1.4;
}

.blog-list__title a {
    color: #12324a;
    text-decoration: none;
}

.blog-list__arrow {
    align-self: center;
    color: rgba(18, 50, 74, 0.55);
    font-size: 16px;
    transition: color 0.3s ease;
}

.blog-list__item:hover .blog-list__arrow {
    color: #1f6aca;
}

.blog-date {
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(18, 50, 74, 0.55);
}

.blog-empty {
    color: rgba(18, 50, 74, 0.55);
    font-style: italic;
}

.blog-layout--fallback .blog-featured__body {
    background: rgba(9, 42, 70, 0.85);
}

@media (max-width: 1200px) {
    .adventure-locations__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .adventure-locations__cards {
        grid-template-columns: 1fr 1fr;
    }

    .blog-layout {
        grid-template-columns: 1fr;
    }

    .blog-featured {
        grid-template-columns: 1fr;
    }
}

/* Motorcycle & Off-Road Adventures Sections */
.motorcycle-adventures,
.offroad-adventures {
    padding: 100px 0;
}

.motorcycle-adventures {
    background: var(--bg-light);
}

.offroad-adventures {
    background: linear-gradient(135deg, #0b2c46 0%, #113c5f 50%, #0f2a3e 100%);
}

.adventure-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.adventure-content--offroad .adventure-image img {
    box-shadow: 0 28px 55px rgba(7, 25, 39, 0.45);
}

.offroad-adventures .section-title {
    color: #f4f8fb;
}

.offroad-adventures .adventure-text p {
    color: rgba(244, 248, 251, 0.78);
}

.offroad-adventures .btn {
    background: #f5ba42;
    border-color: #f5ba42;
    color: #0f2a3e;
}

.offroad-adventures .btn:hover {
    background: #fff;
    border-color: #fff;
    color: #0f2a3e;
}

.adventure-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.adventure-text h2 {
    margin-bottom: 20px;
}

.adventure-text p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 30px;
}

/* About Gemakoçi Section */
.about-gemakoci {
    padding: 100px 0;
    background: var(--bg-dark);
    color: var(--text-light);
}

.about-gemakoci .about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-gemakoci .about-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.about-gemakoci .about-text h2 {
    color: var(--text-light);
    margin-bottom: 20px;
}

.about-gemakoci .about-text p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 20px;
}
/* Testimonials Home Section */
.testimonials-home {
    padding: 96px 0;
    background: #f8f9fa;
}
.testimonials-home .section-description {
    text-align: center;
    font-size: 17px;
    color: rgba(18, 50, 74, 0.65);
    margin-bottom: 42px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.testimonials-carousel-wrapper {
    position: relative;
    margin-top: 36px;
}

.testimonials-carousel {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.testimonials-carousel::-webkit-scrollbar {
    display: none;
}

.testimonial-card {
    min-width: 320px;
    background: #ffffff;
    padding: 32px 28px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: left;
    box-shadow: 0 10px 24px rgba(18, 50, 74, 0.08);
    border: 1px solid rgba(18, 50, 74, 0.08);
    scroll-snap-align: start;
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 18px;
}

.testimonial-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #1b4f72, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-avatar .testimonial-initials {
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.testimonial-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.testimonial-author {
    font-weight: 700;
    font-size: 18px;
    color: #12324a;
    margin: 0;
}

.testimonial-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #f4b63d;
    font-size: 14px;
}

.testimonial-text {
    font-size: 17px;
    line-height: 1.8;
    color: rgba(18, 50, 74, 0.85);
    font-style: italic;
}

/* Reservation CTA Section */
.reservation-cta {
    padding: 100px 0;
    background: var(--bg-dark);
    color: var(--text-light);
    text-align: center;
}

.reservation-cta .section-title {
    color: var(--text-light);
    margin-bottom: 20px;
}

.reservation-cta .section-description {
    font-size: 18px;
    color: var(--text-light);
    margin-bottom: 40px;
}

/* Responsive Styles */
@media (max-width: 968px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .adventure-content,
    .about-gemakoci .about-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .testimonial-card {
        min-width: 300px;
    }

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

    .adventure-locations__cards {
        grid-template-columns: 1fr;
    }

    .adventure-locations__actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

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

    .blog-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .blog-featured {
        grid-template-columns: 1fr;
    }

    .blog-featured__body {
        padding: 28px;
    }

    .blog-list__item {
        grid-template-columns: 80px 1fr auto;
    }
}

@media (max-width: 768px) {
    .services-home,
    .motorcycle-adventures,
    .offroad-adventures,
    .about-gemakoci,
    .testimonials-home,
    .reservation-cta {
        padding: 60px 0;
    }

    .service-item {
        padding: 30px 20px;
    }

    .testimonials-home .section-description {
        font-size: 16px;
    }

    .testimonial-card {
        min-width: 260px;
        padding: 28px 24px;
        gap: 16px;
    }

    .testimonial-header {
        gap: 16px;
    }

    .testimonial-avatar {
        width: 56px;
        height: 56px;
    }

    .testimonial-text {
        font-size: 16px;
    }

    .adventure-locations__grid {
        grid-template-columns: 1fr;
    }

    .adventure-locations__actions {
        align-items: stretch;
    }

    .blog-layout {
        gap: 26px;
    }

    .blog-featured {
        border-radius: 18px;
    }

    .blog-featured__body {
        padding: 24px;
    }

    .blog-featured__title {
        font-size: 24px;
    }

    .blog-list__item {
        grid-template-columns: 1fr;
        gap: 12px;
        text-align: left;
    }

    .blog-list__thumb {
        width: 100%;
        height: 160px;
    }

    .blog-list__arrow {
        justify-self: flex-end;
    }
}


/* Header Reservation */
.header-reservation {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 24px;
}

.header-reservation::before {
    content: "";
    position: absolute;
    top: 100%;
    left: -24px;
    right: -24px;
    height: 24px;
    background: transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1399;
}

.header-reservation-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(140deg, #0f5132 0%, #166b3d 55%, #1b7c45 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 14px 28px rgba(15, 81, 50, 0.38);
}

.header-reservation-toggle i {
    font-size: 16px;
}

.header-reservation-toggle:hover,
.header-reservation-toggle:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(15, 81, 50, 0.48);
    outline: none;
}

.header-reservation-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 18px);
    width: 520px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 1400;
}

.header-reservation-dropdown::before {
    content: "";
    position: absolute;
    top: -18px;
    right: 64px;
    width: 32px;
    height: 18px;
    background: transparent;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 18px solid rgba(10, 51, 88, 0.98);
    pointer-events: none;
}

.header-reservation.open .header-reservation-dropdown {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}

.header-reservation.open::before {
    pointer-events: auto;
    opacity: 1;
}

.header-reservation-inner {
    background: linear-gradient(150deg, rgba(10, 51, 88, 0.98) 0%, rgba(26, 77, 122, 0.98) 55%, rgba(33, 97, 150, 0.99) 100%);
    color: #e5ecf5;
    border-radius: 24px;
    box-shadow: 0 36px 68px rgba(7, 20, 39, 0.42);
    padding: 34px 36px 32px;
    position: relative;
    overflow: hidden;
}

.header-reservation-inner::after {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.header-reservation-inner > * {
    position: relative;
    z-index: 2;
}

.header-reservation-dropdown .reservation-tabs {
    margin-bottom: 24px;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.header-reservation-dropdown .reservation-tab {
    background-color: rgba(15, 52, 96, 0.65);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: none;
    flex: 1 1 0;
    justify-content: center;
}

.header-reservation-dropdown .reservation-tab:hover,
.header-reservation-dropdown .reservation-tab:focus-visible {
    background-color: rgba(15, 52, 96, 0.8);
    color: #ffffff;
}

.header-reservation-dropdown .reservation-tab.active {
    background: rgba(15, 52, 96, 0.85);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 18px 38px rgba(6, 19, 36, 0.4);
}

.header-reservation-dropdown .reservation-tab-panel {
    color: #e5ecf5;
}

.reservation-wizard--inline .wizard-toggle {
    display: none;
}

.reservation-wizard--inline .wizard-panel {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    background: transparent;
    color: inherit;
    padding: 0;
    box-shadow: none;
    display: block;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    overflow-x: hidden;
}

.header-reservation-dropdown .reservation-wizard--inline .wizard-panel {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
}

.reservation-wizard--inline .wizard-form {
    background: transparent;
    padding: 0;
    color: inherit;
}

.reservation-wizard--inline .wizard-progress-track {
    background: rgba(255, 255, 255, 0.16);
}

.reservation-wizard--inline .wizard-progress-bar {
    background: rgba(245, 197, 24, 0.9);
}

.reservation-wizard--inline .wizard-progress-step {
    color: rgba(229, 236, 245, 0.55);
}

.reservation-wizard--inline .wizard-progress-step.active {
    color: #ffffff;
}

.reservation-wizard--inline .wizard-step h3 {
    color: #f2f6ff;
}

.reservation-wizard--inline .wizard-step p {
    color: rgba(229, 236, 245, 0.78);
}

.reservation-wizard--inline .wizard-field label {
    color: #f7fbff;
}

.reservation-wizard--inline .form-control,
.reservation-wizard--inline select,
.reservation-wizard--inline input,
.reservation-wizard--inline textarea {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 52, 96, 0.25);
    color: #0f3460;
    box-shadow: 0 8px 18px rgba(5, 16, 32, 0.08);
}

.reservation-wizard--inline .form-control:focus,
.reservation-wizard--inline select:focus,
.reservation-wizard--inline input:focus,
.reservation-wizard--inline textarea:focus {
    border-color: rgba(245, 197, 24, 0.85);
    box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.2);
    background: #ffffff;
}

.reservation-wizard--inline .form-control::placeholder,
.reservation-wizard--inline textarea::placeholder,
.reservation-wizard--inline input::placeholder {
    color: rgba(15, 52, 96, 0.58);
}

.header-reservation-dropdown select option,
.header-reservation-dropdown select optgroup {
    color: #0f3460;
    background-color: var(--surface-primary);
}

.reservation-wizard--inline .wizard-summary ul li span {
    color: rgba(229, 236, 245, 0.65);
}

.reservation-wizard--inline .wizard-summary ul li strong {
    color: #ffffff;
}

.reservation-wizard--inline .alert-error {
    background: rgba(255, 84, 84, 0.15);
    border: 1px solid rgba(255, 107, 107, 0.3);
    color: #ffdede;
}

.wizard-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: inherit;
}

.wizard-progress {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wizard-progress-track {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    overflow: hidden;
}

.wizard-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(135deg, rgba(232, 246, 255, 0.95), rgba(173, 209, 255, 0.95));
    border-radius: 999px;
}

.wizard-progress-steps {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(228, 236, 246, 0.6);
}

.wizard-progress-step.active {
    color: #ffffff;
}

.wizard-body {
    position: relative;
    min-height: 340px;
}

.wizard-step {
    display: none;
    flex-direction: column;
    gap: 16px;
    opacity: 0;
    transform: translateY(14px);
}

.wizard-step.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.wizard-step h3 {
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 4px;
}

.wizard-step p {
    font-size: 14px;
    color: rgba(226, 236, 249, 0.72);
    margin-bottom: 4px;
}
.wizard-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wizard-detail-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.wizard-detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.12);
    color: #f1f7ff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.18s ease;
}

.wizard-detail-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}

.wizard-detail-btn--attention {
    animation: wizardDetailPulse 0.9s ease-in-out 2;
    border-color: #f59e0b !important;
    color: #fffbe6 !important;
}

@keyframes wizardDetailPulse {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
    70% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.wizard-detail-status {
    font-size: 12px;
    font-weight: 600;
    color: rgba(229, 236, 245, 0.72);
    letter-spacing: 0.3px;
    transition: color 0.2s ease;
}

.wizard-detail-status[data-status="complete"] {
    color: #72f5c1;
}

.wizard-detail-status--error {
    color: #fbbf24 !important;
}

.reservation-wizard--page .wizard-detail-btn {
    border-color: rgba(26, 77, 122, 0.22);
    background: rgba(26, 77, 122, 0.08);
    color: #1a4d7a;
}

.reservation-wizard--page .wizard-detail-btn:hover {
    background: rgba(26, 77, 122, 0.14);
    border-color: rgba(26, 77, 122, 0.36);
}

.reservation-wizard--page .wizard-detail-status {
    color: #55647a;
}

.reservation-wizard--page .wizard-detail-status[data-status="complete"] {
    color: #1b7c45;
}

.wizard-field-row,
.wizard-field-options {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.wizard-field-options {
    flex-direction: row;
    gap: 12px;
}
.wizard-field-options--inline .radio-label {
    width: auto;
}

.wizard-field-row .wizard-field {
    flex: 1 1 200px;
}

@media (max-width: 640px) {
    .wizard-field-row {
        flex-direction: column;
        gap: 12px;
    }

    .wizard-field-row--force-inline {
        flex-direction: row !important;
        gap: 16px !important;
    }
}

.wizard-field label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(233, 240, 248, 0.85);
}

.wizard-field select,
.wizard-field input,
.wizard-field textarea {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(226, 236, 249, 0.35);
    font-size: 14px;
    color: #0f172a;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: rgba(236, 243, 252, 0.92);
}

.wizard-field textarea {
    resize: none;
}

.wizard-field select:focus,
.wizard-field input:focus,
.wizard-field textarea:focus {
    border-color: #a5d8ff;
    box-shadow: 0 0 0 3px rgba(137, 197, 255, 0.45);
    outline: none;
}

.wizard-link-underline {
    padding: 0;
    text-decoration: underline;
    color: inherit;
    background: none;
    border: none;
    display: inline;
}

.wizard-link-underline:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.wizard-input-error {
    border-color: #e63946 !important;
    background: #ffffff !important;
    color: #0f172a !important;
}

.wizard-summary {
    margin-top: 6px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f5f9ff;
    box-shadow: inset 0 0 0 1px rgba(12, 32, 56, 0.4);
}

.wizard-summary h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #ffffff;
}
.wizard-summary ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}

.wizard-summary li span {
    color: rgba(226, 236, 249, 0.65);
}

.wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wizard-btn {
    flex: 1;
    border: none;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, transform 0.25s ease;
}

.wizard-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.wizard-btn-prev {
    background: rgba(15, 52, 96, 0.75);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.wizard-btn-next {
    background: rgba(15, 52, 96, 0.85);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.wizard-btn-prev:hover:not(:disabled),
.wizard-btn-next:hover:not(:disabled) {
    background: rgba(15, 52, 96, 0.95);
    color: #ffffff;
}

.wizard-btn-submit {
    background: linear-gradient(140deg, #0f5132 0%, #166b3d 55%, #1b7c45 100%);
    color: #fff;
    box-shadow: 0 12px 28px rgba(15, 81, 50, 0.45);
    display: none;
}

.wizard-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.wizard-success {
    display: none;
    text-align: center;
    padding: 18px;
    border-radius: 14px;
    background: rgba(43, 182, 115, 0.18);
    color: #bff7d8;
    font-weight: 600;
    gap: 8px;
}

.wizard-success i {
    font-size: 28px;
    margin-bottom: 6px;
}

.license-detail-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2400;
}

.license-detail-modal.is-open {
    display: flex;
}

body.license-modal-open {
    overflow: hidden;
}

.license-detail-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 17, 31, 0.68);
}

.license-detail-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(520px, 92vw);
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    padding: 26px 28px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 28px 72px rgba(6, 22, 44, 0.38);
}

.license-detail-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.license-detail-modal__title {
    font-size: 20px;
    font-weight: 700;
    color: #0f1f33;
    margin: 0;
}

.license-detail-modal__subtitle {
    font-size: 13px;
    color: #5a6b82;
    margin: 4px 0 0;
    line-height: 1.4;
}

.license-detail-modal__close {
    border: none;
    background: rgba(15, 33, 55, 0.06);
    color: #4a5b73;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.license-detail-modal__close:hover {
    background: rgba(15, 33, 55, 0.14);
    color: #102742;
}

.license-detail-modal__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    padding-right: 4px;
}

.license-detail-modal__body .wizard-field label {
    color: #22344c;
}

.license-detail-modal__body .wizard-field input,
.license-detail-modal__body .wizard-field textarea,
.license-detail-modal__body .wizard-field select {
    background: #f4f6fb;
    border: 1px solid rgba(26, 77, 122, 0.15);
    color: #112132;
}

.license-modal-options .license-modal-option {
    background: rgba(26, 77, 122, 0.08);
    border-radius: 999px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1a4d7a;
}

.license-modal-options .license-modal-option input {
    accent-color: #1a4d7a;
}

.license-detail-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 18px;
}

.license-modal-btn {
    border: none;
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.license-modal-btn--ghost {
    background: rgba(26, 77, 122, 0.1);
    color: #1a4d7a;
}

.license-modal-btn--ghost:hover {
    background: rgba(26, 77, 122, 0.15);
}

.license-modal-btn--primary {
    background: linear-gradient(135deg, #1a4d7a 0%, #1b7c45 100%);
    color: #ffffff;
    box-shadow: 0 12px 32px rgba(26, 77, 122, 0.28);
}

.license-modal-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 36px rgba(26, 77, 122, 0.32);
}

@media (max-width: 520px) {
    .license-detail-modal__dialog {
        padding: 24px;
        border-radius: 18px;
    }

    .license-detail-modal__body {
        gap: 14px;
    }
}

/* Hero Reservation Wizard */
.hero {
    position: relative;
}

.hero-reservation-overlay {
    position: absolute;
    left: 60px;
    bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 440px;
    z-index: 30;
    text-align: left;
}

.hero-reservation-intro {
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #f8fbff;
}

.hero-reservation-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: rgba(15, 81, 50, 0.45);
    color: #e7f7ef;
    backdrop-filter: blur(6px);
}

.hero-reservation-title {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
}

.hero-reservation-text {
    font-size: 16px;
    line-height: 1.6;
    color: #d7e8ff;
    max-width: 420px;
}

.reservation-wizard--hero {
    margin-left: 0;
}

.reservation-wizard--hero .wizard-toggle {
    padding: 14px 30px;
    font-size: 16px;
    box-shadow: 0 16px 34px rgba(15, 81, 50, 0.42);
}

.reservation-wizard--hero .wizard-panel {
    left: 0;
    right: auto;
    top: calc(100% + 24px);
    transform: none;
}

.reservation-wizard--hero .wizard-panel::before {
    left: 48px;
    right: auto;
}
.hero-reservation-overlay + .hero-dots {
    position: relative;
    z-index: 20;
}

@media (max-width: 1200px) {
    .hero-reservation-overlay {
        left: 40px;
        bottom: 60px;
        max-width: 420px;
    }
}
@media (max-width: 992px) {
    .hero-reservation-overlay {
        left: 50%;
        transform: translateX(-50%);
        align-items: center;
        text-align: center;
        max-width: 500px;
    }

    .hero-reservation-text {
        max-width: 100%;
    }

    .reservation-wizard--hero .wizard-panel::before {
        left: calc(50% - 16px);
    }
}

@media (max-width: 768px) {
    .hero-reservation-overlay {
        position: static;
        transform: none;
        margin: 20px auto 0;
        padding: 0 20px 40px;
        align-items: stretch;
        text-align: left;
        max-width: 100%;
    }

    .hero-reservation-intro {
        align-items: flex-start;
    }

    .hero-reservation-title {
        font-size: 28px;
    }

    .reservation-wizard--hero .wizard-toggle {
        width: 100%;
        justify-content: center;
    }

    .reservation-wizard--hero .wizard-panel {
        position: static;
        transform: none;
        margin-top: 16px;
    }
}

body.dark-mode .reservation-wizard .wizard-panel {
    background: linear-gradient(145deg, rgba(10, 51, 88, 0.92), rgba(18, 89, 152, 0.9));
    box-shadow: 0 26px 60px rgba(2, 6, 16, 0.75);
}

body.dark-mode .reservation-wizard .wizard-panel::before {
    border-bottom-color: rgba(18, 89, 152, 0.9);
}

body.dark-mode .wizard-field select,
body.dark-mode .wizard-field input,
body.dark-mode .wizard-field textarea {
    background: rgba(236, 243, 252, 0.92);
    border-color: rgba(226, 236, 249, 0.35);
    color: #0f172a;
}

@media (max-width: 1200px) {
    .reservation-wizard .wizard-panel {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .reservation-wizard .wizard-panel::before {
        right: calc(50% - 16px);
    }
}

@media (max-width: 768px) {
    .reservation-wizard {
        width: 100%;
        margin: 20px 0 0;
    }

    .reservation-wizard .wizard-toggle {
        width: 100%;
        justify-content: center;
    }

    .reservation-wizard .wizard-panel {
        position: static;
        width: 100%;
        transform: none;
        padding: 24px 20px 26px;
        margin-top: 16px;
        max-height: calc(100vh - 220px);
        overflow-y: auto;
        box-shadow: 0 18px 32px rgba(10, 19, 49, 0.18);
    }

    .reservation-wizard .wizard-panel::before {
        display: none;
    }

    .wizard-progress-steps {
        flex-wrap: wrap;
        gap: 8px;
        row-gap: 4px;
    }

    .wizard-body {
        min-height: 0;
    }

    .wizard-step {
        gap: 14px;
    }

    .wizard-footer {
        flex-direction: column;
    }

    .wizard-btn {
        width: 100%;
    }
}

/* Reservation Page Wizard */
.reservation-page {
    position: relative;
    padding: 100px 0 120px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
    overflow: hidden;
}

.reservation-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 15%, rgba(26, 77, 122, 0.08), transparent 50%),
                radial-gradient(circle at 80% 30%, rgba(27, 124, 69, 0.06), transparent 55%);
    pointer-events: none;
}

.reservation-page .container {
    position: relative;
    z-index: 2;
}

.reservation-page-intro {
    max-width: 620px;
    margin: 0 auto 42px;
    text-align: center;
    color: #1f2b3d;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reservation-page-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.45px;
    text-transform: uppercase;
    background: rgba(26, 77, 122, 0.1);
    color: #1a4d7a;
    border: 1px solid rgba(26, 77, 122, 0.18);
}
.reservation-page-title {
    font-size: 34px;
    font-weight: 700;
    color: #102337;
    letter-spacing: 0.4px;
}
.reservation-page-text {
    font-size: 17px;
    line-height: 1.7;
    color: #4a5c72;
}

.reservation-tabs {
    display: flex;
    gap: 16px;
    margin: 0 auto 32px;
    justify-content: center;
    flex-wrap: wrap;
}

.reservation-page .reservation-tabs {
    flex-wrap: nowrap;
    justify-content: space-between;
    max-width: 520px;
}

.reservation-page .reservation-tab {
    flex: 1 1 0;
    justify-content: center;
}

.reservation-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border: 1px solid rgba(26, 77, 122, 0.28);
    border-radius: 999px;
    background-color: var(--surface-primary);
    color: #1a4d7a;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.25px;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(15, 37, 64, 0.08);
}

.reservation-tab:hover,
.reservation-tab:focus {
    background-color: var(--surface-info);
    border-color: rgba(26, 77, 122, 0.45);
    color: #0f3460;
    outline: none;
}

.reservation-tab.active {
    background: linear-gradient(135deg, #1a4d7a 0%, #1b7c45 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 20px 45px rgba(15, 37, 64, 0.18);
}

.reservation-tab span {
    line-height: 1.2;
}

.reservation-tab-panels {
    position: relative;
}

.reservation-tab-panel {
    display: none;
}

.reservation-tab-panel.active {
    display: block;
}

.reservation-wizard--page {
    max-width: 960px;
    margin: 0 auto;
}

.reservation-wizard--page .wizard-toggle {
    display: none;
}


.reservation-wizard--page .wizard-panel {
    position: relative;
    right: auto;
    left: auto;
    top: 0;
    width: 100%;
    margin-top: 0;
    background: #ffffff;
    color: #1f2b3d;
    box-shadow: 0 40px 90px rgba(15, 37, 64, 0.12);
    border-radius: 28px;
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.reservation-wizard--page .wizard-panel::before {
    display: none;
}

.reservation-wizard--page .reservation-form {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.reservation-wizard--page .wizard-form {
    padding: 44px 52px 48px;
}

.reservation-wizard--page .wizard-step {
    gap: 26px;
}

.reservation-wizard--page .wizard-progress-track {
    background: #e0e8f3;
}

.reservation-wizard--page .wizard-progress-bar {
    background: linear-gradient(135deg, #1a4d7a 0%, #1b7c45 100%);
}

.reservation-wizard--page .wizard-progress-steps {
    color: #9baac1;
}

.reservation-wizard--page .wizard-progress-step.active {
    color: #1a4d7a;
}

.reservation-wizard--page .wizard-step h3 {
    color: #102337;
}

.reservation-wizard--page .wizard-step p {
    color: #51627a;
}

.reservation-wizard--page .wizard-field label {
    color: #25364f;
    font-weight: 600;
}

.reservation-wizard--page .wizard-field select,
.reservation-wizard--page .wizard-field input,
.reservation-wizard--page .wizard-field textarea {
    color: #0f172a;
}

.wizard-fieldset {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    padding: 22px 26px 26px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: #f1f7ff;
}

.wizard-fieldset-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(225, 237, 255, 0.85);
}

.wizard-fieldset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
}

.reservation-wizard--page .wizard-fieldset {
    background: #ffffff;
    border: 1px solid #dce4f1;
    border-radius: 20px;
    padding: 24px 28px;
    color: #1f2b3d;
    box-shadow: 0 18px 40px rgba(15, 37, 64, 0.08);
}

.reservation-wizard--page .wizard-fieldset-title {
    color: #1a4d7a;
}

.reservation-wizard--page .form-group label {
    color: #334155;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.reservation-wizard--page .form-control {
    background: #f8fafc;
    border: 1px solid #d3deec;
    color: #0f172a;
    border-radius: 12px;
    padding: 13px 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.reservation-wizard--page .form-control:focus {
    border-color: #1a4d7a;
    box-shadow: 0 0 0 3px rgba(26, 77, 122, 0.18);
    outline: none;
}

.reservation-wizard--page .radio-group {
    gap: 16px;
}

.reservation-wizard--page .radio-label {
    background: #ffffff;
    border: 1px solid #dce4f1;
    border-radius: 14px;
    color: #1a4d7a;
    padding: 14px 22px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.reservation-wizard--page .radio-label span {
    color: #1a4d7a;
}

.reservation-wizard--page .radio-label:hover {
    border-color: rgba(27, 124, 69, 0.45);
    box-shadow: 0 8px 20px rgba(13, 75, 41, 0.08);
}

.reservation-wizard--page .radio-label:has(input[type="radio"]:checked) {
    border-color: #1b7c45;
    background: rgba(27, 124, 69, 0.08);
    color: #125235;
}

.reservation-wizard--page .radio-label input[type="radio"] {
    accent-color: #1b7c45;
}

.reservation-wizard--page .wizard-fieldset.wizard-note {
    background: rgba(27, 124, 69, 0.08);
    border: 1px solid rgba(27, 124, 69, 0.16);
    color: #125235;
    font-size: 14px;
    line-height: 1.7;
    box-shadow: none;
}

.reservation-wizard--page .wizard-summary {
    margin-top: 10px;
    background: #f5f9ff;
    border: 1px solid #d9e4f5;
    border-radius: 20px;
    color: #1f2b3d;
    box-shadow: none;
}

.reservation-wizard--page .wizard-summary h4 {
    color: #1a4d7a;
}

.reservation-wizard--page .wizard-summary li span {
    color: #5a6b82;
}

.reservation-wizard--page .error-message {
    color: #d43838;
}

.reservation-wizard--page .alert-error {
    background: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;
}

.reservation-wizard--page .wizard-btn {
    border-radius: 14px;
}

.reservation-wizard--page .wizard-btn-prev {
    background: #e6ecf6;
    color: #1a4d7a;
}

.reservation-wizard--page .wizard-btn-next {
    background: #1a4d7a;
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(26, 77, 122, 0.26);
}

.reservation-wizard--page .wizard-btn-submit {
    background: linear-gradient(135deg, #1a4d7a 0%, #1b7c45 100%);
    color: #ffffff;
    box-shadow: 0 18px 32px rgba(26, 77, 122, 0.28);
}

.reservation-wizard--page .wizard-btn:hover:not(:disabled) {
    transform: translateY(-2px);
}

@media (max-width: 992px) {
    .reservation-page {
        padding: 80px 0 100px;
    }

    .reservation-wizard--page .wizard-form {
        padding: 32px 30px 36px;
    }
}

@media (max-width: 768px) {
    .reservation-page {
        padding: 60px 0 80px;
    }

    .reservation-page-intro {
        text-align: left;
        align-items: flex-start;
    }

    .reservation-page-title {
        font-size: 30px;
    }

    .reservation-page-text {
        font-size: 16px;
    }

    .reservation-wizard--page .wizard-form {
        padding: 24px 20px 28px;
    }

    .wizard-fieldset {
        padding: 20px;
    }

    .wizard-fieldset-grid {
        grid-template-columns: 1fr;
    }
}

.radio-label.wizard-input-error {
    border-color: rgba(230, 57, 70, 0.85) !important;
    background: #ffffff !important;
    color: #0f172a !important;
}

/* Vehicles Page */
.vehicles-hero {
    position: relative;
    padding: 120px 0 100px;
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
}
.vehicles-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10, 25, 41, 0.85), rgba(7, 36, 61, 0.75));
    backdrop-filter: blur(6px);
    z-index: 1;
}

.vehicles-hero .container {
    position: relative;
    z-index: 2;
}

.vehicles-hero-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 48px;
    align-items: center;
}

.vehicles-hero-text {
    grid-column: span 7;
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: #ffffff;
}

.vehicles-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

.vehicles-hero-title {
    font-size: 48px;
    line-height: 1.1;
    font-weight: 700;
    color: #ffffff;
}

.vehicles-hero-description {
    font-size: 18px;
    max-width: 520px;
    color: rgba(255, 255, 255, 0.95);
}

.vehicles-hero-metrics {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    margin: 0;
    padding: 0;
}

.vehicles-hero-metrics li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
}

.vehicles-hero-metrics li span {
    color: rgba(255, 255, 255, 0.95);
}

.vehicles-hero-metrics i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ffffff;
}

.vehicles-hero-tabs {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
}
.vehicles-hero-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.25s ease;
}
.vehicles-hero-tab-count {
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
}

.vehicles-hero-tab:hover,
.vehicles-hero-tab:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}
.vehicles-hero-tab.active {
    color: #0f172a;
    background: #fcd34d;
    box-shadow: 0 8px 20px rgba(252, 211, 77, 0.35);
}
.vehicles-hero-tab.active .vehicles-hero-tab-count {
    opacity: 0.9;
    color: #0f172a;
}

.vehicles-hero-card {
    grid-column: span 5;
}

.vehicles-hero-card-inner {
    background: rgba(10, 25, 41, 0.78);
    border-radius: 28px;
    padding: 36px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 25px 60px rgba(4, 9, 20, 0.38);
    display: flex;
    flex-direction: column;
    gap: 22px;
    color: rgba(241, 245, 249, 0.95);
}

.vehicles-hero-card-inner h2 {
    font-size: 22px;
    margin: 0;
    color: #fff;
}

.vehicles-hero-card-inner p {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(241, 245, 249, 0.85);
}

.vehicles-hero-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.vehicles-hero-card-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: rgba(241, 245, 249, 0.92);
}

.vehicles-hero-card-list i {
    margin-top: 3px;
    color: #34d399;
}

.vehicles-hero-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Özel buton grupları için ekstra düzenlemeler - !important ile güçlendirildi */
.profile-hero-cta .btn,
.vehicles-hero-card-footer .btn,
.calendar-cta-actions .btn,
.no-tours .btn,
.cta-section .btn,
.cta-content .btn,
.btn-large,
.no-tours a.btn,
.cta-section a.btn,
.cta-content a.btn {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.5 !important;
    min-height: 44px !important;
    padding: 12px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* No Tours Section - Tur bulunamadığında gösterilen bölüm */
.no-tours {
    text-align: center;
    padding: 80px 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 255, 0.98));
    border-radius: 24px;
    border: 1px solid rgba(26, 77, 122, 0.1);
    box-shadow: 0 20px 50px rgba(12, 26, 44, 0.08);
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

.no-tours h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 32px;
    color: #0f2c43;
    margin: 0;
    line-height: 1.3;
}

.no-tours p {
    font-size: 16px;
    line-height: 1.7;
    color: #4b5967;
    margin: 0;
    max-width: 560px;
}

.no-tours .btn {
    margin-top: 8px;
}

/* CTA Section - Call to Action bölümü */
.cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(15, 42, 67, 0.98), rgba(26, 77, 122, 0.95));
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1), transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(148, 163, 184, 0.08), transparent 50%);
    pointer-events: none;
}

.cta-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    color: #ffffff;
}

.cta-content h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.cta-content p {
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    max-width: 600px;
}

.cta-content .btn {
    margin-top: 8px;
}

.cta-content .btn-primary {
    background: #ffffff;
    color: #1a4d7a;
    border-color: #ffffff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.cta-content .btn-primary:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.btn-large {
    font-size: 18px;
    padding: 16px 32px;
    min-height: 56px;
}

/* Responsive - Location Tours ve CTA Section */
@media (max-width: 768px) {
    .location-tours {
        padding: 40px 0 60px;
    }

    .location-tours-header {
        margin-bottom: 32px;
        gap: 12px;
    }

    .location-tours-header .profile-section-title {
        font-size: 28px;
    }

    .location-tours-header .profile-section-description {
        font-size: 15px;
    }

    .location-tours-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
    }

    .no-tours {
        padding: 60px 20px;
        gap: 20px;
    }

    .no-tours h3 {
        font-size: 26px;
    }

    .no-tours p {
        font-size: 15px;
    }

    .cta-section {
        padding: 60px 0;
    }

    .cta-content {
        gap: 16px;
    }

    .cta-content h2 {
        font-size: 28px;
    }

    .cta-content p {
        font-size: 16px;
    }

    .btn-large {
        font-size: 16px;
        padding: 14px 28px;
        min-height: 52px;
    }
}

@media (max-width: 576px) {
    .location-tours {
        padding: 32px 0 48px;
    }

    .location-tours-header {
        margin-bottom: 24px;
    }

    .location-tours-header .profile-section-title {
        font-size: 24px;
    }

    .location-tours-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .no-tours {
        padding: 48px 16px;
        gap: 16px;
        border-radius: 20px;
    }

    .no-tours h3 {
        font-size: 22px;
    }

    .no-tours p {
        font-size: 14px;
    }

    .cta-section {
        padding: 48px 0;
    }

    .cta-content h2 {
        font-size: 24px;
    }

    .cta-content p {
        font-size: 15px;
    }

    .btn-large {
        font-size: 15px;
        padding: 12px 24px;
        min-height: 48px;
        width: 100%;
        max-width: 100%;
    }
}

.vehicles-insights {
    background: var(--bg-secondary);
    padding: 90px 0;
}

.vehicles-insights-header {
    max-width: 760px;
    margin: 0 auto 48px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
}

.vehicles-insights-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--primary-color);
    background: rgba(26, 77, 122, 0.14);
}

.vehicles-insights-header h2 {
    font-size: 36px;
    color: var(--text-primary);
    margin: 0;
}

.vehicles-insights-header p {
    color: var(--text-secondary);
    font-size: 17px;
    line-height: 1.7;
    margin: 0;
}

.vehicles-insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.vehicles-insights-card {
    position: relative;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: var(--bg-primary);
    border-radius: 22px;
    border: 1px solid var(--border-color);
    padding: 26px 28px;
    box-shadow: var(--shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.vehicles-insights-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(26, 77, 122, 0.22);
}
.vehicles-insights-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(26, 77, 122, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 20px;
    flex-shrink: 0;
}

.vehicles-insights-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vehicles-insights-label {
    font-size: 13px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-light);
}

.vehicles-insights-value {
    font-size: 34px;
    font-weight: 700;
    color: var(--text-primary);
}

.vehicles-insights-body p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 8px 0 0 0;
    padding: 0;
}

.vehicles-insights-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vehicles-insights-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    padding: 0;
}

.vehicles-insights-list-label {
    font-weight: 600;
    color: var(--text-primary);
}

.vehicles-insights-list-value {
    font-variant-numeric: tabular-nums;
}

.vehicles-category-overview {
    background: var(--bg-primary);
    padding: 70px 0 40px;
}

.vehicles-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

.vehicles-category-card {
    position: relative;
    background: var(--bg-secondary);
    border-radius: 24px;
    border: 1px solid var(--border-color);
    padding: 32px 32px 36px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vehicles-category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.vehicles-category-header h2 {
    font-size: 26px;
    margin: 0;
    color: var(--text-primary);
}

.vehicles-category-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.7;
}

.vehicles-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: rgba(26, 77, 122, 0.12);
    color: var(--primary-color);
}

.vehicles-category-card.vehicles-category-demir_atlar {
    background: linear-gradient(180deg, rgba(9, 26, 43, 0.65), rgba(9, 26, 43, 0.18)), var(--bg-primary);
    border-color: rgba(12, 42, 70, 0.32);
    color: #e6f1ff;
}

.vehicles-category-card.vehicles-category-demir_atlar .vehicles-category-badge {
    background: rgba(59, 130, 246, 0.15);
    color: #bfdbfe;
}

.vehicles-category-card.vehicles-category-demir_atlar .vehicles-category-header h2,
.vehicles-category-card.vehicles-category-demir_atlar .vehicles-category-header p {
    color: #e2e8f0;
}

.vehicles-category-card.vehicles-category-dag_devirenler {
    background: linear-gradient(180deg, rgba(15, 69, 45, 0.08), rgba(15, 69, 45, 0.02)), var(--bg-primary);
    border-color: rgba(27, 124, 69, 0.18);
}

.vehicles-category-card.vehicles-category-dag_devirenler .vehicles-category-badge {
    background: rgba(27, 124, 69, 0.12);
    color: #0f5132;
}

.vehicles-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vehicles-category-list li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: var(--text-primary);
}

.vehicles-category-card.vehicles-category-demir_atlar .vehicles-category-list li {
    background: rgba(14, 40, 62, 0.7);
    border-color: rgba(59, 130, 246, 0.28);
    color: #e2e8f0;
}

.vehicles-category-card.vehicles-category-dag_devirenler .vehicles-category-list li {
    background: rgba(13, 148, 74, 0.08);
    border-color: rgba(34, 197, 94, 0.22);
}

.vehicle-lineup-model {
    font-weight: 600;
    font-size: 16px;
}

.vehicle-lineup-focus {
    font-size: 14px;
    color: var(--text-secondary);
}

.vehicles-category-card.vehicles-category-demir_atlar .vehicle-lineup-focus {
    color: rgba(203, 213, 225, 0.8);
}

.vehicles-highlights {
    background: var(--bg-secondary);
    padding: 90px 0;
}

.vehicles-highlights-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}

.vehicles-highlights-header h2 {
    font-size: 36px;
    margin-bottom: 16px;
}

.vehicles-highlights-header p {
    color: var(--text-secondary);
    font-size: 17px;
}

.vehicles-highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}
.vehicles-highlight-card {
    background: var(--bg-primary);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: var(--shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vehicles-highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.vehicles-highlight-card i {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(26, 77, 122, 0.12);
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.vehicles-highlight-card {
    background: var(--bg-primary);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: var(--shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vehicles-highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.vehicles-highlight-card i {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(26, 77, 122, 0.12);
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 0;
}

.vehicles-highlight-card h3 {
    font-size: 20px;
    margin: 0 0 8px 0;
    padding: 0;
    line-height: 1.4;
}

.vehicles-highlight-card p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
    padding: 0;
}

.blog-highlights {
    background: #ffffff;
}

.blog-highlights .vehicles-highlight-card h3,
.blog-highlights .vehicles-highlight-card p {
    color: #333333;
}

.vehicles-collection {
    padding: 90px 0 110px;
}

.vehicles-roster {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.home-vehicles {
    background: var(--bg-secondary);
    padding: 90px 0;
    border-top: 1px solid var(--border-color);
}

.home-vehicles-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.home-vehicles-header h2 {
    font-size: 38px;
    margin: 0;
    color: var(--text-primary);
}

.home-vehicles-header p {
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.home-vehicles-groups {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.home-vehicles-group {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.home-vehicles-group-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 720px;
}

.home-vehicles-group-header h3 {
    font-size: 30px;
    margin: 0;
    color: var(--text-primary);
}

.home-vehicles-group-header p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.home-vehicles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}

.home-vehicle-card {
    background: var(--bg-primary);
    border-radius: 24px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-vehicle-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.home-vehicle-card-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

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

.home-vehicle-card:hover .home-vehicle-card-image img {
    transform: scale(1.05);
}

.home-vehicle-card-badge {
    position: absolute;
    left: 18px;
    bottom: 18px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    background: rgba(252, 211, 77, 0.92);
    color: #0f172a;
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.25);
}

.home-vehicle-card-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px 28px 30px;
    min-height: 320px;
}

.home-vehicle-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.home-vehicle-card h4 {
    margin: 0;
    font-size: 24px;
    color: var(--text-primary);
}

.home-vehicle-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    font-size: 14px;
    color: var(--text-secondary);
}

.home-vehicle-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.home-vehicle-card-meta i {
    color: var(--primary-color);
}

.home-vehicle-card-description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.home-vehicle-card-specs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.home-vehicle-card-specs li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--text-secondary);
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 8px;
}

.home-vehicle-card-specs li:last-child {
    border-bottom: none;
}

.home-vehicle-card-footer {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.home-vehicle-card-footer .btn {
    flex: 1 1 150px;
    justify-content: center;
}

.vehicles-roster-section {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.vehicles-roster-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 720px;
}

.vehicles-roster-header h2 {
    font-size: 34px;
    margin: 0;
    color: var(--text-primary);
}

.vehicles-roster-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.7;
}

.vehicles-roster-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    background: rgba(26, 77, 122, 0.12);
    color: var(--primary-color);
}

.vehicles-roster-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.vehicles-roster-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    font-size: 14px;
    color: var(--text-secondary);
}

.vehicles-roster-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.vehicles-roster-meta-item i {
    color: var(--primary-color);
    font-size: 14px;
}

.vehicles-roster-progress {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
    overflow: hidden;
}

.vehicles-roster-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(26, 77, 122, 0.9), rgba(59, 130, 246, 0.85));
}

.vehicles-roster-list.vehicles-roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
}

.vehicles-roster-grid .vehicle-showcase-card {
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
}

@media (min-width: 1200px) {
    .vehicles-roster-grid .vehicle-showcase-card {
        grid-template-columns: minmax(280px, 1fr) minmax(0, 1.35fr);
    }
}

.home-vehicles .vehicles-roster-list {
    gap: 26px;
}

.vehicle-showcase-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 36px;
    background: var(--bg-primary);
    border-radius: 30px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vehicle-showcase-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.vehicle-showcase-media {
    position: relative;
    overflow: hidden;
}

.vehicle-showcase-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 46%;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
}

.vehicle-showcase-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.vehicle-showcase-card:hover .vehicle-showcase-media img {
    transform: scale(1.05);
}

.vehicle-showcase-flag {
    position: absolute;
    left: 20px;
    bottom: 20px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    background: rgba(252, 211, 77, 0.9);
    color: #0f172a;
    box-shadow: 0 18px 28px rgba(15, 23, 42, 0.25);
}

.vehicle-showcase-content {
    padding: 36px 40px 40px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.vehicle-showcase-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vehicle-showcase-header h3 {
    font-size: 28px;
    margin: 0;
    color: var(--text-primary);
}

.vehicle-showcase-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.vehicle-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(148, 163, 184, 0.16);
    color: var(--text-secondary);
}

.vehicle-tag.type {
    background: rgba(52, 211, 153, 0.12);
    color: #047857;
}

.vehicle-tag.category {
    background: rgba(59, 130, 246, 0.12);
    color: var(--primary-color);
}

.vehicle-showcase-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    font-size: 14px;
    color: var(--text-secondary);
}

.vehicle-showcase-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.vehicle-showcase-meta i {
    color: var(--primary-color);
}

.vehicle-showcase-description {
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-secondary);
}

.vehicle-showcase-specs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.vehicle-showcase-specs li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(148, 163, 184, 0.12);
}

.vehicle-showcase-specs .spec-key {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-light);
}

.vehicle-showcase-specs .spec-value {
    font-size: 15px;
    color: var(--text-primary);
    font-weight: 600;
}

.vehicle-showcase-footer {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.vehicle-showcase-footer .btn {
    flex: 1 1 160px;
    justify-content: center;
}

.vehicles-accent-hero .vehicle-tag.brand {
    background: rgba(255, 115, 0, 0.12);
    color: #ea580c;
}

.vehicles-accent-yamaha .vehicle-tag.brand {
    background: rgba(59, 130, 246, 0.18);
    color: #2563eb;
}

.vehicles-accent-ktm .vehicle-tag.brand {
    background: rgba(249, 115, 22, 0.16);
    color: #d97706;
}

.vehicles-accent-dacia .vehicle-tag.brand {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.vehicles-accent-renault .vehicle-tag.brand {
    background: rgba(234, 179, 8, 0.18);
    color: #b45309;
}

.vehicles-accent-default .vehicle-tag.brand {
    background: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

.vehicles-empty {
    background: var(--bg-secondary);
    border-radius: 24px;
    padding: 64px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    border: 1px dashed var(--border-color);
}

.vehicles-empty h3 {
    font-size: 26px;
    color: var(--text-primary);
}

.vehicles-empty p {
    max-width: 520px;
    color: var(--text-secondary);
    font-size: 16px;
}
@media (max-width: 1200px) {
    .vehicles-hero-grid,
    .blog-hero .vehicles-hero-grid {
        gap: 36px;
    }

    .vehicles-hero-text,
    .blog-hero .vehicles-hero-text {
        grid-column: span 12;
    }

    .vehicles-hero-card,
    .blog-hero .vehicles-hero-card {
        grid-column: span 12;
    }
}
@media (max-width: 991px) {
    .vehicles-hero,
    .blog-hero {
        padding: 90px 0 80px;
    }

    .vehicles-hero-title,
    .blog-hero .vehicles-hero-title {
        font-size: 40px;
    }

    .vehicles-hero-tabs,
    .blog-hero .vehicles-hero-tabs {
        flex-wrap: wrap;
        justify-content: center;
    }

    .vehicles-hero-card-inner,
    .blog-hero .vehicles-hero-card-inner {
        padding: 28px;
    }

    .vehicles-highlights {
        padding: 70px 0;
    }

    .vehicles-roster {
        gap: 36px;
    }

    .vehicles-roster-list {
        gap: 28px;
    }

    .home-vehicles {
        padding: 70px 0;
    }

    .home-vehicles-grid {
        gap: 24px;
    }

    .home-vehicle-card-body {
        padding: 24px 24px 28px;
    }

    .vehicle-showcase-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .vehicle-showcase-media {
        min-height: 260px;
    }
}

@media (max-width: 767px) {
    .vehicles-hero-title,
    .blog-hero .vehicles-hero-title {
        font-size: 34px;
    }

    .vehicles-hero-description,
    .blog-hero .vehicles-hero-description {
        font-size: 16px;
    }

    .vehicles-hero-metrics,
    .blog-hero .vehicles-hero-metrics {
        flex-direction: column;
        align-items: flex-start;
    }

    .vehicles-category-grid {
        grid-template-columns: 1fr;
    }

    .vehicles-roster {
        gap: 32px;
    }

    .vehicles-roster-header h2 {
        font-size: 30px;
    }

    .vehicles-roster-badge {
        letter-spacing: 0.24em;
    }

    .vehicles-roster-list {
        gap: 24px;
    }

    .home-vehicles-header h2 {
        font-size: 32px;
    }

    .home-vehicles-header {
        margin-bottom: 36px;
    }

    .home-vehicles-group-header h3 {
        font-size: 26px;
    }

    .home-vehicles-grid {
        gap: 20px;
    }

    .home-vehicle-card-body {
        padding: 22px 20px 26px;
    }

    .home-vehicle-card-footer {
        flex-direction: column;
    }

    .vehicle-showcase-content {
        padding: 28px 24px 32px;
    }

    .vehicle-showcase-specs {
        grid-template-columns: 1fr;
    }

    .vehicle-showcase-footer {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .profile-community-card > div {
        padding: 24px;
    }

    .profile-social-links {
        gap: 12px;
    }

    .profile-social-link {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }
}

[data-theme="dark"] .vehicles-insights {
    background: rgba(15, 23, 42, 0.9);
}

[data-theme="dark"] .vehicles-insights-card {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 20px 40px rgba(2, 6, 23, 0.65);
}

[data-theme="dark"] .vehicles-insights-icon {
    background: rgba(59, 130, 246, 0.2);
    color: #bfdbfe;
}

[data-theme="dark"] .vehicles-insights-label {
    color: rgba(148, 163, 184, 0.7);
}

[data-theme="dark"] .vehicles-insights-value {
    color: rgba(226, 232, 240, 0.95);
}

[data-theme="dark"] .vehicles-insights-body p,
[data-theme="dark"] .vehicles-insights-list li,
[data-theme="dark"] .vehicles-roster-meta {
    color: rgba(203, 213, 225, 0.75);
}

[data-theme="dark"] .vehicles-insights-list-label {
    color: rgba(226, 232, 240, 0.9);
}

[data-theme="dark"] .vehicles-roster-meta-item i {
    color: rgba(96, 165, 250, 0.85);
}

[data-theme="dark"] .vehicles-roster-progress {
    background: rgba(51, 65, 85, 0.6);
}

[data-theme="dark"] .vehicles-roster-progress-bar {
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.95), rgba(59, 130, 246, 0.88));
}

[data-theme="dark"] .vehicles-hero-card-inner,
[data-theme="dark"] .blog-hero .vehicles-hero-card-inner {
    background: rgba(15, 35, 54, 0.85);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(226, 232, 240, 0.92);
}

[data-theme="dark"] .vehicles-hero-card-inner p,
[data-theme="dark"] .blog-hero .vehicles-hero-card-inner p {
    color: rgba(226, 232, 240, 0.78);
}

[data-theme="dark"] .vehicles-highlight-card {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(148, 163, 184, 0.16);
}

[data-theme="dark"] .vehicles-category-card {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.18);
}

[data-theme="dark"] .vehicles-category-card .vehicles-category-header p,
[data-theme="dark"] .vehicle-lineup-focus,
[data-theme="dark"] .vehicles-roster-header p {
    color: rgba(203, 213, 225, 0.8);
}

[data-theme="dark"] .vehicles-category-list li {
    background: rgba(30, 41, 59, 0.72);
    border-color: rgba(148, 163, 184, 0.24);
}

[data-theme="dark"] .vehicle-showcase-card {
    background: rgba(15, 23, 42, 0.94);
    border-color: rgba(148, 163, 184, 0.18);
}

[data-theme="dark"] .vehicle-showcase-description,
[data-theme="dark"] .vehicle-showcase-meta,
[data-theme="dark"] .vehicle-showcase-specs .spec-value,
[data-theme="dark"] .vehicles-roster-badge {
    color: rgba(203, 213, 225, 0.82);
}

[data-theme="dark"] .vehicle-showcase-specs li {
    background: rgba(30, 41, 59, 0.72);
}

[data-theme="dark"] .home-vehicles {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(148, 163, 184, 0.14);
}

[data-theme="dark"] .home-vehicles-header h2 {
    color: rgba(226, 232, 240, 0.95);
}

[data-theme="dark"] .home-vehicles-header p {
    color: rgba(203, 213, 225, 0.78);
}

[data-theme="dark"] .home-vehicles-group-header p {
    color: rgba(203, 213, 225, 0.78);
}

[data-theme="dark"] .home-vehicle-card {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.18);
}

[data-theme="dark"] .home-vehicle-card-description,
[data-theme="dark"] .home-vehicle-card-meta,
[data-theme="dark"] .home-vehicle-card-specs .spec-value {
    color: rgba(203, 213, 225, 0.82);
}

[data-theme="dark"] .home-vehicle-card-specs li {
    border-color: rgba(148, 163, 184, 0.3);
}
[data-theme="dark"] .vehicles-empty {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(148, 163, 184, 0.22);
}

.contact-shortcuts {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1040;
    align-items: flex-end;
}

.contact-shortcuts-label {
    background: rgba(15, 23, 42, 0.9);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.contact-shortcut {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    box-shadow: 0 12px 30px rgba(18, 140, 126, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-shortcut:hover,
.contact-shortcut:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(18, 140, 126, 0.35);
}

.contact-shortcut:focus {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 3px;
}

@media (max-width: 576px) {
    .contact-shortcuts {
        right: 16px;
        bottom: 16px;
    }

    .contact-shortcut {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }
}

.hero-theme-btn--whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 14px 30px rgba(18, 140, 126, 0.35);
}

.hero-theme-btn--whatsapp:hover,
.hero-theme-btn--whatsapp:focus {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(18, 140, 126, 0.45);
}

.hero-theme-btn--whatsapp i {
    font-size: 18px;
}


.footer-whatsapp-btn {
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    box-shadow: none;
}

.footer-whatsapp-btn:hover,
.footer-whatsapp-btn:focus {
    color: inherit;
    box-shadow: none;
    transform: none;
}

.footer-whatsapp-btn i {
    color: inherit;
    font-size: 18px;
}

.footer-bottom {
    margin-top: 0;
}

.footer-sponsor {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.footer-sponsor .talivio-support-text {
    font-size: 0.95rem;
    color: rgba(230, 240, 255, 0.8);
}

.footer-sponsor .talivio-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 6px 10px;
    border-radius: 999px;
    background: rgba(16, 31, 53, 0.85);
    border: 1px solid rgba(98, 138, 191, 0.55);
    color: #e7f1ff;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.footer-sponsor .talivio-badge:hover,
.footer-sponsor .talivio-badge:focus {
    color: #ffffff;
    border-color: rgba(145, 187, 240, 0.85);
    box-shadow: 0 10px 24px rgba(24, 52, 92, 0.45);
    transform: translateY(-2px);
}

.footer-sponsor .talivio-badge:focus {
    outline: 2px solid rgba(145, 187, 240, 0.7);
    outline-offset: 4px;
}

/* Road Captain Page */
.road-captain-hero {
    position: relative;
    padding: 120px 0 90px;
    background: linear-gradient(135deg, rgba(8, 25, 45, 0.88), rgba(10, 33, 57, 0.9)), url('../images/hero-bg-3.jpg');
    background-size: cover;
    background-position: center;
    color: #f8fbff;
}

.road-captain-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 33, 57, 0.65), rgba(5, 15, 28, 0.9));
}

.road-captain-hero .container {
    position: relative;
    z-index: 1;
}

.road-captain-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 48px;
    align-items: stretch;
}

.road-captain-hero-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.road-captain-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(224, 236, 247, 0.85);
}

.road-captain-title {
    font-size: 48px;
    margin: 0;
    letter-spacing: -0.6px;
}

.road-captain-description {
    font-size: 18px;
    line-height: 1.7;
    color: rgba(224, 236, 247, 0.88);
    margin: 0;
}

.road-captain-highlights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.road-captain-highlights li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 16px;
    color: rgba(224, 236, 247, 0.9);
}

.road-captain-highlights i {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f8fbff;
}

.road-captain-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.road-captain-hero-card {
    background: rgba(14, 30, 50, 0.88);
    border-radius: 32px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 30px 50px rgba(8, 19, 34, 0.45);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.road-captain-hero-photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.road-captain-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.road-captain-hero-badge {
    position: absolute;
    left: 24px;
    bottom: 24px;
    background: rgba(10, 33, 57, 0.86);
    border-radius: 18px;
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.road-captain-hero-name {
    font-weight: 700;
    letter-spacing: 0.08em;
}

.road-captain-hero-role {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(224, 236, 247, 0.75);
}

.road-captain-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 0 24px 28px;
}

.road-captain-hero-stat {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.road-captain-hero-stat-number {
    font-size: 24px;
    font-weight: 700;
}

.road-captain-hero-stat-label {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(224, 236, 247, 0.7);
}

.road-captain-overview {
    background: var(--bg-secondary);
}

.road-captain-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 40px;
    align-items: start;
}

.road-captain-intro h2 {
    font-size: 34px;
    margin-bottom: 20px;
}

.road-captain-intro-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 17px;
    line-height: 1.75;
    color: var(--text-secondary);
}

.road-captain-quickfacts {
    background: var(--bg-primary);
    border-radius: 24px;
    border: 1px solid var(--border-color);
    padding: 30px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.road-captain-quickfacts h3 {
    font-size: 18px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-light);
    margin: 0;
}

.road-captain-quickfacts ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.road-captain-quickfacts li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.road-captain-quickfacts li span:first-child {
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-light);
}

.road-captain-quickfacts li span:last-child {
    font-size: 15px;
    color: var(--text-secondary);
}
.road-captain-section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}

.road-captain-section-header h2 {
    font-size: 36px;
    margin-bottom: 16px;
}

.road-captain-section-header p {
    font-size: 17px;
    color: var(--text-secondary);
    margin: 0;
}

.road-captain-skillset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.road-captain-skill-card {
    background: var(--bg-primary);
    border-radius: 24px;
    border: 1px solid var(--border-color);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: var(--shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.road-captain-skill-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.road-captain-skill-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(26, 77, 122, 0.12);
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.road-captain-skill-card h3 {
    font-size: 20px;
    margin: 0;
}

.road-captain-skill-card p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
}

.road-captain-safety {
    background: var(--bg-primary);
}

.road-captain-safety-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 36px;
    align-items: center;
}

.road-captain-safety-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.road-captain-safety-content h2 {
    font-size: 34px;
    margin: 0;
}

.road-captain-safety-content p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-secondary);
    margin: 0;
}

.road-captain-safety-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.road-captain-safety-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.road-captain-safety-list i {
    color: var(--primary-color);
    font-size: 18px;
}

.road-captain-safety-media {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

.road-captain-safety-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.road-captain-safety-caption {
    position: absolute;
    left: 24px;
    bottom: 24px;
    background: rgba(10, 33, 57, 0.85);
    color: #f8fbff;
    padding: 10px 20px;
    border-radius: 16px;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.road-captain-timeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}
.road-captain-timeline-item {
    background: var(--bg-primary);
    border-radius: 22px;
    border: 1px solid var(--border-color);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow);
}

.road-captain-timeline-year {
    font-size: 14px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-light);
}

.road-captain-timeline-item h3 {
    font-size: 20px;
    margin: 0;
}

.road-captain-timeline-item p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.road-captain-cta-card {
    background: linear-gradient(135deg, rgba(10, 33, 57, 0.92), rgba(14, 46, 78, 0.95));
    border-radius: 30px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    padding: 40px 48px;
    color: #f8fbff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    box-shadow: 0 30px 50px rgba(8, 19, 34, 0.4);
}

.road-captain-cta-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.road-captain-cta-content h2 {
    font-size: 32px;
    margin: 0;
}

.road-captain-cta-content p {
    margin: 0;
    color: rgba(224, 236, 247, 0.92);
    line-height: 1.7;
}

.road-captain-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.road-captain-cta-actions .btn {
    min-width: 180px;
    justify-content: center;
}

@media (max-width: 992px) {
    .road-captain-hero {
        padding: 100px 0 70px;
    }

    .road-captain-hero-grid,
    .road-captain-overview-grid,
    .road-captain-safety-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .road-captain-hero-card {
        max-width: 520px;
    }

    .road-captain-cta-card {
        flex-direction: column;
        text-align: center;
        align-items: stretch;
    }
}

@media (max-width: 768px) {
    .road-captain-title {
        font-size: 36px;
    }

    .road-captain-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .road-captain-hero-card {
        border-radius: 26px;
    }

    .road-captain-quickfacts {
        padding: 24px;
    }
}

@media (max-width: 576px) {
    .road-captain-hero-stats {
        grid-template-columns: 1fr;
    }

    .road-captain-cta-card {
        padding: 32px 24px;
    }

    .road-captain-skill-card,
    .road-captain-timeline-item {
        padding: 22px;
    }
}

[data-theme="dark"] .road-captain-overview {
    background: rgba(8, 17, 31, 0.95);
}

[data-theme="dark"] .road-captain-quickfacts,
[data-theme="dark"] .road-captain-skill-card,
[data-theme="dark"] .road-captain-timeline-item {
    background: rgba(11, 22, 40, 0.9);
    border-color: rgba(148, 163, 184, 0.18);
}

[data-theme="dark"] .road-captain-quickfacts li {
    background: rgba(13, 31, 54, 0.7);
    border-color: rgba(148, 163, 184, 0.2);
}

[data-theme="dark"] .road-captain-safety {
    background: rgba(11, 22, 40, 0.92);
}

[data-theme="dark"] .road-captain-safety-media {
    border-color: rgba(148, 163, 184, 0.2);
}

[data-theme="dark"] .road-captain-section-header p,
[data-theme="dark"] .road-captain-intro-body,
[data-theme="dark"] .road-captain-skill-card p,
[data-theme="dark"] .road-captain-safety-content p,
[data-theme="dark"] .road-captain-timeline-item p {
    color: rgba(226, 235, 245, 0.78);
}

[data-theme="dark"] .road-captain-hero-card {
    background: rgba(11, 24, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.26);
}

[data-theme="dark"] .road-captain-hero-stat {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(148, 163, 184, 0.22);
}

/* Legal Pages */
.legal-hero {
    position: relative;
    padding: 110px 0 72px;
    background: linear-gradient(135deg, rgba(15, 46, 78, 0.88), rgba(9, 20, 36, 0.92)), url('../images/hero-bg-2.jpg');
    background-size: cover;
    background-position: center;
    color: #f8fbff;
}

.legal-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 34, 57, 0.85), rgba(8, 23, 40, 0.86));
    mix-blend-mode: multiply;
}

.legal-hero .container {
    position: relative;
    z-index: 1;
}

.legal-hero .page-title {
    font-size: 42px;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}

.legal-hero .page-subtitle {
    max-width: 700px;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(226, 235, 245, 0.92);
}

.legal-hero__content {
    position: relative;
    z-index: 1;
}

.legal-breadcrumb {
    position: relative;
    z-index: 1;
    margin-bottom: 28px;
}

.legal-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 16px;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(226, 235, 245, 0.7);
}

.legal-breadcrumb a {
    color: rgba(248, 251, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

.legal-breadcrumb a:hover,
.legal-breadcrumb a:focus {
    color: #ffffff;
}

.legal-breadcrumb li + li::before {
    content: "/";
    margin-right: 16px;
    color: rgba(226, 235, 245, 0.45);
}

.legal-section {
    padding: 80px 0 100px;
    background: var(--bg-secondary);
}

.legal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 36px;
    align-items: start;
}

.legal-document-card {
    background: var(--bg-primary);
    border-radius: 28px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: var(--shadow);
    padding: 42px 48px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.legal-document-card__header {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    justify-content: space-between;
    align-items: flex-start;
}

.legal-document-card__category {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 6px;
}

.legal-document-card__title {
    font-size: 30px;
    margin: 0;
    color: var(--text-primary);
    line-height: 1.25;
}

.legal-document-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    font-size: 14px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.legal-document-card__meta-label {
    font-weight: 600;
    color: var(--text-light);
}

.legal-document-card__meta-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    margin: 0;
}

.legal-document-card__meta-item {
    padding: 18px;
    border-radius: 18px;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.legal-document-card__meta-item dt {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 8px;
}

.legal-document-card__meta-item dd {
    margin: 0;
    font-size: 15px;
    color: var(--text-primary);
}

.legal-document-card__body {
    display: flex;
    flex-direction: column;
    gap: 30px;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.8;
}

.legal-document-card__body h2 {
    font-size: 26px;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.legal-document-card__body h3 {
    font-size: 20px;
    margin-top: 18px;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.legal-document-card__body ul {
    padding-left: 20px;
    display: grid;
    gap: 10px;
}

.legal-document-card__body li {
    padding-left: 4px;
}

.legal-document-card__footer {
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    padding-top: 24px;
    font-size: 15px;
    color: var(--text-secondary);
}

.legal-document-card__footer a {
    color: var(--primary-color);
    text-decoration: none;
}

.legal-document-card__footer a:hover,
.legal-document-card__footer a:focus {
    text-decoration: underline;
}

.document-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.document-section + .document-section {
    padding-top: 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.legal-contact-card {
    position: sticky;
    top: 110px;
    background: linear-gradient(180deg, rgba(26, 77, 122, 0.95), rgba(8, 23, 40, 0.94));
    border-radius: 26px;
    padding: 36px;
    color: #f8fbff;
    box-shadow: 0 24px 40px rgba(10, 30, 52, 0.35);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.legal-contact-card h3 {
    font-size: 22px;
    margin: 0;
}

.legal-contact-card p {
    margin: 0;
    line-height: 1.7;
    color: rgba(226, 235, 245, 0.88);
}

.legal-contact-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 14px;
}

.legal-contact-card__cta-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.legal-contact-card__details {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.legal-contact-card__details li {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.legal-contact-card__details .label {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(226, 235, 245, 0.65);
}

.legal-contact-card__details a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
}

.legal-contact-card__details a:hover,
.legal-contact-card__details a:focus {
    text-decoration: underline;
}

.legal-contact-card__notes {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.legal-contact-card__note {
    display: flex;
    gap: 14px;
    background: rgba(8, 23, 40, 0.55);
    border-radius: 18px;
    padding: 14px 16px;
}

.legal-contact-card__note .icon {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.legal-contact-card__note h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    color: #f1f5f9;
}

.legal-contact-card__note p {
    margin: 0;
    color: rgba(226, 235, 245, 0.75);
}

@media (max-width: 992px) {
    .legal-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .legal-contact-card {
        position: static;
    }
}

@media (max-width: 768px) {
    .legal-hero {
        padding: 90px 0 60px;
    }

    .legal-hero .page-title {
        font-size: 32px;
    }

    .legal-document-card {
        padding: 32px 28px;
        border-radius: 22px;
    }

    .legal-document-card__title {
        font-size: 26px;
    }

    .legal-document-card__meta {
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .legal-breadcrumb ol {
        flex-wrap: wrap;
        gap: 10px;
    }

    .legal-document-card {
        padding: 28px 20px;
    }

    .legal-document-card__body {
        font-size: 15px;
    }

    .legal-contact-card {
        padding: 28px 24px;
    }
}

[data-theme="dark"] .legal-section {
    background: rgba(8, 17, 31, 0.95);
}

[data-theme="dark"] .legal-document-card {
    background: rgba(11, 22, 40, 0.88);
    border-color: rgba(148, 163, 184, 0.18);
}

/* Blog Detail Page - Legal Template Style */
.blog-detail-hero {
    background: linear-gradient(135deg, rgba(15, 46, 78, 0.88), rgba(9, 20, 36, 0.92));
}

.blog-detail-section {
    padding: 80px 0 100px;
}

.blog-detail-card .legal-document-card__body {
    margin-top: 8px;
}

.blog-detail-share--document {
    margin: 24px 0;
    padding: 12px 20px;
    border-radius: 16px;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.blog-detail-share--document .blog-detail-share-label {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.blog-detail-share--document a,
.blog-detail-share--document button {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-primary);
    width: 36px;
    height: 36px;
}

.blog-detail-share--document a:hover,
.blog-detail-share--document button:hover {
    background: rgba(148, 163, 184, 0.25);
    color: var(--primary-color);
}

.blog-detail-footer {
    margin-top: 32px;
}

.blog-detail-sidebar {
    background: linear-gradient(180deg, rgba(26, 77, 122, 0.95), rgba(8, 23, 40, 0.94));
}

@media (max-width: 992px) {
    .blog-detail-section .legal-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-detail-sidebar {
        position: static;
    }
}

[data-theme="dark"] .legal-document-card__meta-item {
    background: rgba(13, 31, 54, 0.7);
    border-color: rgba(148, 163, 184, 0.22);
}

[data-theme="dark"] .document-section + .document-section {
    border-color: rgba(148, 163, 184, 0.2);
}

[data-theme="dark"] .legal-document-card__body {
    color: rgba(226, 235, 245, 0.8);
}

[data-theme="dark"] .legal-document-card__body h2,
[data-theme="dark"] .legal-document-card__body h3 {
    color: #f8fbff;
}

[data-theme="dark"] .legal-document-card__footer {
    border-color: rgba(148, 163, 184, 0.22);
}

.talivio-badge-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.talivio-badge-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.talivio-badge-label {
    font-size: 0.95rem;
}

@media (max-width: 576px) {
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-sponsor {
        align-self: flex-end;
    }

    .footer-sponsor .talivio-badge {
        padding: 6px 14px;
    }
}

/* Calendar page */
.page-header--calendar {
    padding: 96px 0 72px;
    background: linear-gradient(135deg, rgba(27, 44, 86, 0.94), rgba(52, 77, 129, 0.94));
    text-align: center;
    color: #fff;
}

.page-header--calendar .page-title {
    margin-bottom: 16px;
    color: #fff;
}

.page-header--calendar .page-description {
    max-width: 680px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.78);
}

.calendar-overview {
    background: var(--bg-primary);
    padding-bottom: 0;
}

.calendar-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 40px;
    align-items: stretch;
}

.calendar-intro-text > p {
    margin-top: 16px;
    color: var(--text-secondary);
}
.calendar-highlights {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.calendar-highlights li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.calendar-highlights i {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(62, 89, 148, 0.08);
    color: var(--primary-color);
    font-size: 18px;
}

.calendar-highlight-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 32px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.calendar-highlight-card h3 {
    margin: 0;
}

.calendar-highlight-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
}

.calendar-highlight-stats li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--bg-primary);
    border: 1px solid rgba(82, 104, 156, 0.12);
}

.calendar-highlight-stats .label {
    color: var(--text-secondary);
    font-size: 14px;
}

.calendar-highlight-stats .value {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
}

.calendar-highlight-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    color: var(--text-secondary);
}

.calendar-highlight-note i {
    color: var(--primary-color);
    margin-top: 3px;
}

.calendar-highlight-actions {
    display: flex;
    gap: 12px;
}

.calendar-legend {
    padding: 24px 28px;
    border-radius: 16px;
    background: var(--bg-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.calendar-legend-title {
    font-weight: 600;
    color: var(--text-primary);
}

.calendar-legend-tags {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.calendar-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--bg-primary);
    border: 1px solid rgba(82, 104, 156, 0.15);
    font-size: 13px;
    color: var(--text-secondary);
}

.calendar-tag i {
    color: var(--primary-color);
}

.calendar-section {
    padding: 10px 0;
    background: var(--bg-secondary);
}

.calendar-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}

.calendar-header p {
    color: var(--text-secondary);
}

.calendar-year + .calendar-year {
    margin-top: 56px;
}
.year-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 32px;
    text-align: center;
}

.calendar-month + .calendar-month {
    margin-top: 40px;
}

.month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.month-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.month-count {
    font-size: 14px;
    color: var(--text-secondary);
    background: rgba(82, 104, 156, 0.12);
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 500;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.calendar-item {
    background: var(--bg-primary);
    border-radius: 18px;
    border: 1px solid var(--border-color);
    padding: 24px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.calendar-item.hover,
.calendar-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.calendar-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(62, 89, 148, 0.2);
}

.calendar-date {
    display: flex;
    align-items: center;
    gap: 12px;
}

.date-day {
    font-size: 34px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
}

.date-month {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.calendar-meta {
    display: flex;
    gap: 8px;
}

.calendar-status {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-available {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}

.badge-unavailable,
.badge-full {
    background: rgba(248, 113, 113, 0.12);
    color: #b91c1c;
}

.calendar-item-body .tour-title {
    margin: 0 0 10px;
    font-size: 20px;
}

.calendar-item-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.calendar-item-body .tour-title a {
    color: var(--text-primary);
    text-decoration: none;
}

.calendar-item-body .tour-title a:hover {
    color: var(--primary-color);
}

.tour-location {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 8px;
}

.tour-location i {
    margin-right: 6px;
    color: var(--primary-color);
}

.tour-dates {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    color: var(--text-secondary);
}

.tour-duration {
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tour-duration i,
.tour-spots i {
    color: var(--primary-color);
}

.tour-spots {
    font-size: 14px;
    color: var(--text-secondary);
}

.tour-actions {
    display: flex;
    gap: 12px;
}

.tour-actions .btn {
    flex: 1 1 0;
    text-align: center;
}

.btn-small {
    padding: 10px 18px;
    font-size: 14px;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: #fff;
}

.calendar-filters {
    background: var(--bg-primary);
    padding: 70px 0;
}

.calendar-filters-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 36px;
}

.calendar-filters-header p {
    color: var(--text-secondary);
}

.calendar-filter-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: var(--shadow);
}

.calendar-filter-tabs {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-tab {
    padding: 12px 24px;
    border: 2px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    border-radius: 999px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-tab:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
}

.filter-tab.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.calendar-filter-feedback {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(62, 89, 148, 0.12);
    color: var(--text-secondary);
    font-size: 14px;
}

.calendar-filter-feedback i {
    color: var(--primary-color);
}

.no-calendar {
    text-align: center;
    padding: 100px 20px;
}

.no-calendar-content {
    max-width: 420px;
    margin: 0 auto;
}

.no-calendar-content i {
    font-size: 72px;
    color: rgba(62, 89, 148, 0.2);
    margin-bottom: 20px;
}

.no-calendar-content h3 {
    font-size: 26px;
    margin-bottom: 14px;
    color: var(--text-primary);
}

.no-calendar-content p {
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.calendar-cta {
    background: linear-gradient(140deg, rgba(22, 38, 70, 0.95), rgba(47, 77, 129, 0.9));
    position: relative;
    overflow: hidden;
}

.calendar-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.08), transparent 55%),
                radial-gradient(circle at 85% 80%, rgba(122, 166, 255, 0.12), transparent 60%);
    pointer-events: none;
}

.calendar-cta-card {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
    background: rgba(13, 26, 51, 0.7);
    border: 1px solid rgba(148, 181, 228, 0.25);
    border-radius: 28px;
    padding: 48px 56px;
    color: #f8fbff;
    box-shadow: 0 24px 60px rgba(6, 12, 24, 0.35);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.calendar-cta-card h2 {
    font-size: 34px;
    margin: 0;
}

.calendar-cta-card p {
    margin: 0;
    color: rgba(232, 242, 255, 0.78);
}

.calendar-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: center;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(77, 116, 179, 0.25);
    border: 1px solid rgba(155, 186, 235, 0.35);
    color: #e6efff;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 12px;
}

.calendar-cta-badge i {
    color: #cddcff;
}

.calendar-cta-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
    color: rgba(232, 242, 255, 0.78);
}

.calendar-cta-list li {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.calendar-cta-list i {
    color: #9ec2ff;
}

.calendar-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.calendar-cta-actions .btn {
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.5;
    min-height: 44px;
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.calendar-cta .btn-outline {
    border-color: rgba(214, 225, 255, 0.6);
    color: #e8f2ff;
}

.calendar-cta .btn-outline:hover {
    background: rgba(214, 225, 255, 0.15);
    color: #fff;
}

[data-theme="dark"] .calendar-cta {
    background: linear-gradient(140deg, rgba(8, 16, 33, 0.95), rgba(20, 33, 63, 0.9));
}

[data-theme="dark"] .calendar-cta-card {
    background: rgba(10, 20, 38, 0.8);
    border-color: rgba(148, 181, 228, 0.3);
    color: rgba(232, 242, 255, 0.9);
}

[data-theme="dark"] .calendar-cta-card p,
[data-theme="dark"] .calendar-cta-list {
    color: rgba(232, 242, 255, 0.75);
}

[data-theme="dark"] .calendar-cta-badge {
    background: rgba(77, 116, 179, 0.2);
    border-color: rgba(155, 186, 235, 0.3);
}

[data-theme="dark"] .calendar-cta .btn-outline:hover {
    background: rgba(214, 225, 255, 0.2);
}

@media (max-width: 992px) {
    .calendar-intro-grid {
        grid-template-columns: 1fr;
    }

    .calendar-highlight-card {
        order: -1;
    }

    .calendar-highlight-actions {
        flex-direction: column;
    }

    .calendar-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .calendar-cta-card {
        padding: 42px;
    }
}

@media (max-width: 768px) {
    .page-header--calendar {
        padding: 72px 0 54px;
    }

    .calendar-section {
        padding: 10px 0;
    }

    .calendar-legend {
        flex-direction: column;
        align-items: flex-start;
    }

    .calendar-filter-tabs {
        flex-direction: column;
    }

    .filter-tab {
        width: 100%;
        text-align: center;
    }

    .calendar-item-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .tour-actions {
        flex-direction: column;
    }

    .calendar-cta-card {
        padding: 36px 24px;
        gap: 20px;
    }

    .calendar-cta-card h2 {
        font-size: 30px;
    }

    .calendar-cta-list {
        gap: 12px;
    }

    .calendar-cta-list li {
        justify-content: flex-start;
    }
}

@media (max-width: 576px) {
    .calendar-highlight-card {
        padding: 26px;
    }

    .calendar-legend {
        padding: 20px;
    }

    .calendar-filter-panel {
        padding: 24px;
    }

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

    .calendar-cta-card {
        padding: 30px 20px;
        border-radius: 22px;
    }

    .calendar-cta-actions {
        flex-direction: column;
    }

    .calendar-cta-list li {
        justify-content: center;
        text-align: center;
    }
}

[data-theme="dark"] .page-header--calendar {
    background: linear-gradient(135deg, rgba(11, 23, 44, 0.95), rgba(26, 44, 81, 0.95));
}

[data-theme="dark"] .calendar-overview,
[data-theme="dark"] .calendar-filters {
    background: rgba(13, 26, 45, 0.96);
}

[data-theme="dark"] .calendar-highlight-card,
[data-theme="dark"] .calendar-filter-panel,
[data-theme="dark"] .calendar-legend,
[data-theme="dark"] .calendar-item {
    background: rgba(15, 31, 54, 0.85);
    border-color: rgba(148, 163, 184, 0.18);
}

[data-theme="dark"] .calendar-highlight-stats li {
    background: rgba(11, 22, 40, 0.88);
    border-color: rgba(148, 163, 184, 0.18);
}

[data-theme="dark"] .calendar-highlight-note,
[data-theme="dark"] .calendar-legend-title,
[data-theme="dark"] .calendar-legend-tags,
[data-theme="dark"] .calendar-item-body .tour-title a,
[data-theme="dark"] .tour-location,
[data-theme="dark"] .tour-dates,
[data-theme="dark"] .tour-spots,
[data-theme="dark"] .calendar-filter-feedback {
    color: rgba(226, 235, 245, 0.82);
}

[data-theme="dark"] .calendar-tag {
    background: rgba(11, 22, 40, 0.88);
    border-color: rgba(148, 163, 184, 0.2);
}

/* Tour detail & kategori sayfaları */
.tour-detail-hero .profile-hero-highlights li i,
.tour-category-hero .profile-hero-highlights li i {
    color: var(--primary-color);
}

.tour-detail-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 28px 32px;
    box-shadow: var(--shadow);
    margin-top: 36px;
}

.tour-detail-panel h3 {
    margin: 0 0 18px;
}

.tour-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.tour-detail-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--text-secondary);
}

.tour-detail-list i {
    color: var(--primary-color);
    margin-top: 2px;
}

.tour-itinerary-stack {
    display: grid;
    gap: 18px;
}

.tour-itinerary-day {
    background: var(--bg-primary);
    border: 1px solid rgba(82, 104, 156, 0.14);
    border-radius: 16px;
    padding: 22px 24px;
}

.tour-itinerary-day-header {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.tour-itinerary-day-number {
    font-weight: 700;
    color: var(--primary-color);
}

.tour-itinerary-day-title {
    font-weight: 600;
    color: var(--text-primary);
}

.tour-itinerary-day-body {
    color: var(--text-secondary);
}

.tour-itinerary-day-body ul {
    margin: 12px 0 0;
    padding-left: 18px;
}

.tour-inclusions-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.tour-inclusion-card {
    background: var(--bg-primary);
    border: 1px solid rgba(82, 104, 156, 0.14);
    border-radius: 16px;
    padding: 22px 24px;
}
.tour-inclusion-card h3 {
    margin-top: 0;
    margin-bottom: 16px;
}

.tour-inclusion-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.tour-inclusion-card li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-secondary);
}

.tour-inclusion-card i {
    color: var(--primary-color);
    margin-top: 2px;
}

.tour-inclusion-card--exclude {
    background: rgba(255, 111, 97, 0.08);
    border-color: rgba(255, 111, 97, 0.22);
}

.tour-date-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.tour-date-list li {
    background: var(--bg-primary);
    border-radius: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(82, 104, 156, 0.12);
    display: grid;
    gap: 6px;
}

.tour-date-range,
.tour-date-spots {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.tour-date-range i,
.tour-date-spots i {
    color: var(--primary-color);
}

.tour-category-card .profile-hero-card-inner {
    height: 100%;
}

.tour-category-story .location-story-meta span i {
    color: var(--primary-color);
}

.vehicles-hero .btn.btn-outline,
.blog-hero .btn.btn-outline,
.profile-hero .btn.btn-outline,
.faq-hero .btn.btn-outline,
.location-hero .btn.btn-outline,
.location-detail-hero .btn.btn-outline,
.tour-detail-hero .btn.btn-outline,
.tour-category-hero .btn.btn-outline {
    background: rgba(12, 24, 45, 0.6);
    color: #fff;
    border-color: rgba(248, 252, 255, 0.78);
    box-shadow: 0 12px 30px rgba(6, 12, 24, 0.35);
    backdrop-filter: blur(6px);
}

.vehicles-hero .btn.btn-outline:hover,
.blog-hero .btn.btn-outline:hover,
.profile-hero .btn.btn-outline:hover,
.faq-hero .btn.btn-outline:hover,
.location-hero .btn.btn-outline:hover,
.location-detail-hero .btn.btn-outline:hover,
.tour-detail-hero .btn.btn-outline:hover,
.tour-category-hero .btn.btn-outline:hover {
    background: rgba(35, 61, 105, 0.75);
    border-color: rgba(255, 255, 255, 0.9);
    color: #fff;
}

@media (max-width: 768px) {
    .tour-detail-panel {
        padding: 24px;
    }

    .tour-itinerary-day {
        padding: 18px 20px;
    }
}

[data-theme="dark"] .tour-detail-panel,
[data-theme="dark"] .tour-inclusion-card {
    background: rgba(15, 31, 54, 0.85);
    border-color: rgba(148, 163, 184, 0.18);
}

[data-theme="dark"] .tour-inclusion-card--exclude {
    background: rgba(255, 111, 97, 0.12);
    border-color: rgba(255, 111, 97, 0.3);
}

[data-theme="dark"] .tour-itinerary-day,
[data-theme="dark"] .tour-date-list li {
    background: rgba(11, 22, 40, 0.88);
    border-color: rgba(148, 163, 184, 0.18);
}

[data-theme="dark"] .vehicles-hero .btn.btn-outline,
[data-theme="dark"] .blog-hero .btn.btn-outline,
[data-theme="dark"] .profile-hero .btn.btn-outline,
[data-theme="dark"] .faq-hero .btn.btn-outline,
[data-theme="dark"] .location-hero .btn.btn-outline,
[data-theme="dark"] .location-detail-hero .btn.btn-outline,
[data-theme="dark"] .tour-detail-hero .btn.btn-outline,
[data-theme="dark"] .tour-category-hero .btn.btn-outline {
    background: rgba(9, 18, 34, 0.65);
    border-color: rgba(198, 210, 225, 0.8);
}

/* --------------------------------------------------------------
   Vehicles collection redesign
-------------------------------------------------------------- */
.vehicles-collection-header {
    position: relative;
    padding: 3rem clamp(1.5rem, 3vw, 3.5rem);
    border-radius: 28px;
    background: radial-gradient(circle at top right, rgba(14, 94, 96, 0.35), transparent 55%),
        linear-gradient(135deg, rgba(8, 24, 40, 0.92), rgba(10, 54, 72, 0.88));
    color: #f5fbff;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    overflow: hidden;
    box-shadow: 0 28px 48px -28px rgba(5, 21, 36, 0.6);
}

.vehicles-collection-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 55%);
    pointer-events: none;
}
.vehicles-collection-eyebrow {
    position: relative;
    font-size: 0.8rem;
    letter-spacing: 0.4rem;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(240, 249, 255, 0.72);
    margin-bottom: 1rem;
}

.vehicles-collection-eyebrow::before {
    content: "";
    width: 32px;
    height: 2px;
    background: rgba(194, 231, 255, 0.6);
    border-radius: 999px;
}

.vehicles-collection-header h2 {
    position: relative;
    font-size: clamp(2rem, 4vw, 2.75rem);
    margin-bottom: 0.75rem;
    color: #f5fbff;
}

.vehicles-collection-header p {
    position: relative;
    max-width: 720px;
    color: rgba(235, 249, 255, 0.78);
    margin-bottom: 2rem;
    font-size: 1rem;
    line-height: 1.7;
}

.vehicles-collection-stats {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.vehicles-collection-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1.2rem;
    border-radius: 999px;
    background: rgba(7, 30, 44, 0.55);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(173, 221, 255, 0.16);
    color: rgba(245, 251, 255, 0.85);
    font-size: 0.95rem;
}

.vehicles-collection-stat i {
    color: #90d5ff;
}

.vehicles-collection-segments {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 3.5vw, 3.25rem);
}

.vehicles-segment {
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 26px 40px -32px rgba(7, 25, 40, 0.3);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    position: relative;
    overflow: hidden;
}

.vehicles-segment-header {
    display: grid;
    gap: 1.5rem;
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.vehicles-segment-heading {
    display: grid;
    gap: 0.65rem;
    max-width: 620px;
}

.vehicles-segment-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(13, 55, 72, 0.12), rgba(13, 55, 72, 0.24));
    color: #0e3648;
    font-size: 1.45rem;
}

.vehicles-segment-eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.28rem;
    text-transform: uppercase;
    color: #0e3648;
    font-weight: 600;
}

.vehicles-segment-header h3 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: #0f2d3e;
}

.vehicles-segment-header p {
    color: #476274;
    font-size: 1rem;
    line-height: 1.7;
}

.vehicles-segment-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.vehicles-segment-stats li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.05rem;
    border-radius: 12px;
    background: rgba(11, 43, 60, 0.06);
    color: #15374a;
    font-weight: 600;
}

.vehicles-segment-stats i {
    color: #0f556c;
}

.vehicles-segment-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.vehicles-segment-category {
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(12, 84, 96, 0.09);
    color: #135060;
    font-size: 0.85rem;
    font-weight: 600;
}

.vehicles-segment-grid {
    display: grid;
    gap: clamp(1.5rem, 2.5vw, 2rem);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.vehicle-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(8, 26, 39, 0.92), rgba(8, 26, 39, 0.98));
    border-radius: 22px;
    overflow: hidden;
    color: #f2fbff;
    position: relative;
    border: 1px solid rgba(128, 205, 230, 0.14);
    box-shadow: 0 24px 36px -26px rgba(4, 23, 38, 0.55);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.vehicle-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -36px rgba(4, 23, 38, 0.75);
}

.vehicle-card-media {
    position: relative;
    overflow: hidden;
    min-height: 220px;
}

.vehicle-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vehicle-card-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 18, 28, 0.2) 20%, rgba(6, 18, 28, 0.88) 85%);
}

.vehicle-card-media-badges {
    position: absolute;
    inset: auto 0 1.1rem 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 1.4rem;
    z-index: 2;
}

.vehicle-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(10, 37, 50, 0.75);
    color: rgba(240, 252, 255, 0.92);
    backdrop-filter: blur(14px);
}

.vehicle-badge--featured {
    background: linear-gradient(135deg, #f7b733, #fc4a1a);
    color: #0c1e2c;
    box-shadow: 0 12px 22px -14px rgba(247, 183, 51, 0.8);
}

.vehicle-badge--category {
    background: rgba(6, 119, 147, 0.75);
}

.vehicle-card-body {
    display: grid;
    gap: 1.15rem;
    padding: clamp(1.4rem, 3vw, 1.8rem);
}

.vehicle-card-header {
    display: grid;
    gap: 0.65rem;
}

.vehicle-card-brand {
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(152, 212, 231, 0.8);
}

.vehicle-card-header h4 {
    font-size: 1.4rem;
    color: #f5fbff;
}

.vehicle-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    color: rgba(197, 233, 247, 0.72);
    font-size: 0.9rem;
}

.vehicle-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.vehicle-card-meta i {
    color: rgba(138, 213, 231, 0.85);
}

.vehicle-card-description {
    color: rgba(228, 244, 250, 0.82);
    line-height: 1.65;
    font-size: 0.95rem;
}

.vehicle-card-specs {
    display: grid;
    gap: 0.75rem;
}

.vehicle-card-spec {
    display: grid;
    gap: 0.18rem;
}

.vehicle-card-spec dt {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(160, 220, 235, 0.72);
}

.vehicle-card-spec dd {
    font-size: 0.95rem;
    color: rgba(242, 252, 255, 0.92);
    margin: 0;
}

.vehicle-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.btn-light-outline {
    border-radius: 999px;
    border: 1px solid rgba(194, 239, 255, 0.45);
    color: #e6f9ff;
    padding: 0.65rem 1.4rem;
    font-weight: 600;
    transition: all 0.3s ease;
    background: transparent;
}

.btn-light-outline:hover,
.btn-light-outline:focus {
    background: rgba(194, 239, 255, 0.15);
    color: #ffffff;
}

.btn-solid {
    border-radius: 999px;
    padding: 0.65rem 1.6rem;
    font-weight: 700;
    background: linear-gradient(135deg, #0f7c8c, #0a4c68);
    color: #ffffff;
    border: none;
    box-shadow: 0 16px 28px -18px rgba(8, 79, 102, 0.75);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-solid:hover,
.btn-solid:focus {
    transform: translateY(-3px);
    box-shadow: 0 20px 32px -18px rgba(8, 79, 102, 0.85);
    color: #ffffff;
}

.vehicle-card--featured {
    border-color: rgba(247, 183, 51, 0.45);
    box-shadow: 0 32px 52px -32px rgba(247, 183, 51, 0.5);
}

.vehicle-card--moto .vehicle-card-media-overlay {
    background: linear-gradient(180deg, rgba(6, 18, 28, 0.15), rgba(7, 62, 95, 0.92));
}

.vehicle-card--suv .vehicle-card-media-overlay {
    background: linear-gradient(180deg, rgba(6, 18, 28, 0.15), rgba(20, 59, 55, 0.92));
}

.vehicle-card--accent-hero .vehicle-card-media-overlay {
    background: linear-gradient(180deg, rgba(6, 18, 28, 0.1), rgba(12, 102, 112, 0.96));
}

.vehicle-card--accent-yamaha .vehicle-card-media-overlay {
    background: linear-gradient(180deg, rgba(6, 18, 28, 0.1), rgba(0, 47, 108, 0.95));
}

.vehicle-card--accent-ktm .vehicle-card-media-overlay {
    background: linear-gradient(180deg, rgba(6, 18, 28, 0.1), rgba(202, 83, 18, 0.92));
}

.vehicle-card--accent-dacia .vehicle-card-media-overlay {
    background: linear-gradient(180deg, rgba(6, 18, 28, 0.1), rgba(20, 96, 70, 0.92));
}

.vehicle-card--accent-renault .vehicle-card-media-overlay {
    background: linear-gradient(180deg, rgba(6, 18, 28, 0.1), rgba(214, 148, 33, 0.9));
}

@media (max-width: 992px) {
    .vehicles-collection-header {
        padding: 2.5rem 2rem;
    }

    .vehicles-segment {
        padding: 1.75rem;
    }
}

@media (max-width: 768px) {
    .vehicles-collection-stats {
        flex-direction: column;
    }

    .vehicles-collection-stat {
        width: 100%;
        justify-content: center;
    }

    .vehicles-segment-stats {
        flex-direction: column;
    }

    .vehicles-segment-stats li {
        justify-content: center;
    }

    .vehicle-card {
        border-radius: 20px;
    }
}

/* Filters */
.filters-section {
    padding: 48px 0 32px;
    background: #f8fafc;
}

.filters {
    display: grid;
    gap: 24px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-group label {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #0f172a;
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.filter-btn {
    flex: 1 1 160px;
    border: 1px solid rgba(15, 23, 42, 0.16);
    background: #ffffff;
    color: #0f172a;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.filter-btn:hover,
.filter-btn:focus-visible {
    border-color: rgba(15, 23, 42, 0.35);
    color: #0f172a;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
}

.filter-btn.active {
    background: linear-gradient(135deg, #1a4d7a 0%, #2563eb 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 16px 32px -18px rgba(26, 77, 122, 0.65);
}

/* Profile hero blocks */
.profile-hero,
.tour-category-hero {
    padding: clamp(3.5rem, 5vw, 5rem) 0 clamp(2.5rem, 4vw, 4rem);
    background: linear-gradient(135deg, #102a43 0%, #1a4d7a 100%);
    color: rgba(242, 248, 255, 0.92);
    overflow: hidden;
}

.profile-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: clamp(2.2rem, 5vw, 3.5rem);
    align-items: start;
}

.profile-hero-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.profile-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(248, 250, 252, 0.88);
}

.profile-hero-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    color: #f8fbff;
}

.profile-hero-description {
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(241, 249, 255, 0.85);
    max-width: 46ch;
}

.profile-hero-highlights {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

.profile-hero-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.98rem;
    color: rgba(236, 244, 255, 0.92);
}

.profile-hero-highlights i {
    font-size: 1.1rem;
    color: #f59e0b;
    margin-top: 2px;
}

.profile-hero-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.profile-hero-cta .btn {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.5 !important;
    min-height: 44px !important;
    padding: 12px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.profile-hero-card,
.tour-category-card {
    background: rgba(15, 23, 42, 0.72);
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);
    backdrop-filter: blur(16px);
}

.profile-hero-card-inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 32px;
    color: rgba(241, 248, 255, 0.9);
}

.profile-hero-card-inner p {
    margin: 0;
    line-height: 1.7;
}

.profile-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

.profile-hero-stat {
    background: rgba(15, 23, 42, 0.55);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-hero-stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    color: #f8fbff;
}

.profile-hero-stat-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(236, 244, 255, 0.68);
}

.profile-hero-card .btn {
    align-self: flex-start;
}

/* Tour category card - açık renkler için özel stiller */
.tour-category-card h2 {
    color: rgba(248, 251, 255, 0.95) !important;
}

.tour-category-card p {
    color: rgba(236, 244, 255, 0.85) !important;
}

.tour-category-card .profile-hero-card-footer {
    color: rgba(236, 244, 255, 0.9) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.tour-category-card .profile-hero-card-footer i {
    color: #4ade80 !important;
}

/* Tour hero card (tur detay sayfası) - açık renkler için özel stiller */
.tour-hero-card h2 {
    color: rgba(248, 251, 255, 0.95) !important;
}

.tour-hero-card p {
    color: rgba(236, 244, 255, 0.85) !important;
}

.tour-hero-card .profile-hero-card-footer {
    color: rgba(236, 244, 255, 0.9) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.tour-hero-card .profile-hero-card-footer i {
    color: #4ade80 !important;
}

@media (max-width: 768px) {
    .filters {
        gap: 20px;
    }

    .filter-buttons {
        gap: 10px;
    }

    .filter-btn {
        flex: 1 1 calc(50% - 10px);
    }

    .profile-hero,
    .tour-category-hero {
        padding: 60px 0 42px;
    }

    .profile-hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-hero-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-hero-card,
    .tour-category-card {
        border-radius: 20px;
    }

    .profile-hero-card-inner {
        padding: 26px;
    }

    .profile-hero-stats {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}
@media (max-width: 576px) {
    .filter-btn {
        flex: 1 1 100%;
    }

    .profile-hero-card-inner {
        padding: 22px;
    }

    .profile-hero-highlights {
        gap: 12px;
    }
}

/* Homepage responsive refinements */
@media (max-width: 1200px) {
    .hero {
        min-height: 520px;
    }

    .hero-title {
        font-size: 64px;
    }

    .hero .search-form {
        max-width: 780px;
    }

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

@media (max-width: 992px) {
    .hero {
        min-height: 500px;
    }

    .hero-content {
        padding: 0 24px;
    }

    .hero-title {
        font-size: 52px;
        letter-spacing: -1.6px;
    }

    .hero-search-overlay {
        padding: 0 24px;
    }

    .hero .search-form {
        padding: 12px 16px;
        border-radius: 32px;
    }

    .hero .search-form .search-field input {
        padding: 12px 18px;
        font-size: 14px;
    }

    .hero .search-form .search-btn {
        width: 48px;
        height: 48px;
    }

    .tours-carousel,
    .regions-carousel,
    .rental-carousel,
    .media-carousel {
        padding: 10px 32px;
        gap: 20px;
    }

    .carousel-nav {
        width: 36px;
        height: 36px;
    }

    .destinations-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .ways-to-go-content {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .ways-to-go-left .section-link {
        text-align: left;
    }

    .ways-to-go-right {
        height: 360px;
        border-radius: 12px;
    }

    .vehicles-segment-grid,
    .home-vehicles-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .home-vehicle-card-body {
        min-height: auto;
    }
}
@media (max-width: 768px) {
    .hero {
        height: 70vh;
        min-height: 500px;
        max-height: 600px;
    }

    .hero-slider {
        position: relative;
        height: 100%;
    }

    .hero-slide {
        position: absolute;
        height: 100%;
    }

    .hero-background img {
        object-fit: cover;
        object-position: center;
    }

    .hero-background::after {
        background: rgba(0, 0, 0, 0.5);
    }

    .hero-content {
        align-items: center;
        text-align: center;
        padding: 40px 20px 80px;
        gap: 20px;
        justify-content: flex-end;
    }

    .hero-title {
        font-size: 38px;
        letter-spacing: -1.2px;
        line-height: 1.15;
        margin-bottom: 0;
    }

    .hero-search-overlay {
        padding: 0 20px;
    }

    .hero-search {
        width: 100%;
        max-width: 100%;
    }

    .hero .search-form {
        flex-direction: column;
        gap: 10px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        padding: 16px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(10px);
    }

    .hero .search-form .search-field input {
        border-radius: 12px;
        padding: 12px 16px;
        font-size: 15px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(0, 0, 0, 0.08);
    }

    .hero .search-form .search-field input:focus {
        background: white;
        border-color: #1b5e20;
    }

    .hero .search-form .search-btn {
        width: 100%;
        height: 48px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 600;
        margin-top: 4px;
    }

    .hero-dots {
        bottom: 20px;
        gap: 6px;
        z-index: 15;
    }

    .dot {
        width: 10px;
        height: 10px;
        background-color: rgba(255, 255, 255, 0.5);
    }

    .dot.active {
        background-color: white;
        transform: scale(1.2);
    }

    .section {
        padding: 54px 0;
    }

    .section-title {
        font-size: 24px;
    }

    .tours-carousel,
    .regions-carousel,
    .rental-carousel,
    .media-carousel {
        padding: 10px 20px;
        gap: 16px;
    }

    .carousel-nav {
        display: none;
    }

    .tour-card {
        min-width: 260px;
    }

    .destinations-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 28px;
    }

    .tour-types li a {
        font-size: 15px;
    }

    .ways-to-go-right {
        height: auto;
    }

    .ways-to-go-right img {
        border-radius: 14px;
    }

    .blog-layout {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .blog-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .home-vehicles-header h2 {
        font-size: 30px;
    }

    .home-vehicles-group-header h3 {
        font-size: 24px;
    }

    .home-vehicles-grid {
        grid-template-columns: 1fr;
    }

    .home-vehicle-card-footer .btn {
        flex: 1 1 100%;
    }
}

@media (max-width: 576px) {
    .hero {
        height: 65vh;
        min-height: 450px;
        max-height: 550px;
    }

    .hero-content {
        padding: 30px 16px 70px;
        gap: 18px;
    }

    .hero-title {
        font-size: 32px;
        letter-spacing: -1px;
        line-height: 1.2;
    }

    .hero-search-overlay {
        padding: 0 16px;
    }

    .hero .search-form {
        padding: 14px;
        border-radius: 18px;
        gap: 8px;
    }

    .hero .search-form .search-field input {
        padding: 11px 14px;
        font-size: 14px;
    }

    .hero .search-form .search-btn {
        height: 44px;
        font-size: 14px;
    }

    .hero-dots {
        bottom: 16px;
        gap: 5px;
    }

    .dot {
        width: 8px;
        height: 8px;
    }

    .section {
        padding: 45px 0;
    }

    .section-link {
        text-align: left;
        margin-top: 24px;
    }

    .destinations-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .home-vehicle-card {
        border-radius: 20px;
    }

    .home-vehicle-card-body {
        padding: 24px 22px 26px;
    }

    .home-vehicle-card h4 {
        font-size: 22px;
    }

    .home-vehicle-card-meta {
        gap: 8px 14px;
        font-size: 13px;
    }

    .newsletter-content {
        flex-direction: column;
        gap: 18px;
    }

    .newsletter-right {
        width: 100%;
    }

    .newsletter-form {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
    }
}

/* Global responsive refinements for carousel-based sections */
@media (max-width: 768px) {
    .tours-carousel,
    .regions-carousel,
    .rental-carousel,
    .media-carousel {
        padding: 10px 24px;
        gap: 18px;
    }

    .tours-carousel > *,
    .regions-carousel > *,
    .rental-carousel > *,
    .media-carousel > * {
        flex: 0 0 80%;
        max-width: 80%;
    }

    .tour-card .tour-content {
        padding: 20px;
    }

    .region-card {
        min-width: 260px;
    }

    .region-image {
        width: 100%;
        height: 260px;
    }

    .media-card {
        min-width: 260px;
    }

    .media-image {
        height: 240px;
    }

    .vehicles-hero-grid {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .vehicles-hero-text,
    .vehicles-hero-card,
    .vehicles-hero-card-inner {
        width: 100%;
        max-width: 100%;
    }

    .vehicles-hero-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .vehicles-hero-tab {
        flex: 1 1 48%;
        justify-content: space-between;
    }

    .vehicles-hero-metrics {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }
}

@media (max-width: 576px) {
    .tours-carousel,
    .regions-carousel,
    .rental-carousel,
    .media-carousel {
        padding: 8px 14px;
        gap: 12px;
    }

    .tours-carousel > *,
    .regions-carousel > *,
    .rental-carousel > *,
    .media-carousel > * {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 100%;
    }

    .tour-card,
    .tour-card.tour-card--empty,
    .region-card,
    .region-card.region-card--empty,
    .media-card,
    .media-card.media-card--empty,
    .blog-card {
        width: 100%;
        min-width: unset !important;
    }

    .tour-card .tour-content {
        padding: 18px;
    }

    .region-image {
        height: auto;
        aspect-ratio: 4 / 5;
    }

    .media-image {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .vehicles-hero,
    .blog-hero {
        padding: 64px 0 48px;
    }

    .vehicles-hero-tab,
    .blog-hero .vehicles-hero-tab {
        flex: 1 1 100%;
    }

    .vehicles-hero-card-inner,
    .blog-hero .vehicles-hero-card-inner {
        padding: 20px;
    }

    .vehicles-hero-metrics,
    .blog-hero .vehicles-hero-metrics {
        flex-direction: column;
        gap: 10px;
    }
}

/* Reservation Success Page Styles */
.reservation-success-hero {
    padding: 100px 0 80px;
    background: linear-gradient(135deg, rgba(18, 44, 73, 0.95), rgba(28, 76, 119, 0.9));
    color: white;
    position: relative;
}

.breadcrumbs--light {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40px;
}

.breadcrumbs--light a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.breadcrumbs--light a:hover {
    color: white;
}

.breadcrumbs--light span {
    color: rgba(255, 255, 255, 0.7);
}

.reservation-success-card {
    max-width: 1000px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 24px;
    padding: 60px 50px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
    color: #1a4d7a;
}

.reservation-success-card > .reservation-success-icon,
.reservation-success-card > .reservation-success-title,
.reservation-success-card > .reservation-success-description {
    text-align: center;
}

.reservation-success-card > .reservation-details-grid {
    margin-top: 50px;
    text-align: left;
}

.reservation-success-icon {
    font-size: 90px;
    color: #10b981;
    margin-bottom: 28px;
}

.reservation-success-title {
    font-family: 'Oswald', sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #1a4d7a;
    margin-bottom: 24px;
    line-height: 1.2;
}

.reservation-success-description {
    font-size: 18px;
    line-height: 1.8;
    color: #2c567d;
    margin-bottom: 0;
}

.reservation-details {
    background-color: var(--surface-soft);
}

.reservation-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.reservation-success-card .reservation-details-grid {
    margin-top: 50px;
    margin-bottom: 0;
}

.reservation-details-card {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 15px 45px rgba(16, 40, 65, 0.08);
}

.reservation-details-title {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #1a4d7a;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.reservation-details-title i {
    color: #1b5e20;
    font-size: 22px;
}

.reservation-details-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reservation-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e9f0;
}

.reservation-detail-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.reservation-detail-label {
    font-weight: 700;
    color: #2c567d;
    flex: 0 0 40%;
}

.reservation-detail-value {
    color: #1a4d7a;
    font-weight: 400;
    text-align: right;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.status-badge--pending {
    background-color: #fef3c7;
    color: #92400e;
}

.status-badge--confirmed {
    background-color: #d1fae5;
    color: #065f46;
}

.status-badge--cancelled {
    background-color: #fee2e2;
    color: #991b1b;
}

.status-badge--completed {
    background-color: #dbeafe;
    color: #1e40af;
}

.reservation-notes-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #bae6fd;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 45px rgba(16, 40, 65, 0.1);
    margin-top: 40px;
    position: relative;
    overflow: hidden;
}

.reservation-notes-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
}

.reservation-notes-card .reservation-details-title {
    color: #1e40af;
    margin-bottom: 20px;
}

.reservation-notes-card .reservation-details-title i {
    color: #3b82f6;
}

.reservation-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 24px;
}

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

@media (max-width: 768px) {
    .reservation-summary-grid {
        grid-template-columns: 1fr;
    }
}

.reservation-summary-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    border-left: 3px solid #3b82f6;
}

.reservation-summary-item--full {
    grid-column: 1 / -1;
}

.reservation-summary-label {
    font-weight: 700;
    color: #1e40af;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reservation-summary-value {
    color: #1a4d7a;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reservation-notes-content {
    color: #1e3a8a;
    line-height: 1.9;
    white-space: pre-line;
    font-size: 16px;
    background: white;
    padding: 24px;
    border-radius: 12px;
    border-left: 3px solid #3b82f6;
}

.reservation-invite-card {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #fbbf24;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 45px rgba(16, 40, 65, 0.1);
    margin-top: 40px;
    position: relative;
    overflow: hidden;
}

.reservation-invite-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
}

.reservation-invite-card .reservation-details-title {
    color: #92400e;
    margin-bottom: 16px;
}

.reservation-invite-card .reservation-details-title i {
    color: #f59e0b;
}

.reservation-invite-description {
    color: #78350f;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 24px;
}

.reservation-invitations-status {
    background: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    border-left: 3px solid #f59e0b;
}

.reservation-invitations-status p {
    color: #78350f;
    font-weight: 600;
    margin-bottom: 12px;
}

.reservation-invitations-status ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.reservation-invitations-status li {
    color: #78350f;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.reservation-invite-form {
    margin-top: 24px;
}

.reservation-invite-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.reservation-invite-fields .wizard-field {
    margin-bottom: 0;
}

.reservation-invite-fields .wizard-field label {
    color: #78350f;
    font-weight: 600;
}

.reservation-invite-fields .wizard-field input,
.reservation-invite-fields .wizard-field textarea {
    background: white;
    border-color: rgba(139, 92, 8, 0.3);
    color: #0f172a;
}

.reservation-invite-fields .wizard-field input:focus,
.reservation-invite-fields .wizard-field textarea:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.reservation-actions {
    background-color: white;
}

.reservation-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.reservation-action-card {
    background: white;
    border: 2px solid #e5e9f0;
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    text-decoration: none;
    color: #1a4d7a;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.reservation-action-card:hover {
    border-color: #1b5e20;
    transform: translateY(-4px);
    box-shadow: 0 15px 45px rgba(16, 40, 65, 0.15);
    color: #1a4d7a;
}

.reservation-action-icon {
    font-size: 48px;
    color: #1b5e20;
}

.reservation-action-card h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.reservation-action-card p {
    font-size: 14px;
    color: #56697f;
    margin: 0;
}

.reservation-cta {
    background-color: var(--surface-soft);
}

.reservation-cta-card {
    background: white;
    border-radius: 20px;
    padding: 50px 40px;
    text-align: center;
    box-shadow: 0 15px 45px rgba(16, 40, 65, 0.08);
}

.reservation-cta-content h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #1a4d7a;
    margin-bottom: 16px;
}

.reservation-cta-content p {
    font-size: 18px;
    color: #2c567d;
    margin-bottom: 32px;
}

.reservation-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

/* Reservation Participants Card */
.reservation-participants-card {
    margin-top: 30px;
}

.reservation-participants-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.reservation-participant-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #f8fbff;
    border-radius: 12px;
    border-left: 3px solid #1b5e20;
    transition: all 0.3s ease;
}

.reservation-participant-item:hover {
    background: #f0f7ff;
    transform: translateX(4px);
}

.reservation-participant-info {
    flex: 1;
}

.reservation-participant-name {
    font-weight: 700;
    color: #1a4d7a;
    font-size: 16px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.reservation-participant-name i {
    color: #1b5e20;
    font-size: 20px;
}

.reservation-participant-details {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.reservation-participant-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #56697f;
    font-size: 14px;
}

.reservation-participant-detail i {
    color: #1b5e20;
    font-size: 14px;
}

.reservation-participant-status {
    flex-shrink: 0;
}

.reservation-participants-actions {
    margin-top: 20px;
    text-align: right;
}

.reservation-participants-empty {
    text-align: center;
    padding: 20px 20px 0 20px;
}

.reservation-participants-empty-icon {
    font-size: 64px;
    color: #cbd5e1;
    margin-bottom: 20px;
}

.reservation-participants-empty-text {
    color: #56697f;
    font-size: 16px;
}

.reservation-participants-empty-text i {
    margin-right: 8px;
}

.btn-sm {
    padding: 10px 20px;
    font-size: 14px;
}

/* Invite Participant Modal */
.invite-participant-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2500;
    padding: 20px;
}

.invite-participant-modal.is-open {
    display: flex;
}

body.invite-modal-open {
    overflow: hidden;
}

.invite-participant-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 17, 31, 0.75);
    backdrop-filter: blur(4px);
}

.invite-participant-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(600px, 92vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 28px 72px rgba(6, 22, 44, 0.4);
    overflow: hidden;
}

.invite-participant-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 28px 32px;
    border-bottom: 1px solid #e5e9f0;
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
}

.invite-participant-modal__title {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1a4d7a;
    margin: 0 0 4px 0;
}

.invite-participant-modal__subtitle {
    font-size: 14px;
    color: #56697f;
    margin: 0;
    line-height: 1.5;
}

.invite-participant-modal__close {
    border: none;
    background: rgba(15, 33, 55, 0.08);
    color: #4a5b73;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.invite-participant-modal__close:hover {
    background: rgba(15, 33, 55, 0.15);
    color: #102742;
}

.invite-participant-modal__body {
    padding: 32px;
    overflow-y: auto;
    flex: 1;
}

.invite-participant-modal__description {
    color: #1a4d7a;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 24px;
}

.invite-participant-modal__status {
    background: #f8fbff;
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 24px;
    border-left: 3px solid #f59e0b;
}

.invite-participant-modal__status p {
    color: #1a4d7a;
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 14px;
}

.invite-participant-modal__status ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.invite-participant-modal__status li {
    color: #56697f;
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.invite-participant-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e5e9f0;
}

.invite-participant-modal__body .reservation-invite-fields {
    margin-bottom: 0;
}

.invite-participant-modal__body .wizard-field {
    margin-bottom: 20px;
}

.invite-participant-modal__body .wizard-field:last-child {
    margin-bottom: 0;
}

.invite-participant-modal__body .wizard-field label {
    color: #1a4d7a;
    font-weight: 600;
    font-size: 14px;
}

.invite-participant-modal__body .wizard-field input {
    background: #f8fbff;
    border: 1px solid rgba(26, 77, 122, 0.2);
    color: #112132;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.2s ease;
}

.invite-participant-modal__body .wizard-field input:focus {
    outline: none;
    border-color: #1b5e20;
    box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.1);
    background: #ffffff;
}

@media (max-width: 768px) {
    .invite-participant-modal__dialog {
        width: 95vw;
        max-height: 95vh;
    }

    .invite-participant-modal__header {
        padding: 24px;
    }

    .invite-participant-modal__body {
        padding: 24px;
    }

    .invite-participant-modal__title {
        font-size: 20px;
    }

    .reservation-participant-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .reservation-participant-status {
        width: 100%;
    }

    .reservation-participants-actions {
        text-align: center;
    }
}

/* My Reservations Page */
.my-reservations {
    background-color: var(--surface-soft);
}

.reservation-login {
    background-color: var(--surface-soft);
    padding: 60px 0;
}

.reservation-login-card {
    max-width: 500px;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    padding: 50px 40px;
    box-shadow: 0 15px 45px rgba(16, 40, 65, 0.08);
}

.reservation-login-header {
    text-align: center;
    margin-bottom: 32px;
}

.reservation-login-header i {
    font-size: 64px;
    color: #1a4d7a;
    margin-bottom: 20px;
}

.reservation-login-header h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #1a4d7a;
    margin-bottom: 12px;
}

.reservation-login-header p {
    font-size: 16px;
    color: #56697f;
    line-height: 1.6;
}

.reservation-login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.reservation-login-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reservation-login-form label {
    font-weight: 600;
    color: #1a4d7a;
    font-size: 14px;
}

.reservation-login-form .form-control {
    padding: 14px 18px;
    border: 2px solid #e0e7ef;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.2s ease;
}

.reservation-login-form .form-control:focus {
    outline: none;
    border-color: #1a4d7a;
}

.reservation-login-form .form-control.is-invalid {
    border-color: #dc3545;
}

.reservation-login-form .error-message {
    color: #dc3545;
    font-size: 14px;
}

.reservation-login-form .btn-block {
    margin-top: 8px;
}

.reservation-empty-state {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 45px rgba(16, 40, 65, 0.08);
}

.reservation-empty-icon {
    font-size: 80px;
    color: #cbd5e1;
    margin-bottom: 24px;
}

.reservation-empty-state h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    color: #1a4d7a;
    margin-bottom: 12px;
}

.reservation-empty-state p {
    font-size: 16px;
    color: #56697f;
    margin-bottom: 32px;
}

.reservations-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.reservation-card {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 15px 45px rgba(16, 40, 65, 0.08);
    transition: all 0.3s ease;
}

.reservation-card:hover {
    box-shadow: 0 20px 50px rgba(16, 40, 65, 0.12);
    transform: translateY(-2px);
}

.reservation-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e5e9f0;
}

.reservation-card-title {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reservation-card-title h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #1a4d7a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.reservation-card-title h3 i {
    color: #1b5e20;
}

.reservation-number {
    font-size: 14px;
    color: #56697f;
    font-weight: 500;
}

.reservation-card-body {
    margin-bottom: 24px;
}

.reservation-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.reservation-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.reservation-info-item i {
    color: #1b5e20;
    font-size: 18px;
    margin-top: 2px;
}

.reservation-info-item div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reservation-info-item strong {
    font-size: 13px;
    color: #56697f;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reservation-info-item span {
    font-size: 15px;
    color: #1a4d7a;
    font-weight: 500;
}

.reservation-card-footer {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.reservations-actions {
    margin-top: 40px;
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .reservation-success-hero {
        padding: 80px 0 60px;
    }

    .reservation-success-card {
        padding: 40px 24px;
        max-width: 100%;
    }

    .reservation-success-icon {
        font-size: 70px;
    }

    .reservation-success-title {
        font-size: 28px;
    }

    .reservation-success-description {
        font-size: 16px;
    }

    .reservation-success-card > .reservation-details-grid {
        margin-top: 40px;
    }

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

    .reservation-notes-card {
        padding: 28px 20px;
        margin-top: 30px;
    }

    .reservation-notes-content {
        padding: 20px;
        font-size: 15px;
    }

    .reservation-actions-grid {
        grid-template-columns: 1fr;
    }

    .reservation-card-header {
        flex-direction: column;
        gap: 16px;
    }

    .reservation-info-grid {
        grid-template-columns: 1fr;
    }

    .reservation-card-footer {
        flex-direction: column;
    }

    .reservation-invite-fields {
        grid-template-columns: 1fr;
    }

    .reservation-card-footer .btn {
        width: 100%;
    }
}

/* Frontend Pagination Styles */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 48px;
    margin-bottom: 32px;
}

.pagination-wrapper nav {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* Override all Laravel/Tailwind pagination classes */
.pagination-wrapper a,
.pagination-wrapper span,
.pagination-wrapper .inline-flex,
.pagination-wrapper .items-center,
.pagination-wrapper .px-4,
.pagination-wrapper .py-2,
.pagination-wrapper .text-sm,
.pagination-wrapper .font-medium,
.pagination-wrapper .leading-5,
.pagination-wrapper .border,
.pagination-wrapper .rounded-md {
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    outline: none;
    cursor: pointer;
}

/* Active page */
.pagination-wrapper span.relative,
.pagination-wrapper .active span {
    background: linear-gradient(135deg, #1a4d7a 0%, #1e5f99 100%);
    color: #ffffff;
    border-color: #1a4d7a;
    box-shadow: 0 4px 12px rgba(26, 77, 122, 0.25);
    transform: translateY(-1px);
}

/* Hover effects */
.pagination-wrapper a:hover {
    background: #1a4d7a;
    color: #ffffff;
    border-color: #1a4d7a;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(26, 77, 122, 0.3);
}

/* Focus states */
.pagination-wrapper a:focus-visible {
    outline: 2px solid #1a4d7a;
    outline-offset: 2px;
}

/* Disabled states */
.pagination-wrapper .cursor-default,
.pagination-wrapper span.text-gray-500 {
    background: #f8fafc;
    color: #94a3b8;
    border-color: #e2e8f0;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
    .pagination-wrapper nav {
        gap: 6px;
    }

    .pagination-wrapper a,
    .pagination-wrapper span {
        min-width: 40px;
        height: 40px;
        padding: 0 12px;
        font-size: 13px;
    }
}

/* Dark theme */
[data-theme="dark"] .pagination-wrapper a,
[data-theme="dark"] .pagination-wrapper span {
    background: #1e293b;
    color: #cbd5e1;
    border-color: #334155;
}

[data-theme="dark"] .pagination-wrapper a:hover,
[data-theme="dark"] .pagination-wrapper span.relative,
[data-theme="dark"] .pagination-wrapper .active span {
    background: linear-gradient(135deg, #334155 0%, #475569 100%);
    color: #ffffff;
    border-color: #334155;
    box-shadow: 0 4px 12px rgba(51, 65, 85, 0.4);
}

[data-theme="dark"] .pagination-wrapper .cursor-default,
[data-theme="dark"] .pagination-wrapper span.text-gray-500 {
    background: #0f172a;
    color: #64748b;
    border-color: #1e293b;
}