@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Outfit:wght@200;300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Space+Mono:wght@400;700&display=swap');

/*
 * =========================================================================
 * VIE HOMEDECOR - LUXURY CSS DESIGN SYSTEM (Giorgetti Meda Inspired)
 * =========================================================================
 * 
 * Bu tasarım sistemi, İtalyan lüks mobilya ve mimari tasarımının (Giorgetti Meda,
 * B&B Italia, Minotti) minimalist ve zengin estetiğinden ilham alarak yaratılmıştır.
 * 
 * ANA TASARIM PRENSİPLERİ:
 * 1. Derinlik ve Kontrast: Koyu maskülen zeminler ile antik keten tonlarının asil birlikteliği.
 * 2. Mat Metalik Detaylar: Çiğ ve parlak altın yerine fırçalanmış mat şampanya ve bronz tonları.
 * 3. Geniş Nefes Alan Alanlar (White Space): Elementler arasında geniş ve rasyonel boşluklar.
 * 4. Akıcı Mikro-Etkileşimler: Kullanıcıyı yormayan, sinematik ve pürüzsüz animasyonlar.
 * 5. Tipografik Hiyerarşi: Serif İtalyan zarafeti ile keskin ve modern geometrik sans-serif birlikteliği.
 */

:root {
    /* ---------------------------------------------------------------------
     * HSL RENK SİSTEMİ (HSL COLOR SYSTEM)
     * ---------------------------------------------------------------------
     * HSL sistemi renklerin opaklığını ve varyasyonlarını dinamik olarak 
     * yönetmemizi sağlar (örn: hsla(var(--hsl-gold), 0.2) kullanımı ile).
     */
    
    /* Ana Koyu Renkler (Ebony & Obsidian) - Derin, dramatik ve premium */
    --hsl-ebony-black: 240, 6%, 8%;       /* #131314 - Giorgetti'nin imzası olan koyu ahşap zemin tonu */
    --hsl-charcoal: 240, 5%, 15%;         /* #242426 - İkincil koyu yüzeyler */
    --hsl-dark-gray: 240, 4%, 25%;        /* #3d3d40 - Sınırlar ve koyu metinler */
    
    /* Açık Lüks Zeminler (Linen & Travertine) - Sıcak, doğal ve dinlendirici */
    --hsl-linen-white: 30, 20%, 98%;      /* #fdfcfb - Saf beyaz yerine kullanılan antik pamuk/keten tonu */
    --hsl-travertine: 30, 12%, 94%;       /* #f0edea - Doğal traverten ve mermer dokuları için */
    --hsl-warm-sand: 30, 10%, 88%;        /* #e2deda - Hafif gölgeli alanlar ve geçişler */

    /* Metalik Vurgular (Champagne Gold & Bronze) - Fırçalanmış ve mat lüks */
    --hsl-gold: 38, 35%, 68%;             /* #cbb085 - Mat şampanya altını, sofistike ve asil */
    --hsl-gold-dark: 38, 30%, 48%;        /* #9c8056 - Koyu altın detaylar ve aktif durumlar */
    --hsl-gold-light: 38, 40%, 85%;       /* #ebe2d3 - Çok yumuşak altın parıltıları */
    --hsl-bronze: 24, 20%, 42%;           /* #806352 - Bronz döküm ve doğal ceviz ahşap tonu */
    --hsl-terracotta: 16, 32%, 50%;       /* #a65e46 - Toprak saksı ve tuğla tonu (sıcak vurgu) */

    /* Fonksiyonel Durumlar */
    --hsl-success: 140, 25%, 45%;         /* Dingin yeşil */
    --hsl-info: 210, 30%, 50%;            /* Klasik mavi alternatifi sakin ton */
    --hsl-error: 8, 40%, 50%;             /* Göze batmayan ama belirgin kırmızı */

    /* ---------------------------------------------------------------------
     * HEX RENK DEĞİŞKENLERİ (Hızlı ve Kolay Kullanım İçin)
     * ---------------------------------------------------------------------
     */
    --color-bg-dark: hsl(var(--hsl-ebony-black));
    --color-bg-dark-alt: hsl(var(--hsl-charcoal));
    --color-bg-light: hsl(var(--hsl-linen-white));
    --color-bg-light-alt: hsl(var(--hsl-travertine));
    
    --color-gold: hsl(var(--hsl-gold));
    --color-gold-dark: hsl(var(--hsl-gold-dark));
    --color-gold-light: hsl(var(--hsl-gold-light));
    --color-bronze: hsl(var(--hsl-bronze));
    --color-terracotta: hsl(var(--hsl-terracotta));

    /* Metin Renkleri */
    --color-text-on-light: hsl(var(--hsl-ebony-black));
    --color-text-on-light-muted: hsl(var(--hsl-dark-gray));
    --color-text-on-dark: hsl(var(--hsl-linen-white));
    --color-text-on-dark-muted: hsl(var(--hsl-warm-sand));

    /* Sınır (Border) Renkleri */
    --color-border-light: hsla(var(--hsl-ebony-black), 0.08);
    --color-border-light-strong: hsla(var(--hsl-ebony-black), 0.15);
    --color-border-dark: hsla(var(--hsl-linen-white), 0.08);
    --color-border-dark-strong: hsla(var(--hsl-linen-white), 0.15);
    --color-border-gold: hsla(var(--hsl-gold), 0.3);

    /* ---------------------------------------------------------------------
     * TİPOGRAFİ (TYPOGRAPHY)
     * ---------------------------------------------------------------------
     */
    --font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --font-sans: 'Outfit', 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Space Mono', monospace;

    /* Yazı Boyutları (Scale) */
    --font-size-xs: 0.75rem;     /* 12px - Çok küçük etiketler, dipnotlar */
    --font-size-sm: 0.875rem;    /* 14px - Küçük açıklamalar, navigasyon */
    --font-size-base: 1rem;      /* 16px - Standart gövde metni */
    --font-size-md: 1.125rem;    /* 18px - Alt başlıklar, giriş paragrafları */
    --font-size-lg: 1.25rem;     /* 20px - Küçük başlıklar, öne çıkan metinler */
    --font-size-xl: 1.5rem;      /* 24px - H4 başlıkları */
    --font-size-2xl: 2rem;       /* 32px - H3 başlıkları */
    --font-size-3xl: 2.75rem;    /* 44px - H2 başlıkları */
    --font-size-4xl: 4rem;       /* 64px - H1 ana hero başlığı */
    --font-size-display: 5.5rem; /* 88px - Dev ekran başlıkları veya sayılar */

    /* Satır Yükseklikleri (Line Heights) */
    --line-height-tight: 1.1;
    --line-height-heading: 1.25;
    --line-height-base: 1.65;    /* Geniş satır aralığı lüks tasarımlarda okumayı kolaylaştırır */

    /* Harf Aralığı (Letter Spacing) */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-widest: 0.15em; /* Kategori etiketleri ve küçük başlıklar için geniş aralık */

    /* ---------------------------------------------------------------------
     * EFEKTLER & GEÇİŞLER (EFFECTS & TRANSITIONS)
     * ---------------------------------------------------------------------
     */
    /* Pürüzsüz Geçiş Animasyonları */
    --transition-fast: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); /* Apple / luxury tarzı yavaş duran akış */
    --transition-slow: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);   /* Hero geçişleri ve büyük açılışlar */

    /* Gölgeler (Sadece derinlik hissi için çok hafif ve yumuşak gölgeler) */
    --shadow-subtle: 0 4px 30px rgba(0, 0, 0, 0.02);
    --shadow-medium: 0 10px 40px rgba(0, 0, 0, 0.04);
    --shadow-luxury: 0 20px 60px rgba(0, 0, 0, 0.06);

    /* Cam Efekti (Glassmorphism - Frosted Glass) */
    --glass-bg-dark: rgba(19, 19, 20, 0.75);
    --glass-bg-light: rgba(253, 252, 251, 0.75);
    --glass-blur: 15px;
    --glass-border-dark: rgba(255, 255, 255, 0.06);
    --glass-border-light: rgba(0, 0, 0, 0.04);

    /* ---------------------------------------------------------------------
     * DÜZEN & BOŞLUKLAR (LAYOUT & SPACING)
     * ---------------------------------------------------------------------
     */
    --spacing-xs: 0.5rem;   /* 8px */
    --spacing-sm: 1rem;     /* 16px */
    --spacing-md: 2rem;     /* 32px */
    --spacing-lg: 4rem;     /* 64px */
    --spacing-xl: 7rem;     /* 112px */
    --spacing-xxl: 11rem;   /* 176px - Geniş beyaz boşluklar (Giorgetti Meda stili) */

    --container-max-width: 1440px;
    --container-padding: 2rem;
}

/* =========================================================================
 * TEMEL HİZALAMALAR VE DÜZELTMELER (BASE STYLES)
 * =========================================================================
 */
html {
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--color-bg-light);
    color: var(--color-text-on-light);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* Koyu Mod Sınıfı (Dark Mode Utility) */
body.dark-mode, .theme-dark {
    background-color: var(--color-bg-dark);
    color: var(--color-text-on-dark);
}

/* Ultra İnce Lüks Kaydırma Çubuğu (Luxury Scrollbar) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-light);
}

.dark-mode::-webkit-scrollbar-track, 
.theme-dark::-webkit-scrollbar-track {
    background: var(--color-bg-dark);
}

::-webkit-scrollbar-thumb {
    background: hsla(var(--hsl-ebony-black), 0.2);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold);
}

.dark-mode ::-webkit-scrollbar-thumb,
.theme-dark ::-webkit-scrollbar-thumb {
    background: hsla(var(--hsl-linen-white), 0.2);
}

.dark-mode ::-webkit-scrollbar-thumb:hover,
.theme-dark ::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold);
}

/* =========================================================================
 * TİPOGRAFİ SINIFLARI (TYPOGRAPHY CLASSES)
 * =========================================================================
 */
.font-serif {
    font-family: var(--font-serif);
}

.font-sans {
    font-family: var(--font-sans);
}

.font-mono {
    font-family: var(--font-mono);
    letter-spacing: var(--letter-spacing-normal);
}

/* Lüks Başlık Yapıları */
h1, .h1-luxury {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, var(--font-size-4xl));
    font-weight: 300;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    margin: 0 0 1.5rem 0;
}

h2, .h2-luxury {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, var(--font-size-3xl));
    font-weight: 300;
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-tight);
    margin: 0 0 1.25rem 0;
}

h3, .h3-luxury {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, var(--font-size-2xl));
    font-weight: 300;
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-tight);
    margin: 0 0 1rem 0;
}

h4, .h4-luxury {
    font-family: var(--font-sans);
    font-size: var(--font-size-xl);
    font-weight: 400;
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-normal);
    margin: 0 0 1rem 0;
}

/* Kategori Etiketleri, Küçük Lüks Yazılar */
.label-luxury {
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-widest);
    color: var(--color-gold);
    display: inline-block;
    margin-bottom: 0.75rem;
}

.lead-luxury {
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
    font-weight: 300;
    color: var(--color-text-on-light-muted);
}

.theme-dark .lead-luxury,
.dark-mode .lead-luxury {
    color: var(--color-text-on-dark-muted);
}

/* =========================================================================
 * BİLEŞENLER VE ETKİLEŞİMLER (COMPONENTS & HOVERS)
 * =========================================================================
 */

/* Lüks Buton - Gold Border & Minimal Shimmer */
.btn-luxury {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.25rem;
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-on-light);
    background-color: transparent;
    border: 1px solid var(--color-text-on-light);
    border-radius: 0; /* Asla yuvarlatılmış köşeler yok, keskin hatlar */
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
    text-decoration: none;
    z-index: 1;
}

.theme-dark .btn-luxury,
.dark-mode .btn-luxury {
    color: var(--color-text-on-dark);
    border-color: var(--color-text-on-dark);
}

/* Hover'da alttan gelen dolgu efekti */
.btn-luxury::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-text-on-light);
    transform: translateY(102%);
    transition: var(--transition-smooth);
    z-index: -1;
}

.theme-dark .btn-luxury::before,
.dark-mode .btn-luxury::before {
    background-color: var(--color-gold);
}

.btn-luxury:hover {
    color: var(--color-bg-light);
    border-color: var(--color-text-on-light);
    letter-spacing: 0.18em; /* Harflerin hafifçe genişlemesi lüks bir histir */
}

.theme-dark .btn-luxury:hover,
.dark-mode .btn-luxury:hover {
    color: var(--color-bg-dark);
    border-color: var(--color-gold);
}

.btn-luxury:hover::before {
    transform: translateY(0);
}

/* Gold Detaylı Buton Varyasyonu */
.btn-luxury-gold {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.btn-luxury-gold::before {
    background-color: var(--color-gold);
}

.btn-luxury-gold:hover {
    color: var(--color-bg-dark) !important;
    border-color: var(--color-gold);
}

/* Minimalist Bağlantı Linkleri (Luxury Link Hover) */
.link-luxury {
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    color: inherit;
    position: relative;
    padding-bottom: 4px;
    display: inline-block;
    transition: var(--transition-fast);
}

.link-luxury::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.link-luxury:hover {
    color: var(--color-gold);
}

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

/* Lüks Görsel Kartı (Premium Image Card Zoom & Reveal) */
.card-luxury {
    position: relative;
    overflow: hidden;
    background-color: transparent;
    border: none;
}

.card-luxury-img-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background-color: var(--color-bg-light-alt);
}

.card-luxury img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

.card-luxury:hover img {
    transform: scale(1.04) rotate(0.01deg);
}

/* Kart Üzerine Gelen Karartma Overlay'i */
.card-luxury-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(19,19,20,0) 40%, rgba(19,19,20,0.85) 100%);
    opacity: 0;
    transition: var(--transition-smooth);
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-md);
    box-sizing: border-box;
}

.card-luxury:hover .card-luxury-overlay {
    opacity: 1;
}

/* Buzlu Cam Kartları (Glassmorphic Cards) */
.glass-card {
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border-light);
    padding: var(--spacing-md);
    transition: var(--transition-smooth);
}

.theme-dark .glass-card,
.dark-mode .glass-card {
    background: var(--glass-bg-dark);
    border: 1px solid var(--glass-border-dark);
}

.glass-card:hover {
    border-color: var(--color-gold);
    transform: translateY(-4px);
    box-shadow: var(--shadow-luxury);
}

/* =========================================================================
 * BÜYÜLEYİCİ ANİMASYONLAR (EXQUISITE ANIMATIONS)
 * =========================================================================
 */

/* 1. Ken Burns (Sinematik Ağır Yakınlaştırma) */
@keyframes kenburns {
    0% {
        transform: scale(1) translate(0, 0);
    }
    50% {
        transform: scale(1.08) translate(-1%, -0.5%);
    }
    100% {
        transform: scale(1) translate(0, 0);
    }
}

.animate-ken-burns {
    animation: kenburns 30s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

/* 2. Sonsuz Marquee (Kayan Yazı) */
@keyframes marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    width: 100%;
}

.marquee-content {
    display: flex;
    white-space: nowrap;
    animation: marquee 25s linear infinite;
    padding: 1rem 0;
}

.marquee-content:hover {
    animation-play-state: paused; /* Hover edince yavaşlama/durma prestijli bir etkidir */
}

.marquee-item {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 6vw, var(--font-size-3xl));
    font-weight: 300;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px hsla(var(--hsl-gold), 0.5);
    padding: 0 2rem;
    letter-spacing: var(--letter-spacing-wide);
    display: inline-block;
    transition: var(--transition-fast);
}

.marquee-item:hover {
    color: var(--color-gold);
    -webkit-text-stroke-color: var(--color-gold);
}

/* 3. Fade-In ve Reveal Animasyonları */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

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

/* Text Mask Reveal (Kelimelerin Çıkması) */
@keyframes textReveal {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.reveal-wrapper {
    overflow: hidden;
    position: relative;
    display: block;
}

.reveal-text {
    display: inline-block;
    animation: textReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Kullanıma Hazır Animasyon Sınıfları */
.anim-fade-in {
    opacity: 0;
    animation: fadeIn 1s var(--transition-smooth) forwards;
}

.anim-fade-in-up {
    opacity: 0;
    animation: fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.anim-fade-in-down {
    opacity: 0;
    animation: fadeInDown 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Delay (Gecikme) Yardımcı Sınıfları */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* 4. Gold Shimmer (Metaller Üzerinde Hafif Parıltı) */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.shimmer-effect {
    background: linear-gradient(
        90deg,
        rgba(203, 176, 133, 0) 0%,
        rgba(203, 176, 133, 0.3) 50%,
        rgba(203, 176, 133, 0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 4s infinite linear;
}

/* =========================================================================
 * GRID VE YERLEŞİM (GRIDS & STRUCTURAL SPACES)
 * =========================================================================
 */
.grid-luxury {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--spacing-md);
}

.col-span-12 { grid-column: span 12; }
.col-span-8 { grid-column: span 8; }
.col-span-6 { grid-column: span 6; }
.col-span-4 { grid-column: span 4; }
.col-span-3 { grid-column: span 3; }

/* Büyük ekran asimetrik İtalyan düzenleri */
@media (min-width: 992px) {
    .col-lg-span-8 { grid-column: span 8; }
    .col-lg-span-6 { grid-column: span 6; }
    .col-lg-span-4 { grid-column: span 4; }
    .col-lg-span-3 { grid-column: span 3; }
    
    /* Asimetrik Offset Boşlukları */
    .offset-lg-1 { grid-column-start: 2; }
    .offset-lg-2 { grid-column-start: 3; }
    .offset-lg-3 { grid-column-start: 4; }
}

@media (max-width: 991px) {
    .grid-luxury {
        grid-template-columns: repeat(1, 1fr);
        gap: var(--spacing-sm);
    }
    .col-span-12, .col-span-8, .col-span-6, .col-span-4, .col-span-3,
    .col-lg-span-8, .col-lg-span-6, .col-lg-span-4, .col-lg-span-3 {
        grid-column: span 1 / auto;
    }
}

/* Lüks Mutfak/Oda Banyo Section Boşlukları */
.section-space-sm { padding: var(--spacing-md) 0; }
.section-space-md { padding: var(--spacing-lg) 0; }
.section-space-lg { padding: var(--spacing-xl) 0; }
.section-space-xl { padding: var(--spacing-xxl) 0; } /* En asil ve ferah Giorgetti boşluğu */

/* Container Yapısı */
.container-luxury {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    box-sizing: border-box;
}

/* =========================================================================
 * BORDER & LINE ART (DEKORATİF ÇİZGİ DETAYLARI)
 * =========================================================================
 * İtalyan minimalist mimarisinin vazgeçilmezi olan aşırı ince mimari çizgiler.
 */
.luxury-line-h {
    width: 100%;
    height: 1px;
    background-color: var(--color-border-light);
    margin: var(--spacing-md) 0;
}

.theme-dark .luxury-line-h,
.dark-mode .luxury-line-h {
    background-color: var(--color-border-dark);
}

.luxury-line-h-gold {
    background-color: var(--color-border-gold);
}

.luxury-line-v {
    width: 1px;
    height: 100%;
    background-color: var(--color-border-light);
    display: inline-block;
}

.theme-dark .luxury-line-v,
.dark-mode .luxury-line-v {
    background-color: var(--color-border-dark);
}

/* =========================================================================
   ULTRA LUXURY DYNAMIC EFFECTS (Aşama 7)
   ========================================================================= */

/* 3D Tilt Kart Yapısı */
.tilt-card {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.tilt-card-inner {
    transform: translateZ(30px); /* 3D derinlik öne çıkışı */
}

/* Pulsating Hotspot (Moodboard Altın Dalga Efekti) */
@keyframes pulseWave {
    0% {
        box-shadow: 0 0 0 0 rgba(203, 176, 133, 0.7), 0 0 0 0 rgba(203, 176, 133, 0.4);
    }
    100% {
        box-shadow: 0 0 0 15px rgba(203, 176, 133, 0), 0 0 0 30px rgba(203, 176, 133, 0);
    }
}

.pulsating-hotspot {
    animation: pulseWave 2s infinite cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pulsating-hotspot:hover {
    transform: scale(1.2);
    background-color: var(--color-gold-light) !important;
    color: var(--color-bg-dark) !important;
}

/* Gold Shimmer Kenarlıklar (Metallic Border Shimmer) */
@keyframes borderShimmer {
    0% {
        border-color: hsla(var(--hsl-gold), 0.3);
    }
    50% {
        border-color: hsla(var(--hsl-gold), 1);
        box-shadow: 0 0 10px rgba(203, 176, 133, 0.3);
    }
    100% {
        border-color: hsla(var(--hsl-gold), 0.3);
    }
}

.border-shimmer-active {
    animation: borderShimmer 4s infinite ease-in-out;
}

/* Gold Text Shimmer (Asil Altın Metin Parıltısı) */
.text-gold-shimmer {
    background: linear-gradient(to right, #9c8056 0%, #cbb085 25%, #ebe2d3 50%, #cbb085 75%, #9c8056 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: textShimmer 6s linear infinite;
    display: inline-block;
}

@keyframes textShimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Mouse-Tracking Glow Hover (Fareyi Takip Eden Altın Işıma Katmanı) */
.glow-on-hover {
    position: relative;
    overflow: hidden;
}

.glow-on-hover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 180px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(203, 176, 133, 0.15) 0%, rgba(203, 176, 133, 0.03) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 10;
}

.glow-on-hover:hover::after {
    opacity: 1;
}

/* =========================================================================
   GIORGETTI MEDA INSPIRED VERTICAL SIDEBAR NAVIGATION
   ========================================================================= */

.sidebar-nav-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    max-width: 480px;
    z-index: 100;
    box-shadow: 20px 0 80px rgba(0, 0, 0, 0.3);
    border-right: 1px solid var(--color-border-gold);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-nav-container::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: rgba(19, 19, 20, 0.65);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Yan Menü Bağlantıları için Rafine Hover Animasyonları */
.sidebar-link {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 2.5vw, 1.875rem);
    font-weight: 300;
    letter-spacing: var(--letter-spacing-wide);
    transition: var(--transition-smooth);
    position: relative;
    padding-left: 0;
    display: inline-block;
}

.sidebar-link::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%) scaleX(0);
    width: 12px;
    height: 1px;
    background-color: var(--color-gold);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-link:hover {
    color: var(--color-gold);
    transform: translateX(20px);
}

.sidebar-link:hover::before {
    transform: translateY(-50%) scaleX(1);
}

/* İnce Altın/Şampanya Çizgileri ve Asimetrik Izgara Dokunuşları */
.sidebar-deco-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, hsla(var(--hsl-gold), 0.3), transparent);
    margin: 1.5rem 0;
}

/* Cam-Metal Parıltısı Efekti */
.glass-metal-shimmer {
    position: relative;
    overflow: hidden;
}

.glass-metal-shimmer::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.15) 30%,
        rgba(203, 176, 133, 0.25) 50%,
        rgba(255, 255, 255, 0.15) 70%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.glass-metal-shimmer:hover::after {
    transform: translate(300%, 300%) rotate(30deg);
}

/* Buton ve Resim Mikro-Animasyonları */
.hover-premium-lift {
    transition: var(--transition-smooth);
}
.hover-premium-lift:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-luxury);
}

.image-reveal-hover {
    overflow: hidden;
}
.image-reveal-hover img {
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.image-reveal-hover:hover img {
    transform: scale(1.06);
}

/* =========================================================================
   ULTRA-LUXURY CUSTOM CURSOR SYSTEM - DEAKTİF EDİLDİ
   ========================================================================= */
/* Ekran genelinde varsayılan imleci gizlemek isteyenler için */
.custom-cursor-enabled, 
.custom-cursor-enabled * {
    cursor: auto !important;
}

/* İmleç Noktası (Merkez) */
.luxury-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 4px;
    height: 4px;
    background-color: var(--color-gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

/* İmleç Dış Halkası (Aşırı İnce ve Zarif) */
.luxury-cursor-circle {
    position: fixed;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(203, 176, 133, 0.25);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    background-color: transparent !important; /* Kesinlikle kaba dolgu yok */
    backdrop-filter: none !important; /* Arka planı bulandırmayan saf lüks */
    -webkit-backdrop-filter: none !important;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                height 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.1s ease;
}

/* Altın Parıltılı İmleç Etkisi - Tamamen Minimalize Edildi */
.luxury-cursor-glow {
    display: none !important; /* Göz yormaması için tamamen deaktif edildi */
}

/* İmleç Hover/Aktif Durumları */
.custom-cursor-enabled a:hover,
.custom-cursor-enabled button:hover {
    cursor: none !important;
}

.luxury-cursor-circle.hovering {
    width: 64px;
    height: 64px;
    border-color: var(--color-gold);
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.luxury-cursor-dot.hovering {
    transform: translate(-50%, -50%) scale(0); /* Hover olunca nokta yumuşakça kaybolur */
}

/* İmleç İçindeki Lüks Yazı */
.luxury-cursor-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-sans);
    font-size: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-widest);
    color: var(--color-gold);
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.luxury-cursor-circle.hovering .luxury-cursor-text {
    opacity: 1;
}

/* =========================================================================
   SCROLL-REVEAL, ENTRY EFFECT & CHIAROSCURO LIGHTING
   ========================================================================= */

/* Chiaroscuro Loader Bar (Işık ve Gölgeli Lüks Yükleme Çubuğu) */
.chiaroscuro-loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-bg-dark-alt);
    z-index: 99999;
    overflow: hidden;
}

.chiaroscuro-loader-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, 
        rgba(19, 19, 20, 1) 0%, 
        rgba(203, 176, 133, 0.6) 30%, 
        rgba(235, 226, 211, 1) 50%, 
        rgba(203, 176, 133, 0.6) 70%, 
        rgba(19, 19, 20, 1) 100%
    );
    background-size: 200% 100%;
    box-shadow: 0 0 15px rgba(235, 226, 211, 0.8), 0 0 5px rgba(203, 176, 133, 0.4);
    animation: loaderShimmer 2.5s infinite linear;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Giriş Efekti (Page Entry Reveal) */
.luxury-entry-reveal {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(30px);
    transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), 
                filter 1.5s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.luxury-entry-reveal.revealed {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* Asimetrik Kartların Yumuşak Chiaroscuro Işığı ve Parıltısı */
.asymmetric-glow-card {
    position: relative;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--color-border-light);
}

.theme-dark .asymmetric-glow-card,
.dark-mode .asymmetric-glow-card {
    border: 1px solid var(--color-border-dark);
}

.asymmetric-glow-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, 
        rgba(203, 176, 133, 0.25) 0%, 
        rgba(255, 255, 255, 0) 40%, 
        rgba(0, 0, 0, 0) 60%, 
        rgba(203, 176, 133, 0.1) 100%
    );
    z-index: -1;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.asymmetric-glow-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 30px 70px rgba(19, 19, 20, 0.08), 
                0 0 30px rgba(203, 176, 133, 0.15);
}

.theme-dark .asymmetric-glow-card:hover,
.dark-mode .asymmetric-glow-card:hover {
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4), 
                0 0 30px rgba(203, 176, 133, 0.2);
}

.asymmetric-glow-card:hover::before {
    opacity: 1;
}

/* =========================================================================
   LUXURY LIGHTBOX OVERLAY SYSTEM
   ========================================================================= */
.luxury-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background-color: rgba(19, 19, 20, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.luxury-lightbox.active {
    opacity: 1;
    pointer-events: all;
}

/* Lightbox Görsel Kapsayıcı (İnce Altın Çerçeveli) */
.luxury-lightbox-wrapper {
    position: relative;
    max-width: 85%;
    max-height: 75vh;
    border: 1px solid var(--color-border-gold);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), 0 0 50px rgba(203, 176, 133, 0.15);
    background-color: var(--color-bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.luxury-lightbox.active .luxury-lightbox-wrapper {
    transform: scale(1);
}

.luxury-lightbox-img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    display: block;
}

/* Kapat Butonu ve Yön Tuşları */
.luxury-lightbox-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: none;
    border: none;
    color: var(--color-text-on-dark-muted);
    font-size: var(--font-size-2xl);
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: 200;
    transition: var(--transition-fast);
    z-index: 10002;
    padding: var(--spacing-xs);
}

.luxury-lightbox-close:hover {
    color: var(--color-gold);
    transform: rotate(90deg);
}

.luxury-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-on-dark-muted);
    font-size: var(--font-size-3xl);
    cursor: pointer;
    font-family: var(--font-serif);
    font-weight: 300;
    transition: var(--transition-fast);
    padding: var(--spacing-sm);
    z-index: 10001;
}

.luxury-lightbox-nav:hover {
    color: var(--color-gold);
}

.luxury-lightbox-prev {
    left: var(--spacing-md);
}

.luxury-lightbox-next {
    right: var(--spacing-md);
}

/* Alt Bilgi (Zanaat / Ürün Açıklaması Fontları) */
.luxury-lightbox-caption {
    width: 85%;
    margin-top: var(--spacing-md);
    text-align: center;
    color: var(--color-text-on-dark);
    font-family: var(--font-serif);
    font-size: var(--font-size-md);
    font-style: italic;
    font-weight: 300;
    letter-spacing: var(--letter-spacing-wide);
    line-height: var(--line-height-heading);
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.luxury-lightbox.active .luxury-lightbox-caption {
    opacity: 1;
    transform: translateY(0);
}

.luxury-lightbox-caption span {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-widest);
    color: var(--color-gold);
    margin-bottom: var(--spacing-xs);
}

/* =========================================================================
   INTERACTIVE ARCHITECTURAL SHOWCASE (Aşama 2 - İnteraktif Projeler Vitrini)
   ========================================================================= */

/* Hotspot (Etkileşim Noktası) Ana Yapısı */
.luxury-hotspot {
    position: absolute;
    width: 18px;
    height: 18px;
    background-color: var(--color-gold);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    border: none;
    outline: none;
}

/* Nabız Dalgalanma Animasyonu */
.luxury-hotspot::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--color-gold);
    opacity: 0.6;
    animation: hotspotPulseWave 2.5s infinite cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

/* İkincil Daha Büyük Nabız Halkası */
.luxury-hotspot::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid var(--color-gold-light);
    opacity: 0.4;
    animation: hotspotPulseRing 2.5s infinite cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
    pointer-events: none;
}

/* Çekirdek Merkez Noktası */
.luxury-hotspot-inner {
    width: 6px;
    height: 6px;
    background-color: var(--color-bg-dark);
    border-radius: 50%;
    transition: var(--transition-fast);
}

/* Hover Aurası Efekti */
.luxury-hotspot:hover {
    transform: scale(1.25);
    background-color: var(--color-gold-light);
    box-shadow: 0 0 20px rgba(203, 176, 133, 0.6);
}

.luxury-hotspot:hover .luxury-hotspot-inner {
    background-color: var(--color-gold-dark);
    transform: scale(1.2);
}

/* Animasyon Tanımları */
@keyframes hotspotPulseWave {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(3.5);
        opacity: 0;
    }
}

@keyframes hotspotPulseRing {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }
    100% {
        transform: scale(4.5);
        opacity: 0;
    }
}

/* Minimalist, İnce Altın Çerçeveli Popover/Modal Stilleri */
.hotspot-popover {
    position: absolute;
    bottom: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%) translateY(10px) scale(0.95);
    width: 260px;
    background: var(--glass-bg-dark);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--color-border-gold);
    padding: 1.25rem;
    box-shadow: var(--shadow-luxury), 0 15px 40px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-smooth);
    z-index: 20;
}

/* Popover Aşağı Yönlü Ok Göstergesi */
.hotspot-popover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: var(--color-gold) transparent transparent transparent;
}

.hotspot-popover.active {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* Popover İçi Lüks Detayları */
.hotspot-popover-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border: 1px solid var(--color-border-dark);
    margin-bottom: 0.875rem;
}

.hotspot-popover-title {
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-on-dark);
    margin: 0 0 0.25rem 0;
}

.hotspot-popover-category {
    font-family: var(--font-serif);
    font-size: var(--font-size-xs);
    font-style: italic;
    color: var(--color-gold);
    margin-bottom: 0.75rem;
}

.hotspot-popover-link {
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-widest);
    color: var(--color-gold-light);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition-fast);
}

.hotspot-popover-link:hover {
    color: var(--color-gold);
    letter-spacing: 0.2em;
}


/* =========================================================================
   ADVANCED MATERIAL FINISHES LAB (Aşama 2 - Gelişmiş Malzeme Laboratuvarı)
   ========================================================================= */

/* Dairesel Lüks Malzeme Dokusu Çerçevesi */
.material-texture-ring {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: 1px solid var(--color-border-dark-strong);
    padding: 3px;
    cursor: pointer;
    position: relative;
    background-color: transparent;
    transition: var(--transition-smooth);
    display: inline-block;
}

.material-texture-ring::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid transparent;
    transition: var(--transition-smooth);
}

/* Hover ve Aktif Durum Tasarımı */
.material-texture-ring:hover {
    transform: scale(1.06);
    border-color: var(--color-gold);
}

.material-texture-ring:hover::before {
    border-color: hsla(var(--hsl-gold), 0.3);
}

.material-texture-ring.active {
    transform: scale(1.08);
    border-color: var(--color-gold);
}

.material-texture-ring.active::before {
    border-color: var(--color-gold);
    animation: rotateMaterialRing 12s linear infinite;
    border-style: dashed;
}

/* Doku Görseli Stilleri */
.material-texture-ring-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
}

.material-texture-ring:hover .material-texture-ring-img {
    transform: rotate(20deg) scale(1.05);
}

@keyframes rotateMaterialRing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Editoryal Malzeme Hikaye Kartı */
.material-editorial-card {
    background-color: var(--color-bg-dark-alt);
    border-left: 2px solid var(--color-gold);
    padding: 2rem var(--container-padding);
    margin-top: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-medium);
}

.theme-light .material-editorial-card {
    background-color: var(--color-bg-light-alt);
    border-left-color: var(--color-gold-dark);
}

/* Tipografi Kombinasyonları */
.material-story-title {
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-widest);
    color: var(--color-gold);
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.material-story-title::after {
    content: '';
    height: 1px;
    width: 40px;
    background-color: var(--color-border-gold);
    display: inline-block;
}

.material-story-subtitle {
    font-family: var(--font-serif);
    font-size: var(--font-size-xl);
    font-weight: 300;
    line-height: var(--line-height-heading);
    margin: 0 0 1.25rem 0;
    color: var(--color-text-on-dark);
}

.theme-light .material-story-subtitle {
    color: var(--color-text-on-light);
}

.material-story-desc {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
    color: var(--color-text-on-dark-muted);
    margin: 0;
}

.theme-light .material-story-desc {
    color: var(--color-text-on-light-muted);
}


/* =========================================================================
   VIE LUXURY CONCIERGE WIDGET (Aşama 2 - Lüks Konsiyerj Asistanı)
   ========================================================================= */

/* Sağ Alt Köşe Butonu (Trigger) */
.concierge-trigger {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-bg-dark);
    border: 1px solid var(--color-border-gold);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(203, 176, 133, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    transition: var(--transition-smooth);
}

.concierge-trigger:hover {
    transform: translateY(-5px);
    border-color: var(--color-gold-light);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(203, 176, 133, 0.25);
}

/* İkon & Şık Altın Monogram */
.concierge-trigger-icon {
    font-family: var(--font-serif);
    font-size: var(--font-size-lg);
    font-weight: 300;
    color: var(--color-gold);
    letter-spacing: normal;
    transition: var(--transition-fast);
}

.concierge-trigger:hover .concierge-trigger-icon {
    color: var(--color-gold-light);
    text-shadow: 0 0 8px rgba(235, 226, 211, 0.5);
}

/* Konsiyerj Sohbet Kartı */
.concierge-card {
    position: fixed;
    bottom: 6.5rem;
    right: 2rem;
    width: 370px;
    height: 530px;
    background-color: var(--color-bg-dark);
    border: 1px solid var(--color-border-gold);
    box-shadow: var(--shadow-luxury), 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(30px) scale(0.96);
    pointer-events: none;
    transition: var(--transition-smooth);
    z-index: 998;
    overflow: hidden;
}

.concierge-card.active {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0) scale(1);
}

/* Sohbet Başlık Kısmı */
.concierge-header {
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--color-bg-dark-alt) 0%, rgba(19, 19, 20, 1) 100%);
    border-bottom: 1px solid var(--color-border-gold);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.concierge-header-title {
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-on-dark);
    margin: 0;
}

.concierge-header-subtitle {
    font-family: var(--font-serif);
    font-size: var(--font-size-xs);
    font-style: italic;
    color: var(--color-gold);
}

.concierge-close {
    background: none;
    border: none;
    color: var(--color-text-on-dark-muted);
    font-size: var(--font-size-lg);
    cursor: pointer;
    transition: var(--transition-fast);
}

.concierge-close:hover {
    color: var(--color-gold);
}

/* Sohbet Gövdesi */
.concierge-body {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    background-color: rgba(19, 19, 20, 0.98);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Ultra İnce Kaydırma Çubuğu */
.concierge-body::-webkit-scrollbar {
    width: 3px;
}
.concierge-body::-webkit-scrollbar-track {
    background: transparent;
}
.concierge-body::-webkit-scrollbar-thumb {
    background: hsla(var(--hsl-gold), 0.2);
}

/* Asistan (Bot) Mesaj Balonu */
.concierge-msg-bot {
    align-self: flex-start;
    background-color: var(--color-bg-dark-alt);
    border: 1px solid var(--color-border-dark-strong);
    padding: 1rem;
    max-width: 85%;
    color: var(--color-text-on-dark);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    position: relative;
    border-radius: 0 8px 8px 8px;
}

/* Kullanıcı Mesaj Balonu */
.concierge-msg-user {
    align-self: flex-end;
    background-color: var(--color-gold-dark);
    color: var(--color-bg-dark);
    padding: 1rem;
    max-width: 85%;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    border-radius: 8px 0 8px 8px;
}

/* Lüks Çoktan Seçmeli Butonlar (Choices) */
.concierge-choices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    width: 100%;
}

.concierge-choice-btn {
    background: transparent;
    border: 1px solid var(--color-border-gold);
    color: var(--color-gold);
    padding: 0.625rem 1.25rem;
    font-size: var(--font-size-xs);
    font-family: var(--font-sans);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    cursor: pointer;
    text-align: left;
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.concierge-choice-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background-color: var(--color-gold);
    transform: scaleY(0);
    transition: var(--transition-fast);
}

.concierge-choice-btn:hover {
    background-color: var(--color-bg-dark-alt);
    color: var(--color-gold-light);
    border-color: var(--color-gold-light);
    padding-left: 1.5rem;
}

.concierge-choice-btn:hover::before {
    transform: scaleY(1);
}

/* Sohbet Alt Alanı (Giriş) */
.concierge-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border-dark);
    background-color: var(--color-bg-dark-alt);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.concierge-input {
    flex: 1;
    background-color: rgba(19, 19, 20, 0.6);
    border: 1px solid var(--color-border-dark-strong);
    color: var(--color-text-on-dark);
    padding: 0.75rem 1rem;
    font-size: var(--font-size-sm);
    font-family: var(--font-sans);
    transition: var(--transition-fast);
}

.concierge-input:focus {
    border-color: var(--color-gold);
    outline: none;
    background-color: rgba(19, 19, 20, 0.8);
}

.concierge-send-btn {
    background: transparent;
    border: none;
    color: var(--color-gold);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    padding: 0.5rem;
    transition: var(--transition-fast);
}

.concierge-send-btn:hover {
    color: var(--color-gold-light);
    transform: translateX(2px);
}