/* Ana site header/footer görünümü. Koltuk ve satış bileşenlerinden bağımsızdır. */
.header, .footer { font-family: "Nunito", sans-serif; }
    :root {
        --site-header-bg: #f6f9ff;
    }

    .header,
    .header.scrolled {
        background: var(--site-header-bg) !important;
        border-bottom: 0 !important;
        border-image: none !important;
        box-shadow: none !important;
        padding: 10px 0;
    }

    .header::before {
        background-image: url("../images/site-shell/header-izmir-stage.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: min(1600px, 100%) 100%;
        content: '';
        inset: 0;
        pointer-events: none;
        position: absolute;
    }

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

    .header-content {
        animation: siteHeaderReveal 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
        border: 1px solid transparent;
        border-radius: 28px;
        padding: 0 10px;
        position: relative;
        transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
    }

    .header.scrolled .header-content {
        background: rgba(246, 249, 255, 0.94);
        border-color: rgba(214, 226, 240, 0.72);
        box-shadow: 0 10px 28px rgba(37, 77, 116, 0.1);
        padding: 2px 14px;
        -webkit-backdrop-filter: blur(16px) saturate(1.25);
        backdrop-filter: blur(16px) saturate(1.25);
    }

    .header .logo img {
        animation: siteLogoFloat 5.5s ease-in-out infinite;
        filter: drop-shadow(0 7px 10px rgba(31, 77, 116, 0.16));
    }

    .header .nav-menu {
        background: transparent;
        box-shadow: none;
        gap: 4px;
    }

    .header .nav-link:not(.btn-ticket) {
        color: #17324d;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
    }

    .header .nav-item:not(:nth-child(8)) .nav-link::before {
        display: none;
    }

    .header .nav-item:nth-child(1) { --pencil-line: #3ba9ef; }
    .header .nav-item:nth-child(2) { --pencil-line: #67c96f; }
    .header .nav-item:nth-child(3) { --pencil-line: #e9ad00; }
    .header .nav-item:nth-child(4) { --pencil-line: #e85ba7; }
    .header .nav-item:nth-child(5) { --pencil-line: #f16f4b; }
    .header .nav-item:nth-child(6) { --pencil-line: #7664d9; }
    .header .nav-item:nth-child(7) { --pencil-line: #22aa99; }

    .header .nav-link:not(.btn-ticket):hover,
    .header .nav-link:not(.btn-ticket).active {
        background: transparent !important;
        box-shadow: none !important;
        color: #17324d !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) !important;
        transform: translateY(-1px) !important;
    }

    .header .nav-link:not(.btn-ticket)::after {
        background:
            linear-gradient(176deg, transparent 28%, var(--pencil-line, #3ba9ef) 32% 52%, transparent 57%),
            linear-gradient(184deg, transparent 48%, color-mix(in srgb, var(--pencil-line, #3ba9ef) 72%, white) 52% 68%, transparent 72%);
        border-radius: 0;
        bottom: -4px;
        display: block !important;
        height: 9px;
        left: 8px;
        opacity: 0;
        transform: scaleX(0) rotate(-1deg);
        transform-origin: left center;
        transition: transform 0.38s cubic-bezier(0.2, 0.75, 0.25, 1), opacity 0.18s ease;
        width: calc(100% - 16px);
    }

    .header .nav-link:not(.btn-ticket):hover::after,
    .header .nav-link:not(.btn-ticket).active::after {
        opacity: 0.9;
        transform: scaleX(1) rotate(-1deg);
    }

    .header .btn-ticket {
        background: linear-gradient(145deg, #ffffff, #edf8ff) !important;
        border: 2px dashed #2f8fc5 !important;
        border-radius: 13px 8px 14px 7px !important;
        box-shadow: 3px 4px 0 rgba(239, 181, 47, 0.28), 0 7px 16px rgba(42, 121, 173, 0.1) !important;
        color: #1768a6 !important;
        letter-spacing: 0.2px;
        transform: rotate(-0.6deg) !important;
    }

    .header .btn-ticket:hover {
        background: #ffffff !important;
        box-shadow: 4px 5px 0 rgba(239, 181, 47, 0.34), 0 9px 18px rgba(42, 121, 173, 0.14) !important;
        color: #125b91 !important;
        transform: translateY(-2px) rotate(0.3deg) !important;
    }

    .header .social-button {
        animation: siteSocialFloat 5s ease-in-out infinite;
        border: 2px solid currentColor;
        border-radius: 46% 54% 48% 52% / 54% 45% 55% 46%;
        box-shadow: 2px 3px 0 rgba(34, 74, 112, 0.09);
        height: 35px;
        width: 35px;
    }

    .header .social-button:nth-child(1) {
        background: #fff4f8;
        border-color: #ef8fb1;
        color: #db4177;
    }

    .header .social-button:nth-child(2) {
        animation-delay: -1.4s;
        background: #f2f6ff;
        border-color: #8fa9dc;
        color: #315998;
    }

    .header .social-button:nth-child(3) {
        animation-delay: -2.8s;
        background: #f1fff7;
        border-color: #85d9aa;
        color: #20a95b;
    }

    .header .social-button:hover {
        background: #ffffff;
        filter: saturate(1.08);
        box-shadow: 3px 4px 0 rgba(34, 74, 112, 0.12);
    }

    .header .social-button:nth-child(1):hover { color: #db4177; }
    .header .social-button:nth-child(2):hover { color: #315998; }
    .header .social-button:nth-child(3):hover { color: #20a95b; }

    body.home-page .hero-card-carousel {
        background: var(--site-header-bg) !important;
    }

    body.inner-page .modern-page-header {
        margin-top: 100px !important;
    }

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

    @keyframes siteLogoFloat {
        0%, 100% { transform: translateY(0) rotate(-0.4deg); }
        50% { transform: translateY(-3px) rotate(0.7deg); }
    }

    @keyframes siteSocialFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-2px); }
    }

    @media (prefers-reduced-motion: reduce) {
        .header-content,
        .header .logo img,
        .header .social-button {
            animation: none !important;
        }
    }

    @media (max-width: 768px) {
        .header,
        .header.scrolled {
            padding: 4px 0 28px !important;
        }

        .header::before {
            background-image: url("../images/site-shell/header-izmir-mobile.svg");
            background-position: center bottom;
            background-size: 100% 32px;
            display: block;
            height: 32px;
            inset: auto 0 0;
            top: auto;
        }

        .header-content,
        .header.scrolled .header-content {
            animation: none !important;
            background: transparent;
            border-color: transparent;
            box-shadow: none;
            column-gap: 0 !important;
            display: flex !important;
            justify-content: center;
            padding: 2px 9px;
            transform: none !important;
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
        }

        .header .mobile-header-actions {
            gap: 12px !important;
            margin-left: 10px !important;
            margin-right: 0 !important;
        }

        .header .mobile-social-inline {
            gap: 7px;
        }

        .header .mobile-toggle {
            margin-left: 10px !important;
        }

        .header .nav-menu,
        .header .nav-menu.active {
            background-color: var(--site-header-bg) !important;
            background-image: url("../images/site-shell/header-ferry-gulls.svg") !important;
            background-position: left bottom !important;
            background-repeat: no-repeat !important;
            background-size: 100% 150px !important;
            border-radius: 0 22px 22px 0;
            box-sizing: border-box;
            box-shadow: 10px 0 35px rgba(33, 69, 105, 0.18);
            height: 100dvh !important;
            max-height: 100dvh !important;
            opacity: 1;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            overscroll-behavior: contain;
            padding: 92px 14px max(18px, env(safe-area-inset-bottom)) !important;
            position: fixed !important;
            scrollbar-width: thin;
            top: 0 !important;
            width: min(84vw, 330px) !important;
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
        }

        .header .nav-menu::before {
            height: 68px !important;
            top: 12px !important;
            width: 68px !important;
        }

        .header .nav-menu .nav-item {
            margin: 0 0 4px !important;
        }

        .header .nav-menu .nav-link:not(.btn-ticket) {
            background: rgba(255, 255, 255, 0.92) !important;
            box-shadow: 0 4px 12px rgba(37, 77, 116, 0.07) !important;
            color: #17324d !important;
            font-size: 14px !important;
            line-height: 1.25 !important;
            margin-bottom: 0 !important;
            padding: 7px 11px !important;
            text-shadow: none !important;
        }

        .header .nav-menu .nav-link:not(.btn-ticket):hover,
        .header .nav-menu .nav-link:not(.btn-ticket).active {
            background: #ffffff !important;
            color: #17324d !important;
            transform: translateX(3px) !important;
        }

        .header .nav-menu .nav-link::after {
            display: none !important;
        }

        .header .nav-menu .btn-ticket {
            font-size: 14px !important;
            margin: 8px auto 6px !important;
            max-width: 140px !important;
            padding: 8px 16px !important;
            width: 56% !important;
        }

        .header .mobile-ticket-button {
            background: linear-gradient(145deg, #ffffff, #edf8ff) !important;
            border: 1.5px dashed #2f8fc5 !important;
            border-radius: 10px 6px 11px 7px !important;
            box-shadow: 2px 3px 0 rgba(239, 181, 47, 0.28) !important;
            color: #1768a6 !important;
            transform: rotate(-0.5deg);
        }

        .header .mobile-social-inline-button,
        .header .mobile-social-button {
            border: 1.5px solid currentColor;
            border-radius: 46% 54% 48% 52% / 54% 45% 55% 46%;
            box-shadow: 1px 2px 0 rgba(34, 74, 112, 0.09);
        }

        .header .mobile-social-inline-button:nth-child(1),
        .header .mobile-social-button:nth-child(1) {
            background: #fff4f8 !important;
            border-color: #ef8fb1;
            color: #db4177;
        }

        .header .mobile-social-inline-button:nth-child(2),
        .header .mobile-social-button:nth-child(2) {
            background: #f2f6ff !important;
            border-color: #8fa9dc;
            color: #315998;
        }

        .header .mobile-social-inline-button:nth-child(3),
        .header .mobile-social-button:nth-child(3) {
            background: #f1fff7 !important;
            border-color: #85d9aa;
            color: #20a95b;
        }

        .header .mobile-social-container {
            border-top-color: #d9e4ef;
            margin-top: 8px !important;
            padding: 10px 0 0 !important;
        }

        .header .mobile-social-buttons {
            gap: 12px;
        }

        .header .mobile-social-button {
            font-size: 14px !important;
            height: 34px !important;
            width: 34px !important;
        }

        .header .mobile-contact-info {
            margin-top: 10px !important;
            padding-top: 8px !important;
        }

        .header .mobile-contact-item {
            background: rgba(255, 255, 255, 0.92);
            margin-bottom: 4px !important;
            padding: 7px 9px !important;
        }

        .header .mobile-contact-item i {
            font-size: 11px !important;
            margin-right: 7px !important;
            width: 13px !important;
        }

        .header .mobile-contact-item span {
            color: #17324d;
            font-size: 10.5px !important;
            line-height: 1.3 !important;
            overflow-wrap: anywhere;
        }

        body.inner-page .modern-page-header {
            margin-top: 120px !important;
        }

        body.home-page .hero-card-carousel {
            margin-top: 108px !important;
        }
    }

    @media (max-width: 350px) {
        .header-content,
        .header.scrolled .header-content {
            column-gap: 0 !important;
        }

        .header .mobile-header-actions {
            gap: 7px !important;
            margin-left: 7px !important;
        }

        .header .mobile-ticket-button {
            min-width: 66px !important;
            padding-left: 13px !important;
            padding-right: 13px !important;
        }

        .header .mobile-social-inline {
            gap: 5px;
        }

        .header .mobile-toggle {
            margin-left: 7px !important;
        }
    }
    .footer.custom-footer-gradient {
        background:
            radial-gradient(circle at 12% 16%, rgba(99, 193, 238, 0.11), transparent 24%),
            radial-gradient(circle at 88% 20%, rgba(239, 143, 177, 0.1), transparent 22%),
            linear-gradient(180deg, #f6f9ff 0%, #eef8ff 48%, #eaf8f5 100%) !important;
        border-top: 1px solid rgba(66, 151, 203, 0.15);
        color: #17324d;
        overflow: hidden;
        padding: 72px 0 34px;
        position: relative;
    }

    .footer.custom-footer-gradient::before {
        background:
            radial-gradient(40px 12px at 40px 0, transparent 38px, rgba(65, 161, 213, 0.22) 39px 40px, transparent 41px) repeat-x;
        background-size: 80px 15px;
        content: '';
        height: 16px;
        left: 0;
        opacity: 0.55;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: -1px;
    }

    .footer.custom-footer-gradient::after {
        background: url("../images/site-shell/footer-izmir-stage.svg") center bottom / min(1600px, 100%) 220px no-repeat;
        bottom: 0;
        content: '';
        height: 220px;
        left: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
        z-index: 0;
    }

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

    .footer > .container > .row:first-child {
        align-items: stretch;
        row-gap: 22px;
    }

    .footer > .container > .row:first-child > [class*='col-'] {
        display: flex;
    }

    .footer .footer-panel {
        background: rgba(255, 255, 255, 0.82);
        border: 1px solid rgba(92, 150, 194, 0.18);
        border-radius: 26px 18px 28px 20px;
        box-shadow: 6px 8px 0 rgba(70, 157, 198, 0.07), 0 18px 45px rgba(31, 78, 114, 0.08);
        min-height: 100%;
        padding: 28px;
        position: relative;
        width: 100%;
    }

    .footer .footer-panel::before {
        border-radius: inherit;
        content: '';
        inset: 5px;
        pointer-events: none;
        position: absolute;
    }

    .footer .footer-brand-panel::before { border: 1px dashed rgba(47, 143, 197, 0.22); }
    .footer .footer-links-panel::before { border: 1px dashed rgba(232, 91, 167, 0.18); }
    .footer .footer-contact-panel::before { border: 1px dashed rgba(74, 174, 124, 0.2); }

    .footer .footer-logo-container.text-center {
        margin: -12px 0 4px !important;
        text-align: center;
    }

    .footer .footer-logo-img {
        filter: drop-shadow(0 9px 12px rgba(28, 72, 111, 0.15));
        height: 96px;
        margin: 0;
        max-width: none;
        object-fit: contain;
        width: 96px;
    }

    .footer .footer-main-title {
        color: #17324d;
        font-family: 'Poppins', sans-serif;
        font-size: 1.18rem;
        font-weight: 800;
        letter-spacing: 0.2px;
        margin: 10px 0 0;
        text-align: center;
    }

    .footer .footer-panel:not(.footer-brand-panel) > h4 {
        color: #17324d;
        display: inline-block;
        font-family: 'Poppins', sans-serif;
        font-size: 1.05rem;
        font-weight: 800;
        margin: 2px 0 24px;
        padding: 0;
        position: relative;
    }

    .footer .footer-panel:not(.footer-brand-panel) > h4::before {
        display: none;
    }

    .footer .footer-panel:not(.footer-brand-panel) > h4::after {
        background:
            linear-gradient(176deg, transparent 28%, #43a9df 32% 52%, transparent 57%),
            linear-gradient(184deg, transparent 48%, rgba(239, 181, 47, 0.75) 52% 68%, transparent 72%);
        bottom: -9px;
        content: '';
        height: 8px;
        left: 0;
        opacity: 0.78;
        position: absolute;
        transform: rotate(-1deg);
        width: 100%;
    }

    .footer .social-media-footer {
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        margin: 18px 0 0 !important;
    }

    .footer .social-media-footer .social-icon {
        background: #fff !important;
        border: 2px solid currentColor;
        border-radius: 46% 54% 48% 52% / 54% 45% 55% 46%;
        box-shadow: 2px 3px 0 rgba(34, 74, 112, 0.09);
        height: 38px;
        width: 38px;
    }

    .footer .social-media-footer .facebook { color: #315998; }
    .footer .social-media-footer .instagram { color: #db4177; }
    .footer .social-media-footer .whatsapp { color: #20a95b; }

    .footer .social-media-footer .social-icon:hover {
        background: #fff !important;
        box-shadow: 3px 5px 0 rgba(34, 74, 112, 0.11);
        color: inherit;
        transform: translateY(-2px) rotate(2deg);
    }

    .footer .footer-ticket-btn {
        background: linear-gradient(145deg, #fff, #edf8ff);
        border: 2px dashed #2f8fc5;
        border-radius: 13px 8px 14px 7px;
        box-shadow: 3px 4px 0 rgba(239, 181, 47, 0.3);
        color: #1768a6;
        font-size: 13px;
        height: 38px;
        margin-left: 4px;
        padding: 0 17px;
        transform: rotate(-0.6deg);
    }

    .footer .footer-ticket-btn:hover {
        background: #fff;
        color: #125b91;
        transform: translateY(-2px) rotate(0.3deg);
    }

    .footer .footer-links {
        display: grid;
        gap: 7px 9px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        list-style: none;
        margin: 0 !important;
        padding: 0;
    }

    .footer .footer-links li {
        margin: 0;
        min-width: 0;
    }

    .footer .footer-links li a {
        background: linear-gradient(177deg, #ffffff 0 82%, #f1f7fb 83% 100%);
        border: 0;
        border-radius: 4px 10px 5px 8px;
        box-shadow: inset 0 -2px 0 var(--paper-accent), 2px 3px 0 rgba(38, 83, 119, 0.07);
        clip-path: polygon(2px 0, calc(100% - 4px) 2px, 100% calc(100% - 5px), calc(100% - 2px) 100%, 0 calc(100% - 2px), 1px 4px);
        color: #31516d;
        display: block;
        font-size: 12px;
        font-weight: 700;
        overflow: hidden;
        padding: 9px 27px 9px 11px !important;
        position: relative;
        text-overflow: ellipsis;
        transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
        white-space: nowrap;
    }

    .footer .footer-links li:nth-child(3n + 1) a { --paper-accent: rgba(74, 174, 223, 0.62); }
    .footer .footer-links li:nth-child(3n + 2) a { --paper-accent: rgba(233, 104, 164, 0.58); }
    .footer .footer-links li:nth-child(3n + 3) a { --paper-accent: rgba(99, 189, 128, 0.6); }

    .footer .footer-links li a:hover {
        box-shadow: inset 0 -3px 0 var(--paper-accent), 3px 5px 0 rgba(38, 83, 119, 0.08);
        color: #1768a6;
        padding-left: 11px !important;
        transform: translateY(-2px) rotate(-0.35deg);
    }

    .footer .footer-links li a::before,
    .footer .footer-links li a:hover::before {
        display: none;
    }

    .footer .footer-links li a::after {
        color: var(--paper-accent);
        content: '→';
        font-size: 14px;
        font-weight: 800;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%) rotate(-3deg);
    }

    .footer .footer-contact-panel > p {
        align-items: flex-start;
        background: transparent;
        border: 0;
        border-bottom: 1px dashed rgba(65, 145, 196, 0.27);
        border-radius: 0;
        color: #46637c;
        display: flex;
        font-size: 12.5px;
        gap: 10px;
        line-height: 1.45;
        margin: 0;
        padding: 11px 3px;
    }

    .footer .footer-contact-panel > p:last-of-type {
        border-bottom: 0;
    }

    .footer .footer-contact-panel i {
        color: #2f8fc5;
        flex: 0 0 16px;
        margin-top: 3px;
        text-align: center;
    }

    .footer .footer-contact-panel a {
        color: #31516d;
        font-weight: 700;
        overflow-wrap: anywhere;
        text-decoration: none;
    }

    .footer .footer-contact-panel a:hover { color: #1768a6; }

    .footer .footer-lower-row {
        margin-top: 22px !important;
    }

    .footer .footer-lower-row > .col-12 {
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(70, 150, 193, 0.16);
        border-radius: 19px 13px 20px 14px;
        padding: 18px 22px;
    }

    .footer .footer-lower-row hr {
        display: none;
    }

    .footer .footer-lower-row > .col-12 > p {
        color: #526d84;
        font-size: 12px;
        font-weight: 700;
        margin: 0;
    }

    .footer .legal-links-section {
        border-top: 1px dashed rgba(65, 145, 196, 0.22);
        margin-top: 13px;
        padding-top: 13px;
    }

    .footer .legal-links { gap: 8px; }

    .footer .legal-link {
        background: rgba(246, 249, 255, 0.82);
        border: 1px solid rgba(65, 145, 196, 0.16);
        color: #58718a;
        font-size: 11px;
        padding: 5px 9px;
    }

    .footer .legal-link:hover {
        background: #fff;
        color: #1768a6;
    }

    .footer .security-text {
        color: #58718a;
        font-size: 11px;
        font-weight: 700;
    }

    .footer .payment-logo {
        filter: none;
        height: 27px;
        opacity: 0.72;
    }

    @media (max-width: 991px) {
        .footer.custom-footer-gradient { padding-top: 58px; }
        .footer .footer-panel { padding: 22px 18px; }
        .footer .footer-main-title { font-size: 1.05rem; }
        .footer .footer-links { grid-template-columns: 1fr; }
    }

    @media (max-width: 767px) {
        .footer.custom-footer-gradient {
            padding: 52px 0 26px;
        }

        .footer.custom-footer-gradient::after {
            background-position: left bottom;
            background-size: auto 170px;
            height: 170px;
        }

        .footer > .container > .row:first-child {
            row-gap: 14px;
        }

        .footer .footer-panel {
            border-radius: 21px 15px 22px 16px;
            padding: 22px 18px;
        }

        .footer .footer-links {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .footer .footer-contact-panel {
            text-align: left !important;
        }

        .footer .footer-contact-panel > h4 {
            text-align: left;
        }

        .footer .footer-lower-row > .col-12 {
            padding: 17px 14px;
        }

        .footer .legal-links-section {
            gap: 13px;
        }
    }

    @media (max-width: 390px) {
        .footer .footer-links li a {
            font-size: 11px;
            padding: 7px 24px 7px 8px !important;
        }

        .footer .footer-contact-panel > p {
            font-size: 11.5px;
        }
    }

    /* Keep the complete navigation reachable over the legacy mobile menu rules. */
    @media (max-width: 768px) {
        .header .nav-menu,
        .header .nav-menu.active {
            align-items: stretch !important;
            justify-content: flex-start !important;
        }

        .header .nav-menu .nav-item {
            flex: 0 0 auto !important;
            max-width: none !important;
            opacity: 1 !important;
            transform: none !important;
            width: 100% !important;
        }

        .header .nav-menu .mobile-social-container {
            margin-top: auto !important;
        }
    }