/* ============================================================
   MaaNaa - Main Stylesheet
   Luxury Real Estate Developer | RAM GMY A.S.
   www.maanaa.com.tr

   Design: Modern, minimal, elegant
   Grid: Bootstrap 5.3.3 (loaded via CDN)
   Icons: Font Awesome 6 (loaded via CDN)
   ============================================================ */

/* ==========================================================
   0. CSS CUSTOM PROPERTIES
   ========================================================== */
:root {
    /* Brand Colors — Ninurta-inspired Luxury Palette */
    --manaa-navy:             #2c3830;
    --manaa-navy-light:       #4a5e50;
    --manaa-crimson:          #a08828;
    --manaa-crimson-light:    #c4a830;
    --manaa-taupe:            #a08828;
    --manaa-taupe-light:      #c4a830;
    --manaa-blue:             #8a7420;
    --manaa-blue-light:       #b09a3a;
    --manaa-terracotta:       #5a7060;
    --manaa-terracotta-light: #7a9070;
    --manaa-teal:             #6b8f6b;
    --manaa-teal-light:       #8aaa8a;
    --manaa-orange:           #c8a028;
    --manaa-orange-light:     #d4b040;
    --manaa-slate:            #4a5a50;
    --manaa-slate-light:      #7a8a80;

    /* Neutral */
    --manaa-white: #ffffff;
    --manaa-dark:  #2c3830;
    --manaa-text:  #3a4840;
    --manaa-cream: #f5f3ee;

    /* Gradient — forest green to antique gold */
    --manaa-gradient: linear-gradient(135deg, #2c3830, #a08828, #e8e0c8, #8a7420, #a08828, #6b8f6b, #c8a028, #4a5e50);
    --manaa-gradient-wide: linear-gradient(90deg, #2c3830, #a08828, #e8e0c8, #8a7420, #a08828, #6b8f6b, #c8a028, #4a5e50);

    /* Derived (rgba) */
    --manaa-taupe-rgb: 160, 136, 40;
    --manaa-dark-rgb: 44, 56, 48;
    --manaa-cream-rgb: 245, 243, 238;

    /* Typography */
    --font-family-base:  'Montserrat', Helvetica, Arial, sans-serif;
    --font-family-light: 'Montserrat', Helvetica, Arial, sans-serif;
    --font-family-bold:  'Montserrat', Helvetica, Arial, sans-serif;
    --font-light:        'Montserrat', Helvetica, Arial, sans-serif;
    --font-regular:      'Montserrat', Helvetica, Arial, sans-serif;
    --font-bold:         'Montserrat', Helvetica, Arial, sans-serif;

    /* Spacing */
    --section-py-mobile: 60px;
    --section-py-tablet: 80px;
    --section-py-desktop: 120px;

    /* Navbar */
    --nav-height: 80px;
    --nav-height-mobile: 60px;

    /* Transitions */
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-menu: 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);

    /* Z-Index Scale */
    --z-menu-overlay: 1100;
    --z-navbar: 1000;
    --z-modal: 1050;
}


/* ==========================================================
   1. FONT DECLARATIONS — Montserrat (Google Fonts)
   ========================================================== */
/* Montserrat is loaded via Google Fonts CDN in functions.php */


/* ==========================================================
   2. BASE RESET & TYPOGRAPHY
   ========================================================== */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-base);
    font-weight: 400;
    color: var(--manaa-text);
    background-color: var(--manaa-white);
    line-height: 1.7;
    font-size: 15px;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

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

a {
    color: var(--manaa-dark);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--manaa-taupe);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-bold);
    font-weight: 700;
    color: var(--manaa-dark);
    letter-spacing: 0.05em;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0.5em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.15rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

ul, ol {
    padding-left: 1.25rem;
}

.section-title {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-family: var(--font-family-bold);
    font-size: 0.875rem;
    color: var(--manaa-dark);
    margin-bottom: 2rem;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--manaa-taupe);
    margin-top: 12px;
}

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

.section-title--center::after {
    margin-left: auto;
    margin-right: auto;
}

.section-title--white {
    color: var(--manaa-white);
}

.section-title--white::after {
    background: var(--manaa-white);
}

.section-subtitle {
    font-family: var(--font-family-light);
    font-size: 1rem;
    color: var(--manaa-text);
    max-width: 580px;
    line-height: 1.8;
}

.section-subtitle--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


/* ==========================================================
   3. UTILITY CLASSES
   ========================================================== */
.font-ultralight { font-family: 'Montserrat', sans-serif; font-weight: 200; }
.font-light      { font-family: 'Montserrat', sans-serif; font-weight: 300; }
.font-regular    { font-family: 'Montserrat', sans-serif; font-weight: 400; }
.font-medium     { font-family: 'Montserrat', sans-serif; font-weight: 500; }
.font-bold       { font-family: 'Montserrat', sans-serif; font-weight: 700; }
.font-heavy      { font-family: 'Montserrat', sans-serif; font-weight: 800; }
.font-black      { font-family: 'Montserrat', sans-serif; font-weight: 900; }

.text-taupe   { color: var(--manaa-taupe) !important; }
.text-dark    { color: var(--manaa-dark) !important; }
.text-cream   { color: var(--manaa-cream) !important; }
.text-white   { color: var(--manaa-white) !important; }
.text-teal    { color: var(--manaa-teal) !important; }
.text-blue    { color: var(--manaa-blue) !important; }
.text-terracotta { color: var(--manaa-terracotta) !important; }
.text-body    { color: var(--manaa-text) !important; }

.bg-taupe     { background-color: var(--manaa-taupe) !important; }
.bg-cream     { background-color: var(--manaa-cream) !important; }
.bg-dark      { background-color: var(--manaa-dark) !important; }
.bg-white     { background-color: var(--manaa-white) !important; }

.section-padding {
    padding-top: var(--section-py-mobile);
    padding-bottom: var(--section-py-mobile);
}

.ls-wide      { letter-spacing: 0.1em; }
.ls-wider     { letter-spacing: 0.15em; }
.ls-widest    { letter-spacing: 0.2em; }
.text-upper   { text-transform: uppercase; }

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

.overlay {
    position: relative;
}

.overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.overlay--dark::before {
    background: rgba(var(--manaa-dark-rgb), 0.5);
}

.overlay--light::before {
    background: rgba(var(--manaa-cream-rgb), 0.3);
}

.overlay > * {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   4. BUTTONS
   ========================================================== */
.btn-manaa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-bold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 14px 32px;
    border: 1px solid var(--manaa-dark);
    background: transparent;
    color: var(--manaa-dark);
    cursor: pointer;
    transition: all var(--transition-base);
    line-height: 1;
}

.btn-manaa:hover {
    background: var(--manaa-dark);
    color: var(--manaa-white);
}

.btn-manaa i {
    font-size: 0.65rem;
    transition: transform var(--transition-base);
}

.btn-manaa:hover i {
    transform: translateX(4px);
}

.btn-manaa--filled {
    background: var(--manaa-dark);
    color: var(--manaa-white);
}

.btn-manaa--filled:hover {
    background: var(--manaa-taupe);
    border-color: var(--manaa-taupe);
    color: var(--manaa-white);
}

.btn-manaa--white {
    border-color: var(--manaa-white);
    color: var(--manaa-white);
}

.btn-manaa--white:hover {
    background: var(--manaa-white);
    color: var(--manaa-dark);
}

.btn-manaa--beige {
    border-color: var(--manaa-taupe);
    color: var(--manaa-taupe);
}

.btn-manaa--beige:hover {
    background: var(--manaa-taupe);
    color: var(--manaa-white);
}

.btn-manaa--sm {
    padding: 10px 20px;
    font-size: 0.7rem;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-bold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--manaa-dark);
    transition: all var(--transition-base);
}

.link-arrow i {
    font-size: 0.65rem;
    transition: transform var(--transition-base);
}

.link-arrow:hover {
    color: var(--manaa-taupe);
}

.link-arrow:hover i {
    transform: translateX(4px);
}

.link-arrow--white {
    color: var(--manaa-white);
}

.link-arrow--white:hover {
    color: var(--manaa-taupe);
}


/* ==========================================================
   5. NAVBAR
   ========================================================== */
/* ── Navbar — Modern Sticky ────────────────────────────────── */
.manaa-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-navbar);
    height: 88px;
    background: rgba(10, 15, 20, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.4s ease,
                border-color 0.4s ease;
}

/* On front page: hidden until scroll */
.home .manaa-navbar {
    transform: translateY(-100%);
}

/* Show navbar when scrolled */
.home .manaa-navbar.scrolled {
    transform: translateY(0);
}

@media (max-width: 767px) {
    .manaa-navbar { height: 75px; }
}
@media (max-width: 575px) {
    .manaa-navbar { height: 70px; }
}

/* On inner pages: always visible */
body:not(.home) .manaa-navbar {
    transform: translateY(0);
}

/* ── Transparent Mode (Single Project) ── */
.manaa-navbar--transparent {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
    transform: translateY(0); /* always visible on transparent pages */
}

/* Transparent → scrolled: solid white/blur */
.manaa-navbar--transparent.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* Swap logos on scroll (transparent mode) */
.manaa-navbar--transparent.scrolled .manaa-navbar__logo-light {
    display: none;
}

.manaa-navbar--transparent.scrolled .manaa-navbar__logo-dark {
    display: block;
}

/* Hamburger lines → dark on scroll */
.manaa-navbar--transparent.scrolled .manaa-hamburger__line {
    background: var(--manaa-dark);
}

.manaa-navbar--transparent.scrolled .manaa-hamburger:hover .manaa-hamburger__line {
    background: var(--manaa-taupe);
}

/* Right side elements → dark on scroll */
.manaa-navbar--transparent.scrolled .manaa-navbar__katalog {
    color: var(--manaa-text);
    border-color: rgba(0, 0, 0, 0.12);
}

.manaa-navbar--transparent.scrolled .manaa-navbar__katalog:hover {
    color: var(--manaa-taupe);
    border-color: var(--manaa-taupe);
}

.manaa-navbar--transparent.scrolled .manaa-navbar__lang {
    color: var(--manaa-text);
    border-color: rgba(0, 0, 0, 0.15);
}

.manaa-navbar--transparent.scrolled .manaa-navbar__lang:hover {
    color: var(--manaa-dark);
    border-color: rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.03);
}

.manaa-navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 32px;
}

.manaa-navbar__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.manaa-navbar__logo img {
    max-height: 40px;
    width: auto;
}

/* Light logo visible, dark hidden */
.manaa-navbar__logo-light {
    display: block;
}

.manaa-navbar__logo-dark {
    display: none;
}

/* Right side */
.manaa-navbar__right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.manaa-navbar__katalog {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.manaa-navbar__katalog:hover {
    color: var(--manaa-taupe);
    border-color: var(--manaa-taupe);
    background: rgba(160, 136, 40, 0.08);
}

.manaa-navbar__lang {
    font-family: var(--font-family-bold);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: all 0.3s ease;
}

.manaa-navbar__lang:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

/* Hamburger in navbar */
.manaa-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    gap: 6px;
    z-index: calc(var(--z-navbar) + 1);
}

.manaa-hamburger__line {
    display: block;
    width: 24px;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.7);
    transition: all var(--transition-base);
    transform-origin: center;
}

.manaa-hamburger__line:nth-child(2) {
    width: 18px;
}

.manaa-hamburger:hover .manaa-hamburger__line {
    background: #fff;
}

.manaa-hamburger:hover .manaa-hamburger__line:nth-child(2) {
    width: 24px;
}

/* Hamburger active → X */
.manaa-hamburger.is-active .manaa-hamburger__line:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}

.manaa-hamburger.is-active .manaa-hamburger__line:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.manaa-hamburger.is-active .manaa-hamburger__line:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}

/* Hide navbar hamburger when menu is open (overlay has its own close btn) */
.menu-open .manaa-hamburger {
    display: none;
}


/* ==========================================================
   6. FULLSCREEN MENU OVERLAY
   ========================================================== */
/* ── Menu Overlay — Fullscreen Cinematic ───────────────────── */
.manaa-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 15, 20, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--z-menu-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.manaa-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* Close button */
.manaa-menu-overlay__close {
    position: fixed;
    top: 28px;
    right: 32px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.manaa-menu-overlay__close span {
    position: absolute;
    width: 18px;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.7);
    transition: background 0.3s ease;
}

.manaa-menu-overlay__close span:first-child {
    transform: rotate(45deg);
}

.manaa-menu-overlay__close span:last-child {
    transform: rotate(-45deg);
}

.manaa-menu-overlay__close:hover {
    border-color: var(--manaa-taupe);
    background: rgba(160, 136, 40, 0.1);
}

.manaa-menu-overlay__close:hover span {
    background: var(--manaa-taupe);
}

/* Inner layout: two columns */
.manaa-menu-overlay__inner {
    display: flex;
    min-height: 100vh;
}

/* Navigation */
.manaa-menu-overlay__nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 28px 80px 60px;
    max-width: 700px;
}

/* Section grouping */
.manaa-menu-overlay__section {
    margin-bottom: 16px;
}

.manaa-menu-overlay__title {
    font-family: var(--font-family-light);
    font-size: 0.55rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Project groups */
.manaa-menu-overlay__group {
    margin-bottom: 20px;
}

.manaa-menu-overlay__label {
    display: block;
    font-family: var(--font-family-light);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #fff;
    font-weight: 700;
    margin-bottom: 10px;
}

.manaa-menu-overlay__group ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px 32px;
}

.manaa-menu-overlay__group ul li a {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-family-light);
    font-size: 0.95rem;
    color: #fff;
    text-decoration: none;
    padding: 6px 0;
    transition: all 0.3s ease;
    position: relative;
    white-space: nowrap;
}

.manaa-menu-overlay__group ul li a::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 1px;
    background: var(--manaa-taupe);
    transition: width 0.3s ease;
    flex-shrink: 0;
}

.manaa-menu-overlay__group ul li a:hover {
    color: #fff;
    padding-left: 4px;
}

.manaa-menu-overlay__group ul li a:hover::before {
    width: 16px;
}

.manaa-menu-overlay__location {
    font-family: var(--font-family-light);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.05em;
}

.manaa-menu-overlay__group ul li a:hover .manaa-menu-overlay__location {
    color: var(--manaa-taupe);
}

/* Page links — big & bold */
.manaa-menu-overlay__pages {
    list-style: none;
    padding: 0;
    margin: 0;
}

.manaa-menu-overlay__pages li {
    overflow: hidden;
}

.manaa-menu-overlay__pages li a {
    display: block;
    font-family: var(--font-family-bold);
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 10px 0;
    letter-spacing: 0.02em;
    transition: all 0.4s ease;
    position: relative;
}

.manaa-menu-overlay__pages li a::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--manaa-taupe);
    transition: width 0.4s ease;
}

.manaa-menu-overlay__pages li a:hover {
    color: #fff;
    transform: translateX(12px);
}

.manaa-menu-overlay__pages li a:hover::after {
    width: 40px;
}

/* Stagger animation for menu items */
.manaa-menu-overlay.is-open .manaa-menu-overlay__pages li {
    animation: menuSlideIn 0.5s ease forwards;
    opacity: 0;
}

.manaa-menu-overlay.is-open .manaa-menu-overlay__pages li:nth-child(1) { animation-delay: 0.1s; }
.manaa-menu-overlay.is-open .manaa-menu-overlay__pages li:nth-child(2) { animation-delay: 0.15s; }
.manaa-menu-overlay.is-open .manaa-menu-overlay__pages li:nth-child(3) { animation-delay: 0.2s; }
.manaa-menu-overlay.is-open .manaa-menu-overlay__pages li:nth-child(4) { animation-delay: 0.25s; }
.manaa-menu-overlay.is-open .manaa-menu-overlay__pages li:nth-child(5) { animation-delay: 0.3s; }

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

/* Social links */
.manaa-menu-overlay__social {
    display: flex;
    gap: 20px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.manaa-menu-overlay__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.manaa-menu-overlay__social a:hover {
    color: var(--manaa-taupe);
    border-color: var(--manaa-taupe);
    background: rgba(160, 136, 40, 0.08);
}

/* Right: Featured project panel — hidden, site shows through with blur */
.manaa-menu-overlay__featured {
    display: none;
}

.manaa-menu-overlay__featured-card {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}

.manaa-menu-overlay__featured-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 8s ease;
}

.manaa-menu-overlay__featured-card:hover .manaa-menu-overlay__featured-img {
    transform: scale(1.05);
}

.manaa-menu-overlay__featured-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 50px 40px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
}

.manaa-menu-overlay__featured-number {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 1.6rem;
    color: #fff;
    letter-spacing: 0.05em;
}

.manaa-menu-overlay__featured-location {
    display: block;
    font-family: var(--font-family-light);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 6px;
}

/* ── Right-side decorative brand visual ──────────────────── */
.manaa-menu-overlay__brand {
    --rx: 0deg;
    --ry: 0deg;
    --glow: 0;
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 60px;
    overflow: hidden;
    perspective: 1200px;
}

.manaa-menu-overlay__brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(var(--manaa-taupe-rgb), 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 80%, rgba(var(--manaa-taupe-rgb), 0.08) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
    opacity: calc(1 + var(--glow) * 0.5);
    transition: opacity 0.4s ease;
}

/* Stack wrapper holds doors + wordmark in the same box.
   All motion/tilt/drop-shadow lives here so both layers stay in sync. */
.manaa-menu-overlay__brand-stack {
    position: relative;
    z-index: 1;
    max-width: 420px;
    width: 60%;
    aspect-ratio: 600 / 520;
    opacity: 0;
    transform: translateY(40px) scale(0.92);
    transform-style: preserve-3d;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s,
                transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s,
                filter 0.4s ease;
    will-change: transform, filter;
    cursor: pointer;
}

.manaa-menu-overlay__brand-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    display: block;
    -webkit-user-drag: none;
    user-drag: none;
}

/* Top half: 4 colored doors — show as-is */
.manaa-menu-overlay__brand-img--doors {
    clip-path: inset(0 0 50% 0);
}

/* Bottom half: black script signature — invert to luminous cream
   so it pops against the dark menu background (matches footer treatment) */
.manaa-menu-overlay__brand-img--wordmark {
    clip-path: inset(50% 0 0 0);
    filter: brightness(0) invert(1) sepia(0.18) saturate(0.4);
}

/* Idle floating animation — only while NOT hovered */
.manaa-menu-overlay.is-open .manaa-menu-overlay__brand-stack {
    opacity: 1;
    animation: brandFloat 8s ease-in-out infinite 1.6s;
    transform: translateY(0) scale(1);
}

/* When hover state is active, JS adds .is-tilting and we kill the animation
   so the mouse-driven 3D rotation takes over without conflict */
.manaa-menu-overlay__brand.is-tilting .manaa-menu-overlay__brand-stack {
    animation: none;
    transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.4s ease;
    transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1.05) translateZ(20px);
    filter: drop-shadow(
        calc(var(--ry) / -3 * 1px) calc(var(--rx) / 3 * 1px + 30px)
        70px rgba(0, 0, 0, 0.55)
    ) drop-shadow(0 0 30px rgba(var(--manaa-taupe-rgb), 0.4));
}

/* Smooth ease-out when leaving */
.manaa-menu-overlay__brand:not(.is-tilting) .manaa-menu-overlay.is-open .manaa-menu-overlay__brand-stack,
.manaa-menu-overlay.is-open .manaa-menu-overlay__brand:not(.is-tilting) .manaa-menu-overlay__brand-stack {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.6s ease,
                opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}

@keyframes brandFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-12px) scale(1.02); }
}

/* ── Menu Overlay Responsive ──────────────────────────────── */
@media (max-width: 991px) {
    .manaa-menu-overlay__nav {
        max-width: 100%;
        padding: 100px 40px 40px;
    }

    .manaa-menu-overlay__featured,
    .manaa-menu-overlay__brand {
        display: none;
    }

    .manaa-menu-overlay__group ul {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575px) {
    .manaa-menu-overlay__nav {
        padding: 90px 24px 40px;
    }

    .manaa-menu-overlay__close {
        top: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
    }

    .manaa-menu-overlay__group ul {
        grid-template-columns: 1fr;
    }

    .manaa-menu-overlay__pages li a {
        font-size: 1.6rem;
    }
}


/* ==========================================================
   7. HERO SECTION
   ========================================================== */
.manaa-hero {
    position: relative;
    height: 100vh;
    min-height: 500px;
    overflow: hidden;
    display: flex;
}

/* Left panel (hidden on mobile, visible on lg+) */
.manaa-hero__panel {
    display: none;
}

/* Right slider */
.manaa-hero__slider {
    flex: 1;
    position: relative;
    height: 100%;
}

.manaa-hero__slider .swiper {
    width: 100%;
    height: 100%;
}

.manaa-hero__slide {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.manaa-hero__slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to top,
        rgba(var(--manaa-dark-rgb), 0.7) 0%,
        rgba(var(--manaa-dark-rgb), 0.2) 40%,
        transparent 70%
    );
    z-index: 1;
}

.manaa-hero__slide-content {
    position: absolute;
    bottom: 60px;
    left: 30px;
    right: 30px;
    z-index: 2;
    color: var(--manaa-white);
}

.manaa-hero__project-number {
    font-family: var(--font-family-bold);
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: 0.05em;
}

.manaa-hero__project-location {
    font-family: var(--font-family-light);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 16px;
}

.manaa-hero__project-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.manaa-hero__spec {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-family-light);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
}

.manaa-hero__spec i {
    font-size: 0.7rem;
    color: var(--manaa-taupe);
}

/* Hide default Swiper nav in hero (custom nav below) */
.manaa-hero .swiper-button-prev,
.manaa-hero .swiper-button-next {
    display: none;
}

/* Custom nav arrows */
.manaa-hero__nav {
    position: absolute;
    bottom: 60px;
    right: 30px;
    z-index: 3;
    display: flex;
    gap: 8px;
}

.manaa-hero__nav-btn {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: var(--manaa-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all var(--transition-base);
}

.manaa-hero__nav-btn:hover {
    background: var(--manaa-white);
    color: var(--manaa-dark);
    border-color: var(--manaa-white);
}

/* Vertical pagination dots */
.manaa-hero__pagination {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.manaa-hero__pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--manaa-white);
    opacity: 0.4;
    cursor: pointer;
    transition: all var(--transition-base);
    margin: 0;
}

.manaa-hero__pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--manaa-taupe);
}

/* Slide counter */
.manaa-hero__counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-family: var(--font-family-light);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.1em;
}

.manaa-hero__counter-current {
    font-family: var(--font-family-bold);
    color: var(--manaa-white);
}


/* ==========================================================
   8. PROJECT CARDS
   ========================================================== */
.project-card {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.project-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.project-card__mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to top,
        rgba(var(--manaa-dark-rgb), 0.7) 0%,
        rgba(var(--manaa-dark-rgb), 0.1) 50%,
        transparent 100%
    );
    transition: all 0.4s ease;
    z-index: 1;
}

/* Color overlay variants */
.project-card--beige .project-card__mask {
    background: linear-gradient(to top, rgba(var(--manaa-taupe-rgb), 0.8) 0%, rgba(var(--manaa-taupe-rgb), 0.2) 50%, transparent 100%);
}

.project-card--green .project-card__mask {
    background: linear-gradient(to top, rgba(168, 181, 66, 0.8) 0%, rgba(168, 181, 66, 0.2) 50%, transparent 100%);
}

.project-card--blue .project-card__mask {
    background: linear-gradient(to top, rgba(44, 86, 151, 0.8) 0%, rgba(44, 86, 151, 0.2) 50%, transparent 100%);
}

.project-card--magenta .project-card__mask {
    background: linear-gradient(to top, rgba(155, 45, 123, 0.8) 0%, rgba(155, 45, 123, 0.2) 50%, transparent 100%);
}

.project-card--coral .project-card__mask {
    background: linear-gradient(to top, rgba(196, 58, 58, 0.8) 0%, rgba(196, 58, 58, 0.2) 50%, transparent 100%);
}

.project-card--gold .project-card__mask {
    background: linear-gradient(to top, rgba(200, 164, 86, 0.8) 0%, rgba(200, 164, 86, 0.2) 50%, transparent 100%);
}

.project-card--light-blue .project-card__mask {
    background: linear-gradient(to top, rgba(168, 216, 234, 0.8) 0%, rgba(168, 216, 234, 0.2) 50%, transparent 100%);
}

.project-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    color: var(--manaa-white);
    z-index: 2;
    transform: translateY(0);
    transition: transform 0.4s ease;
}

.project-card__prefix {
    font-family: var(--font-family-bold);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
}

.project-card__number {
    font-family: var(--font-family-bold);
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 2px;
}

.project-card__location {
    font-family: var(--font-family-light);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    opacity: 0.8;
}

.project-card__subtitle {
    font-family: var(--font-family-light);
    font-size: 0.8rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
    margin-top: 8px;
}

/* Hover */
.project-card:hover .project-card__image {
    transform: scale(1.05);
}

.project-card:hover .project-card__content {
    transform: translateY(-8px);
}

.project-card:hover .project-card__subtitle {
    opacity: 0.8;
    transform: translateY(0);
}

.project-card:hover .project-card__mask {
    opacity: 0.9;
}

/* Status badge */
.project-card__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    font-family: var(--font-family-bold);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 5px 12px;
    background: var(--manaa-teal);
    color: var(--manaa-white);
}

.project-card__badge--completed {
    background: var(--manaa-taupe);
}

.project-card__badge--planned {
    background: var(--manaa-blue);
}


/* ==========================================================
   9. HOMEPAGE SECTIONS
   ========================================================== */

/* --- Projects Grid --- */
.section-projects {
    padding: 0;
}

.section-projects__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 20px 20px;
}

.section-projects__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}

/* --- About Split --- */
.section-about {
    overflow: hidden;
}

.section-about__image-col {
    position: relative;
    min-height: 300px;
}

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

.section-about__content {
    background: var(--manaa-cream);
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-about__text {
    font-family: var(--font-family-light);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--manaa-text);
    margin-bottom: 24px;
}

/* --- Counter Section --- */
.section-counter {
    background: var(--manaa-dark);
    padding: 50px 0;
}

.section-counter__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.counter-item {
    text-align: center;
    min-width: 120px;
}

.counter-item__number {
    font-family: var(--font-family-bold);
    font-size: 2.5rem;
    color: var(--manaa-taupe);
    line-height: 1;
    margin-bottom: 8px;
}

.counter-item__label {
    font-family: var(--font-family-light);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.7);
}

/* --- Video Section --- */
.section-video {
    position: relative;
    min-height: 350px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-video::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--manaa-dark-rgb), 0.4);
}

.section-video__play {
    position: relative;
    z-index: 2;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid var(--manaa-white);
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--manaa-white);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all var(--transition-base);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.section-video__play:hover {
    background: var(--manaa-white);
    color: var(--manaa-dark);
    transform: scale(1.1);
}

.section-video__play i {
    margin-left: 3px; /* optical centering */
}

/* --- Contact Mini --- */
.section-contact-mini {
    background: var(--manaa-cream);
}

.contact-mini-item {
    margin-bottom: 30px;
}

.contact-mini-item__title {
    font-family: var(--font-family-bold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--manaa-dark);
    margin-bottom: 12px;
}

.contact-mini-item__text {
    font-family: var(--font-family-light);
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--manaa-text);
}

.contact-mini-item__text a {
    color: var(--manaa-text);
    transition: color var(--transition-base);
}

.contact-mini-item__text a:hover {
    color: var(--manaa-taupe);
}


/* ==========================================================
   10. PROJECT DETAIL (single-manaa_project.php)
   ========================================================== */

/* --- Project Hero --- */
.project-hero {
    position: relative;
    height: 100vh;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.project-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--manaa-dark-rgb), 0.45);
}

.project-hero__content {
    position: relative;
    z-index: 2;
    color: var(--manaa-white);
}

.project-hero__number {
    font-family: var(--font-family-bold);
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.project-hero__title {
    font-family: var(--font-family-light);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 4px;
}

.project-hero__subtitle {
    font-family: var(--font-family-light);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Scroll indicator */
.project-hero__scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    animation: bounceDown 2s infinite;
}

@keyframes bounceDown {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(8px); }
    60% { transform: translateX(-50%) translateY(4px); }
}

/* --- Project Specs Bar --- */
.project-specs {
    background: var(--manaa-white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 20px 0;
    position: sticky;
    top: var(--nav-height-mobile);
    z-index: 100;
}

.project-specs__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.project-specs__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-family: var(--font-family-light);
    font-size: 0.8rem;
    color: var(--manaa-text);
}

.project-specs__item i {
    color: var(--manaa-taupe);
    font-size: 0.85rem;
    width: 18px;
    text-align: center;
}

.project-specs__divider {
    width: 1px;
    height: 24px;
    background: rgba(0, 0, 0, 0.1);
    align-self: center;
    display: none;
}

/* --- Project Content --- */
.project-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 50px 20px;
}

.project-content h2 {
    font-size: 1.4rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.project-content h3 {
    font-size: 1.15rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.project-content p {
    font-family: var(--font-family-light);
    font-size: 0.95rem;
    line-height: 1.9;
    color: var(--manaa-text);
}

.project-content blockquote {
    border-left: 3px solid var(--manaa-taupe);
    padding: 16px 24px;
    margin: 24px 0;
    background: var(--manaa-cream);
    font-family: var(--font-family-light);
    font-style: italic;
    color: var(--manaa-text);
}

/* --- Project Features --- */
.project-features {
    padding: 30px 0 50px;
}

.project-features__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.project-features__item {
    font-family: var(--font-family-light);
    font-size: 0.8rem;
    padding: 8px 20px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50px;
    color: var(--manaa-text);
    letter-spacing: 0.05em;
    transition: all var(--transition-base);
}

.project-features__item:hover {
    border-color: var(--manaa-taupe);
    color: var(--manaa-taupe);
}

/* --- Project Gallery --- */
.project-gallery {
    padding: 0 0 50px;
}

.project-gallery__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

.project-gallery__item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: block;
}

.project-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.project-gallery__item:hover img {
    transform: scale(1.03);
}

.project-gallery__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--manaa-dark-rgb), 0);
    transition: background var(--transition-base);
    pointer-events: none;
}

.project-gallery__item:hover::after {
    background: rgba(var(--manaa-dark-rgb), 0.15);
}

/* --- Project Tabs --- */
.project-tabs {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 40px;
}

.project-tabs .nav-tabs {
    border-bottom: none;
    gap: 0;
    justify-content: center;
}

.project-tabs .nav-link {
    font-family: var(--font-family-bold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--manaa-text);
    padding: 16px 24px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    transition: all var(--transition-base);
}

.project-tabs .nav-link:hover {
    color: var(--manaa-dark);
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

.project-tabs .nav-link.active {
    color: var(--manaa-dark);
    border-bottom-color: var(--manaa-taupe);
    background: none;
}

/* --- Project Video --- */
.project-video {
    position: relative;
    min-height: 300px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-video::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--manaa-dark-rgb), 0.4);
}

.project-video__play {
    position: relative;
    z-index: 2;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--manaa-white);
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--manaa-white);
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition-base);
}

.project-video__play:hover {
    background: var(--manaa-white);
    color: var(--manaa-dark);
    transform: scale(1.1);
}

.project-video__play i {
    margin-left: 2px;
}

/* --- Project Award --- */
.project-award {
    text-align: center;
    padding: 20px 0;
}

.project-award__image {
    max-width: 180px;
    margin: 0 auto;
}

/* --- Project Floor Plans --- */
.project-floorplans {
    padding: 40px 0;
}

.project-floorplan__item {
    text-align: center;
    margin-bottom: 30px;
}

.project-floorplan__item img {
    max-width: 100%;
    margin: 0 auto;
}

.project-floorplan__label {
    font-family: var(--font-family-bold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--manaa-text);
    margin-top: 12px;
}

/* --- Related Projects --- */
.project-related {
    background: var(--manaa-cream);
}

.project-related__header {
    text-align: center;
    margin-bottom: 30px;
}

.project-related__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}


/* ==========================================================
   11. ARCHIVE PAGE — Projects
   ========================================================== */

/* ─── Hero ─── */
.prj-hero {
    position: relative;
    height: 75vh;
    min-height: 450px;
    max-height: 750px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.prj-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--manaa-dark-rgb), 0.25) 0%, rgba(var(--manaa-dark-rgb), 0.7) 100%);
}

.prj-hero__content {
    position: relative;
    z-index: 2;
}

.prj-hero__label {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--manaa-taupe);
    margin-bottom: 14px;
}

.prj-hero__title {
    font-family: var(--font-family-bold);
    font-size: 3.5rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--manaa-white);
    margin: 0;
}

.prj-hero__line {
    width: 60px;
    height: 2px;
    background: var(--manaa-taupe);
    margin: 24px auto 28px;
}

.prj-hero__stats {
    display: flex;
    justify-content: center;
    gap: 48px;
}

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

.prj-hero__stat-num {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 2rem;
    color: var(--manaa-white);
    line-height: 1;
    margin-bottom: 4px;
}

.prj-hero__stat-label {
    font-family: var(--font-family-light);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.5);
}

.prj-hero__scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 28px;
    height: 44px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 6px;
    transition: border-color var(--transition-base);
}

.prj-hero__scroll:hover {
    border-color: var(--manaa-taupe);
}

.prj-hero__scroll span {
    width: 3px;
    height: 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    animation: scrollBounce 2s ease-in-out infinite;
}

/* ─── Filter Bar ─── */
.prj-filter {
    background: var(--manaa-white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0);
    transition: box-shadow var(--transition-base);
}

.prj-filter.is-stuck {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

.prj-filter__inner {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 16px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.prj-filter__inner::-webkit-scrollbar {
    display: none;
}

.prj-filter__group {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.prj-filter__separator {
    width: 1px;
    height: 24px;
    background: rgba(0, 0, 0, 0.1);
    margin: 0 16px;
    flex-shrink: 0;
}

.prj-filter__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-family-bold);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 8px 18px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
    background: transparent;
    color: var(--manaa-text);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.prj-filter__btn:hover {
    border-color: var(--manaa-dark);
    color: var(--manaa-dark);
}

.prj-filter__btn.active {
    background: var(--manaa-dark);
    border-color: var(--manaa-dark);
    color: var(--manaa-white);
}

.prj-filter__count {
    font-family: var(--font-family-light);
    font-size: 0.6rem;
    opacity: 0.5;
}

.prj-filter__btn.active .prj-filter__count {
    opacity: 0.7;
}

@media (max-width: 575px) {
    .prj-filter__btn { padding: 6px 12px; font-size: 0.62rem; }
    .prj-filter__separator { margin: 0 8px; }
    .prj-filter__inner { padding: 12px 0; }
}

/* ─── Project Grid ─── */
.prj-grid-section {
    background: var(--manaa-cream);
    padding: 80px 0 2px;
}

.prj-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

/* ─── Project Card ─── */
.prj-card {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    text-decoration: none;
    color: var(--manaa-white);
}

.prj-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s ease;
}

.prj-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 30%,
        rgba(var(--manaa-dark-rgb), 0.15) 60%,
        rgba(var(--manaa-dark-rgb), 0.7) 100%
    );
    transition: background var(--transition-slow);
    z-index: 1;
}

.prj-card:hover .prj-card__bg {
    transform: scale(1.06);
}

.prj-card:hover .prj-card__overlay {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(var(--manaa-dark-rgb), 0.1) 30%,
        rgba(var(--manaa-dark-rgb), 0.3) 60%,
        rgba(var(--manaa-dark-rgb), 0.85) 100%
    );
}

/* Badge */
.prj-card__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    font-family: var(--font-family-bold);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 5px 14px;
    color: var(--manaa-white);
    background: rgba(var(--manaa-dark-rgb), 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.prj-card__badge--guncel {
    background: rgba(200, 211, 42, 0.8);
}

.prj-card__badge--tamamlanan {
    background: rgba(var(--manaa-taupe-rgb), 0.8);
}

.prj-card__badge--planlanan {
    background: rgba(43, 94, 167, 0.8);
}

/* Content */
.prj-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px;
    z-index: 2;
    transform: translateY(0);
    transition: transform 0.4s ease;
}

.prj-card:hover .prj-card__content {
    transform: translateY(-6px);
}

.prj-card__number {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--manaa-white);
    margin-bottom: 4px;
}

.prj-card__location {
    display: block;
    font-family: var(--font-family-light);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.7);
}

.prj-card__meta {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.4s ease;
}

.prj-card:hover .prj-card__meta {
    opacity: 1;
    transform: translateY(0);
}

.prj-card__meta span {
    font-family: var(--font-family-light);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.prj-card__meta i {
    font-size: 0.6rem;
    color: var(--manaa-taupe);
}

/* Arrow */
.prj-card__arrow {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translate(8px, -8px);
    transition: all 0.4s ease;
}

.prj-card__arrow i {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.7);
    transform: rotate(-45deg);
}

.prj-card:hover .prj-card__arrow {
    opacity: 1;
    transform: translate(0, 0);
}

/* ─── CTA Card (fills empty grid slots) ─── */
.prj-card--cta {
    position: relative;
    overflow: hidden;
}

.prj-card__bg--cta {
    background: linear-gradient(165deg, #2c3830 0%, #3a4a40 30%, #2c3830 60%, #2c3830 100%) !important;
}

.prj-card__cta-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.prj-card__cta-label {
    font-family: var(--font-family-light);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.5);
}

.prj-card__cta-title {
    font-family: var(--font-family-bold);
    font-size: 1.8rem;
    color: var(--manaa-white);
    letter-spacing: 0.05em;
}

.prj-card__cta-arrow {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    transition: all 0.3s ease;
}

.prj-card__cta-arrow i {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.prj-card--cta:hover .prj-card__cta-arrow {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateX(4px);
}

/* ─── Empty State ─── */
.prj-empty {
    text-align: center;
    padding: 100px 20px;
    background: var(--manaa-cream);
}

.prj-empty i {
    font-size: 2rem;
    color: var(--manaa-taupe);
    margin-bottom: 16px;
    display: block;
}

.prj-empty p {
    font-family: var(--font-family-light);
    font-size: 1rem;
    color: var(--manaa-text);
    margin: 0;
}

/* ─── Legacy filter-btn kept for backward compatibility ─── */
.filter-btn {
    font-family: var(--font-family-bold);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 8px 20px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50px;
    background: transparent;
    color: var(--manaa-text);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.filter-btn:hover {
    border-color: var(--manaa-dark);
    color: var(--manaa-dark);
}

.filter-btn.active {
    background: var(--manaa-dark);
    border-color: var(--manaa-dark);
    color: var(--manaa-white);
}


/* ==========================================================
   12. PAGE HERO (Generic inner pages)
   ========================================================== */
.page-hero {
    position: relative;
    height: 50vh;
    min-height: 280px;
    max-height: 500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--manaa-dark-rgb), 0.45);
}

.page-hero__title {
    position: relative;
    z-index: 2;
    font-family: var(--font-family-bold);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--manaa-white);
    margin: 0;
}


/* ==========================================================
   13-16. KURUMSAL PAGE (Corporate)
   ========================================================== */

/* ─── Shared elements ─── */
.kr-label {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--manaa-taupe);
    margin-bottom: 12px;
}

.kr-label--light {
    color: var(--manaa-taupe);
}

.kr-heading {
    font-family: var(--font-family-bold);
    font-size: 1.8rem;
    line-height: 1.2;
    color: var(--manaa-dark);
    margin: 0 0 24px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.kr-heading--light {
    color: var(--manaa-white);
}

/* ─── 1. Hero — Modern Header ─── */
.kr-hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.kr-hero__bg {
    position: absolute;
    inset: -5%;
    width: 110%;
    height: 110%;
    background-size: cover;
    background-position: center;
    animation: kenBurns 20s ease infinite alternate;
}

.kr-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(var(--manaa-dark-rgb), 0.90) 0%,
        rgba(var(--manaa-dark-rgb), 0.55) 35%,
        rgba(var(--manaa-dark-rgb), 0.15) 60%,
        transparent 80%
    );
    z-index: 1;
}

.kr-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 120px 60px 80px;
    max-width: 1400px;
    margin: 0 auto;
}

.kr-hero__content {
    max-width: 650px;
}

.kr-hero__badge {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 32px;
}

.kr-hero__badge-line {
    width: 32px;
    height: 1px;
    background: var(--manaa-taupe);
}

.kr-hero__badge-text {
    font-family: var(--font-family-bold);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--manaa-taupe);
}

.kr-hero__title {
    margin: 0 0 24px;
}

.kr-hero__title-small {
    display: block;
    font-family: var(--font-family-light);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}

.kr-hero__title-accent {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 4.5rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1;
    color: #fff;
}

.kr-hero__desc {
    font-family: var(--font-family-light);
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 36px;
    max-width: 480px;
}

.kr-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-family-bold);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--manaa-white);
    text-decoration: none;
    padding: 14px 32px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all var(--transition-base);
}

.kr-hero__cta:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--manaa-taupe);
    color: var(--manaa-taupe);
}

.kr-hero__cta svg {
    animation: scrollBounce 2s ease-in-out infinite;
}

/* Hero stats — bottom right */
.kr-hero__stats {
    display: flex;
    gap: 48px;
    margin-top: auto;
    align-self: flex-end;
}

.kr-hero__stat {
    text-align: right;
}

.kr-hero__stat-num {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 2rem;
    color: var(--manaa-taupe);
    line-height: 1;
    margin-bottom: 6px;
}

.kr-hero__stat-label {
    font-family: var(--font-family-light);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.4);
}

.kr-hero__doors {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    height: 4px;
    z-index: 2;
}

.kr-hero__doors span {
    flex: 1;
}

/* ─── 2. About (Hakkimizda) — Magazine Spread ─── */
.kr-about {
    display: flex;
    min-height: 600px;
}

.kr-about__visual {
    flex: 0 0 42%;
    background: var(--manaa-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    position: relative;
    overflow: hidden;
}

.kr-about__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(200, 211, 42, 0.04) 0%,
        rgba(109, 185, 227, 0.04) 25%,
        rgba(43, 94, 167, 0.04) 50%,
        rgba(168, 33, 107, 0.04) 75%,
        rgba(232, 93, 58, 0.04) 100%
    );
}

.kr-about__watermark {
    position: absolute;
    font-family: var(--font-family-bold);
    font-size: 12rem;
    color: var(--manaa-white);
    opacity: 0.04;
    line-height: 1;
    user-select: none;
    pointer-events: none;
}

.kr-about__logo {
    max-width: 220px;
    position: relative;
    z-index: 1;
    opacity: 0.9;
}

.kr-about__content {
    flex: 1;
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.kr-about__accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--manaa-taupe);
}

.kr-about__text {
    font-family: var(--font-family-light);
    font-size: 0.95rem;
    line-height: 1.9;
    color: var(--manaa-text);
}

.kr-about__text p {
    margin-bottom: 16px;
}

.kr-about__text p:last-child {
    margin-bottom: 0;
}

/* ─── 3. Stats — Counter Band ─── */
.kr-stats {
    background: linear-gradient(165deg, #1e1f2e, #2c3830, #261e30);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.kr-stats__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.12;
}

.kr-stats__accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--manaa-gradient-wide);
    z-index: 1;
}

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

.kr-stats__grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 60px;
}

.kr-stats__item {
    text-align: center;
    min-width: 160px;
}

.kr-stats__number {
    font-family: var(--font-family-bold);
    font-size: 3.5rem;
    color: var(--manaa-taupe);
    line-height: 1;
    display: inline;
}

.kr-stats__suffix {
    font-family: var(--font-family-light);
    font-size: 2rem;
    color: var(--manaa-taupe);
}

.kr-stats__label {
    display: block;
    font-family: var(--font-family-light);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 10px;
}

/* ─── 4. Video — Sinematik Parallax ─── */
.kr-video {
    position: relative;
    height: 70vh;
    min-height: 400px;
    max-height: 700px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kr-video__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(var(--manaa-dark-rgb), 0.5) 0%,
        rgba(var(--manaa-dark-rgb), 0.6) 50%,
        rgba(var(--manaa-dark-rgb), 0.7) 100%
    );
}

.kr-video__content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.kr-video__label {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--manaa-taupe);
    margin-bottom: 16px;
}

.kr-video__title {
    font-family: var(--font-family-bold);
    font-size: 2.4rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--manaa-white);
    margin: 0 0 36px;
    line-height: 1.3;
}

.kr-video__title .manaa-gradient-text {
    display: block;
    font-size: 3rem;
}

.kr-video__play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
    color: var(--manaa-white);
    margin: 0 auto;
    transition: all var(--transition-base);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.kr-video__play svg {
    margin-left: 4px;
}

.kr-video__play:hover {
    background: var(--manaa-white);
    color: var(--manaa-dark);
    border-color: var(--manaa-white);
    transform: scale(1.08);
}

/* ─── 5. Activities (Faaliyetler) — Sticky Editorial ─── */
.kr-activities {
    background: var(--manaa-cream);
    padding: var(--section-py-desktop) 0;
    position: relative;
    overflow: hidden;
}

.kr-activities__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.06;
}

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

.kr-activities__inner {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.kr-activities__header {
    flex: 0 0 300px;
    position: sticky;
    top: 120px;
}

.kr-activities__line {
    width: 40px;
    height: 2px;
    background: var(--manaa-taupe);
    margin-top: 8px;
}

.kr-activities__content {
    flex: 1;
    font-family: var(--font-family-light);
    font-size: 0.95rem;
    line-height: 2;
    color: var(--manaa-text);
}

.kr-activities__content p {
    margin-bottom: 20px;
    padding-left: 24px;
    border-left: 2px solid rgba(var(--manaa-taupe-rgb), 0.2);
}

.kr-activities__content p:last-child {
    margin-bottom: 0;
}

/* ─── 6. Values (Degerler) — Dark Gradient + 2 Columns ─── */
.kr-values {
    background: var(--manaa-dark);
    padding: var(--section-py-desktop) 0;
    position: relative;
    overflow: hidden;
}

.kr-values__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.1;
}

.kr-values__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(200, 211, 42, 0.04) 0%,
        rgba(109, 185, 227, 0.04) 25%,
        rgba(43, 94, 167, 0.04) 50%,
        rgba(168, 33, 107, 0.04) 75%,
        rgba(232, 93, 58, 0.04) 100%
    );
    pointer-events: none;
}

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

.kr-values__header {
    text-align: center;
    margin-bottom: 48px;
    position: relative;
}

.kr-values__content {
    font-family: var(--font-family-light);
    font-size: 0.95rem;
    line-height: 2;
    color: rgba(255, 255, 255, 0.65);
    columns: 2;
    column-gap: 60px;
    position: relative;
}

.kr-values__content p {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    break-inside: avoid;
    position: relative;
    padding-left: 18px;
}

.kr-values__content p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a08828;
}

.kr-values__content p:nth-child(5n+2)::before { background: #8a7420; }
.kr-values__content p:nth-child(5n+3)::before { background: #2c3830; }
.kr-values__content p:nth-child(5n+4)::before { background: #c8a028; }
.kr-values__content p:nth-child(5n+5)::before { background: #5a7060; }

.kr-values__content p:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* ─── 7. Strengths (Gucler) — Parallax + Centered ─── */
.kr-strengths {
    position: relative;
    min-height: 60vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kr-strengths__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(var(--manaa-dark-rgb), 0.6) 0%,
        rgba(var(--manaa-dark-rgb), 0.75) 50%,
        rgba(var(--manaa-dark-rgb), 0.85) 100%
    );
}

.kr-strengths__content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    text-align: center;
    padding: 80px 24px;
}

.kr-strengths__quote {
    display: block;
    font-family: Georgia, serif;
    font-size: 8rem;
    line-height: 0.5;
    color: var(--manaa-taupe);
    opacity: 0.1;
    margin-bottom: 24px;
}

.kr-strengths__text {
    font-family: var(--font-family-light);
    font-size: 1.05rem;
    line-height: 2;
    color: rgba(255, 255, 255, 0.75);
}

.kr-strengths__text p {
    margin-bottom: 16px;
}

.kr-strengths__text p:last-child {
    margin-bottom: 0;
}

.kr-strengths__line {
    width: 60px;
    height: 2px;
    background: var(--manaa-taupe);
    margin: 32px auto;
}

/* ─── 5. Team (Ekip) — Minimalist ─── */
.kr-team {
    padding: var(--section-py-desktop) 0;
}

.kr-team__header {
    text-align: center;
    margin-bottom: 48px;
}

.kr-team__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

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

.kr-team__photo {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    margin: 0 auto 20px;
    background: var(--manaa-cream);
}

.kr-team__photo:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.kr-team__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.kr-team__photo:hover img {
    transform: scale(1.05);
}

.kr-team__name {
    font-family: var(--font-family-bold);
    font-size: 0.88rem;
    color: var(--manaa-dark);
    margin: 0 0 4px;
}

.kr-team__position {
    display: block;
    font-family: var(--font-family-light);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--manaa-taupe);
}

/* ─── 9. Press & Media (Basin) — Masonry ─── */
.kr-press {
    background: var(--manaa-dark);
    padding: var(--section-py-desktop) 0;
}

.kr-press__header {
    text-align: center;
    margin-bottom: 48px;
}

.kr-press__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    grid-auto-rows: 250px;
}

.kr-press__item {
    position: relative;
    overflow: hidden;
    display: block;
}

.kr-press__item--featured {
    grid-column: span 2;
}

.kr-press__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.kr-press__item:hover img {
    transform: scale(1.05);
}

.kr-press__item-overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--manaa-dark-rgb), 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-base);
}

.kr-press__item-overlay i {
    color: var(--manaa-white);
    font-size: 1.1rem;
    opacity: 0;
    transform: scale(0.5);
    transition: all var(--transition-base);
}

.kr-press__item:hover .kr-press__item-overlay {
    background: rgba(var(--manaa-dark-rgb), 0.35);
}

.kr-press__item:hover .kr-press__item-overlay i {
    opacity: 1;
    transform: scale(1);
}

/* ─── 10. Closing — Brand Signature ─── */
.kr-closing {
    background: var(--manaa-dark);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.kr-closing__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.08;
}

.kr-closing__doors {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    height: 4px;
}

.kr-closing__doors span {
    flex: 1;
}

.kr-closing__content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.kr-closing__logo {
    max-width: 120px;
    opacity: 0.6;
    margin-bottom: 16px;
}

.kr-closing__tagline {
    font-family: var(--font-family-bold);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

/* ─── 11. Approach — Editorial Grid ─── */
.kr-approach {
    padding: var(--section-py-desktop) 0;
    background: var(--manaa-cream);
    position: relative;
}

.kr-approach__accent-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--manaa-gradient-wide);
}

.kr-approach__grid {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.kr-approach__left {
    flex: 0 0 340px;
    position: sticky;
    top: 120px;
}

.kr-approach__line {
    width: 50px;
    height: 2px;
    background: var(--manaa-taupe);
    margin-top: 16px;
}

.kr-approach__right {
    flex: 1;
    font-family: var(--font-family-light);
    font-size: 1.05rem;
    line-height: 2;
    color: var(--manaa-text);
}

.kr-approach__right p {
    margin-bottom: 20px;
    padding-left: 24px;
    border-left: 2px solid rgba(var(--manaa-taupe-rgb), 0.25);
}

.kr-approach__right p:last-child {
    margin-bottom: 0;
}

/* ─── 12. Experience — Dark Feature ─── */
.kr-experience {
    position: relative;
    padding: var(--section-py-desktop) 0;
    overflow: hidden;
    min-height: 500px;
    display: flex;
    align-items: center;
}

.kr-experience__bg {
    position: absolute;
    inset: -5%;
    width: 110%;
    height: 110%;
    background-size: cover;
    background-position: center;
    animation: kenBurns 20s ease infinite alternate;
}

.kr-experience__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(var(--manaa-dark-rgb), 0.92) 0%,
        rgba(var(--manaa-dark-rgb), 0.85) 50%,
        rgba(var(--manaa-dark-rgb), 0.78) 100%
    );
}

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

.kr-experience__content {
    max-width: 700px;
}

.kr-experience__text {
    font-family: var(--font-family-light);
    font-size: 1.05rem;
    line-height: 2;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 48px;
}

.kr-experience__text strong {
    color: var(--manaa-taupe);
    font-family: var(--font-family-bold);
}

.kr-experience__pillars {
    display: flex;
    gap: 40px;
}

.kr-experience__pillar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    transition: all var(--transition-base);
}

.kr-experience__pillar:hover {
    border-color: var(--manaa-taupe);
    background: rgba(255, 255, 255, 0.06);
}

.kr-experience__pillar-icon {
    color: var(--manaa-taupe);
    flex-shrink: 0;
}

.kr-experience__pillar-label {
    font-family: var(--font-family-bold);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.7);
}

/* ─── 13. Today — Quote Section ─── */
.kr-today {
    padding: var(--section-py-desktop) 0;
    background: var(--manaa-white);
}

.kr-today__inner {
    display: flex;
    gap: 80px;
    align-items: center;
}

.kr-today__header {
    flex: 0 0 300px;
}

.kr-today__body {
    flex: 1;
}

.kr-today__lead {
    font-family: var(--font-family-light);
    font-size: 1.05rem;
    line-height: 2;
    color: var(--manaa-text);
    margin-bottom: 32px;
}

.kr-today__quote {
    font-family: var(--font-family-light);
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--manaa-dark);
    border: none;
    margin: 0;
    padding: 32px 40px;
    position: relative;
    background: var(--manaa-cream);
    border-left: 4px solid var(--manaa-taupe);
}

.kr-today__quote-mark {
    font-family: Georgia, serif;
    font-size: 2.5rem;
    color: var(--manaa-taupe);
    line-height: 1;
    vertical-align: text-top;
}

/* ─── 14. Mission & Vision — Cards ─── */
.kr-mission {
    padding: var(--section-py-desktop) 0;
    background: var(--manaa-cream);
}

.kr-mission__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.kr-mission__card {
    padding: 60px;
    background: var(--manaa-white);
    position: relative;
    overflow: hidden;
}

.kr-mission__card--dark {
    background: var(--manaa-dark);
}

.kr-mission__card--dark p {
    color: rgba(255, 255, 255, 0.55);
}

.kr-mission__card-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--manaa-gradient-wide);
}

.kr-mission__title {
    font-family: var(--font-family-bold);
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--manaa-dark);
    margin: 0 0 24px;
}

.kr-mission__title--light {
    color: var(--manaa-white);
}

.kr-mission__card p {
    font-family: var(--font-family-light);
    font-size: 0.95rem;
    line-height: 2;
    color: var(--manaa-text);
    margin: 0;
}

/* ─── 15. Values Statement — Closing ─── */
.kr-values-stmt {
    position: relative;
    padding: var(--section-py-desktop) 0;
    overflow: hidden;
    text-align: center;
}

.kr-values-stmt__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center bottom;
}

.kr-values-stmt__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(var(--manaa-dark-rgb), 0.9) 0%,
        rgba(var(--manaa-dark-rgb), 0.85) 100%
    );
}

.kr-values-stmt .container {
    position: relative;
    z-index: 2;
}

.kr-values-stmt__content {
    max-width: 700px;
    margin: 0 auto;
}

.kr-values-stmt__text {
    font-family: var(--font-family-light);
    font-size: 1.1rem;
    line-height: 2;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 24px;
}

.kr-values-stmt__highlight {
    font-family: var(--font-family-bold);
    font-size: 1.3rem;
    letter-spacing: 0.08em;
    color: var(--manaa-taupe);
    margin-bottom: 48px;
    font-weight: 700;
}

.kr-values-stmt__doors {
    display: flex;
    height: 4px;
    width: 200px;
    margin: 0 auto;
    border-radius: 2px;
    overflow: hidden;
}

.kr-values-stmt__doors span {
    flex: 1;
}

/* About highlight text */
.kr-about__highlight {
    font-family: var(--font-family-bold);
    font-size: 1rem;
    font-style: italic;
    color: var(--manaa-dark);
    border-left: 3px solid var(--manaa-taupe);
    padding-left: 20px;
    margin-top: 8px;
}

/* ==========================================================
   MAANAA FARKI PAGE
   ========================================================== */

/* ─── Hero ─── */
.mf-hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.mf-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(var(--manaa-dark-rgb), 0.90) 0%,
        rgba(var(--manaa-dark-rgb), 0.55) 35%,
        rgba(var(--manaa-dark-rgb), 0.15) 60%,
        transparent 80%
    );
}

.mf-hero__content {
    position: relative;
    z-index: 2;
    max-width: 750px;
    padding: 0 24px;
}

.mf-hero__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 28px;
}

.mf-hero__badge-line {
    width: 40px;
    height: 1px;
    background: var(--manaa-taupe);
}

.mf-hero__badge-text {
    font-family: var(--font-family-bold);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--manaa-taupe);
}

.mf-hero__title {
    margin: 0 0 24px;
}

.mf-hero__title-line {
    display: block;
    font-family: var(--font-family-bold);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--manaa-white);
}

.mf-hero__title-line:first-child {
    font-size: 2rem;
    opacity: 0.6;
    margin-bottom: 4px;
}

.mf-hero__title-line--accent {
    font-size: 4.5rem;
    background: var(--manaa-gradient-wide);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mf-hero__desc {
    font-family: var(--font-family-light);
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 36px;
}

.mf-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-family-bold);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--manaa-white);
    text-decoration: none;
    padding: 14px 36px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all var(--transition-base);
}

.mf-hero__cta:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--manaa-taupe);
    color: var(--manaa-taupe);
}

.mf-hero__cta svg {
    animation: scrollBounce 2s ease-in-out infinite;
}

/* Brand doors strip */
.mf-hero__doors {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    height: 4px;
    z-index: 2;
}

.mf-hero__doors span {
    flex: 1;
}

/* ─── Intro ─── */
.mf-intro {
    padding: 60px 0 0;
    background: #ffffff;
    scroll-margin-top: 90px;
}

.mf-intro__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.mf-intro__number {
    font-family: var(--font-family-bold);
    font-size: 8rem;
    line-height: 1;
    color: var(--manaa-cream);
    flex-shrink: 0;
    -webkit-text-stroke: 1px rgba(var(--manaa-taupe-rgb), 0.3);
}

.mf-intro__text h2 {
    font-family: var(--font-family-bold);
    font-size: 1.6rem;
    line-height: 1.3;
    color: var(--manaa-dark);
    margin: 0 0 16px;
}

.mf-intro__text p {
    font-family: var(--font-family-light);
    font-size: 0.95rem;
    line-height: 1.9;
    color: var(--manaa-text);
    margin: 0;
}

/* ─── Reasons (card grid) ─── */
.mf-reasons {
    background: #ffffff;
    padding: 30px 0 80px;
}

.mf-reasons__container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mf-reason-card {
    background: var(--manaa-cream, #f5f3ef);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 4px solid var(--card-accent, #2c3830);
}

.mf-reason-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.mf-reason-card__inner {
    display: flex;
    align-items: flex-start;
    padding: 36px 40px;
    gap: 28px;
}

.mf-reason-card__num {
    font-family: var(--font-family-bold);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--card-accent, #2c3830);
    opacity: 0.25;
    flex-shrink: 0;
    min-width: 50px;
    transition: opacity 0.3s ease;
}

.mf-reason-card:hover .mf-reason-card__num {
    opacity: 0.5;
}

.mf-reason-card__content {
    flex: 1;
}

.mf-reason-card__title {
    font-family: var(--font-family-bold);
    font-size: 1.2rem;
    color: var(--manaa-dark);
    margin: 0 0 10px;
    line-height: 1.3;
}

.mf-reason-card__text {
    font-family: var(--font-family-light);
    font-size: 0.92rem;
    line-height: 1.9;
    color: var(--manaa-text);
    margin: 0;
}

/* ─── Highlight / Video ─── */
.mf-highlight {
    position: relative;
    padding: 80px 0 60px;
    overflow: hidden;
}

.mf-highlight__bg {
    position: absolute;
    inset: 0;
    background: var(--manaa-dark);
}

.mf-highlight__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(200, 211, 42, 0.08) 0%,
        rgba(109, 185, 227, 0.06) 25%,
        rgba(43, 94, 167, 0.08) 50%,
        rgba(168, 33, 107, 0.06) 75%,
        rgba(232, 93, 58, 0.08) 100%
    );
}

.mf-highlight__content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.mf-highlight__label {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--manaa-taupe);
    margin-bottom: 16px;
}

.mf-highlight__title {
    font-family: var(--font-family-bold);
    font-size: 2.5rem;
    line-height: 1.2;
    color: var(--manaa-white);
    margin: 0 0 10px;
    letter-spacing: 0.06em;
}

/* Brand Pillars */
.mf-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 36px auto 30px;
    max-width: 900px;
}

.mf-pillars__item {
    padding: 40px 30px;
    position: relative;
    text-align: center;
}

.mf-pillars__item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: rgba(255, 255, 255, 0.1);
}

.mf-pillars__number {
    font-family: var(--font-family-bold);
    font-size: 3.5rem;
    color: var(--manaa-white);
    line-height: 1;
    letter-spacing: -0.02em;
}

.mf-pillars__suffix {
    font-family: var(--font-family-bold);
    font-size: 1rem;
    color: var(--manaa-taupe);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-left: 6px;
}

.mf-pillars__divider {
    display: block;
    width: 30px;
    height: 1px;
    background: var(--manaa-taupe);
    margin: 18px auto;
    opacity: 0.6;
}

.mf-pillars__name {
    font-family: var(--font-family-bold);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--manaa-white);
    margin: 0 0 10px;
}

.mf-pillars__desc {
    font-family: var(--font-light, sans-serif);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin: 0;
}

.mf-highlight__quote {
    font-family: var(--font-light, sans-serif);
    font-size: 1.1rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.04em;
    margin: 0;
}

/* Counter animation */
.mf-pillars__number {
    transition: none;
}

.mf-pillars__item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.mf-pillars__item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fallback: show immediately if JS doesn't fire */
.no-js .mf-pillars__item {
    opacity: 1;
    transform: none;
}

.mf-pillars__item:nth-child(2) { transition-delay: 0.15s; }
.mf-pillars__item:nth-child(3) { transition-delay: 0.3s; }

/* ─── Life Cycle ─── */
.mf-lifecycle {
    padding: var(--section-py-desktop) 0;
    background: var(--manaa-cream);
}

.mf-lifecycle__header {
    text-align: center;
    margin-bottom: 48px;
}

.mf-lifecycle__label {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--manaa-taupe);
    margin-bottom: 12px;
}

.mf-lifecycle__title {
    font-family: var(--font-family-bold);
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--manaa-dark);
    margin: 0 0 16px;
}

.mf-lifecycle__desc {
    font-family: var(--font-family-light);
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--manaa-text);
    max-width: 600px;
    margin: 0 auto;
}

/* ─── Lifecycle Grid ─── */
.mf-lifecycle__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid rgba(44, 56, 48, 0.1);
}

.mf-lifecycle__card {
    position: relative;
    padding: 52px 36px 48px;
    background: var(--manaa-white);
    border-right: 1px solid rgba(44, 56, 48, 0.1);
    overflow: hidden;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s ease, background var(--transition-base);
}

.mf-lifecycle__card:nth-child(1) { transition-delay: 0s; }
.mf-lifecycle__card:nth-child(2) { transition-delay: 0.1s; }
.mf-lifecycle__card:nth-child(3) { transition-delay: 0.2s; }
.mf-lifecycle__card:nth-child(4) { transition-delay: 0.3s; }

.mf-lifecycle__card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mf-lifecycle__card:last-child {
    border-right: none;
}

.mf-lifecycle__card:hover {
    background: #fafaf8;
}

.mf-lifecycle__num {
    position: absolute;
    top: -8px;
    right: 12px;
    font-family: var(--font-family-bold);
    font-size: 6.5rem;
    line-height: 1;
    color: var(--manaa-dark);
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.mf-lifecycle__card:hover .mf-lifecycle__num {
    opacity: 0.09;
    transform: scale(1.04) translateY(-4px);
}

.mf-lifecycle__card-inner {
    position: relative;
    z-index: 1;
}

.mf-lifecycle__phase {
    font-family: var(--font-family-bold);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--manaa-dark);
    margin: 0 0 28px;
    transition: color var(--transition-base);
}

.mf-lifecycle__card:hover .mf-lifecycle__phase {
    color: var(--card-accent, var(--manaa-taupe));
}

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

.mf-lifecycle__items li {
    font-family: var(--font-family-light);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--manaa-text);
    padding-left: 18px;
    position: relative;
}

.mf-lifecycle__items li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 1px;
    background: var(--card-accent, var(--manaa-taupe));
    transition: width 0.3s ease;
}

.mf-lifecycle__card:hover .mf-lifecycle__items li::before {
    width: 8px;
}

.mf-lifecycle__bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--card-accent, var(--manaa-taupe));
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.mf-lifecycle__card:hover .mf-lifecycle__bar {
    width: 100%;
}

/* ─── Summary Grid ─── */
.mf-summary {
    padding: 80px 0;
    background: var(--manaa-dark);
}

.mf-summary__header {
    text-align: center;
    margin-bottom: 48px;
}

.mf-summary__header h2 {
    font-family: var(--font-family-bold);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--manaa-white);
    margin: 0;
}

.mf-summary__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
}

.mf-summary__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: border-color var(--transition-base);
}

.mf-summary__item:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.mf-summary__num {
    font-family: var(--font-family-bold);
    font-size: 0.75rem;
    opacity: 0.5;
}

.mf-summary__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mf-summary__name {
    font-family: var(--font-family-light);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    transition: color var(--transition-base);
}

.mf-summary__item:hover .mf-summary__name {
    color: rgba(255, 255, 255, 0.9);
}


/* ==========================================================
   17. ILETISIM PAGE (Contact)
   ========================================================== */

/* ─── Contact Hero ─── */
.contact-hero {
    position: relative;
    height: 50vh;
    min-height: 300px;
    max-height: 500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contact-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--manaa-dark-rgb), 0.3) 0%, rgba(var(--manaa-dark-rgb), 0.65) 100%);
}

.contact-hero__content {
    position: relative;
    z-index: 2;
}

.contact-hero__label {
    display: block;
    font-family: var(--font-family-light);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--manaa-taupe);
    margin-bottom: 16px;
}

.contact-hero__title {
    font-family: var(--font-family-bold);
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--manaa-white);
    margin: 0;
}

.contact-hero__line {
    width: 60px;
    height: 2px;
    background: var(--manaa-taupe);
    margin: 24px auto 0;
}

.contact-hero__scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 28px;
    height: 44px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 6px;
    transition: border-color var(--transition-base);
}

.contact-hero__scroll:hover {
    border-color: var(--manaa-taupe);
}

.contact-hero__scroll span {
    width: 3px;
    height: 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(10px); opacity: 0.3; }
}

/* ─── Contact Bar ─── */
.contact-bar {
    background: linear-gradient(165deg, #2c3830 0%, #3a4a40 30%, #2c3830 60%, #2c3830 100%);
    padding: 0;
}

.contact-bar__inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.contact-bar__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 40px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all var(--transition-base);
    position: relative;
}

.contact-bar__item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
}

.contact-bar__item:hover {
    color: var(--manaa-white);
    background: rgba(255, 255, 255, 0.03);
}

.contact-bar__item i {
    font-size: 1.1rem;
    color: var(--manaa-taupe);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.contact-bar__label {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--manaa-taupe);
    margin-bottom: 2px;
}

.contact-bar__value {
    display: block;
    font-family: var(--font-family-light);
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.8);
}

.contact-bar__item:hover .contact-bar__value {
    color: var(--manaa-white);
}

/* ─── Contact Main ─── */
.contact-main {
    padding: 50px 0 40px;
}

.contact-main > .container > .row {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
}

/* ─── Contact Form Section (Left) ─── */
.contact-form-section {
    padding: 60px 50px;
    background: var(--manaa-white);
}

.contact-form-section__header {
    margin-bottom: 40px;
}

.section-label {
    display: inline-block;
    font-family: var(--font-family-bold);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--manaa-taupe);
    margin-bottom: 12px;
}

.contact-form-section__title {
    font-family: var(--font-family-bold);
    font-size: 2rem;
    line-height: 1.2;
    color: var(--manaa-dark);
    margin: 0 0 16px;
}

.contact-form-section__desc {
    font-family: var(--font-family-light);
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--manaa-text);
    max-width: 480px;
    margin: 0;
}

/* Floating label form fields */
.form-floating-group {
    position: relative;
    margin-bottom: 0;
}

.form-floating-group input,
.form-floating-group textarea,
.form-floating-group select {
    width: 100%;
    padding: 20px 0 8px;
    font-family: var(--font-family-base);
    font-size: 0.9rem;
    color: var(--manaa-dark);
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0;
    outline: none;
    transition: border-color var(--transition-base);
    -webkit-appearance: none;
    appearance: none;
}

.form-floating-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-floating-group select {
    cursor: pointer;
}

.form-floating-group label {
    position: absolute;
    top: 18px;
    left: 0;
    font-family: var(--font-family-light);
    font-size: 0.9rem;
    color: rgba(0, 0, 0, 0.35);
    pointer-events: none;
    transition: all 0.25s ease;
    transform-origin: left;
}

.form-floating-group input:focus ~ label,
.form-floating-group input:not(:placeholder-shown) ~ label,
.form-floating-group textarea:focus ~ label,
.form-floating-group textarea:not(:placeholder-shown) ~ label,
.form-floating-group select:focus ~ label,
.form-floating-group select.has-value ~ label,
.form-floating-group select:not([value=""]):valid ~ label {
    top: 2px;
    font-size: 0.65rem;
    font-family: var(--font-family-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--manaa-taupe);
}

.form-floating-group input:focus,
.form-floating-group textarea:focus,
.form-floating-group select:focus {
    border-bottom-color: var(--manaa-taupe);
}

/* Submit button */
.contact-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-family-bold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 16px 48px;
    border: none;
    background: var(--manaa-dark);
    color: var(--manaa-white);
    cursor: pointer;
    transition: all var(--transition-base);
    margin-top: 8px;
}

.contact-submit-btn i {
    font-size: 0.7rem;
    transition: transform var(--transition-base);
}

.contact-submit-btn:hover {
    background: var(--manaa-taupe);
    color: var(--manaa-dark);
}

.contact-submit-btn:hover i {
    transform: translateX(4px);
}

/* CF7 integration */
.contact-form .wpcf7-form p {
    position: relative;
    margin-bottom: 0;
}

.contact-form .wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 24px;
}

.contact-form .wpcf7-form select {
    width: 100%;
    padding: 20px 0 8px;
    font-family: var(--font-family-base);
    font-size: 0.9rem;
    color: var(--manaa-dark);
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0;
    outline: none;
    transition: border-color var(--transition-base);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.contact-form .wpcf7-form select:focus {
    border-bottom-color: var(--manaa-taupe);
}

.contact-form .wpcf7-form p label {
    position: absolute;
    top: 18px;
    left: 0;
    font-family: var(--font-family-light);
    font-size: 0.9rem;
    color: rgba(0, 0, 0, 0.35);
    pointer-events: none;
    transition: all 0.25s ease;
    transform-origin: left;
}

.contact-form .wpcf7-form p.has-value > label,
.contact-form .wpcf7-form p:focus-within > label {
    top: 2px;
    font-size: 0.65rem;
    font-family: var(--font-family-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--manaa-taupe);
}

.contact-form .wpcf7-form input[type="text"],
.contact-form .wpcf7-form input[type="email"],
.contact-form .wpcf7-form input[type="tel"],
.contact-form .wpcf7-form textarea {
    width: 100%;
    padding: 20px 0 8px;
    font-family: var(--font-family-base);
    font-size: 0.9rem;
    color: var(--manaa-dark);
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0;
    outline: none;
    transition: border-color var(--transition-base);
}

.contact-form .wpcf7-form input:focus,
.contact-form .wpcf7-form textarea:focus {
    border-bottom-color: var(--manaa-taupe);
}

.contact-form .wpcf7-form textarea {
    resize: vertical;
    min-height: 100px;
}

.contact-form .wpcf7-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-family-bold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 16px 48px;
    border: none;
    background: var(--manaa-dark);
    color: var(--manaa-white);
    cursor: pointer;
    transition: all var(--transition-base);
    margin-top: 8px;
}

.contact-form .wpcf7-form input[type="submit"]:hover {
    background: var(--manaa-taupe);
    color: var(--manaa-dark);
}

.contact-form .wpcf7-response-output {
    font-family: var(--font-family-light);
    font-size: 0.85rem;
    padding: 12px 16px;
    margin-top: 16px;
    border-radius: 0;
}

.contact-form .wpcf7-mail-sent-ok {
    border-color: var(--manaa-teal);
    color: var(--manaa-teal);
}

.contact-form .wpcf7-validation-errors {
    border-color: var(--manaa-orange);
    color: var(--manaa-orange);
}

.contact-form .wpcf7-not-valid-tip {
    font-family: var(--font-family-light);
    font-size: 0.75rem;
    color: var(--manaa-orange);
    margin-top: 4px;
}

.contact-form .wpcf7-spinner {
    margin-left: 12px;
}

.contact-form .wpcf7-form br {
    display: none;
}

.contact-form .wpcf7-form .wpcf7-recaptcha {
    margin-top: 0;
    margin-bottom: 0;
    display: block;
}

.contact-form .wpcf7-form .wpcf7-form-control-wrap {
    margin-bottom: 12px;
}

/* ─── Contact Info Panel (Right) ─── */
.contact-info-panel {
    background: linear-gradient(160deg, #ffffff 0%, #f8f8f6 55%, #ffffff 100%);
    border-left: 1px solid #d8d8d8;
    height: 100%;
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: hidden;
}

.contact-info-panel::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(160,136,40,0.07) 0%, transparent 70%);
    pointer-events: none;
}

.contact-info-panel::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(44,56,48,0.04) 0%, transparent 70%);
    pointer-events: none;
}

.contact-info-panel__inner {
    padding: 60px 50px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.contact-office {
    padding: 8px 0;
}

.contact-office__icon {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(160, 136, 40, 0.3);
    border-radius: 50%;
    background: rgba(160, 136, 40, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.contact-office__icon i {
    font-size: 0.9rem;
    color: var(--manaa-taupe);
}

.contact-office__title {
    font-family: var(--font-family-bold);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--manaa-dark);
    margin: 0 0 12px;
}

.contact-office__address {
    font-family: var(--font-family-light);
    font-size: 0.9425rem;
    line-height: 1.7;
    color: #2c3830;
}

.contact-office__address p {
    margin: 0;
}

.contact-office__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-base);
    font-size: 1rem;
    font-weight: 500;
    color: var(--manaa-dark);
    text-decoration: none;
    margin-top: 12px;
    transition: color var(--transition-base);
}

.contact-office__link i {
    font-size: 0.75rem;
    color: var(--manaa-taupe);
}

.contact-office__link:hover {
    color: var(--manaa-taupe);
}

.contact-office__link--email {
    margin-top: 8px;
}

.contact-office__divider {
    height: 1px;
    background: rgba(160, 136, 40, 0.18);
    margin: 24px 0;
}

/* Social */
.contact-social__links {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.contact-social__links a {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(44, 56, 48, 0.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(44, 56, 48, 0.5);
    text-decoration: none;
    transition: all var(--transition-base);
    font-size: 0.85rem;
}

.contact-social__links a:hover {
    border-color: var(--manaa-taupe);
    color: var(--manaa-taupe);
    background: rgba(var(--manaa-taupe-rgb), 0.08);
}

/* ─── Google Maps Embed ─── */
.contact-gmap {
    padding: 0 0 60px;
}
.contact-gmap__wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}
.contact-gmap__wrap iframe {
    display: block;
    width: 100%;
    height: 480px;
    border: 0;
    max-width: 100%;
}
@media (max-width: 767.98px) {
    .contact-gmap__wrap iframe { height: 360px; }
}
.contact-gmap__card {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 10;
    background: rgba(255,255,255,0.97);
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.13);
    min-width: 240px;
    max-width: 300px;
}
.contact-gmap__card-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #2c3830;
    line-height: 1.35;
    margin-bottom: 8px;
}
.contact-gmap__card-addr {
    font-size: 0.75rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 12px;
}
.contact-gmap__card-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1a73e8;
    text-decoration: none;
}
.contact-gmap__card-link:hover { text-decoration: underline; }
@media (max-width: 480px) {
    .contact-gmap__card { max-width: calc(100% - 32px); }
}

/* ─── Map / Kroki Section ─── */
.contact-map-section {
    position: relative;
    background: var(--manaa-cream);
}

.contact-map-section__image {
    width: 100%;
    overflow: hidden;
}

.contact-map-section__image img {
    width: 100%;
    height: auto;
    display: block;
}

.contact-map-section__zoom {
    display: block;
    position: relative;
}

.contact-map-section__zoom-icon {
    position: absolute;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--manaa-dark-rgb), 0.75);
    backdrop-filter: blur(6px);
    padding: 10px 18px;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-family-light);
    font-size: 0.75rem;
    transition: all var(--transition-base);
}

.contact-map-section__zoom:hover .contact-map-section__zoom-icon {
    background: rgba(var(--manaa-dark-rgb), 0.9);
    color: var(--manaa-taupe);
}

.contact-map-section__cta {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.contact-maps-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-family-bold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 16px 48px;
    background: var(--manaa-dark);
    color: var(--manaa-white);
    text-decoration: none;
    transition: all var(--transition-base);
}

.contact-maps-btn:hover {
    background: var(--manaa-taupe);
    color: var(--manaa-dark);
}


/* ==========================================================
   18. FOOTER CTA + FOOTER
   ========================================================== */

/* ─── CTA Section (footer üstü) ─── */
.footer-cta {
    background: #eef1ea;
    border-top: 1px solid #d8e0d0;
    padding: 80px 0;
    position: relative;
}

.footer-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.footer-cta__text h2 {
    font-family: var(--font-family-light);
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    line-height: 1.35;
    color: var(--manaa-dark);
    margin-bottom: 10px;
    letter-spacing: 0.03em;
}

.footer-cta__text p {
    font-family: var(--font-light, sans-serif);
    font-size: 1.15rem;
    color: rgba(44,56,48,0.65);
    margin: 0;
}

.footer-cta__actions {
    display: flex;
    gap: 15px;
    flex-shrink: 0;
}

.footer-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-regular, sans-serif);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 14px 28px;
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.footer-cta__btn--primary {
    background: var(--manaa-taupe, #a08828);
    color: #fff;
    border: 1px solid var(--manaa-taupe, #a08828);
}

.footer-cta__btn--primary:hover {
    background: var(--manaa-blue, #8a7420);
    border-color: var(--manaa-blue, #8a7420);
    color: #fff;
}

.footer-cta__btn--primary svg {
    transition: transform 0.3s ease;
}

.footer-cta__btn--primary:hover svg {
    transform: translateX(4px);
}

.footer-cta__btn--outline {
    background: transparent;
    color: var(--manaa-dark);
    border: 1px solid rgba(44,56,48,0.3);
}

.footer-cta__btn--outline:hover {
    border-color: var(--manaa-dark);
    color: var(--manaa-dark);
    background: rgba(44,56,48,0.06);
}

@media (max-width: 767.98px) {
    .footer-cta { padding: 50px 0; }
    .footer-cta__inner { flex-direction: column; text-align: center; }
    .footer-cta__text h2 { font-size: 1.4rem; }
    .footer-cta__text p { font-size: 1rem; }
    .footer-cta__actions { flex-direction: column; width: 100%; }
    .footer-cta__btn { justify-content: center; }
}

/* ─── Footer Ana Bölüm — Light Theme ─── */
.manaa-footer {
    background: #F4F4F2;
    color: #2c3830;
    border-top: 1px solid rgba(44,56,48,0.08);
}

.manaa-footer__main {
    padding: 70px 0 50px;
}

.manaa-footer__about {
    max-width: 320px;
}

.manaa-footer__logo-link {
    display: inline-block;
    margin-bottom: 20px;
}

.manaa-footer__logo {
    max-width: 260px;
    filter: none;
    opacity: 1;
}

.manaa-footer__desc {
    font-family: var(--font-light, sans-serif);
    font-size: 0.78rem !important;
    line-height: 1.7;
    color: rgba(44,56,48,0.6);
    margin-bottom: 22px;
}

.manaa-footer__social {
    display: flex;
    gap: 10px;
}

.manaa-footer__social a {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(44,56,48,0.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(44,56,48,0.5);
    font-size: 0.8rem;
    transition: all 0.3s ease;
    background: transparent;
}

.manaa-footer__social a:hover {
    background: var(--manaa-taupe, #a08828);
    border-color: var(--manaa-taupe, #a08828);
    color: #fff;
}

@media (max-width: 767px) {
    .manaa-footer__social a {
        width: 44px; height: 44px;
        font-size: 0.9rem;
    }
}

/* Footer Titles */
.manaa-footer__title {
    font-family: var(--font-bold, sans-serif);
    font-size: 0.66rem !important;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--manaa-taupe, #a08828);
    margin-bottom: 22px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(44,56,48,0.08);
}

/* Footer Links */
.manaa-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.manaa-footer__links li {
    margin-bottom: 10px;
}

.manaa-footer__links a {
    font-family: var(--font-light, sans-serif);
    font-size: 0.85rem;
    color: rgba(44,56,48,0.68);
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.2s ease;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.manaa-footer__links a:hover {
    color: var(--manaa-taupe);
    padding-left: 3px;
}

.manaa-footer__link-sub {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(44,56,48,0.38);
}

/* Footer Contact List */
.manaa-footer__contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.manaa-footer__contact-list li {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(44,56,48,0.07);
}

.manaa-footer__contact-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.manaa-footer__contact-list li i {
    color: var(--manaa-taupe, #a08828);
    font-size: 0.8rem;
    margin-top: 3px;
    width: 16px;
    flex-shrink: 0;
}

.manaa-footer__contact-label {
    display: block;
    font-family: var(--font-regular, sans-serif);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(44,56,48,0.38);
    margin-bottom: 3px;
}

.manaa-footer__contact-list a {
    font-family: var(--font-light, sans-serif);
    font-size: 0.9rem;
    color: rgba(44,56,48,0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.manaa-footer__contact-list a:hover {
    color: var(--manaa-taupe);
}

/* Footer Bottom Bar */
.manaa-footer__bottom {
    background: #EAEAE8;
    border-top: 1px solid rgba(44,56,48,0.1);
    padding: 18px 0;
}

.manaa-footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.manaa-footer__credit {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: opacity 0.3s ease;
    margin-top: 0;
}

.manaa-footer__credit:hover {
    opacity: 0.65;
}

.manaa-footer__credit-logo {
    width: 50px;
    height: auto;
}

.manaa-footer__credit span {
    font-family: var(--font-light, sans-serif);
    font-size: 0.6rem;
    color: rgba(44,56,48,0.32);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.manaa-footer__bottom p {
    font-family: var(--font-light, sans-serif);
    font-size: 0.72rem !important;
    color: rgba(44,56,48,0.42);
    margin: 0;
}

.manaa-footer__credit {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: opacity 0.3s ease;
    opacity: 1;
    color: rgba(44,56,48,0.32) !important;
    margin-left: auto;
}

.manaa-footer__credit a {
    color: rgba(44,56,48,0.32) !important;
    text-decoration: none;
}

.manaa-footer__credit:hover {
    opacity: 0.65;
}

.manaa-footer__credit img {
    height: auto;
    width: auto;
}

.manaa-footer__credit span {
    font-family: var(--font-light, sans-serif);
    font-size: 0.7rem;
    color: rgba(44,56,48,0.38);
}

@media (max-width: 767.98px) {
    .manaa-footer__main { padding: 50px 0 30px; }
    .manaa-footer__about { max-width: 100%; margin-bottom: 30px; }
    .manaa-footer__bottom-inner { flex-direction: column; gap: 10px; text-align: center; }
}


/* ==========================================================
   19. SWIPER CUSTOMIZATIONS
   ========================================================== */
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--manaa-white);
    opacity: 0.5;
    transition: all var(--transition-base);
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--manaa-taupe);
}

.swiper-button-prev,
.swiper-button-next {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all var(--transition-base);
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 14px;
    color: var(--manaa-white);
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background: var(--manaa-white);
    border-color: var(--manaa-white);
}

.swiper-button-prev:hover::after,
.swiper-button-next:hover::after {
    color: var(--manaa-dark);
}

/* Dark variant for light backgrounds */
.swiper--dark .swiper-pagination-bullet {
    background: var(--manaa-dark);
}

.swiper--dark .swiper-pagination-bullet-active {
    background: var(--manaa-taupe);
}

.swiper--dark .swiper-button-prev,
.swiper--dark .swiper-button-next {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
}

.swiper--dark .swiper-button-prev::after,
.swiper--dark .swiper-button-next::after {
    color: var(--manaa-dark);
}


/* ==========================================================
   20. FANCYBOX CUSTOMIZATIONS
   ========================================================== */
.fancybox__backdrop {
    background: rgba(0, 0, 0, 0.92);
}

.fancybox__toolbar {
    --fancybox-color: var(--manaa-white);
}

.fancybox__nav {
    --fancybox-color: var(--manaa-white);
}

.fancybox__content {
    padding: 0;
}

.fancybox__slide {
    padding: 40px;
}


.fancybox__thumbs {
    --fancybox-thumbs-border-radius: 0;
}

/* FancyBox 3 compatibility */
.fancybox-bg {
    background: rgba(0, 0, 0, 0.92);
}

.fancybox-button {
    color: var(--manaa-white);
    background: transparent;
}

.fancybox-button:hover {
    color: var(--manaa-taupe);
}

.fancybox-thumbs__list a::before {
    border-color: var(--manaa-taupe);
}


/* ==========================================================
   21. ANIMATIONS
   ========================================================== */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.fade-in.is-visible {
    opacity: 1;
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scale-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Stagger delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }
.delay-7 { transition-delay: 0.7s; }
.delay-8 { transition-delay: 0.8s; }

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg, var(--manaa-cream) 25%, rgba(0, 0, 0, 0.04) 50%, var(--manaa-cream) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Page transition */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--manaa-cream);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.page-transition.is-active {
    opacity: 1;
    pointer-events: all;
}


/* ==========================================================
   22. WORDPRESS DEFAULTS / OVERRIDES
   ========================================================== */
.alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}

.alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}

.wp-caption {
    max-width: 100%;
    margin-bottom: 1rem;
}

.wp-caption-text {
    font-family: var(--font-family-light);
    font-size: 0.8rem;
    color: var(--manaa-text);
    padding-top: 8px;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background: var(--manaa-white);
    clip: auto !important;
    clip-path: none;
    color: var(--manaa-dark);
    display: block;
    font-size: 0.875rem;
    height: auto;
    left: 5px;
    padding: 15px 23px 14px;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* WP admin bar offset */
.admin-bar .manaa-navbar {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .manaa-navbar {
        top: 46px;
    }
}


/* ==========================================================
   23. BREADCRUMBS
   ========================================================== */
.manaa-breadcrumbs {
    padding: 12px 0;
    font-family: var(--font-family-light);
    font-size: 0.75rem;
    color: var(--manaa-text);
}

.manaa-breadcrumbs a {
    color: var(--manaa-text);
    transition: color var(--transition-base);
}

.manaa-breadcrumbs a:hover {
    color: var(--manaa-taupe);
}

.manaa-breadcrumbs .separator {
    margin: 0 8px;
    color: rgba(0, 0, 0, 0.2);
}

.manaa-breadcrumbs .current {
    color: var(--manaa-taupe);
}


/* ==========================================================
   24. MISC COMPONENTS
   ========================================================== */

/* Back to top */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    background: var(--manaa-dark);
    color: var(--manaa-white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-base);
    z-index: 99;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--manaa-taupe);
}

@media (max-width: 767px) {
    .back-to-top {
        width: 44px; height: 44px;
        bottom: 20px; right: 16px;
        font-size: 0.9rem;
    }
}

/* Cookie notice */
.cookie-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--manaa-dark);
    color: var(--manaa-white);
    padding: 16px 20px;
    z-index: 9998;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-family: var(--font-family-light);
    font-size: 0.8rem;
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.cookie-notice.is-visible {
    transform: translateY(0);
}

.cookie-notice__btn {
    font-family: var(--font-family-bold);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 8px 20px;
    border: 1px solid var(--manaa-white);
    background: transparent;
    color: var(--manaa-white);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.cookie-notice__btn:hover {
    background: var(--manaa-white);
    color: var(--manaa-dark);
}

@media (max-width: 767px) {
    .cookie-notice {
        flex-direction: column;
        text-align: center;
        padding: 20px 16px;
        font-size: 0.85rem;
        gap: 16px;
    }
    .cookie-notice__btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 0.75rem;
    }
}

/* Preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--manaa-cream);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
}

.preloader.is-loaded {
    opacity: 0;
    pointer-events: none;
}

.preloader__logo {
    max-width: 100px;
    animation: pulse 1.5s infinite;
}

/* Social share */
.share-buttons {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}

.share-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: var(--manaa-text);
    font-size: 0.85rem;
    transition: all var(--transition-base);
}

.share-btn:hover {
    background: var(--manaa-dark);
    border-color: var(--manaa-dark);
    color: var(--manaa-white);
}

/* WP Pagination */
.manaa-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 40px 0;
}

.manaa-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-family: var(--font-family-bold);
    font-size: 0.8rem;
    color: var(--manaa-text);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all var(--transition-base);
}

.manaa-pagination .page-numbers:hover {
    border-color: var(--manaa-dark);
    color: var(--manaa-dark);
}

.manaa-pagination .page-numbers.current {
    background: var(--manaa-dark);
    border-color: var(--manaa-dark);
    color: var(--manaa-white);
}


/* ==========================================================
   25. RESPONSIVE - SM (576px+)
   ========================================================== */
@media (min-width: 576px) {

    .section-projects__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .prj-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-related__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .press-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .sebep-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .manaa-hero__project-specs {
        gap: 24px;
    }
}


/* ==========================================================
   26. RESPONSIVE - MD (768px+)
   ========================================================== */
@media (min-width: 768px) {

    body {
        font-size: 16px;
    }

    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.5rem; }

    .section-padding {
        padding-top: var(--section-py-tablet);
        padding-bottom: var(--section-py-tablet);
    }

    .page-section {
        padding: var(--section-py-tablet) 0;
    }

    /* Navbar */
    .manaa-navbar {
        padding: 0 30px;
    }

    .manaa-navbar__logo img {
        max-height: 50px;
    }

    /* Menu overlay */
    .manaa-menu-overlay__right {
        display: block;
    }

    .manaa-menu-overlay__left {
        padding: 40px 40px 40px 50px;
    }

    .menu-pages .menu-group__link {
        font-size: 1.8rem;
    }

    /* Hero */
    .manaa-hero__slide-content {
        bottom: 80px;
        left: 50px;
        right: 120px;
    }

    .manaa-hero__project-number {
        font-size: 4rem;
    }

    .manaa-hero__nav {
        bottom: 80px;
        right: 50px;
    }

    .manaa-hero__pagination {
        right: 50px;
    }

    /* About */
    .section-about__content {
        padding: 60px 50px;
    }

    .section-about__image-col {
        min-height: 400px;
    }

    /* Counter */
    .section-counter {
        padding: 60px 0;
    }

    .counter-item__number {
        font-size: 3.5rem;
    }

    /* Video */
    .section-video {
        min-height: 450px;
    }

    .section-video__play {
        width: 80px;
        height: 80px;
        font-size: 1.4rem;
    }

    /* Contact page */
    .contact-hero__title {
        font-size: 3.5rem;
    }

    .contact-form-section {
        padding: 70px 60px;
    }

    .contact-info-panel__inner {
        padding: 70px 50px;
    }

    /* Project detail */
    .project-hero__number {
        font-size: 4.5rem;
    }

    .project-hero__title {
        font-size: 1.2rem;
    }

    .project-content {
        padding: 60px 30px;
    }

    .project-specs {
        top: var(--nav-height-mobile);
    }

    .project-specs__divider {
        display: block;
    }

    .project-specs__inner {
        gap: 16px;
    }

    /* Page hero */
    .page-hero__title {
        font-size: 1.8rem;
    }

    /* Footer */
    .manaa-footer {
        padding: 60px 0 0;
    }
}


/* ==========================================================
   27. RESPONSIVE - LG (992px+)
   ========================================================== */
@media (min-width: 992px) {

    .section-padding {
        padding-top: var(--section-py-desktop);
        padding-bottom: var(--section-py-desktop);
    }

    .page-section {
        padding: var(--section-py-desktop) 0;
    }

    /* Navbar */
    .manaa-navbar {
        height: var(--nav-height);
        padding: 0 40px;
    }

    .manaa-navbar__logo img {
        max-height: 63px;
    }

    /* Hero left panel */
    .manaa-hero__panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 380px;
        min-width: 380px;
        background: var(--manaa-cream);
        z-index: 2;
        padding: 40px;
    }

    .manaa-hero__panel-logo {
        max-width: 160px;
        margin-bottom: 24px;
    }

    .manaa-hero__panel-text {
        font-family: var(--font-family-light);
        font-size: 0.8rem;
        text-align: center;
        color: var(--manaa-text);
        line-height: 1.7;
    }

    .manaa-hero__panel-badge {
        margin-top: auto;
        padding-top: 40px;
    }

    .manaa-hero__panel-badge img {
        max-width: 80px;
    }

    /* Menu overlay */
    .manaa-menu-overlay__left {
        padding: 60px 60px 60px 80px;
    }

    .menu-pages .menu-group__link {
        font-size: 2.2rem;
    }

    /* Project cards */
    .project-card__content {
        padding: 30px;
    }

    .project-card__number {
        font-size: 2.5rem;
    }

    /* About */
    .section-about__image-col {
        min-height: 500px;
    }

    .section-about__content {
        padding: 80px 60px;
    }

    /* Counter */
    .section-counter__grid {
        gap: 60px;
    }

    .counter-item__number {
        font-size: 4rem;
    }

    /* Archive */
    .prj-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Project detail */
    .project-gallery__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .project-related__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .project-content {
        padding: 80px 20px;
    }

    .project-video {
        min-height: 400px;
    }

    .project-specs {
        top: var(--nav-height);
    }

    /* Team */
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    /* Press */
    .press-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    /* 10 Sebep */
    .sebep-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
    }

    /* Values */
    .values-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Video */
    .section-video {
        min-height: 500px;
    }

    /* Page hero */
    .page-hero {
        min-height: 350px;
    }

    .page-hero__title {
        font-size: 2rem;
    }
}


/* ==========================================================
   28. RESPONSIVE - XL (1200px+)
   ========================================================== */
@media (min-width: 1200px) {

    h1 { font-size: 3rem; }
    h2 { font-size: 2.25rem; }

    /* Navbar */
    .manaa-navbar {
        padding: 0 60px;
    }

    /* Hero */
    .manaa-hero__slide-content {
        bottom: 100px;
        left: 60px;
        right: 160px;
    }

    .manaa-hero__project-number {
        font-size: 5rem;
    }

    .manaa-hero__nav {
        bottom: 100px;
        right: 60px;
    }

    .manaa-hero__pagination {
        right: 60px;
    }

    /* Project detail */
    .project-hero__number {
        font-size: 5.5rem;
    }

    .project-hero__title {
        font-size: 1.4rem;
        letter-spacing: 0.3em;
    }

    /* Counter */
    .counter-item__number {
        font-size: 4.5rem;
    }

    /* About */
    .section-about__content {
        padding: 100px 80px;
    }

    /* Menu */
    .menu-pages .menu-group__link {
        font-size: 2.5rem;
    }

    /* Project cards */
    .project-card__number {
        font-size: 2.8rem;
    }

    .project-card__content {
        padding: 36px;
    }
}


/* ==========================================================
   29. RESPONSIVE - XXL (1400px+)
   ========================================================== */
@media (min-width: 1400px) {

    .manaa-hero__panel {
        width: 420px;
        min-width: 420px;
    }

    .section-about__content {
        padding: 120px 100px;
    }

    .project-content {
        max-width: 780px;
    }

    .menu-pages .menu-group__link {
        font-size: 2.8rem;
    }
}


/* ==========================================================
   30. PRINT STYLES
   ========================================================== */
@media print {

    .manaa-navbar,
    .manaa-hamburger,
    .manaa-menu-overlay,
    .manaa-footer__social,
    .back-to-top,
    .cookie-notice,
    .preloader,
    .swiper-pagination,
    .swiper-button-prev,
    .swiper-button-next,
    .share-buttons {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    .manaa-hero,
    .page-hero,
    .project-hero {
        height: auto;
        min-height: auto;
    }

    .project-hero {
        padding: 40px 0;
    }

    .project-card {
        break-inside: avoid;
    }

    .section-padding {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

/* ==========================================================
   HOMEPAGE — Cinematic 7-Section Layout
   ========================================================== */

/* Ana sayfada main padding kaldır */
.home #main-content { padding: 0; margin: 0; }

/* Single project main padding kaldır */
.single-manaa_project #main-content { padding: 0; margin: 0; }

.hero-fullscreen {
    display: flex;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* Hamburger — ana sayfa sol üst */
.hero-hamburger {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 1001;
    width: 30px;
    height: 22px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.hero-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,0.8);
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.hero-hamburger span:last-child {
    margin-bottom: 0;
}

.hero-hamburger.is-active span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.hero-hamburger.is-active span:nth-child(2) {
    opacity: 0;
}

.hero-hamburger.is-active span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

.menu-open .hero-hamburger {
    display: none;
}

/* ─── Sol Panel ─── */
.hero-panel {
    width: 630px;
    flex-shrink: 0;
    background: linear-gradient(165deg, #2c3830 0%, #3a4a40 30%, #2c3830 60%, #2c3830 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 40px 30px;
    position: relative;
    z-index: 10;
}

.hero-panel__top {
    text-align: center;
    padding-top: 50px;
}

.hero-panel__logo {
    max-width: 160px;
}

.hero-panel__center {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.hero-panel__tagline {
    font-family: var(--font-light, sans-serif);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(255,255,255,0.5);
}

.hero-panel__subtitle {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--manaa-taupe);
    margin-top: 4px;
    line-height: 1;
}

.hero-panel__project-info {
    transition: opacity 0.4s ease;
}

.hero-panel__project-info.is-changing {
    opacity: 0;
}

.hero-panel__project-number {
    display: block;
    font-family: var(--font-bold, sans-serif);
    font-size: 3.5rem;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.05em;
}

.hero-panel__project-location {
    display: block;
    font-family: var(--font-light, sans-serif);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--manaa-taupe, #a08828);
    margin-top: 8px;
}

.hero-panel__project-subtitle {
    display: block;
    font-family: var(--font-light, sans-serif);
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    margin-top: 5px;
    min-height: 1em;
}

.hero-panel__counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.hero-panel__current {
    font-family: var(--font-bold, sans-serif);
    font-size: 1.2rem;
    color: #fff;
}

.hero-panel__divider {
    width: 30px;
    height: 1px;
    background: rgba(255,255,255,0.3);
}

.hero-panel__total {
    font-family: var(--font-light, sans-serif);
    font-size: 1.2rem;
    color: rgba(255,255,255,0.4);
}

.hero-panel__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.hero-panel__phone {
    font-family: var(--font-light, sans-serif);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: color 0.3s ease;
}

.hero-panel__phone:hover {
    color: #fff;
}

.hero-panel__phone i {
    color: var(--manaa-taupe, #a08828);
    margin-right: 5px;
    font-size: 0.7rem;
}

.hero-panel__social {
    display: flex;
    gap: 10px;
}

.hero-panel__social a {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.6);
    font-size: 0.75rem;
    transition: all 0.3s ease;
}

.hero-panel__social a:hover {
    background: var(--manaa-taupe, #a08828);
    border-color: var(--manaa-taupe, #a08828);
    color: #fff;
}

.hero-panel__lang {
    font-family: var(--font-bold, sans-serif);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 5px 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hero-panel__lang:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}

/* ─── Sol Panel Stats ─── */
.hero-panel__stats {
    text-align: center;
}

.hero-panel__stat-number {
    display: block;
    font-family: var(--font-light, sans-serif);
    font-size: 3rem;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.05em;
}

.hero-panel__stat-label {
    display: block;
    font-family: var(--font-light, sans-serif);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--manaa-taupe, #a08828);
    margin-top: 6px;
}

/* ─── Sağ: Proje Carousel ─── */
.hero-carousel-wrap {
    flex: 1;
    overflow: hidden;
    background: #111;
    position: relative;
}

/* Fade edges — hints at more content */
.hero-carousel-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 100%;
    background: linear-gradient(to left, #111 0%, transparent 100%);
    z-index: 5;
    pointer-events: none;
}

.hero-carousel-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 100%;
    background: linear-gradient(to right, #111 0%, transparent 100%);
    z-index: 5;
    pointer-events: none;
}

.hero-carousel-wrap .heroGridSwiper.swiper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-carousel-wrap .heroGridSwiper .swiper-wrapper {
    height: 100% !important;
}

.heroGridSwiper .swiper-slide {
    height: calc((100% - 4px) / 3) !important;
}

.hero-grid__card {
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
}

.hero-grid__card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.hero-grid__card:hover .hero-grid__card-bg {
    transform: scale(1.08);
}

.hero-grid__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.15) 50%,
        rgba(0, 0, 0, 0.05) 100%
    );
    transition: background 0.4s ease;
}

.hero-grid__card:hover .hero-grid__card-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.15) 100%
    );
}

.hero-grid__card-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2;
    transition: transform 0.4s ease;
}

.hero-grid__card:hover .hero-grid__card-content {
    transform: translateY(-8px);
}

.hero-grid__card-prefix {
    display: block;
    font-family: var(--font-light, sans-serif);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--manaa-taupe, #a08828);
    margin-bottom: 2px;
}

.hero-grid__card-number {
    display: block;
    font-family: var(--font-bold, sans-serif);
    font-size: 2.2rem;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.03em;
}

.hero-grid__card-location {
    display: block;
    font-family: var(--font-light, sans-serif);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
}

/* Detail — visible on hover */
.hero-grid__card-detail {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    max-width: 50%;
}

.hero-grid__card:hover .hero-grid__card-detail {
    opacity: 1;
    transform: translateY(0);
}

.hero-grid__card-detail span {
    font-family: var(--font-light, sans-serif);
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.03em;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    display: block;
    line-height: 1.4;
}

.hero-grid__card-detail i {
    color: var(--manaa-taupe, #a08828);
    margin-right: 5px;
    font-size: 0.5rem;
    flex-shrink: 0;
}

/* ─── Homepage Responsive ─── */
@media (max-width: 991.98px) {
    .hero-panel {
        width: 400px;
        padding: 30px 20px;
    }

    .heroGridSwiper .swiper-slide {
        height: calc((100% - 2px) / 2) !important;
    }
}

@media (max-width: 767.98px) {
    .hero-fullscreen {
        flex-direction: column;
        height: auto;
    }

    .hero-panel {
        width: 100%;
        flex-direction: row;
        padding: 20px 20px;
        gap: 0;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }

    .hero-panel__top { padding-top: 0; }
    .hero-panel__logo { max-width: 90px; }
    .hero-panel__center { display: none; }
    .hero-panel__tagline { display: none; }
    .hero-panel__bottom { display: none; }

    .hero-hamburger {
        top: 38px;
        left: 20px;
    }

    .hero-carousel-wrap {
        height: 70vh;
        min-height: 400px;
    }

    .heroGridSwiper .swiper-slide {
        height: calc((100% - 2px) / 2) !important;
    }

    .hero-grid__card-number {
        font-size: 1.6rem;
    }

    .hero-grid__card-detail {
        display: none;
    }
}

@media (max-width: 575px) {
    .hero-panel { padding: 16px; }
    .hero-panel__logo { max-width: 80px; }
    .hero-carousel-wrap { height: 60vh; min-height: 350px; }
    .heroGridSwiper .swiper-slide {
        height: calc((100% - 2px) / 2) !important;
    }
    .hero-grid__card-number { font-size: 1.3rem; }
}


/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — NEW SECTIONS
   ═══════════════════════════════════════════════════════════ */

/* ── HP Hero — Full Screen Ken Burns ── */
.hp-hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hp-hero__bg {
    position: absolute;
    inset: -5%;
    width: 110%;
    height: 110%;
    background-size: cover;
    background-position: center;
    animation: kenBurns 20s ease infinite alternate;
}

@keyframes kenBurns {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.05) translate(-0.5%, -0.5%); }
}

.hp-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.2) 40%,
        rgba(0, 0, 0, 0.15) 100%
    );
}

.hp-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.hp-hero__logo {
    max-width: 180px;
    margin-bottom: 24px;
    opacity: 0.95;
}

.hp-hero__tagline {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 16px;
}

.hp-hero__sub {
    font-family: var(--font-family-light);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.5);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

/* 5 door accent strip */
.hp-hero__accent {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--manaa-gradient-wide);
    z-index: 3;
}

/* Scroll indicator */
.hp-hero__scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    text-align: center;
}

.hp-hero__scroll span {
    display: block;
    font-family: var(--font-family-light);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 10px;
}

.hp-hero__scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
    margin: 0 auto;
    animation: scrollPulse 2s ease infinite;
}

/* ── HP Brand Manifesto ── */
.hp-brand {
    background: var(--manaa-cream, #f5f3ee);
    padding: 100px 0;
}

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

.hp-brand__image {
    max-width: 100%;
    height: auto;
}

.hp-brand__philosophy {
    font-family: var(--font-family-light);
    font-size: 2.2rem;
    line-height: 1.4;
    color: var(--manaa-dark, #2c3830);
    margin: 0 0 20px;
}

.hp-brand__desc {
    font-family: var(--font-family-light);
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(44, 56, 48, 0.65);
    margin: 0 0 32px;
}

.hp-brand__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-family-bold);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--manaa-taupe);
    text-decoration: none;
    padding: 14px 0;
    border-bottom: 1px solid rgba(160, 136, 40, 0.4);
    transition: border-color 0.3s, color 0.3s;
}

.hp-brand__cta:hover {
    color: var(--manaa-blue, #8a7420);
    border-color: var(--manaa-blue, #8a7420);
}

.hp-brand__cta svg {
    transition: transform 0.3s;
}

.hp-brand__cta:hover svg {
    transform: translateX(4px);
}

/* ── HP Projects — Asymmetric Grid ── */
.hp-projects {
    background: var(--manaa-dark);
    padding: 80px 0;
}

.hp-projects__header {
    margin-bottom: 40px;
}

.hp-projects__label {
    font-family: var(--font-family-bold);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.3);
}

.hp-projects__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 280px;
    gap: 4px;
}

.hp-projects__card {
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

.hp-projects__card--large {
    grid-column: span 7;
    grid-row: span 2;
}

.hp-projects__card--medium {
    grid-column: span 5;
}

.hp-projects__card--small {
    grid-column: span 4;
}

.hp-projects__card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.hp-projects__card:hover .hp-projects__card-bg {
    transform: scale(1.06);
}

.hp-projects__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.15) 50%,
        rgba(0, 0, 0, 0.05) 100%
    );
    transition: background 0.4s ease;
}

.hp-projects__card:hover .hp-projects__card-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.1) 100%
    );
}

.hp-projects__card-content {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 2;
    transition: transform 0.4s ease;
}

.hp-projects__card:hover .hp-projects__card-content {
    transform: translateY(-6px);
}

.hp-projects__card-num {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.15);
    line-height: 1;
    margin-bottom: 6px;
}

.hp-projects__card-name {
    font-family: var(--font-family-bold);
    font-size: 1.3rem;
    color: #fff;
    margin: 0 0 4px;
    letter-spacing: 0.03em;
}

.hp-projects__card-loc {
    font-family: var(--font-family-light);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.5);
}

.hp-projects__footer {
    text-align: center;
    margin-top: 40px;
}

.hp-projects__all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-bold);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--manaa-taupe);
    text-decoration: none;
    padding: 12px 0;
    border-bottom: 1px solid rgba(var(--manaa-taupe-rgb), 0.3);
    transition: color 0.3s, border-color 0.3s;
}

.hp-projects__all:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

.hp-projects__all svg {
    transition: transform 0.3s;
}

.hp-projects__all:hover svg {
    transform: translateX(4px);
}

/* ── HP Stats — Counter Section ── */
.hp-stats {
    background: linear-gradient(165deg, #1e1f2e, #2c3830, #261e30);
    padding: 60px 0;
    position: relative;
}

.hp-stats__accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--manaa-gradient-wide);
}

.hp-stats__grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 60px;
}

.hp-stats__item {
    text-align: center;
    min-width: 160px;
}

.hp-stats__number {
    font-family: var(--font-family-bold);
    font-size: 3.5rem;
    color: var(--manaa-taupe);
    line-height: 1;
    display: inline;
}

.hp-stats__suffix {
    font-family: var(--font-family-light);
    font-size: 2rem;
    color: var(--manaa-taupe);
}

.hp-stats__label {
    display: block;
    font-family: var(--font-family-light);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 10px;
}

/* ══════════════════════════════════════════════════════════════
   ALT-1: Rakamlarla MaaNaa — Açık Sayaç Barı
   ══════════════════════════════════════════════════════════════ */
.alt1-stats {
    background: #ffffff;
    border-top: 1px solid #e8e0c8;
    border-bottom: 1px solid #e8e0c8;
    padding: 50px 0;
}

.alt1-stats__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

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

.alt1-stats__number {
    font-family: var(--font-family-bold, sans-serif);
    font-size: 2.8rem;
    color: var(--manaa-dark, #2c3830);
    line-height: 1;
    letter-spacing: -0.02em;
}

.alt1-stats__plus {
    font-family: var(--font-family-bold, sans-serif);
    font-size: 2rem;
    color: var(--manaa-taupe, #a08828);
}

.alt1-stats__label {
    display: block;
    margin-top: 8px;
    font-family: var(--font-family-light, sans-serif);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(44,56,48,0.45);
}

.alt1-stats__divider {
    width: 1px;
    height: 50px;
    background: rgba(44,56,48,0.12);
}

/* ══════════════════════════════════════════════════════════════
   ALT-2: Tek Cümle Statement
   ══════════════════════════════════════════════════════════════ */
.alt2-statement {
    padding: 100px 0;
    text-align: center;
    background: var(--manaa-cream, #f5f1eb);
}

.alt2-statement__quote {
    font-family: var(--font-family-light, serif);
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    color: var(--manaa-dark, #2c3830);
    line-height: 1.3;
    margin: 0 auto 24px;
    max-width: 700px;
    font-style: normal;
}

.alt2-statement__sub {
    font-family: var(--font-family-light, sans-serif);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: rgba(26,26,46,0.5);
    margin: 0 0 32px;
}

.alt2-statement__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-medium, sans-serif);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--manaa-dark, #2c3830);
    text-decoration: none;
    border-bottom: 1px solid var(--manaa-taupe, #a08828);
    padding-bottom: 4px;
    transition: all 0.3s ease;
}

.alt2-statement__cta:hover {
    color: var(--manaa-taupe, #a08828);
    border-color: var(--manaa-dark, #2c3830);
}

/* ══════════════════════════════════════════════════════════════
   ALT-3: Yatay Kayan Değerler — Marquee
   ══════════════════════════════════════════════════════════════ */
.alt3-values {
    background: var(--manaa-dark, #2c3830);
    padding: 28px 0;
    overflow: hidden;
}

.alt3-values__track {
    overflow: hidden;
    width: 100%;
}

.alt3-values__scroll {
    display: flex;
    align-items: center;
    gap: 30px;
    white-space: nowrap;
    animation: alt3Scroll 25s linear infinite;
    width: max-content;
}

.alt3-values__item {
    font-family: var(--font-family-medium, sans-serif);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.8);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.alt3-values__item i {
    font-size: 0.9rem;
    color: var(--manaa-taupe, #a08828);
}

.alt3-values__sep {
    color: rgba(255,255,255,0.15);
    font-size: 0.7rem;
}

@keyframes alt3Scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════════
   ALT-4: Minimal Kartlar — Hover Reveal
   ══════════════════════════════════════════════════════════════ */
.alt4-cards {
    padding: 80px 0;
    background: #fff;
}

.alt4-cards__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.alt4-cards__item {
    padding: 40px 30px;
    text-align: center;
    border-right: 1px solid rgba(0,0,0,0.06);
    transition: all 0.4s ease;
    cursor: default;
}

.alt4-cards__item:last-child { border-right: none; }

.alt4-cards__title {
    font-family: var(--font-family-medium, sans-serif);
    font-size: 1rem;
    color: var(--manaa-dark, #2c3830);
    margin: 0 0 16px;
    letter-spacing: 0.02em;
}

.alt4-cards__line {
    width: 30px;
    height: 2px;
    background: var(--manaa-taupe, #a08828);
    margin: 0 auto 16px;
    transition: width 0.4s ease;
}

.alt4-cards__desc {
    font-family: var(--font-family-light, sans-serif);
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(26,26,46,0.5);
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
}

.alt4-cards__item:hover {
    background: var(--manaa-cream, #f5f1eb);
}

.alt4-cards__item:hover .alt4-cards__line { width: 50px; }

.alt4-cards__item:hover .alt4-cards__desc {
    max-height: 80px;
    opacity: 1;
}

@media (max-width: 768px) {
    .alt1-stats__grid { flex-wrap: wrap; gap: 24px; }
    .alt1-stats__divider { display: none; }
    .alt1-stats__item { flex: 0 0 45%; }
    .alt4-cards__grid { grid-template-columns: repeat(2, 1fr); }
    .alt4-cards__item:nth-child(2) { border-right: none; }
    .alt4-cards__item:nth-child(3),
    .alt4-cards__item:nth-child(4) { border-top: 1px solid rgba(0,0,0,0.06); }
    .alt4-cards__desc { max-height: none; opacity: 1; }
}

@media (max-width: 575px) {
    .alt1-stats__item { flex: 0 0 100%; }
    .alt1-stats__number { font-size: 2.2rem; }
    .alt1-stats { padding: 30px 0; }
}

/* ── HP Video — Minimal Lüks ── */
.hp-video {
    position: relative;
    background: var(--manaa-dark);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: stretch;
    min-height: 280px;
}

.hp-video__bg {
    position: absolute;
    inset: 0;
    left: 40%;
    background-size: cover;
    background-position: center top;
    opacity: 0.18;
}
.hp-video__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--manaa-dark) 0%, transparent 55%);
}

.hp-video__left {
    position: relative;
    z-index: 2;
    padding: clamp(40px, 6vw, 72px) clamp(32px, 5vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 24px;
    max-width: 560px;
    opacity: 0;
    animation: hpVideoFadeIn 0.8s cubic-bezier(0.16,1,0.3,1) 0.1s forwards;
}

@keyframes hpVideoFadeIn {
    to { opacity: 1; }
}

.hp-video__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-family-light);
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(200, 160, 40, 0.85);
}
.hp-video__eyebrow::before {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: rgba(200, 160, 40, 0.6);
    flex-shrink: 0;
}

.hp-video__heading {
    font-family: var(--font-family-bold);
    font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    color: var(--manaa-white);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.05;
}
.hp-video__heading strong {
    display: block;
    font-family: var(--font-family-light);
    font-weight: 300;
    font-size: clamp(2rem, 4vw, 3.4rem);
    letter-spacing: 0.08em;
    background: linear-gradient(135deg, #c8a028, #e8d070, #a08828);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.05;
}

.hp-video__desc {
    font-family: var(--font-family-light);
    font-size: 0.9rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.45);
    max-width: 380px;
    letter-spacing: 0.02em;
    text-align: center;
}

.hp-video__right {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, 6vw, 72px) clamp(40px, 6vw, 80px);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0;
    animation: hpVideoFadeIn 0.8s cubic-bezier(0.16,1,0.3,1) 0.25s forwards;
}

.hp-video__play-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    color: inherit;
}

.hp-video__play {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid rgba(200, 160, 40, 0.5);
    background: rgba(200, 160, 40, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(200, 160, 40, 0.9);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.hp-video__play svg {
    margin-left: 4px;
}

.hp-video__play-wrap:hover .hp-video__play {
    background: rgba(200, 160, 40, 0.2);
    border-color: rgba(200, 160, 40, 0.9);
    transform: scale(1.1);
    color: #e8d070;
}

.hp-video__play-label {
    font-family: var(--font-family-light);
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.hp-video__bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(160, 136, 40, 0.5) 20%,
        rgba(200, 160, 40, 0.85) 50%,
        rgba(160, 136, 40, 0.5) 80%,
        transparent 100%
    );
}

/* ── HP Blog Preview ── */
.hp-blog {
    background: var(--manaa-cream);
    padding: 80px 0;
}

.hp-blog__header {
    margin-bottom: 40px;
}

.hp-blog__label {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--manaa-taupe);
    margin-bottom: 8px;
}

.hp-blog__title {
    font-family: var(--font-family-bold);
    font-size: 1.8rem;
    color: var(--manaa-dark);
    margin: 0;
}

.hp-blog__footer {
    text-align: center;
    margin-top: 40px;
}

.hp-blog__all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-bold);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--manaa-taupe);
    text-decoration: none;
    padding: 12px 0;
    border-bottom: 1px solid rgba(var(--manaa-taupe-rgb), 0.3);
    transition: color 0.3s, border-color 0.3s;
}

.hp-blog__all:hover {
    color: var(--manaa-dark);
    border-color: var(--manaa-dark);
}

.hp-blog__all svg {
    transition: transform 0.3s;
}

.hp-blog__all:hover svg {
    transform: translateX(4px);
}

/* ── WhatsApp Floating Button ── */
.manaa-whatsapp {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    width: 56px;
    height: 56px;
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.manaa-whatsapp:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5);
    color: #fff;
}

/* ── Footer CTA Accent Line ── */
.footer-cta__accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--manaa-gradient-wide);
}

.footer-cta__title {
    font-family: var(--font-family-light);
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    line-height: 1.35;
    letter-spacing: 0.03em;
}

/* ── Sticky Info Button (Single Project) ── */
.sp-sticky-cta {
    position: fixed;
    bottom: 90px;
    right: 24px;
    z-index: 998;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--manaa-taupe);
    color: var(--manaa-dark);
    text-decoration: none;
    padding: 12px 20px;
    font-family: var(--font-family-bold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease, background 0.3s ease;
}

.sp-sticky-cta.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.sp-sticky-cta:hover {
    background: var(--manaa-dark);
    color: var(--manaa-white);
}

/* ── SP Specs Hover ── */
.sp-specs__item {
    transition: background 0.3s ease;
}

.sp-specs__item:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* ── SP Story — Editorial Split Layout ── */
.sp-story--editorial .sp-story__inner--split {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 60px;
    max-width: 960px;
}

.sp-story__sidebar {
    padding-top: 8px;
}

.sp-story__sidebar-label {
    font-family: var(--font-family-bold);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--manaa-taupe);
}

.sp-story__sidebar-accent {
    width: 40px;
    height: 3px;
    background: var(--manaa-gradient-wide);
    margin-top: 16px;
}

.sp-story--editorial .sp-story__main {
    /* inherits existing sp-story__text styles */
}

/* ── SP Gallery Navigation ── */
.sp-gallery__nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sp-gallery__counter {
    font-family: var(--font-family-light);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.1em;
}

.sp-gallery__arrow {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.sp-gallery__arrow:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

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

/* ── SP Video — Cinematic Mode ── */
.sp-video--cinematic {
    position: relative;
    height: 70vh;
    min-height: 400px;
    max-height: 650px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.sp-video--cinematic .sp-video__overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--manaa-dark-rgb), 0.5);
}

.sp-video--cinematic .sp-video__content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.sp-video--cinematic .sp-video__play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
    color: var(--manaa-white);
    margin: 0 auto 20px;
    transition: all var(--transition-base);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-decoration: none;
}

.sp-video--cinematic .sp-video__play svg {
    margin-left: 4px;
}

.sp-video--cinematic .sp-video__play:hover {
    background: var(--manaa-white);
    color: var(--manaa-dark);
    border-color: var(--manaa-white);
    transform: scale(1.08);
}

.sp-video--cinematic .sp-video__text {
    font-family: var(--font-family-light);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* ── SP Related — Improved header with nav ── */
.sp-related__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp-related__nav {
    display: flex;
    gap: 8px;
}

.sp-related__arrow {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.sp-related__arrow:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1199px) {
    .hp-brand__title {
        font-size: 4rem;
    }

    .hp-brand__philosophy {
        font-size: 1.8rem;
    }

    .hp-projects__card--large {
        grid-column: span 12;
        grid-row: span 1;
    }

    .hp-projects__card--medium {
        grid-column: span 6;
    }

    .hp-projects__card--small {
        grid-column: span 6;
    }

    .sp-poi__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .hp-brand__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .hp-brand__title {
        font-size: 3rem;
    }

    .hp-brand__philosophy {
        font-size: 1.6rem;
    }

    .hp-brand {
        padding: 70px 0;
    }

    .hp-projects__card--large,
    .hp-projects__card--medium,
    .hp-projects__card--small {
        grid-column: span 12;
    }

    .hp-projects__grid {
        grid-auto-rows: 250px;
    }

    .hp-stats__grid {
        gap: 40px;
    }

    .hp-video {
        grid-template-columns: 1fr;
    }
    .hp-video__right {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding: 32px clamp(32px, 5vw, 64px);
    }
    .hp-video__play-wrap {
        flex-direction: row;
        gap: 24px;
    }
    .hp-video__play-label {
        writing-mode: horizontal-tb;
        transform: none;
    }
    .hp-video__bg {
        left: 0;
        opacity: 0.1;
    }

    .sp-story--editorial .sp-story__inner--split {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .sp-overview__inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .sp-overview__heading {
        font-size: 1.35rem;
    }

    .sp-features__grid {
        grid-template-columns: 1fr 1fr;
    }

    .sp-spaces__panel-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .sp-spaces__image img {
        height: 300px;
    }

    .sp-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-gallery--grid .sp-gallery__item img {
        height: 220px;
    }

    .sp-poi__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .sp-video--cinematic {
        background-attachment: scroll;
    }
}

@media (max-width: 767px) {
    .hp-hero__logo {
        max-width: 130px;
    }

    .hp-hero__sub {
        font-size: 0.95rem;
        padding: 0 20px;
    }

    .hp-brand {
        padding: 50px 0;
    }

    .hp-brand__title {
        font-size: 2.5rem;
    }

    .hp-brand__philosophy {
        font-size: 1.3rem;
    }

    .hp-projects {
        padding: 50px 0;
    }

    .hp-projects__grid {
        grid-auto-rows: 220px;
        gap: 3px;
    }

    .hp-stats__grid {
        gap: 30px;
    }

    .hp-stats__number {
        font-size: 2.5rem;
    }

    .hp-video__desc {
        display: none;
    }
    .hp-video__heading {
        font-size: 2.2rem;
    }
    .hp-video__heading strong {
        font-size: 1.8rem;
    }

    .hp-blog {
        padding: 50px 0;
    }

    .hp-blog__grid.blog-grid {
        grid-template-columns: 1fr;
    }

    .hp-blog__title {
        font-size: 1.4rem;
    }

    .sp-sticky-cta {
        bottom: 76px;
        right: 16px;
        padding: 10px 16px;
        font-size: 0.7rem;
    }

    .manaa-whatsapp {
        bottom: 16px;
        right: 16px;
        width: 50px;
        height: 50px;
    }

    .sp-gallery__nav {
        gap: 10px;
    }

    .sp-overview {
        padding: 50px 0;
    }

    .sp-overview__inner {
        padding: 0 20px;
        gap: 36px;
    }

    .sp-overview__heading {
        font-size: 1.15rem;
    }

    .sp-overview__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .sp-features {
        padding: 50px 0;
    }

    .sp-features__inner {
        padding: 0 20px;
    }

    .sp-features__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .sp-features__card {
        padding: 24px 20px;
    }

    .sp-spaces {
        padding: 50px 0;
    }

    .sp-spaces__inner {
        padding: 0 20px;
    }

    .sp-spaces__tabs {
        gap: 4px;
    }

    .sp-spaces .project-tabs__btn {
        padding: 10px 16px;
        font-size: 0.7rem;
    }

    .sp-spaces__image img {
        height: 240px;
    }

    .sp-gallery--grid .sp-gallery__header {
        padding: 0 20px 20px;
    }

    .sp-gallery__grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
        gap: 3px;
    }

    .sp-gallery--grid .sp-gallery__item img {
        height: 200px;
    }

    .sp-gallery__filters {
        gap: 6px;
    }

    .sp-gallery__filter-btn {
        padding: 6px 14px;
        font-size: 0.65rem;
    }

    .sp-floorplans {
        padding: 50px 0;
    }

    .sp-floorplans__header {
        padding: 0 20px 20px;
    }

    .spFloorplanSwiper {
        padding: 0 20px;
    }

    .sp-floorplans__item-link img {
        height: 240px;
    }

    .sp-poi {
        padding: 50px 0;
    }

    .sp-poi__inner {
        padding: 0 20px;
    }

    .sp-poi__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .sp-video--cinematic {
        height: 50vh;
        min-height: 300px;
    }
}


/* ═══════════════════════════════════════════════════════════
   SINGLE PROJECT — Scroll Storytelling
   ═══════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────── */
.sp-hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sp-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    transition: transform 0.3s ease;
}

.sp-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(var(--manaa-dark-rgb), 0.90) 0%,
        rgba(var(--manaa-dark-rgb), 0.55) 35%,
        rgba(var(--manaa-dark-rgb), 0.15) 60%,
        transparent 80%
    );
}

.sp-hero__award {
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 3;
}

.sp-hero__award img {
    max-height: 100px;
    opacity: 0.85;
}

.sp-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.sp-hero__prefix {
    display: block;
    font-family: var(--font-family-bold);
    font-size: clamp(2rem, 5vw, 3.5rem);
    text-transform: uppercase;
    letter-spacing: 0.4em;
    margin-bottom: 8px;
    color: #ffffff;
}

/* Reusable: Brand gradient text — use on any element */
.manaa-gradient-text {
    background: var(--manaa-gradient-wide);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 6s ease infinite;
}

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

@keyframes goldShimmer {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* Mouse-interactive gradient — JS sets --mouse-x, --mouse-y */
.manaa-gradient-interactive {
    background: var(--manaa-gradient-wide);
    background-size: 300% 300%;
    background-position: calc(var(--mouse-x, 50) * 1%) calc(var(--mouse-y, 50) * 1%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.3s ease;
}

.sp-hero__number {
    font-family: var(--font-family-bold);
    font-size: clamp(5rem, 12vw, 10rem);
    line-height: 1;
    letter-spacing: 0.05em;
    margin: 0;
    color: #ffffff;
}

.sp-hero__location {
    display: block;
    font-family: var(--font-family-bold);
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    letter-spacing: 0.35em;
    margin-top: 12px;
    color: #ffffff;
}

.sp-hero__subtitle {
    display: block;
    font-family: var(--font-family-light);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    margin-top: 8px;
}

/* Scroll indicator */
.sp-hero__scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
}

.sp-hero__scroll span {
    display: block;
    font-family: var(--font-family-light);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 10px;
}

.sp-hero__scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
    margin: 0 auto;
    animation: scrollPulse 2s ease infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
    50% { opacity: 1; transform: scaleY(1); }
}

/* ── Specs Bar ────────────────────────────────────────────── */
.sp-specs {
    background: linear-gradient(165deg, #1e1f2e, #2c3830, #261e30);
    padding: 0;
    position: relative;
}

.sp-specs::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--manaa-gradient-wide);
}

.sp-specs__inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.sp-specs__item {
    flex: 1;
    min-width: 140px;
    text-align: center;
    padding: 30px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.sp-specs__item:last-child {
    border-right: none;
}

.sp-specs__value {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 1.15rem;
    color: #fff;
    letter-spacing: 0.03em;
}

.sp-specs__value--link {
    color: var(--manaa-taupe);
    text-decoration: none;
    transition: color 0.3s;
}

.sp-specs__value--link:hover {
    color: #fff;
}

.sp-specs__value--link i {
    font-size: 0.6rem;
    margin-left: 4px;
    opacity: 0.5;
}

.sp-specs__label {
    display: block;
    font-family: var(--font-family-light);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 8px;
}


/* ── Feature Icon Tags (inside story block) ──────────────── */
.sp-ftags {
    display: flex;
    gap: 48px;
    margin-top: 40px;
}

.sp-ftags__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    cursor: default;
}

.sp-ftags__icon-wrap {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(200,149,28,0.08) 0%, rgba(200,149,28,0.03) 100%);
    border: 1px solid rgba(200,149,28,0.3);
    box-shadow: 0 2px 16px rgba(200,149,28,0.08), inset 0 1px 0 rgba(255,255,255,0.06);
    transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s;
    color: #c8951c;
}

.sp-ftags__icon-wrap svg {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    transition: transform 0.35s ease;
}

.sp-ftags__item:hover .sp-ftags__icon-wrap {
    border-color: rgba(200,149,28,0.7);
    box-shadow: 0 4px 24px rgba(200,149,28,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
    transform: translateY(-3px);
    color: #e0aa30;
}

.sp-ftags__item span {
    font-family: var(--font-family-regular);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--manaa-charcoal);
    opacity: 0.65;
    transition: opacity 0.3s;
}

.sp-ftags__item:hover span {
    opacity: 1;
    color: #a07818;
}

@media (max-width: 768px) {
    .sp-ftags {
        gap: 24px;
        flex-wrap: wrap;
    }
    .sp-ftags__icon-wrap {
        width: 52px;
        height: 52px;
    }
    .sp-ftags__icon-wrap svg {
        width: 22px;
        height: 22px;
    }
    .sp-ftags__item span {
        font-size: 0.68rem;
    }
}

/* ── Story / Content ──────────────────────────────────────── */
.sp-story {
    background: var(--manaa-cream);
    padding: 80px 0;
}

.sp-story__inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 30px;
}

.sp-story__text {
    font-family: var(--font-family-light);
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--manaa-text);
}

.sp-story__text p {
    margin-bottom: 1.5em;
}

.sp-story__text strong {
    font-family: var(--font-family-bold);
    color: var(--manaa-dark);
}

.sp-story__content-img {
    max-width: 220px;
    margin-top: 24px;
    border-radius: 4px;
}

.sp-story__features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.sp-story__feature {
    font-family: var(--font-family-bold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--manaa-dark);
    padding: 10px 20px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    transition: all 0.3s;
}

.sp-story__feature:hover {
    background: var(--manaa-dark);
    color: #fff;
    border-color: var(--manaa-dark);
}

/* ── Gallery — Horizontal Swiper ──────────────────────────── */
.sp-gallery {
    background: #111;
    padding: 60px 0;
    overflow: hidden;
}

.sp-gallery__header {
    padding: 0 40px 30px;
}

.sp-gallery__title {
    font-family: var(--font-family-bold);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.3);
    margin: 0;
}

.spGallerySwiper {
    padding: 0 40px;
}

.spGallerySwiper .swiper-slide {
    width: auto;
}

.sp-gallery__item {
    display: block;
    overflow: hidden;
}

.sp-gallery__item img {
    height: 55vh;
    min-height: 350px;
    max-height: 500px;
    width: auto;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.sp-gallery__item:hover img {
    transform: scale(1.03);
}

/* ── Overview — Story + Feature Cards (Loft-inspired) ───── */
.sp-overview {
    background: var(--manaa-cream);
    padding: 80px 0;
}

.sp-overview__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    align-items: start;
}

.sp-overview__label {
    display: inline-block;
    font-family: var(--font-family-bold);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--manaa-text);
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 6px 16px;
    margin-bottom: 30px;
}

.sp-overview__heading {
    font-family: var(--font-family-bold);
    font-size: 1.65rem;
    line-height: 1.3;
    color: var(--manaa-dark);
    margin: 0 0 24px;
    letter-spacing: -0.01em;
}

.sp-overview__text {
    font-family: var(--font-family-light);
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--manaa-text);
    margin-bottom: 32px;
}

.sp-overview__text p {
    margin-bottom: 0.9em;
}

.sp-overview__text strong {
    font-family: var(--font-family-bold);
    color: var(--manaa-dark);
}

.sp-overview__cta {
    display: inline-block;
    font-family: var(--font-family-bold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #fff;
    background: var(--manaa-dark);
    padding: 14px 32px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.sp-overview__cta:hover {
    background: #2a2a2a;
    color: #fff;
}

.sp-overview__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 50px;
}

.sp-overview__card {
    padding: 0;
}

.sp-overview__card-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    color: #b08d57;
}

.sp-overview__card-icon svg {
    width: 44px;
    height: 44px;
    stroke: #b08d57;
}

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

.sp-overview__card-title {
    font-family: var(--font-family-bold);
    font-size: 0.85rem;
    color: var(--manaa-dark);
    margin: 0 0 6px;
    letter-spacing: 0.01em;
}

.sp-overview__card-desc {
    font-family: var(--font-family-light);
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--manaa-text);
    opacity: 0.65;
    margin: 0;
}

/* ── Features — Card Grid / Tag Fallback ─────────────────── */
.sp-features {
    background: linear-gradient(165deg, #1e1f2e, #2c3830, #261e30);
    padding: 80px 0;
}

.sp-features__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

.sp-features__title {
    font-family: var(--font-family-bold);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.3);
    margin: 0 0 40px;
}

.sp-features__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.sp-features__card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 36px 30px;
    transition: all 0.4s ease;
    background: rgba(255, 255, 255, 0.02);
}

.sp-features__card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
}

.sp-features__card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
}

.sp-features__card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.7;
}

.sp-features__card-title {
    font-family: var(--font-family-bold);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #fff;
    margin: 0 0 12px;
}

.sp-features__card-desc {
    font-family: var(--font-family-light);
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.sp-features__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sp-features__tag {
    font-family: var(--font-family-bold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #fff;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: all 0.3s;
}

.sp-features__tag:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}

/* ── Spaces — Tab System ─────────────────────────────────── */
.sp-spaces {
    background: #0f2622;
    padding: 80px 0;
}

.sp-spaces__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

.sp-spaces__title {
    font-family: var(--font-family-bold);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.3);
    margin: 0 0 30px;
}

.sp-spaces__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0;
}

.sp-spaces .project-tabs__btn {
    font-family: var(--font-family-bold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.4);
    background: none;
    border: none;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.sp-spaces .project-tabs__btn:hover {
    color: rgba(255, 255, 255, 0.7);
}

.sp-spaces .project-tabs__btn.active {
    color: var(--manaa-taupe);
    border-bottom-color: var(--manaa-taupe);
}

.sp-spaces__panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.sp-spaces__image {
    overflow: hidden;
}

.sp-spaces__image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.sp-spaces__image:hover img {
    transform: scale(1.03);
}

.sp-spaces__desc {
    font-family: var(--font-family-light);
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* ── Gallery — Filterable Grid Mode ──────────────────────── */
.sp-gallery--grid .sp-gallery__header {
    padding: 0 40px 30px;
    flex-wrap: wrap;
    gap: 20px;
}

.sp-gallery__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sp-gallery__filter-btn {
    font-family: var(--font-family-bold);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.4);
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sp-gallery__filter-btn:hover {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.2);
}

.sp-gallery__filter-btn.active {
    color: #fff;
    border-color: var(--manaa-taupe);
    background: rgba(var(--manaa-taupe-rgb), 0.1);
}

.sp-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 0 40px;
}

.sp-gallery__grid-item {
    overflow: hidden;
    transition: opacity 0.4s ease;
}

.sp-gallery__grid-item.is-hidden {
    display: none;
}

.sp-gallery--grid .sp-gallery__item {
    display: block;
    overflow: hidden;
}

.sp-gallery--grid .sp-gallery__item img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.sp-gallery--grid .sp-gallery__item:hover img {
    transform: scale(1.05);
}

/* ── Floor Plans — Carousel ──────────────────────────────── */
.sp-floorplans {
    background: var(--manaa-cream);
    padding: 80px 0;
}

.sp-floorplans__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px 30px;
}

.sp-floorplans__title {
    font-family: var(--font-family-bold);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--manaa-text);
    opacity: 0.4;
    margin: 0;
}

.sp-floorplans__nav {
    display: flex;
    gap: 8px;
}

.sp-floorplans__arrow {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: var(--manaa-text);
    cursor: pointer;
    transition: all 0.3s ease;
}

.sp-floorplans__arrow:hover {
    border-color: var(--manaa-dark);
    color: var(--manaa-dark);
    background: rgba(0, 0, 0, 0.03);
}

.spFloorplanSwiper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

.spFloorplanSwiper .swiper-slide {
    width: auto;
}

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

.sp-floorplans__item-link {
    display: block;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.sp-floorplans__item-link img {
    width: 100%;
    height: 320px;
    object-fit: contain;
    padding: 20px;
    transition: transform 0.4s ease;
}

.sp-floorplans__item-link:hover img {
    transform: scale(1.02);
}

.sp-floorplans__item-title {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--manaa-text);
    margin-top: 16px;
}

/* ── POI — Nearby Places ─────────────────────────────────── */
.sp-poi {
    background: var(--manaa-cream);
    padding: 80px 0;
}

.sp-poi__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

.sp-poi__title {
    font-family: var(--font-family-bold);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--manaa-text);
    opacity: 0.4;
    margin: 0 0 40px;
}

.sp-poi__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.sp-poi__group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.sp-poi__group-icon {
    color: var(--manaa-dark);
    opacity: 0.5;
    flex-shrink: 0;
}

.sp-poi__group-title {
    font-family: var(--font-family-bold);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--manaa-dark);
    margin: 0;
}

.sp-poi__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp-poi__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.sp-poi__item:last-child {
    border-bottom: none;
}

.sp-poi__item-name {
    font-family: var(--font-family-light);
    font-size: 0.88rem;
    color: var(--manaa-text);
}

.sp-poi__item-distance {
    font-family: var(--font-family-bold);
    font-size: 0.75rem;
    color: var(--manaa-text);
    opacity: 0.4;
    white-space: nowrap;
    margin-left: 12px;
}

/* ── Video ────────────────────────────────────────────────── */
.sp-video {
    background: var(--manaa-dark);
    padding: 60px 0;
}

.sp-video__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 30px;
    aspect-ratio: 16 / 9;
}

.sp-video__inner iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ── Map ──────────────────────────────────────────────────── */
/* ── Map: Reveal + Floating Card ─────────────────────────── */
.sp-map {
    position: relative;
}

/* Teaser Bar */
.sp-map__teaser {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.sp-map__teaser-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(165deg, #1e1f2e, #2c3830, #261e30);
}

.sp-map__teaser-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 40px;
    gap: 24px;
}

.sp-map__teaser-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sp-map__teaser-icon {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(var(--manaa-taupe-rgb), 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--manaa-taupe);
    flex-shrink: 0;
    transition: all var(--transition-base);
}

.sp-map__teaser:hover .sp-map__teaser-icon {
    background: rgba(var(--manaa-taupe-rgb), 0.08);
    border-color: rgba(var(--manaa-taupe-rgb), 0.35);
}

.sp-map__teaser-label {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--manaa-taupe);
    margin-bottom: 4px;
}

.sp-map__teaser-address {
    font-family: var(--font-family-light);
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: normal;
    margin: 0;
}

.sp-map__teaser-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-family-bold);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--manaa-taupe);
    background: none;
    border: 1px solid rgba(var(--manaa-taupe-rgb), 0.25);
    padding: 12px 28px;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.sp-map__teaser-btn-icon {
    display: flex;
    transition: transform var(--transition-base);
}

.sp-map__teaser-btn:hover {
    background: rgba(var(--manaa-taupe-rgb), 0.08);
    border-color: rgba(var(--manaa-taupe-rgb), 0.4);
}

/* Active state — teaser collapsed */
.sp-map.is-map-open .sp-map__teaser {
    display: none;
}

/* Reveal Area */
.sp-map__reveal {
    position: relative;
    height: 0;
    overflow: hidden;
    transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.sp-map.is-map-open .sp-map__reveal {
    height: 550px;
}

.sp-map__embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.sp-map__embed iframe {
    width: 100%;
    height: 100%;
    border: none;
    filter: grayscale(50%) contrast(1.1) brightness(0.8);
    transition: filter 0.6s ease;
}

.sp-map.is-map-open .sp-map__embed iframe {
    filter: grayscale(30%) contrast(1.05) brightness(0.88);
}

.sp-map__embed:hover iframe {
    filter: grayscale(0%) contrast(1) brightness(1);
}

/* Floating Glass Card */
.sp-map__card {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 10;
    max-width: 420px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
}

.sp-map.is-map-open .sp-map__card {
    opacity: 1;
    transform: translateY(0);
}

.sp-map__card-inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    background: rgba(var(--manaa-dark-rgb), 0.75);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sp-map__card-pin {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--manaa-taupe);
    border: 1px solid rgba(var(--manaa-taupe-rgb), 0.2);
    border-radius: 50%;
}

.sp-map__card-body {
    flex: 1;
    min-width: 0;
}

.sp-map__card-label {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--manaa-white);
    margin-bottom: 4px;
}

.sp-map__card-address {
    font-family: var(--font-family-light);
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
    font-style: normal;
    margin: 0;
}

.sp-map__card-actions {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}

.sp-map__card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-family-bold);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--manaa-dark);
    background: var(--manaa-taupe);
    text-decoration: none;
    padding: 8px 16px;
    white-space: nowrap;
    transition: all var(--transition-base);
}

.sp-map__card-btn i {
    font-size: 0.65rem;
}

.sp-map__card-btn:hover {
    background: var(--manaa-white);
    color: var(--manaa-dark);
}

.sp-map__card-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: 0.7rem;
}

.sp-map__card-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--manaa-white);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Responsive */
@media (max-width: 991.98px) {
    .sp-map.is-map-open .sp-map__reveal {
        height: 450px;
    }
}

@media (max-width: 767.98px) {
    .sp-map__teaser-content {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        gap: 16px;
    }

    .sp-map__teaser-left {
        flex-direction: column;
        gap: 12px;
    }

    .sp-map.is-map-open .sp-map__reveal {
        height: 400px;
    }

    .sp-map__card {
        bottom: 12px;
        left: 12px;
        right: 12px;
        max-width: none;
    }

    .sp-map__card-inner {
        padding: 16px;
        gap: 12px;
    }

    .sp-map__card-pin {
        display: none;
    }

    .sp-map__card-address {
        font-size: 0.78rem;
    }
}

/* ── Related Projects ─────────────────────────────────────── */
.sp-related {
    background: #111;
    padding: 60px 0;
    overflow: hidden;
}

.sp-related__header {
    padding: 0 40px 30px;
}

.sp-related__title {
    font-family: var(--font-family-bold);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.3);
    margin: 0;
}

.spRelatedSwiper {
    padding: 0 40px;
}

.spRelatedSwiper .swiper-slide {
    width: 350px;
}

.sp-related__card {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    text-decoration: none;
}

.sp-related__card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.sp-related__card:hover .sp-related__card-bg {
    transform: scale(1.05);
}

.sp-related__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
}

.sp-related__card-content {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 2;
}

.sp-related__card-number {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 1.4rem;
    color: #fff;
}

.sp-related__card-location {
    display: block;
    font-family: var(--font-family-light);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.15em;
    margin-top: 4px;
}


/* ═══════════════════════════════════════════════════════════
   SINGLE PROJECT — Responsive
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .sp-hero__bg {
        background-attachment: scroll;
    }

    .sp-hero__award {
        bottom: 80px;
        left: 20px;
    }

    .sp-hero__award img {
        max-height: 70px;
    }

    .sp-specs__inner {
        flex-direction: column;
    }

    .sp-specs__item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    .sp-specs__item:last-child {
        border-bottom: none;
    }

    .sp-specs__label {
        margin-top: 0;
        order: -1;
    }

    .sp-story {
        padding: 50px 0;
    }

    .sp-story__inner {
        padding: 0 20px;
    }

    .sp-gallery {
        padding: 40px 0;
    }

    .sp-gallery__header {
        padding: 0 20px 20px;
    }

    .spGallerySwiper {
        padding: 0 20px;
    }

    .sp-gallery__item img {
        height: 40vh;
        min-height: 250px;
    }

    .sp-related__header {
        padding: 0 20px 20px;
    }

    .spRelatedSwiper {
        padding: 0 20px;
    }

    .spRelatedSwiper .swiper-slide {
        width: 280px;
    }
}

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE — RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
    .contact-hero {
        height: 55vh;
        min-height: 320px;
    }

    .contact-hero__title {
        font-size: 2.2rem;
        letter-spacing: 0.15em;
    }

    .contact-bar__item {
        padding: 18px 24px;
    }

    .contact-bar__item:not(:last-child)::after {
        display: none;
    }

    .contact-main {
        padding: var(--section-py-tablet) 0;
    }

    .contact-form-section {
        padding: 40px 30px;
    }

    .contact-info-panel__inner {
        padding: 40px 30px;
    }

    .contact-form-section__title {
        font-size: 1.6rem;
    }
}

@media (max-width: 767.98px) {
    .contact-hero {
        height: 50vh;
        min-height: 280px;
    }

    .contact-hero__title {
        font-size: 1.8rem;
        letter-spacing: 0.12em;
    }

    .contact-hero__label {
        font-size: 0.7rem;
    }

    .contact-bar__inner {
        flex-direction: column;
    }

    .contact-bar__item {
        padding: 16px 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .contact-main {
        padding: var(--section-py-mobile) 0;
    }

    .contact-main > .container > .row {
        box-shadow: none;
    }

    .contact-form-section {
        padding: 36px 20px;
    }

    .contact-form-section__title {
        font-size: 1.4rem;
    }

    .contact-form-section__title br {
        display: none;
    }

    .contact-info-panel__inner {
        padding: 36px 20px;
    }

    .contact-submit-btn {
        width: 100%;
        justify-content: center;
    }

    .contact-map-section__zoom-icon {
        bottom: 12px;
        right: 12px;
        padding: 8px 14px;
    }

    .contact-map-section__zoom-icon span {
        display: none;
    }

    .contact-maps-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════
   KURUMSAL PAGE — RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 992px) {
    .kr-hero__title-accent {
        font-size: 5.5rem;
    }

    .kr-hero__inner {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .kr-hero__content {
        flex: 1;
        padding-bottom: 40px;
    }

    .kr-hero__stats {
        margin-top: 0;
        align-self: flex-end;
        padding-bottom: 40px;
    }

    .kr-about__content {
        padding: 80px 70px;
    }

    .kr-heading {
        font-size: 2rem;
    }
}

@media (max-width: 991.98px) {
    .kr-hero {
        height: auto;
        min-height: 100vh;
    }

    .kr-hero__inner {
        padding: 120px 30px 60px;
    }

    .kr-hero__title-small {
        font-size: 0.85rem;
    }

    .kr-hero__title-accent {
        font-size: 3rem;
        letter-spacing: 0.1em;
    }

    .kr-hero__stats {
        align-self: flex-start;
        gap: 32px;
        margin-top: 48px;
    }

    .kr-hero__stat {
        text-align: left;
    }

    .kr-hero__stat-num {
        font-size: 1.6rem;
    }

    .kr-about {
        flex-direction: column;
        min-height: auto;
    }

    .kr-about__visual {
        flex: none;
        min-height: 300px;
        padding: 40px;
    }

    .kr-about__content {
        padding: 50px 30px;
    }

    .kr-about__accent {
        display: none;
    }

    .kr-about__watermark {
        font-size: 8rem;
    }

    .kr-team {
        padding: var(--section-py-tablet) 0;
    }

    .kr-team__grid {
        gap: 40px;
    }

    .kr-press {
        padding: var(--section-py-tablet) 0;
    }

    .kr-press__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .kr-press__item--featured {
        grid-column: span 1;
    }

    /* New sections — tablet */
    .kr-approach {
        padding: var(--section-py-tablet) 0;
    }

    .kr-approach__grid {
        gap: 48px;
    }

    .kr-approach__left {
        flex: 0 0 260px;
        position: static;
    }

    .kr-experience {
        padding: var(--section-py-tablet) 0;
    }

    .kr-today {
        padding: var(--section-py-tablet) 0;
    }

    .kr-today__inner {
        gap: 48px;
    }

    .kr-today__header {
        flex: 0 0 240px;
    }

    .kr-mission {
        padding: var(--section-py-tablet) 0;
    }

    .kr-values-stmt {
        padding: var(--section-py-tablet) 0;
    }
}

@media (max-width: 767.98px) {
    .kr-hero__inner {
        padding: 100px 20px 50px;
    }

    .kr-hero__title-accent {
        font-size: 2.2rem;
        letter-spacing: 0.08em;
    }

    .kr-hero__title-small {
        font-size: 0.75rem;
        letter-spacing: 0.15em;
    }

    .kr-hero__desc {
        font-size: 0.88rem;
    }

    .kr-hero__stats {
        gap: 24px;
        margin-top: 40px;
    }

    .kr-hero__stat-num {
        font-size: 1.4rem;
    }

    .kr-hero__badge-text {
        font-size: 0.55rem;
    }

    .kr-hero__badge-line {
        width: 20px;
    }

    .kr-heading {
        font-size: 1.4rem;
    }

    .kr-about__visual {
        min-height: 220px;
        padding: 30px;
    }

    .kr-about__logo {
        max-width: 160px;
    }

    .kr-about__watermark {
        font-size: 6rem;
    }

    .kr-about__content {
        padding: 40px 20px;
    }

    .kr-stats__suffix {
        font-size: 1.4rem;
    }

    .kr-video {
        height: 45vh;
        min-height: 280px;
    }

    .kr-video__play {
        width: 70px;
        height: 70px;
    }

    .kr-video__play svg {
        width: 16px;
        height: 18px;
    }

    .kr-video__title {
        font-size: 1.4rem;
    }

    .kr-video__title .manaa-gradient-text {
        font-size: 1.8rem;
    }

    .kr-activities {
        padding: var(--section-py-mobile) 0;
    }

    .kr-activities__content p {
        padding-left: 16px;
    }

    .kr-values {
        padding: var(--section-py-mobile) 0;
    }

    .kr-strengths {
        min-height: 45vh;
    }

    .kr-strengths__quote {
        font-size: 5rem;
    }

    .kr-strengths__content {
        padding: 60px 20px;
    }

    .kr-team {
        padding: var(--section-py-mobile) 0;
    }

    .kr-team__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .kr-press {
        padding: var(--section-py-mobile) 0;
    }

    .kr-press__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        grid-auto-rows: 180px;
    }

    .kr-press__item--featured {
        grid-column: span 1;
    }

    .kr-closing {
        padding: 40px 0;
    }

    .kr-closing__logo {
        max-width: 80px;
    }

    /* New sections responsive — mobile */
    .kr-approach__grid {
        flex-direction: column;
        gap: 32px;
    }

    .kr-approach__left {
        flex: none;
        position: static;
    }

    .kr-approach {
        padding: var(--section-py-mobile) 0;
    }

    .kr-approach__right p {
        padding-left: 16px;
    }

    .kr-experience {
        padding: var(--section-py-mobile) 0;
    }

    .kr-experience__pillars {
        flex-direction: column;
        gap: 16px;
    }

    .kr-experience__pillar {
        padding: 14px 20px;
    }

    .kr-today {
        padding: var(--section-py-mobile) 0;
    }

    .kr-today__inner {
        flex-direction: column;
        gap: 32px;
    }

    .kr-today__header {
        flex: none;
    }

    .kr-today__quote {
        font-size: 1.1rem;
        padding: 24px 20px;
    }

    .kr-mission {
        padding: var(--section-py-mobile) 0;
    }

    .kr-mission__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .kr-mission__card {
        padding: 40px 24px;
    }

    .kr-values-stmt {
        padding: var(--section-py-mobile) 0;
    }

    .kr-values-stmt__text {
        font-size: 0.95rem;
    }

    .kr-values-stmt__highlight {
        font-size: 0.85rem;
    }

    .kr-about__highlight {
        font-size: 0.88rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   ARCHIVE (PROJELER) PAGE — RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 992px) {
    .prj-hero__title {
        font-size: 4rem;
    }

    .prj-card__number {
        font-size: 1.8rem;
    }
}

@media (max-width: 991.98px) {
    .prj-hero {
        height: 60vh;
        min-height: 360px;
    }

    .prj-hero__title {
        font-size: 2.4rem;
        letter-spacing: 0.15em;
    }

    .prj-hero__stats {
        gap: 32px;
    }

    .prj-hero__stat-num {
        font-size: 1.6rem;
    }

    .prj-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .prj-card__content {
        padding: 22px;
    }

    .prj-card__number {
        font-size: 1.4rem;
    }
}

@media (max-width: 767.98px) {
    .prj-hero {
        height: 55vh;
        min-height: 300px;
    }

    .prj-hero__title {
        font-size: 1.8rem;
        letter-spacing: 0.1em;
    }

    .prj-hero__label {
        font-size: 0.6rem;
    }

    .prj-hero__stats {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .prj-hero__stat-num {
        font-size: 1.4rem;
    }

    .prj-filter__inner {
        padding: 12px 0;
    }

    .prj-filter__separator {
        margin: 0 10px;
    }

    .prj-filter__btn {
        font-size: 0.6rem;
        padding: 6px 14px;
    }

    .prj-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .prj-card {
        aspect-ratio: 16 / 10;
    }

    .prj-card__content {
        padding: 20px;
    }

    .prj-card__number {
        font-size: 1.3rem;
    }

    .prj-card__meta {
        opacity: 1;
        transform: translateY(0);
    }

    .prj-card__arrow {
        display: none;
    }

    .prj-card__badge {
        top: 12px;
        left: 12px;
        font-size: 0.55rem;
        padding: 4px 10px;
    }
}

/* ═══════════════════════════════════════════════════════════
   MAANAA FARKI PAGE — RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 992px) {
    .mf-hero__title-line--accent {
        font-size: 5.5rem;
    }

}

@media (max-width: 991.98px) {
    .mf-hero {
        height: 85vh;
        min-height: 500px;
    }

    .mf-hero__title-line:first-child {
        font-size: 1.6rem;
    }

    .mf-hero__title-line--accent {
        font-size: 3.2rem;
    }

    .mf-intro {
        padding: 70px 0;
    }

    .mf-intro__number {
        font-size: 5rem;
    }

    .mf-intro__text h2 {
        font-size: 1.3rem;
    }

    .mf-reason-card__inner {
        padding: 28px 24px;
        gap: 20px;
    }

    .mf-reason-card__num {
        font-size: 2rem;
        min-width: 40px;
    }

    .mf-highlight {
        padding: 80px 0;
    }

    .mf-highlight__title {
        font-size: 2rem;
    }

    .mf-pillars {
        gap: 0;
    }

    .mf-pillars__number {
        font-size: 2.8rem;
    }

    .mf-lifecycle {
        padding: var(--section-py-tablet) 0;
    }

    .mf-lifecycle__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mf-lifecycle__card:nth-child(2) {
        border-right: none;
    }

    .mf-lifecycle__card:nth-child(1),
    .mf-lifecycle__card:nth-child(2) {
        border-bottom: 1px solid rgba(44, 56, 48, 0.1);
    }

    .mf-lifecycle__card:nth-child(3) {
        border-right: 1px solid rgba(44, 56, 48, 0.1);
    }

    .mf-summary__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

@media (max-width: 767.98px) {
    .mf-hero {
        height: 90vh;
        min-height: 480px;
    }

    .mf-hero__badge-line {
        width: 20px;
    }

    .mf-hero__badge-text {
        font-size: 0.55rem;
        letter-spacing: 0.2em;
    }

    .mf-hero__title-line:first-child {
        font-size: 1.2rem;
    }

    .mf-hero__title-line--accent {
        font-size: 2.4rem;
    }

    .mf-hero__desc {
        font-size: 0.88rem;
    }

    .mf-intro {
        padding: 50px 0;
    }

    .mf-intro__inner {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .mf-intro__number {
        font-size: 4rem;
    }

    .mf-intro__text h2 {
        font-size: 1.15rem;
    }

    .mf-reasons {
        padding: 40px 0 60px;
    }

    .mf-reasons__container {
        gap: 16px;
        padding: 0 16px;
    }

    .mf-reason-card__inner {
        padding: 24px 20px;
        gap: 16px;
    }

    .mf-reason-card__num {
        font-size: 1.8rem;
        min-width: 36px;
    }

    .mf-reason-card__title {
        font-size: 1.05rem;
    }

    .mf-reason-card__text {
        font-size: 0.88rem;
    }

    .mf-highlight {
        padding: 60px 0;
    }

    .mf-highlight__title {
        font-size: 1.5rem;
    }

    .mf-highlight__title br {
        display: none;
    }

    .mf-pillars {
        grid-template-columns: 1fr;
        gap: 0;
        margin: 30px 0;
    }

    .mf-pillars__item:not(:last-child)::after {
        width: 60%;
        height: 1px;
        right: auto;
        left: 50%;
        top: auto;
        bottom: 0;
        transform: translateX(-50%);
    }

    .mf-pillars__item {
        padding: 30px 20px;
    }

    .mf-pillars__number {
        font-size: 2.5rem;
    }

    .mf-highlight__quote {
        font-size: 0.95rem;
    }

    .mf-lifecycle {
        padding: var(--section-py-mobile) 0;
    }

    .mf-lifecycle__title {
        font-size: 1.4rem;
    }

    .mf-lifecycle__grid {
        grid-template-columns: 1fr;
    }

    .mf-lifecycle__card {
        border-right: none;
        border-bottom: 1px solid rgba(44, 56, 48, 0.1);
        padding: 40px 28px 36px;
    }

    .mf-lifecycle__card:last-child {
        border-bottom: none;
    }

    .mf-lifecycle__card:nth-child(1),
    .mf-lifecycle__card:nth-child(2),
    .mf-lifecycle__card:nth-child(3) {
        border-right: none;
    }

    .mf-lifecycle__num {
        font-size: 5rem;
    }

    .mf-summary {
        padding: 50px 0;
    }

    .mf-summary__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .mf-summary__item {
        padding: 12px 0;
    }

    .mf-summary__name {
        font-size: 0.7rem;
    }
}


/* ═══════════════════════════════════════════════════════════
   BLOG — Archive & Single Post
   ═══════════════════════════════════════════════════════════ */

/* ─── Blog Hero ─── */
.blog-hero {
    position: relative;
    height: 55vh;
    min-height: 340px;
    max-height: 500px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.blog-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--manaa-dark-rgb), 0.3) 0%, rgba(var(--manaa-dark-rgb), 0.7) 100%);
}

.blog-hero__content {
    position: relative;
    z-index: 2;
    max-width: 650px;
    padding: 0 24px;
}

.blog-hero__label {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--manaa-taupe);
    margin-bottom: 12px;
}

.blog-hero__title {
    font-family: var(--font-family-bold);
    font-size: 2.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--manaa-white);
    margin: 0;
}

.blog-hero__line {
    width: 50px;
    height: 2px;
    background: var(--manaa-taupe);
    margin: 20px auto;
}

.blog-hero__desc {
    font-family: var(--font-family-light);
    font-size: 0.92rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* ─── Blog Filter ─── */
.blog-filter {
    background: var(--manaa-white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0;
    z-index: 100;
}

.blog-filter__inner {
    display: flex;
    gap: 6px;
    padding: 14px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.blog-filter__inner::-webkit-scrollbar {
    display: none;
}

.blog-filter__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-family-bold);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 7px 18px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: transparent;
    color: var(--manaa-text);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--transition-base);
}

.blog-filter__btn:hover {
    border-color: var(--manaa-dark);
    color: var(--manaa-dark);
}

.blog-filter__btn.active {
    background: var(--manaa-dark);
    border-color: var(--manaa-dark);
    color: var(--manaa-white);
}

.blog-filter__count {
    font-family: var(--font-family-light);
    font-size: 0.58rem;
    opacity: 0.5;
}

/* ─── Blog Grid Section ─── */
.blog-grid-section {
    padding: var(--section-py-desktop) 0;
    background: var(--manaa-cream);
}

/* ─── Featured Post ─── */
.blog-featured {
    margin-bottom: 48px;
}

.blog-featured__inner {
    display: flex;
    text-decoration: none;
    color: inherit;
    background: var(--manaa-white);
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
    transition: box-shadow var(--transition-base);
}

.blog-featured__inner:hover {
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.1);
}

.blog-featured__image {
    flex: 0 0 55%;
    position: relative;
    min-height: 360px;
    overflow: hidden;
}

.blog-featured__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s ease;
}

.blog-featured__bg--placeholder {
    background: var(--manaa-cream);
}

.blog-featured__inner:hover .blog-featured__bg {
    transform: scale(1.04);
}

.blog-featured__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 60%, rgba(var(--manaa-dark-rgb), 0.03) 100%);
}

.blog-featured__content {
    flex: 1;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-featured__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.blog-featured__cat {
    font-family: var(--font-family-bold);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--manaa-taupe);
    padding: 4px 12px;
    border: 1px solid rgba(var(--manaa-taupe-rgb), 0.3);
}

.blog-featured__date {
    font-family: var(--font-family-light);
    font-size: 0.75rem;
    color: var(--manaa-text);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.blog-featured__date i {
    font-size: 0.65rem;
    color: var(--manaa-taupe);
}

.blog-featured__title {
    font-family: var(--font-family-bold);
    font-size: 1.6rem;
    line-height: 1.3;
    color: var(--manaa-dark);
    margin: 0 0 14px;
}

.blog-featured__excerpt {
    font-family: var(--font-family-light);
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--manaa-text);
    margin: 0 0 24px;
}

.blog-featured__readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-bold);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--manaa-dark);
    transition: color var(--transition-base);
}

.blog-featured__readmore i {
    font-size: 0.6rem;
    transition: transform var(--transition-base);
}

.blog-featured__inner:hover .blog-featured__readmore {
    color: var(--manaa-taupe);
}

.blog-featured__inner:hover .blog-featured__readmore i {
    transform: translateX(4px);
}

/* ─── Blog Grid ─── */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ─── Blog Card ─── */
.blog-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: var(--manaa-white);
    height: 100%;
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.blog-card__link:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.blog-card__image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--manaa-cream);
}

.blog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.blog-card__link:hover .blog-card__image img {
    transform: scale(1.05);
}

.blog-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--manaa-taupe-rgb), 0.3);
    font-size: 2rem;
}

.blog-card__body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.blog-card__cat {
    font-family: var(--font-family-bold);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--manaa-taupe);
}

.blog-card__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
}

.blog-card__date {
    font-family: var(--font-family-light);
    font-size: 0.72rem;
    color: rgba(0, 0, 0, 0.35);
}

.blog-card__title {
    font-family: var(--font-family-bold);
    font-size: 1rem;
    line-height: 1.35;
    color: var(--manaa-dark);
    margin: 0 0 10px;
}

.blog-card__excerpt {
    font-family: var(--font-family-light);
    font-size: 0.84rem;
    line-height: 1.7;
    color: var(--manaa-text);
    margin: 0;
    flex: 1;
}

.blog-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.blog-card__readtime {
    font-family: var(--font-family-light);
    font-size: 0.68rem;
    color: rgba(0, 0, 0, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.blog-card__readtime i {
    font-size: 0.6rem;
}

.blog-card__arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.blog-card__arrow i {
    font-size: 0.55rem;
    color: rgba(0, 0, 0, 0.25);
    transition: color var(--transition-base);
}

.blog-card__link:hover .blog-card__arrow {
    background: var(--manaa-dark);
    border-color: var(--manaa-dark);
}

.blog-card__link:hover .blog-card__arrow i {
    color: var(--manaa-white);
}

/* ─── Pagination ─── */
.blog-pagination {
    margin-top: 48px;
    text-align: center;
}

.blog-pagination .page-numbers {
    display: inline-flex;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-pagination .page-numbers li {
    display: inline;
}

.blog-pagination .page-numbers a,
.blog-pagination .page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-family: var(--font-family-bold);
    font-size: 0.78rem;
    color: var(--manaa-text);
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
    margin: 0 3px;
    transition: all var(--transition-base);
}

.blog-pagination .page-numbers a:hover {
    border-color: var(--manaa-dark);
    color: var(--manaa-dark);
}

.blog-pagination .page-numbers .current {
    background: var(--manaa-dark);
    border-color: var(--manaa-dark);
    color: var(--manaa-white);
}

.blog-pagination .page-numbers a i {
    font-size: 0.65rem;
}

/* ─── Blog Empty ─── */
.blog-empty {
    text-align: center;
    padding: 80px 20px;
}

.blog-empty i {
    font-size: 2.5rem;
    color: var(--manaa-taupe);
    margin-bottom: 20px;
    display: block;
}

.blog-empty h3 {
    font-family: var(--font-family-bold);
    font-size: 1.1rem;
    color: var(--manaa-dark);
    margin: 0 0 8px;
}

.blog-empty p {
    font-family: var(--font-family-light);
    font-size: 0.9rem;
    color: var(--manaa-text);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   SINGLE POST
   ═══════════════════════════════════════════════════════════ */

/* ─── Post Hero ─── */
.post-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: flex-end;
    padding: 60px 0;
    overflow: hidden;
}

.post-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.post-hero__bg--dark {
    background: var(--manaa-dark);
}

.post-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--manaa-dark-rgb), 0.1) 0%, rgba(var(--manaa-dark-rgb), 0.85) 100%);
}

.post-hero__content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 40px;
    margin: 0 auto;
    text-align: center;
}

.post-hero__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.post-hero__cat {
    font-family: var(--font-family-bold);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--manaa-taupe);
    text-decoration: none;
    padding: 4px 14px;
    border: 1px solid rgba(var(--manaa-taupe-rgb), 0.3);
    transition: all var(--transition-base);
}

.post-hero__cat:hover {
    background: var(--manaa-taupe);
    color: var(--manaa-dark);
}

.post-hero__sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
}

.post-hero__date,
.post-hero__read {
    font-family: var(--font-family-light);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.post-hero__read i {
    font-size: 0.65rem;
}

.post-hero__title {
    font-family: var(--font-family-bold);
    font-size: 2.4rem;
    line-height: 1.2;
    color: var(--manaa-white);
    margin: 0 0 16px;
}

.post-hero__excerpt {
    font-family: var(--font-family-light);
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

/* ─── Post Body ─── */
.post-body {
    padding: 60px 0 40px;
    position: relative;
}

/* ─── Share Bar ─── */
.post-share {
    position: fixed;
    left: calc(50% - 520px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: opacity 0.3s ease;
}

.post-share a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--manaa-white);
    color: var(--manaa-text);
    text-decoration: none;
    font-size: 0.8rem;
    transition: all var(--transition-base);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.post-share a:hover {
    background: var(--manaa-dark);
    color: var(--manaa-white);
    border-color: var(--manaa-dark);
}

/* ─── Post Content (Typography) ─── */
.post-content {
    font-family: var(--font-family-base);
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--manaa-text);
}

.post-content h2 {
    font-family: var(--font-family-bold);
    font-size: 1.5rem;
    color: var(--manaa-dark);
    margin: 48px 0 16px;
    line-height: 1.3;
}

.post-content h3 {
    font-family: var(--font-family-bold);
    font-size: 1.2rem;
    color: var(--manaa-dark);
    margin: 36px 0 12px;
    line-height: 1.3;
}

.post-content h4 {
    font-family: var(--font-family-bold);
    font-size: 1rem;
    color: var(--manaa-dark);
    margin: 28px 0 10px;
}

.post-content p {
    margin-bottom: 20px;
}

.post-content blockquote {
    margin: 32px 0;
    padding: 24px 32px;
    border-left: 3px solid var(--manaa-taupe);
    background: var(--manaa-cream);
    font-family: var(--font-family-light);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--manaa-dark);
}

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

.post-content img {
    max-width: 100%;
    height: auto;
    margin: 24px 0;
}

.post-content ul,
.post-content ol {
    margin-bottom: 20px;
    padding-left: 1.5rem;
}

.post-content li {
    margin-bottom: 6px;
}

.post-content a {
    color: var(--manaa-dark);
    text-decoration: underline;
    text-decoration-color: var(--manaa-taupe);
    text-underline-offset: 3px;
    transition: color var(--transition-base);
}

.post-content a:hover {
    color: var(--manaa-taupe);
}

.post-content figure {
    margin: 32px 0;
}

.post-content figcaption {
    font-family: var(--font-family-light);
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.4);
    margin-top: 8px;
    text-align: center;
}

/* ─── Post Tags ─── */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 40px 0;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.post-tags__item {
    font-family: var(--font-family-light);
    font-size: 0.75rem;
    color: var(--manaa-text);
    text-decoration: none;
    padding: 5px 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all var(--transition-base);
}

.post-tags__item:hover {
    border-color: var(--manaa-taupe);
    color: var(--manaa-taupe);
}

/* ─── Post Author ─── */
.post-author {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px;
    background: var(--manaa-cream);
    margin-top: 40px;
}

.post-author__avatar {
    flex-shrink: 0;
}

.post-author__avatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.post-author__label {
    display: block;
    font-family: var(--font-family-light);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--manaa-taupe);
    margin-bottom: 2px;
}

.post-author__name {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 0.9rem;
    color: var(--manaa-dark);
}

.post-author__bio {
    font-family: var(--font-family-light);
    font-size: 0.82rem;
    color: var(--manaa-text);
    margin: 6px 0 0;
    line-height: 1.6;
}

/* ─── Post Navigation ─── */
.post-nav {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.post-nav__inner {
    display: flex;
}

.post-nav__item {
    flex: 1;
    padding: 32px 24px;
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-base);
}

.post-nav__item:hover {
    background: var(--manaa-cream);
}

.post-nav__item--next {
    text-align: right;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
}

.post-nav__dir {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-family-bold);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--manaa-taupe);
    margin-bottom: 6px;
}

.post-nav__item--next .post-nav__dir {
    justify-content: flex-end;
}

.post-nav__dir i {
    font-size: 0.55rem;
}

.post-nav__title {
    display: block;
    font-family: var(--font-family-bold);
    font-size: 0.92rem;
    color: var(--manaa-dark);
    line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════
   BLOG — RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 992px) {
    .blog-hero__title {
        font-size: 3.2rem;
    }

    .post-hero__title {
        font-size: 2.8rem;
    }
}

@media (max-width: 1200px) {
    .post-share {
        position: static;
        transform: none;
        flex-direction: row;
        justify-content: center;
        margin-bottom: 32px;
    }
}

@media (max-width: 991.98px) {
    .blog-hero {
        height: 45vh;
        min-height: 280px;
    }

    .blog-hero__title {
        font-size: 2.2rem;
    }

    .blog-featured__inner {
        flex-direction: column;
    }

    .blog-featured__image {
        flex: none;
        min-height: 280px;
    }

    .blog-featured__content {
        padding: 32px 28px;
    }

    .blog-featured__title {
        font-size: 1.3rem;
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .blog-grid-section {
        padding: var(--section-py-tablet) 0;
    }

    .post-hero {
        min-height: 400px;
        padding: 48px 0;
    }

    .post-hero__title {
        font-size: 2rem;
    }

    .post-hero__content {
        padding: 0 24px;
    }
}

@media (max-width: 767.98px) {
    .blog-hero {
        height: 40vh;
        min-height: 260px;
    }

    .blog-hero__title {
        font-size: 1.6rem;
        letter-spacing: 0.1em;
    }

    .blog-hero__desc {
        font-size: 0.82rem;
    }

    .blog-filter__inner {
        padding: 10px 0;
    }

    .blog-filter__btn {
        font-size: 0.6rem;
        padding: 6px 14px;
    }

    .blog-featured {
        margin-bottom: 32px;
    }

    .blog-featured__image {
        min-height: 220px;
    }

    .blog-featured__content {
        padding: 24px 20px;
    }

    .blog-featured__title {
        font-size: 1.15rem;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .blog-grid-section {
        padding: var(--section-py-mobile) 0;
    }

    .blog-card__body {
        padding: 20px;
    }

    .post-hero {
        min-height: 340px;
        padding: 40px 0;
    }

    .post-hero__title {
        font-size: 1.5rem;
    }

    .post-hero__meta {
        flex-wrap: wrap;
        gap: 8px;
    }

    .post-body {
        padding: 40px 0 32px;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.3rem;
    }

    .post-content h3 {
        font-size: 1.1rem;
    }

    .post-content blockquote {
        padding: 18px 20px;
        margin: 24px 0;
    }

    .post-author {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
    }

    .post-nav__inner {
        flex-direction: column;
    }

    .post-nav__item--next {
        text-align: left;
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    .post-nav__item--next .post-nav__dir {
        justify-content: flex-start;
    }

    .post-nav__title {
        font-size: 0.85rem;
    }

    .blog-pagination .page-numbers a,
    .blog-pagination .page-numbers span {
        width: 36px;
        height: 36px;
        font-size: 0.72rem;
    }
}

/* ============================================================
   SP-ROOMS — Immersive Room Showcase (Cream)
   ============================================================ */
.sp-rooms {
    background: var(--manaa-cream, #f5f0e8);
    padding: 0;
    overflow: hidden;
    position: relative;
}

.sp-rooms::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--manaa-gradient-wide);
}

.sp-rooms__inner {
    display: grid;
    grid-template-columns: 55% 45%;
    min-height: 600px;
}

.sp-rooms__image-wrap {
    position: relative;
    overflow: hidden;
    min-height: 600px;
}

.sp-rooms__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.sp-rooms__image.active {
    opacity: 1;
    transform: scale(1);
}

.sp-rooms__content {
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sp-rooms__label {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(0, 0, 0, 0.35);
    margin-bottom: 24px;
}

.sp-rooms__tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.sp-rooms__tab {
    padding: 10px 22px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 30px;
    background: transparent;
    color: rgba(0, 0, 0, 0.45);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sp-rooms__tab:hover {
    border-color: rgba(0, 0, 0, 0.4);
    color: rgba(0, 0, 0, 0.7);
}

.sp-rooms__tab.active {
    background: var(--manaa-taupe, #a08828);
    border-color: var(--manaa-taupe, #a08828);
    color: #fff;
}

.sp-rooms__info {
    transition: opacity 0.4s ease;
}

.sp-rooms__name {
    font-size: 2.4rem;
    font-weight: 300;
    color: var(--manaa-navy, #2c3830);
    margin: 0 0 20px;
    letter-spacing: 1px;
}

.sp-rooms__desc {
    font-weight: 300;
    color: rgba(0, 0, 0, 0.55);
    line-height: 1.8;
    font-size: 1.08rem;
    margin: 0 0 30px;
}

.sp-rooms__features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-rooms__feature {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sp-rooms__feature-icon {
    width: 20px;
    height: 20px;
    color: var(--manaa-taupe, #a08828);
    flex-shrink: 0;
}

.sp-rooms__feature-text {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(0, 0, 0, 0.5);
}

.sp-rooms__nav {
    margin-top: auto;
    padding-top: 40px;
    display: flex;
    gap: 8px;
}

.sp-rooms__nav-btn {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    background: transparent;
    color: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sp-rooms__nav-btn:hover {
    border-color: var(--manaa-taupe, #a08828);
    color: var(--manaa-taupe, #a08828);
}

@media (max-width: 991px) {
    .sp-rooms__inner {
        grid-template-columns: 1fr;
    }

    .sp-rooms__image-wrap {
        min-height: 320px;
        height: 320px;
    }

    .sp-rooms__content {
        padding: 40px 30px;
    }
}

@media (max-width: 767px) {
    .sp-rooms__image-wrap {
        min-height: 250px;
        height: 250px;
    }

    .sp-rooms__content {
        padding: 30px 20px;
    }

    .sp-rooms__name {
        font-size: 1.4rem;
    }

    .sp-rooms__tab {
        padding: 6px 14px;
        font-size: 0.65rem;
    }
}

/* ============================================================
   SP-PLANS — Dark Table Floor Plans
   ============================================================ */
.sp-plans {
    background: var(--manaa-cream, #f5f0e8);
    padding: 100px 0;
}

.sp-plans__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.sp-plans__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-plans__label {
    display: inline-block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: rgba(0, 0, 0, 0.35);
    margin-bottom: 14px;
}

.sp-plans__title {
    font-size: 2.4rem;
    font-weight: 300;
    color: #2c3830;
    margin: 0;
    letter-spacing: 0.5px;
}

.sp-plans__tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

.sp-plans__tab {
    padding: 14px 32px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 30px;
    background: transparent;
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sp-plans__tab:hover {
    border-color: rgba(0, 0, 0, 0.4);
    color: rgba(0, 0, 0, 0.8);
}

.sp-plans__tab.active {
    background: #2c3830;
    border-color: #2c3830;
    color: #fff;
}

.sp-plans__panel {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.sp-plans__panel.active {
    display: grid;
    animation: spPlansFadeIn 0.4s ease;
}

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

/* Image box */
.sp-plans__image-box {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 24px;
    position: sticky;
    top: 100px;
}

@media (max-width: 767px) {
    .sp-plans__image-box {
        position: static;
    }
}

.sp-plans__image-box a {
    display: block;
    position: relative;
    cursor: zoom-in;
}

.sp-plans__image-box img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.sp-plans__zoom-hint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.sp-plans__image-box a:hover .sp-plans__zoom-hint {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.6);
}

/* Image inner (relative container for hotspots) */
.sp-plans__image-inner {
    position: relative;
}

.sp-plans__image-inner a {
    display: block;
    cursor: zoom-in;
}

.sp-plans__image-inner img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Hotspot dots */
.sp-plans__hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sp-plans__hotspot.is-active {
    opacity: 1;
}

.sp-plans__hotspot-dot {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #a08828;
    border: 2.5px solid #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(160, 136, 40, 0.25);
    animation: spHotspotPulse 1.5s ease-in-out infinite;
}

@keyframes spHotspotPulse {
    0%, 100% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(194, 24, 91, 0.25); }
    50% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 0 10px rgba(194, 24, 91, 0.1); }
}

.sp-plans__hotspot-label {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(43, 45, 66, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.sp-plans__hotspot-label::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(43, 45, 66, 0.92);
}

/* Room row hover highlight */
.sp-plans__room-row {
    cursor: pointer;
}

.sp-plans__room-row.is-hovered {
    background: rgba(194, 24, 91, 0.12) !important;
}

.sp-plans__room-row.is-hovered .sp-plans__room-name {
    color: #fff;
}

/* Dark table card */
.sp-plans__table-card {
    background: linear-gradient(165deg, #1e1f2e, #2c3830, #261e30);
    border-radius: 12px;
    overflow: hidden;
}

.sp-plans__table-header {
    padding: 28px 28px 0;
}

.sp-plans__type-name {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: 1px;
}

/* Floor sections */
.sp-plans__floor {
    margin-top: 20px;
}

.sp-plans__floor-name {
    padding: 10px 28px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

/* Room rows — zebra stripe */
.sp-plans__room-list {
    display: flex;
    flex-direction: column;
}

.sp-plans__room-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 28px;
    transition: background 0.2s ease;
}

.sp-plans__room-row--even {
    background: rgba(255, 255, 255, 0.04);
}

.sp-plans__room-row:hover {
    background: rgba(160, 136, 40, 0.13);
}

.sp-plans__room-name {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.sp-plans__room-area {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

/* Totals */
.sp-plans__totals {
    margin-top: 8px;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.sp-plans__total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 28px;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
}

.sp-plans__total-row + .sp-plans__total-row {
    border-top: 1px solid rgba(212, 175, 55, 0.1);
}

.sp-plans__total-value {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--manaa-taupe, #a08828);
}

/* CTA inside dark card */
.sp-plans__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px 28px 28px;
    padding: 14px 32px;
    background: var(--manaa-taupe, #a08828);
    color: #2c3830;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.sp-plans__cta:hover {
    background: #b8a889;
    color: #2c3830;
    text-decoration: none;
}

@media (max-width: 991px) {
    .sp-plans__panel.active {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 767px) {
    .sp-plans {
        padding: 50px 0;
    }

    .sp-plans__inner {
        padding: 0 20px;
    }

    .sp-plans__room-row {
        padding: 10px 20px;
    }

    .sp-plans__floor-name {
        padding: 10px 20px;
    }

    .sp-plans__table-header {
        padding: 20px 20px 0;
    }

    .sp-plans__cta {
        margin: 16px 20px 20px;
    }

    .sp-plans__tab {
        padding: 8px 16px;
        font-size: 0.65rem;
    }
}

/* ============================================================
   SP-NEARBY — Categorized Nearby Places (Dark)
   ============================================================ */
.sp-nearby {
    background: var(--manaa-cream, #f5f0e8);
    padding: 80px 0;
    overflow: hidden;
    position: relative;
}

.sp-nearby__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

.sp-nearby__header {
    text-align: center;
    margin-bottom: 50px;
}

.sp-nearby__label {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(0, 0, 0, 0.4);
    margin-bottom: 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 6px 18px;
    border-radius: 20px;
}

.sp-nearby__title {
    font-size: 2.2rem;
    font-weight: 300;
    color: #2c3830;
    margin: 0;
    letter-spacing: 1px;
}

/* Staggered entrance */
.sp-nearby__header,
.sp-nearby__column {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.sp-nearby.is-visible .sp-nearby__header {
    opacity: 1;
    transform: translateY(0);
}

.sp-nearby.is-visible .sp-nearby__column {
    opacity: 1;
    transform: translateY(0);
}

/* Grid — 3 sütun üst, 2 sütun alt (centered) */
.sp-nearby__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.sp-nearby__column {
    flex: 0 0 calc(33.333% - 20px);
    min-width: 280px;
}

/* Category header */
.sp-nearby__cat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    position: relative;
}

.sp-nearby__cat-icon {
    width: 22px;
    height: 22px;
    color: var(--cat-color, #a08828);
    flex-shrink: 0;
}

.sp-nearby__cat-icon svg {
    width: 100%;
    height: 100%;
}

.sp-nearby__cat-name {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 600;
    white-space: nowrap;
}

.sp-nearby__cat-line {
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

/* Category line expand animation */
.sp-nearby__cat-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: var(--cat-color, #a08828);
    transition: width 0.6s ease;
}

.sp-nearby__column:hover .sp-nearby__cat-line::after {
    width: 100%;
}

/* Place rows */
.sp-nearby__places {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sp-nearby__place {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, background 0.3s ease;
    border-radius: 4px;
    position: relative;
    cursor: default;
}

.sp-nearby__place:hover {
    transform: translateX(8px);
    background: rgba(0, 0, 0, 0.02);
}

/* Dot icon */
.sp-nearby__place-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    transition: all 0.3s ease;
    position: relative;
}

/* Dot pulse on section visible */
.sp-nearby.is-visible .sp-nearby__place-dot {
    animation: spNearbyDotPulse 0.6s ease forwards;
    animation-delay: var(--dot-delay, 0ms);
}

@keyframes spNearbyDotPulse {
    0%   { border-color: rgba(0, 0, 0, 0.2); box-shadow: none; }
    50%  { border-color: var(--cat-color, #a08828); box-shadow: 0 0 8px rgba(160, 136, 40, 0.4); background: var(--cat-color, #a08828); }
    100% { border-color: rgba(0, 0, 0, 0.2); box-shadow: none; background: transparent; }
}

/* Dot hover glow */
.sp-nearby__place:hover .sp-nearby__place-dot {
    border-color: var(--cat-color, #a08828);
    background: var(--cat-color, #a08828);
    box-shadow: 0 0 8px rgba(160, 136, 40, 0.4);
}

.sp-nearby__place-name {
    flex: 1;
    min-width: 0;
    font-size: 0.88rem;
    color: rgba(0, 0, 0, 0.6);
    transition: color 0.3s ease;
}

.sp-nearby__place:hover .sp-nearby__place-name {
    color: rgba(0, 0, 0, 0.9);
}

/* Minutes counter */
.sp-nearby__place-min {
    font-size: 0.78rem;
    color: rgba(0, 0, 0, 0.45);
    font-weight: 600;
    white-space: nowrap;
    min-width: 42px;
    text-align: right;
}

.sp-nearby__place-min-num {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cat-color, #2c3830);
}

/* Responsive */
@media (max-width: 991px) {
    .sp-nearby__column {
        flex: 0 0 calc(50% - 15px);
    }
}

@media (max-width: 767px) {
    .sp-nearby {
        padding: 50px 0;
    }

    .sp-nearby__inner {
        padding: 0 20px;
    }

    .sp-nearby__title {
        font-size: 1.4rem;
    }

    .sp-nearby__column {
        flex: 0 0 100%;
        min-width: unset;
    }

    .sp-nearby__grid {
        gap: 24px;
    }
}

/* ============================================================
   SP-STORY — Zigzag Project Storytelling
   ============================================================ */
.sp-story {
    background: var(--manaa-cream, #f5f0e8);
    padding: 100px 0;
    overflow: hidden;
}

.sp-story__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Block layout */
.sp-story__block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Block 2: visual already first in HTML, no reversal needed */

/* Divider */
.sp-story__divider {
    height: 1px;
    margin: 70px auto;
    max-width: 120px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.12), transparent);
}

/* Content side */
.sp-story__label {
    display: inline-block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--manaa-taupe, #a08828);
    margin-bottom: 16px;
    font-weight: 600;
}

.sp-story__heading {
    font-size: 2rem;
    font-weight: 300;
    color: #2c3830;
    margin: 0 0 20px;
    line-height: 1.3;
    letter-spacing: 0.5px;
}

.sp-story__text {
    font-size: 0.95rem;
    color: rgba(0, 0, 0, 0.75);
    line-height: 1.85;
    margin: 0 0 32px;
}

/* Feature items */
.sp-story__features {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sp-story__feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
    position: relative;
}

.sp-story__feature:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    border-color: rgba(160, 136, 40, 0.3);
}

.sp-story__feature-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    color: var(--feat-color, #a08828);
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    padding: 7px;
}

.sp-story__feature-icon svg {
    width: 100%;
    height: 100%;
}

.sp-story__feature-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sp-story__feature-body strong {
    font-size: 0.88rem;
    font-weight: 600;
    color: #2c3830;
}

.sp-story__feature-body span {
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.45);
}

/* Visual side */
.sp-story__visual {
    position: relative;
}

.sp-story__image-wrap {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.sp-story__image-wrap img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}

.sp-story__image-wrap:hover img {
    transform: scale(1.03);
}

/* Floating stat box */
.sp-story__float-box {
    position: absolute;
    background: rgba(43, 45, 66, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 18px 24px;
    text-align: center;
    z-index: 2;
    display: flex;
    flex-direction: column-reverse;
    animation: spStoryFloat 3s ease-in-out infinite;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.sp-story__float-box--tr {
    top: -20px;
    right: -20px;
}

.sp-story__float-box--bl {
    bottom: -20px;
    left: -20px;
}

.sp-story__float-box--blue {
    background: rgba(21, 101, 192, 0.9);
}
.sp-story__float-box--blue .sp-story__float-value {
    color: #fff;
}
.sp-story__float-box--fuchsia {
    background: rgba(194, 24, 91, 0.9);
}
.sp-story__float-box--fuchsia .sp-story__float-value {
    color: #fff;
}

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

.sp-story__float-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--manaa-taupe, #a08828);
    line-height: 1;
}

.sp-story__float-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
}

/* Scroll animations */
.sp-story__content,
.sp-story__visual {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.sp-story__block--normal .sp-story__content { transform: translateX(-40px); }
.sp-story__block--normal .sp-story__visual  { transform: translateX(40px); }
.sp-story__block--reverse .sp-story__visual  { transform: translateX(-40px); }
.sp-story__block--reverse .sp-story__content { transform: translateX(40px); }

.sp-story__block.is-visible .sp-story__content,
.sp-story__block.is-visible .sp-story__visual {
    opacity: 1;
    transform: translateX(0);
}

.sp-story__block.is-visible .sp-story__visual {
    transition-delay: 0.15s;
}

.sp-story__float-box {
    opacity: 0;
    transform: translateY(0) scale(0.8);
}

.sp-story__block.is-visible .sp-story__float-box {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s;
    animation: spStoryFloat 3s ease-in-out 1s infinite;
}

/* Responsive */
@media (max-width: 991px) {
    .sp-story__block {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .sp-story__visual {
        order: -1;
    }

    .sp-story__image-wrap img {
        height: 300px;
    }

    .sp-story__float-box--tr {
        top: auto;
        bottom: -15px;
        right: 15px;
    }

    .sp-story__float-box--bl {
        bottom: -15px;
        left: 15px;
    }
}

@media (max-width: 767px) {
    .sp-story {
        padding: 60px 0;
    }

    .sp-story__inner {
        padding: 0 20px;
    }

    .sp-story__heading {
        font-size: 1.5rem;
    }

    .sp-story__image-wrap img {
        height: 240px;
    }

    .sp-story__divider {
        margin: 40px auto;
    }

    .sp-story__float-box {
        padding: 14px 18px;
    }

    .sp-story__float-value {
        font-size: 1.3rem;
    }
}

/* ============================================================
   SP-LOCATION — Card Grid + Map Reveal
   ============================================================ */
.sp-location {
    background: var(--manaa-cream, #f5f0e8);
    padding: 100px 0;
}

.sp-location__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.sp-location__header {
    text-align: center;
    margin-bottom: 50px;
}

.sp-location__label {
    display: inline-block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: rgba(0, 0, 0, 0.35);
    margin-bottom: 14px;
}

.sp-location__title {
    font-size: 2.2rem;
    font-weight: 300;
    color: #2c3830;
    margin: 0;
}

/* 6-card grid */
.sp-location__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.sp-location__card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sp-location__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.sp-location__card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--cat-color, #ccc);
}

.sp-location__card-icon {
    width: 22px;
    height: 22px;
    color: var(--cat-color, #999);
    flex-shrink: 0;
}

.sp-location__card-icon svg {
    width: 100%;
    height: 100%;
}

.sp-location__card-cat {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #2c3830;
}

.sp-location__card-places {
    display: flex;
    flex-direction: column;
}

.sp-location__card-place {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.sp-location__card-place:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sp-location__card-name {
    font-size: 0.9rem;
    color: rgba(0, 0, 0, 0.65);
}

.sp-location__card-min {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cat-color, #2c3830);
    white-space: nowrap;
}

/* Address bar */
.sp-location__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #222336 0%, #2c3830 50%, #2e2235 100%);
    border-radius: 12px;
    padding: 18px 28px;
    gap: 20px;
}

.sp-location__bar-info {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.sp-location__bar-info svg {
    color: var(--manaa-taupe, #a08828);
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.sp-location__bar-info address {
    font-style: normal;
    line-height: 1;
}

.sp-location__bar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.sp-location__bar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--manaa-taupe, #a08828);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.sp-location__bar-link:hover {
    color: #fff;
    text-decoration: none;
}

.sp-location__bar-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.sp-location__bar-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* Map reveal */
.sp-location__map-reveal {
    max-height: 0;
    overflow: hidden;
    border-radius: 0 0 12px 12px;
    transition: max-height 0.5s ease;
    margin-top: -12px;
}

.sp-location__map-reveal.is-open {
    max-height: 450px;
    margin-top: 0;
    border-radius: 12px;
    margin-top: 16px;
}

.sp-location__map-reveal iframe {
    width: 100%;
    height: 450px;
    border: none;
    border-radius: 12px;
    display: block;
}

/* Responsive */
@media (max-width: 991px) {
    .sp-location__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-location__bar {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }
}

@media (max-width: 767px) {
    .sp-location {
        padding: 60px 0;
    }

    .sp-location__inner {
        padding: 0 20px;
    }

    .sp-location__title {
        font-size: 1.5rem;
    }

    .sp-location__grid {
        grid-template-columns: 1fr;
    }

    .sp-location__bar {
        padding: 16px 20px;
    }
}

/* ============================================================
   SP-GSTRIP — Horizontal Scroll Gallery Strip
   ============================================================ */
.sp-gstrip {
    background: linear-gradient(165deg, #1e1f2e, #2c3830, #261e30);
    padding: 80px 0 80px;
    overflow: hidden;
    position: relative;
}

.sp-gstrip::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--manaa-gradient-wide);
}

.sp-gstrip__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 0 40px;
}

.sp-gstrip__label {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 10px;
}

.sp-gstrip__title {
    font-size: 2rem;
    font-weight: 300;
    color: #fff;
    margin: 0;
    letter-spacing: 0.5px;
}

.sp-gstrip__header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sp-gstrip__counter {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
}

.sp-gstrip__counter-current {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

.sp-gstrip__nav {
    display: flex;
    gap: 6px;
}

.sp-gstrip__arrow {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sp-gstrip__arrow:hover {
    border-color: var(--manaa-taupe, #a08828);
    color: var(--manaa-taupe, #a08828);
}

/* Swiper */
.spGstripSwiper {
    padding-left: max(40px, calc((100vw - 1200px) / 2 + 40px));
    overflow: visible;
}

.spGstripSwiper .swiper-slide {
    width: auto;
}

/* Slide images */
.sp-gstrip__slide {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.sp-gstrip__slide img {
    height: 380px;
    width: auto;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.sp-gstrip__slide:hover img {
    transform: scale(1.04);
}

/* Alternate sizes for variety */
.spGstripSwiper .swiper-slide:nth-child(3n+1) .sp-gstrip__slide img {
    height: 380px;
    aspect-ratio: 3/4;
}

.spGstripSwiper .swiper-slide:nth-child(3n+2) .sp-gstrip__slide img {
    height: 380px;
    aspect-ratio: 16/10;
}

.spGstripSwiper .swiper-slide:nth-child(3n+3) .sp-gstrip__slide img {
    height: 380px;
    aspect-ratio: 4/3;
}

/* Responsive */
@media (max-width: 991px) {
    .sp-gstrip__slide img,
    .spGstripSwiper .swiper-slide:nth-child(3n+1) .sp-gstrip__slide img,
    .spGstripSwiper .swiper-slide:nth-child(3n+2) .sp-gstrip__slide img,
    .spGstripSwiper .swiper-slide:nth-child(3n+3) .sp-gstrip__slide img {
        height: 300px;
    }
}

@media (max-width: 767px) {
    .sp-gstrip {
        padding: 50px 0;
    }

    .sp-gstrip__header {
        padding: 0 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .spGstripSwiper {
        padding-left: 20px;
    }

    .sp-gstrip__slide img,
    .spGstripSwiper .swiper-slide:nth-child(3n+1) .sp-gstrip__slide img,
    .spGstripSwiper .swiper-slide:nth-child(3n+2) .sp-gstrip__slide img,
    .spGstripSwiper .swiper-slide:nth-child(3n+3) .sp-gstrip__slide img {
        height: 240px;
    }

    .sp-gstrip__title {
        font-size: 1.5rem;
    }
}

/* ==========================================================
   HP-SHOWCASE: Featured Projects Carousel
   ========================================================== */
.hp-showcase {
    background: #2c3830;
    padding: 100px 0 80px;
    overflow: hidden;
}

.hp-showcase__header {
    text-align: center;
    margin-bottom: 50px;
}

.hp-showcase__label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #a08828;
    margin-bottom: 12px;
}

.hp-showcase__title {
    font-size: 2.5rem;
    font-weight: 300;
    color: #fff;
    margin: 0;
}

.hp-showcase__filters {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.hp-showcase__filter {
    background: transparent;
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.6);
    padding: 8px 24px;
    border-radius: 30px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all .3s ease;
}

.hp-showcase__filter:hover,
.hp-showcase__filter.active {
    background: #a08828;
    border-color: #a08828;
    color: #fff;
}

.hp-showcase__carousel {
    padding: 0 0 0 5vw;
}

.showcaseSwiper {
    overflow: visible;
}

.showcaseSwiper .swiper-slide {
    width: 60vw;
    max-width: 800px;
}

.hp-showcase__card {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    text-decoration: none;
}

.hp-showcase__card-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .6s ease;
}

.hp-showcase__card:hover .hp-showcase__card-img {
    transform: scale(1.05);
}

.hp-showcase__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 60%);
}

.hp-showcase__card-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hp-showcase__card-content {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
}

.hp-showcase__card-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 6px;
}

.hp-showcase__card-location {
    font-size: 0.85rem;
    color: rgba(255,255,255,.7);
}

.hp-showcase__card-location i {
    margin-right: 6px;
}

.hp-showcase__card-specs {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 20px;
    padding: 14px 24px;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(6px);
    color: rgba(255,255,255,.8);
    font-size: 0.8rem;
    transform: translateY(100%);
    transition: transform .3s ease;
}

.hp-showcase__card:hover .hp-showcase__card-specs {
    transform: translateY(0);
}

.hp-showcase__card-specs i {
    margin-right: 6px;
    color: #a08828;
}

.hp-showcase__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 40px;
    padding: 0 5vw;
}

.hp-showcase__nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.3);
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s ease;
}

.hp-showcase__nav-btn:hover {
    background: #a08828;
    border-color: #a08828;
}

.hp-showcase__counter {
    font-size: 0.9rem;
    color: rgba(255,255,255,.6);
    font-variant-numeric: tabular-nums;
}

.hp-showcase__all {
    color: #a08828;
    font-size: 0.85rem;
    text-decoration: none;
    margin-left: auto;
    transition: color .3s ease;
}

.hp-showcase__all:hover {
    color: #fff;
}

@media (max-width: 991px) {
    .showcaseSwiper .swiper-slide {
        width: 75vw;
    }
    .hp-showcase__card {
        aspect-ratio: 3 / 4;
    }
    .hp-showcase__title {
        font-size: 2rem;
    }
}

@media (max-width: 767px) {
    .hp-showcase {
        padding: 60px 0 50px;
    }
    .showcaseSwiper .swiper-slide {
        width: 85vw;
    }
    .hp-showcase__filters {
        flex-wrap: wrap;
    }
    .hp-showcase__card-title {
        font-size: 1.3rem;
    }
    .hp-showcase__nav {
        flex-wrap: wrap;
        gap: 16px;
    }
    .hp-showcase__all {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 575px) {
    .showcaseSwiper .swiper-slide { width: 92vw; }
    .hp-showcase__card-title { font-size: 1.1rem; }
}

/* ==========================================================
   HP-USP: Neden MaaNaa Pillars
   ========================================================== */
.hp-usp {
    background: #fff;
    padding: 100px 0;
}

.hp-usp__header {
    text-align: center;
    margin-bottom: 60px;
}

.hp-usp__label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #a08828;
    margin-bottom: 12px;
}

.hp-usp__title {
    font-size: 2.5rem;
    font-weight: 300;
    color: #2c3830;
    margin: 0;
}

.hp-usp__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    position: relative;
}

.hp-usp__pillar {
    text-align: center;
    padding: 30px 20px;
    position: relative;
}

.hp-usp__pillar:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 20%;
    height: 60%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, #ddd 30%, #ddd 70%, transparent);
}

.hp-usp__number {
    display: block;
    font-size: 5rem;
    font-weight: 700;
    opacity: .1;
    line-height: 1;
    margin-bottom: -20px;
}

.hp-usp__icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    display: block;
}

.hp-usp__pillar-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3830;
    margin-bottom: 10px;
}

.hp-usp__pillar-desc {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 991px) {
    .hp-usp__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hp-usp__pillar:nth-child(2)::after {
        display: none;
    }
    .hp-usp__title {
        font-size: 2rem;
    }
}

@media (max-width: 575px) {
    .hp-usp {
        padding: 60px 0;
    }
    .hp-usp__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .hp-usp__pillar::after {
        display: none !important;
    }
    .hp-usp__number {
        font-size: 3.5rem;
    }
}

/* ==========================================================
   HP-TESTIMONIALS: Müşteri Yorumları
   ========================================================== */
.hp-testimonials {
    background: #0f1628;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.hp-testimonials__quote-deco {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 15rem;
    color: #a08828;
    opacity: .06;
    line-height: 1;
    pointer-events: none;
    font-family: Georgia, serif;
}

.hp-testimonials__header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    z-index: 1;
}

.hp-testimonials__label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #a08828;
    margin-bottom: 12px;
}

.hp-testimonials__title {
    font-size: 2.5rem;
    font-weight: 300;
    color: #fff;
    margin: 0;
}

.hp-testimonials__slide {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
}

.hp-testimonials__text {
    font-size: 1.4rem;
    font-style: italic;
    color: rgba(255,255,255,.9);
    line-height: 1.8;
    margin-bottom: 30px;
    font-weight: 300;
}

.hp-testimonials__author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.hp-testimonials__photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #a08828;
}

.hp-testimonials__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1e2540;
    color: #a08828;
    font-size: 1.2rem;
}

.hp-testimonials__info {
    text-align: left;
}

.hp-testimonials__name {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.hp-testimonials__project {
    display: block;
    font-size: 0.85rem;
    color: #a08828;
    margin-top: 2px;
}

.hp-testimonials__pagination {
    margin-top: 40px;
}

.hp-testimonials__pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,.3);
    opacity: 1;
}

.hp-testimonials__pagination .swiper-pagination-bullet-active {
    background: #a08828;
}

@media (max-width: 767px) {
    .hp-testimonials {
        padding: 60px 0;
    }
    .hp-testimonials__text {
        font-size: 1.1rem;
    }
    .hp-testimonials__title {
        font-size: 2rem;
    }
}

@media (max-width: 575px) {
    .hp-testimonials { padding: 40px 0; }
    .hp-testimonials__text { font-size: 0.95rem; line-height: 1.7; }
    .hp-testimonials__title { font-size: 1.6rem; }
}

/* ==========================================================
   HP-PROCESS: Sürecimiz Timeline
   ========================================================== */
.hp-process {
    background: #f8f6f1;
    padding: 100px 0;
}

.hp-process__header {
    text-align: center;
    margin-bottom: 60px;
}

.hp-process__label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #a08828;
    margin-bottom: 12px;
}

.hp-process__title {
    font-size: 2.5rem;
    font-weight: 300;
    color: #2c3830;
    margin: 0;
}

.hp-process__timeline {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
}

.hp-process__step {
    flex: 0 0 calc(100% / 6);
    min-width: 180px;
    scroll-snap-align: center;
    text-align: center;
    padding: 20px 16px;
    position: relative;
}

.hp-process__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50px;
    right: 0;
    width: calc(100% - 100px);
    height: 2px;
    background: linear-gradient(to right, #ddd, #a08828);
    left: calc(50% + 50px);
}

.hp-process__circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    background: #fff;
    position: relative;
    z-index: 1;
    transition: transform .3s ease, box-shadow .3s ease;
}

.hp-process__circle i {
    font-size: 1.6rem;
}

.hp-process__step.is-active .hp-process__circle,
.hp-process__step:hover .hp-process__circle {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(0,0,0,.1);
}

.hp-process__step-num {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: #999;
    margin-bottom: 8px;
}

.hp-process__step-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2c3830;
    margin-bottom: 6px;
}

.hp-process__step-desc {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 991px) {
    .hp-process__step {
        flex: 0 0 200px;
    }
}

@media (max-width: 767px) {
    .hp-process {
        padding: 60px 0;
    }
    .hp-process__title {
        font-size: 2rem;
    }
    .hp-process__timeline {
        flex-direction: column;
        overflow-x: visible;
        padding-left: 50px;
    }
    .hp-process__step {
        flex: none;
        min-width: auto;
        text-align: left;
        padding: 0 0 30px 30px;
        position: relative;
    }
    .hp-process__step::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #ddd;
    }
    .hp-process__step:last-child::before {
        bottom: 50%;
    }
    .hp-process__step::after {
        display: none !important;
    }
    .hp-process__circle {
        width: 50px;
        height: 50px;
        position: absolute;
        left: -25px;
        top: 0;
        margin: 0;
    }
    .hp-process__circle i {
        font-size: 1.1rem;
    }
}

@media (max-width: 575px) {
    .hp-process__timeline { padding-left: 40px; }
    .hp-process__circle { width: 44px; height: 44px; left: -22px; }
    .hp-process__title { font-size: 1.6rem; }
}

/* ==========================================================
   HP-TRUST: Güven Barı Marquee
   ========================================================== */
.hp-trust {
    background: #0f1628;
    padding: 30px 0;
    overflow: hidden;
}

.hp-trust__track {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.hp-trust__inner {
    display: flex;
    gap: 60px;
    align-items: center;
    animation: marquee 30s linear infinite;
    width: max-content;
}

.hp-trust__inner:hover {
    animation-play-state: paused;
}

.hp-trust__item {
    flex-shrink: 0;
}

.hp-trust__item img {
    height: 40px;
    width: auto;
    filter: grayscale(1) brightness(2);
    opacity: .4;
    transition: all .3s ease;
}

.hp-trust__item:hover img {
    filter: grayscale(0) brightness(1);
    opacity: 1;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ==========================================================
   HP-TEAM: Ekip
   ========================================================== */
.hp-team {
    background: #fff;
    padding: 100px 0;
}

.hp-team__grid {
    display: grid;
    grid-template-columns: 35% 1fr;
    gap: 60px;
    align-items: center;
}

.hp-team__label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #a08828;
    margin-bottom: 12px;
}

.hp-team__title {
    font-size: 2.5rem;
    font-weight: 300;
    color: #2c3830;
    margin: 0 0 20px;
}

.hp-team__desc {
    font-size: 1rem;
    color: #666;
    line-height: 1.7;
    margin-bottom: 30px;
}

.hp-team__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.hp-team__card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    cursor: pointer;
}

.hp-team__card--offset {
    margin-top: 40px;
}

.hp-team__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.hp-team__card-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
    color: #aaa;
    font-size: 3rem;
}

.hp-team__card:hover .hp-team__card-img {
    transform: scale(1.05);
}

.hp-team__card-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .4s ease;
}

.hp-team__card:hover .hp-team__card-overlay {
    opacity: .2;
}

.hp-team__card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
}

.hp-team__card-name {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

.hp-team__card-role {
    display: block;
    font-size: 0.85rem;
    color: rgba(255,255,255,.7);
    margin-top: 2px;
}

@media (max-width: 991px) {
    .hp-team__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .hp-team__intro {
        text-align: center;
    }
}

@media (max-width: 575px) {
    .hp-team {
        padding: 60px 0;
    }
    .hp-team__title {
        font-size: 2rem;
    }
    .hp-team__card--offset {
        margin-top: 0;
    }
}

/* ==========================================================
   HP-LIFESTYLE: Yaşam Galerisi Mosaic
   ========================================================== */
.hp-lifestyle {
    background: #F7F5F0;
    padding: 100px 0;
}

.hp-lifestyle__header {
    text-align: center;
    margin-bottom: 50px;
}

.hp-lifestyle__label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #a08828;
    margin-bottom: 12px;
}

.hp-lifestyle__title {
    font-size: 2.5rem;
    font-weight: 300;
    color: #2c3830;
    margin: 0;
}

.hp-lifestyle__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 280px;
    gap: 8px;
}

.hp-lifestyle__item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.hp-lifestyle__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.hp-lifestyle__item:hover img {
    transform: scale(1.08);
}

.hp-lifestyle__item--large {
    grid-column: span 2;
    grid-row: span 2;
}

.hp-lifestyle__item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    opacity: 0;
    transition: opacity .35s ease;
}

.hp-lifestyle__item:hover .hp-lifestyle__item-overlay {
    opacity: 1;
}

.hp-lifestyle__item-info {
    display: flex;
    flex-direction: column;
    color: #fff;
    line-height: 1;
}

.hp-lifestyle__item-prefix {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,.7);
    margin-bottom: 4px;
}

.hp-lifestyle__item-number {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

.hp-lifestyle__item--large .hp-lifestyle__item-number {
    font-size: 3rem;
}

.hp-lifestyle__item-location {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,.8);
}

.hp-lifestyle__item-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #a08828;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: color .2s, gap .2s;
    width: fit-content;
}

.hp-lifestyle__item-cta:hover {
    color: #fff;
    gap: 10px;
}

@media (max-width: 991px) {
    .hp-lifestyle__grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 220px;
    }
    .hp-lifestyle__item--large {
        grid-column: span 2;
        grid-row: span 1;
    }
}

@media (max-width: 767px) {
    .hp-lifestyle__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
    .hp-lifestyle__item--large { grid-column: span 2; }
    .hp-lifestyle__title { font-size: 2rem; }
}

@media (max-width: 575px) {
    .hp-lifestyle {
        padding: 60px 0;
    }
    .hp-lifestyle__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
    }
    .hp-lifestyle__item--large { grid-column: span 1; }
    .hp-lifestyle__title {
        font-size: 2rem;
    }
}

/* ==========================================================
   HP-BLOG: Blog Önizleme
   ========================================================== */
.hp-blog {
    background: #f8f6f1;
    padding: 100px 0;
}

.hp-blog__header {
    margin-bottom: 50px;
}

.hp-blog__label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #a08828;
    margin-bottom: 12px;
}

.hp-blog__title {
    font-size: 2.5rem;
    font-weight: 300;
    color: #2c3830;
    margin: 0;
}

.hp-blog__grid {
    display: grid;
    grid-template-columns: 60% 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
}

.hp-blog__card--featured {
    grid-row: span 2;
}

.hp-blog__card {
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.hp-blog__card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hp-blog__card--featured .hp-blog__card-link {
    display: flex;
    flex-direction: column;
}

.hp-blog__card-img {
    overflow: hidden;
    flex-shrink: 0;
}

.hp-blog__card--featured .hp-blog__card-img {
    height: 300px;
}

.hp-blog__card--small .hp-blog__card-img {
    height: 140px;
}

.hp-blog__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.hp-blog__card:hover .hp-blog__card-img img {
    transform: scale(1.05);
}

.hp-blog__card-body {
    padding: 20px;
    flex: 1;
}

.hp-blog__card--small .hp-blog__card-body {
    padding: 14px 16px;
}

.hp-blog__card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 0.8rem;
    color: #999;
}

.hp-blog__card-cat {
    background: #a08828;
    color: #fff;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hp-blog__card-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3830;
    margin: 0 0 8px;
    line-height: 1.4;
}

.hp-blog__card--small .hp-blog__card-title {
    font-size: 1rem;
}

.hp-blog__card-excerpt {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 991px) {
    .hp-blog__grid {
        grid-template-columns: 1fr;
    }
    .hp-blog__card--featured {
        grid-row: span 1;
    }
}

@media (max-width: 575px) {
    .hp-blog {
        padding: 60px 0;
    }
    .hp-blog__title {
        font-size: 2rem;
    }
    .hp-blog__card--featured .hp-blog__card-img {
        height: 200px;
    }
}

/* ==========================================================
   HP-CTA: Animated Gradient Banner
   ========================================================== */
.hp-cta {
    background: linear-gradient(135deg, #2c3830, #a08828, #e8e0c8, #8a7420, #4a5e50, #6b8f6b, #c8a028, #2c3830);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    padding: 120px 0;
    text-align: center;
}

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

.hp-cta__content {
    max-width: 640px;
    margin: 0 auto;
}

.hp-cta__title {
    font-size: 3rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 16px;
    line-height: 1.2;
}

.hp-cta__desc {
    font-size: 1.1rem;
    color: rgba(255,255,255,.85);
    margin-bottom: 40px;
}

.hp-cta__buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.hp-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
    letter-spacing: 0.5px;
}

.hp-cta__btn--filled {
    background: #fff;
    color: #2c3830;
}

.hp-cta__btn--filled:hover {
    background: #f8f6f1;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,.2);
}

.hp-cta__btn--outline {
    border: 2px solid rgba(255,255,255,.5);
    color: #fff;
    background: transparent;
}

.hp-cta__btn--outline:hover {
    border-color: #fff;
    background: rgba(255,255,255,.1);
    transform: translateY(-2px);
}

@media (max-width: 767px) {
    .hp-cta {
        padding: 80px 0;
    }
    .hp-cta__title {
        font-size: 2rem;
    }
}

/* ==========================================================
   HP-NEWSLETTER: Bülten
   ========================================================== */
.hp-newsletter {
    background: #fff;
    padding: 60px 0;
    border-top: 1px solid #eee;
}

.hp-newsletter__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.hp-newsletter__title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c3830;
    margin: 0 0 4px;
}

.hp-newsletter__desc {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

.hp-newsletter__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.hp-newsletter__row {
    display: flex;
    gap: 0;
}

.hp-newsletter__input {
    padding: 14px 20px;
    border: 1px solid #ddd;
    border-right: none;
    border-radius: 50px 0 0 50px;
    font-size: 0.9rem;
    width: min(280px, 100%);
    outline: none;
    transition: border-color .3s ease;
}

.hp-newsletter__input:focus {
    border-color: #a08828;
}

.hp-newsletter__kvkk {
    font-size: 0.75rem;
    color: #888;
    width: 100%;
}
.hp-newsletter__kvkk label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}
.hp-newsletter__kvkk input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: #a08828;
}
.hp-newsletter__kvkk a {
    color: #a08828;
    text-decoration: underline;
}

.hp-newsletter__submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 28px;
    background: #2c3830;
    color: #fff;
    border: none;
    border-radius: 0 50px 50px 0;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .3s ease;
    white-space: nowrap;
}

.hp-newsletter__submit:hover {
    background: #a08828;
}

.hp-newsletter__msg { display: none; }

/* Toast Notification */
.manaa-toast {
    position: fixed;
    bottom: 40px;
    right: 28px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    border-radius: 14px;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-width: 280px;
    max-width: 380px;
    pointer-events: none;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1), opacity 0.28s ease;
}
.manaa-toast.is-visible {
    transform: translateX(0);
    opacity: 1;
}
.manaa-toast--error {
    background: rgba(24, 18, 26, 0.94);
    border: 1px solid rgba(230,55,85,0.35);
    color: #fff;
}
.manaa-toast--success {
    background: rgba(18, 26, 24, 0.94);
    border: 1px solid rgba(26,181,181,0.35);
    color: #fff;
}
.manaa-toast__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.manaa-toast--error .manaa-toast__icon { background: rgba(160,100,80,0.15); color: #a06050; }
.manaa-toast--success .manaa-toast__icon { background: rgba(107,143,107,0.15); color: #6b8f6b; }
.manaa-toast__text { line-height: 1.4; }

@media (max-width: 600px) {
    .manaa-toast {
        bottom: 20px;
        right: 16px;
        left: 16px;
        min-width: unset;
        max-width: unset;
        transform: translateY(120%);
    }
    .manaa-toast.is-visible {
        transform: translateY(0);
    }
}

@media (max-width: 767px) {
    .hp-newsletter__inner {
        flex-direction: column;
        text-align: center;
    }
    .hp-newsletter__form {
        width: 100%;
    }
    .hp-newsletter__row {
        width: 100%;
    }
    .hp-newsletter__input {
        flex: 1;
        width: auto;
    }
    .hp-newsletter__kvkk {
        text-align: left;
    }
}



/* ── reCAPTCHA v3 badge ────────────────────────────────────────── */
.grecaptcha-badge {
    right: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}

/* ── Altın Tema — bg-golden-dark ──────────────────────────────── */
/* Ana renk: #998463 | Kullanım: class="bg-golden-dark"           */
.bg-golden-dark {
    background: linear-gradient(165deg, #1c1915 0%, #2e2a1e 30%, #4a3e2a 60%, #1c1915 100%);
    color: #ffffff;
}
.bg-golden-dark--solid {
    background: #1c1915;
    color: #ffffff;
}

/* ── KVKK Aydinlatma Metni Sayfa Stilleri ──────────────────────── */
.kvkk-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 160px 24px 80px;
    color: #2c3830;
    line-height: 1.8;
}
.kvkk-page__badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a08828;
    border: 1px solid #a08828;
    border-radius: 50px;
    padding: 4px 14px;
    margin-bottom: 20px;
}
.kvkk-page__hero-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
    color: #2c3830;
    margin-bottom: 8px;
}
.kvkk-page__updated {
    font-size: 0.82rem;
    color: #999;
    margin-bottom: 40px;
}
.kvkk-page__divider {
    height: 2px;
    background: linear-gradient(90deg, #a08828, transparent);
    margin-bottom: 40px;
    border: none;
}
.kvkk-page .entry-content h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3830;
    margin: 40px 0 12px;
    padding-left: 14px;
    border-left: 3px solid #a08828;
}
.kvkk-page .entry-content p {
    font-size: 0.95rem;
    color: #444;
    margin-bottom: 14px;
}
.kvkk-page .entry-content ul,
.kvkk-page .entry-content ol {
    margin: 0 0 14px 0;
    padding-left: 20px;
}
.kvkk-page .entry-content li {
    font-size: 0.95rem;
    color: #444;
    margin-bottom: 6px;
}
.kvkk-page .entry-content .wp-block-group,
.kvkk-page .entry-content .kvkk-info-box {
    background: #f8f7f4;
    border: 1px solid #e8e4da;
    border-radius: 10px;
    padding: 24px 28px;
    margin: 32px 0;
}
.kvkk-page__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 50px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #a08828;
    text-decoration: none;
    transition: color .2s;
}
.kvkk-page__back:hover { color: #2c3830; }


/* ══════════════════════════════════════════════════════════════
   CAP-SLIDES: Sticky Left + Scroll Right (Capston-style)
   ══════════════════════════════════════════════════════════════ */

@keyframes capImgFadeIn {
    from { opacity: 0; transform: scale(1.05); }
    to   { opacity: 1; transform: scale(1); }
}

.cap-slides {
    background: var(--manaa-cream);
    width: 100dvw;
    margin-left: calc(50% - 50dvw);
    overflow: hidden;
}

.cap-slides__desktop { display: none; }
.cap-slides__mobile  { display: block; }

@media (min-width: 768px) {
    .cap-slides__desktop { display: block; }
    .cap-slides__mobile  { display: none; }
}

.cap-slide {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    align-items: flex-start;
}

.cap-slide__left {
    grid-column: 1 / 14;
    height: 100dvh;
    position: sticky;
    top: 0;
    overflow: hidden;
}

.cap-slide__image {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}
.cap-slide__image.is-dragging {
    cursor: grabbing;
}
.cap-slide__image.is-dragging .cap-slide__image-link {
    transition: none !important;
}

/* Layered images (wrapped in <a> for fancybox) */
.cap-slide__image-link {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.1s cubic-bezier(0.55, 0, 0.175, 1),
                transform 7s linear;
    will-change: opacity, transform;
    pointer-events: none;
    z-index: 1;
}
.cap-slide__image-link.is-active {
    opacity: 1;
    transform: scale(1.0);
    pointer-events: auto;
    z-index: 2;
}
.cap-slide__image-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Vignette overlay on image */
.cap-slide__image-vignette {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center,
            rgba(0,0,0,0) 50%,
            rgba(0,0,0,0.35) 100%),
        linear-gradient(to bottom,
            rgba(0,0,0,0.18) 0%,
            transparent 25%,
            transparent 65%,
            rgba(0,0,0,0.30) 100%);
}

/* Vertical edge title on left side */
.cap-slide__vertical {
    position: absolute;
    left: 1.4rem;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    z-index: 7;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.65rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
    pointer-events: none;
    mix-blend-mode: difference;
}

/* Image label (top-right) */
.cap-slide__image-label {
    position: absolute;
    top: 2.5rem;
    right: 2.5rem;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    background: rgba(0,0,0,0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
}
.cap-slide__image-label-sep { opacity: 0.45; }

/* View gallery button (bottom-right) */
.cap-slide__view-gallery {
    position: absolute;
    bottom: 2.5rem;
    right: 2.5rem;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 1.1rem;
    background: rgba(255,255,255,0.92);
    color: var(--manaa-dark);
    border: none;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.cap-slide__view-gallery:hover {
    background: var(--manaa-dark);
    color: var(--manaa-cream);
    transform: translateY(-2px);
}
.cap-slide__view-gallery i { font-size: 0.78rem; }

/* Auto-rotate progress bar (top of image) */
.cap-slide__image-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 6;
    background: rgba(255,255,255,0.15);
    overflow: hidden;
}
.cap-slide__image-progress-bar {
    height: 100%;
    width: 0;
    background: rgba(255,255,255,0.85);
    transition: width 0.1s linear;
}
.cap-slide__image-progress-bar.is-running {
    transition: width var(--rotate-duration, 4200ms) linear;
    width: 100%;
}

/* Pagination dots (clickable) */
.cap-slide__image-dots {
    position: absolute;
    bottom: 2.5rem;
    left: 2.5rem;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.95rem;
    background: rgba(0,0,0,0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
}
.cap-slide__image-dot {
    display: block;
    width: 18px;
    height: 2px;
    background: rgba(255,255,255,0.45);
    border: none;
    padding: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.4s ease, width 0.4s ease;
}
.cap-slide__image-dot:hover { background: rgba(255,255,255,0.75); }
.cap-slide__image-dot.is-active {
    background: #fff;
    width: 30px;
}

/* Award badge (bottom-left of image) */
.cap-slide__award {
    position: absolute;
    bottom: 6rem;
    left: 2.5rem;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1) 0.4s,
                transform 0.6s cubic-bezier(0.16,1,0.3,1) 0.4s;
}
.cap-slide.is-visible .cap-slide__award {
    opacity: 1;
    transform: translateY(0);
}
.cap-slide__award img {
    display: block;
    max-height: 92px;
    width: auto;
    height: auto;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45));
}

/* Mobile award */
.cap-slide-m__image {
    position: relative;
}
.cap-slide-m__award {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 3;
    pointer-events: none;
}
.cap-slide-m__award img {
    display: block;
    max-height: 56px;
    width: auto;
    height: auto;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

/* Counter overlay on image */
.cap-slide__counter {
    position: absolute;
    top: 2.5rem;
    left: 2.5rem;
    z-index: 5;
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,0.35);
    letter-spacing: 0.12em;
}
.cap-slide__counter-num {
    font-size: 1.1rem;
    font-weight: 500;
}
.cap-slide__counter-sep,
.cap-slide__counter-total {
    font-size: 0.8rem;
    font-weight: 300;
    opacity: 0.7;
}

.cap-slide__right {
    grid-column: 14 / 25;
    background: var(--manaa-cream);
    position: relative;
    overflow: hidden;
}

/* Subtle vertical guide line */
.cap-slide__right::before {
    content: "";
    position: absolute;
    top: 18%;
    bottom: 18%;
    left: 0;
    width: 1px;
    background: linear-gradient(to bottom,
        transparent,
        rgba(44,56,48,0.12) 20%,
        rgba(44,56,48,0.12) 80%,
        transparent);
    pointer-events: none;
    z-index: 1;
}

/* Watermark number — soft, huge background element */
.cap-slide__watermark {
    position: absolute;
    top: 50%;
    right: -3vw;
    transform: translateY(-50%);
    z-index: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    font-size: clamp(20rem, 38vw, 48rem);
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: rgba(44,56,48,0.025);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.cap-slide__content {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.75rem;
    padding: 4rem clamp(2.5rem, 5vw, 5rem) 4rem clamp(3rem, 6vw, 6rem);
    max-width: 620px;
    position: relative;
    z-index: 2;
}

/* Eyebrow row (eyebrow + status badge side by side) */
.cap-slide__eyebrow-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

/* Eyebrow label */
.cap-slide__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--manaa-taupe, #a08828);
}
.cap-slide__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--manaa-taupe, #a08828);
    box-shadow: 0 0 0 4px rgba(160,136,40,0.15);
}

/* Status badge */
.cap-slide__status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    background: rgba(44,56,48,0.06);
    color: rgba(44,56,48,0.65);
    border: 1px solid rgba(44,56,48,0.1);
}
.cap-slide__status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(44,56,48,0.45);
    animation: capStatusPulse 2.4s ease-in-out infinite;
}
.cap-slide__status.is-done {
    background: rgba(94, 145, 95, 0.10);
    color: #4a7a4b;
    border-color: rgba(94, 145, 95, 0.22);
}
.cap-slide__status.is-done .cap-slide__status-dot { background: #5e915f; }
.cap-slide__status.is-progress {
    background: rgba(160, 136, 40, 0.10);
    color: var(--manaa-taupe, #a08828);
    border-color: rgba(160, 136, 40, 0.25);
}
.cap-slide__status.is-progress .cap-slide__status-dot { background: var(--manaa-taupe, #a08828); }
.cap-slide__status.is-soon {
    background: rgba(176, 95, 60, 0.10);
    color: #b05f3c;
    border-color: rgba(176, 95, 60, 0.22);
}
.cap-slide__status.is-soon .cap-slide__status-dot { background: #b05f3c; }
@keyframes capStatusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.85); }
}

/* Quote / tagline under title */
.cap-slide__quote {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(44,56,48,0.62);
    margin: 0;
    max-width: 480px;
    position: relative;
    quotes: "\201C" "\201D" "\2018" "\2019";
}
.cap-slide__quote::before {
    content: open-quote;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: normal;
    font-size: 2.4em;
    line-height: 1;
    color: rgba(160,136,40,0.55);
    margin-right: 0.15em;
    vertical-align: -0.35em;
}
.cap-slide__quote::after {
    content: close-quote;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: normal;
    font-size: 2.4em;
    line-height: 0;
    color: rgba(160,136,40,0.55);
    margin-left: 0.05em;
    vertical-align: -0.5em;
}

/* Display title */
.cap-slide__title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.6rem, 4.4vw, 4.4rem);
    font-weight: 300;
    text-transform: uppercase;
    text-align: left;
    color: var(--manaa-dark);
    letter-spacing: 0.02em;
    line-height: 1.0;
    margin: 0;
    word-spacing: 0.05em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}
.cap-slide__title-logo {
    height: clamp(2rem, 2.6vw, 2.8rem);
    width: auto;
    display: block;
    object-fit: contain;
}
.cap-slide__title-text {
    display: block;
    line-height: 0.98;
}

/* Optional video — refined dimensions when present */
.cap-slide__video {
    aspect-ratio: 16 / 10;
    width: 100%;
    max-width: 360px;
    position: relative;
    overflow: hidden;
    background: rgba(44,56,48,0.04);
    flex-shrink: 0;
    border-radius: 2px;
}
.cap-slide__video iframe,
.cap-slide__video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    border: none;
}

/* Meta grid — editorial info rows */
.cap-slide__meta {
    width: 100%;
    max-width: 460px;
    margin: 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(44,56,48,0.12);
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}
.cap-slide__meta-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    align-items: baseline;
    gap: 1rem;
}
.cap-slide__meta-label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(44,56,48,0.45);
    margin: 0;
}
.cap-slide__meta-icon {
    font-size: 0.78rem;
    color: var(--manaa-taupe, #a08828);
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}
.cap-slide__meta-value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--manaa-dark);
    margin: 0;
    letter-spacing: 0.01em;
}

/* CTA — prominent inline button */
.cap-slide__cta {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    margin-top: 0.75rem;
    padding: 1rem 1.4rem 1rem 1.6rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--manaa-dark);
    text-decoration: none;
    background: transparent;
    border: 1px solid rgba(44,56,48,0.85);
    border-radius: 999px;
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: color 0.35s ease, border-color 0.35s ease;
}
.cap-slide__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--manaa-dark);
    transform: translateX(-101%);
    transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
    z-index: -1;
}
.cap-slide__cta-text { position: relative; }
.cap-slide__cta-icon {
    position: relative;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.72rem;
    transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}
.cap-slide__cta:hover {
    color: var(--manaa-cream);
    border-color: var(--manaa-dark);
}
.cap-slide__cta:hover::before { transform: translateX(0); }
.cap-slide__cta:hover .cap-slide__cta-icon { transform: rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════
   Z-STACK LAYERED ENTRY (#5) — content reveals with 3D depth
   ═══════════════════════════════════════════════════════════ */
.cap-slide__content {
    perspective: 1200px;
    transform-style: preserve-3d;
}
.cap-slide__content > * {
    opacity: 0;
    transform: translateY(2.4rem) translateZ(-80px) scale(0.94);
    transition: opacity 0.9s cubic-bezier(0.55, 0, 0.175, 1),
                transform 1s cubic-bezier(0.55, 0, 0.175, 1),
                filter 0.9s cubic-bezier(0.55, 0, 0.175, 1);
    filter: blur(4px);
}
.cap-slide__content > *:nth-child(1) { transition-delay: 0.05s; }
.cap-slide__content > *:nth-child(2) { transition-delay: 0.15s; }
.cap-slide__content > *:nth-child(3) { transition-delay: 0.25s; }
.cap-slide__content > *:nth-child(4) { transition-delay: 0.35s; }
.cap-slide__content > *:nth-child(5) { transition-delay: 0.45s; }
.cap-slide__content > *:nth-child(6) { transition-delay: 0.55s; }
.cap-slide.is-visible .cap-slide__content > * {
    opacity: 1;
    transform: translateY(0) translateZ(0) scale(1);
    filter: blur(0);
}

/* ═══════════════════════════════════════════════════════════
   WORD-BY-WORD TITLE REVEAL (#2)
   ═══════════════════════════════════════════════════════════ */
.cap-slide__title-text {
    display: inline-block;
    line-height: 0.98;
}
.cap-slide__title-text .cap-slide__title-word {
    display: inline-block;
    margin-right: 0.2em;
}
.cap-slide__title-word {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(28px);
    transition: opacity 0.85s cubic-bezier(0.55, 0, 0.175, 1),
                filter 0.85s cubic-bezier(0.55, 0, 0.175, 1),
                transform 0.85s cubic-bezier(0.55, 0, 0.175, 1);
    will-change: opacity, filter, transform;
}
.cap-slide.is-visible .cap-slide__title .cap-slide__title-word {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}
.cap-slide.is-visible .cap-slide__title .cap-slide__title-word:nth-child(1) { transition-delay: 0.50s; }
.cap-slide.is-visible .cap-slide__title .cap-slide__title-word:nth-child(2) { transition-delay: 0.65s; }
.cap-slide.is-visible .cap-slide__title .cap-slide__title-word:nth-child(3) { transition-delay: 0.80s; }
.cap-slide.is-visible .cap-slide__title .cap-slide__title-word:nth-child(4) { transition-delay: 0.95s; }

/* ═══════════════════════════════════════════════════════════
   IMAGE MASK WIPE (#3)
   ═══════════════════════════════════════════════════════════ */
.cap-slide__image-link {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.3s cubic-bezier(0.7, 0, 0.2, 1),
                opacity 1.1s cubic-bezier(0.55, 0, 0.175, 1),
                transform 7s linear;
}
.cap-slide.is-visible .cap-slide__image-link.is-active {
    clip-path: inset(0 0 0 0);
}

/* ═══════════════════════════════════════════════════════════
   COUNTER MORPH (#4) — number flips up
   ═══════════════════════════════════════════════════════════ */
.cap-slide__counter-num {
    display: inline-block;
    overflow: hidden;
    height: 1.3em;
    line-height: 1.3em;
    vertical-align: middle;
}
.cap-slide__counter-num-inner {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.65s cubic-bezier(0.7, 0, 0.2, 1),
                opacity 0.65s ease;
    transition-delay: 0.25s;
}
.cap-slide.is-visible .cap-slide__counter-num-inner {
    transform: translateY(0);
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   VERTICAL EDGE TITLE TICKER (#7)
   ═══════════════════════════════════════════════════════════ */
.cap-slide__vertical {
    opacity: 0;
    transform: translateY(-30%) rotate(-90deg);
    transition: opacity 0.7s cubic-bezier(0.55, 0, 0.175, 1),
                transform 0.7s cubic-bezier(0.55, 0, 0.175, 1);
}
.cap-slide.is-visible .cap-slide__vertical {
    opacity: 0.6;
    transform: translateY(-50%) rotate(-90deg);
    transition-delay: 0.4s;
}

/* ═══════════════════════════════════════════════════════════
   VIGNETTE PULSE (#8)
   ═══════════════════════════════════════════════════════════ */
.cap-slide.is-visible .cap-slide__image-vignette {
    animation: capVignettePulse 1.4s cubic-bezier(0.7, 0, 0.2, 1) 0.25s;
}
@keyframes capVignettePulse {
    0%   { filter: brightness(0.4); }
    45%  { filter: brightness(1.5); }
    100% { filter: brightness(1); }
}

/* ═══════════════════════════════════════════════════════════
   WATERMARK POP (#9)
   ═══════════════════════════════════════════════════════════ */
.cap-slide__watermark {
    transform: translateY(-50%) translateX(6%) scale(0.92);
    color: rgba(44,56,48,0);
    transition: transform 1.1s cubic-bezier(0.55, 0, 0.175, 1),
                color 1.1s ease;
    transition-delay: 0.15s;
}
.cap-slide.is-visible .cap-slide__watermark {
    transform: translateY(-50%) translateX(0) scale(1);
    color: rgba(44,56,48,0.025);
}

/* ═══════════════════════════════════════════════════════════
   COLOR WASH (#10) — right panel briefly tinted on entry
   ═══════════════════════════════════════════════════════════ */
.cap-slide__right::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent-color, var(--manaa-taupe, #a08828));
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: multiply;
}
.cap-slide.is-visible .cap-slide__right::after {
    animation: capColorWash 1.3s cubic-bezier(0.55, 0, 0.175, 1);
}
@keyframes capColorWash {
    0%   { opacity: 0; }
    18%  { opacity: 0.18; }
    100% { opacity: 0; }
}

/* ── Mobile ── */
.cap-slide-m {
    overflow: hidden;
}

.cap-slide-m__image {
    height: 460px;
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: 0;
}

/* Horizontal swipe track inside each project image area */
.cap-slide-m__image-track {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.cap-slide-m__image-track::-webkit-scrollbar { display: none; }

.cap-slide-m__image-item {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    user-select: none;
    -webkit-user-drag: none;
}

/* Subtle bottom gradient so overlays stay readable on any photo */
.cap-slide-m__image::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 110px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0));
    pointer-events: none;
    z-index: 2;
}

/* Image counter label (top-right, ultra-subtle) */
.cap-slide-m__image-label {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.32rem 0.62rem;
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}
.cap-slide-m__image-label-sep {
    opacity: 0.45;
    margin: 0 0.05rem;
}
.cap-slide-m__image-label-current {
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.cap-slide-m__image-label-total {
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/* Thin progress-bar indicators (bottom-center over image) */
.cap-slide-m__image-dots {
    position: absolute;
    left: 50%;
    bottom: 1.1rem;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.cap-slide-m__image-dot {
    position: relative;
    display: block;
    width: 16px;
    height: 2px;
    min-width: 0;
    min-height: 0 !important;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.42);
    cursor: pointer;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.35s ease;
    -webkit-appearance: none;
    appearance: none;
}
.cap-slide-m__image-dot::before {
    content: '';
    position: absolute;
    inset: -18px -4px;
}
.cap-slide-m__image-dot.is-active {
    width: 26px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.cap-slide-m__image-dot:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 4px;
}

.cap-slide-m__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cap-slide-m__content {
    background: var(--manaa-cream);
    position: relative;
    z-index: 10;
    padding: 3rem 1.75rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
    text-align: left;
}

.cap-slide-m__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--manaa-taupe, #a08828);
}
.cap-slide-m__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--manaa-taupe, #a08828);
    box-shadow: 0 0 0 4px rgba(160,136,40,0.15);
}

.cap-slide-m__title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.85rem, 7vw, 2.6rem);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.0;
    color: var(--manaa-dark);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}
.cap-slide-m__title-logo {
    height: clamp(1.6rem, 5.5vw, 2rem);
    width: auto;
    display: block;
    object-fit: contain;
}
.cap-slide-m__title-text {
    display: block;
    line-height: 0.98;
}

.cap-slide-m__meta {
    width: 100%;
    margin: 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid rgba(44,56,48,0.12);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.cap-slide-m__meta-row {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    align-items: baseline;
    gap: 1rem;
    margin: 0;
}
.cap-slide-m__meta-row dt {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(44,56,48,0.45);
    margin: 0;
}
.cap-slide-m__meta-row dd {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: var(--manaa-dark);
    margin: 0;
}

.cap-slide-m__cta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
    padding: 0.9rem 1.2rem 0.9rem 1.4rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--manaa-dark);
    text-decoration: none;
    border: 1px solid rgba(44,56,48,0.85);
    border-radius: 999px;
}

.cap-slide-m__cta-text { position: relative; }
.cap-slide-m__cta-icon {
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: transform 0.35s ease;
}

.cap-slide-m__cta:hover .cap-slide-m__cta-icon { transform: rotate(-45deg); }


/* ══════════════════════════════════════════════════════════════
   HERO-GB: Fullwidth Grid Hero
   ══════════════════════════════════════════════════════════════ */

.hero-gb {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Navbar ── */
.hero-gb__nav {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2.5rem 2.5rem;
    background: linear-gradient(to bottom,
        rgba(44,56,48,.55) 0%,
        rgba(44,56,48,.25) 60%,
        transparent 100%);
    pointer-events: none;
}
.hero-gb__nav > * { pointer-events: auto; }

.hero-gb__hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    width: 32px;
    order: 1;
}
.hero-gb__hamburger span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: rgba(255,255,255,.8);
    transition: all .3s ease;
}
.hero-gb__hamburger.is-active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hero-gb__hamburger.is-active span:nth-child(2) { opacity: 0; }
.hero-gb__hamburger.is-active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.menu-open .hero-gb__hamburger { display: none; }

.hero-gb__logo-wrap {
    order: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1.2rem;
    transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-gb__logo-wrap:hover { transform: scale(1.06); }

.hero-gb__logo {
    height: 80px;
    width: auto;
    display: block;
    filter:
        drop-shadow(0 4px 14px rgba(0,0,0,.45))
        drop-shadow(0 2px 4px rgba(0,0,0,.25));
    transition: filter .4s ease;
}
.hero-gb__logo-wrap:hover .hero-gb__logo {
    filter:
        drop-shadow(0 6px 22px rgba(0,0,0,.55))
        drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.hero-gb__nav-right {
    order: 3;
    display: flex;
    align-items: center;
    gap: 2rem;
}
.hero-gb__tagline {
    font-size: .62rem;
    letter-spacing: .18em;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
}
.hero-gb__phone {
    font-size: .75rem;
    letter-spacing: .04em;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    transition: color .2s;
}
.hero-gb__phone:hover { color: var(--manaa-taupe); }

/* ── Grid ── */
.hero-gb__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    flex: 1;
}

.hero-gb__card {
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
}
.hero-gb__card--featured {
    grid-column: 1;
    grid-row: 1 / 3;
}

.hero-gb__card-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform .7s ease;
}
.hero-gb__card:hover .hero-gb__card-img { transform: scale(1.04); }

.hero-gb__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(44,56,48,.82) 0%, rgba(44,56,48,.1) 50%, transparent 70%);
    transition: opacity .4s;
}
.hero-gb__card:hover .hero-gb__card-overlay { opacity: .75; }

.hero-gb__card-info {
    position: absolute;
    bottom: 1.25rem;
    left: 1.5rem;
    z-index: 2;
}
.hero-gb__card-logo {
    display: block;
    height: 18px;
    width: auto;
    margin-bottom: .5rem;
    opacity: .98;
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}
.hero-gb__card--featured .hero-gb__card-logo {
    height: 28px;
    margin-bottom: .75rem;
}
.hero-gb__card-num {
    display: block;
    font-family: var(--font-family-light);
    font-size: 2.25rem;
    font-weight: 300;
    color: #fff;
    line-height: 1;
}
.hero-gb__card--featured .hero-gb__card-num {
    font-size: clamp(3rem, 5vw, 5rem);
}
.hero-gb__card-loc {
    display: block;
    font-size: .65rem;
    letter-spacing: .16em;
    color: rgba(255,255,255,.6);
    text-transform: uppercase;
    margin-top: .2rem;
}

.hero-gb__card-arrow {
    position: absolute;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .8rem;
    opacity: 0;
    transform: scale(.75);
    transition: opacity .3s, transform .3s, border-color .3s, background .3s;
}
.hero-gb__card:hover .hero-gb__card-arrow {
    opacity: 1;
    transform: scale(1);
    border-color: var(--manaa-taupe);
    background: var(--manaa-taupe);
}

/* ── Stats bar ── */
.hero-gb__bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 50;
    background: linear-gradient(to top, rgba(44,56,48,.72) 0%, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 1.25rem 2rem 1.5rem;
    pointer-events: none;
}

.hero-gb__stat { text-align: center; }
.hero-gb__stat-num {
    display: block;
    font-family: var(--font-family-light);
    font-size: 1.5rem;
    font-weight: 300;
    color: #fff;
    line-height: 1;
}
.hero-gb__stat-label {
    display: block;
    font-size: .58rem;
    letter-spacing: .16em;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    margin-top: .2rem;
}
.hero-gb__divider {
    width: 1px;
    height: 2rem;
    background: rgba(255,255,255,.18);
}

/* ── Mobile ── */
@media (max-width: 767px) {
    .hero-gb__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 2fr 1fr 1fr;
    }
    .hero-gb__card--featured {
        grid-column: 1 / 3;
        grid-row: 1;
    }
    .hero-gb__bar { gap: 1.25rem; padding: 1rem 1rem 1.25rem; }
    .hero-gb__stat-num { font-size: 1.1rem; }
    .hero-gb__tagline { display: none; }
    .hero-gb__nav { padding: 1rem 1.25rem; }
}

/* ── hero-gb drag carousel ── */
.hero-gb__card-img {
    transition: opacity .35s ease, transform .7s ease;
}
.hero-gb__card-img.is-fading {
    opacity: 0 !important;
    transform: scale(1.03) !important;
}
.hero-gb__grid {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.hero-gb__grid.is-dragging { cursor: grabbing; }
.hero-gb__grid.is-dragging .hero-gb__card { pointer-events: none; }
.hero-gb__card--featured {
    transition: transform .45s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}

/* ── hero-gb: vanilla pointer-drag carousel ── */
.hero-gb__viewport {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}
.hero-gb__viewport.is-dragging { cursor: grabbing; }

.hero-gb__track {
    display: flex;
    width: 100%;
    height: 100%;
    transform: translate3d(0, 0, 0);
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.hero-gb__track.is-dragging,
.hero-gb__track.is-jumping { transition: none; }

.hero-gb__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}
.hero-gb__slide .hero-gb__grid { height: 100%; }

/* Block native browser drag on cards/images so pointerdown reaches our handler */
.hero-gb__card,
.hero-gb__card * {
    -webkit-user-drag: none;
    user-drag: none;
}

/* Slide counter */
.hero-gb__counter {
    position: absolute;
    bottom: 5.5rem;
    right: 2rem;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    letter-spacing: .1em;
    color: rgba(255,255,255,.55);
    pointer-events: none;
}
.hero-gb__counter-cur {
    font-size: 1rem;
    color: #fff;
    font-family: var(--font-family-light);
}

/* ── hero-gb progress bar ── */
.hero-gb__progress {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: rgba(255,255,255,.12);
    z-index: 20;
}
.hero-gb__progress-fill {
    height: 100%;
    width: 0%;
    background: var(--manaa-taupe);
}


/* ══════════════════════════════════════════════════════════════
   SINGLE PROJECT (single-manaa_project) — BUMPED TYPOGRAPHY
   Targets body.single-manaa_project, scaling all sp-* font sizes up
   ══════════════════════════════════════════════════════════════ */

body.single-manaa_project {
    font-size: 17px;
}

/* Base text — paragraphs, lists, definitions */
body.single-manaa_project p,
body.single-manaa_project li,
body.single-manaa_project dd,
body.single-manaa_project blockquote {
    font-size: 1.125rem;
    line-height: 1.75;
}

/* Heading scale boost */
body.single-manaa_project h1 { font-size: clamp(3rem, 5.5vw, 5.5rem); }
body.single-manaa_project h2 { font-size: clamp(2.2rem, 4vw, 4rem); }
body.single-manaa_project h3 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
body.single-manaa_project h4 { font-size: clamp(1.35rem, 2vw, 1.65rem); }
body.single-manaa_project h5 { font-size: 1.2rem; }
body.single-manaa_project h6 { font-size: 1rem; }

/* Display titles — any sp-* class ending in __title / __heading / __number */
body.single-manaa_project [class*="sp-"][class*="__title"],
body.single-manaa_project [class*="sp-"][class*="__heading"] {
    font-size: clamp(1.85rem, 3.6vw, 3.4rem);
    line-height: 1.15;
}
/* Hero — prefix, number, location all match in size for a balanced display */
body.single-manaa_project .sp-hero__prefix,
body.single-manaa_project .sp-hero__number,
body.single-manaa_project .sp-hero__location {
    font-size: clamp(3.5rem, 7.2vw, 6rem);
    letter-spacing: 0.32em;
    font-weight: 300;
    line-height: 1.15;
}
body.single-manaa_project .sp-hero__prefix   { letter-spacing: 0.42em; }
body.single-manaa_project .sp-hero__location { letter-spacing: 0.32em; }
body.single-manaa_project .sp-hero__scroll span { font-size: 1.15rem; letter-spacing: 0.32em; }

/* Exclude footer-cta from the general h2/title bump — it's shared with other pages */
body.single-manaa_project .footer-cta__title,
body.single-manaa_project .footer-cta__text h2,
body.single-manaa_project .footer-cta h2,
body.single-manaa_project .footer-cta [class*="__title"] {
    font-size: clamp(1.1rem, 1.8vw, 1.5rem) !important;
    line-height: 1.35 !important;
}
body.single-manaa_project .footer-cta__text p,
body.single-manaa_project .footer-cta p {
    font-size: 1rem !important;
    line-height: 1.55 !important;
}

/* Body / description / paragraph-like */
body.single-manaa_project [class*="sp-"][class*="__desc"],
body.single-manaa_project [class*="sp-"][class*="__text"],
body.single-manaa_project [class*="sp-"][class*="__excerpt"],
body.single-manaa_project [class*="sp-"][class*="__paragraph"],
body.single-manaa_project [class*="sp-"][class*="__body"],
body.single-manaa_project [class*="sp-"][class*="__intro"] {
    font-size: 1.15rem;
    line-height: 1.78;
}

/* Eyebrows / labels / tags / categories — keep small but bump slightly */
body.single-manaa_project [class*="sp-"][class*="__label"],
body.single-manaa_project [class*="sp-"][class*="__eyebrow"],
body.single-manaa_project [class*="sp-"][class*="__tag"],
body.single-manaa_project [class*="sp-"][class*="__cat"],
body.single-manaa_project [class*="sp-"][class*="__category"] {
    font-size: 0.85rem;
    letter-spacing: 0.22em;
}

/* Meta / specs / stats values — exclude sp-hero__number (display element) */
body.single-manaa_project [class*="sp-"][class*="__value"],
body.single-manaa_project [class*="sp-"][class*="__stat"],
body.single-manaa_project [class*="sp-"][class*="__count"],
body.single-manaa_project [class*="sp-"][class*="__num"]:not(.sp-hero__number) {
    font-size: 1.25rem;
}

/* Force sp-hero__number to display size (override attribute selector) */
body.single-manaa_project .sp-hero__number {
    font-size: clamp(3.5rem, 7.2vw, 6rem) !important;
    letter-spacing: 0.32em !important;
    font-weight: 300 !important;
    line-height: 1.15 !important;
    margin: 12px 0 !important;
}

/* Subtitle with quotation marks */
body.single-manaa_project .sp-hero__subtitle {
    font-size: 1.7rem;
    line-height: 1.6;
    quotes: "\201C" "\201D";
    font-style: italic;
}
body.single-manaa_project .sp-hero__subtitle::before {
    content: open-quote;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: normal;
    font-size: 1.6em;
    line-height: 0;
    color: rgba(255,255,255,0.55);
    margin-right: 0.12em;
    vertical-align: -0.25em;
}
body.single-manaa_project .sp-hero__subtitle::after {
    content: close-quote;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: normal;
    font-size: 1.6em;
    line-height: 0;
    color: rgba(255,255,255,0.55);
    margin-left: 0.08em;
    vertical-align: -0.35em;
}
body.single-manaa_project [class*="sp-"][class*="__counter"] {
    font-size: 1rem;
}

/* Counter sub-elements (current/total) override broader counter rule */
body.single-manaa_project .sp-gstrip__counter-current,
body.single-manaa_project .sp-gstrip__counter-total {
    font-size: 1.05rem;
}

/* Buttons & CTAs */
body.single-manaa_project [class*="sp-"][class*="__cta"],
body.single-manaa_project [class*="sp-"][class*="__btn"],
body.single-manaa_project [class*="sp-"][class*="__button"] {
    font-size: 0.9rem;
    letter-spacing: 0.22em;
}

/* Sticky CTA (action button always visible) */
body.single-manaa_project .sp-sticky-cta {
    font-size: 0.95rem;
}

/* Mobile — keep readable but slightly smaller scale */
@media (max-width: 767.98px) {
    body.single-manaa_project { font-size: 16px; }
    body.single-manaa_project p,
    body.single-manaa_project li,
    body.single-manaa_project dd {
        font-size: 1.05rem;
        line-height: 1.7;
    }
    body.single-manaa_project [class*="sp-"][class*="__desc"],
    body.single-manaa_project [class*="sp-"][class*="__text"],
    body.single-manaa_project [class*="sp-"][class*="__excerpt"],
    body.single-manaa_project [class*="sp-"][class*="__intro"] {
        font-size: 1.05rem;
        line-height: 1.7;
    }
}

/* ════════════════════════════════════════════════════════════════
   KURUMSAL (HAKKIMIZDA) & MAANAA FARKI — Typography Bump
   Scoped via .kr- and .mf- class prefixes used only on these pages
   ════════════════════════════════════════════════════════════════ */

/* — Kurumsal / Hakkımızda — */
.kr-label { font-size: 0.95rem; letter-spacing: 0.28em; }
.kr-heading { font-size: clamp(2.6rem, 4vw, 3.6rem); letter-spacing: 0.08em; line-height: 1.18; }
.kr-hero__badge-text { font-size: 0.85rem; }
.kr-hero__title-small { font-size: 1.3rem; }
.kr-hero__title-accent { font-size: clamp(4rem, 7vw, 6rem); }
.kr-hero__desc { font-size: 1.2rem; line-height: 1.85; max-width: 580px; }
.kr-hero__cta { font-size: 0.88rem; letter-spacing: 0.22em; padding: 16px 36px; }
.kr-hero__stat-num { font-size: 2.6rem; }
.kr-hero__stat-label { font-size: 0.85rem; letter-spacing: 0.18em; }
.kr-about__text { font-size: 1.18rem; line-height: 1.9; }
.kr-about__text p { margin-bottom: 22px; }
.kr-mission__title { font-size: clamp(1.95rem, 2.6vw, 2.4rem); letter-spacing: 0.08em; line-height: 1.22; margin-bottom: 22px; }
.kr-mission__card { padding: 60px; }
.kr-mission__card p { font-size: 1.1rem; line-height: 1.9; }
.kr-stats__number { font-size: 4.4rem; }
.kr-stats__suffix { font-size: 2.4rem; }
.kr-stats__label { font-size: 0.9rem; letter-spacing: 0.22em; }
.kr-video__label { font-size: 0.9rem; }
.kr-video__title { font-size: clamp(2.4rem, 4.2vw, 3.6rem); }
.kr-values-stmt__title,
.kr-values-stmt h2,
.kr-values-stmt p { font-size: 1.18rem; line-height: 1.85; }

/* — MaaNaa Farkı — */
.mf-hero__badge-text { font-size: 0.85rem; }
.mf-hero__title-line:first-child { font-size: clamp(2.2rem, 3.4vw, 2.8rem); }
.mf-hero__title-line--accent { font-size: clamp(4.2rem, 7vw, 5.8rem); }
.mf-hero__desc { font-size: 1.2rem; line-height: 1.85; }
.mf-hero__cta { font-size: 0.92rem; letter-spacing: 0.2em; padding: 16px 40px; }
.mf-intro { padding-top: 80px; }
.mf-intro__number { font-size: clamp(7rem, 11vw, 10rem); }
.mf-intro__text h2 { font-size: clamp(1.9rem, 3vw, 2.4rem); }
.mf-intro__text p { font-size: 1.18rem; line-height: 1.9; }
.mf-reason-card__inner { padding: 40px 44px; gap: 32px; }
.mf-reason-card__num { font-size: 3rem; min-width: 60px; }
.mf-reason-card__title { font-size: 1.5rem; }
.mf-reason-card__text { font-size: 1.12rem; line-height: 1.9; }
.mf-highlight__label { font-size: 0.9rem; }
.mf-highlight__title { font-size: clamp(2.6rem, 4.2vw, 3.4rem); }
.mf-pillars__number { font-size: clamp(3.8rem, 5.5vw, 4.6rem); }
.mf-pillars__suffix { font-size: 1.2rem; }
.mf-pillars__name { font-size: 0.9rem; letter-spacing: 0.22em; }
.mf-pillars__desc { font-size: 1.05rem; line-height: 1.7; }

/* Mobile readability — keep bumped but not overflowing */
@media (max-width: 767.98px) {
    .kr-heading { font-size: clamp(1.95rem, 6vw, 2.4rem); }
    .kr-about__text { font-size: 1.05rem; line-height: 1.85; }
    .kr-hero__desc { font-size: 1.05rem; }
    .kr-stats__number { font-size: 3rem; }
    .kr-stats__suffix { font-size: 1.6rem; }
    .kr-mission__title { font-size: 1.55rem; }
    .kr-mission__card { padding: 36px 28px; }
    .kr-mission__card p { font-size: 1rem; line-height: 1.85; }

    .mf-intro__text h2 { font-size: 1.6rem; }
    .mf-intro__text p { font-size: 1.05rem; }
    .mf-reason-card__inner { padding: 28px 24px; gap: 18px; }
    .mf-reason-card__title { font-size: 1.25rem; }
    .mf-reason-card__text { font-size: 1.02rem; }
    .mf-highlight__title { font-size: 2rem; }
    .mf-pillars { grid-template-columns: 1fr; }
    .mf-pillars__number { font-size: 3rem; }
}

/* ════════════════════════════════════════════════════════════════
   CAP-SLIDES — "Tüm Projeleri Gör" CTA (after 10-project slider)
   ════════════════════════════════════════════════════════════════ */
.cap-slides__cta {
    position: relative;
    text-align: center;
    padding: clamp(60px, 8vw, 110px) 24px clamp(70px, 9vw, 130px);
    background: var(--manaa-cream, #f5f3ef);
    overflow: hidden;
}

.cap-slides__cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(420px, 60%);
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--manaa-taupe-rgb, 176, 168, 138), 0.35) 50%,
        transparent);
}

.cap-slides__cta-line {
    width: 1px;
    height: 56px;
    background: linear-gradient(to bottom,
        transparent,
        rgba(var(--manaa-taupe-rgb, 176, 168, 138), 0.7));
    margin: 0 auto 28px;
}

.cap-slides__cta-eyebrow {
    display: inline-block;
    font-family: var(--font-family-bold);
    font-size: 0.78rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--manaa-taupe, #b0a88a);
    margin-bottom: 22px;
}

.cap-slides__cta-title {
    font-family: var(--font-family-bold);
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--manaa-dark, #1f2421);
    margin: 0 auto 22px;
    max-width: 820px;
}

.cap-slides__cta-title .manaa-gradient-text {
    display: inline-block;
}

.cap-slides__cta-desc {
    font-family: var(--font-family-light);
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    line-height: 1.85;
    color: rgba(0, 0, 0, 0.62);
    max-width: 620px;
    margin: 0 auto 44px;
}

.cap-slides__cta-btn {
    --btn-bg: var(--manaa-dark, #1f2421);
    --btn-color: var(--manaa-white, #ffffff);
    --btn-accent: var(--manaa-taupe, #b0a88a);

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    font-family: var(--font-family-bold);
    font-size: 0.92rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--btn-color);
    text-decoration: none;
    padding: 22px 48px;
    background: var(--btn-bg);
    border: 1px solid var(--btn-bg);
    overflow: hidden;
    transition: color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    isolation: isolate;
}

.cap-slides__cta-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--btn-accent);
    transform: translateY(101%);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

.cap-slides__cta-btn:hover {
    color: var(--manaa-dark, #1f2421);
    border-color: var(--btn-accent);
    transform: translateY(-2px);
}

.cap-slides__cta-btn:hover::before {
    transform: translateY(0);
}

.cap-slides__cta-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.cap-slides__cta-btn:hover .cap-slides__cta-btn-icon {
    transform: translateX(6px);
}

@media (max-width: 767.98px) {
    .cap-slides__cta { padding: 60px 20px 70px; }
    .cap-slides__cta-line { height: 40px; margin-bottom: 22px; }
    .cap-slides__cta-eyebrow { font-size: 0.7rem; letter-spacing: 0.32em; }
    .cap-slides__cta-title { font-size: 1.8rem; letter-spacing: 0.02em; }
    .cap-slides__cta-desc { font-size: 1rem; margin-bottom: 32px; }
    .cap-slides__cta-btn { padding: 18px 34px; font-size: 0.82rem; letter-spacing: 0.22em; gap: 14px; }
}

/* ════════════════════════════════════════════════════════════════
   STICKY-REVEAL FOOTER — Capston-style reveal-from-under
   Site content (.site-stage) sits on top of a fixed footer. As you
   scroll, the content slides up and reveals the footer that was
   always pinned to the viewport bottom.
   Desktop only — mobile / short viewports keep normal flow.
   ════════════════════════════════════════════════════════════════ */
:root {
    --reveal-footer-h: 820px;
    --footer-bg: var(--manaa-dark, #2c3830);
    --footer-text: #efe9d8;
    --footer-muted: rgba(239, 233, 216, 0.55);
    --footer-accent: var(--manaa-taupe, #b0a88a);
}

@media (min-width: 992px) and (min-height: 721px) {
    .site-stage {
        position: relative;
        z-index: 2;
        background: var(--manaa-cream, #f5f3ef);
        margin-bottom: var(--reveal-footer-h);
        min-height: 100vh;
    }

    .manaa-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--reveal-footer-h);
        z-index: 1;
        display: flex;
        flex-direction: column;
    }

    .manaa-footer__main {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        padding: 80px 0 70px; /* extra bottom padding so cols never touch the bottom bar */
        min-height: 0;
    }

    .manaa-footer__bottom {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* Fallback: short viewport or tablet/mobile — natural flow */
@media (max-width: 991.98px), (max-height: 720px) {
    .site-stage {
        position: static;
        margin-bottom: 0;
        background: transparent;
        min-height: 0;
    }
    .manaa-footer {
        position: relative; /* needed so doors/curtain absolute children anchor */
        height: auto;
    }
}

/* ════════════════════════════════════════════════════════════════
   FOOTER ANIMATION LAYERS — Premium Brand Pack
   ════════════════════════════════════════════════════════════════ */

/* Sentinel — invisible 1px trigger pinned to the bottom edge of
   .site-stage. It enters the viewport at the exact moment the
   footer starts to become visible, so animations play during the
   visible reveal scroll instead of completing while still hidden. */
.footer-reveal-sentinel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}
.site-stage { position: relative; }

/* ════════════════════════════════════════════════════════════════
   FOOTER VISUAL DESIGN — Capston-style editorial dark stage
   Applied on all viewports; reveal mechanics are desktop-only.
   NOTE: do NOT set position here — desktop sticky uses fixed,
   mobile fallback sets its own relative below.
   ════════════════════════════════════════════════════════════════ */
.manaa-footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    border-top: none;
    overflow: hidden;
    isolation: isolate;
}

/* Override legacy descendant rules (4-col layout) with dark theme */
.manaa-footer__main { padding: 60px 0 40px; }

/* — Centered stage (logo + wordmark + 3 cols) — */
.manaa-footer__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

/* Small monogram above wordmark */
.manaa-footer__mark {
    display: inline-block;
    line-height: 0;
    opacity: 0.92;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.manaa-footer__mark img {
    width: 78px;
    height: auto;
    filter: brightness(0) invert(0.92) sepia(0.18) saturate(0.6);
}
.manaa-footer__mark:hover { opacity: 1; transform: translateY(-2px); }

/* Massive editorial wordmark */
.manaa-footer__wordmark {
    font-family: var(--font-family-bold);
    font-size: clamp(4.5rem, 13vw, 13rem);
    line-height: 0.92;
    letter-spacing: -0.01em;
    color: var(--footer-text);
    margin: 28px 0 56px;
    user-select: none;
    text-align: center;
    white-space: nowrap;
}

/* Three centered columns */
.manaa-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 220px));
    justify-content: center;
    align-items: start;
    gap: 80px;
    width: 100%;
    max-width: 980px;
}

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

.manaa-footer__col-title {
    font-family: var(--font-family-bold);
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--footer-text);
    margin: 0 0 18px;
    opacity: 0.95;
}

.manaa-footer__col-text {
    font-family: var(--font-family-light);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--footer-text);
    margin: 0;
    opacity: 0.78;
}

/* Contact list (centered) */
.manaa-footer__contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.manaa-footer__contact a {
    font-family: var(--font-family-light);
    font-size: 1rem;
    color: var(--footer-text);
    text-decoration: none;
    opacity: 0.85;
    transition: color 0.25s ease, opacity 0.25s ease;
}
.manaa-footer__contact a:hover { color: var(--footer-accent); opacity: 1; }

/* Social icons — outlined on dark */
.manaa-footer__social {
    display: inline-flex;
    gap: 22px;
    justify-content: center;
    align-items: center;
}
.manaa-footer__social a {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(239, 233, 216, 0.22);
    border-radius: 50%;
    color: var(--footer-text);
    font-size: 0.95rem;
    text-decoration: none;
    background: transparent;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.manaa-footer__social a:hover {
    color: var(--footer-bg);
    background: var(--footer-accent);
    border-color: var(--footer-accent);
    transform: translateY(-2px);
}

/* — Bottom bar — */
.manaa-footer__bottom {
    background: rgba(0, 0, 0, 0.18);
    border-top: 1px solid rgba(239, 233, 216, 0.08);
    padding: 22px 0 18px;
}

.manaa-footer__bottom-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.manaa-footer__bottom-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.manaa-footer__brand-row {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-family-bold);
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--footer-text);
    opacity: 0.92;
}
.manaa-footer__brand-sep {
    color: var(--footer-accent);
    opacity: 0.6;
}
.manaa-footer__brand-parent {
    color: var(--footer-text);
    opacity: 0.65;
    letter-spacing: 0.16em;
}

.manaa-footer__copyright {
    font-family: var(--font-family-light);
    font-size: 0.72rem !important;
    color: var(--footer-muted);
    margin: 0 !important;
    letter-spacing: 0.02em;
}

.manaa-footer__bottom-right {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.manaa-footer__bottom-right a {
    font-family: var(--font-family-bold);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--footer-text);
    text-decoration: none;
    opacity: 0.78;
    transition: color 0.25s ease, opacity 0.25s ease;
}
.manaa-footer__bottom-right a:hover { color: var(--footer-accent); opacity: 1; }
.manaa-footer__bottom-right span {
    color: var(--footer-accent);
    opacity: 0.4;
    font-size: 0.6rem;
}

.manaa-footer__bottom .manaa-footer__credit {
    margin-top: 8px !important;
    text-align: center;
    font-family: var(--font-light, sans-serif);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    color: var(--footer-muted);
}
.manaa-footer__bottom .manaa-footer__credit a {
    color: var(--footer-text);
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}
.manaa-footer__bottom .manaa-footer__credit a:hover { opacity: 1; }

/* Mobile compact layout */
@media (max-width: 767.98px) {
    .manaa-footer__wordmark { font-size: clamp(3rem, 16vw, 5.5rem); margin: 20px 0 36px; }
    .manaa-footer__mark img { width: 60px; }
    .manaa-footer__cols { grid-template-columns: 1fr; gap: 38px; max-width: 320px; }
    .manaa-footer__bottom-grid { flex-direction: column; align-items: center; text-align: center; }
    .manaa-footer__bottom-right { justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════
   FOOTER ANIMATIONS — adapted to new Capston-style structure
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) and (min-height: 721px) {
    /* layered context already set on .manaa-footer above */

    /* — 1. BRAND DOORS pinstripe — top edge — */
    .manaa-footer__doors {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        height: 4px;
        z-index: 5;
    }
    .manaa-footer__doors span {
        flex: 1;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .manaa-footer.is-revealing .manaa-footer__doors span { transform: scaleX(1); }
    .manaa-footer.is-revealing .manaa-footer__doors span:nth-child(1) { transition-delay: 0.05s; }
    .manaa-footer.is-revealing .manaa-footer__doors span:nth-child(2) { transition-delay: 0.10s; }
    .manaa-footer.is-revealing .manaa-footer__doors span:nth-child(3) { transition-delay: 0.15s; }
    .manaa-footer.is-revealing .manaa-footer__doors span:nth-child(4) { transition-delay: 0.20s; }
    .manaa-footer.is-revealing .manaa-footer__doors span:nth-child(5) { transition-delay: 0.25s; }
    .manaa-footer.is-revealing .manaa-footer__doors span:nth-child(6) { transition-delay: 0.30s; }
    .manaa-footer.is-revealing .manaa-footer__doors span:nth-child(7) { transition-delay: 0.35s; }
    .manaa-footer.is-revealing .manaa-footer__doors span:nth-child(8) { transition-delay: 0.40s; }

    /* — 2. CURTAIN — subtle inner top shadow — */
    .manaa-footer__curtain {
        position: absolute;
        top: 4px;
        left: 0;
        right: 0;
        height: 90px;
        background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.28),
            rgba(0, 0, 0, 0.08) 60%,
            transparent);
        pointer-events: none;
        z-index: 3;
        opacity: 0;
        transition: opacity 0.9s ease 0.1s;
    }
    .manaa-footer.is-revealing .manaa-footer__curtain { opacity: 1; }

    /* — Logical layering for content above pseudo layers — */
    .manaa-footer__main > .container,
    .manaa-footer__bottom > .container {
        position: relative;
        z-index: 4;
    }

    /* — 3. MARK + WORDMARK — fade & rise on reveal — */
    .manaa-footer__mark,
    .manaa-footer__wordmark {
        opacity: 0;
        transform: translateY(28px);
        transition:
            opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .manaa-footer.is-revealing .manaa-footer__mark {
        opacity: 0.92;
        transform: translateY(0);
        transition-delay: 0.12s;
    }
    .manaa-footer.is-revealing .manaa-footer__wordmark {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.22s;
    }

    /* — 4. THREE COLUMNS — stagger reveal — */
    .manaa-footer__col {
        opacity: 0;
        transform: translateY(28px);
        transition:
            opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .manaa-footer.is-revealing .manaa-footer__col {
        opacity: 1;
        transform: translateY(0);
    }
    .manaa-footer.is-revealing .manaa-footer__col:nth-child(1) { transition-delay: 0.36s; }
    .manaa-footer.is-revealing .manaa-footer__col:nth-child(2) { transition-delay: 0.46s; }
    .manaa-footer.is-revealing .manaa-footer__col:nth-child(3) { transition-delay: 0.56s; }

    /* — Bottom bar — fade-up last — */
    .manaa-footer__bottom {
        opacity: 0;
        transform: translateY(18px);
        transition:
            opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.7s,
            transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.7s;
    }
    .manaa-footer.is-revealing .manaa-footer__bottom {
        opacity: 1;
        transform: translateY(0);
    }

    /* — Social icons — pop-in — */
    .manaa-footer__social a {
        opacity: 0;
        transform: scale(0.82);
        transition:
            opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .manaa-footer.is-revealing .manaa-footer__social a { opacity: 1; transform: scale(1); }
    .manaa-footer.is-revealing .manaa-footer__social a:nth-child(1) { transition-delay: 0.60s; }
    .manaa-footer.is-revealing .manaa-footer__social a:nth-child(2) { transition-delay: 0.70s; }
    .manaa-footer.is-revealing .manaa-footer__social a:nth-child(3) { transition-delay: 0.80s; }
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
    .manaa-footer__doors span,
    .manaa-footer__curtain,
    .manaa-footer__mark,
    .manaa-footer__wordmark,
    .manaa-footer__col,
    .manaa-footer__bottom,
    .manaa-footer__social a {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .manaa-footer__doors span { transform: scaleX(1) !important; }
}

/* ════════════════════════════════════════════════════════════════
   FOOTER BRANDMARK — Construction reveal on footer scroll
   Same slice + signature trick as the preloader, but triggered by
   the IntersectionObserver `is-revealing` class instead of page load.
   Replaces the plain text wordmark with the colored 4-door logo.
   ════════════════════════════════════════════════════════════════ */
.manaa-footer__brandmark {
    position: relative;
    display: block;
    width: clamp(240px, 28vw, 400px);
    aspect-ratio: 600 / 520;
    margin: 0 auto 40px;
}

/* Hide legacy text wordmark in case it lingers */
.manaa-footer__wordmark { display: none; }

.manaa-footer__brandmark img {
    width: 100%;
    height: auto;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

/* Four colored doors — top half */
.manaa-footer__brandmark-slice-1 {
    clip-path: inset(0 75% 50% 0);
    transform-origin: 12.5% 50%;
    transform: scaleY(0);
    opacity: 0;
}
.manaa-footer__brandmark-slice-2 {
    clip-path: inset(0 50% 50% 25%);
    transform-origin: 37.5% 50%;
    transform: scaleY(0);
    opacity: 0;
}
.manaa-footer__brandmark-slice-3 {
    clip-path: inset(0 25% 50% 50%);
    transform-origin: 62.5% 50%;
    transform: scaleY(0);
    opacity: 0;
}
.manaa-footer__brandmark-slice-4 {
    clip-path: inset(0 0 50% 75%);
    transform-origin: 87.5% 50%;
    transform: scaleY(0);
    opacity: 0;
}

/* Script signature — bottom half. Filter inverts the black script
   to a luminous cream so it pops against the dark footer. */
.manaa-footer__brandmark-wordmark {
    clip-path: polygon(0% 50%, 0% 50%, 0% 100%, 0% 100%);
    filter: brightness(0) invert(1) sepia(0.18) saturate(0.4);
}

/* Golden ground line */
/* — Trigger animations only when footer reveals — */
.manaa-footer.is-revealing .manaa-footer__brandmark-slice-1 {
    animation: brandmarkRise 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.20s forwards,
               brandmarkBreathe 4s ease-in-out 2.5s infinite;
}
.manaa-footer.is-revealing .manaa-footer__brandmark-slice-2 {
    animation: brandmarkRise 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.32s forwards,
               brandmarkBreathe 4s ease-in-out 2.5s infinite;
}
.manaa-footer.is-revealing .manaa-footer__brandmark-slice-3 {
    animation: brandmarkRise 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.44s forwards,
               brandmarkBreathe 4s ease-in-out 2.5s infinite;
}
.manaa-footer.is-revealing .manaa-footer__brandmark-slice-4 {
    animation: brandmarkRise 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.56s forwards,
               brandmarkBreathe 4s ease-in-out 2.5s infinite;
}
.manaa-footer.is-revealing .manaa-footer__brandmark-wordmark {
    animation: brandmarkSignature 1.05s cubic-bezier(0.65, 0, 0.35, 1) 0.95s forwards,
               brandmarkBreatheSoft 4s ease-in-out 2.7s infinite;
}

@keyframes brandmarkRise {
    0%   { transform: scaleY(0); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: scaleY(1); opacity: 1; }
}
@keyframes brandmarkSignature {
    0%   { clip-path: polygon(0% 50%, 0% 50%, 0% 100%, 0% 100%); }
    100% { clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%); }
}
@keyframes brandmarkBreathe {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(1.012); }
}
/* Wordmark uses invert filter for color → transform-only breath
   keeps the inverted color intact during the loop. */
@keyframes brandmarkBreatheSoft {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.006); }
}

/* Respect reduced motion in footer too */
@media (prefers-reduced-motion: reduce) {
    .manaa-footer__brandmark-slice-1,
    .manaa-footer__brandmark-slice-2,
    .manaa-footer__brandmark-slice-3,
    .manaa-footer__brandmark-slice-4 {
        transform: scaleY(1) !important;
        opacity: 1 !important;
        animation: none !important;
        clip-path: inset(0 0 50% 0);
    }
    .manaa-footer__brandmark-wordmark {
        clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
        animation: none !important;
    }
}

/* Mobile: smaller brandmark, normal flow */
@media (max-width: 767.98px) {
    .manaa-footer__brandmark { width: clamp(180px, 60vw, 280px); margin-bottom: 36px; }
}