/* ==========================================================================
   GÜNEŞ PARTNER GAYRİMENKUL
   Luxury Immersive Stylesheet — v3.0
   No boxes. Full sections. Image-dominant. Editorial.
   ========================================================================== */


/* ==========================================================================
   §0 - BRAND HEADER (Reference Design — Dark Card, Avatar, Bold Type)
   ========================================================================== */

/* ── Outer wrapper ── */
.bh-outer {
    background: var(--dark-void);
    padding: 24px 0 0;
}

/* ── The card itself ── */
.bh-card {
    position: relative;
    background: #0b1522;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    overflow: hidden;
    padding: 36px 44px 0;
}

/* ── Ambient glows ── */
.bh-glow-left {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13, 148, 136, 0.30) 0%, transparent 68%);
    top: -80px;
    left: -60px;
    pointer-events: none;
    z-index: 0;
}

.bh-glow-right {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13, 148, 136, 0.10) 0%, transparent 70%);
    bottom: 0;
    right: 80px;
    pointer-events: none;
    z-index: 0;
}

/* ── Dot grid texture ── */
.bh-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

/* ── Top Row ── */
.bh-top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 36px;
}

/* Badge */
.bh-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.3px;
    backdrop-filter: blur(8px);
}

.bh-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--teal-400);
    box-shadow: 0 0 8px rgba(13, 148, 136, 0.8);
    flex-shrink: 0;
    animation: bh-pulse 2s ease-in-out infinite;
}

@keyframes bh-pulse {

    0%,
    100% {
        box-shadow: 0 0 6px rgba(13, 148, 136, 0.7);
    }

    50% {
        box-shadow: 0 0 14px rgba(13, 148, 136, 1), 0 0 24px rgba(13, 148, 136, 0.4);
    }
}

/* Social buttons */
.bh-socials {
    display: flex;
    gap: 8px;
}

.bh-social-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
    transition: all 0.25s ease;
    text-decoration: none;
}

.bh-social-btn:hover {
    background: var(--teal-600);
    border-color: var(--teal-600);
    color: #fff;
    transform: translateY(-2px);
}

/* ── Main Row ── */
.bh-main {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 48px;
    margin-bottom: 48px;
}

/* ── Avatar ── */
.bh-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 172px;
    height: 172px;
}

/* Spinning ring */
.bh-avatar-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            rgba(13, 148, 136, 0.8) 0%,
            rgba(13, 148, 136, 0.2) 35%,
            transparent 50%,
            rgba(13, 148, 136, 0.15) 65%,
            rgba(13, 148, 136, 0.7) 100%);
    animation: bh-spin 6s linear infinite;
    z-index: 0;
}

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

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

/* Inner ring mask */
.bh-avatar-ring::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #0b1522;
}

/* Avatar circle */
.bh-avatar {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, #0e2235 0%, #0a1825 40%, rgba(13, 148, 136, 0.25) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    overflow: hidden;
    box-shadow:
        0 0 0 2px rgba(13, 148, 136, 0.3),
        0 0 40px rgba(13, 148, 136, 0.25),
        inset 0 0 30px rgba(13, 148, 136, 0.1);
}

.bh-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.bh-avatar-letter {
    font-family: var(--font-heading);
    font-size: 5.5rem;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 2px rgba(13, 148, 136, 0.9);
    text-stroke: 2px rgba(13, 148, 136, 0.9);
    line-height: 1;
    letter-spacing: -4px;
    filter: drop-shadow(0 0 16px rgba(13, 148, 136, 0.6));
    user-select: none;
}

/* Orbiting dot */
.bh-avatar-orbit {
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    animation: bh-orbit 8s linear infinite;
    z-index: 2;
}

.bh-avatar-orbit-dot {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--teal-400);
    box-shadow: 0 0 12px rgba(13, 148, 136, 0.9), 0 0 24px rgba(13, 148, 136, 0.4);
}

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

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

/* ── Text Block ── */
.bh-text {
    flex: 1;
}

.bh-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 12px;
}

.bh-title {
    font-family: var(--font-heading);
    font-size: 4.2rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px;
    margin-bottom: 28px;
}

.bh-title-accent {
    color: var(--teal-400);
}

.bh-title-white {
    color: #fff;
}

/* ── Category Chips ── */
.bh-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bh-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    letter-spacing: 0.2px;
    transition: all 0.22s ease;
    backdrop-filter: blur(6px);
}

.bh-chip i {
    font-size: 0.72rem;
    color: var(--teal-400);
}

.bh-chip:hover {
    background: rgba(13, 148, 136, 0.15);
    border-color: rgba(13, 148, 136, 0.45);
    color: #fff;
    transform: translateY(-2px);
}

.bh-chip--all {
    background: var(--teal-600);
    border-color: var(--teal-600);
    color: #fff;
}

.bh-chip--all i {
    color: #fff;
}

.bh-chip--all:hover {
    background: var(--teal-700);
    border-color: var(--teal-700);
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.4);
}

/* ── Search Bar (bottom of card) ── */
.bh-search {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 20px 0;
    margin: 0 -44px;
    padding-left: 44px;
    padding-right: 44px;
    backdrop-filter: blur(12px);
}

.bh-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bh-search-tabs {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    padding: 3px;
}

.bh-stab {
    padding: 8px 18px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    border-radius: calc(var(--radius-sm) - 2px);
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
    font-family: inherit;
}

.bh-stab.active {
    background: var(--teal-600);
    color: #fff;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.4);
}

.bh-stab:not(.active):hover {
    color: rgba(255, 255, 255, 0.75);
}

.bh-search-fields {
    display: flex;
    flex: 1;
    gap: 8px;
    align-items: center;
}

.bh-sfield {
    position: relative;
    flex: 1;
}

.bh-sfield i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--teal-400);
    font-size: 0.78rem;
    pointer-events: none;
    z-index: 1;
}

.bh-sfield input,
.bh-sfield select {
    width: 100%;
    padding: 11px 13px 11px 36px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.2s ease;
    font-family: inherit;
    appearance: none;
}

.bh-sfield input::placeholder {
    color: rgba(255, 255, 255, 0.28);
}

.bh-sfield input:focus,
.bh-sfield select:focus {
    border-color: var(--teal-500);
}

.bh-sfield select option {
    background: #0b1522;
    color: #fff;
}

.bh-search-btn {
    padding: 12px 28px;
    background: var(--teal-600);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.22s ease;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.35);
    font-family: inherit;
}

.bh-search-btn:hover {
    background: var(--teal-700);
    transform: translateY(-1px);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .bh-card {
        padding: 30px 32px 0;
    }

    .bh-title {
        font-size: 3.2rem;
    }

    .bh-avatar-wrap {
        width: 144px;
        height: 144px;
    }

    .bh-avatar-letter {
        font-size: 4.5rem;
    }

    .bh-search {
        padding: 18px 32px;
        margin: 0 -32px;
    }
}

@media (max-width: 768px) {
    .bh-outer {
        padding: 16px 0 0;
    }

    .bh-card {
        padding: 24px 20px 0;
        border-radius: 16px;
    }

    .bh-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }

    .bh-title {
        font-size: 2.5rem;
        letter-spacing: -1px;
    }

    .bh-avatar-wrap {
        width: 120px;
        height: 120px;
    }

    .bh-avatar-letter {
        font-size: 3.8rem;
    }

    .bh-search {
        padding: 16px 20px;
        margin: 0 -20px;
    }

    .bh-search-form {
        flex-wrap: wrap;
    }

    .bh-search-fields {
        flex-wrap: wrap;
    }

    .bh-sfield {
        flex: 1 1 calc(50% - 4px);
    }

    .bh-search-btn {
        width: 100%;
        justify-content: center;
    }
}

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

    .bh-sfield {
        flex: 1 1 100%;
    }

    .bh-chips {
        gap: 8px;
    }

    .bh-chip {
        padding: 7px 14px;
        font-size: 0.75rem;
    }
}


/* ==========================================================================
   §1 - DESIGN TOKENS
   ========================================================================== */

:root {
    /* ── Teal Scale ── */
    --teal-50: #F0FDFA;
    --teal-100: #CCFBF1;
    --teal-200: #99F6E4;
    --teal-300: #5EEAD4;
    --teal-400: #2DD4BF;
    --teal-500: #14B8A6;
    --teal-600: #0D9488;
    --teal-700: #0F766E;
    --teal-800: #115E59;
    --teal-900: #134E4A;

    /* ── Dark/Neutral Scale ── */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --gray-950: #030712;

    /* ── Luxury Dark ── */
    --dark-void: #050c14;
    --dark-deep: #08111e;
    --dark-navy: #0d1a2d;
    --dark-slate: #172234;
    --cream: #F5F0E8;
    --cream-dark: #EDE8DE;

    /* ── Semantic Colors ── */
    --text-primary: #111827;
    --text-secondary: #4B5563;
    --text-muted: #9CA3AF;
    --text-light: #D1D5DB;

    --bg-body: #FAFAFA;
    --bg-white: #FFFFFF;
    --bg-light: #F5F0E8;

    --border-color: #E5E7EB;
    --border-light: #F3F4F6;

    --green: #10B981;
    --green-dark: #059669;
    --red: #EF4444;
    --blue: #3B82F6;
    --orange: #F59E0B;

    /* ── Shadows ── */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --shadow-teal: 0 4px 14px rgba(13, 148, 136, 0.25);

    /* ── Radius ── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* ── Transitions ── */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --transition-fast: 150ms var(--ease);
    --transition: 280ms var(--ease);
    --transition-slow: 500ms var(--ease);

    /* ── Fonts ── */
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── Backward-Compat Aliases ── */
    --gold-50: var(--teal-50);
    --gold-100: var(--teal-100);
    --gold-200: var(--teal-100);
    --gold-300: var(--teal-300);
    --gold-400: var(--teal-400);
    --gold-500: var(--teal-500);
    --gold-600: var(--teal-600);
    --gold-700: var(--teal-700);
    --navy-50: var(--gray-50);
    --navy-100: var(--gray-100);
    --navy-200: var(--gray-200);
    --navy-300: var(--gray-400);
    --navy-400: var(--gray-600);
    --navy-500: var(--gray-800);
    --navy-600: var(--gray-900);
    --navy-700: var(--gray-950);
    --gradient-gold: linear-gradient(135deg, var(--teal-500) 0%, var(--teal-400) 100%);
    --gradient-navy: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 100%);
    --gradient-premium: linear-gradient(135deg, var(--dark-void) 0%, var(--dark-navy) 60%, rgba(13, 148, 136, 0.25) 100%);
}


/* ==========================================================================
   §2 - RESET & BASE
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.18;
    color: var(--text-primary);
    letter-spacing: 0.2px;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.4rem;
}

h3 {
    font-size: 1.7rem;
}

h4 {
    font-size: 1.3rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition);
}

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

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

input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

ul,
ol {
    list-style: none;
}

::selection {
    background: var(--teal-100);
    color: var(--teal-900);
}


/* ==========================================================================
   §3 - CONTAINER & LAYOUT
   ========================================================================== */

.container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 32px;
    width: 100%;
}

.section {
    padding: 100px 0;
}

.d-flex {
    display: flex;
}

.justify-between {
    justify-content: space-between;
}

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

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

.gap-4 {
    gap: 4px;
}

.gap-8 {
    gap: 8px;
}

.gap-12 {
    gap: 12px;
}

.gap-16 {
    gap: 16px;
}

.mt-24 {
    margin-top: 24px;
}

.mb-24 {
    margin-bottom: 24px;
}


/* ==========================================================================
   §4 - BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 32px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    border-radius: var(--radius-md);
    border: 1.5px solid transparent;
    line-height: 1.4;
    white-space: nowrap;
    transition: all var(--transition);
    cursor: pointer;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--teal-600);
    color: #fff;
    border-color: var(--teal-600);
}

.btn-primary:hover {
    background: var(--teal-700);
    border-color: var(--teal-700);
    box-shadow: 0 8px 24px rgba(13, 148, 136, 0.35);
}

.btn-secondary {
    background: var(--gray-800);
    color: #fff;
    border-color: var(--gray-800);
}

.btn-secondary:hover {
    background: var(--gray-900);
    border-color: var(--gray-900);
}

.btn-outline {
    background: transparent;
    color: var(--teal-700);
    border-color: var(--teal-600);
}

.btn-outline:hover {
    background: var(--teal-600);
    color: #fff;
}

.btn-outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.7);
}

.btn-success {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}

.btn-success:hover {
    background: var(--green-dark);
}

.btn-danger {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

.btn-danger:hover {
    background: #DC2626;
}

.btn-sm {
    padding: 8px 18px;
    font-size: 0.8rem;
}

.btn-lg {
    padding: 17px 42px;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.btn-block {
    width: 100%;
}

.btn-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.btn-ghost {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.32);
    color: #fff;
    padding: 13px 28px;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition);
    letter-spacing: 0.3px;
}

.btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.08);
}


/* ==========================================================================
   §5 - FORMS
   ========================================================================== */

.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--text-primary);
    background: var(--bg-white);
    transition: all var(--transition);
    outline: none;
}

.form-control:focus {
    border-color: var(--teal-500);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
}

.form-control::placeholder {
    color: var(--text-muted);
}

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

select.form-control {
    cursor: pointer;
}

.form-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 6px;
}

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

/* UI-04 FIX: form-row 2-sütun — mobil (320-540px) tek sütuna dön */
@media (max-width: 540px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   §6 - CARDS & BADGES
   ========================================================================== */

.card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: box-shadow var(--transition);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
    font-weight: 600;
}

.card-body {
    padding: 24px;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: var(--gray-100);
    color: var(--text-secondary);
}

.badge-primary {
    background: var(--teal-50);
    color: var(--teal-800);
}

.badge-success {
    background: #D1FAE5;
    color: #065F46;
}

.badge-danger {
    background: #FEE2E2;
    color: #991B1B;
}

.badge-warning {
    background: #FEF3C7;
    color: #92400E;
}

.badge-secondary {
    background: var(--gray-100);
    color: var(--gray-600);
}


/* ==========================================================================
   §7 - TOP BAR
   ========================================================================== */

.top-bar {
    background: #F1F5F9;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.78rem;
    height: 40px;
    display: flex;
    align-items: center;
    z-index: 1200;
    position: sticky;
    top: 0;
    letter-spacing: 0.3px;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-left,
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.top-bar-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.top-bar-item:hover {
    color: var(--teal-600);
}

.top-bar-item i {
    font-size: 0.72rem;
    color: var(--teal-500);
}

.top-bar-social {
    display: flex;
    gap: 12px;
}

.top-bar-social a {
    color: var(--text-muted);
    font-size: 0.8rem;
    transition: color var(--transition-fast);
}

.top-bar-social a:hover {
    color: var(--teal-600);
}


/* ==========================================================================
   §8 - MAIN HEADER / NAV
   ========================================================================== */

/* ── Sticky container ── */
.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    overflow: visible;
    transition: box-shadow var(--transition);
}

.main-header.scrolled {
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.10);
}

/* ── bg-img: hidden — hero photo shows behind transparent header ── */
.mh-bg-img {
    display: none;
}

.mh-bg-overlay {
    display: none;
}

/* ── Brand section — transparent, floats over hero photo ── */
.mh-brand {
    position: relative;
    z-index: 2;
    max-height: clamp(100px, 15vh, 160px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(4, 12, 22, 0.72) 0%, rgba(4, 12, 22, 0.52) 100%);
    will-change: max-height, opacity;
    transition: max-height 0.40s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.30s ease;
}

.main-header.scrolled .mh-brand {
    max-height: 0;
    opacity: 0;
}

.mh-brand-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* ── Circular avatar / logo ── */
.mh-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.mh-avatar-glow {
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13, 148, 136, 0.26) 0%, transparent 70%);
    pointer-events: none;
}

.mh-avatar {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(13, 148, 136, 0.16) 0%, rgba(13, 148, 136, 0.05) 100%);
    border: 1.5px solid rgba(13, 148, 136, 0.40);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    overflow: hidden;
}

.mh-avatar span {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 600;
    color: rgba(13, 148, 136, 0.82);
    line-height: 1;
}

.mh-avatar-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    position: relative;
    z-index: 1;
    border: 1.5px solid rgba(13, 148, 136, 0.40);
}

/* ── Brand text + chips ── */
.mh-brand-content {
    flex: 1;
    min-width: 0;
}

.mh-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.52);
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.mh-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(13, 148, 136, 0.88);
    flex-shrink: 0;
    animation: mh-pulse 2.8s ease-in-out infinite;
}

@keyframes mh-pulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 8px rgba(13, 148, 136, 0.65);
    }
}

.mh-brand-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.94);
    line-height: 1.1;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.mh-brand-sub {
    font-size: 0.68rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.mh-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mh-chip {
    padding: 5px 16px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    transition: all 0.2s ease;
    letter-spacing: 0.2px;
}

.mh-chip:hover {
    background: rgba(13, 148, 136, 0.16);
    border-color: rgba(13, 148, 136, 0.36);
    color: rgba(255, 255, 255, 0.88);
}

/* ── Social icon column ── */
.mh-social-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    align-self: center;
}

.mh-social-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.78rem;
    transition: all 0.2s ease;
}

.mh-social-btn:hover {
    background: rgba(13, 148, 136, 0.16);
    border-color: rgba(13, 148, 136, 0.36);
    color: rgba(13, 148, 136, 0.88);
}

.mh-social-wa:hover {
    background: rgba(37, 211, 102, 0.10);
    border-color: rgba(37, 211, 102, 0.32);
    color: #25D366;
}

/* ── Navigation bar ── */
.mh-nav {
    position: relative;
    z-index: 10;
    height: 68px;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(4, 12, 22, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: background var(--transition), border-color var(--transition);
}

.main-header.scrolled .mh-nav {
    background: rgba(255, 255, 255, 0.97);
    border-top-color: transparent;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.mh-nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}

/* ── Logo ── */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.logo img {
    height: 38px;
    width: auto;
    object-fit: contain;
}

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

.logo-icon {
    font-size: 1.3rem;
    color: var(--teal-400);
    filter: drop-shadow(0 0 6px rgba(13, 148, 136, 0.35));
}

.logo-title {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1;
    letter-spacing: 0.3px;
    transition: color var(--transition);
}

.logo-subtitle {
    display: block;
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.52);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-top: 2px;
    transition: color var(--transition);
}

.main-header.scrolled .logo-title {
    color: var(--text-primary);
}

.main-header.scrolled .logo-subtitle {
    color: var(--text-muted);
}

/* ── Nav links ── */
.main-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-menu>li>a {
    display: block;
    padding: 10px 14px;
    font-size: 0.82rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.82);
    letter-spacing: 0.3px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.nav-menu>li>a:hover,
.nav-menu>li.active>a {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.nav-menu>li.active>a {
    color: var(--teal-200);
}

/* scrolled: nav is white → links go dark */
.main-header.scrolled .nav-menu>li>a {
    color: var(--text-secondary);
}

.main-header.scrolled .nav-menu>li>a:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.04);
}

.main-header.scrolled .nav-menu>li.active>a {
    color: var(--teal-600);
    background: rgba(13, 148, 136, 0.06);
}

/* ── Dropdown ── */
.has-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    padding: 8px;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-8px);
    transition: all var(--transition);
    z-index: 1100;
    /* UI-05 FIX: header(1000) + 100 — dropdown her zaman üstte */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

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

.dropdown-menu li a {
    display: block;
    padding: 9px 14px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.dropdown-menu li a:hover {
    color: var(--teal-700);
    background: rgba(13, 148, 136, 0.06);
}

/* ── Header Actions ── */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.header-action-btn {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.65);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    font-size: 0.85rem;
}

.header-action-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.main-header.scrolled .header-action-btn {
    color: var(--text-muted);
}

.main-header.scrolled .header-action-btn:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.05);
}

.favorites-count {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 15px;
    height: 15px;
    background: var(--teal-500);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}

.btn-header-cta {
    background: var(--teal-600);
    color: #fff;
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.2px;
    transition: all var(--transition);
}

.btn-header-cta:hover {
    background: var(--teal-700);
    transform: none;
}

/* ── Mobile Menu Button ── */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.mobile-menu-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.mobile-menu-btn span {
    display: block;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 2px;
    transition: all var(--transition);
}

.main-header.scrolled .mobile-menu-btn span {
    background: var(--text-secondary);
}

.main-header.scrolled .mobile-menu-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

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

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

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

/* ── Menu overlay (mobile backdrop) ── */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1490;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.28s ease, visibility 0s linear 0s;
}


/* ==========================================================================
   §9 - HERO SECTION
   ========================================================================== */

.hero-section {
    position: relative;
    height: 100svh;
    margin-top: -108px; /* Topbar(40px) + Navbar(68px) */
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: var(--dark-void);
    z-index: 1;
    isolation: isolate;
}

.hero-section>.swiper,
.hero-section>.hero-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-slide {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 108px 0 120px;
    min-height: 100svh;
}

/* Default hero - cinematic dark */
.hero-default {
    position: relative;
    background:
        radial-gradient(ellipse 60% 50% at 5% 15%, rgba(13, 148, 136, 0.30) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 95% 80%, rgba(13, 148, 136, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 50% 110%, rgba(7, 94, 121, 0.22) 0%, transparent 55%),
        linear-gradient(168deg, #040c18 0%, #0a1a2c 40%, #0d2040 100%);
}

.hero-default::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1.5px, transparent 1.5px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 20%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.hero-default::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(13, 148, 136, 0.10);
    box-shadow:
        0 0 0 120px rgba(13, 148, 136, 0.035),
        0 0 0 240px rgba(13, 148, 136, 0.015),
        0 0 140px 50px rgba(13, 148, 136, 0.05);
    pointer-events: none;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(4, 12, 22, 0.55) 0%,
            rgba(0, 0, 0, 0.10) 40%,
            rgba(0, 0, 0, 0.32) 70%,
            rgba(0, 0, 0, 0.72) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 860px;
    padding: 0 24px;
    margin: 0 auto;
    margin-top: calc(clamp(180px, calc(33vh - 68px), 300px) + 68px);
    /* Üst menü boyu kadar boşluk, örtüşme engellendi */
}

.hero-content .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 20px;
    border: 1px solid rgba(13, 148, 136, 0.38);
    border-radius: var(--radius-full);
    background: rgba(13, 148, 136, 0.07);
    backdrop-filter: blur(10px);
    color: var(--teal-300);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.hero-content .hero-eyebrow i {
    font-size: 0.6rem;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 5rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.08;
    margin-bottom: 22px;
    letter-spacing: 0.3px;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.hero-title em {
    font-style: italic;
    color: var(--teal-300);
}

.hero-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.9;
    margin-bottom: 44px;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
    letter-spacing: 0.2px;
}

.hero-cta {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-cta .btn-primary {
    background: var(--teal-600);
    border-color: var(--teal-600);
    box-shadow: 0 0 40px rgba(13, 148, 136, 0.40);
}

/* ── Hero Search ── */
.hero-search {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 100%;
    max-width: 920px;
    padding: 0 24px;
}

.hero-search .container {
    padding: 0;
    max-width: 100%;
}

.search-form {
    background: rgba(5, 12, 20, 0.75);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-xl);
    padding: 22px 28px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(13, 148, 136, 0.10);
}

.search-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    padding: 3px;
    width: fit-content;
}

.search-tab {
    padding: 7px 20px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    border-radius: calc(var(--radius-sm) - 2px);
    transition: all var(--transition-fast);
    letter-spacing: 0.4px;
}

.search-tab.active {
    background: var(--teal-600);
    color: #fff;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.4);
}

.search-tab:not(.active):hover {
    color: rgba(255, 255, 255, 0.75);
}

.search-fields {
    display: flex;
    gap: 10px;
    align-items: center;
}

.search-field {
    position: relative;
    flex: 1;
}

.search-field i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--teal-400);
    font-size: 0.8rem;
    z-index: 1;
    pointer-events: none;
}

.search-input,
.search-select {
    width: 100%;
    padding: 12px 14px 12px 38px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: #fff;
    font-size: 0.85rem;
    outline: none;
    transition: border-color var(--transition-fast);
    appearance: none;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.search-input:focus,
.search-select:focus {
    border-color: var(--teal-500);
}

.search-select option {
    background: var(--dark-navy);
    color: #fff;
}

.search-btn {
    padding: 13px 28px;
    background: var(--teal-600);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all var(--transition);
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.35);
}

.search-btn:hover {
    background: var(--teal-700);
    transform: translateY(-1px);
}


/* ==========================================================================
   §10 - SECTION HEADERS (Editorial Style)
   ========================================================================== */

.section-header {
    margin-bottom: 60px;
}

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

.section-header-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.section-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--teal-600);
    margin-bottom: 14px;
    position: relative;
    padding-left: 24px;
}

.section-tag::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 1.5px;
    background: var(--teal-500);
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 400;
    color: var(--gray-900);
    line-height: 1.1;
    letter-spacing: 0.1px;
}

.section-subtitle {
    font-size: 0.97rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-top: 14px;
    max-width: 520px;
    font-weight: 300;
}

.section-header-action {
    flex-shrink: 0;
}

/* White-on-dark variants */
.section-header--light .section-tag {
    color: var(--teal-300);
}

.section-header--light .section-tag::before {
    background: var(--teal-300);
}

.section-header--light .section-title {
    color: rgba(255, 255, 255, 0.92);
}

.section-header--light .section-subtitle {
    color: rgba(255, 255, 255, 0.58);
}


/* ==========================================================================
   §11 - PROPERTY TYPE STRIP (Compact horizontal band)
   ========================================================================== */

.types-ticker {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 800;
    overflow: hidden;
    background:
        radial-gradient(ellipse 50% 300% at 5% 50%, rgba(13, 148, 136, 0.30) 0%, transparent 50%),
        radial-gradient(ellipse 40% 300% at 95% 50%, rgba(14, 116, 144, 0.20) 0%, transparent 50%),
        linear-gradient(90deg, #06202f 0%, #09413d 35%, #0b3448 65%, #06202f 100%);
    border-top: 1px solid rgba(13, 148, 136, 0.22);
}

.types-ticker-track {
    display: flex;
    width: max-content;
    animation: ticker-rtl 38s linear infinite;
}

.types-ticker-track:hover {
    animation-play-state: paused;
}

@keyframes ticker-rtl {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 32px;
    white-space: nowrap;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.68);
    font-family: var(--font-body);
    font-size: 0.83rem;
    font-weight: 400;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.ticker-item:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.ticker-item:hover {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.05);
}

.ticker-item i {
    color: var(--teal-300);
    font-size: 0.88rem;
    flex-shrink: 0;
}

.ticker-count {
    color: rgba(45, 212, 191, 0.55);
    font-size: 0.68rem;
    margin-left: 2px;
}


/* ==========================================================================
   §12 - PROPERTY CARD (PC) — Cinematic, No Border
   ========================================================================== */

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

.properties-slider {
    position: relative;
}

/* The card itself */
.pc {
    background: var(--bg-white);
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    transition: all 0.4s var(--ease);
    position: relative;
    display: block;
    box-shadow: var(--shadow-sm);
}

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

/* ── Image — takes 68% of card ── */
.pc-img-wrap {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--dark-slate);
}

.pc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease);
    display: block;
}

.pc:hover .pc-img {
    transform: scale(1.08);
}

.pc-img-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.15);
    font-size: 2.5rem;
    background: linear-gradient(135deg, var(--dark-navy), var(--dark-slate));
}

/* ── Badges ── */
.pc-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 5px 14px;
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    background: rgba(5, 12, 20, 0.85);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-full);
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.pc-star {
    position: absolute;
    top: 16px;
    right: 58px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, 0.95);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    z-index: 3;
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.45);
}

/* ── Favorite ── */
.pc-fav {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 12, 20, 0.75);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition);
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.pc-fav:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
    transform: scale(1.1);
}

.pc-fav.active {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

/* ── Hover Overlay ── */
.pc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.15) 50%, transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20px;
    opacity: 0;
    transition: opacity 0.35s var(--ease);
    z-index: 2;
}

.pc:hover .pc-overlay {
    opacity: 1;
}

.pc-overlay-btn {
    padding: 10px 24px;
    background: var(--teal-600);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 7px;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.5);
}

/* ── Card Body ── */
.pc-body {
    padding: 20px 22px 24px;
    background: var(--bg-white);
}

/* Price */
.pc-price {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--teal-700);
    margin-bottom: 4px;
    line-height: 1.2;
}

.pc-price-label {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: block;
}

.pc-price-ask {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--gray-400);
    font-style: italic;
}

/* Title */
.pc-title {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--gray-800);
    margin: 8px 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.pc-title a {
    color: inherit;
}

.pc-title a:hover {
    color: var(--teal-700);
}

/* Feature chips */
.pc-features {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-light);
}

.pc-feat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.74rem;
    color: var(--gray-600);
    background: var(--gray-50);
    padding: 4px 10px;
    border-radius: var(--radius-full);
}

.pc-feat svg {
    color: var(--teal-500);
    flex-shrink: 0;
    opacity: 0.85;
}

.pc-feat i {
    color: var(--teal-500);
    font-size: 0.68rem;
}

/* Location */
.pc-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    color: var(--gray-400);
}

.pc-location i {
    color: var(--teal-500);
    font-size: 0.68rem;
}

/* Accent bar */
.pc-accent {
    height: 2px;
    background: linear-gradient(90deg, var(--teal-500) 0%, transparent 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}

.pc:hover .pc-accent {
    transform: scaleX(1);
}


/* ==========================================================================
   §13 - STATS SECTION (Immersive Dark)
   ========================================================================== */

.section-stats {
    position: relative;
    padding: 100px 0;
    background:
        linear-gradient(180deg, rgba(5, 12, 20, 0) 0%, rgba(5, 12, 20, 0.8) 100%),
        var(--dark-void);
    overflow: hidden;
}

/* Ambient glow */
.section-stats::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13, 148, 136, 0.12) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.stats-counter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.05);
}

.stats-counter-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 52px 24px;
    background: var(--dark-void);
    text-align: center;
    transition: background var(--transition);
    position: relative;
}

.stats-counter-item:hover {
    background: var(--dark-deep);
}

.stats-counter-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(13, 148, 136, 0.12);
    border: 1px solid rgba(13, 148, 136, 0.2);
    font-size: 1.2rem;
    color: var(--teal-400);
    margin-bottom: 20px;
}

.stats-counter-value {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.94);
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.stats-counter-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
}


/* ==========================================================================
   §14 - SERVICES SECTION (Open, No Boxes)
   ========================================================================== */

.section-services {
    padding: 100px 0;
    background: var(--cream);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 64px;
}

/* Each service = no box, just open layout */
.service-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

/* No borders, just a thin top accent line */
.service-card::before {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--teal-500);
    margin-bottom: 24px;
    transition: width var(--transition);
}

.service-card:hover::before {
    width: 70px;
}

.service-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--teal-600);
    margin-bottom: 18px;
}

.service-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--gray-900);
    margin-bottom: 12px;
    line-height: 1.25;
}

.service-description {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.8;
    font-weight: 300;
}


/* ==========================================================================
   §15 - TESTIMONIALS (Dark, Immersive, No Cards)
   ========================================================================== */

.section-testimonials {
    position: relative;
    padding: 100px 0;
    background: var(--dark-deep);
    overflow: hidden;
}

/* Subtle texture */
.section-testimonials::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

/* Open, no-box testimonial */
.testimonial-card {
    padding: 48px 40px;
    position: relative;
    background: transparent;
}

/* Large quote mark */
.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: 16px;
    left: 28px;
    font-family: var(--font-heading);
    font-size: 7rem;
    line-height: 1;
    color: rgba(13, 148, 136, 0.15);
    pointer-events: none;
}

.testimonial-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.testimonial-stars i {
    color: var(--teal-400);
    font-size: 0.8rem;
}

.testimonial-text {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 28px;
    font-style: italic;
    font-weight: 300;
    position: relative;
    z-index: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(13, 148, 136, 0.4);
}

.testimonial-avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(13, 148, 136, 0.18);
    border: 2px solid rgba(13, 148, 136, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--teal-300);
}

.testimonial-author strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.testimonial-author span {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.52);
}

/* Swiper pagination on dark background */
.section-testimonials .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
}

.section-testimonials .swiper-pagination-bullet-active {
    background: var(--teal-500);
}


/* ==========================================================================
   §16 - CTA SECTION (Full-Width Cinematic)
   ========================================================================== */

.section-cta {
    position: relative;
    padding: 120px 0;
    background:
        radial-gradient(ellipse 70% 60% at 20% 50%, rgba(13, 148, 136, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 50% 70% at 85% 50%, rgba(13, 148, 136, 0.12) 0%, transparent 55%),
        var(--dark-void);
    overflow: hidden;
    text-align: center;
}

.section-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1.5px, transparent 1.5px);
    background-size: 36px 36px;
    pointer-events: none;
}

.cta-content {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
}

.cta-content h2 {
    font-family: var(--font-heading);
    font-size: 3.2rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 18px;
    line-height: 1.12;
    letter-spacing: 0.2px;
}

.cta-content p {
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 40px;
    line-height: 1.85;
    font-size: 1rem;
    font-weight: 300;
}

.cta-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}


/* ==========================================================================
   §17 - BLOG PREVIEW (Editorial Magazine Style)
   ========================================================================== */

.section-blog {
    padding: 100px 0;
    background: var(--bg-body);
}

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

.blog-card {
    position: relative;
    overflow: hidden;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    display: block;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.blog-card-image {
    position: relative;
    display: block;
    aspect-ratio: 3/2;
    overflow: hidden;
    background: var(--gray-100);
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease);
    display: block;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.06);
}

.blog-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-200);
    font-size: 2.5rem;
    background: linear-gradient(135deg, var(--gray-50), var(--gray-100));
}

.blog-card-category {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 5px 14px;
    background: var(--dark-void);
    color: var(--teal-400);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    z-index: 2;
    backdrop-filter: blur(6px);
}

.blog-card-body {
    padding: 24px 26px 28px;
}

.blog-card-meta {
    display: flex;
    gap: 16px;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    align-items: center;
}

.blog-card-meta i {
    color: var(--teal-500);
    margin-right: 3px;
}

.blog-card-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--gray-900);
    line-height: 1.3;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-title a {
    color: inherit;
}

.blog-card-title a:hover {
    color: var(--teal-700);
}

.blog-card-excerpt {
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--teal-700);
    text-decoration: none;
    border: 1.5px solid var(--teal-200);
    border-radius: var(--radius-full);
    padding: 7px 16px;
    margin-top: 4px;
    transition: all 0.22s ease;
    align-self: flex-start;
}

.blog-card-link:hover {
    background: var(--teal-600);
    color: #fff;
    border-color: var(--teal-600);
    gap: 11px;
}

.blog-card-link i {
    font-size: 0.65rem;
    transition: transform 0.22s ease;
}

.blog-card-link:hover i {
    transform: translateX(3px);
}


/* ==========================================================================
   §18 - SCROLL TOP & WHATSAPP
   ========================================================================== */

.scroll-top {
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 44px;
    height: 44px;
    background: var(--teal-600);
    color: #fff;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
    z-index: 900;
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.4);
    cursor: pointer;
    border: none;
}

.scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-top:hover {
    background: var(--teal-700);
    transform: translateY(-2px);
}

.whatsapp-float {
    position: fixed;
    bottom: 28px;
    right: 24px;
    z-index: 900;
}

.whatsapp-float a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: #25D366;
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 1.4rem;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    transition: all var(--transition);
}

.whatsapp-float a:hover {
    transform: scale(1.1);
    background: #1DA851;
}


/* ==========================================================================
   §19 - FOOTER
   ========================================================================== */

.site-footer {
    background: var(--dark-void);
    color: rgba(255, 255, 255, 0.55);
}

.footer-main {
    padding: 80px 0 60px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 48px;
}

/* Logo column */
.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.footer-logo i {
    font-size: 1.5rem;
    color: var(--teal-400);
}

.footer-brand {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1;
    letter-spacing: 0.3px;
}

.footer-brand-sub {
    display: block;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.42);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-top: 3px;
}

.footer-description {
    font-size: 0.85rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.52);
    margin-bottom: 24px;
    font-weight: 300;
}

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

.certificate-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
}

.certificate-item i {
    color: var(--teal-400);
    font-size: 0.9rem;
}

.certificate-item small {
    display: block;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.38);
}

.certificate-item strong {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    font-weight: 400;
}

/* Link columns */
.footer-title {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 20px;
    font-family: var(--font-body);
}

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

.footer-links li a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.52);
    font-weight: 300;
    transition: color var(--transition-fast);
}

.footer-links li a:hover {
    color: var(--teal-400);
}

.footer-links li a i {
    font-size: 0.55rem;
    color: var(--teal-500);
}

/* Contact column */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.footer-contact li {
    display: flex;
    gap: 12px;
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.38);
    align-items: flex-start;
}

.footer-contact i {
    color: var(--teal-500);
    font-size: 0.85rem;
    margin-top: 2px;
    flex-shrink: 0;
    width: 14px;
}

.footer-contact a {
    color: rgba(255, 255, 255, 0.38);
    transition: color var(--transition-fast);
}

.footer-contact a:hover {
    color: var(--teal-400);
}

/* Social icons */
.footer-social {
    display: flex;
    gap: 10px;
}

.footer-social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    transition: all var(--transition-fast);
}

.footer-social a:hover {
    background: var(--teal-600);
    border-color: var(--teal-600);
    color: #fff;
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 24px 0 86px;
    /* 62px ticker + 24px breathing room */
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.footer-bottom p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.42);
    font-weight: 300;
}

.footer-bottom-links {
    display: flex;
    gap: 20px;
}

.footer-bottom-links a {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.42);
    font-weight: 300;
    transition: color var(--transition-fast);
}

.footer-bottom-links a:hover {
    color: var(--teal-400);
}


/* ==========================================================================
   §20 - BREADCRUMB
   ========================================================================== */

.breadcrumb-section {
    padding: 16px 0;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.breadcrumb a {
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.breadcrumb a:hover {
    color: var(--teal-600);
}

.breadcrumb-sep {
    color: var(--text-muted);
    font-size: 0.6rem;
    display: flex;
    align-items: center;
}

.breadcrumb-current {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}


/* ==========================================================================
   §21 - PAGE HERO (Inner pages)
   ========================================================================== */

.page-hero {
    background: var(--dark-deep);
    padding: 60px 0 50px;
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(13, 148, 136, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.page-hero-content {
    position: relative;
    z-index: 1;
}

.page-hero h1 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 8px;
}

.page-hero p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1rem;
}


/* ==========================================================================
   §22 - PROPERTIES LISTING PAGE
   ========================================================================== */

.properties-page-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
}

/* ── Filter Sidebar ── */
.filter-sidebar {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Form element flex wrap fix for scrolling */
#filterForm {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    margin: 0;
}

.filter-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-light);
}

.filter-sidebar-header h3 {
    font-size: 0.9rem;
    font-weight: 700;
    font-family: var(--font-body);
}

.filter-close-btn {
    display: none;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    border: none;
}

.filter-close-btn:hover {
    background: var(--gray-200);
}

.filter-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 20px 20px;
    /* İçerik için boşluk */
    scrollbar-width: thin;
    scrollbar-color: var(--teal-200) transparent;
}

.filter-sidebar-body::-webkit-scrollbar {
    width: 4px;
}

.filter-sidebar-body::-webkit-scrollbar-track {
    background: transparent;
}

.filter-sidebar-body::-webkit-scrollbar-thumb {
    background: var(--teal-200);
    border-radius: 2px;
}

.filter-group {
    margin-bottom: 20px;
}

.filter-group:last-child {
    margin-bottom: 0;
}

.filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
}

.filter-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    background: var(--bg-white);
    transition: border-color var(--transition-fast);
    outline: none;
}

.filter-input:focus {
    border-color: var(--teal-500);
}

.filter-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    background: var(--bg-white);
    cursor: pointer;
    outline: none;
}

.filter-select:focus {
    border-color: var(--teal-500);
}

.filter-tabs {
    display: flex;
    gap: 6px;
}

.filter-tab {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
    font-family: inherit;
}

.filter-tab:hover {
    background: var(--gray-50);
}

.filter-tab.active {
    background: var(--teal-600);
    color: #fff;
    border-color: var(--teal-600);
}

.filter-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.filter-row .filter-input {
    flex: 1;
}

.filter-separator {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.85rem;
}

.filter-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
}

/* ── Properties Toolbar ── */
.properties-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}

.properties-toolbar-left,
.properties-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-toggle-btn {
    display: none;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    font-size: 0.82rem;
    font-weight: 500;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
}

.filter-toggle-btn:hover {
    border-color: var(--teal-500);
    color: var(--teal-600);
}

.sort-select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    background: var(--bg-white);
    cursor: pointer;
    outline: none;
    font-family: inherit;
}

.view-toggle {
    display: flex;
    gap: 4px;
}

.view-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all var(--transition-fast);
    font-family: inherit;
}

.view-btn.active,
.view-btn:hover {
    border-color: var(--teal-500);
    color: var(--teal-600);
    background: var(--teal-50);
}

.results-count {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.results-count strong {
    color: var(--text-primary);
}

/* Active Filters */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    align-items: center;
}

.active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--teal-50);
    color: var(--teal-700);
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 500;
}

.active-filter-remove {
    font-size: 14px;
    line-height: 1;
    color: var(--teal-600);
    text-decoration: none;
    font-weight: 700;
    transition: color var(--transition-fast);
}

.active-filter-remove:hover {
    color: var(--red);
}

.active-filter-clear {
    font-size: 0.78rem;
    color: var(--red);
    text-decoration: underline;
}

/* ── List View ── */
.properties-grid.list-view {
    grid-template-columns: 1fr;
}

.list-view .pc {
    display: grid;
    grid-template-columns: 300px 1fr;
}

.list-view .pc-img-wrap {
    aspect-ratio: 4/3;
}

/* ── No Results ── */
.no-results {
    text-align: center;
    padding: 72px 24px;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.no-results-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 28px;
    color: var(--text-muted);
}

.no-results h3 {
    font-size: 1.25rem;
    margin-bottom: 8px;
    font-family: var(--font-body);
}

.no-results p {
    color: var(--text-secondary);
    margin-bottom: 20px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.9rem;
}

/* ── Pagination ── */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.pagination {
    display: flex;
    gap: 4px;
    list-style: none;
}

.pagination a,
.pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    background: var(--bg-white);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.pagination a:hover {
    border-color: var(--teal-500);
    color: var(--teal-600);
    background: var(--teal-50);
}

.pagination .active span,
.pagination span.current {
    background: var(--teal-600);
    color: #fff;
    border-color: var(--teal-600);
}

.pagination .disabled span {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ==========================================================================
   §23 - PROPERTY DETAIL PAGE
   ========================================================================== */

.property-detail-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: start;
}

/* ── Gallery ── */
.property-gallery {
    margin-bottom: 24px;
}

.gallery-main {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 8px;
    background: #000;
}

.gallery-main .swiper-slide img,
.gallery-main-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

.gallery-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.gallery-thumbs::-webkit-scrollbar {
    display: none;
}

.gallery-thumbs .swiper-slide {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
    border: 2px solid transparent;
}

.gallery-thumbs .swiper-slide-thumb-active,
.gallery-thumbs .swiper-slide:hover,
.gallery-thumb.active,
.gallery-thumb:hover {
    opacity: 1;
    border-color: var(--teal-500);
}

.gallery-thumbs .swiper-slide img,
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-count {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: var(--radius-full);
}

/* ── Property Header ── */
.property-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

.property-header-left {
    flex: 1;
}

.property-header-right {
    text-align: right;
    flex-shrink: 0;
}

.property-title {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
    line-height: 1.2;
}

.property-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.property-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.property-meta-item i {
    color: var(--teal-500);
    font-size: 0.75rem;
}

.property-price {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--teal-700);
    line-height: 1;
    margin-bottom: 4px;
}

.property-price-label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Property Quick Info ── */
.property-quick-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 20px;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    margin-bottom: 24px;
}

.property-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.property-info-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-white);
    border-radius: var(--radius-sm);
    color: var(--teal-600);
    font-size: 0.9rem;
}

.property-info-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gray-900);
}

.property-info-label {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* ── Property Actions ── */
.property-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.property-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
}

.property-action-btn:hover {
    border-color: var(--teal-500);
    color: var(--teal-600);
}

.property-action-btn.active {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

/* ── Property Tabs ── */
.property-tabs {
    margin-bottom: 0;
}

.tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: none;
}

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

.tab-link {
    padding: 12px 20px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition-fast);
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: inherit;
}

.tab-link:hover {
    color: var(--teal-600);
}

.tab-link.active {
    color: var(--teal-600);
    border-bottom-color: var(--teal-600);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ── Description / Details ── */
.property-description {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.property-description p {
    margin-bottom: 16px;
}

.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.85rem;
}

.detail-item:nth-child(odd) {
    background: var(--gray-50);
}

.detail-label {
    color: var(--text-muted);
    font-weight: 500;
}

.detail-value {
    color: var(--gray-900);
    font-weight: 600;
    text-align: right;
}

/* ── Property Sidebar ── */
.property-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 96px;
}

/* Consultant Card in sidebar */
.consultant-sidebar-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 24px;
    text-align: center;
}

.consultant-sidebar-card .consultant-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 14px;
    border: 3px solid var(--teal-100);
}

.consultant-sidebar-card h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 4px;
    font-family: var(--font-body);
}

.consultant-sidebar-card .consultant-title {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.consultant-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Inquiry Card */
.inquiry-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 24px;
}

.inquiry-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 16px;
    font-family: var(--font-body);
}

.inquiry-form .form-group {
    margin-bottom: 12px;
}

/* Property Meta Card */
.property-meta-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 20px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.meta-item+.meta-item {
    border-top: 1px solid var(--border-light);
}

.meta-item i {
    width: 16px;
    text-align: center;
    color: var(--teal-500);
}

/* ── Similar Properties ── */
.similar-properties {
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
}


/* ==========================================================================
   §24 - BLOG PAGES
   ========================================================================== */

.blog-page-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    align-items: start;
}

/* Blog list cards */
.blog-list-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: box-shadow var(--transition);
    margin-bottom: 20px;
}

.blog-list-card:hover {
    box-shadow: var(--shadow-lg);
}

.blog-list-card-image {
    position: relative;
    overflow: hidden;
}

.blog-list-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

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

.blog-list-card-body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── Blog Article ── */
.blog-article {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.blog-article-image {
    aspect-ratio: 21/9;
    overflow: hidden;
}

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

.blog-article-header {
    padding: 32px 32px 0;
}

.blog-article-category {
    display: inline-block;
    padding: 4px 14px;
    background: var(--teal-50);
    color: var(--teal-700);
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    margin-bottom: 14px;
}

.blog-article-title {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 14px;
    line-height: 1.25;
}

.blog-article-meta {
    display: flex;
    gap: 20px;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
    align-items: center;
}

.blog-article-meta i {
    color: var(--teal-500);
    margin-right: 4px;
}

.blog-article-content {
    padding: 28px 32px;
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--text-secondary);
}

.blog-article-content h2,
.blog-article-content h3 {
    color: var(--gray-900);
    margin-top: 32px;
    margin-bottom: 14px;
    font-family: var(--font-heading);
}

.blog-article-content p {
    margin-bottom: 16px;
}

.blog-article-content ul,
.blog-article-content ol {
    margin-bottom: 16px;
    padding-left: 20px;
    list-style: initial;
}

.blog-article-content img {
    border-radius: var(--radius-md);
    margin: 20px 0;
    max-width: 100%;
}

.blog-article-share {
    padding: 20px 32px;
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.blog-article-share-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* Blog Sidebar */
.blog-sidebar {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-sidebar-widget {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.blog-sidebar-widget-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

.blog-sidebar-widget-body {
    padding: 16px 20px;
}

/* Recent post in sidebar */
.sidebar-post {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
    align-items: center;
}

.sidebar-post:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-post-img {
    width: 60px;
    height: 50px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}

.sidebar-post-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-post-title a {
    color: inherit;
}

.sidebar-post-title a:hover {
    color: var(--teal-600);
}

.sidebar-post-date {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 3px;
}

/* Category list in sidebar */
.sidebar-categories {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.sidebar-category-item:last-child {
    border-bottom: none;
}

.sidebar-category-item:hover {
    color: var(--teal-600);
}

.sidebar-category-count {
    background: var(--gray-100);
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
}


/* ==========================================================================
   §25 - CONSULTANT PAGES
   ========================================================================== */

.consultants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.consultant-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all var(--transition);
    text-decoration: none;
    display: block;
    padding: 24px;
}

.consultant-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.consultant-card-img {
    aspect-ratio: 3/2;
    overflow: hidden;
    background: var(--gray-100);
}

.consultant-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

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

.consultant-card-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--gray-100);
    border: 2px solid var(--teal-500);
    flex-shrink: 0;
}

.consultant-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.consultant-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--teal-50);
    color: var(--teal-600);
    font-size: 1.2rem;
    font-weight: 700;
    font-family: var(--font-heading);
}

.consultant-card-body {
    padding: 20px;
}

.consultant-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
    font-family: var(--font-body);
}

.consultant-card-title {
    font-size: 0.78rem;
    color: var(--teal-600);
    margin-bottom: 12px;
}

.consultant-card-info {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.consultant-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Consultant Detail */
.consultant-detail-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 32px;
    align-items: start;
}

.consultant-detail-card {
    position: sticky;
    top: 96px;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.consultant-profile-card {
    padding: 32px 24px;
    text-align: center;
}

.consultant-profile-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 18px;
    border: 4px solid var(--teal-100);
}

.consultant-profile-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
    font-family: var(--font-body);
}

.consultant-profile-title {
    font-size: 0.82rem;
    color: var(--teal-600);
    margin-bottom: 12px;
    font-weight: 500;
}

.consultant-profile-bio {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.6;
}

.consultant-contact-list {
    text-align: left;
    margin-bottom: 20px;
}

.consultant-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.82rem;
    color: var(--text-muted);
}

.consultant-contact-item i {
    width: 16px;
    color: var(--teal-500);
}

.consultant-contact-item a {
    color: var(--text-secondary);
}

.consultant-contact-item a:hover {
    color: var(--teal-600);
}


/* ==========================================================================
   §26 - CONTACT PAGE
   ========================================================================== */

.contact-page-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 32px;
    align-items: start;
}

.contact-info-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 24px;
}

.contact-info-card h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: var(--font-body);
}

.contact-info-list {
    display: flex;
    flex-direction: column;
}

.contact-info-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
}

.contact-info-item:last-child {
    border-bottom: none;
}

.contact-info-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--teal-50);
    color: var(--teal-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.contact-info-item h4 {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-family: var(--font-body);
}

.contact-info-item p {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.contact-info-item a {
    color: var(--text-secondary);
}

.contact-info-item a:hover {
    color: var(--teal-600);
}

.contact-form-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 32px;
}

.contact-form-card h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 24px;
    font-family: var(--font-body);
}


/* ==========================================================================
   §27 - ABOUT & SERVICES PAGES
   ========================================================================== */

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

.about-content {
    line-height: 1.85;
    color: var(--text-secondary);
}

.about-content p {
    margin-bottom: 16px;
    font-size: 0.95rem;
}

.about-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.certificate-badges {
    display: flex;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.certificate-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.82rem;
}

.certificate-badge i {
    font-size: 1.25rem;
    color: var(--teal-500);
}


/* ==========================================================================
   §28 - UTILITIES (CALCULATOR, FAVORITES, COMPARE, STATIC, 404)
   ========================================================================== */

/* Mortgage Calculator */
.mortgage-calc {
    max-width: 620px;
    margin: 0 auto;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 36px;
}

.calc-result {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-top: 24px;
    text-align: center;
}

.calc-amount {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--teal-700);
    margin-bottom: 4px;
}

.calc-amount-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.calc-breakdown {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.calc-breakdown-item {
    text-align: center;
}

.calc-breakdown-value {
    font-weight: 700;
    color: var(--gray-900);
    font-size: 0.9rem;
}

.calc-breakdown-label {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Favorites/Compare */
.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.compare-table th {
    width: 160px;
    padding: 12px 14px;
    background: var(--gray-50);
    color: var(--text-muted);
    font-weight: 600;
    border: 1px solid var(--border-light);
    text-align: left;
    vertical-align: middle;
}

.compare-table td {
    padding: 12px 14px;
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    min-width: 200px;
    vertical-align: middle;
}

.compare-table tr:nth-child(odd) td {
    background: var(--gray-50);
}

.compare-table tr:first-child td {
    text-align: center;
}

/* Static page */
.static-page-content {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 40px;
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--text-secondary);
}

.static-page-content h2,
.static-page-content h3 {
    color: var(--gray-900);
    margin-top: 28px;
    margin-bottom: 12px;
}

.static-page-content p {
    margin-bottom: 14px;
}

/* 404 Error */
.error-page {
    min-height: 100vh;
    background: var(--dark-void);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.error-code {
    font-family: var(--font-heading);
    font-size: 8rem;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 2px rgba(13, 148, 136, 0.4);
    line-height: 1;
    margin-bottom: 16px;
    letter-spacing: -4px;
}

.error-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: #fff;
    margin-bottom: 12px;
}

.error-description {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1rem;
    margin-bottom: 32px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}


/* ==========================================================================
   §29 - MODAL & LIGHTBOX
   ========================================================================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
}

.modal-content {
    position: relative;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 500px;
    box-shadow: var(--shadow-xl);
    z-index: 1;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
}

.modal-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    font-family: var(--font-body);
}

.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: background var(--transition-fast);
}

.modal-close:hover {
    background: var(--gray-200);
}

.modal-body {
    padding: 24px;
}

/* Share buttons */
.share-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: opacity var(--transition-fast);
}

.share-btn:hover {
    opacity: 0.88;
    transform: none;
}

.share-btn.share-whatsapp {
    background: #25D366;
}

.share-btn.share-facebook {
    background: #1877F2;
}

.share-btn.share-twitter {
    background: #1DA1F2;
}

.share-btn.share-email {
    background: var(--gray-700);
}

.share-link {
    display: flex;
    gap: 8px;
}

.share-link .form-control {
    flex: 1;
}


/* ==========================================================================
   §30 - APPOINTMENT PAGE
   ========================================================================== */

.appointment-card {
    max-width: 680px;
    margin: 0 auto;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 40px;
}


/* ==========================================================================
   §31 - ALERTS & NOTIFICATIONS
   ========================================================================== */

.alert {
    padding: 14px 18px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: 0.88rem;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.alert-success {
    background: #D1FAE5;
    border-color: #A7F3D0;
    color: #065F46;
}

.alert-danger {
    background: #FEE2E2;
    border-color: #FECACA;
    color: #991B1B;
}

.alert-warning {
    background: #FEF3C7;
    border-color: #FDE68A;
    color: #92400E;
}

.alert-info {
    background: var(--teal-50);
    border-color: var(--teal-100);
    color: var(--teal-800);
}

.alert i {
    flex-shrink: 0;
    margin-top: 1px;
}


/* ==========================================================================
   §32 - HOME PAGE RESPONSIVE
   ========================================================================== */

@media (min-width: 1600px) {
    .hero-title {
        font-size: 5.5rem;
    }
}

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

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

@media (max-width: 1024px) {
    .section {
        padding: 80px 0;
    }

    /* Header brand section — compact on tablet */
    .mh-brand {
        max-height: clamp(140px, calc(28vh - 60px), 220px);
    }

    .mh-brand-inner {
        gap: 20px;
    }

    .mh-avatar,
    .mh-avatar-img {
        width: 76px;
        height: 76px;
    }

    .mh-avatar span {
        font-size: 2rem;
    }

    .mh-brand-title {
        font-size: 1.5rem;
    }

    .mh-social-group {
        display: none;
    }

    .nav-menu {
        display: none;
    }

    .main-nav {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    /* Hero */
    .hero-section {
        height: 100svh;
        margin-top: calc(-1 * (clamp(140px, calc(28vh - 60px), 220px) + 68px));
    }

    .hero-slide {
        padding: 0 0 90px;
        min-height: 100svh;
    }

    .hero-title {
        font-size: 3.5rem;
    }

    /* Types strip — tablet: scroll horizontally */

    /* Properties */
    .properties-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Stats */
    .stats-counter-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-counter-item {
        padding: 40px 20px;
    }

    /* Services */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 48px;
    }

    /* Blog */
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    /* Properties page */
    .properties-page-layout {
        grid-template-columns: 1fr;
    }

    .filter-sidebar {
        position: fixed;
        top: 0;
        left: -320px;
        bottom: 0;
        width: 300px;
        z-index: 1100;
        border-radius: 0;
        border: none;
        box-shadow: var(--shadow-xl);
        overflow-y: auto;
        transition: left 0.3s var(--ease);
    }

    .filter-sidebar.open {
        left: 0;
    }

    .filter-close-btn {
        display: flex;
    }

    .filter-toggle-btn {
        display: flex;
    }

    /* Property detail */
    .property-detail-layout {
        grid-template-columns: 1fr;
    }

    .property-detail-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 16px;
    }

    /* Blog layout */
    .blog-page-layout {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 16px;
    }

    /* Consultant detail */
    .consultant-detail-layout {
        grid-template-columns: 1fr;
    }

    .consultant-detail-card {
        position: static;
    }

    /* Contact */
    .contact-page-layout {
        grid-template-columns: 1fr;
    }

    .contact-info-card {
        position: static;
    }

    /* About */
    .about-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

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

    .container {
        padding: 0 16px;
    }

    /* Top bar */
    .top-bar {
        display: none;
    }

    .main-header {
        top: 0;
    }

    /* Header brand section — minimal on mobile */
    .mh-brand {
        max-height: clamp(120px, 22vh, 180px);
    }

    .mh-brand-inner {
        gap: 14px;
    }

    .mh-avatar,
    .mh-avatar-img {
        width: 62px;
        height: 62px;
    }

    .mh-avatar span {
        font-size: 1.6rem;
    }

    .mh-avatar-glow {
        inset: -10px;
    }

    .mh-brand-title {
        font-size: 1.25rem;
    }

    .mh-brand-sub {
        display: none;
    }

    .mh-badge {
        font-size: 0.65rem;
        padding: 4px 10px;
        margin-bottom: 8px;
    }

    .mh-chips {
        gap: 6px;
    }

    .mh-chip {
        font-size: 0.68rem;
        padding: 4px 12px;
    }

    .mh-social-group {
        display: none;
    }

    .mh-nav {
        height: 58px;
    }

    /* Hero */
    .hero-section {
        height: 100svh;
        margin-top: calc(-1 * (clamp(120px, 22vh, 180px) + 58px));
    }

    .hero-slide {
        padding: 0 0 85px;
        min-height: 100svh;
    }

    .hero-title {
        font-size: 2.8rem;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    .search-fields {
        flex-wrap: wrap;
    }

    .search-field {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
    }

    .search-btn {
        width: 100%;
        justify-content: center;
    }

    /* Section titles */
    .section-title {
        font-size: 2rem;
    }

    .cta-content h2 {
        font-size: 2.2rem;
    }

    /* Types strip — mobile: scroll horizontally */


    /* Properties */
    .properties-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Stats */
    .stats-counter-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-counter-value {
        font-size: 2.5rem;
    }

    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    /* Testimonials */
    .testimonial-card {
        padding: 36px 24px;
    }

    /* Blog */
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Footer */
    .footer-main {
        padding: 60px 0 40px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Breadcrumb */
    .breadcrumb-section {
        padding: 12px 0;
    }

    /* Property header */
    .property-header {
        flex-direction: column;
        gap: 12px;
    }

    .property-header-right {
        text-align: left;
    }

    .property-price {
        font-size: 1.6rem;
    }

    .property-title {
        font-size: 1.5rem;
    }

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

    .property-tabs .tabs {
        gap: 0;
    }

    .tab-link {
        padding: 10px 14px;
        font-size: 0.8rem;
    }

    .details-grid {
        grid-template-columns: 1fr;
    }

    .property-actions {
        flex-wrap: wrap;
    }

    .property-action-btn {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }

    /* Blog article */
    .blog-article-header {
        padding: 24px 20px 0;
    }

    .blog-article-content {
        padding: 20px;
    }

    .blog-article-share {
        padding: 16px 20px;
    }

    .blog-article-title {
        font-size: 1.4rem;
    }

    .blog-list-card {
        grid-template-columns: 1fr;
    }

    /* List view on small */
    .list-view .pc {
        grid-template-columns: 1fr;
    }

    /* Static pages */
    .static-page-content {
        padding: 24px;
    }

    .mortgage-calc {
        padding: 24px;
    }

    /* Error */
    .error-code {
        font-size: 5rem;
    }

    .error-title {
        font-size: 1.5rem;
    }

    /* Consultants */
    .consultants-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

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

    /* Hero */
    .hero-title {
        font-size: 2.2rem;
        letter-spacing: -0.5px;
    }

    .hero-subtitle {
        font-size: 0.88rem;
    }

    .search-field {
        flex: 1 1 100%;
    }

    /* Properties */
    .properties-grid {
        grid-template-columns: 1fr;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    /* Stats */
    .stats-counter-value {
        font-size: 2.2rem;
    }

    .stats-counter-item {
        padding: 32px 16px;
    }

    /* Property detail */
    .property-quick-info {
        grid-template-columns: repeat(2, 1fr);
    }

    .tab-link {
        padding: 8px 10px;
        font-size: 0.78rem;
    }

    /* Consultant */
    .consultant-profile-card {
        padding: 24px 16px;
    }

    /* Share modal */
    .share-buttons {
        grid-template-columns: 1fr;
    }

    .share-link {
        flex-direction: column;
    }

    /* Compare */
    .compare-table th {
        width: 100px;
    }

    .compare-table td {
        min-width: 160px;
    }

    /* CTA */
    .cta-content h2 {
        font-size: 1.8rem;
    }

    /* Section title */
    .section-title {
        font-size: 1.75rem;
    }
}


/* ==========================================================================
   §33 - MISSING SECTION BACKGROUNDS & SWIPER OVERRIDES
   ========================================================================== */

/* Featured Properties — off-white bg */
.section-featured {
    padding: 100px 0;
    background: var(--bg-body);
}

/* Recent Properties — pure white bg */
.section-recent {
    padding: 100px 0;
    background: var(--bg-white);
}

/* Swiper navigation overrides */
.swiper-button-prev,
.swiper-button-next {
    color: #fff;
    background: rgba(5, 12, 20, 0.75);
    backdrop-filter: blur(8px);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all var(--transition);
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 0.85rem;
    font-weight: 700;
}

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

/* Swiper pagination defaults */
.swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.3);
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: var(--teal-500);
}

/* Mobile nav overlay */
.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1400;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Properties listing wrapper */
.properties-listing-section,
.section-properties-page {
    padding: 40px 0 80px;
    background: var(--bg-body);
}

/* Filter sidebar body padding */
.filter-sidebar .filter-group {
    padding: 0 20px;
    margin-bottom: 16px;
}

.filter-sidebar .filter-group:first-child {
    padding-top: 16px;
}

.filter-sidebar .filter-actions {
    padding: 0 20px 20px;
}

/* ── Scroll Animations ── */
.animate-ready {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* ── Notification System ── */
#notificationContainer {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.notification {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: var(--shadow-xl);
    animation: slideInRight 0.3s var(--ease) forwards;
    pointer-events: auto;
    max-width: 320px;
    backdrop-filter: blur(8px);
}

.notification-success {
    background: rgba(16, 185, 129, 0.95);
    color: #fff;
}

.notification-error {
    background: rgba(239, 68, 68, 0.95);
    color: #fff;
}

.notification-warning {
    background: rgba(245, 158, 11, 0.95);
    color: #fff;
}

.notification-info {
    background: rgba(13, 148, 136, 0.95);
    color: #fff;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

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

/* ── Compare Bar ── */
.compare-bar {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dark-void);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 12px 24px;
    z-index: 800;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.85rem;
    color: #fff;
    box-shadow: var(--shadow-xl);
    transition: bottom 0.4s var(--ease);
    white-space: nowrap;
}

.compare-bar.visible {
    bottom: 20px;
}

.compare-count {
    background: var(--teal-500);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

/* ── Property Detail Missing Styles ── */
.section-property-detail {
    padding: 40px 0 80px;
    background: var(--bg-body);
}

.property-detail-main {
    min-width: 0;
}

.gallery-placeholder {
    aspect-ratio: 16/9;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--gray-300);
    border-radius: var(--radius-lg);
}

.gallery-counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    gap: 6px;
}

.property-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.badge-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    letter-spacing: 0.5px;
    color: #fff;
    text-transform: uppercase;
}

.badge-featured {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: rgba(245, 158, 11, 0.12);
    color: #D97706;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
}

.badge-new {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--teal-50);
    color: var(--teal-700);
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
}

.property-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 6px;
}

.property-location i {
    color: var(--teal-500);
}

.property-ref {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 6px;
    letter-spacing: 0.3px;
}

.property-card-fav.active i {
    color: var(--red);
}

/* Print reset */
@media print {

    .top-bar,
    .main-header,
    .site-footer,
    .scroll-top,
    .whatsapp-float {
        display: none !important;
    }

    body {
        font-size: 12px;
    }
}


/* ==========================================================================
   §30 - PAGE HERO (Sayfa Başlığı — Tüm İç Sayfalar)
   ========================================================================== */

.pg-hero {
    background: var(--dark-void);
    padding: 52px 0 48px;
    position: relative;
    overflow: hidden;
}

/* Ambient arka plan ışığı */
.pg-hero::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(13, 148, 136, 0.18) 0%, transparent 70%);
    top: -100px;
    right: -100px;
    pointer-events: none;
}

.pg-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
}

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

/* Breadcrumb */
.pg-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pg-hero-breadcrumb a {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.pg-hero-breadcrumb a:hover {
    color: var(--teal-400);
}

.pg-hero-breadcrumb span {
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.65rem;
}

.pg-hero-breadcrumb .current {
    color: rgba(255, 255, 255, 0.65);
}

/* Başlık */
.pg-hero-title {
    font-family: var(--font-heading);
    font-size: 3.2rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 12px;
}

.pg-hero-title span {
    color: var(--teal-400);
}

.pg-hero-sub {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    max-width: 560px;
    line-height: 1.65;
}

.pg-hero-sub strong {
    color: var(--teal-400);
    font-weight: 600;
}

/* Blog hero kategori filtreleri */
.pg-hero-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.pg-hero-cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.22s ease;
}

.pg-hero-cat span {
    background: rgba(255, 255, 255, 0.12);
    padding: 1px 7px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
}

.pg-hero-cat:hover,
.pg-hero-cat.active {
    background: var(--teal-600);
    border-color: var(--teal-600);
    color: #fff;
}

.pg-hero-cat.active span,
.pg-hero-cat:hover span {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Blog hero varyant */
.pg-hero--blog {
    padding-bottom: 36px;
}

/* İlanlar count */
.properties-count {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.properties-count strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* Aktif filtreler etiketi */
.active-filters-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}


/* ==========================================================================
   §31 - BLOG FEATURED CARD (Blog Listesi — İlk Yazı)
   ========================================================================== */

.blog-featured-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    margin-bottom: 32px;
    transition: box-shadow var(--transition);
    min-height: 340px;
}

.blog-featured-card:hover {
    box-shadow: var(--shadow-xl);
}

.blog-featured-img {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 280px;
}

.blog-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease);
}

.blog-featured-card:hover .blog-featured-img img {
    transform: scale(1.05);
}

.blog-featured-placeholder {
    width: 100%;
    height: 100%;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--gray-300);
}

.blog-featured-cat {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 4px 14px;
    background: var(--teal-600);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.blog-featured-body {
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-featured-meta {
    display: flex;
    gap: 16px;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.blog-featured-meta i {
    color: var(--teal-500);
    margin-right: 4px;
}

.blog-featured-title {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--gray-900);
    margin-bottom: 14px;
}

.blog-featured-title a {
    color: inherit;
    text-decoration: none;
}

.blog-featured-title a:hover {
    color: var(--teal-700);
}

.blog-featured-excerpt {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 24px;
    flex: 1;
}

.blog-featured-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: var(--teal-600);
    border: 1.5px solid var(--teal-600);
    border-radius: var(--radius-full);
    padding: 10px 22px;
    text-decoration: none;
    transition: all 0.22s ease;
    align-self: flex-start;
}

.blog-featured-link:hover {
    background: var(--teal-700);
    border-color: var(--teal-700);
    gap: 12px;
}

.blog-featured-link i {
    font-size: 0.7rem;
    transition: transform 0.22s ease;
}

.blog-featured-link:hover i {
    transform: translateX(3px);
}

/* Blog sidebar CTA */
.blog-sidebar-cta {
    background: linear-gradient(145deg, var(--dark-void) 0%, var(--dark-navy) 70%, rgba(13, 148, 136, 0.3) 100%);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.blog-sidebar-cta-icon {
    width: 52px;
    height: 52px;
    background: rgba(13, 148, 136, 0.15);
    border: 1px solid rgba(13, 148, 136, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--teal-400);
    margin: 0 auto 16px;
}

.blog-sidebar-cta h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
}

.blog-sidebar-cta p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Sidebar active category */
.sidebar-category-item.active {
    color: var(--teal-700);
    font-weight: 600;
}

.sidebar-category-item.active .sidebar-category-count {
    background: var(--teal-100);
    color: var(--teal-700);
}


/* ==========================================================================
   §32 - BLOG DETAIL PAGE
   ========================================================================== */

/* Okuma ilerleme çubuğu */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--teal-500), var(--teal-400));
    z-index: 9999;
    transition: width 0.1s linear;
}

/* Hero başlık alanı */
.blog-detail-hero {
    background: var(--dark-void);
    padding: 52px 0 44px;
    position: relative;
    overflow: hidden;
}

.blog-detail-hero::before {
    content: '';
    position: absolute;
    width: 700px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(13, 148, 136, 0.15) 0%, transparent 70%);
    top: -80px;
    right: -80px;
    pointer-events: none;
}

.blog-detail-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
}

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

.blog-detail-cat {
    display: inline-block;
    padding: 5px 16px;
    background: rgba(13, 148, 136, 0.15);
    border: 1px solid rgba(13, 148, 136, 0.3);
    color: var(--teal-400);
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.blog-detail-title {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.93);
    line-height: 1.18;
    letter-spacing: -1px;
    max-width: 780px;
    margin-bottom: 20px;
}

.blog-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

.blog-detail-meta i {
    color: var(--teal-500);
    margin-right: 5px;
}

/* Featured kapak görsel */
.blog-detail-cover {
    background: var(--dark-deep);
    padding: 0 0 40px;
}

.blog-detail-cover-inner {
    max-height: 480px;
    overflow: hidden;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

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

/* Makale gövdesi */
.blog-article {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* Lead / Özet */
.blog-article-lead {
    padding: 28px 36px 0;
    border-bottom: none;
}

.blog-article-lead p {
    font-size: 1.05rem;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.75;
    border-left: 3px solid var(--teal-500);
    padding-left: 18px;
}

/* İçerik */
.blog-article-content {
    padding: 28px 36px 32px;
    font-size: 0.96rem;
    line-height: 1.9;
    color: var(--text-secondary);
}

.blog-article-content h2 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-top: 36px;
    margin-bottom: 14px;
}

.blog-article-content h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-top: 28px;
    margin-bottom: 12px;
}

.blog-article-content p {
    margin-bottom: 18px;
}

.blog-article-content ul,
.blog-article-content ol {
    margin-bottom: 18px;
    padding-left: 22px;
}

.blog-article-content li {
    margin-bottom: 6px;
}

.blog-article-content img {
    border-radius: var(--radius-md);
    margin: 24px 0;
    max-width: 100%;
}

.blog-article-content a {
    color: var(--teal-700);
    text-decoration: underline;
}

.blog-article-content blockquote {
    margin: 24px 0;
    padding: 16px 20px;
    background: var(--teal-50);
    border-left: 4px solid var(--teal-500);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--text-primary);
}

/* Paylaş alanı */
.blog-article-share {
    padding: 20px 36px;
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--bg-body);
}

.blog-share-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.blog-share-buttons {
    display: flex;
    gap: 8px;
}

.blog-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.blog-share-btn span {
    display: inline;
}

.blog-share-fb {
    background: #1877f2;
    color: #fff;
}

.blog-share-fb:hover {
    background: #166fe5;
}

.blog-share-tw {
    background: #1da1f2;
    color: #fff;
}

.blog-share-tw:hover {
    background: #1a91da;
}

.blog-share-wa {
    background: #25d366;
    color: #fff;
}

.blog-share-wa:hover {
    background: #20bd5c;
}

/* İlgili yazılar */
.related-posts-section {
    margin-top: 40px;
}

.related-posts-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-light);
}

/* Sidebar son yazılar — placeholder */
.sidebar-post-img-placeholder {
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-300);
    font-size: 0.9rem;
    flex-shrink: 0;
}


/* ==========================================================================
   §33 - CONTACT PAGE (İletişim Sayfası)
   ========================================================================== */

/* Bilgi Şeridi */
.contact-strip {
    background: var(--dark-deep);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0;
}

.contact-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.contact-strip-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 28px;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    text-decoration: none;
    transition: background var(--transition-fast);
    color: inherit;
}

.contact-strip-item:last-child {
    border-right: none;
}

.contact-strip-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.contact-strip-icon {
    width: 42px;
    height: 42px;
    background: rgba(13, 148, 136, 0.12);
    border: 1px solid rgba(13, 148, 136, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--teal-400);
    flex-shrink: 0;
}

.contact-strip-label {
    display: block;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 2px;
}

.contact-strip-item strong {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
}

.contact-strip-whatsapp .contact-strip-icon {
    background: rgba(37, 211, 102, 0.12);
    border-color: rgba(37, 211, 102, 0.25);
    color: #25d366;
}

/* Ana layout */
.contact-page-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 36px;
    align-items: start;
}

.contact-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Adres kartı */
.contact-info-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 24px;
}

.contact-info-card-header {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.contact-info-card-header>i {
    width: 44px;
    height: 44px;
    background: var(--teal-50);
    color: var(--teal-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.contact-info-card-header h3 {
    font-size: 0.9rem;
    font-weight: 700;
    font-family: var(--font-body);
    color: var(--text-primary);
    margin-bottom: 4px;
}

.contact-info-card-header p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.contact-info-extra {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
    font-size: 0.83rem;
}

.contact-info-extra i {
    color: var(--teal-500);
}

.contact-info-extra a {
    color: var(--text-secondary);
    text-decoration: none;
}

.contact-info-extra a:hover {
    color: var(--teal-600);
}

.contact-info-extra-note {
    margin-left: auto;
    font-size: 0.7rem;
    background: var(--teal-50);
    color: var(--teal-700);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 600;
}

/* Harita */
.contact-map {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 320px;
    border: 1px solid var(--border-color);
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    display: block;
}

.contact-map-link {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--teal-600);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: background var(--transition-fast);
}

.contact-map-link:hover {
    background: var(--teal-700);
}

/* Form kartı */
.contact-form-card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    padding: 36px;
}

.contact-form-header {
    margin-bottom: 28px;
}

.contact-form-header h2 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.contact-form-header p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Sosyal medya */
.contact-social {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
}

.contact-social p {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.contact-social-links {
    display: flex;
    gap: 10px;
}

.contact-social-link {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    text-decoration: none;
    color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-social-link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.contact-social-ig {
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.contact-social-fb {
    background: #1877f2;
}

.contact-social-yt {
    background: #ff0000;
}


/* ==========================================================================
   §34 - CONSULTANTS PAGE (Ekip Sayfası)
   ========================================================================== */

.consultant-card-v2 {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
}

.consultant-card-v2:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: var(--teal-200);
}

/* Fotoğraf alanı */
.consultant-card-v2-img {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: linear-gradient(135deg, var(--dark-navy), var(--dark-void));
}

.consultant-card-v2-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.6s var(--ease);
}

.consultant-card-v2:hover .consultant-card-v2-img img {
    transform: scale(1.05);
}

/* Fotoğraf yoksa harf baş harfi */
.consultant-card-v2-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 2px rgba(13, 148, 136, 0.7);
    letter-spacing: -3px;
    filter: drop-shadow(0 0 20px rgba(13, 148, 136, 0.4));
}

/* İlan sayısı rozeti */
.consultant-card-v2-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(5, 12, 20, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
}

.consultant-card-v2-badge strong {
    color: var(--teal-400);
    font-weight: 700;
    margin-right: 3px;
}

/* Bilgi alanı */
.consultant-card-v2-body {
    padding: 22px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.consultant-card-v2-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
    font-family: var(--font-body);
}

.consultant-card-v2-title {
    font-size: 0.78rem;
    color: var(--teal-600);
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.consultant-card-v2-spec {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    flex: 1;
}

.consultant-card-v2-spec i {
    color: var(--teal-500);
    margin-right: 4px;
}

/* Aksiyon butonları */
.consultant-card-v2-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Ekip CTA bandı */
.team-cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 56px;
    padding: 36px 44px;
    background: linear-gradient(135deg, var(--dark-void) 0%, var(--dark-navy) 60%, rgba(13, 148, 136, 0.2) 100%);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.07);
    flex-wrap: wrap;
}

.team-cta-content h3 {
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 6px;
}

.team-cta-content p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.45);
}


/* ==========================================================================
   §35 - UTILITY ADDITIONS
   ========================================================================== */

/* WhatsApp butonu */
.btn-whatsapp {
    background: #25d366;
    color: #fff;
    border-color: #25d366;
}

.btn-whatsapp:hover {
    background: #20bd5c;
    border-color: #20bd5c;
    color: #fff;
}

/* Small buton boyutu */
.btn-sm {
    padding: 7px 14px;
    font-size: 0.78rem;
}

/* Sidebar active link */
.sidebar-category-item.active {
    color: var(--teal-700);
    font-weight: 600;
}


/* ==========================================================================
   §36 - RESPONSIVE — YENİ BİLEŞENLER
   ========================================================================== */

@media (max-width: 1024px) {
    .blog-featured-card {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .blog-featured-img {
        min-height: 220px;
        aspect-ratio: 16/6;
    }

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

    .contact-strip-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .contact-page-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .pg-hero {
        padding: 36px 0 32px;
    }

    .pg-hero-title {
        font-size: 2.2rem;
        letter-spacing: -0.5px;
    }

    .pg-hero-sub {
        font-size: 0.88rem;
    }

    .blog-detail-title {
        font-size: 1.75rem;
        letter-spacing: -0.3px;
    }

    .blog-detail-cover-inner {
        max-height: 280px;
        border-radius: 0;
    }

    .blog-article-lead {
        padding: 20px 20px 0;
    }

    .blog-article-content {
        padding: 20px;
    }

    .blog-article-share {
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .blog-share-btn span {
        display: none;
    }

    .blog-share-btn {
        padding: 8px 12px;
    }

    .contact-strip-grid {
        grid-template-columns: 1fr 1fr;
    }

    .contact-form-card {
        padding: 24px 20px;
    }

    .contact-map {
        height: 240px;
    }

    .team-cta-banner {
        padding: 28px 24px;
        flex-direction: column;
        text-align: center;
    }

    .blog-featured-card {
        margin-bottom: 20px;
    }

    .blog-featured-body {
        padding: 24px 20px;
    }

    .blog-featured-title {
        font-size: 1.35rem;
    }
}

@media (max-width: 480px) {
    .contact-strip-grid {
        grid-template-columns: 1fr;
    }

    .pg-hero-title {
        font-size: 1.85rem;
    }

    .blog-detail-title {
        font-size: 1.5rem;
    }

    .consultant-card-v2-actions {
        flex-direction: column;
    }

    .consultant-card-v2-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .pg-hero-cats {
        gap: 6px;
    }

    .pg-hero-cat {
        font-size: 0.72rem;
        padding: 5px 12px;
    }
}


/* ==========================================================================
   §37 - FLOATING LABELS (İletişim Formu)
   ========================================================================== */

.ff-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ff-group {
    position: relative;
    margin-bottom: 20px;
}

/* Input / Textarea / Select */
.ff-input {
    width: 100%;
    padding: 22px 16px 8px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    color: var(--text-primary);
    background: var(--bg-white);
    outline: none;
    font-family: var(--font-body);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
}

.ff-input:focus {
    border-color: var(--teal-500);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.08);
}

.ff-input:focus~.ff-label,
.ff-input:not(:placeholder-shown)~.ff-label {
    top: 8px;
    font-size: 0.68rem;
    color: var(--teal-600);
    font-weight: 700;
    letter-spacing: 0.3px;
    transform: none;
}

/* Label */
.ff-label {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    font-size: 0.88rem;
    color: var(--text-muted);
    pointer-events: none;
    transition: all 0.18s ease;
    background: var(--bg-white);
    padding: 0 3px;
    line-height: 1;
}

.ff-label .required {
    color: var(--teal-600);
}

/* Textarea özel */
.ff-textarea {
    padding-top: 28px;
    resize: vertical;
    min-height: 130px;
    line-height: 1.6;
}

.ff-label--textarea {
    top: 20px;
    transform: none;
}

.ff-textarea:focus~.ff-label--textarea,
.ff-textarea:not(:placeholder-shown)~.ff-label--textarea {
    top: 8px;
    font-size: 0.68rem;
    color: var(--teal-600);
    font-weight: 700;
}

/* Select özel */
.ff-select-wrap {
    position: relative;
}

.ff-select-wrap::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    font-size: 0.9rem;
}

.ff-select {
    padding-right: 36px;
    cursor: pointer;
}

/* Select için label her zaman float */
.ff-label--raised {
    top: 8px;
    transform: none;
    font-size: 0.68rem;
    color: var(--teal-600);
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Submit butonu */
.ff-submit {
    width: 100%;
    padding: 16px 24px;
    font-size: 1rem;
    letter-spacing: 0.3px;
    border-radius: var(--radius-md);
    margin-top: 4px;
}

/* Güven notu */
.ff-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ff-note i {
    color: var(--teal-500);
}

/* Responsive */
@media (max-width: 600px) {
    .ff-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}


/* ==========================================================================
   §38 - TEAM CARDS (Danışman Ekip Kartları)
   ========================================================================== */

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
    margin-bottom: 56px;
}

.team-card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
    display: flex;
    flex-direction: column;
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.10);
    border-color: var(--teal-200);
}

/* Fotoğraf alanı */
.team-card-photo {
    position: relative;
    height: 260px;
    overflow: hidden;
    background: linear-gradient(145deg, #0d1a2d 0%, #050c14 60%, rgba(13, 148, 136, 0.2) 100%);
    flex-shrink: 0;
}

.team-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.6s var(--ease);
}

.team-card:hover .team-card-photo img {
    transform: scale(1.06);
}

/* Harf baş harfi */
.team-card-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 5rem;
    font-weight: 800;
    color: rgba(13, 148, 136, 0.4);
    letter-spacing: -4px;
    user-select: none;
    text-shadow: 0 0 60px rgba(13, 148, 136, 0.3);
}

/* İlan sayısı rozeti */
.team-card-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(5, 12, 20, 0.80);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
    padding: 5px 12px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
}

.team-card-badge strong {
    color: var(--teal-400);
    font-weight: 700;
}

/* Bilgi alanı */
.team-card-body {
    padding: 22px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.team-card-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
    font-family: var(--font-body);
}

.team-card-title {
    font-size: 0.75rem;
    color: var(--teal-600);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}

.team-card-spec {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.4;
}

.team-card-spec i {
    color: var(--teal-500);
    margin-top: 2px;
    flex-shrink: 0;
}

/* Butonlar */
.team-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.team-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1.5px solid transparent;
    cursor: pointer;
    font-family: var(--font-body);
}

.team-btn-primary {
    background: var(--teal-600);
    color: #fff;
    border-color: var(--teal-600);
}

.team-btn-primary:hover {
    background: var(--teal-700);
    border-color: var(--teal-700);
}

.team-btn-wa {
    background: #25d366;
    color: #fff;
    border-color: #25d366;
}

.team-btn-wa:hover {
    background: #1ebe59;
}

.team-btn-outline {
    background: transparent;
    color: var(--teal-700);
    border-color: var(--teal-200);
    grid-column: 1 / -1;
    /* İlan butonu tam genişlik */
}

.team-btn-outline:hover {
    background: var(--teal-50);
    border-color: var(--teal-400);
}


/* ==========================================================================
   §39 - BLOG KART: OKUMA SÜRESİ + HOVER GELİŞTİRMELERİ
   ========================================================================== */

/* Featured card okuma süresi rozeti */
.blog-featured-read {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: rgba(5, 12, 20, 0.75);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    gap: 5px;
}

.blog-featured-read i {
    color: var(--teal-400);
}

/* Blog kart okuma süresi rozeti */
.blog-card-read-time {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(5, 12, 20, 0.72);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    gap: 4px;
}

.blog-card-read-time i {
    color: var(--teal-400);
}

/* Blog detail meta: okuma süresi */
.blog-detail-read-time {
    background: rgba(13, 148, 136, 0.15);
    border: 1px solid rgba(13, 148, 136, 0.25);
    color: var(--teal-400);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 600;
}

.blog-detail-read-time i {
    margin-right: 4px;
}

/* Blog kart image alanı zaten position:relative — okuma süresi için yeterli */
.blog-card-image {
    position: relative;
}

/* Responsive team grid */
@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .team-card-photo {
        height: 200px;
    }

    .team-card-initials {
        font-size: 3.5rem;
    }
}

@media (max-width: 480px) {
    .team-grid {
        grid-template-columns: 1fr;
    }

    .team-card-actions {
        grid-template-columns: 1fr 1fr;
    }

    .team-btn-outline {
        grid-column: 1 / -1;
    }
}


/* ==========================================================================
   MOBİL DRAWER — header dışında, root stacking context'te (z-index doğru çalışır)
   ========================================================================== */

/* Masaüstünde tamamen gizle */
@media (min-width: 1025px) {
    .mob-drawer {
        display: none !important;
    }
}

/* Drawer kapsayıcı */
.mob-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(300px, 86vw);
    height: 100%;
    height: 100dvh;
    background: #0b1829;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.mob-drawer.active {
    right: 0;
}

/* ── Başlık ── */
.mob-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.02);
}

.mob-drawer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mob-drawer-logo {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0d9488, #2dd4bf);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: -0.5px;
}

.mob-drawer-logo-img {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.mob-drawer-name {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.mob-drawer-subtitle {
    display: block;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 1px;
}

.mob-drawer-close {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.mob-drawer-close:hover,
.mob-drawer-close:active {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* ── Nav linkleri ── */
.mob-drawer-nav {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mob-drawer-nav>li>a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: color 0.18s, background 0.18s, border-color 0.18s;
    -webkit-tap-highlight-color: transparent;
}

.mob-drawer-nav>li>a i {
    width: 18px;
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.6;
    flex-shrink: 0;
}

.mob-drawer-nav>li>a:hover,
.mob-drawer-nav>li>a:active {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.04);
    border-left-color: rgba(255, 255, 255, 0.12);
}

.mob-drawer-nav>li.mdn-active>a {
    color: #2dd4bf;
    border-left-color: #0d9488;
    background: rgba(13, 148, 136, 0.1);
}

.mob-drawer-nav>li.mdn-active>a i {
    opacity: 1;
}

/* ── Alt-linkler pill olarak (İlanlar) ── */
.mob-drawer-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 20px 12px 51px;
}

.mob-drawer-pills a {
    display: inline-flex;
    align-items: center;
    padding: 4px 13px;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    text-decoration: none;
    transition: color 0.18s, border-color 0.18s, background 0.18s;
    -webkit-tap-highlight-color: transparent;
}

.mob-drawer-pills a:hover,
.mob-drawer-pills a:active {
    color: #2dd4bf;
    border-color: rgba(13, 148, 136, 0.45);
    background: rgba(13, 148, 136, 0.1);
}

/* ── Alt alan (tel / WA / ara) ── */
.mob-drawer-foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.mob-drawer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.mob-drawer-btn--phone {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
}

.mob-drawer-btn--phone i {
    color: #2dd4bf;
}

.mob-drawer-btn--phone:hover,
.mob-drawer-btn--phone:active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.mob-drawer-btn--wa {
    background: rgba(37, 211, 102, 0.1);
    border: 1px solid rgba(37, 211, 102, 0.22);
    color: #25d366;
}

.mob-drawer-btn--wa:hover,
.mob-drawer-btn--wa:active {
    background: #25d366;
    color: #fff;
    border-color: #25d366;
}

.mob-drawer-btn--search {
    background: #0d9488;
    border: 1px solid #0d9488;
    color: #fff;
}

.mob-drawer-btn--search:hover,
.mob-drawer-btn--search:active {
    background: #0f766e;
    border-color: #0f766e;
}


/* ==========================================================================
   §OVERRIDE — UI-02: WhatsApp Float & Scroll-Top — types-ticker çakışma düzeltmesi
   types-ticker height ≈ 60px, butonlar onun üstünde konumlanmalı
   ========================================================================== */

.whatsapp-float {
    position: fixed;
    bottom: 90px;
    /* ticker(~60px) + 30px boşluk */
    right: 24px;
    z-index: 900;
    /* ticker z-index:800 üstünde */
}

.whatsapp-float a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.whatsapp-float a:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 28px rgba(37, 211, 102, 0.55);
}

.scroll-top {
    position: fixed;
    bottom: 90px;
    /* ticker üstünde */
    right: 88px;
    /* WhatsApp butonunun solunda */
    z-index: 900;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--teal-600);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    box-shadow: var(--shadow-teal);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all var(--transition);
    cursor: pointer;
    border: none;
}

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

.scroll-top:hover {
    background: var(--teal-700);
    transform: translateY(-3px);
}

/* Mobilde ticker yok — butonlar normal pozisyona döner */
@media (max-width: 640px) {
    .types-ticker {
        display: none;
    }

    .whatsapp-float {
        bottom: 24px;
    }

    .scroll-top {
        bottom: 24px;
        right: 80px;
    }
}

/* ==========================================================================
   § HERO SECTION (Sıfırdan Tasarım)
   ========================================================================== */
.gp-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: var(--header-height, 100px);
    background: var(--dark-navy);
}

.gp-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.gp-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.6;
    animation: gp-hero-zoom 20s infinite alternate ease-in-out;
}

.gp-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 17, 30, 0.4) 0%, rgba(8, 17, 30, 0.9) 100%);
    z-index: 1;
}

.gp-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

.gp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 2rem;
    animation: fade-in-up 1s ease 0.2s both;
}

.gp-hero-badge i {
    color: var(--teal-400);
}

.gp-hero-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    animation: fade-in-up 1s ease 0.4s both;
}

.gp-hero-title span {
    color: var(--teal-400);
}

.gp-hero-desc {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    animation: fade-in-up 1s ease 0.6s both;
}

/* Premium Search Form (Glassmorphism) */
.gp-hero-search {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 1rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: fade-in-up 1s ease 0.8s both;
}

.gp-hero-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gp-hero-tab {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gp-hero-tab.active,
.gp-hero-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

.gp-search-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: #fff;
    padding: 0.5rem;
    border-radius: 16px;
}

.gp-search-input-group {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    background: #f8fafc;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
}

.gp-search-input-group i {
    color: var(--teal-600);
    margin-right: 0.75rem;
}

.gp-search-input-group input,
.gp-search-input-group select {
    border: none;
    background: transparent;
    width: 100%;
    font-size: 1rem;
    color: var(--dark-navy);
    outline: none;
}

.gp-search-btn {
    background: var(--teal-600);
    color: #fff;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.gp-search-btn:hover {
    background: var(--teal-700);
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes gp-hero-zoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

@media (max-width: 768px) {
    .gp-search-bar {
        flex-direction: column;
        background: transparent;
        padding: 0;
        gap: 1rem;
    }

    .gp-search-input-group {
        background: #fff;
    }

    .gp-search-btn {
        width: 100%;
    }
}