:root {
    --sky-blue: #89d0f5;
    --deep-space: #07649C;
    --nebula-pink: #ff6f91;
    --sun-orange: #FA8A3C;
    --star-yellow: #FFFACD;
    --cosmic-purple: #9966cc;
    --moon-white: #ffffff;
    --night-black: #0a0a0a;
    --meteroid-grey: #777777;
    --cloud-light: #f1f8fe;
    --comet-trail: #a2d729;
    --supernova-red: #EA3050;
    
    --primary-color: var(--sky-blue);
    --secondary-color: var(--deep-space);
    --accent-color: var(--nebula-pink);
    --accent-secondary: var(--sun-orange);
    --accent-tertiary: var(--cosmic-purple);
    --light-bg: var(--cloud-light);
    --ultra-light-bg: var(--moon-white);
    --text-color: var(--night-black);
    --light-text: var(--moon-white);
    --dark-text: var(--deep-space);
    
    --border-radius: 16px;
    --button-radius: 50px;
    --card-radius: 16px;
    --input-radius: 12px;
    --small-radius: 8px;
    
    --box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    --soft-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    --hover-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    --glow-shadow: 0 0 15px rgba(137, 208, 245, 0.5);
    
    --transition: all 0.3s ease;
    --hover-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --header-height: 90px;
    
    --gradient-primary: linear-gradient(135deg, var(--sky-blue), var(--deep-space));
    --gradient-accent: linear-gradient(135deg, var(--nebula-pink), var(--sun-orange));
    --gradient-cosmic: linear-gradient(135deg, var(--cosmic-purple), var(--deep-space));
    --gradient-sunny: linear-gradient(135deg, var(--sun-orange), var(--star-yellow));
    --gradient-galaxy: linear-gradient(45deg, var(--deep-space), var(--cosmic-purple), var(--nebula-pink));
    
    --bg-gradient: linear-gradient(135deg, var(--cloud-light) 0%, var(--moon-white) 100%);
    --accent2-color: var(--sun-orange);
    --accent3-color: var(--cosmic-purple);
    --accent-glow: rgba(255, 111, 145, 0.3);
    --accent2-glow: rgba(250, 138, 60, 0.3);
    --accent3-glow: rgba(153, 102, 204, 0.3);
    --border-color: rgba(137, 208, 245, 0.2);
}
/* Font Awesome alt kumesi. Sitede kullanilan ikonlar icin uretildi.
 * Kaynak: Font Awesome 6.2.0 Free (CC BY 4.0 / SIL OFL 1.1 / MIT).
 * Yeniden uretmek icin: scratchpad/fa_subset.py + fa_css.py
 */
@font-face{font-family:'Font Awesome 6 Free';font-style:normal;font-weight:900;font-display:block;src:url('/assets/fonts/fa-solid-900-subset.woff2') format('woff2')}
@font-face{font-family:'Font Awesome 6 Free';font-style:normal;font-weight:400;font-display:block;src:url('/assets/fonts/fa-regular-400-subset.woff2') format('woff2')}
@font-face{font-family:'Font Awesome 6 Brands';font-style:normal;font-weight:400;font-display:block;src:url('/assets/fonts/fa-brands-400-subset.woff2') format('woff2')}
.fa,.fas,.far,.fab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}
.fa,.fas{font-family:'Font Awesome 6 Free';font-weight:900}
.far{font-family:'Font Awesome 6 Free';font-weight:400}
.fab{font-family:'Font Awesome 6 Brands';font-weight:400}
.fa-spin{animation:fa-spin 2s linear infinite}
@keyframes fa-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.fa-spin{animation-delay:-1ms;animation-duration:1ms;animation-iteration-count:1}}
.fa-arrow-right:before{content:"\f061"}
.fa-arrow-up:before{content:"\f062"}
.fa-award:before{content:"\f559"}
.fa-basket-shopping:before{content:"\f291"}
.fa-blog:before{content:"\f781"}
.fa-book:before{content:"\f02d"}
.fa-book-open:before{content:"\f518"}
.fa-brain:before{content:"\f5dc"}
.fa-bullhorn:before{content:"\f0a1"}
.fa-calendar:before{content:"\f133"}
.fa-calendar-alt:before{content:"\f073"}
.fa-calendar-check:before{content:"\f274"}
.fa-camera:before{content:"\f030"}
.fa-chalkboard-teacher:before{content:"\f51c"}
.fa-check:before{content:"\f00c"}
.fa-check-circle:before{content:"\f058"}
.fa-chevron-down:before{content:"\f078"}
.fa-chevron-left:before{content:"\f053"}
.fa-chevron-right:before{content:"\f054"}
.fa-child:before{content:"\f1ae"}
.fa-child-reaching:before{content:"\e59d"}
.fa-city:before{content:"\f64f"}
.fa-clipboard-check:before{content:"\f46c"}
.fa-clock:before{content:"\f017"}
.fa-clock-rotate-left:before{content:"\f1da"}
.fa-cogs:before{content:"\f085"}
.fa-comment-dots:before{content:"\f4ad"}
.fa-compass:before{content:"\f14e"}
.fa-compress:before{content:"\f066"}
.fa-concierge-bell:before{content:"\f562"}
.fa-crown:before{content:"\f521"}
.fa-envelope:before{content:"\f0e0"}
.fa-exclamation-circle:before{content:"\f06a"}
.fa-exclamation-triangle:before{content:"\f071"}
.fa-film:before{content:"\f008"}
.fa-flag:before{content:"\f024"}
.fa-graduation-cap:before{content:"\f19d"}
.fa-hands-helping:before{content:"\f4c4"}
.fa-handshake:before{content:"\f2b5"}
.fa-heart:before{content:"\f004"}
.fa-home:before{content:"\f015"}
.fa-hourglass-half:before{content:"\f252"}
.fa-info-circle:before{content:"\f05a"}
.fa-instagram:before{content:"\f16d"}
.fa-leaf:before{content:"\f06c"}
.fa-magic:before{content:"\f0d0"}
.fa-map-marked-alt:before{content:"\f5a0"}
.fa-map-marker-alt:before{content:"\f3c5"}
.fa-map-pin:before{content:"\f276"}
.fa-map-signs:before{content:"\f277"}
.fa-mask:before{content:"\f6fa"}
.fa-moon:before{content:"\f186"}
.fa-mountain:before{content:"\f6fc"}
.fa-music:before{content:"\f001"}
.fa-palette:before{content:"\f53f"}
.fa-paper-plane:before{content:"\f1d8"}
.fa-pause:before{content:"\f04c"}
.fa-phone:before{content:"\f095"}
.fa-phone-alt:before{content:"\f879"}
.fa-play:before{content:"\f04b"}
.fa-play-circle:before{content:"\f144"}
.fa-plug:before{content:"\f1e6"}
.fa-plus:before{content:"\2b"}
.fa-question-circle:before{content:"\f059"}
.fa-quote-left:before{content:"\f10d"}
.fa-repeat:before{content:"\f363"}
.fa-rocket:before{content:"\f135"}
.fa-school:before{content:"\f549"}
.fa-search:before{content:"\f002"}
.fa-seedling:before{content:"\f4d8"}
.fa-server:before{content:"\f233"}
.fa-shapes:before{content:"\f61f"}
.fa-shield-halved:before{content:"\f3ed"}
.fa-shield-heart:before{content:"\e574"}
.fa-snowflake:before{content:"\f2dc"}
.fa-spinner:before{content:"\f110"}
.fa-star:before{content:"\f005"}
.fa-star-half-alt:before{content:"\f5c0"}
.fa-store:before{content:"\f54e"}
.fa-sun:before{content:"\f185"}
.fa-theater-masks:before{content:"\f630"}
.fa-times:before{content:"\f00d"}
.fa-times-circle:before{content:"\f057"}
.fa-tree:before{content:"\f1bb"}
.fa-truck:before{content:"\f0d1"}
.fa-truck-ramp-box:before{content:"\f4de"}
.fa-user:before{content:"\f007"}
.fa-user-graduate:before{content:"\f501"}
.fa-user-tie:before{content:"\f508"}
.fa-users:before{content:"\f0c0"}
.fa-utensils:before{content:"\f2e7"}
.fa-volume-mute:before{content:"\f6a9"}
.fa-volume-up:before{content:"\f028"}
.fa-water:before{content:"\f773"}
.fa-whatsapp:before{content:"\f232"}

header {
    background-color: transparent;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    height: var(--header-height);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

header.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    height: 70px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    z-index: 10;
}

.logo-svg {
    height: 100px;
    width: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    margin-top: 40px;
}

header.scrolled .logo-svg {
    height: 60px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    margin-top: 0px;
}

nav {
    display: flex;
    align-items: center;
    height: 100%;
}

.nav-menu {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    gap: 10px;
}

.nav-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    opacity: 0.15;
    z-index: -1;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
}

header.scrolled .nav-menu::before {
    opacity: 0;
}

.nav-menu li {
    margin-left: 5px;
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
}

.nav-menu a {
    color: #FFFFFF;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    font-weight: 600;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-radius: 20px;
    margin-top: 30px;
}

.nav-menu a::after {
    display: none;
}

.nav-menu li:nth-child(1) a {
    background: linear-gradient(45deg, rgba(137, 208, 245, 0.8), rgba(137, 208, 245, 0.5));
    box-shadow: 0 4px 12px rgba(137, 208, 245, 0.3);
}

.nav-menu li:nth-child(2) a {
    background: linear-gradient(45deg, rgba(255, 111, 145, 0.8), rgba(255, 111, 145, 0.5));
    box-shadow: 0 4px 12px rgba(255, 111, 145, 0.3);
}

.nav-menu li:nth-child(3) a {
    background: linear-gradient(45deg, rgba(7, 100, 156, 0.8), rgba(7, 100, 156, 0.5));
    box-shadow: 0 4px 12px rgba(7, 100, 156, 0.3);
}

.nav-menu li:nth-child(4) a {
    background: linear-gradient(45deg, rgba(153, 102, 204, 0.8), rgba(153, 102, 204, 0.5));
    box-shadow: 0 4px 12px rgba(153, 102, 204, 0.3);
}

.nav-menu li:nth-child(5) a {
    background: linear-gradient(45deg, rgba(250, 138, 60, 0.8), rgba(250, 138, 60, 0.5));
    box-shadow: 0 4px 12px rgba(250, 138, 60, 0.3);
}

.nav-menu li:nth-child(6) a {
    background: linear-gradient(45deg, rgba(162, 215, 41, 0.8), rgba(162, 215, 41, 0.5));
    box-shadow: 0 4px 12px rgba(162, 215, 41, 0.3);
}

.nav-menu li:nth-child(7) a {
    background: linear-gradient(45deg, rgba(204, 102, 204, 0.8), rgba(204, 102, 204, 0.5));
    box-shadow: 0 4px 12px rgba(204, 102, 204, 0.3);
}

.nav-menu li:nth-child(8) a {
    background: linear-gradient(45deg, rgba(64, 196, 255, 0.8), rgba(64, 196, 255, 0.5));
    box-shadow: 0 4px 12px rgba(64, 196, 255, 0.3);
}

.nav-menu li a:hover,
.nav-menu li.active a {
    background: linear-gradient(45deg, rgba(255, 215, 0, 0.8), rgba(250, 138, 60, 0.5));
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 15px rgba(255, 215, 0, 0.35);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.nav-menu a:hover,
.nav-menu li.active a {
    color: #FFFFFF;
}

header.scrolled .nav-menu a {
    color: var(--secondary-color);
    text-shadow: none;
    margin-top: 20px;
    height: 36px;
}

header.scrolled .nav-menu li:nth-child(1) a {
    background: linear-gradient(45deg, rgba(137, 208, 245, 0.6), rgba(137, 208, 245, 0.3));
    box-shadow: 0 2px 8px rgba(137, 208, 245, 0.2);
}

header.scrolled .nav-menu li:nth-child(2) a {
    background: linear-gradient(45deg, rgba(255, 111, 145, 0.6), rgba(255, 111, 145, 0.3));
    box-shadow: 0 2px 8px rgba(255, 111, 145, 0.2);
}

header.scrolled .nav-menu li:nth-child(3) a {
    background: linear-gradient(45deg, rgba(7, 100, 156, 0.6), rgba(7, 100, 156, 0.3));
    box-shadow: 0 2px 8px rgba(7, 100, 156, 0.2);
}

header.scrolled .nav-menu li:nth-child(4) a {
    background: linear-gradient(45deg, rgba(153, 102, 204, 0.6), rgba(153, 102, 204, 0.3));
    box-shadow: 0 2px 8px rgba(153, 102, 204, 0.2);
}

header.scrolled .nav-menu li:nth-child(5) a {
    background: linear-gradient(45deg, rgba(250, 138, 60, 0.6), rgba(250, 138, 60, 0.3));
    box-shadow: 0 2px 8px rgba(250, 138, 60, 0.2);
}

header.scrolled .nav-menu li:nth-child(6) a {
    background: linear-gradient(45deg, rgba(162, 215, 41, 0.6), rgba(162, 215, 41, 0.3));
    box-shadow: 0 2px 8px rgba(162, 215, 41, 0.2);
}

header.scrolled .nav-menu li:nth-child(7) a {
    background: linear-gradient(45deg, rgba(204, 102, 204, 0.6), rgba(204, 102, 204, 0.3));
    box-shadow: 0 2px 8px rgba(204, 102, 204, 0.2);
}

header.scrolled .nav-menu li:nth-child(8) a {
    background: linear-gradient(45deg, rgba(64, 196, 255, 0.6), rgba(64, 196, 255, 0.3));
    box-shadow: 0 2px 8px rgba(64, 196, 255, 0.2);
}

header.scrolled .nav-menu li a:hover,
header.scrolled .nav-menu li.active a {
    background: linear-gradient(45deg, rgba(255, 215, 0, 0.7), rgba(250, 138, 60, 0.4));
    color: var(--dark-text);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

/* Dropdown Menu Styles */
.nav-menu li.has-dropdown {
    position: relative;
}

.nav-menu li.has-dropdown>a .dropdown-arrow {
    font-size: 0.65rem;
    margin-left: 8px;
    transition: transform 0.3s ease;
    vertical-align: middle;
}

.nav-menu li.has-dropdown:hover>a .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 10px 0;
    min-width: 220px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    list-style: none;
    margin: 0;
}

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

.dropdown-menu li {
    margin: 0 !important;
    height: auto !important;
}

.dropdown-menu li a {
    display: block !important;
    padding: 12px 20px !important;
    color: var(--secondary-color, #07649c) !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    height: auto !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

.dropdown-menu li a:hover {
    background: linear-gradient(90deg, var(--primary-color, #0aa0d6), var(--secondary-color, #07649c)) !important;
    color: #fff !important;
    transform: none !important;
}

header.scrolled .dropdown-menu {
    top: calc(100% - 10px);
}

header.scrolled .dropdown-menu li a {
    color: var(--secondary-color) !important;
}

.mobile-menu-toggle {
    display: none;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #FFFFFF;
    font-size: 1.8rem;
    cursor: pointer;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    padding: 10px 12px;
    border-radius: 8px;
    z-index: 1001;
    position: relative;
    backdrop-filter: blur(5px);
}

header.scrolled .mobile-menu-toggle {
    color: var(--secondary-color);
    text-shadow: none;
    background: rgba(137, 208, 245, 0.2);
}

@media (max-width: 992px) {
    .header-container {
        width: 95%;
    }

    .nav-menu a {
        font-size: 0.95rem;
        padding: 0 12px;
    }
}

@media (max-width: 768px) {
    .header-container {
        width: 95%;
    }

    /* Shrink oversized desktop logo on mobile so it doesn't overlap hero content */
    .logo-svg {
        height: 64px;
        margin-top: 0;
    }

    header.scrolled .logo-svg {
        height: 54px;
    }

    /* Give the mobile header a subtle glass backdrop so logo/hamburger
       stay readable over busy hero images on hero-half pages.
       IMPORTANT: backdrop-filter on <header> would create a containing block
       for the fixed .nav-menu drawer and break its slide-in transition.
       Put it on a pseudo-element layer instead so <header> stays neutral. */
    header::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(7, 100, 156, 0.42) 0%, rgba(7, 100, 156, 0.18) 70%, rgba(7, 100, 156, 0) 100%);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        pointer-events: none;
        z-index: -1;
    }
    header.scrolled::before { display: none; } /* scrolled state already has its own bg */

    .mobile-menu-toggle {
        display: block;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(5px);
    }

    header.scrolled .mobile-menu-toggle {
        background: rgba(137, 208, 245, 0.1);
    }

    .nav-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background: var(--gradient-galaxy);
        flex-direction: column;
        padding: 120px 0 30px 0;
        z-index: 100;
        transition: left 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        align-items: center;
        justify-content: flex-start;
        overflow-y: auto;
    }

    header.scrolled .nav-menu {
        top: 0;
        height: 100vh;
        padding-top: 90px;
    }

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

    .nav-menu::before {
        display: none;
    }

    .nav-menu li {
        margin: 0 0 15px 0;
        height: auto;
        width: 80%;
    }

    .nav-menu li.has-dropdown {
        flex-direction: column;
    }

    .nav-menu a,
    header.scrolled .nav-menu a {
        height: 50px;
        line-height: 50px;
        color: #FFFFFF;
        padding: 0 20px;
        font-size: 1.1rem;
        margin: 0;
        width: 100%;
        justify-content: center;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        border-radius: 25px;
    }

    /* Mobile Dropdown Styles */
    .nav-menu li.has-dropdown .dropdown-menu {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s ease;
        width: 100%;
        padding: 0;
        margin-top: 10px;
        border-radius: 15px;
        box-shadow: none !important;
    }

    .nav-menu li.has-dropdown.dropdown-open .dropdown-menu {
        opacity: 1;
        visibility: visible;
        max-height: 500px;
        padding: 10px 0;
    }

    .nav-menu li.has-dropdown.dropdown-open>a .dropdown-arrow {
        transform: rotate(180deg);
    }

    .nav-menu .dropdown-menu li {
        width: 100%;
        margin: 0;
    }

    .nav-menu .dropdown-menu li a,
    .nav-menu .dropdown-menu li a:visited,
    .nav-menu .dropdown-menu li a:link {
        height: 45px !important;
        line-height: 45px !important;
        font-size: 0.95rem !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #FFFFFF !important;
        padding: 0 15px !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    }

    .nav-menu .dropdown-menu li a:hover {
        background: rgba(255, 255, 255, 0.2) !important;
    }
}
#full-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: var(--gradient-galaxy);
}

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

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

.slider-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.8s ease-in-out, transform 1.2s ease-in-out;
    z-index: 0;
    transform: scale(1.05);
}

.slider-item.active {
    opacity: 1;
    z-index: 1;
    transform: scale(1);
}

.slider-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: center;
    padding: 2rem;
    padding-top: calc(2rem + 90px);
    z-index: 2;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

body.has-campaign-strip .slider-content {
    padding-top: calc(2rem + 90px + var(--campaign-strip-height, 58px));
}

.slider-item.active .slider-content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.slider-content.left {
    align-items: flex-start;
    text-align: left;
    padding-left: 10%;
}

.slider-content.right {
    align-items: flex-end;
    text-align: right;
    padding-right: 10%;
}

.slider-content.bottom-left {
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    padding-left: 5%;
    padding-bottom: 120px;
    /* Push up to avoid overlap with video ticker/dots */
}

.slider-content.center {
    align-items: center;
    text-align: center;
}

.slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
    z-index: 1;
}

.slider-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 250, 205, 0.2) 0%, transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(255, 111, 145, 0.15) 0%, transparent 30%),
        url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAuMDgiPjwvcmVjdD4KPC9zdmc+');
    opacity: 0.9;
}

.slider-title {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    max-width: 900px;
    color: var(--star-yellow) !important;
    animation: floatTitle 5s ease-in-out infinite;
    position: relative;
}

.slider-title::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: var(--gradient-accent);
    border-radius: 3px;
}

.slider-content.left .slider-title::after {
    left: 0;
    transform: none;
}

.slider-content.right .slider-title::after {
    left: auto;
    right: 0;
    transform: none;
}

.slider-subtitle {
    font-size: 2.2rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    max-width: 800px;
    color: var(--moon-white) !important;
    animation: floatSubtitle 5s ease-in-out infinite;
    animation-delay: 0.3s;
}

.slider-description {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    max-width: 700px;
    line-height: 1.6;
    animation: floatDesc 5s ease-in-out infinite;
    animation-delay: 0.6s;
}

.slider-buttons {
    display: flex;
    gap: 1.2rem;
    margin-top: 1.5rem;
    justify-content: center;
    animation: floatButtons 5s ease-in-out infinite;
    animation-delay: 0.9s;
}

.slider-content.left .slider-buttons {
    justify-content: flex-start;
}

.slider-content.right .slider-buttons {
    justify-content: flex-end;
}

.slider-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 3;
    pointer-events: none;
}

.slider-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 2px solid transparent;
    pointer-events: auto;
}

.slider-dot.active {
    background-color: var(--moon-white);
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    border-color: var(--accent-color);
}

.slider-arrows {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    z-index: 3;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.slider-arrows:hover {
    opacity: 1;
}

.slider-arrow {
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    pointer-events: auto;
}

.slider-arrow:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.slider-arrow i {
    color: #fff;
    font-size: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@keyframes floatTitle {

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

    50% {
        transform: translateY(-10px);
    }
}

@keyframes floatSubtitle {

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

    50% {
        transform: translateY(-7px);
    }
}

@keyframes floatDesc {

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

    50% {
        transform: translateY(-5px);
    }
}

@keyframes floatButtons {

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

    50% {
        transform: translateY(-8px);
    }
}

@media (max-width: 992px) {
    .slider-title {
        font-size: 3rem;
    }

    .slider-subtitle {
        font-size: 1.8rem;
    }

    .slider-description {
        font-size: 1.1rem;
    }

    .slider-arrow {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 768px) {
    .slider-title {
        font-size: 2.5rem;
    }

    .slider-subtitle {
        font-size: 1.5rem;
    }

    .slider-description {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .slider-buttons {
        flex-direction: column;
        gap: 0.8rem;
        align-items: center;
    }

    .slider-content.left .slider-buttons,
    .slider-content.right .slider-buttons {
        align-items: center;
    }

    .slider-content.left,
    .slider-content.right {
        align-items: center;
        text-align: center;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .slider-content.left .slider-title::after,
    .slider-content.right .slider-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 576px) {
    .slider-title {
        font-size: 2rem;
    }

    .slider-subtitle {
        font-size: 1.3rem;
    }

    .slider-description {
        display: none;
    }

    .slider-arrow {
        width: 40px;
        height: 40px;
    }

    .slider-dot {
        width: 10px;
        height: 10px;
    }
}

/* Video Slide Support */
.slider-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.slider-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.video-mute-btn {
    position: absolute;
    bottom: 80px;
    right: 50px;
    z-index: 20;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.video-mute-btn:hover {
    background: rgba(0, 0, 0, 0.6);
    transform: scale(1.1);
}

.video-mute-btn i {
    font-size: 1.2rem;
}

/* Adjust overlay for video to make text readable */
.slider-item.has-video .slider-overlay {
    background: rgba(0, 0, 0, 0.3);
    /* Slightly darker overlay for video */
}

@media (max-width: 768px) {
    .video-mute-btn {
        bottom: 60px;
        right: 20px;
        width: 40px;
        height: 40px;
    }

    /* Mobile optimization for bottom-left content (Video Slide) */
    .slider-content.bottom-left {
        align-items: center;
        /* Center horizontally */
        text-align: center;
        padding-left: 0;
        /* Reset left padding */
        padding-bottom: 25vh;
        /* Move up significantly (approx middle-lower) */
        justify-content: flex-end;
        /* Keep at bottom section generally */
    }


    .slider-content.bottom-left .slider-buttons {
        justify-content: center;
        width: 100%;
    }
}

.slider-content.bottom-center {
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    padding-bottom: 120px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--ultra-light-bg);
    color: var(--text-color);
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(137, 208, 245, 0.15) 0%, transparent 100%),
        radial-gradient(circle at 80% 70%, rgba(255, 111, 145, 0.1) 0%, transparent 100%),
        radial-gradient(circle at 50% 50%, rgba(255, 250, 205, 0.05) 0%, transparent 100%);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 20px;
    color: var(--dark-text);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

h1 {
    font-size: 3.5rem;
    margin-bottom: 25px;
    text-shadow: 0 2px 10px rgba(7, 100, 156, 0.2);
}

h2 {
    font-size: 2.8rem;
    margin-bottom: 20px;
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    display: inline-block;
}

h3 {
    font-size: 2rem;
    margin-bottom: 15px;
    position: relative;
}

h4 {
    font-size: 1.6rem;
    margin-bottom: 15px;
}

p {
    margin-bottom: 20px;
    font-size: 1.1rem;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
    position: relative;
}

a:hover {
    color: var(--accent-color);
}

a:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: currentColor;
    transition: width 0.3s ease;
}

a:hover:after {
    width: 100%;
}

strong {
    font-weight: 600;
    color: var(--accent-color);
}

ul {
    list-style-type: none;
    margin-bottom: 25px;
}

img {
    max-width: 100%;
    height: auto;
    border-radius: var(--small-radius);
    transition: transform 0.5s ease, filter 0.5s ease;
}

img:hover {
    transform: scale(1.02);
    filter: brightness(1.05);
}

::selection {
    background-color: var(--primary-color);
    color: var(--moon-white);
}

.required {
    color: var(--accent-color);
}

.container.hero-content strong {
    color: var(--star-yellow);
}

button, 
input[type="submit"], 
input[type="button"] {
    border: none;
    outline: none;
    cursor: pointer;
}
.container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    padding: 0 20px;
}

.section-padding {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.section-light {
    background-color: var(--light-bg);
    position: relative;
}

.section-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(137, 208, 245, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(255, 111, 145, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

section {
    position: relative;
    overflow: hidden;
}

section::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100px;
    top: -50px;
    left: 0;
    background-color: var(--moon-white);
    transform: skewY(-2deg);
    z-index: -1;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.section-icon {
    font-size: 2.2rem;
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    background-color: var(--ultra-light-bg);
    color: var(--moon-white);
    border-radius: 50%;
    margin: 0 auto 20px;
    box-shadow: var(--soft-shadow);
    position: relative;
    z-index: 1;
    transition: all 0.5s ease;
}

.section-icon::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: var(--gradient-primary);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.15;
    animation: pulse 3s infinite;
}

.section-icon::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px dashed var(--primary-color);
    border-radius: 50%;
    opacity: 0.3;
    animation: spin 30s linear infinite;
}

.section-divider {
    width: 100px;
    height: 4px;
    background: var(--gradient-accent);
    margin: 25px auto 30px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.section-divider::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.section-subtitle {
    font-size: 1.3rem;
    color: var(--deep-space);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

.info-box {
    background-color: var(--ultra-light-bg);
    border-radius: var(--card-radius);
    padding: 30px;
    box-shadow: var(--soft-shadow);
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    transition: var(--hover-transition);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.info-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--gradient-primary);
    z-index: -1;
}

.info-box:hover {
    transform: translateY(-10px);
    box-shadow: var(--hover-shadow);
}

.info-icon {
    font-size: 2.2rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

.info-content h4 {
    margin-bottom: 12px;
    color: var(--secondary-color);
    font-size: 1.4rem;
}

.info-content p:last-child {
    margin-bottom: 0;
}

.section-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.cosmic-decoration {
    position: absolute;
    border-radius: 50%;
    background: var(--gradient-cosmic);
    opacity: 0.05;
    filter: blur(20px);
    z-index: -1;
}

.cosmic-decoration-1 {
    width: 300px;
    height: 300px;
    top: -150px;
    left: -150px;
}

.cosmic-decoration-2 {
    width: 200px;
    height: 200px;
    bottom: -100px;
    right: -100px;
}

.cosmic-decoration-3 {
    width: 150px;
    height: 150px;
    top: 40%;
    right: 10%;
}

.cosmic-cloud {
    position: absolute;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCw1MCBDMCwyMiAyMiwwIDUwLDAgQzcwLDAgODUsMTUgOTIsMzUgQzk1LDE1IDExMCwwIDEzMCwwIEMxNTgsMCAxODAsMjIgMTgwLDUwIEMxODAsMzggMTk1LDUwIDIwMCw1MCBDMTU4LDUwIDEzMCw3MCAxMDAsNzAgQzcwLDcwIDQyLDUwIDAsNTAgWiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC4xIi8+PC9zdmc+');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.4;
}

.cloud-1 {
    width: 600px;
    height: 300px;
    top: 10%;
    right: -200px;
    animation: float 20s infinite ease-in-out;
}

.cloud-2 {
    width: 400px;
    height: 200px;
    bottom: 20%;
    left: -150px;
    animation: float 25s infinite ease-in-out reverse;
}

@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 720px;
    }
    
    .section-padding {
        padding: 70px 0;
    }
    
    .section-icon {
        width: 80px;
        height: 80px;
        line-height: 80px;
        font-size: 2rem;
    }
    
    .section-subtitle {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 540px;
    }
    
    .section-padding {
        padding: 60px 0;
    }
    
    .info-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 25px;
    }
    
    .info-box::before {
        width: 100%;
        height: 5px;
        top: 0;
        left: 0;
    }
}

@media (max-width: 576px) {
    .container {
        max-width: 100%;
        padding: 0 20px;
    }
    
    .section-padding {
        padding: 50px 0;
    }
    
    .section-header {
        margin-bottom: 40px;
    }
    
    .section-icon {
        width: 70px;
        height: 70px;
        line-height: 70px;
        font-size: 1.8rem;
    }
}
.cta-button {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    padding: 15px 30px;
    border-radius: var(--button-radius);
    transition: var(--hover-transition);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.95rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: var(--soft-shadow);
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-100%) rotate(45deg);
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: -1;
}

.cta-button:hover::before {
    transform: translateX(100%) rotate(45deg);
}

.cta-button::after {
    display: none;
}

.primary-cta {
    background: var(--gradient-accent);
    color: var(--light-text);
    box-shadow: 0 8px 25px rgba(234, 48, 80, 0.25);
}

.primary-cta:hover {
    background: var(--gradient-accent);
    color: var(--light-text);
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 12px 30px rgba(234, 48, 80, 0.35);
}

.secondary-cta {
    background: var(--gradient-primary);
    color: var(--light-text);
    box-shadow: 0 8px 25px rgba(10, 160, 214, 0.25);
}

.secondary-cta:hover {
    background: var(--gradient-primary);
    color: var(--light-text);
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 12px 30px rgba(10, 160, 214, 0.35);
}

.outline-cta {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    box-shadow: 0 4px 15px rgba(10, 160, 214, 0.15);
}

.outline-cta:hover {
    background-color: var(--primary-color);
    color: var(--light-text);
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 8px 25px rgba(10, 160, 214, 0.25);
}

.cta-button i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.cta-button:hover i {
    transform: translateX(4px);
}

.feature-item {
    background-color: var(--ultra-light-bg);
    border-radius: var(--card-radius);
    padding: 35px 30px;
    box-shadow: var(--soft-shadow);
    transition: var(--hover-transition);
    text-align: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transform: translateY(0);
}

.feature-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--gradient-primary);
    z-index: -1;
}

.feature-item::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 160px;
    height: 160px;
    background: var(--gradient-accent);
    border-radius: 50%;
    opacity: 0.05;
    z-index: -1;
    transition: all 0.5s ease;
}

.feature-item:hover {
    transform: translateY(-12px);
    box-shadow: var(--hover-shadow);
}

.feature-item:hover::after {
    transform: scale(1.2);
    opacity: 0.08;
}

.feature-icon {
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background-color: var(--primary-color);
    color: var(--light-text);
    font-size: 2rem;
    border-radius: 50%;
    margin: 0 auto 25px;
    transition: var(--hover-transition);
    position: relative;
    z-index: 1;
}

.feature-icon::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: var(--gradient-primary);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.15;
    transition: all 0.5s ease;
}

.feature-item:hover .feature-icon {
    background-color: var(--accent-color);
    color: var(--light-text);
    transform: rotateY(180deg);
    box-shadow: 0 0 15px rgba(234, 48, 80, 0.3);
}

.feature-item:hover .feature-icon::before {
    opacity: 0.3;
    transform: scale(1.1);
}

.feature-item h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--secondary-color);
    transition: all 0.3s ease;
}

.feature-item:hover h3 {
    color: var(--accent-color);
}

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: var(--gradient-accent);
    color: var(--light-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 8px 25px rgba(234, 48, 80, 0.3);
    cursor: pointer;
}

.back-to-top::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: var(--gradient-accent);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.3;
    transition: all 0.5s ease;
    animation: pulse 2s infinite;
    transform-origin: center;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 30px rgba(234, 48, 80, 0.4);
}

.back-to-top:hover::before {
    animation-play-state: paused;
}

.back-to-top::after {
    display: none;
}

@keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.2; }
    100% { transform: scale(0.95); opacity: 0.5; }
}

.whatsapp-float {
    position: fixed;
    bottom: 30px;
    left: 30px;
    height: 60px;
    padding: 0 22px 0 18px;
    background: #25d366;
    color: #fff;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    z-index: 99;
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease, background 0.3s ease;
}

.whatsapp-float i {
    font-size: 1.8rem;
    line-height: 1;
}

.whatsapp-float-label {
    white-space: nowrap;
}

.whatsapp-float::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 44px;
    background: #25d366;
    opacity: 0.28;
    z-index: -1;
    animation: pulse 2.4s infinite;
}

.whatsapp-float:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 14px 34px rgba(37, 211, 102, 0.55);
    background: #1ebe5a;
    color: #fff;
}

@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 20px;
        left: 20px;
        height: 54px;
        padding: 0 16px;
    }
    .whatsapp-float-label {
        display: none;
    }
    .whatsapp-float i {
        font-size: 1.7rem;
    }
    .whatsapp-float {
        width: 54px;
        padding: 0;
        justify-content: center;
    }
}
.hero {
    position: relative;
    height: 100vh;
    min-height: 700px;
    background: var(--gradient-galaxy);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-bottom: 0;
    padding-top: 140px;
}

/* When the campaign strip is active, header shifts down by --campaign-strip-height.
   Hero is full-bleed (no padding top from layout) — we need to grow hero padding by
   the same amount so the title doesn't collide with the header. */
body.has-campaign-strip .hero {
    padding-top: calc(140px + var(--campaign-strip-height, 58px));
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(7, 100, 156, 0.6), rgba(0, 0, 0, 0.4));
    z-index: 1;
}

.hero-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255, 250, 205, 0.2) 0%, transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(255, 111, 145, 0.15) 0%, transparent 30%),
        url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAuMDgiPjwvcmVjdD4KPC9zdmc+');
    opacity: 0.9;
}

.hero-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 0 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.curved-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 3;
}

.curved-bottom svg {
    position: relative;
    display: block;
    width: 100%;
    height: 100px;
    transform: rotateY(180deg);
}

.curved-bottom .shape-fill {
    fill: var(--ultra-light-bg);
}

.star-icon {
    font-size: 3.5rem;
    color: var(--star-yellow);
    margin-bottom: 25px;
    display: inline-block;
    animation: floatStar 5s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(255, 250, 205, 0.5), 0 0 40px rgba(255, 250, 205, 0.3);
    position: relative;
}

.star-icon::before,
.star-icon::after {
    content: '★';
    position: absolute;
    font-size: 1.5rem;
    color: var(--star-yellow);
    opacity: 0.7;
    animation: twinkle 3s infinite ease-in-out;
}

.star-icon::before {
    top: -10px;
    left: -20px;
    animation-delay: 0.5s;
}

.star-icon::after {
    top: 10px;
    right: -15px;
    animation-delay: 1s;
}

.hero h1 {
    font-size: 4rem;
    margin-bottom: 20px;
    color: var(--light-text);
    line-height: 1.2;
    animation: fadeInUp 1s forwards;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    position: relative;
    display: inline-block;
}

.hero h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 3px;
    background: var(--gradient-accent);
    border-radius: 3px;
}

.hero-subtitle {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--light-text) !important;
    font-weight: 500;
    animation: fadeInUp 1s forwards 0.3s;
    opacity: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    display: inline-block;
}

.hero-subtitle::before,
.hero-subtitle::after {
    content: '•';
    display: inline-block;
    margin: 0 15px;
    color: var(--accent-secondary);
    animation: pulse 3s infinite;
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 30px;
    opacity: 0;
    animation: fadeInUp 1s forwards 0.6s;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons {
    margin-bottom: 50px;
    opacity: 0;
    animation: fadeInUp 1s forwards 0.9s;
    display: flex;
    gap: 20px;
    justify-content: center;
}

.hero-buttons .cta-button {
    margin: 0;
    min-width: 180px;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 50px;
    opacity: 0;
    animation: fadeInUp 1s forwards 1.2s;
    position: relative;
    z-index: 2;
}

.hero-planet {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(135deg, #392B58, #663B5E);
    box-shadow: 0 0 30px rgba(153, 102, 204, 0.5), inset 0 0 50px rgba(255, 250, 205, 0.3);
    opacity: 0.7;
    z-index: 2;
    animation: float 15s infinite ease-in-out;
}

.hero-planet-1 {
    top: 15%;
    right: 10%;
}

.hero-planet-2 {
    bottom: 25%;
    left: 5%;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #392B58, #255973);
    animation-delay: 4s;
}

.hero-planet::before {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: transparent;
    border: 5px solid rgba(255, 255, 255, 0.1);
    animation: spin 30s linear infinite;
}

.shooting-star {
    position: absolute;
    height: 2px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(240, 240, 255, 0.2) 100%);
    border-radius: 50%;
    z-index: 2;
}

.shooting-star-1 {
    width: 150px;
    top: 20%;
    left: 10%;
    transform: rotate(-30deg);
    animation: shootingStar 4s 2s ease-in infinite;
}

.shooting-star-2 {
    width: 200px;
    top: 40%;
    right: 15%;
    transform: rotate(20deg);
    animation: shootingStar 5s 4s ease-in infinite;
}

.shooting-star-3 {
    width: 100px;
    bottom: 30%;
    right: 30%;
    transform: rotate(45deg);
    animation: shootingStar 3s 1s ease-in infinite;
}

@keyframes shootingStar {
    0% {
        opacity: 0;
        transform-origin: left;
        transform: translateX(0) rotate(var(--angle, -30deg)) scale(0.5);
    }
    5% {
        opacity: 1;
    }
    20% {
        transform: translateX(calc(100vw - 200px)) rotate(var(--angle, -30deg)) scale(1);
        opacity: 0;
    }
    100% {
        opacity: 0;
        transform: translateX(calc(100vw - 200px)) rotate(var(--angle, -30deg)) scale(1);
    }
}

.wave-shape {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 3;
}

.wave-shape svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 80px;
}

.wave-shape .shape-fill {
    fill: var(--ultra-light-bg);
}

@media (max-width: 1200px) {
    .hero h1 {
        font-size: 3.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.6rem;
    }
    
    .hero p {
        font-size: 1.2rem;
    }
    
    .hero-planet-1 {
        width: 180px;
        height: 180px;
    }
}

@media (max-width: 992px) {
    .hero {
        min-height: 600px;
    }
    
    .hero h1 {
        font-size: 3rem;
    }
    
    .hero-subtitle {
        font-size: 1.4rem;
    }
    
    .hero p {
        font-size: 1.1rem;
    }
    
    .hero-stats {
        gap: 20px;
    }
    
    .hero-planet-1 {
        width: 150px;
        height: 150px;
    }
    
    .hero-planet-2 {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.3rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .curved-bottom svg,
    .wave-shape svg {
        height: 60px;
    }
    
    .hero-planet-1 {
        top: 10%;
        right: 5%;
        width: 120px;
        height: 120px;
    }
    
    .hero-planet-2 {
        bottom: 30%;
        left: 5%;
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 576px) {
    .hero h1 {
        font-size: 2.2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero p {
        font-size: 1rem;
        margin-bottom: 25px;
    }
    
    .star-icon {
        font-size: 3rem;
        margin-bottom: 20px;
    }
    
    .hero-subtitle::before,
    .hero-subtitle::after {
        margin: 0 8px;
    }
    
    .curved-bottom svg,
    .wave-shape svg {
        height: 40px;
    }
    
    .hero-planet-1, 
    .hero-planet-2 {
        opacity: 0.4;
    }
}
/**
 * İstatistikler Bölümü Stilleri
 */

 .stats-section {
    background-color: #ffffff;
    padding: 60px 0;
    margin-top: -20px;
}

.stats-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px;
}

.stat-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    text-align: center;
    flex: 1;
    min-width: 250px;
    transform: translateY(30px);
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.8s ease;
    border-top: 4px solid #0AA0D6;
}

.stat-card.show {
    transform: translateY(0);
    opacity: 1;
}

.stat-icon {
    font-size: 2.5rem;
    color: #0AA0D6;
    margin-bottom: 20px;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: #07649C;
    display: inline-block;
    line-height: 1;
}

.stat-plus {
    font-size: 2rem;
    font-weight: 700;
    color: #07649C;
    display: inline-block;
}

.stat-title {
    font-size: 1.2rem;
    color: #333;
    margin-top: 10px;
    margin-bottom: 0;
}

/* Counter animasyonu */
.counter {
    display: inline-block;
    transition: all 1s ease;
}

/* Testimonial Stats */
.testimonial-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.stat-box {
    background-color: var(--ultra-light-bg);
    border-radius: var(--border-radius);
    padding: 30px;
    text-align: center;
    box-shadow: var(--soft-shadow);
    transition: var(--transition);
}

.stat-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--hover-shadow);
}

.stat-box .stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 15px;
}

.stat-box .stat-number span {
    font-size: 2rem;
}

.stat-label {
    color: var(--dark-purple);
    font-weight: 500;
}
.intro-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
    align-items: center;
    position: relative;
    margin-bottom: 60px;
}

.intro-text {
    position: relative;
    z-index: 2;
}

.intro-text p {
    position: relative;
    z-index: 1;
}

.intro-text p:first-of-type::first-letter {
    font-size: 3em;
    float: left;
    margin-right: 10px;
    line-height: 0.8;
    color: var(--primary-color);
    text-shadow: 2px 2px 0 var(--secondary-color), 4px 4px 0 rgba(0,0,0,0.1);
}

.intro-image-container {
    position: relative;
    z-index: 2;
}

.intro-image {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 400px;
    margin: 0 auto;
}

.image-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--gradient-galaxy);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.image-circle::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(137, 208, 245, 0.2), rgba(255, 111, 145, 0.2));
    z-index: -1;
    animation: pulse 4s infinite;
}

.image-circle::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    animation: spin 30s linear infinite;
}

.image-circle i {
    font-size: 8rem;
    color: var(--moon-white);
    animation: float 5s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: 30px;
    margin-top: 30px;
    position: relative;
    z-index: 2;
}

.features-grid::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255, 250, 205, 0.1) 0%, transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(255, 111, 145, 0.08) 0%, transparent 30%);
    z-index: -1;
}

.why-us-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
    align-items: center;
    position: relative;
}

.why-us-image {
    position: relative;
    order: 2;
}

.why-us-content {
    position: relative;
    order: 1;
}

.image-frame {
    position: relative;
    width: 100%;
    min-height: 350px;
    max-height: 750px;
    border-radius: var(--border-radius);
    background-color: var(--light-bg);
    box-shadow: var(--box-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform: perspective(1000px) rotateY(-5deg);
    transition: all 0.5s ease;
}

.image-frame:hover {
    transform: perspective(1000px) rotateY(0deg);
    box-shadow: var(--hover-shadow);
}

.image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

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

.image-content {
    font-size: 10rem;
    color: var(--primary-color);
    opacity: 0.2;
    animation: float 5s infinite ease-in-out;
}

.frame-decoration {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
}

.frame-decoration-1 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
    background: var(--gradient-primary);
    opacity: 0.1;
    animation: float 7s infinite ease-in-out;
}

.frame-decoration-2 {
    width: 150px;
    height: 150px;
    top: -30px;
    right: -40px;
    background: var(--gradient-accent);
    opacity: 0.1;
    animation: float 5s infinite ease-in-out reverse;
}

.why-us-item {
    display: flex;
    margin-bottom: 40px;
    position: relative;
    transition: all 0.3s ease;
    padding: 15px;
    border-radius: var(--small-radius);
}

.why-us-item:hover {
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: var(--soft-shadow);
    transform: translateX(10px);
}

.why-us-number {
    font-size: 3rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-right: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.why-us-text h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--secondary-color);
}

.why-us-text p {
    margin-bottom: 0;
}

.services-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}

.services-container {
    margin-bottom: 50px;
    position: relative;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 30px;
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
}

.service-card {
    height: 100%;
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: var(--soft-shadow);
    transition: var(--hover-transition);
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.service-card:hover {
    transform: translateY(-15px) rotate(2deg);
    box-shadow: var(--hover-shadow);
}

.service-card-inner {
    background-color: var(--ultra-light-bg);
    padding: 35px 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    transition: all 0.5s ease;
    border-radius: var(--card-radius);
    overflow: hidden;
}

.service-card-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 0;
    background: var(--gradient-primary);
    transition: height 0.5s ease;
}

.service-card:hover .service-card-inner::before {
    height: 100%;
}

.service-card-inner::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: var(--gradient-accent);
    border-radius: 50%;
    opacity: 0.05;
    z-index: -1;
    transform: translate(50%, 50%);
    transition: all 0.5s ease;
}

.service-card:hover .service-card-inner::after {
    transform: translate(30%, 30%) scale(1.2);
    opacity: 0.08;
}

.service-icon {
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background-color: var(--light-bg);
    color: var(--primary-color);
    font-size: 2rem;
    border-radius: 50%;
    margin-bottom: 25px;
    transition: var(--hover-transition);
    position: relative;
}

.service-icon::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: var(--gradient-primary);
    opacity: 0.1;
    z-index: -1;
    transition: all 0.5s ease;
}

.service-card:hover .service-icon {
    background-color: var(--accent-color);
    color: var(--light-text);
    transform: rotateY(180deg);
    box-shadow: 0 0 20px rgba(234, 48, 80, 0.4);
}

.service-card:hover .service-icon::before {
    opacity: 0.2;
    transform: scale(1.1);
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--secondary-color);
    transition: all 0.3s ease;
}

.service-card:hover h3 {
    color: var(--accent-color);
}

.service-card p {
    margin-bottom: 20px;
    flex-grow: 1;
}

.service-link {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    font-weight: 600;
    transition: var(--transition);
    align-self: flex-start;
    position: relative;
}

.service-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.service-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.service-link i {
    margin-left: 5px;
    transition: var(--transition);
}

.service-link:hover {
    color: var(--accent-color);
}

.service-link:hover i {
    transform: translateX(5px);
}

.service-list-container {
    background-color: var(--ultra-light-bg);
    border-radius: var(--card-radius);
    padding: 40px;
    box-shadow: var(--soft-shadow);
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-top: 50px;
}

.service-list-container::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: var(--gradient-primary);
    border-radius: 0 0 0 100%;
    opacity: 0.05;
    z-index: -1;
}

.service-list-container h3 {
    margin-bottom: 25px;
    color: var(--secondary-color);
    position: relative;
    display: inline-block;
    font-size: 1.6rem;
}

.service-list-container h3::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--gradient-accent);
    border-radius: 3px;
}

.service-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 15px 30px;
    position: relative;
}

.service-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.service-list li::before {
    content: "★";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-size: 1.1rem;
}

.service-list li.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.performances-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}

.performance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-gap: 40px;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.performance-card {
    background-color: var(--ultra-light-bg);
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: var(--soft-shadow);
    transition: var(--hover-transition);
    height: 100%;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.performance-card:hover {
    transform: translateY(-15px) rotate(2deg);
    box-shadow: var(--hover-shadow);
}

.performance-image {
    height: 250px;
    background: var(--gradient-galaxy);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.performance-icon {
    font-size: 6rem;
    color: rgba(255, 255, 255, 0.3);
    animation: float 5s infinite ease-in-out;
}

.performance-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.performance-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s ease;
}

.performance-card:hover .performance-photo img {
    transform: scale(1.1) rotate(2deg);
}

.performance-details {
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.performance-details::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: var(--gradient-accent);
    border-radius: 50%;
    opacity: 0.05;
    z-index: -1;
    transform: translate(50%, 50%);
    transition: all 0.5s ease;
}

.performance-card:hover .performance-details::before {
    transform: translate(30%, 30%) scale(1.2);
    opacity: 0.08;
}

.performance-title {
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: var(--secondary-color);
    transition: all 0.3s ease;
}

.performance-card:hover .performance-title {
    color: var(--accent-color);
}

.performance-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    color: var(--meteroid-grey);
}

.performance-meta span {
    display: flex;
    align-items: center;
}

.performance-meta i {
    margin-right: 8px;
    font-size: 1.1rem;
    color: var(--primary-color);
}

.performance-description {
    margin-bottom: 25px;
    flex-grow: 1;
}

.performance-card .cta-button {
    align-self: flex-start;
}

.regions-content {
    text-align: center;
    position: relative;
}

.regions-content > p {
    max-width: 800px;
    margin: 0 auto 50px;
}

.regions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: 30px;
    position: relative;
    z-index: 2;
}

.region-card {
    background-color: var(--ultra-light-bg);
    border-radius: var(--card-radius);
    padding: 35px 30px;
    text-align: center;
    box-shadow: var(--soft-shadow);
    transition: var(--hover-transition);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.region-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--gradient-primary);
    z-index: -1;
    transition: height 0.5s ease;
}

.region-card:hover::before {
    height: 100%;
    opacity: 0.05;
}

.region-card:hover {
    transform: translateY(-15px);
    box-shadow: var(--hover-shadow);
}

.region-icon {
    font-size: 3rem;
    color: var(--light-text);
    margin-bottom: 20px;
    transition: all 0.5s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background-color: var(--primary-color);
    border-radius: 50%;
}

.region-icon::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border-radius: 50%;
    opacity: 0.1;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease;
}

.region-card:hover .region-icon {
    transform: scale(1.2);
    background-color: var(--accent-color);
    color: var(--light-text);
}

.region-card:hover .region-icon::after {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.2;
}

.region-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--secondary-color);
    transition: all 0.3s ease;
}

.region-card:hover h3 {
    color: var(--primary-color);
}

.region-card p {
    margin-bottom: 0;
}

.testimonial-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 60px;
    position: relative;
}

.testimonial-slider {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 30px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.testimonial-card {
    background-color: var(--ultra-light-bg);
    border-radius: var(--card-radius);
    padding: 75px 30px 30px;
    box-shadow: var(--soft-shadow);
    position: relative;
    transition: var(--hover-transition);
    transform-style: preserve-3d;
    perspective: 1000px;
}

.testimonial-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    padding: 3px;
    background: var(--gradient-primary);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.3;
    transition: all 0.5s ease;
}

.testimonial-card:hover {
    transform: translateY(-15px) rotate(2deg);
    box-shadow: var(--hover-shadow);
}

.testimonial-card:hover::before {
    opacity: 0.8;
}

.testimonial-quote {
    position: absolute;
    top: 20px;
    left: 30px;
    color: var(--primary-color);
    font-size: 2rem;
    line-height: 1;
    opacity: 0.3;
}

.testimonial-content {
    margin-bottom: 25px;
    font-style: italic;
    position: relative;
    z-index: 1;
    color: var(--text-color);
}

.testimonial-author {
    display: flex;
    align-items: center;
}

.author-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-text);
    font-weight: 600;
    font-size: 1.4rem;
    margin-right: 15px;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(137, 208, 245, 0.3);
    transition: all 0.5s ease;
}

.testimonial-card:hover .author-avatar {
    transform: rotate(10deg);
    box-shadow: 0 8px 20px rgba(137, 208, 245, 0.4);
}

.author-info h4 {
    margin-bottom: 5px;
    font-size: 1.2rem;
    color: var(--secondary-color);
}

.author-info p {
    margin-bottom: 0;
    color: var(--meteroid-grey);
    font-size: 1rem;
}

.why-us-fullwidth-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
}

.why-us-image-full {
    margin-bottom: 50px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.why-us-image-full .image-frame {
    width: 100% !important;
    height: 750px !important;
    max-width: 100% !important;
    border-radius: var(--border-radius);
    transform: perspective(1000px) rotateY(-5deg);
    box-shadow: var(--box-shadow);
    transition: all 0.5s ease;
    overflow: hidden;
    background-color: var(--light-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-us-image-full .image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: all 0.5s ease;
}

.why-us-image-full .image-frame:hover {
    transform: perspective(1000px) rotateY(0deg);
    box-shadow: var(--hover-shadow);
}

.why-us-image-full .image-frame:hover img {
    transform: scale(1.05);
}

.parallax-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.parallax-element {
    will-change: transform;
    transition: transform 0.1s linear;
}

.why-us-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.why-us-feature-item {
    display: flex;
    flex-direction: column;
    padding: 25px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: var(--card-radius);
    transition: all 0.3s ease;
    box-shadow: var(--soft-shadow);
}

.why-us-feature-item:hover {
    transform: translateY(-10px);
    box-shadow: var(--hover-shadow);
    background-color: rgba(255, 255, 255, 0.9);
}

.why-us-feature-item .why-us-number {
    font-size: 3rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-bottom: 15px;
    text-align: center;
}

.why-us-feature-item .why-us-text {
    text-align: center;
}

.why-us-feature-item h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--secondary-color);
}

@media (max-width: 1200px) {
    .why-us-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .intro-content,
    .why-us-container {
        grid-template-columns: 1fr;
        grid-gap: 40px;
    }
    
    .why-us-image,
    .intro-image-container {
        justify-self: center;
    }
    
    .why-us-image {
        order: 1;
    }
    
    .why-us-content {
        order: 2;
    }
    
    .image-frame {
        transform: perspective(1000px) rotateY(0);
        height: 400px;
    }
}

@media (max-width: 768px) {
    .intro-content, 
    .why-us-container {
        grid-gap: 30px;
    }
    
    .service-grid,
    .performance-grid,
    .regions-grid,
    .testimonial-slider {
        grid-template-columns: 1fr;
    }
    
    .image-circle {
        width: 300px;
        height: 300px;
    }
    
    .image-frame {
        height: 350px;
    }
    
    .why-us-features-grid {
        grid-template-columns: 1fr;
    }
    
    .why-us-image-full .image-frame {
        height: 350px !important;
    }
    
    .why-us-number {
        font-size: 2.5rem;
    }
    
    .why-us-item:hover {
        transform: translateX(5px);
    }
}

@media (max-width: 576px) {
    .image-circle {
        width: 250px;
        height: 250px;
    }
    
    .image-circle i {
        font-size: 6rem;
    }
    
    .image-frame {
        height: 300px;
    }
    
    .service-card-inner,
    .region-card {
        padding: 25px;
    }
    
    .performance-details,
    .testimonial-card {
        padding: 25px 20px;
    }
    
    .service-list-container {
        padding: 30px 20px;
    }
    
    .service-list {
        grid-template-columns: 1fr;
    }
}

.about-us-container {
    width: 100%;
    margin: 0 auto;
}

.about-us-header-image {
    margin-bottom: 40px;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.about-us-header-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.about-us-header-image:hover img {
    transform: scale(1.03);
}

.about-us-item {
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 1px dashed rgba(137, 208, 245, 0.3);
}

.about-us-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.about-us-item-column {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.about-us-item-header {
    margin-bottom: 30px;
    text-align: center;
}

.about-us-item-content-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
}

.about-us-item-image {
    flex: 0 0 45%;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    align-self: center;
}

.about-us-item-image.center-vertical {
    display: flex;
    align-items: center;
}

.about-us-item-text {
    flex: 1;
}

.about-us-item-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.about-us-item-image:hover {
    transform: translateY(-10px);
    box-shadow: var(--hover-shadow);
}

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

.about-us-item-content {
    line-height: 1.8;
}

.about-us-item h3 {
    color: var(--secondary-color);
    font-size: 1.8rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
    display: inline-block;
}

.about-us-item h3::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 60%;
    height: 3px;
    background: var(--gradient-accent);
    border-radius: 3px;
    margin: 0 auto;
}

@media (max-width: 992px) {
    .about-us-item-content-row {
        flex-direction: column;
        gap: 30px;
    }
    
    .about-us-item-image,
    .about-us-item-image.center-vertical {
        flex: 0 0 100%;
        margin-bottom: 20px;
    }
    
    .about-us-item-text {
        width: 100%;
    }
    
    .about-us-item h3 {
        font-size: 1.6rem;
    }
}

@media (max-width: 576px) {
    .about-us-item {
        margin-bottom: 40px;
        padding-bottom: 30px;
    }
    
    .about-us-item-content-row {
        gap: 20px;
    }
    
    .about-us-item h3 {
        font-size: 1.4rem;
    }
}
.performance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
    margin-top: 48px;
}

.performance-card {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    opacity: 0;
    transform: translateY(30px);
    box-shadow: var(--soft-shadow);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
}

.performance-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 250, 205, 0.1), rgba(255, 182, 193, 0.1));
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}

.performance-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.performance-card:hover {
    transform: translateY(-15px);
    box-shadow: var(--hover-shadow);
}

.performance-card:hover::before {
    opacity: 1;
}

.performance-image {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--sky-blue), var(--deep-blue));
    display: flex;
    align-items: center;
    justify-content: center;
}

.performance-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 10%),
        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 8%),
        radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.3) 0%, transparent 10%),
        radial-gradient(circle at 70% 90%, rgba(255, 255, 255, 0.2) 0%, transparent 8%);
    pointer-events: none;
}

.performance-icon {
    font-size: 90px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    animation: pulse 4s infinite;
}

.performance-photo {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.performance-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.8s ease, opacity 0.3s ease;
}

.performance-card:hover .performance-photo img {
    transform: scale(1.05);
}

.performance-img {
    transition: opacity 0.3s ease;
}

.performance-img.showing-gif {
    object-position: top !important;
}

.performance-details {
    padding: 22px 22px 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.performance-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--deep-blue);
    position: relative;
    display: inline-block;
    line-height: 1.3;
}

.performance-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sun-orange), var(--star-pink));
    transition: width 0.5s ease;
}

.performance-card:hover .performance-title::after {
    width: 100%;
}

.performance-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--dark-purple);
    font-size: 0.82rem;
}

.performance-meta span {
    display: flex;
    align-items: center;
    padding: 4px 11px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(3px);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.performance-card:hover .performance-meta span {
    background-color: rgba(255, 182, 193, 0.2);
    transform: translateY(-3px);
}

.performance-meta i {
    margin-right: 6px;
    color: var(--sun-orange);
    font-size: 0.9rem;
}

.performance-description {
    margin-bottom: 18px;
    flex-grow: 1;
    line-height: 1.55;
    color: var(--text-color);
    font-size: 0.92rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.performance-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    flex-wrap: wrap;
}

.performance-details-link {
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease, gap 0.2s ease;
}

.performance-details-link:hover {
    color: var(--accent-color);
    gap: 10px;
}

.performance-reserve-btn {
    padding: 8px 18px !important;
    font-size: 0.85rem !important;
}

.performance-card .cta-button {
    align-self: flex-start;
}

.performances-extra {
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px;
}

.info-box {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: var(--border-radius);
    padding: 35px;
    box-shadow: var(--soft-shadow);
    display: flex;
    align-items: flex-start;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.info-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(137, 207, 240, 0.1), rgba(255, 182, 193, 0.1));
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}

.info-box:hover {
    transform: translateY(-10px);
    box-shadow: var(--hover-shadow);
}

.info-box:hover::before {
    opacity: 1;
}

.info-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--sky-blue), var(--deep-blue));
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-right: 20px;
    flex-shrink: 0;
    box-shadow: var(--glow-effect);
    transition: all 0.4s ease;
}

.info-box:hover .info-icon {
    background: linear-gradient(135deg, var(--star-pink), var(--sun-orange));
    transform: rotateY(180deg);
}

.info-content {
    flex-grow: 1;
}

.info-content h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--deep-blue);
    font-size: 1.4rem;
    position: relative;
    display: inline-block;
}

.info-content h4::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--sun-orange), var(--star-pink));
    transition: width 0.5s ease;
}

.info-box:hover .info-content h4::after {
    width: 100%;
}

.info-content p {
    margin-bottom: 0;
    line-height: 1.7;
}

.performance-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px 15px;
    background: linear-gradient(135deg, var(--star-pink), var(--sun-orange));
    color: #FFFFFF;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(234, 48, 80, 0.3);
    z-index: 2;
    transform: rotate(5deg);
}

.performance-badge::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(135deg, var(--star-pink), var(--sun-orange));
    border-radius: 25px;
    opacity: 0.3;
    z-index: -1;
    animation: pulse 2s infinite;
}

@media (max-width: 992px) {
    .performance-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 22px;
    }

    .performance-image {
        height: 180px;
    }

    .performance-icon {
        font-size: 64px;
    }

    .performance-details {
        padding: 20px 20px 18px;
    }

    .performance-title {
        font-size: 1.25rem;
    }
}

@media (max-width: 768px) {
    .performance-grid {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 18px;
    }

    .performances-extra {
        grid-template-columns: 1fr;
    }

    .info-box {
        padding: 25px;
    }

    .info-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .performance-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .performance-image {
        height: 190px;
    }

    .performance-icon {
        font-size: 60px;
    }

    .performance-details {
        padding: 18px 18px 16px;
    }

    .performance-title {
        font-size: 1.2rem;
    }

    .info-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .info-icon {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .info-content h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
}
.form-container {
    background-color: var(--ultra-light-bg);
    border-radius: var(--card-radius);
    padding: 40px;
    box-shadow: var(--soft-shadow);
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: all 0.5s ease;
}

.form-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(137, 208, 245, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255, 111, 145, 0.08) 0%, transparent 40%);
    z-index: -1;
    pointer-events: none;
}

.form-container::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: var(--gradient-accent);
    border-radius: 50%;
    opacity: 0.05;
    filter: blur(30px);
    z-index: -1;
    transition: all 0.5s ease;
}

.form-container:hover::after {
    transform: scale(1.2);
    opacity: 0.08;
}

.form-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.form-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--light-text);
    margin-right: 20px;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(10, 160, 214, 0.25);
    position: relative;
    z-index: 1;
}

.form-icon::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: var(--gradient-primary);
    opacity: 0.15;
    z-index: -1;
    animation: pulse 3s infinite;
}

.form-header h3 {
    margin-bottom: 0;
    color: var(--secondary-color);
    font-size: 1.8rem;
}

.form-group {
    margin-bottom: 25px;
    position: relative;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--secondary-color);
    transition: all 0.3s ease;
    position: absolute;
    top: 15px;
    left: 15px;
    pointer-events: none;
    background-color: transparent;
    padding: 0 5px;
    font-size: 1rem;
    z-index: 1;
}

.form-label.active {
    top: -10px;
    left: 12px;
    font-size: 0.85rem;
    color: var(--primary-color);
    background-color: var(--ultra-light-bg);
}

.form-control {
    width: 100%;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: var(--input-radius);
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: var(--ultra-light-bg);
    position: relative;
    z-index: 0;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(10, 160, 214, 0.15);
    outline: none;
}

.form-control.error {
    border-color: var(--accent-color);
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

.error-message {
    color: var(--accent-color);
    font-size: 0.85rem;
    margin-top: 5px;
    display: none;
    animation: fadeIn 0.3s;
}

textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

.focus-effect {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: all 0.3s ease;
    transform: translateX(-50%);
    z-index: 0;
    opacity: 0;
}

.focus-effect.active {
    width: calc(100% - 10px);
    opacity: 1;
}

.submit-btn {
    position: relative;
    overflow: hidden;
    background: var(--gradient-accent);
    color: var(--light-text);
    border: none;
    padding: 16px 30px;
    font-size: 1rem;
    border-radius: var(--button-radius);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(234, 48, 80, 0.25);
    min-width: 200px;
}

.submit-btn:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 30px rgba(234, 48, 80, 0.35);
}

.submit-btn.sending {
    background: var(--gradient-primary);
    box-shadow: 0 8px 25px rgba(10, 160, 214, 0.25);
    animation: sending 1.5s infinite ease-in-out;
}

@keyframes sending {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.05); }
    100% { transform: translateY(0) scale(1); }
}

.submit-btn i {
    margin-left: 8px;
    font-size: 1.1rem;
}

.submit-btn:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%, -50%);
    transform-origin: 50% 50%;
}

.submit-btn:focus:not(:active)::after {
    animation: ripple 1s ease-out;
}

.alert {
    padding: 15px;
    border-radius: var(--small-radius);
    display: flex;
    align-items: center;
    animation: slideIn 0.4s;
    margin-top: 25px;
}

.alert-icon {
    margin-right: 15px;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    flex-shrink: 0;
}

.alert-success {
    background: linear-gradient(135deg, rgba(162, 215, 41, 0.1) 0%, rgba(10, 160, 214, 0.1) 100%);
    color: var(--green);
    border: 1px solid rgba(162, 215, 41, 0.3);
    box-shadow: 0 4px 15px rgba(162, 215, 41, 0.15);
}

.alert-success .alert-icon {
    color: var(--green);
}

.alert-danger {
    background: linear-gradient(135deg, rgba(234, 48, 80, 0.1) 0%, rgba(250, 138, 60, 0.1) 100%);
    color: var(--accent-color);
    border: 1px solid rgba(234, 48, 80, 0.3);
    box-shadow: 0 4px 15px rgba(234, 48, 80, 0.15);
}

.alert-danger .alert-icon {
    color: var(--accent-color);
}

.honeypot-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.human-verification {
    margin: 30px 0;
    background: linear-gradient(135deg, rgba(10, 160, 214, 0.05) 0%, rgba(7, 100, 156, 0.05) 100%);
    padding: 20px;
    border-radius: var(--card-radius);
    border: 1px solid rgba(10, 160, 214, 0.1);
    position: relative;
    overflow: hidden;
}

.human-verification::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 100px;
    height: 100px;
    background: var(--gradient-primary);
    border-radius: 50%;
    opacity: 0.05;
    z-index: 0;
}

.checkbox-container {
    display: inline-block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 0;
    cursor: pointer;
    font-weight: 500;
    user-select: none;
    z-index: 1;
}

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

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    background-color: var(--ultra-light-bg);
    border: 2px solid rgba(10, 160, 214, 0.3);
    border-radius: var(--small-radius);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.checkbox-container:hover input ~ .checkmark {
    background-color: rgba(10, 160, 214, 0.05);
    border-color: var(--primary-color);
}

.checkbox-container input:checked ~ .checkmark {
    background: var(--gradient-primary);
    border-color: transparent;
    box-shadow: 0 0 15px rgba(10, 160, 214, 0.3);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

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

.checkbox-container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-sparkle {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.checkbox-sparkle::before {
    content: '';
    position: absolute;
    inset: -8px;
    background: radial-gradient(circle, rgba(10, 160, 214, 0.6) 0%, rgba(10, 160, 214, 0) 70%);
    border-radius: 50%;
    animation: pulse 1s forwards;
}

.shake-animation {
    animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
}

.email-confirmation {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(10, 160, 214, 0.05) 0%, rgba(7, 100, 156, 0.05) 100%);
    border: 1px solid rgba(10, 160, 214, 0.2);
    border-radius: var(--small-radius);
    padding: 12px 15px;
    margin-top: 25px;
    font-size: 0.9rem;
    color: var(--secondary-color);
}

.email-confirmation i {
    margin-right: 10px;
    font-size: 1.1rem;
    color: var(--primary-color);
}

.contact-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
    position: relative;
    z-index: 2;
}

.contact-intro::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: var(--gradient-accent);
    border-radius: 3px;
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    position: relative;
    z-index: 2;
}

.contact-info {
    position: relative;
    z-index: 1;
}

.contact-info-header {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
}

.contact-info-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--light-text);
    margin-right: 20px;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(234, 48, 80, 0.25);
    position: relative;
    z-index: 1;
}

.contact-info-icon::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: var(--gradient-accent);
    opacity: 0.15;
    z-index: -1;
    animation: pulse 3s infinite;
}

.contact-info-header h3 {
    margin-bottom: 0;
    color: var(--secondary-color);
    font-size: 1.8rem;
}

.contact-item {
    display: flex;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: var(--card-radius);
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: var(--soft-shadow);
    transition: var(--hover-transition);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(10, 160, 214, 0.1);
}

.contact-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 0;
    background: var(--gradient-primary);
    transition: height 0.5s ease;
    z-index: 0;
}

.contact-item:hover {
    transform: translateY(-10px) rotate(1deg);
    box-shadow: var(--hover-shadow);
}

.contact-item:hover::before {
    height: 100%;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--light-text);
    margin-right: 15px;
    flex-shrink: 0;
    transition: var(--hover-transition);
    position: relative;
    z-index: 1;
}

.contact-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--gradient-primary);
    opacity: 0;
    z-index: -1;
    transition: all 0.5s ease;
}

.contact-item:hover .contact-icon {
    color: var(--light-text);
    transform: rotateY(180deg);
}

.contact-item:hover .contact-icon::before {
    opacity: 1;
}

.contact-details h4 {
    margin-bottom: 5px;
    font-size: 1.2rem;
    color: var(--secondary-color);
}

.contact-details p {
    margin-bottom: 0;
    color: var(--text-color);
}

.contact-social {
    display: flex;
    gap: 15px;
    margin: 40px 0;
}

.social-link {
    width: 45px;
    height: 45px;
    background-color: var(--ultra-light-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary-color);
    transition: var(--hover-transition);
    box-shadow: var(--soft-shadow);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.social-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-primary);
    opacity: 0;
    z-index: -1;
    transition: all 0.5s ease;
}

.social-link::after {
    display: none;
}

.social-link:hover {
    color: var(--light-text);
    transform: translateY(-8px) rotate(10deg);
    box-shadow: var(--hover-shadow);
}

.social-link:hover::before {
    opacity: 1;
}

.contact-image {
    height: 250px;
    background: var(--gradient-galaxy);
    border-radius: var(--card-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.contact-decoration {
    font-size: 8rem;
    color: rgba(255, 255, 255, 0.2);
    animation: float 8s infinite ease-in-out;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

.success-animation {
    animation: successPulse 1s forwards;
}

@keyframes successPulse {
    0% { transform: scale(1); box-shadow: var(--soft-shadow); }
    50% { transform: scale(1.02); box-shadow: 0 0 30px rgba(162, 215, 41, 0.3); }
    100% { transform: scale(1); box-shadow: var(--soft-shadow); }
}

@media (max-width: 992px) {
    .form-header {
        flex-direction: column;
        text-align: center;
    }
    
    .form-icon {
        margin-right: 0;
        margin-bottom: 15px;
    }
    
    .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .form-container {
        padding: 30px 20px;
    }
    
    .contact-info-header {
        flex-direction: column;
        text-align: center;
    }
    
    .contact-info-icon {
        margin-right: 0;
        margin-bottom: 15px;
    }
    
    .contact-social {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .form-label {
        font-size: 0.9rem;
    }
    
    .form-label.active {
        font-size: 0.8rem;
    }
    
    .contact-item {
        flex-direction: column;
        text-align: center;
    }
    
    .contact-icon {
        margin-right: 0;
        margin-bottom: 15px;
    }
    
    .submit-btn {
        width: 100%;
    }
}
/* ============================================
   WebMCP: agent-driven form state.
   Scoped to the request form so nothing else
   on the site inherits these rules.
   ============================================ */
#request-form:tool-form-active {
    outline: 2px solid rgba(7, 100, 156, 0.45);
    outline-offset: 6px;
    border-radius: 14px;
}
#request-form .submit-btn:tool-submit-active {
    opacity: 0.85;
    cursor: progress;
}

.faq-container {
    max-width: 850px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.faq-container::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: var(--gradient-accent);
    border-radius: 50%;
    opacity: 0.05;
    z-index: -1;
    filter: blur(30px);
}

.faq-container::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: var(--gradient-primary);
    border-radius: 50%;
    opacity: 0.05;
    z-index: -1;
    filter: blur(30px);
}

.faq-item {
    background-color: var(--ultra-light-bg);
    border-radius: var(--card-radius);
    margin-bottom: 20px;
    box-shadow: var(--soft-shadow);
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

.faq-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: var(--gradient-primary);
    opacity: 0.3;
    transition: all 0.3s ease;
}

.faq-item.active {
    box-shadow: var(--hover-shadow);
}

.faq-item.active::before {
    opacity: 1;
}

.faq-question {
    padding: 20px 60px 20px 30px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

.faq-icon {
    margin-right: 15px;
    width: 35px;
    height: 35px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-text);
    transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    flex-shrink: 0;
    position: relative;
}

.faq-icon::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--gradient-primary);
    opacity: 0.1;
    z-index: -1;
    transition: all 0.3s ease;
}

.faq-item.active .faq-icon {
    background: var(--gradient-primary);
    color: var(--light-text);
    transform: rotate(135deg);
    box-shadow: 0 0 15px rgba(137, 208, 245, 0.3);
}

.faq-item.active .faq-icon::before {
    opacity: 0.3;
    transform: scale(1.2);
}

.faq-question h3 {
    margin-bottom: 0;
    font-size: 1.2rem;
    color: var(--secondary-color);
    flex-grow: 1;
    transition: all 0.3s ease;
}

.faq-item.active .faq-question h3 {
    color: var(--accent-color);
}

.faq-question::after {
    content: '';
    position: absolute;
    right: 20px;
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s ease;
    z-index: -1;
}

.faq-item.active .faq-question::after {
    opacity: 0.05;
}

.faq-answer {
    padding: 0 30px 0 80px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;
}

.faq-item.active .faq-answer {
    padding: 0 30px 25px 80px;
    max-height: 1000px;
    opacity: 1;
}

.faq-answer p {
    margin-bottom: 0;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .faq-container {
        max-width: 100%;
    }
    
    .faq-question {
        padding: 18px 50px 18px 20px;
    }
    
    .faq-icon {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }
    
    .faq-question h3 {
        font-size: 1.1rem;
    }
    
    .faq-answer {
        padding-left: 65px;
    }
    
    .faq-item.active .faq-answer {
        padding: 0 20px 20px 65px;
    }
}

@media (max-width: 576px) {
    .faq-question h3 {
        font-size: 1rem;
    }
    
    .faq-icon {
        width: 25px;
        height: 25px;
        font-size: 0.8rem;
        margin-right: 10px;
    }
    
    .faq-question {
        padding: 15px 40px 15px 15px;
    }
    
    .faq-answer {
        padding-left: 50px;
    }
    
    .faq-item.active .faq-answer {
        padding: 0 15px 15px 50px;
    }
}
footer {
    background: var(--gradient-galaxy);
    color: var(--light-text);
    padding: 80px 0 20px;
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(90deg, var(--nebula-pink), var(--sky-blue), var(--comet-trail));
}

footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255, 250, 205, 0.1) 0%, transparent 30%),
        radial-gradient(circle at 80% 20%, rgba(255, 111, 145, 0.08) 0%, transparent 30%),
        url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAuMDUiPjwvcmVjdD4KPC9zdmc+');
    z-index: 0;
    pointer-events: none;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 36px;
    margin-bottom: 50px;
    position: relative;
    z-index: 1;
}

.footer-info {
    position: relative;
}

.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.footer-logo-svg {
    width: 30%;
    height: auto;
    max-width: 150px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
}

.footer-logo-svg:hover {
    filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.4));
    transform: translateY(-5px);
}

.footer-logo a {
    color: #FFFFFF;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-logo a:hover {
    opacity: 0.9;
    color: #FFFFFF;
}

.footer-logo a::after {
    display: none;
}

.footer-logo h3 {
    margin-bottom: 0;
    font-size: 1.5rem;
    color: var(--light-text);
}

.footer-description {
    margin-bottom: 25px;
    opacity: 0.9;
    line-height: 1.7;
}

.footer-social {
    display: flex;
    gap: 15px;
}

.footer-social-link {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--light-text);
    transition: var(--hover-transition);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.footer-social-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-accent);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.footer-social-link:hover {
    background-color: transparent;
    color: var(--light-text);
    transform: translateY(-5px);
}

.footer-social-link:hover::before {
    opacity: 1;
}

.footer-social-link::after {
    display: none;
}

.footer-heading {
    color: var(--light-text);
    font-size: 1.4rem;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 15px;
}

.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background: var(--accent-color);
    border-radius: 2px;
}

.footer-links li {
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    position: relative;
    padding-left: 15px;
}

.footer-links a::before {
    content: '★';
    position: absolute;
    left: -5px;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(10px);
}

.footer-links a:hover {
    color: var(--nebula-pink);
    transform: translateX(5px);
    padding-left: 20px;
}

.footer-links a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.footer-links a::after {
    display: none;
}

.footer-contact li {
    display: flex;
    margin-bottom: 20px;
    align-items: flex-start;
}

.footer-contact-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--accent-secondary);
    margin-right: 15px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.footer-contact-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--gradient-accent);
    opacity: 0;
    z-index: -1;
    transition: all 0.3s ease;
}

.footer-contact li:hover .footer-contact-icon {
    transform: scale(1.1);
    color: var(--light-text);
}

.footer-contact li:hover .footer-contact-icon::before {
    opacity: 1;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.footer-bottom p {
    margin-bottom: 0;
    font-size: 0.9rem;
    opacity: 0.8;
}

@media (max-width: 992px) {
    .footer-container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 40px;
    }
}

@media (max-width: 768px) {
    footer {
        padding: 60px 0 20px;
    }
    
    .footer-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .footer-info {
        text-align: center;
    }
    
    .footer-logo {
        justify-content: center;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer-heading {
        text-align: center;
    }
    
    .footer-heading::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-links {
        text-align: center;
    }
    
    .footer-contact li {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .footer-logo-svg {
        width: 40%;
    }
    
    .footer-contact li {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .footer-contact-icon {
        margin-right: 0;
        margin-bottom: 10px;
    }
}
.intro-image {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    border-radius: var(--border-radius);
}

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

.services-image {
    margin-bottom: 30px;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    position: relative;
}

.services-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
    mix-blend-mode: overlay;
}

.services-image:hover::before {
    opacity: 0.2;
}

.services-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

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

.regions-image {
    margin-bottom: 30px;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    position: relative;
}

.regions-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
    mix-blend-mode: overlay;
}

.regions-image:hover::before {
    opacity: 0.2;
}

.regions-image img {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

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

.testimonial-header-image {
    margin-bottom: 30px;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    position: relative;
}

.testimonial-header-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
    mix-blend-mode: overlay;
}

.testimonial-header-image:hover::before {
    opacity: 0.2;
}

.testimonial-header-image img {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.testimonial-header-image:hover img {
    transform: scale(1.05);
}

.faq-header-image {
    margin-bottom: 30px;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    position: relative;
}

.faq-header-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
    mix-blend-mode: overlay;
}

.faq-header-image:hover::before {
    opacity: 0.2;
}

.faq-header-image img {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.faq-header-image:hover img {
    transform: scale(1.05);
}

.about-us-header-image {
    margin-bottom: 30px;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    position: relative;
}

.about-us-header-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
    mix-blend-mode: overlay;
}

.about-us-header-image:hover::before {
    opacity: 0.2;
}

.about-us-header-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

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

@media (max-width: 768px) {
    .services-image img,
    .regions-image img,
    .testimonial-header-image img,
    .faq-header-image img {
        max-height: 200px;
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 0.5; }
}

@keyframes float {
    0% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-15px) rotate(5deg); }
    100% { transform: translateY(0) rotate(0); }
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.1); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }
    20% {
        transform: scale(25, 25);
        opacity: 0.3;
    }
    100% {
        opacity: 0;
        transform: scale(40, 40);
    }
}

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

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px rgba(137, 208, 245, 0.3); }
    50% { box-shadow: 0 0 20px rgba(137, 208, 245, 0.8); }
}

@keyframes wobble {
    0%, 100% { transform: translateX(0) rotate(0); }
    25% { transform: translateX(-10px) rotate(-5deg); }
    75% { transform: translateX(10px) rotate(5deg); }
}

@keyframes floatStar {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.05); }
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.animated {
    opacity: 0;
}

.fade-in-up {
    animation: fadeInUp 1s forwards;
}

.fade-in {
    animation: fadeIn 0.8s forwards;
}

.float-animation {
    animation: float 6s ease-in-out infinite;
}

.pulse-animation {
    animation: pulse 3s ease-in-out infinite;
}

.twinkle-animation {
    animation: twinkle 3s ease-in-out infinite;
}

.spin-animation {
    animation: spin 10s linear infinite;
}

.glow-animation {
    animation: glow 3s ease-in-out infinite;
}

.wobble-animation {
    animation: wobble 3s ease-in-out infinite;
}

.float-star {
    animation: floatStar 4s ease-in-out infinite;
}

.gradient-animation {
    background: linear-gradient(270deg, var(--sky-blue), var(--nebula-pink), var(--deep-space), var(--cosmic-purple));
    background-size: 300% 300%;
    animation: gradientShift 8s ease infinite;
}

.delay-1 {
    animation-delay: 0.3s;
}

.delay-2 {
    animation-delay: 0.6s;
}

.delay-3 {
    animation-delay: 0.9s;
}

.delay-4 {
    animation-delay: 1.2s;
}

.delay-5 {
    animation-delay: 1.5s;
}

.star {
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    animation: twinkle 3s infinite ease-in-out;
}

.star.small {
    width: 2px;
    height: 2px;
}

.star.medium {
    width: 4px;
    height: 4px;
}

.star.large {
    width: 6px;
    height: 6px;
}

.shooting-star {
    position: absolute;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(240,240,255,0.2) 100%);
    height: 2px;
    border-radius: 50%;
    animation: shootingstar 3s linear infinite;
    opacity: 0;
}

@keyframes shootingstar {
    0% {
        opacity: 0;
        width: 0;
        transform: translateX(0) translateY(0);
    }
    10% {
        opacity: 1;
        width: 100px;
    }
    20%, 100% {
        opacity: 0;
        width: 0;
        transform: translateX(200px) translateY(100px);
    }
}
.stories-section {
    padding: 50px 0;
    background: var(--bg-gradient);
    position: relative;
    overflow: hidden;
}

.stories-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, var(--accent-glow) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, var(--accent2-glow) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, var(--accent3-glow) 0%, transparent 50%);
    animation: backgroundShift 8s ease-in-out infinite;
}

@keyframes backgroundShift {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.6;
    }
}

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

.story-viewer-header {
    padding: 20px 0;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

.story-controls-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 5px 0 5px;
    gap: 15px;
}

.story-mute-btn,
.story-close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s;
    padding: 5px;
}

.story-mute-btn:hover,
.story-close-btn:hover {
    opacity: 1;
}

.stories-bar {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    justify-content: center;
    flex-wrap: nowrap;
}

.stories-bar::-webkit-scrollbar {
    display: none;
}

.story-item {
    flex-shrink: 0;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.story-item:hover {
    transform: translateY(-5px);
}

.story-item.active .story-ring {
    background: linear-gradient(45deg, var(--accent-color), var(--accent2-color), var(--accent3-color));
    animation: storyRingPulse 2s infinite;
}

.story-avatar {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 10px;
}

.story-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid transparent;
    background-clip: padding-box;
}

.story-ring {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff4757, #ff6b7a, #ffa502, #ff6348);
    z-index: -1;
}

.story-item.unviewed .story-ring {
    background: linear-gradient(45deg, #ff4757, #ff6b7a, #ffa502, #ff6348);
}

.story-item.viewed .story-ring {
    background: linear-gradient(45deg, #666, #999);
}

.story-item.active .story-ring {
    background: linear-gradient(45deg, var(--accent-color), var(--accent2-color), var(--accent3-color));
}

.story-title {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.8;
    max-width: 80px;
    line-height: 1.2;
    margin: 0 auto;
}

.story-item:hover .story-title {
    opacity: 1;
    color: var(--accent-color);
}

@keyframes storyRingPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

.story-viewer-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.story-viewer-modal.active {
    display: flex;
}

.story-viewer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
}

.story-viewer-container {
    position: relative;
    width: 90%;
    max-width: 400px;
    height: 80vh;
    max-height: 700px;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.story-viewer-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 20px 20px 0;
}

.story-progress-bars {
    display: flex;
    gap: 4px;
    margin-bottom: 15px;
}

.progress-bar {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: white;
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.progress-bar.active .progress-fill {
    animation: progressFill 5s linear forwards;
}

@keyframes progressFill {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

.story-viewer-content {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.story-navigation {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 5;
    pointer-events: none;
}

.story-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: auto;
    backdrop-filter: blur(10px);
}

@media (min-width: 769px) {
    .story-nav-btn {
        opacity: 0.8 !important;
        display: flex !important;
    }

    .story-nav-btn:hover {
        opacity: 1 !important;
        background: rgba(255, 255, 255, 0.4) !important;
        transform: translateY(-50%) scale(1.1) !important;
    }
}

.story-nav-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.nav-arrow {
    font-size: 24px;
    font-weight: bold;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.story-prev-btn {
    left: 20px;
}

.story-next-btn {
    right: 20px;
}

.story-viewer-content:hover .story-nav-btn {
    opacity: 1;
}

.story-content-container {
    position: relative;
    height: 100%;
}

.story-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.story-content.active {
    opacity: 1;
    transform: translateX(0);
}

.story-content.prev {
    transform: translateX(-100%);
}

.story-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 10s ease;
}

.story-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.story-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            transparent 0%,
            transparent 40%,
            rgba(0, 0, 0, 0.3) 70%,
            rgba(0, 0, 0, 0.8) 100%);
}

.story-text-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 20px 20px;
    z-index: 2;
}

.story-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.story-headline {
    font-size: 20px;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
    line-height: 1.3;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.story-excerpt {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
    margin-bottom: 20px;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.story-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.story-read-more-btn {
    background: linear-gradient(45deg, var(--accent-color), var(--accent2-color));
    color: white;
    padding: 12px 24px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 45, 105, 0.3);
}

.story-read-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 45, 105, 0.4);
    color: white;
    text-decoration: none;
}

@media (max-width: 768px) {
    .stories-bar {
        gap: 15px;
        padding: 15px;
        justify-content: center;
    }

    .story-avatar {
        width: 70px;
        height: 70px;
    }

    .story-title {
        font-size: 11px;
        max-width: 70px;
    }

    .story-viewer-container {
        width: 95%;
        height: 85vh;
        border-radius: 15px;
    }

    .story-headline {
        font-size: 18px;
    }

    .story-excerpt {
        font-size: 13px;
    }

    .story-nav-btn {
        width: 40px;
        height: 40px;
    }

    .story-prev-btn {
        left: 10px;
    }

    .story-next-btn {
        right: 10px;
    }
}

@media (max-width: 480px) {
    .stories-section {
        padding: 30px 0;
    }

    .stories-bar {
        gap: 12px;
        padding: 12px;
        justify-content: center;
    }

    .story-avatar {
        width: 60px;
        height: 60px;
    }

    .story-title {
        font-size: 10px;
        max-width: 60px;
    }

    .story-viewer-container {
        width: 100%;
        height: 100vh;
        border-radius: 0;
    }

    .story-text-content {
        padding: 25px 15px 15px;
    }

    .story-headline {
        font-size: 16px;
    }

    .story-excerpt {
        font-size: 12px;
    }
}
/* Hero Half - Yarım Ekran Hero */
.hero-half {
    position: relative;
    height: 55vh;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 100px;
}

.hero-half-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Radial spotlight darkens the middle where text sits, fades at edges
       so the hero photo still shows its color. */
    background:
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.40) 100%),
        linear-gradient(180deg, rgba(7, 100, 156, 0.25) 0%, rgba(7, 100, 156, 0) 40%);
    z-index: 1;
}

.hero-half-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 20px;
    max-width: 800px;
}

.hero-half-content h1 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.65),
        0 1px 2px rgba(0, 0, 0, 0.9);
    color: #FFD700;
    /* Gold color for title */
}

.hero-half-subtitle {
    font-size: 1.3rem;
    opacity: 1;
    margin: 0;
    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.75),
        0 1px 2px rgba(0, 0, 0, 0.9);
}

.hero-half .breadcrumb {
    margin-bottom: 20px;
    font-size: 0.9rem;
    opacity: 0.9;
}

.hero-half .breadcrumb a {
    color: #fff;
    text-decoration: none;
}

.hero-half .breadcrumb a:hover {
    text-decoration: underline;
}

.hero-half .breadcrumb span {
    margin: 0 8px;
    opacity: 0.7;
}

@media (max-width: 768px) {
    .hero-half {
        height: auto;
        min-height: 360px;
        padding-top: 110px;
        padding-bottom: 40px;
    }

    /* On small screens the photo fills the full frame — push the spotlight
       stronger so text stays legible on any hero image. */
    .hero-half-overlay {
        background:
            radial-gradient(ellipse at center, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.45) 100%),
            linear-gradient(180deg, rgba(7, 100, 156, 0.35) 0%, rgba(7, 100, 156, 0) 35%);
    }

    .hero-half-content {
        padding: 20px 16px;
        background: rgba(0, 0, 0, 0.22);
        border-radius: 16px;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .hero-half-content h1 {
        font-size: 1.6rem;
        line-height: 1.25;
    }

    .hero-half-subtitle {
        font-size: 0.98rem;
        line-height: 1.4;
    }
}
/* Campaign Strip — fixed full-width announcement bar above the header.
   When active, <body> carries .has-campaign-strip and the header shifts down
   by --campaign-strip-height so the bar is always visible and never overlaps hero. */
:root {
    --campaign-strip-height: 58px;
}

.campaign-strip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: var(--campaign-strip-height);
    background: linear-gradient(135deg, #07649c, #9966cc);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    z-index: 1001;
}

/* Push fixed header below the strip. Do NOT add padding to hero/slider —
   hero is full-bleed; header floats over it. A padding-top would create
   an empty colored band between the header and the slider content. */
body.has-campaign-strip header {
    top: var(--campaign-strip-height);
}

.campaign-strip-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 8px 20px;
    color: #fff;
    font-size: 0.92rem;
    justify-content: center;
    min-height: var(--campaign-strip-height);
    box-sizing: border-box;
}

.campaign-strip-label {
    font-weight: 700;
    color: #ffd700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.2px;
}

.campaign-strip-label i { font-size: 1rem; }

.campaign-strip-text {
    opacity: 0.96;
    max-width: 560px;
    line-height: 1.35;
}

.campaign-strip-countdown {
    background: rgba(255, 255, 255, 0.18);
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.campaign-strip-cta {
    background: linear-gradient(135deg, #ff6f91, #fa8a3c);
    color: #fff;
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 6px 16px rgba(255, 111, 145, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.campaign-strip-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(255, 111, 145, 0.45);
}

.campaign-strip-cta i { transition: transform 0.2s ease; }
.campaign-strip-cta:hover i { transform: translateX(3px); }

@media (max-width: 768px) {
    .campaign-strip-inner {
        padding: 8px 14px;
        font-size: 0.82rem;
        gap: 8px;
        text-align: center;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    /* Keep bar to one compact row on mobile: drop the long text, keep label+CTA. */
    .campaign-strip-text { display: none; }
    .campaign-strip-countdown { display: none; }
    .campaign-strip-label {
        font-size: 0.82rem;
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .campaign-strip-cta {
        font-size: 0.78rem;
        padding: 6px 12px;
        flex: 0 0 auto;
    }
}

@media (max-width: 380px) {
    .campaign-strip-cta i { display: none; }
}

/* ------- Yaklaşan Özel Günler (home, below hero) ------- */
/* Not: Tüm <section>'lar global layout.css'te -50px top + 100px height
   + skewY(-2deg) yapan ::before pseudo-element'e sahip (sitenin imza
   kesişim çizgisi). Bu çizginin h2 title ile kesişmemesi için
   padding-top en az ~130px olmalı (50 + wide-viewport skew payı). */
.upcoming-events {
    position: relative;
    padding: 140px 0 80px;
    margin: 0;
    background: linear-gradient(180deg, rgba(7,100,156,0.04), transparent);
    clear: both;
}
.upcoming-events .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.upcoming-events-head { text-align: center; margin-bottom: 28px; }
.upcoming-events-head h2 {
    font-size: 1.6rem;
    margin: 0 0 6px;
    color: #2b1b63;
    font-weight: 700;
}
.upcoming-events-head h2 i { color: #07649c; margin-right: 8px; }
.upcoming-events-head p { color: #555; margin: 0; font-size: 0.98rem; }

.upcoming-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.upcoming-event-card {
    background: #fff;
    border: 1px solid rgba(7,100,156,0.12);
    border-radius: 14px;
    padding: 18px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.upcoming-event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(7,100,156,0.14);
    border-color: rgba(7,100,156,0.28);
}
.upcoming-event-date {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #07649c;
    font-weight: 700;
    font-size: 0.95rem;
}
.upcoming-event-date i { font-size: 1.05rem; }
.upcoming-event-label {
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 600;
    color: #2b1b63;
    flex: 1;
}
.upcoming-event-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    font-size: 0.86rem;
}
.upcoming-event-countdown {
    color: #9966cc;
    font-weight: 600;
}
.upcoming-event-cta {
    color: #ff6f91;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.upcoming-event-cta i { transition: transform 0.2s ease; }
.upcoming-event-card:hover .upcoming-event-cta i { transform: translateX(3px); }

@media (max-width: 768px) {
    .upcoming-events { padding: 56px 0 48px; margin: 16px 0 24px; }
    .upcoming-events-head h2 { font-size: 1.3rem; }
    .upcoming-events-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .upcoming-event-card { padding: 14px 14px 12px; }
    .upcoming-event-label { font-size: 0.92rem; }
}

@media (max-width: 420px) {
    .upcoming-events-grid { grid-template-columns: 1fr; }
}

/* Campaign Landing Page — JSON-driven template styles */
/* Used by: /23-nisan-cocuk-bayrami-etkinlikleri, /avm-etkinlikleri-cocuk-tiyatrosu, /okul-paketleri */

/* ---------- Hero overrides ---------- */
.campaign-hero {
    min-height: 70vh;
}

.campaign-eyebrow {
    display: inline-block;
    padding: 8px 18px;
    margin-bottom: 18px;
    background: var(--gradient-accent);
    color: var(--light-text);
    border-radius: var(--button-radius);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(255, 111, 145, 0.35);
}

.campaign-hero-cta {
    margin-top: 24px;
}

/* ---------- Main container ---------- */
.campaign-page-main {
    padding: 60px 0 80px;
    background: var(--bg-gradient);
}

/* ---------- Trust bar (above intro) ---------- */
.trust-bar {
    margin: 0 auto 50px;
    max-width: 1180px;
}
.trust-bar-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    background: #fff;
    border: 1px solid rgba(7, 100, 156, 0.12);
    border-radius: 18px;
    padding: 22px 20px;
    box-shadow: 0 10px 30px rgba(7, 100, 156, 0.08);
}
.trust-bar-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.trust-bar-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #07649c, #9966cc);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}
.trust-bar-text { display: flex; flex-direction: column; line-height: 1.35; }
.trust-bar-text strong {
    color: #2b1b63;
    font-size: 0.95rem;
    margin-bottom: 3px;
    font-weight: 700;
}
.trust-bar-text span { color: #555; font-size: 0.82rem; }

@media (max-width: 980px) {
    .trust-bar-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .trust-bar-inner { grid-template-columns: 1fr; padding: 18px 16px; }
}

.campaign-page-main .container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

.campaign-page-main section {
    margin-bottom: 70px;
}

/* The global section::before is the home page's signature diagonal accent.
   Campaign pages have 7-8 short sections stacked; repeating the strip
   between each reads as a series of empty white blocks rather than a
   subtle accent. Disable the strip here — the home page keeps it. */
.campaign-page-main section::before {
    display: none;
}

.campaign-page-main .section-heading {
    font-size: 2rem;
    color: var(--dark-text);
    text-align: center;
    margin-bottom: 12px;
    font-weight: 700;
    display: block;
}

.campaign-page-main .section-subheading {
    text-align: center;
    color: var(--meteroid-grey);
    max-width: 720px;
    margin: 0 auto 40px;
    font-size: 1.05rem;
}

/* ---------- Intro ---------- */
.campaign-intro {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.campaign-lead {
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--dark-text);
    margin-bottom: 20px;
    font-weight: 500;
}

.campaign-lead strong {
    color: var(--accent-color);
}

.campaign-intro-body {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--text-color);
}

.campaign-intro-body p {
    margin-bottom: 16px;
}

.campaign-intro-body strong {
    color: var(--dark-text);
}

/* ---------- Highlights ---------- */
.campaign-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.highlight-card {
    background: var(--ultra-light-bg);
    border-radius: var(--card-radius);
    padding: 32px 24px;
    text-align: center;
    box-shadow: var(--soft-shadow);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--hover-shadow);
}

.highlight-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-text);
    font-size: 1.5rem;
    box-shadow: var(--glow-shadow);
}

.highlight-card h3 {
    font-size: 1.15rem;
    color: var(--dark-text);
    margin-bottom: 10px;
    font-weight: 700;
}

.highlight-card p {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--meteroid-grey);
    margin: 0;
}

/* ---------- Packages ---------- */
.package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}

.package-card {
    position: relative;
    background: var(--ultra-light-bg);
    border-radius: var(--card-radius);
    padding: 32px 26px;
    box-shadow: var(--soft-shadow);
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

.package-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--hover-shadow);
}

.package-card.is-featured {
    border-color: var(--accent-color);
    background: linear-gradient(180deg, #fff 0%, rgba(255, 111, 145, 0.04) 100%);
    box-shadow: 0 15px 40px rgba(255, 111, 145, 0.18);
}

.package-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-accent);
    color: var(--light-text);
    padding: 6px 18px;
    border-radius: var(--button-radius);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(255, 111, 145, 0.4);
}

.package-name {
    font-size: 1.3rem;
    color: var(--dark-text);
    margin-bottom: 6px;
    font-weight: 700;
}

.package-tagline {
    font-size: 0.88rem;
    color: var(--meteroid-grey);
    margin-bottom: 18px;
    line-height: 1.45;
}

.package-price {
    padding: 12px 0;
    margin-bottom: 18px;
    border-top: 1px dashed var(--border-color);
    border-bottom: 1px dashed var(--border-color);
    text-align: center;
}

.package-price .price-hint {
    font-size: 0.88rem;
    color: var(--secondary-color);
    font-weight: 600;
}

.package-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex-grow: 1;
}

.package-features li {
    position: relative;
    padding: 8px 0 8px 28px;
    font-size: 0.93rem;
    color: var(--text-color);
    line-height: 1.5;
}

.package-features li i {
    position: absolute;
    left: 0;
    top: 11px;
    color: var(--comet-trail);
    font-size: 1rem;
}

.package-cta {
    width: 100%;
    text-align: center;
    margin-top: auto;
}

/* ---------- Content blocks ---------- */
.campaign-content-block {
    background: var(--ultra-light-bg);
    border-radius: var(--card-radius);
    padding: 40px 36px;
    box-shadow: var(--soft-shadow);
    border: 1px solid var(--border-color);
}

.campaign-content-block h2 {
    font-size: 1.6rem;
    color: var(--dark-text);
    margin-bottom: 18px;
    font-weight: 700;
}

.campaign-content-block .block-body > p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-color);
    margin-bottom: 16px;
}

.campaign-content-block strong {
    color: var(--dark-text);
}

.campaign-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px 24px;
}

.campaign-list li {
    position: relative;
    padding: 8px 0 8px 28px;
    font-size: 0.95rem;
    color: var(--text-color);
    line-height: 1.5;
}

.campaign-list li i {
    position: absolute;
    left: 0;
    top: 11px;
    color: var(--accent-secondary);
    font-size: 0.9rem;
}

.campaign-content-block.layout-text-only {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Process ---------- */
.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.process-step {
    background: var(--ultra-light-bg);
    border-radius: var(--card-radius);
    padding: 32px 22px;
    text-align: center;
    box-shadow: var(--soft-shadow);
    border-top: 4px solid var(--accent-secondary);
    transition: var(--transition);
}

.process-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--hover-shadow);
}

.process-number {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--accent-color);
    line-height: 1;
    margin-bottom: 12px;
    opacity: 0.85;
}

.process-step h4 {
    font-size: 1.1rem;
    color: var(--dark-text);
    margin-bottom: 10px;
    font-weight: 700;
}

.process-step p {
    font-size: 0.93rem;
    line-height: 1.55;
    color: var(--meteroid-grey);
    margin: 0;
}

/* ---------- FAQ ---------- */
.campaign-faq-list {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.campaign-faq-item {
    background: var(--ultra-light-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--soft-shadow);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: var(--transition);
}

.campaign-faq-item[open] {
    box-shadow: var(--hover-shadow);
    border-color: var(--accent-color);
}

.campaign-faq-item summary {
    cursor: pointer;
    padding: 20px 26px;
    font-weight: 600;
    color: var(--dark-text);
    font-size: 1.02rem;
    list-style: none;
    position: relative;
    padding-right: 48px;
}

.campaign-faq-item summary::-webkit-details-marker {
    display: none;
}

.campaign-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--accent-color);
    transition: transform 0.25s ease;
    line-height: 1;
}

.campaign-faq-item[open] summary::after {
    content: '−';
}

.campaign-faq-answer {
    padding: 0 26px 22px;
    font-size: 0.97rem;
    line-height: 1.7;
    color: var(--text-color);
}

.campaign-faq-answer a {
    color: var(--accent-color);
    text-decoration: underline;
}

/* ---------- CTA block ---------- */
.campaign-cta-block {
    background: var(--gradient-cosmic);
    color: var(--light-text);
    border-radius: var(--card-radius);
    padding: 56px 36px;
    text-align: center;
    box-shadow: 0 20px 45px rgba(7, 100, 156, 0.25);
}

.campaign-cta-block h2 {
    font-size: 2rem;
    color: var(--light-text);
    margin-bottom: 14px;
    font-weight: 700;
}

.campaign-cta-block p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
    max-width: 640px;
    margin: 0 auto 28px;
}

.campaign-cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.campaign-cta-block .cta-button.primary-cta {
    background: var(--gradient-accent);
    color: var(--light-text);
    border: none;
}

.campaign-cta-block .cta-button.secondary-cta {
    background: rgba(255, 255, 255, 0.14);
    color: var(--light-text);
    border: 2px solid rgba(255, 255, 255, 0.45);
}

.campaign-cta-block .cta-button.secondary-cta:hover {
    background: var(--light-text);
    color: var(--secondary-color);
    border-color: var(--light-text);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .campaign-page-main {
        padding: 40px 0 60px;
    }

    .campaign-page-main section {
        margin-bottom: 50px;
    }

    .campaign-page-main .section-heading {
        font-size: 1.6rem;
    }

    .campaign-lead {
        font-size: 1.1rem;
    }

    .package-grid {
        grid-template-columns: 1fr;
    }

    .campaign-content-block {
        padding: 30px 22px;
    }

    .campaign-content-block h2 {
        font-size: 1.35rem;
    }

    .campaign-cta-block {
        padding: 40px 24px;
    }

    .campaign-cta-block h2 {
        font-size: 1.55rem;
    }

    .campaign-faq-item summary {
        padding: 16px 22px;
        padding-right: 44px;
        font-size: 0.98rem;
    }

    .campaign-faq-answer {
        padding: 0 22px 18px;
        font-size: 0.93rem;
    }
}

@media (max-width: 480px) {
    .package-card {
        padding: 26px 22px;
    }

    .highlight-card {
        padding: 26px 20px;
    }

    .campaign-cta-buttons .cta-button {
        width: 100%;
    }
}

/* ---------- Testimonials ---------- */
.campaign-testimonials {
    margin: 70px auto 60px;
    max-width: 1180px;
}

.campaign-testimonials .section-heading {
    display: block;
    text-align: center;
    margin-bottom: 10px;
}

.campaign-testimonials .section-subheading {
    text-align: center;
    color: var(--muted-text, #5d6c7b);
    max-width: 720px;
    margin: 0 auto 40px;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.campaign-testimonials .testimonial-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(7, 100, 156, 0.1);
    border-radius: 20px;
    padding: 32px 28px 26px;
    box-shadow: 0 12px 34px rgba(7, 100, 156, 0.08);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.campaign-testimonials .testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    bottom: auto;
    inset: auto;
    height: 4px;
    padding: 0;
    background: linear-gradient(90deg, #07649c, #9966cc, #ff6f91);
    border-radius: 4px;
    opacity: 1;
    -webkit-mask: none;
    mask: none;
    -webkit-mask-composite: initial;
    mask-composite: initial;
}

.testimonial-quote-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(7, 100, 156, 0.12), rgba(153, 102, 204, 0.12));
    color: #07649c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.testimonial-text {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-color, #2d3842);
    margin: 0;
    font-style: italic;
}

.testimonial-attrib {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px dashed rgba(7, 100, 156, 0.18);
}

.testimonial-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #07649c, #9966cc);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.testimonial-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.testimonial-meta strong {
    font-size: 0.95rem;
    color: #07649c;
}

.testimonial-meta span {
    font-size: 0.82rem;
    color: var(--muted-text, #5d6c7b);
}

.testimonial-disclaimer {
    text-align: center;
    font-size: 0.78rem;
    color: var(--muted-text, #5d6c7b);
    margin-top: 22px;
    opacity: 0.75;
}

@media (max-width: 900px) {
    .testimonial-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .testimonial-grid {
        grid-template-columns: 1fr;
    }
    .campaign-testimonials {
        margin: 50px auto 40px;
    }
    .campaign-testimonials .testimonial-card {
        padding: 28px 22px 22px;
    }
}

/* ============================================
   AEO layer: answer box + key takeaways
   Scoped, follows the intersection style: white
   card, 18px radius, brand gradient accents.
   ============================================ */
.answer-box {
    max-width: 860px;
    margin: 0 auto 50px;
    background: #fff;
    border: 1px solid rgba(7, 100, 156, 0.12);
    border-left: 5px solid;
    border-image: linear-gradient(180deg, #07649c, #9966cc) 1;
    border-radius: 18px;
    padding: 26px 30px;
    box-shadow: 0 10px 30px rgba(7, 100, 156, 0.08);
}
.answer-box-question {
    color: #2b1b63;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.4;
}
.answer-box-text {
    color: var(--text-color, #555);
    font-size: 1.04rem;
    line-height: 1.7;
    margin: 0;
}
.event-page-content .answer-box {
    margin: 0 0 34px;
}

.key-takeaways {
    max-width: 860px;
    margin: 0 auto 60px;
    background: linear-gradient(135deg, rgba(7, 100, 156, 0.05), rgba(153, 102, 204, 0.05));
    border: 1px solid rgba(7, 100, 156, 0.12);
    border-radius: 18px;
    padding: 26px 30px;
}
.key-takeaways-title {
    color: #2b1b63;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 14px;
}
.key-takeaways-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.key-takeaways-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    color: var(--text-color, #555);
    font-size: 0.98rem;
    line-height: 1.55;
}
.key-takeaways-list li:last-child {
    margin-bottom: 0;
}
.key-takeaways-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: linear-gradient(135deg, #07649c, #9966cc);
}
.event-page-content .key-takeaways {
    margin: 34px 0;
}
.event-page-content .campaign-faq {
    margin: 34px 0;
}

@media (max-width: 600px) {
    .answer-box,
    .key-takeaways {
        padding: 20px 18px;
    }
}

/* ============================================
   Verifiable Google rating block. Scoped so it
   never leaks onto other cards.
   ============================================ */
.google-rating {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 520px;
    margin: 0 auto 34px;
    background: #fff;
    border: 1px solid rgba(7, 100, 156, 0.14);
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 8px 24px rgba(7, 100, 156, 0.07);
}
.google-rating-mark {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #07649c, #9966cc);
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.google-rating-body {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}
.google-rating-score {
    color: #2b1b63;
    font-size: 1.05rem;
    font-weight: 700;
}
.google-rating-meta {
    color: #555;
    font-size: 0.86rem;
}
.google-rating-meta a {
    color: #07649c;
    text-decoration: underline;
}
@media (max-width: 600px) {
    .google-rating { padding: 14px 16px; gap: 12px; }
}

/* Event Page Styles */
.event-page-main {
    padding: 60px 0;
    background: var(--light-bg, #f5f5f5);
}

.event-page-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
}

/* Event Content */
.event-page-content {
    background: #fff;
    border-radius: var(--border-radius, 8px);
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.event-intro {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 30px;
    color: var(--text-color, #333);
}

/* Event Card (Category Page) */
.event-card {
    display: flex;
    background: #fff;
    border-radius: var(--border-radius, 8px);
    overflow: hidden;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s, box-shadow 0.3s;
    margin-bottom: 20px;
}

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

.event-card-image {
    width: 280px;
    flex-shrink: 0;
}

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

.event-card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
}

.event-card-content h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--secondary-color, #07649c);
}

.event-card-content p {
    flex-grow: 1;
    margin-bottom: 15px;
    line-height: 1.6;
}

.event-card-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: #666;
}

.event-card-meta i {
    margin-right: 5px;
    color: var(--primary-color, #0aa0d6);
}

.event-card-link {
    color: var(--primary-color, #0aa0d6);
    font-weight: 600;
}

.event-card-link i {
    margin-left: 5px;
    transition: transform 0.3s;
}

.event-card:hover .event-card-link i {
    transform: translateX(5px);
}

/* Event Carousel */
.event-carousel {
    position: relative;
    margin-bottom: 30px;
    border-radius: var(--border-radius, 8px);
    overflow: hidden;
}

.carousel-container {
    position: relative;
}

.carousel-item {
    display: none;
}

.carousel-item.active {
    display: block;
}

.carousel-item img,
.carousel-video {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: cover;
}

.carousel-nav {
    position: absolute;
    top: calc(50% - 25px);
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    pointer-events: none;
    z-index: 10;
}

.carousel-nav button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    pointer-events: auto;
    font-size: 1.2rem;
    color: var(--secondary-color, #07649c);
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.carousel-nav button:hover {
    background: #fff;
    transform: scale(1.1);
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.05);
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

.carousel-dot.active {
    background: var(--primary-color, #0aa0d6);
    transform: scale(1.2);
}

/* Video Play/Pause Overlay */
.carousel-video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-video-wrapper .carousel-video {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: cover;
    display: block;
}

.video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 3px solid rgba(255, 255, 255, 0.9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 5;
}

.video-play-overlay i {
    color: #fff;
    font-size: 1.8rem;
    margin-left: 4px;
    /* Play ikonu için küçük offset */
}

.video-play-overlay.playing i {
    margin-left: 0;
}

/* Video oynarken overlay gizlenir */
.video-play-overlay.playing {
    opacity: 0;
    pointer-events: none;
}

/* Dokunulduğunda geçici görünür */
.video-play-overlay.playing.visible {
    opacity: 1;
    pointer-events: auto;
}

.video-play-overlay:hover {
    background: rgba(10, 160, 214, 0.85);
    transform: translate(-50%, -50%) scale(1.1);
    border-color: #fff;
}

.video-play-overlay:active {
    transform: translate(-50%, -50%) scale(0.95);
}

/* Event Description */
.event-description {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Event Features */
.event-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.event-features .feature-item {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: var(--light-bg, #f5f5f5);
    border-radius: var(--border-radius, 8px);
}

.event-features .feature-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color, #0aa0d6), var(--secondary-color, #07649c));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.event-features .feature-text h4 {
    margin-bottom: 5px;
    color: var(--secondary-color, #07649c);
}

.event-features .feature-text p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}

/* Event Meta Box */
.event-meta-box {
    display: flex;
    gap: 30px;
    padding: 20px;
    background: linear-gradient(135deg, var(--primary-color, #0aa0d6), var(--secondary-color, #07649c));
    border-radius: var(--border-radius, 8px);
    margin-bottom: 30px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 1.1rem;
}

.meta-item i {
    font-size: 1.3rem;
}

/* Event CTA */
.event-cta {
    text-align: center;
}

.event-cta .cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 40px;
    font-size: 1.1rem;
}

/* Sidebar */
.event-page-sidebar {
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: sticky;
    top: 110px;
    align-self: start;
    height: fit-content;
}

.sidebar-widget {
    background: #fff;
    border-radius: var(--border-radius, 8px);
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.sidebar-title {
    font-size: 1.1rem;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--primary-color, #0aa0d6);
    color: var(--secondary-color, #07649c);
}

.sidebar-title i {
    margin-right: 10px;
    color: var(--primary-color, #0aa0d6);
}

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

.sidebar-list li {
    margin-bottom: 10px;
}

.sidebar-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: var(--light-bg, #f5f5f5);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-color, #333);
    transition: all 0.3s;
}

.sidebar-list a:hover,
.sidebar-list a.active {
    background: var(--primary-color, #0aa0d6);
    color: #fff;
}

.sidebar-list a i {
    font-size: 0.9rem;
    opacity: 0.7;
}

.sidebar-more a {
    background: transparent;
    color: var(--primary-color, #0aa0d6);
    font-weight: 600;
}

.sidebar-more a:hover {
    background: rgba(10, 160, 214, 0.1);
    color: var(--primary-color, #0aa0d6);
}

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

.sidebar-cta p {
    margin-bottom: 20px;
    color: #666;
}

.sidebar-cta .cta-button {
    width: 100%;
    justify-content: center;
}

/* Yaklaşan Etkinlikler (dinamik takvim) */
.sidebar-upcoming-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-upcoming-list li + li {
    margin-top: 10px;
}

.sidebar-upcoming-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: var(--light-bg, #f5f7fa);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-color, #333);
    transition: background 0.25s, transform 0.25s;
}

.sidebar-upcoming-item:hover {
    background: #fff;
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(10, 160, 214, 0.12);
}

.sidebar-upcoming-date {
    flex: 0 0 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    background: linear-gradient(135deg, var(--primary-color, #0aa0d6), var(--secondary-color, #07649c));
    color: #fff;
    border-radius: 6px;
    line-height: 1;
}

.sidebar-upcoming-date strong {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.sidebar-upcoming-date small {
    margin-top: 3px;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.9;
}

.sidebar-upcoming-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sidebar-upcoming-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--secondary-color, #07649c);
    line-height: 1.3;
}

.sidebar-upcoming-label i {
    font-size: 0.85rem;
    color: var(--primary-color, #0aa0d6);
    flex-shrink: 0;
}

.sidebar-upcoming-countdown {
    font-size: 0.78rem;
    color: #777;
    letter-spacing: 0.2px;
}

.sidebar-upcoming-item:hover .sidebar-upcoming-label {
    color: var(--primary-color, #0aa0d6);
}

.sidebar-upcoming-footer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed rgba(10, 160, 214, 0.25);
    text-align: right;
}

.sidebar-upcoming-footer a {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color, #0aa0d6);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.25s;
}

.sidebar-upcoming-footer a:hover {
    gap: 10px;
}

/* Responsive */
@media (max-width: 992px) {
    .event-page-grid {
        grid-template-columns: 1fr;
    }

    .event-page-sidebar {
        order: 1;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .event-page-main {
        padding: 30px 0;
    }

    .event-page-main .container {
        padding: 0 15px;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .event-page-content {
        padding: 15px;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* Carousel Mobile */
    .event-carousel {
        margin-bottom: 20px;
    }

    .carousel-item img,
    .carousel-video {
        max-height: 250px;
    }

    .carousel-nav button {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    /* Event Card Mobile */
    .event-card {
        flex-direction: column;
    }

    .event-card-image {
        width: 100%;
        height: 200px;
    }

    .event-card-content {
        padding: 15px;
    }

    .event-card-content h3 {
        font-size: 1.2rem;
    }

    .event-card-content p {
        font-size: 0.9rem;
    }

    .event-features {
        grid-template-columns: 1fr;
    }

    .event-meta-box {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }

    .event-meta-tags-wrapper {
        flex-direction: column;
        gap: 10px;
        padding: 15px;
    }

    .event-meta-item {
        font-size: 0.85rem;
    }

    /* Event Article Mobile */
    .event-article {
        margin-top: 0;
    }

    .event-article-header {
        margin-bottom: 20px;
        padding-bottom: 15px;
    }

    .event-article-header h2 {
        font-size: 1.4rem;
    }

    .event-article-subheadline {
        font-size: 1rem;
    }

    .event-article-intro {
        font-size: 0.95rem;
        line-height: 1.7;
        margin-bottom: 25px;
        text-align: left;
    }

    /* Services List Mobile */
    .services-list {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .service-item {
        padding: 15px;
    }

    .service-item h4 {
        font-size: 1rem;
    }

    .service-item p {
        font-size: 0.85rem;
    }

    .event-services h3 {
        font-size: 1.2rem;
    }

    /* Notice Boxes Mobile */
    .notice-box {
        padding: 15px;
    }

    .reservation-notice h4 {
        font-size: 0.95rem;
    }

    .reservation-notice p {
        font-size: 0.9rem;
    }

    /* Event Meta Tags Mobile */
    .event-meta-tags {
        flex-direction: column;
        gap: 10px;
    }

    .meta-tag {
        font-size: 0.9rem;
        padding: 6px 12px;
    }

    /* CTA Section Mobile */
    .event-cta-section {
        padding: 20px;
    }

    .event-cta-section .cta-text {
        font-size: 1rem;
    }

    .event-cta-section .cta-button {
        padding: 12px 25px;
        font-size: 0.95rem;
    }

    .event-intro {
        font-size: 1rem;
    }

    .event-article-content h2 {
        font-size: 1.4rem;
        margin-top: 25px;
    }

    /* Educational Values Box Mobile */
    .educational-values-box {
        padding: 15px;
    }

    .educational-values-box h3 {
        font-size: 1.1rem;
    }

    .educational-values-box ul {
        grid-template-columns: 1fr;
    }

    /* Reservation Callout Mobile */
    .reservation-callout {
        padding: 20px;
        padding-bottom: 25px;
        margin-top: 25px;
    }

    .reservation-callout h3 {
        font-size: 1.1rem;
    }

    .reservation-callout p {
        font-size: 0.9rem;
    }

    /* Meta Tags Mobile - NO FULL WIDTH */
    .event-meta-tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .event-article-footer .meta-tag,
    .meta-tag {
        display: inline-block;
        width: auto;
        padding: 8px 20px;
        font-size: 0.85rem;
    }

    /* Carousel Nav Buttons Centered */
    .carousel-nav {
        top: calc(50% - 30px);
    }

    .carousel-nav button {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}

/* Event Article Styles */
.event-article {
    margin-top: 10px;
}

.event-article-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #eee;
}

.event-article-header h2 {
    font-size: 2rem;
    color: var(--secondary-color, #07649c);
    margin-bottom: 10px;
    font-weight: 700;
}

.event-article-subheadline {
    font-size: 1.2rem;
    color: var(--primary-color, #0aa0d6);
    font-weight: 500;
    margin: 0;
}

.event-article-intro {
    font-size: 1.1rem;
    line-height: 1.9;
    color: #444;
    margin-bottom: 35px;
    text-align: justify;
}

.event-services h3 {
    font-size: 1.4rem;
    color: var(--secondary-color, #07649c);
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color, #0aa0d6);
}

.services-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 35px;
}

.service-item {
    background: linear-gradient(135deg, #f8f9fa, #fff);
    padding: 25px;
    border-radius: var(--border-radius, 8px);
    border-left: 4px solid var(--primary-color, #0aa0d6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s, box-shadow 0.3s;
}

.service-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.service-item h4 {
    font-size: 1.1rem;
    color: var(--secondary-color, #07649c);
    margin-bottom: 10px;
    font-weight: 600;
}

.service-item p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

.event-notices {
    margin-bottom: 30px;
}

.notice-box {
    padding: 20px;
    border-radius: var(--border-radius, 8px);
    margin-bottom: 15px;
}

.reservation-notice {
    background: linear-gradient(135deg, rgba(10, 160, 214, 0.08), rgba(7, 100, 156, 0.05));
    border: 1px solid rgba(10, 160, 214, 0.2);
}

.reservation-notice h4 {
    color: var(--secondary-color, #07649c);
    margin-bottom: 10px;
    font-size: 1rem;
}

.reservation-notice p {
    margin: 0;
    color: #444;
    line-height: 1.6;
}

.patent-notice {
    background: #f8f9fa;
    text-align: center;
}

.patent-notice p {
    margin: 0;
    color: #777;
}

.event-article-footer {
    padding-top: 25px;
    border-top: 1px solid #eee;
}

.event-meta-tags {
    display: flex;
    gap: 30px;
    margin-bottom: 25px;
    flex-wrap: wrap;
    justify-content: center;
}

.meta-tag {
    font-size: 1rem;
    color: #555;
    background: #f5f5f5;
    padding: 8px 16px;
    border-radius: 20px;
}

.meta-tag strong {
    color: var(--secondary-color, #07649c);
}

.event-cta-section {
    text-align: center;
    padding: 30px;
    background: linear-gradient(135deg, var(--secondary-color, #07649c), var(--primary-color, #0aa0d6));
    border-radius: var(--border-radius, 8px);
}

.event-cta-section .cta-text {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.event-cta-section .cta-button {
    background: #fff;
    color: var(--secondary-color, #07649c);
    font-weight: 600;
    padding: 15px 40px;
    border-radius: 30px;
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s;
}

.event-cta-section .cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

/* Performance Detail Specifics */
.event-category-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 15px;
    border-radius: 20px;
    color: #fff;
    font-size: 0.9rem;
    margin-bottom: 15px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.event-meta-tags-wrapper {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 111, 145, 0.1));
    padding: 20px;
    border-radius: 10px;
    border-left: 5px solid var(--accent-color, #ffc107);
}

.event-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #555;
}

.event-meta-item i {
    color: var(--accent-color, #ffc107);
    font-size: 1.2rem;
}

.educational-values-box {
    background: linear-gradient(135deg, rgba(255, 111, 145, 0.08), rgba(255, 193, 7, 0.08));
    padding: 25px;
    border-radius: 15px;
    margin-top: 30px;
    border: 1px solid rgba(255, 111, 145, 0.2);
}

.educational-values-box h3 {
    color: #d4458b;
    font-size: 1.3rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.educational-values-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.educational-values-box ul li {
    background: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
}

.educational-values-box ul li::before {
    content: "\f00c";
    /* check icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #28a745;
    margin-right: 10px;
}

.reservation-callout {
    background: linear-gradient(135deg, #FF9800, #F57C00);
    color: #fff;
    padding: 30px;
    border-radius: 15px;
    margin-top: 40px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(245, 124, 0, 0.2);
}

.reservation-callout h3 {
    color: #fff;
    margin-bottom: 10px;
}

.reservation-callout .btn {
    background: #fff;
    color: #F57C00;
    border: none;
    font-weight: bold;
    margin-top: 15px;
    padding: 12px 30px;
}

.reservation-callout .btn:hover {
    background: #f1f1f1;
    color: #E65100;
}

/* Sidebar Other Events List */
.other-events-list {
    list-style: none;
    padding: 0;
}

.other-events-list li {
    border-bottom: 1px solid #eee;
}

.other-events-list li a {
    display: block;
    padding: 12px 0;
    color: #555;
    transition: all 0.3s;
}

.other-events-list li a:hover {
    padding-left: 5px;
    color: var(--primary-color);
}

.other-events-list li a.view-all {
    color: var(--primary-color);
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Blog post — scoped styles for templates/blog-post.php */

.blog-post-content {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-color, #333);
}

.blog-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 1rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: #666;
    font-size: 0.9rem;
}

.blog-post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.blog-post-meta i {
    color: var(--primary-color, #0aa0d6);
}

.blog-post-body h2 {
    margin-top: 2.25rem;
    margin-bottom: 1rem;
    font-size: 1.55rem;
    line-height: 1.3;
    color: var(--dark-color, #2c3e50);
    font-family: var(--font-headings, 'Montserrat'), sans-serif;
}

.blog-post-body h3 {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    color: var(--dark-color, #2c3e50);
}

.blog-post-body p {
    margin-bottom: 1.1rem;
}

.blog-post-body ul,
.blog-post-body ol {
    margin: 1rem 0 1.25rem 1.5rem;
    padding-left: 0.5rem;
}

.blog-post-body li {
    margin-bottom: 0.5rem;
}

.blog-post-body blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--primary-color, #0aa0d6);
    background: rgba(10, 160, 214, 0.05);
    font-style: italic;
    color: #444;
}

.blog-post-body blockquote cite {
    display: block;
    margin-top: 0.5rem;
    font-style: normal;
    font-size: 0.9rem;
    color: #666;
}

.blog-callout {
    margin: 1.75rem 0;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(10, 160, 214, 0.08), rgba(234, 48, 80, 0.05));
    border-left: 4px solid var(--accent-color, #ea3050);
    border-radius: 8px;
}

.blog-callout strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--dark-color, #2c3e50);
    font-size: 1.1rem;
}

.blog-callout p {
    margin: 0;
}

.blog-faq {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.blog-faq h2 {
    margin-bottom: 1.25rem;
}

.blog-faq-item {
    margin-bottom: 0.75rem;
    padding: 1rem 1.25rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: background 0.2s ease;
}

.blog-faq-item[open] {
    background: #fff;
    border-color: rgba(10, 160, 214, 0.3);
}

.blog-faq-item summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--dark-color, #2c3e50);
    list-style: none;
    position: relative;
    padding-right: 1.5rem;
}

.blog-faq-item summary::-webkit-details-marker {
    display: none;
}

.blog-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    color: var(--primary-color, #0aa0d6);
    transition: transform 0.2s ease;
}

.blog-faq-item[open] summary::after {
    content: '−';
}

.blog-faq-item > div {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    color: #444;
}

.blog-cta {
    margin-top: 2.5rem;
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, var(--primary-color, #0aa0d6), var(--secondary-color, #07649c));
    border-radius: 12px;
    color: #fff;
    text-align: center;
}

.blog-cta h2 {
    margin: 0 0 0.75rem;
    color: #fff;
    font-size: 1.5rem;
}

.blog-cta p {
    margin: 0 0 1.25rem;
    opacity: 0.95;
}

.blog-cta .cta-button {
    display: inline-block;
    background: var(--accent-color, #ea3050);
    color: #fff;
    padding: 0.85rem 1.75rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-cta .cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(234, 48, 80, 0.35);
}

.blog-related {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.blog-related-list {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: 1rem;
}

.blog-related-item {
    display: block;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.blog-related-item:hover {
    border-color: var(--primary-color, #0aa0d6);
    transform: translateY(-2px);
}

.blog-related-item strong {
    display: block;
    color: var(--dark-color, #2c3e50);
    margin-bottom: 0.4rem;
    font-size: 1.05rem;
}

.blog-related-item span {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .blog-post-content { font-size: 1rem; }
    .blog-post-body h2 { font-size: 1.35rem; }
    .blog-cta { padding: 1.5rem 1.1rem; }
}

/* =============================================================
   Share widget — modern share button + popover + toast
   Self-contained, uses site tokens from variables.css.
   ============================================================= */

.share-widget {
    position: relative;
    display: inline-block;
    --share-glass: rgba(255, 255, 255, 0.92);
    --share-border: rgba(137, 208, 245, 0.35);
    --share-shadow: 0 12px 32px rgba(31, 58, 95, 0.18), 0 2px 6px rgba(31, 58, 95, 0.08);
    --share-accent: var(--accent-color, #ff6f91);
    --share-accent2: var(--accent-secondary, #fa8a3c);
    --share-text: var(--text-color, #1a1a1a);
    --share-muted: rgba(26, 26, 26, 0.55);
}

.share-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--share-accent) 0%, var(--share-accent2) 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(255, 111, 145, 0.28), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
    transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, filter 200ms ease;
}
.share-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(255, 111, 145, 0.36), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    filter: saturate(1.05);
}
.share-trigger:active { transform: translateY(0); }
.share-trigger:focus-visible {
    outline: 2px solid var(--share-accent);
    outline-offset: 3px;
}
.share-trigger .share-icon { flex: 0 0 auto; opacity: 0.95; }

/* ---------- popover menu ---------- */
.share-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 12px);
    left: 0;
    min-width: 280px;
    padding: 14px;
    background: var(--share-glass);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border: 1px solid var(--share-border);
    border-radius: 18px;
    box-shadow: var(--share-shadow);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top left;
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
}
.share-menu.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.share-menu[hidden] { display: none; }

.share-menu-arrow {
    position: absolute;
    top: -7px;
    left: 22px;
    width: 14px;
    height: 14px;
    background: var(--share-glass);
    border-left: 1px solid var(--share-border);
    border-top: 1px solid var(--share-border);
    transform: rotate(45deg);
    border-top-left-radius: 3px;
}

.share-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--share-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px dashed rgba(137, 208, 245, 0.3);
    margin-bottom: 10px;
}
.share-close {
    display: inline-flex;
    padding: 4px;
    color: var(--share-muted);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}
.share-close:hover { background: rgba(0,0,0,0.05); color: var(--share-text); }

.share-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.share-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    min-height: 72px;
    background: transparent;
    color: var(--share-text);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background 180ms ease, transform 200ms ease, border-color 180ms ease, color 160ms ease;
}
.share-btn svg { transition: transform 220ms cubic-bezier(.2,.8,.2,1); }
.share-btn:hover {
    background: rgba(137, 208, 245, 0.12);
    border-color: var(--share-border);
    transform: translateY(-1px);
}
.share-btn:hover svg { transform: scale(1.08); }
.share-btn:focus-visible {
    outline: 2px solid var(--share-accent);
    outline-offset: 2px;
}

/* brand accents for each channel icon */
.share-whatsapp svg { color: #25D366; }
.share-x        svg { color: #0f1419; }
.share-facebook svg { color: #1877F2; }
.share-linkedin svg { color: #0A66C2; }
.share-telegram svg { color: #24A1DE; }
.share-email    svg { color: #6B7280; }
.share-copy     svg { color: var(--share-accent); }

/* copy button two-state icon */
.share-copy .done-icon { display: none; color: #28a745; }
.share-copy.is-copied .copy-icon { display: none; }
.share-copy.is-copied .done-icon { display: inline; }
.share-copy.is-copied .copy-label::after { content: 'ndı'; } /* "kopyala" -> "kopyalandı" */
.share-copy.is-copied .copy-label { color: #28a745; }

/* ---------- toast ---------- */
.share-toast {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, -4px);
    padding: 8px 14px;
    background: rgba(26, 26, 26, 0.92);
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
    z-index: 50;
    white-space: nowrap;
}
.share-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ---------- placement variants ---------- */
/* Inline near the hero/meta row, and a standalone block below article */
.blog-post-content .share-widget { margin: 0; }
.blog-post-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    margin: 32px 0;
    background: linear-gradient(135deg, rgba(137, 208, 245, 0.10), rgba(255, 111, 145, 0.06));
    border: 1px solid var(--share-border);
    border-radius: 14px;
}
.blog-post-share-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--share-text);
}
.blog-post-share-label small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--share-muted);
}

/* ---------- mobile ---------- */
@media (max-width: 560px) {
    /* Anchor to viewport edges so the popover never clips off-screen,
       regardless of where the trigger sits on the page. Menu is teleported
       to <body> on open via JS so ancestor transforms don't break fixed. */
    .share-menu {
        position: fixed;
        top: auto;
        bottom: 16px;
        left: 12px;
        right: 12px;
        min-width: 0;
        width: auto;
        max-width: 420px;
        margin: 0 auto;
        transform: translateY(8px) scale(0.98);
        transform-origin: bottom center;
        z-index: 9999;
    }
    .share-widget .share-menu.is-open {
        transform: translateY(0) scale(1);
    }
    .share-menu-arrow { display: none; } /* arrow doesn't apply when menu is bottom-anchored */
    .share-menu-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
    .share-btn { font-size: 10px; padding: 8px 4px; min-height: 64px; }
    .blog-post-share {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .share-trigger, .share-menu, .share-btn, .share-btn svg, .share-toast {
        transition: none !important;
        transform: none !important;
    }
}

/* ---------- dark hero variant (for use directly over hero-half) ---------- */
.hero-half .share-widget .share-trigger {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

@media (max-width: 1200px) {
    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.5rem;
    }

    .hero h1 {
        font-size: 3.2rem;
    }

    .hero-subtitle {
        font-size: 1.8rem;
    }

    .section-padding {
        padding: 100px 0;
    }

    .container {
        max-width: 1140px;
        padding: 0 30px;
    }

    .intro-image {
        max-width: 350px;
        height: 350px;
    }

    .image-frame {
        height: 400px;
    }
}

@media (max-width: 992px) {
    h1 {
        font-size: 2.8rem;
    }

    h2 {
        font-size: 2.3rem;
    }

    h3 {
        font-size: 1.8rem;
    }

    .hero {
        min-height: 600px;
    }

    .hero h1 {
        font-size: 2.8rem;
    }

    .hero-subtitle {
        font-size: 1.6rem;
    }

    .intro-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .intro-text {
        order: 2;
    }

    .intro-image-container {
        order: 1;
    }

    .intro-image {
        margin: 0 auto;
    }

    .why-us-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .why-us-image {
        order: 2;
        margin: 0 auto;
        max-width: 600px;
    }

    .contact-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .section-padding {
        padding: 80px 0;
    }

    .logo h1 {
        font-size: 1.6rem;
    }

    .footer-logo h3 {
        font-size: 1.4rem;
    }

    .service-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .feature-item {
        padding: 35px 25px;
    }

    .slider-title {
        font-size: 3.2rem;
    }

    .slider-subtitle {
        font-size: 1.8rem;
    }

    .slider-description {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2.1rem;
    }

    h3 {
        font-size: 1.6rem;
    }

    .container {
        padding: 0 25px;
    }

    .hero {
        min-height: 600px;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.4rem;
    }

    .hero-stats {
        gap: 20px;
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-text {
        font-size: 0.9rem;
    }

    .services-cta {
        padding: 35px;
        text-align: center;
        flex-direction: column;
    }

    .section-padding {
        padding: 70px 0;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .performance-grid {
        grid-template-columns: 1fr;
    }

    .stats-container {
        flex-direction: column;
        align-items: center;
    }

    .stat-card {
        width: 100%;
        max-width: 300px;
    }

    .form-control {
        font-size: 16px;
        padding: 12px 15px;
    }

    .submit-btn {
        width: 100%;
        padding: 16px;
        font-size: 16px;
    }

    .human-verification {
        padding: 15px;
    }

    .checkbox-container {
        padding-left: 30px;
    }

    .checkmark {
        width: 20px;
        height: 20px;
    }

    .checkbox-container .checkmark:after {
        left: 6px;
        top: 2px;
    }

    .logo h1 {
        font-size: 1.5rem;
    }

    .service-card-inner {
        padding: 30px 25px;
    }

    .slider-title {
        font-size: 2.8rem;
    }

    .slider-subtitle {
        font-size: 1.5rem;
    }

    .slider-description {
        font-size: 1rem;
    }

    .slider-buttons {
        flex-direction: column;
        align-items: center;
    }

    .slider-content.left .slider-buttons,
    .slider-content.right .slider-buttons {
        align-items: center;
    }

    .slider-content.left,
    .slider-content.right {
        text-align: center;
        align-items: center;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Event Page Mobile Overrides */
    .event-page-main .container {
        padding: 0 15px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .event-page-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .event-page-content {
        padding: 15px !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .event-page-sidebar {
        position: static !important;
        order: 1 !important;
    }

    .event-article-header {
        position: static !important;
        margin-bottom: 15px !important;
    }

    .event-article-header h2 {
        font-size: 1.3rem !important;
        position: static !important;
    }

    .event-article-subheadline {
        font-size: 0.95rem !important;
    }

    .event-article-intro {
        font-size: 0.9rem !important;
        text-align: left !important;
    }

    .services-list {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .service-item {
        padding: 15px !important;
    }

    .service-item h4 {
        font-size: 1.05rem !important;
    }

    .service-item p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    .event-meta-tags-wrapper {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px !important;
        margin: 0 !important;
    }

    .event-meta-tags {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    .meta-tag {
        padding: 8px 15px !important;
        font-size: 0.85rem !important;
        display: inline-block !important;
        width: auto !important;
        text-align: center !important;
    }

    .event-article-footer {
        padding: 15px 0 !important;
    }

    .carousel-nav button {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.9rem !important;
    }

    .carousel-nav {
        padding: 0 8px !important;
    }

    .carousel-dots {
        padding: 10px !important;
        gap: 6px !important;
    }

    .carousel-dot {
        width: 8px !important;
        height: 8px !important;
    }

    /* Video Play Overlay Mobile */
    .video-play-overlay {
        width: 60px !important;
        height: 60px !important;
    }

    .video-play-overlay i {
        font-size: 1.4rem !important;
        margin-left: 3px !important;
    }

    .event-cta-section {
        padding: 15px !important;
    }

    .reservation-callout {
        padding: 25px 15px 30px 15px !important;
    }

    .educational-values-box ul {
        grid-template-columns: 1fr !important;
    }

    /* Sidebar Mobile Overrides */
    .sidebar-widget {
        padding: 15px !important;
    }

    .sidebar-title {
        font-size: 1rem !important;
    }

    .sidebar-list a {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
        word-break: break-word !important;
    }

    .sidebar-list a i {
        min-width: 16px !important;
    }

    .sidebar-cta .cta-button,
    .event-page-sidebar .cta-button {
        padding: 10px 15px !important;
        font-size: 0.9rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .sidebar-cta p {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 576px) {
    h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    h3 {
        font-size: 1.4rem;
    }

    .section-icon {
        width: 70px;
        height: 70px;
        line-height: 70px;
        font-size: 1.8rem;
    }

    .hero {
        min-height: 550px;
    }

    .hero h1 {
        font-size: 2.2rem;
        margin-bottom: 15px;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .hero-buttons .cta-button {
        display: block;
        width: 100%;
        margin: 0 0 15px 0;
    }

    .hero-stats {
        flex-direction: column;
        gap: 25px;
    }

    .feature-item {
        padding: 25px 20px;
    }

    .form-container,
    .info-box {
        padding: 25px 20px;
    }

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

    .faq-item.active .faq-answer {
        padding: 0 20px 20px 70px;
    }

    .faq-question h3 {
        font-size: 1.1rem;
    }

    .section-padding {
        padding: 60px 0;
    }

    .back-to-top {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 20px;
        font-size: 1.1rem;
    }

    .logo h1 {
        font-size: 1.4rem;
    }

    .why-us-item {
        flex-direction: column;
    }

    .why-us-number {
        margin-bottom: 15px;
        margin-right: 0;
    }

    .form-header,
    .contact-info-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .form-icon,
    .contact-info-icon {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .form-header h3::after,
    .contact-info-header h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .contact-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .contact-icon {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .contact-details h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .slider-title {
        font-size: 2.5rem;
    }

    .slider-subtitle {
        font-size: 1.3rem;
    }

    .slider-description {
        font-size: 0.95rem;
    }

    .service-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 375px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.7rem;
    }

    .logo h1 {
        font-size: 1.3rem;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .slider-title {
        font-size: 2.2rem;
    }

    .slider-subtitle {
        font-size: 1.2rem;
    }
}
/* ================================================================
   Yıldız Tozu — Evolve v2: cinematic motion system.
   Pairs with assets/js/evolve.js.
   Custom cubic-bezier tokens (declared in JS, mirrored here) —
   defaults like ease-in-out are forbidden per the motion brief.
   ================================================================ */

:root {
    --fx-rise: cubic-bezier(0.16, 1.08, 0.38, 1.00);
    --fx-flee: cubic-bezier(0.64, 0, 0.78, 0.12);
    --fx-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
    --fx-drift: cubic-bezier(0.45, 0.05, 0.55, 0.95);
    --fx-spring: cubic-bezier(0.22, 1.2, 0.36, 1);
    --fx-dur-rise: 720ms;
    --fx-dur-flee: 280ms;
}

/* ────────────────────────────────────────────────────────────
   1. StarDust canvas — positioned behind hero content
   ──────────────────────────────────────────────────────────── */
.fx-stardust {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.95;
}

#full-slider,
.hero-half,
.hero { position: relative; }

#full-slider .slider-outer,
#full-slider .slider-container,
.hero-half-content,
.hero-half-overlay { position: relative; z-index: 2; }

/* ────────────────────────────────────────────────────────────
   2. Reveal orchestra — roles map to axis and curve
   ──────────────────────────────────────────────────────────── */
.fx-reveal {
    opacity: 0;
    will-change: opacity, transform, filter;
    transition:
        opacity var(--fx-dur-rise) var(--fx-rise),
        transform var(--fx-dur-rise) var(--fx-rise),
        filter var(--fx-dur-rise) var(--fx-rise);
    transition-delay: var(--fx-reveal-delay, 0ms);
}

/* Roles: title drops in a bit more, body slides up gently,
   cards rise with a slight tilt, media scales in with blur clearing. */
.fx-reveal[data-fx-role="title"] {
    transform: translate3d(0, calc(var(--fx-dist, 26px)), 0);
    filter: blur(10px);
}

.fx-reveal[data-fx-role="lede"] {
    transform: translate3d(0, calc(var(--fx-dist, 20px)), 0);
    filter: blur(6px);
}

.fx-reveal[data-fx-role="card"] {
    transform: translate3d(0, calc(var(--fx-dist, 32px)), 0) scale(0.97);
}

.fx-reveal[data-fx-role="body"] {
    transform: translate3d(0, calc(var(--fx-dist, 14px)), 0);
}

.fx-reveal[data-fx-role="media"] {
    transform: scale(1.06);
    filter: blur(12px) saturate(1.2);
}

.fx-revealed {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    filter: none !important;
}

/* Stagger delay (set by JS) */
.fx-reveal { --fx-reveal-delay: 0ms; }

/* ────────────────────────────────────────────────────────────
   3. Magnetic CTAs — translate via custom props, glow aura
   ──────────────────────────────────────────────────────────── */
.fx-magnetic {
    position: relative;
    transform: translate3d(var(--fx-mx, 0), var(--fx-my, 0), 0);
    transition: transform 120ms var(--fx-spring), box-shadow 300ms var(--fx-drift);
    will-change: transform;
}

.fx-magnetic::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: radial-gradient(
        160px 120px at var(--fx-gx, 50%) var(--fx-gy, 50%),
        rgba(255, 250, 205, 0.55),
        rgba(137, 208, 245, 0.35) 40%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 280ms var(--fx-drift);
    pointer-events: none;
    z-index: -1;
    filter: blur(14px);
}

.fx-magnetic:hover::before { opacity: 1; }

.fx-magnetic:hover {
    box-shadow:
        0 10px 30px rgba(7, 100, 156, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 0 28px rgba(137, 208, 245, 0.35);
}

/* ────────────────────────────────────────────────────────────
   4. 3D perspective tilt — cards respond to cursor
   ──────────────────────────────────────────────────────────── */
.fx-tilt {
    transform-style: preserve-3d;
    transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg));
    transition: transform 280ms var(--fx-spring), box-shadow 280ms var(--fx-drift);
    will-change: transform;
}

.fx-tilt::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
        320px 220px at var(--fx-px, 50%) var(--fx-py, 50%),
        rgba(255, 255, 255, 0.18),
        rgba(255, 255, 255, 0) 60%
    );
    opacity: 0;
    transition: opacity 260ms var(--fx-drift);
    z-index: 1;
    mix-blend-mode: overlay;
}

.fx-tilt:hover::after { opacity: 1; }

/* ────────────────────────────────────────────────────────────
   5. Spotlight cursor
   ──────────────────────────────────────────────────────────── */
.fx-spotlight {
    position: fixed;
    top: 0; left: 0;
    width: 360px;
    height: 360px;
    pointer-events: none;
    z-index: 2147483646;
    background: radial-gradient(
        closest-side,
        rgba(255, 250, 205, 0.18),
        rgba(137, 208, 245, 0.10) 45%,
        transparent 72%
    );
    mix-blend-mode: screen;
    filter: blur(8px);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 260ms var(--fx-drift), width 360ms var(--fx-spring), height 360ms var(--fx-spring);
}

html.fx-ready:not(.fx-touch):not(.fx-reduced) .fx-spotlight { opacity: 1; }

.fx-spotlight-hover {
    width: 520px;
    height: 520px;
}

/* ────────────────────────────────────────────────────────────
   3b. Nav magnetic + dropdown morph
   ──────────────────────────────────────────────────────────── */
.nav-menu > li > a.fx-magnetic::before {
    background: radial-gradient(
        80px 48px at var(--fx-gx, 50%) var(--fx-gy, 50%),
        rgba(255, 250, 205, 0.35),
        rgba(137, 208, 245, 0.18) 55%,
        transparent 78%
    );
    filter: blur(8px);
    inset: -6px -10px;
}

.nav-menu > li > a.fx-magnetic:hover {
    box-shadow: none;
}

/* Dropdown morph — override default-ease with our cubic-bezier tokens */
.dropdown-menu {
    transform: translateX(-50%) translateY(12px) scale(0.96) !important;
    transition:
        opacity 280ms var(--fx-rise),
        transform 380ms var(--fx-rise),
        visibility 280ms var(--fx-rise) !important;
    transform-origin: top center;
}

.nav-menu li.has-dropdown:hover .dropdown-menu,
.nav-menu li.has-dropdown:focus-within .dropdown-menu {
    transform: translateX(-50%) translateY(0) scale(1) !important;
}

.dropdown-menu li {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
    transition:
        opacity 320ms var(--fx-rise),
        transform 420ms var(--fx-rise);
    transition-delay: 0ms;
}

.nav-menu li.has-dropdown:hover .dropdown-menu li,
.nav-menu li.has-dropdown:focus-within .dropdown-menu li {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Staggered delays — up to 8 items */
.nav-menu li.has-dropdown:hover .dropdown-menu li:nth-child(1),
.nav-menu li.has-dropdown:focus-within .dropdown-menu li:nth-child(1) { transition-delay: 60ms; }
.nav-menu li.has-dropdown:hover .dropdown-menu li:nth-child(2),
.nav-menu li.has-dropdown:focus-within .dropdown-menu li:nth-child(2) { transition-delay: 100ms; }
.nav-menu li.has-dropdown:hover .dropdown-menu li:nth-child(3),
.nav-menu li.has-dropdown:focus-within .dropdown-menu li:nth-child(3) { transition-delay: 140ms; }
.nav-menu li.has-dropdown:hover .dropdown-menu li:nth-child(4),
.nav-menu li.has-dropdown:focus-within .dropdown-menu li:nth-child(4) { transition-delay: 180ms; }
.nav-menu li.has-dropdown:hover .dropdown-menu li:nth-child(5),
.nav-menu li.has-dropdown:focus-within .dropdown-menu li:nth-child(5) { transition-delay: 220ms; }
.nav-menu li.has-dropdown:hover .dropdown-menu li:nth-child(6),
.nav-menu li.has-dropdown:focus-within .dropdown-menu li:nth-child(6) { transition-delay: 260ms; }
.nav-menu li.has-dropdown:hover .dropdown-menu li:nth-child(7),
.nav-menu li.has-dropdown:focus-within .dropdown-menu li:nth-child(7) { transition-delay: 300ms; }
.nav-menu li.has-dropdown:hover .dropdown-menu li:nth-child(8),
.nav-menu li.has-dropdown:focus-within .dropdown-menu li:nth-child(8) { transition-delay: 340ms; }

/* Mobile dropdown-open class — same morph */
@media (max-width: 768px) {
    .dropdown-menu {
        transform: none !important;
    }
    .dropdown-menu li {
        opacity: 1;
        transform: none;
    }
}

/* ────────────────────────────────────────────────────────────
   4b. Kinetic headings — char-split mask reveal
   ──────────────────────────────────────────────────────────── */
.fx-kinetic {
    display: block;
}

.fx-kinetic-word {
    display: inline-block;
    white-space: nowrap;
}

.fx-kinetic-char {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 0.6em, 0) rotate(4deg);
    filter: blur(6px);
    transition:
        opacity 540ms var(--fx-rise),
        transform 720ms var(--fx-rise),
        filter 520ms var(--fx-rise);
    transition-delay: calc(var(--fx-char-i, 0) * 22ms);
    will-change: opacity, transform, filter;
}

.fx-kinetic.fx-kinetic-in .fx-kinetic-char {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
    filter: none;
}

/* ────────────────────────────────────────────────────────────
   5b. Hero parallax — cursor-tracked depth layers
   ──────────────────────────────────────────────────────────── */
.fx-parallax-host {
    --fx-parallax-x: 0px;
    --fx-parallax-y: 0px;
    --fx-parallax-cx: 0px;
    --fx-parallax-cy: 0px;
    overflow: hidden;
}

.hero-half.fx-parallax-host {
    background-position: calc(50% + var(--fx-parallax-x)) calc(50% + var(--fx-parallax-y)) !important;
    background-size: cover;
    transition: background-position 200ms var(--fx-drift);
}

.fx-parallax-host .slider-item {
    background-position: calc(50% + var(--fx-parallax-x)) calc(50% + var(--fx-parallax-y)) !important;
    background-size: cover;
    transition: background-position 200ms var(--fx-drift);
}

.fx-parallax-host .slider-content,
.fx-parallax-host .hero-half-content {
    transform: translate3d(var(--fx-parallax-cx), var(--fx-parallax-cy), 0);
    transition: transform 220ms var(--fx-spring);
}

/* ────────────────────────────────────────────────────────────
   6. Progress orb (top-right, with comet trail)
   ──────────────────────────────────────────────────────────── */
.fx-progress-orb {
    position: fixed;
    top: 18px;
    right: 18px;
    width: 54px;
    height: 54px;
    z-index: 2147483645;
    opacity: 0;
    transform: scale(0.85) translate3d(0, -10px, 0);
    transition: opacity 360ms var(--fx-rise), transform 360ms var(--fx-rise);
    pointer-events: none;
}

.fx-progress-orb.fx-orb-visible {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
}

.fx-progress-orb svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.fx-orb-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 2;
}

.fx-orb-fill {
    fill: none;
    stroke: url(#fx-orb-grad);
    stroke: rgba(255, 250, 205, 0.95);
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke-dashoffset 300ms var(--fx-drift);
    filter: drop-shadow(0 0 6px rgba(255, 250, 205, 0.8));
}

.fx-orb-dot {
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, rgba(255, 250, 205, 0.65));
    transform: translate(-50%, -50%);
    box-shadow: 0 0 18px rgba(255, 250, 205, 0.8);
    animation: fx-orb-pulse 2.4s var(--fx-drift) infinite;
}

.fx-orb-trail {
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 6px;
    transform: translate(-50%, -50%) rotate(calc(var(--fx-orb-dir, 1) * 26deg));
    background: linear-gradient(
        to right,
        rgba(255, 250, 205, 0),
        rgba(255, 250, 205, 0.35) 50%,
        rgba(255, 250, 205, 0)
    );
    filter: blur(2px);
    opacity: 0.55;
    pointer-events: none;
}

@keyframes fx-orb-pulse {
    0%, 100% { box-shadow: 0 0 16px rgba(255, 250, 205, 0.7); }
    50%      { box-shadow: 0 0 26px rgba(255, 250, 205, 1); }
}

/* ────────────────────────────────────────────────────────────
   7. Page transition — curtain fallback + View Transitions
   ──────────────────────────────────────────────────────────── */
.fx-curtain {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(7, 100, 156, 0.0) 0%, rgba(10, 10, 10, 0.0) 100%);
    pointer-events: none;
    opacity: 0;
    z-index: 2147483647;
    transition: opacity 340ms var(--fx-flee), background 340ms var(--fx-flee);
}

body.fx-leaving .fx-curtain {
    opacity: 1;
    background: radial-gradient(ellipse at center, rgba(7, 100, 156, 0.55) 0%, rgba(10, 10, 10, 0.85) 100%);
    pointer-events: auto;
}

body.fx-leaving main,
body.fx-leaving header,
body.fx-leaving footer {
    transition: opacity 280ms var(--fx-flee), transform 280ms var(--fx-flee), filter 280ms var(--fx-flee);
    opacity: 0.2;
    transform: scale(0.985);
    filter: blur(3px);
}

body.fx-entered main { animation: fx-entry 720ms var(--fx-rise) both; }

@keyframes fx-entry {
    from { opacity: 0; transform: scale(0.995); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}

/* Native cross-document view transitions (Chrome/Edge). Smooth morph
   between pages; shared-element names set via data-vt-name. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 520ms;
    animation-timing-function: var(--fx-rise);
}

::view-transition-old(root) { animation-name: fx-vt-out; }
::view-transition-new(root) { animation-name: fx-vt-in; }

/* Shared-element morph: card image ↔ detail hero (blog, performance, service) */
::view-transition-group(blog-img-1),
::view-transition-group(blog-img-2),
::view-transition-group(blog-img-3),
::view-transition-group(blog-img-4),
::view-transition-group(blog-img-5),
::view-transition-group(blog-img-6),
::view-transition-group(blog-img-7),
::view-transition-group(blog-img-8),
::view-transition-group(blog-img-9),
::view-transition-group(blog-img-10) {
    animation-duration: 620ms;
    animation-timing-function: var(--fx-rise);
}

[style*="view-transition-name"] {
    /* opt-in elements morph in place; transition-name is set inline */
}

@keyframes fx-vt-out {
    to { opacity: 0; transform: scale(0.995); filter: blur(4px); }
}

@keyframes fx-vt-in {
    from { opacity: 0; transform: scale(0.995); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}

/* ────────────────────────────────────────────────────────────
   8. Accessibility — prefers-reduced-motion strips motion
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fx-reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
    .fx-kinetic-char { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
    .fx-magnetic, .fx-tilt { transform: none !important; transition: none !important; }
    .fx-magnetic::before, .fx-tilt::after { display: none !important; }
    .fx-spotlight, .fx-progress-orb, .fx-curtain, .fx-stardust { display: none !important; }
    body.fx-leaving main, body.fx-leaving header, body.fx-leaving footer {
        transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
    }
    body.fx-entered main { animation: none !important; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* Touch — strip cursor / magnetic / tilt, keep reveal + curtain */
html.fx-touch .fx-spotlight,
html.fx-touch .fx-tilt::after { display: none !important; }
html.fx-touch .fx-tilt { transform: none !important; }
html.fx-touch .fx-magnetic { transform: none !important; }

/* Mobile — hide the reading-progress orb so it doesn't collide with the
   hamburger toggle at top-right. Desktop keeps it as a subtle scroll cue. */
@media (max-width: 768px) {
    .fx-progress-orb { display: none !important; }
}

/* Ensure reveal parents don't clip revealing children — but keep
   hero-half clipped so its skewed section::before strip stays inside. */
main, .container { overflow: visible; }
section:not(.hero-half):not(.fx-parallax-host) { overflow: visible; }

/* The global section::before adds a white skewed strip at the top of
   every section (intentional kesişim noktası). On .hero-half pages
   the strip leaks above the hero and creates a diagonal cut on
   transparent-header sub-pages — suppress it on hero-half. */
.hero-half::before { display: none !important; }