/* ============================================================
   implantdentaireturquie.net — premium médical, mobile-first
   Tipografi: Playfair Display + Inter (self-host, variable)
   Motion: subtle tier — 150-400ms, küçük offsetler, reduced-motion destekli
   ============================================================ */

/* Cormorant Garamond — Claude Garamond (16e s.) mirası: Fransız haute-couture serif.
   DİKKAT: latin + latin-ext İKİSİ DE şart — Türkçe ğ/ı/ş/İ latin-ext'tedir;
   eksik olursa "Kasapoğlu" gibi kelimelerde fallback font'a düşer (font patlaması). */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/fonts/Cormorant-latinext.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/fonts/Cormorant-var.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/fonts/Cormorant-italic-latinext.woff2') format('woff2');
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/fonts/Cormorant-italic.woff2') format('woff2');
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat — Stitch tasarım sisteminin başlık fontu (latin + latin-ext ŞART) */
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-latinext.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-latinext.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Palet — Stitch "Aesthetic Surgery Clinic Showcase": koyu lüks + bakır (#BA8D75) */
    /* Metin hiyerarşisi — 4 seviye, hepsi #131313 zeminde WCAG AA geçer.
       Daha soluk 5. bir seviye AA'yı (4.5:1) kıracağı için bilinçli olarak yok. */
    --c-ink-strong: #ffffff;     /* 1. seviye — görsel/koyu panel üstü başlık */
    --c-ink: #e5e2e1;            /* 2. seviye — başlık, öne çıkan metin */
    --c-ink-soft: #a8a29e;       /* 3. seviye — gövde metni (7.4:1) */
    --c-ink-muted: #8f8884;      /* 4. seviye — künye, altyazı, breadcrumb (5.3:1) */
    --c-primary: #eebca2;        /* birincil vurgu: açık bakır-şeftali */
    --c-primary-2: #ba8d75;
    --c-accent: #ba8d75;         /* bakır-altın */
    --c-accent-2: #d5c3bb;
    --c-accent-dark: #eebca2;    /* koyu zeminde "koyu vurgu" = daha açık ton */
    --c-bg: #131313;             /* ana zemin */
    --c-cream: #1e1e1e;          /* kart yüzeyi (surface-card) */
    --c-cream-2: #181818;
    /* AÇIK yüzey — koyu temada bilinçli kontrast bandı (.light-band).
       DİKKAT: --c-cream adına rağmen koyudur; gerçek açık zemin bunlardır. */
    --c-surface-light: #f7f3ee;
    --c-ink-on-light: #2a2724;
    --c-ink-on-light-soft: #5c554e;
    --c-line: #3a3532;
    --c-whatsapp: #25d366;
    --font-serif: 'Montserrat', 'Segoe UI', Arial, sans-serif; /* başlık ailesi (Stitch: Montserrat) */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* power4.out — güçlü yavaşlama; hareketin "pahalı" hissi büyük ölçüde bu
       eğriden gelir. Önceki easeOutQuad (.25,.46,.45,.94) karaktersizdi. */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-out-2: cubic-bezier(.22, .61, .36, 1);
    --container: 1160px;
    --radius: 8px;
    --radius-sm: 4px;
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, .35);
    --shadow: 0 18px 48px rgba(0, 0, 0, .5);
    --header-h: 78px;
}

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

html { scroll-behavior: smooth; }

/* Kapalı mobil menü (translateX ile ekran dışında) yatay scroll oluşturmasın.
   DİKKAT: overflow-x: hidden position:sticky'yi bozar (scroll container yaratır);
   clip ise kırpar ama scroll container YARATMAZ — sticky header/hero buna muhtaç. */
html, body { overflow-x: clip; }

body {
    background-image:
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
    background-size: 64px 64px;
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--c-ink);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
}

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

/* Paragraf sonlarında tek kelimelik yetim satırı engeller (progressive enhancement) */
p { text-wrap: pretty; }

.container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1.1rem, 4vw, 2rem);
}

/* Montserrat başlıklar (Stitch): sıkı, modern, hafif negatif tracking */
h1, h2, h3 {
    font-family: var(--font-serif);
    color: var(--c-ink);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -.015em;
    /* Başlıklarda dengeli satır kırılımı — tek kelimelik yetim satır bırakmaz.
       Desteklemeyen tarayıcıda sessizce yok sayılır. */
    text-wrap: balance;
}

/* H1/H2 oranı 1.5x idi (2.7/1.8) — hiyerarşi düzleşiyordu; 1.78x'e çıkarıldı.
   Büyük punto daha sıkı leading/tracking ister (ana sayfa H1'i kendi
   .home-hero-content h1 kuralıyla zaten 1.06'ya çekiliyor, o değişmedi). */
/* clamp'lerin ALT sınırı da orana göre seçildi: mobilde ikisi de tabana
   düşünce oran 1.56'ya geriliyordu. Akışkan bantta oran = 4.6/2.6 ≈ 1.77. */
h1 { font-size: clamp(2.3rem, 4.6vw, 3.3rem); line-height: 1.08; letter-spacing: -.025em; }
h2 { font-size: clamp(1.3rem, 2.6vw, 1.85rem); }
h3 { font-size: clamp(1.05rem, 2vw, 1.25rem); }

/* Başlık içi vurgu: bakır renk (Stitch "Excellence" vurgusu) */
h1 em, h2 em { font-style: normal; font-weight: 700; color: var(--c-primary); }

:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: 3px;
}

a { color: var(--c-primary-2); text-decoration-color: var(--c-accent-2); text-underline-offset: 3px; }
a:hover { color: var(--c-accent-dark); }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--c-primary);
    color: #fff;
    padding: .6rem 1rem;
    z-index: 200;
}
.skip-link:focus { left: 0; }

/* ============ Header ============ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(19, 19, 19, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s, box-shadow .25s;
}

.site-header.scrolled {
    border-bottom-color: var(--c-line);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; flex-shrink: 0; }

.brand-logo { height: 48px; width: auto; }

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }

.brand-name {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: var(--c-primary);
    font-weight: 700;
    letter-spacing: -.01em;
}

.brand-name em { color: var(--c-primary); font-style: normal; }

.brand-tagline {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--c-ink-soft);
    margin-top: .15rem;
}

/* --- Nav --- */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: 0;
    padding: .6rem;
    cursor: pointer;
    z-index: 120;
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--c-primary);
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-list { list-style: none; display: flex; gap: .3rem; align-items: center; }

/* Butik navigasyon: küçük uppercase, geniş tracking */
.nav-link {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem .85rem;
    font-size: .78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--c-ink);
    text-decoration: none;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.nav-link:hover { background: rgba(255,255,255,.06); color: var(--c-primary); }

.chev { transition: transform .2s; opacity: .55; }
.has-dropdown:hover .chev, .has-dropdown:focus-within .chev { transform: rotate(180deg); }

.has-dropdown { position: relative; }

.dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 270px;
    background: #1e1e1e;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .6rem;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.dropdown::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 10px;
}

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

.dropdown-wide { min-width: 560px; display: grid; grid-template-columns: 1fr 1fr; }

.dropdown a {
    display: block;
    padding: .55rem .85rem;
    font-size: .92rem;
    color: var(--c-ink);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background .13s, color .13s, padding-left .13s;
}

.dropdown a:hover { background: rgba(255,255,255,.06); color: var(--c-primary); padding-left: 1.05rem; }

.nav-cta-item { margin-left: .6rem; }

/* ============ Butonlar — couture: uppercase, geniş tracking, keskin köşe ============ */
.btn {
    display: inline-block;
    padding: .95rem 2rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s, background .15s, color .15s, border-color .15s;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 61, 76, .18); }

.btn-primary { background: var(--c-primary); color: #131313; }
.btn-primary:hover { background: var(--c-primary-2); color: #131313; }

.btn-gold {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent) 100%);
    color: #1c1208;
}
.btn-gold:hover { color: #1c1208; box-shadow: 0 10px 26px rgba(238, 188, 162, .35); }

.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .08); }

.btn-nav {
    padding: .6rem 1.3rem;
    background: var(--c-primary);
    color: #131313;
    font-size: .74rem;
}
.btn-nav:hover { background: var(--c-accent); color: #131313; transform: none; box-shadow: none; }

/* ============ Hero (ana sayfa) — Stitch düzeni ============ */
.home-hero {
    position: relative;
    min-height: min(88vh, 760px);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-block: clamp(3rem, 8vw, 5rem);
    background: linear-gradient(155deg, #1a1a1a 0%, #131313 45%, #000000 100%);
}

.home-hero-bg { position: absolute; inset: 0; z-index: 0; }

.home-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Müşteri notu: sağdaki dental ünit/radyografi ekranı seçilebilsin ama
       parlamasın — metnin okunurluğunu koruyan orta yol. */
    opacity: .52;
}

.home-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Sağ gradyan yumuşatıldı: metin kolonunun arkası koyu kalır, sağdaki
       klinik görseli görünür olur. */
    background:
        linear-gradient(to top, var(--c-bg) 0%, rgba(19, 19, 19, .82) 38%, transparent 88%),
        linear-gradient(to right, var(--c-bg) 0%, rgba(19, 19, 19, .58) 42%, rgba(19, 19, 19, .12) 78%, transparent 100%);
}

.home-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    /* Metin kolonu genişletildi: mockup'ta iki hero butonu YAN YANA duruyor,
       sentence case metinlerle 1.15fr'de satır kırılıyordu. */
    grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr);
    gap: clamp(2rem, 6vw, 4rem);
    align-items: center;
    width: 100%;
}

.home-hero-content { max-width: 640px; }

.home-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    /* Rozet metni ayardan gelir ve uzayabilir — dar ekranda taşmak yerine
       sarmalı (bkz. TrustBadgeText). */
    max-width: 100%;
    padding: .5rem 1.1rem;
    margin-bottom: 1.4rem;
    border: 1px solid rgba(238, 188, 162, .3);
    border-radius: 999px;
    background: rgba(30, 30, 30, .5);
    backdrop-filter: blur(6px);
    /* Mockup: sentence case, tek satır. Uppercase yalnız hero bloğunda
       bırakıldı — nav ve diğer sayfalardaki butonlar marka imzası gereği
       UPPERCASE kalır. */
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.45;
    text-transform: none;
    text-wrap: balance;
    color: var(--c-ink);
}

.home-badge svg { color: var(--c-primary); flex-shrink: 0; }

/* Hero butonları da sentence case (global .btn kuralı değişmez).
   Padding daraltıldı ki mockup'taki gibi ikisi masaüstünde YAN YANA sığsın —
   sentence case metinler uppercase'ten uzun. */
.home-hero-actions .btn {
    text-transform: none;
    letter-spacing: .01em;
    font-size: .93rem;
    font-weight: 500;
    padding: .85rem 1.35rem;
}

/* H1 altındaki küçük destek cümlesi (SiteSettings.HomeHeroSupportText).
   Mockup: üstünde kısa bakır ayraç çizgisi. */
.home-hero-support {
    max-width: 56ch;
    margin: 0 0 2rem;
    padding-top: 1.1rem;
    color: rgba(255, 255, 255, .62);
    font-size: .93rem;
    line-height: 1.65;
    position: relative;
}

.home-hero-support::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 1px;
    background: var(--c-accent);
}

/* Ana sayfa H1: müşteri mockup'ındaki zarif serif (Cormorant Garamond).
   YALNIZ ana sayfada — iç sayfalar Montserrat kalır, global h1 kuralı değişmez.
   Cormorant ince kaçtığı için punto sans'a göre yukarı çekilir (CLAUDE.md notu). */
.home-hero-content h1 {
    color: var(--c-ink-strong);
    margin-bottom: 1.3rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: clamp(2.7rem, 5.6vw, 4.3rem);
    line-height: 1.06;
    letter-spacing: 0;
}

/* Kinetic type: H1 kelimeleri maskeden yukarı kayarak açılır.
   Kelimelere bölme SUNUCUDA yapılır (Detail.cshtml) — metin HTML'de hazırdır,
   animasyon salt CSS'tir, JS'e hiç bağımlı değildir. */
.home-hero-content h1.kinetic .kw {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    /* Maskeyi alt tarafa taşır: "p/g" gibi alt uzantılar kırpılmasın. */
    padding-bottom: .14em;
    margin-bottom: -.14em;
}

.home-hero-content h1.kinetic .kw > span {
    display: inline-block;
    animation: kwUp .85s var(--ease-out) both;
    animation-delay: calc(var(--kw-i, 0) * 70ms + 120ms);
}

@keyframes kwUp {
    from { transform: translateY(105%); }
    to { transform: none; }
}

/* Mockup: sol bakır çizgi yok, metin bakır/tan tonunda */
.home-hero-lead {
    max-width: 52ch;
    margin: 0 0 1.5rem;
    padding: 0;
    border-left: 0;
    color: var(--c-accent-2);
    font-size: clamp(1.05rem, 1.6vw, 1.22rem);
    line-height: 1.55;
}

/* Lead içinde "Dr Kasapoğlu" vurgusu (DB'de <em> ile sarmalanır) */
.home-hero-lead em { font-style: normal; color: var(--c-primary); font-weight: 600; }

.home-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.home-hero-actions .btn { display: inline-flex; align-items: center; gap: .55rem; }

/* Sağ görsel: dönen kesikli halka + cam merkez (denge unsuru, Stitch) */
.home-hero-visual {
    position: relative;
    width: min(340px, 80%);
    aspect-ratio: 1;
    margin-inline: auto;
}

.ring-outer, .ring-dashed, .ring-glass {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.ring-outer { border: 1px solid rgba(238, 188, 162, .12); }

.ring-dashed {
    inset: 14px;
    border: 1px dashed rgba(238, 188, 162, .25);
    animation: ringSpin 60s linear infinite;
}

.ring-glass {
    inset: 44px;
    background: rgba(255, 255, 255, .03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
    display: grid;
    place-items: center;
}

.ring-glass svg { width: 42%; height: 42%; color: rgba(238, 188, 162, .4); }

@keyframes ringSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ring-dashed { animation: none; }
}

@media (max-width: 980px) {
    .home-hero { min-height: 0; padding-block: 2.5rem 3rem; }
    .home-hero-inner { grid-template-columns: minmax(0, 1fr); }
    .home-hero-visual { display: none; }
    .home-hero-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
    .home-badge { letter-spacing: .06em; font-size: .68rem; border-radius: 14px; }
    .home-hero-support { margin-top: -.5rem; font-size: .88rem; }
}

/* ============ Açık krem bant (.light-band) ============
   Koyu temada bilinçli kontrast bandı — müşteri mockup'ındaki açık bölüm.
   İçerik DB'de (FullBleedHtml bölümü); burada yalnız yüzey/renk kalibrasyonu
   var. Bakır vurgu rengi açık zeminde okunmadığı için koyulaştırılmış
   varyantı kullanılır. */
.light-band {
    background: var(--c-surface-light);
    color: var(--c-ink-on-light);
    padding-block: clamp(2.6rem, 6vw, 4.5rem);
    border-block: 1px solid rgba(0, 0, 0, .06);
}

.light-band h2 {
    color: var(--c-ink-on-light);
    max-width: 22ch;
    margin-bottom: 1.1rem;
    font-size: clamp(1.5rem, 3.2vw, 2.15rem);
    line-height: 1.2;
}

.light-band h2 em { font-style: normal; color: #9a6a4d; }

.light-band p {
    color: var(--c-ink-on-light-soft);
    max-width: 68ch;
    margin-bottom: .9rem;
    line-height: 1.75;
}

.light-band p:last-child { margin-bottom: 0; }

.light-band a { color: #8f5f42; text-decoration-color: rgba(143, 95, 66, .45); }
.light-band a:hover { color: #6f4830; }

.light-band ul { margin: 0 0 1rem 1.3rem; color: var(--c-ink-on-light-soft); }
.light-band li { margin-bottom: .45rem; }

/* ============ Hero altı 3 blok (DB: FullBleedHtml bölümü, .hero-usp) ============
   Hero'nun hemen ardından, container DIŞINDA render edilir. İçerik DB'de tutulur
   (.spotlight ile aynı desen) — bu dosyada yalnız düzen/stil vardır.
   DİKKAT: sınıf adı `.hero-usp`, `.hero-points` DEĞİL — ölü scrollytelling
   hero'sunun `.hero-points` (ul) kuralı mobilde `display:none` yapıyor ve
   isim çakışması bu bölümü mobilde görünmez kılıyordu. */
.hero-usp {
    background: var(--c-bg);
    border-block: 1px solid var(--c-line);
}

.hero-usp-inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.2rem, 3vw, 2.5rem);
    padding-block: clamp(1.6rem, 3.5vw, 2.4rem);
}

/* Mockup: sol çizgi yerine daire içinde ikon + başlık + alt metin */
.hero-usp-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon title" "icon text";
    align-items: center;
    column-gap: 1.1rem;
    row-gap: .25rem;
}

/* Mockup'ta belirgin büyük ikon (60px) — önceki 46px görsel olarak küçük
   kalıyordu, başlık metniyle orantısızdı. */
.hero-usp-icon {
    grid-area: icon;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid rgba(238, 188, 162, .35);
    display: grid;
    place-items: center;
    color: var(--c-accent);
    flex-shrink: 0;
}

.hero-usp-icon svg { width: 27px; height: 27px; }

.hero-usp-item h2,
.hero-usp-item h3,
.hero-usp-item strong {
    grid-area: title;
    align-self: end;
    font-family: var(--font-serif);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    letter-spacing: 0;
}

.hero-usp-item p {
    grid-area: text;
    align-self: start;
    margin: 0;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--c-ink-soft);
}

/* Mobil: mockup'taki gibi 3 kolon kompakt kart — ama alt açıklama gizlenir,
   böylece başlık okunur puntoda kalır (mockup'ta ~10px'e düşüyordu). */
@media (max-width: 860px) {
    .hero-usp-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .5rem;
        padding-block: 1.1rem;
    }

    .hero-usp-item {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "icon" "title";
        justify-items: center;
        text-align: center;
        row-gap: .5rem;
    }

    .hero-usp-icon { width: 52px; height: 52px; }
    .hero-usp-icon svg { width: 23px; height: 23px; }
    .hero-usp-item h2, .hero-usp-item h3, .hero-usp-item strong { font-size: .74rem; align-self: start; }
    .hero-usp-item p { display: none; }
}

/* ============ Hero (ana sayfa) — scrollytelling [ARTIK KULLANILMIYOR: implant3d.js
   ve aşağıdaki .hero*/.imp-* kuralları hiçbir sayfada render edilmiyor; dosyalar
   ileride yeniden kullanılabilir diye siliniyor değil, sadece devre dışı bırakıldı] ============ */
/* Dış sarmalayıcı yüksek; hero içeride yapışık kalır, --p (0→1) kaydırma
   ilerlemesidir ve implant parçalarının birleşmesini sürer (site.js yazar). */
.hero-scroll {
    position: relative;
    height: 200vh;
}

.hero {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    height: calc(100svh - var(--header-h));
    display: flex;
    align-items: center;
    background:
        radial-gradient(ellipse 900px 500px at 85% -10%, rgba(186, 141, 117, .25), transparent 60%),
        linear-gradient(155deg, #1a1a1a 0%, #131313 45%, #000000 100%);
    color: #fff;
    overflow: hidden;
}

.hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-block: 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.hero-content {
    max-width: 640px;
    /* Hafif parallax: içerik, sahneden daha yavaş yukarı süzülür */
    transform: translateY(calc(var(--p, 0) * -16px));
}

/* --- Fransa→İstanbul siluet bandı (parallax: içerikten yavaş kayar) --- */
.hero-skyline {
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(calc(-50% - var(--p, 0) * 60px)) translateY(calc(var(--p, 0) * 10px));
    width: min(1200px, 160vw);
    max-width: none;
    opacity: .17;
    pointer-events: none;
}

/* --- Kaydırma ipucu --- */
.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 1.4rem;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    color: var(--c-accent-2);
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: max(0, calc(1 - var(--p, 0) * 3));
    pointer-events: none;
    z-index: 2;
}

.scroll-hint svg { animation: hintBob 1.8s ease-in-out infinite; }

@keyframes hintBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

/* --- İmplant montaj sahnesi (video-motion hero) --- */
.hero-visual {
    justify-self: center;
    text-align: center;
    animation: heroUp .6s var(--ease-out-2) .25s both;
}

.imp-stage {
    --sw: 300px;
    position: relative;
    width: var(--sw);
    margin-inline: auto;
    padding: calc(var(--sw) * .14) calc(var(--sw) * .08) calc(var(--sw) * .1);
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
    background: linear-gradient(180deg, #f4f1ec 0%, #ece7de 100%);
    border-radius: calc(var(--sw) / 2) calc(var(--sw) / 2) 22px 22px; /* Fransız/Osmanlı kemeri */
    box-shadow: 0 30px 70px rgba(4, 22, 30, .45);
    overflow: hidden;
}

.imp-stage::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(186, 141, 117, .5);
    border-radius: calc(var(--sw) / 2 - 9px) calc(var(--sw) / 2 - 9px) 15px 15px;
    pointer-events: none;
    z-index: 2;
}

/* Yavaş ışık süpürmesi — video hissi */
.imp-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
    transform: translateX(-110%);
    animation: sheen 7.5s var(--ease-out-2) 1.8s infinite;
    pointer-events: none;
    z-index: 3;
}

@keyframes sheen {
    0% { transform: translateX(-110%); }
    34%, 100% { transform: translateX(110%); }
}

.imp-float { display: block; position: relative; z-index: 1; }

/* Sinematik montaj: --p 0'da parçalar ayrık (patlatılmış), 1'de birleşik.
   Kron yukarıdan, vida aşağıdan yaklaşır; pilier hafif belirginleşir. */
.f1 { transform: translateY(calc((1 - var(--p, 0)) * var(--sw) * -.085)); }
.f2 { transform: scale(calc(.97 + var(--p, 0) * .03)); }
.f3 { transform: translateY(calc((1 - var(--p, 0)) * var(--sw) * .075)); }

/* Giriş: parçalar içten yumuşakça belirir (transform dıştaki .f* katmanında,
   çakışmasın diye giriş animasyonu içteki .imp-part üzerinde) */
.f1 .imp-part { animation: impIn .8s var(--ease-out-2) .3s both; }
.f2 .imp-part { animation: impIn .8s var(--ease-out-2) .45s both; }
.f3 .imp-part { animation: impIn .8s var(--ease-out-2) .6s both; }

@keyframes impIn { from { opacity: 0; } to { opacity: 1; } }

/* Tek görselden üç parça: dikey sprite dilimleri (görsel oranı 6086/4500 = 1.352) */
.imp-part {
    display: block;
    width: 100%;
    background-image: url("/img/implant-explode.jpg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    border-radius: 4px;
}

.part-crown { height: calc(var(--sw) * .84 * .331); background-position: 0 calc(var(--sw) * .84 * -.176); }
.part-abut  { height: calc(var(--sw) * .84 * .257); background-position: 0 calc(var(--sw) * .84 * -.520); margin-top: calc(var(--sw) * .02); }
.part-screw { height: calc(var(--sw) * .84 * .520); background-position: 0 calc(var(--sw) * .84 * -.777); margin-top: calc(var(--sw) * .02); }

/* 3D sahne canvas'ı: sprite'ın üstünde; 3D başarıyla açılınca sprite gizlenir */
.imp-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    cursor: grab;
    z-index: 1;
}

.imp-canvas:active { cursor: grabbing; }

.imp-stage.has-3d .imp-canvas { display: block; }
.imp-stage.has-3d .imp-float { visibility: hidden; }

.imp-drag-hint { opacity: 0; transition: opacity .3s; }
.imp-stage.has-3d ~ .imp-caption .imp-drag-hint,
.hero-visual:has(.has-3d) .imp-drag-hint { opacity: .8; }

/* Üstte okuma ilerleme çubuğu */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
    transform: scaleX(0);
    transform-origin: left;
    z-index: 150;
    pointer-events: none;
}

.imp-caption {
    margin-top: 1rem;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-accent-2);
}

.hero-eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--c-accent-2);
    border: 1px solid rgba(217, 195, 163, .4);
    border-radius: 999px;
    padding: .35rem 1rem;
    margin-bottom: 1.1rem;
}

.hero h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.15rem); margin-bottom: 1rem; }

.hero-lead p {
    color: rgba(255, 255, 255, .82);
    font-size: 1.02rem;
    line-height: 1.65;
    margin-bottom: .9rem;
    max-width: 56ch;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1.4rem 0; }

.hero-points {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.75rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.hero-points li {
    position: relative;
    padding-left: 1.35rem;
    font-size: .9rem;
    color: rgba(255, 255, 255, .85);
}

.hero-points li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--c-accent-2);
    font-weight: 700;
}

/* ============ İç sayfa hero ============ */
.page-hero {
    position: relative;
    padding: clamp(2.2rem, 5vw, 3.5rem) 0 clamp(2rem, 4vw, 3rem);
    overflow: hidden;
}

/* Gravür katmanları: Paris solda, İstanbul sağda — parallax hızları data-parallax'ta */
.gravure-layer {
    position: absolute;
    bottom: -10px;
    z-index: 0;
    opacity: .28;
    pointer-events: none;
}

.gl-left { left: max(-30px, 1vw); width: clamp(120px, 13vw, 190px); height: auto; }
.gl-right { right: max(-20px, 1.5vw); width: clamp(200px, 24vw, 330px); height: auto; }

/* Sayfa hero görseli varken sağ gravür fotoğrafla yarışmasın */
.page-hero.has-image .gl-right { display: none; }

.page-hero h1 { max-width: 24ch; position: relative; z-index: 1; }

.page-eyebrow {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--c-primary);
    margin-bottom: .7rem;
}

.page-hero-lead { margin-top: 1rem; max-width: 54ch; }
.page-hero-lead p {
    color: var(--c-ink-soft);
    font-size: 1.05rem;
    line-height: 1.7;
    padding-left: 1rem;
    border-left: 2px solid var(--c-accent);
}

.page-hero-actions { margin-top: 1.6rem; }

/* Yeşil WhatsApp butonu (Stitch) */
.btn-wa {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--c-whatsapp);
    color: #06250f;
    border-radius: 4px;
}
.btn-wa:hover { color: #06250f; filter: brightness(1.06); box-shadow: 0 10px 26px rgba(37, 211, 102, .3); }

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

.page-hero.has-image .page-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.page-hero-media {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    justify-self: end;
    border: 1px solid rgba(238, 188, 162, .22);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

.page-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 10, 10, .8), transparent 55%);
    pointer-events: none;
}

.hero-media-badge {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .85rem;
    background: rgba(19, 19, 19, .8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(238, 188, 162, .3);
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-ink);
}

.hero-media-badge svg { color: var(--c-primary); }

.page-hero-media img {
    width: 100%;
    max-width: 520px;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    display: block;
    /* Giriş + çok yavaş Ken Burns (sinematik nefes) */
    animation: heroUp .55s var(--ease-out-2) .1s both, kenburns 9s var(--ease-out) .7s forwards;
}

@keyframes kenburns { to { transform: scale(1.045); } }

@media (max-width: 980px) {
    /* minmax(0,...) şart — salt 1fr kolonu içerik genişliğine kilitleyip taşırır */
    .page-hero.has-image .page-hero-inner { grid-template-columns: minmax(0, 1fr); }
    .page-hero-media { justify-self: stretch; margin-top: 1rem; }
    .page-hero-media img { max-width: 100%; aspect-ratio: 16 / 10; }
}

.breadcrumbs {
    font-size: .84rem;
    margin-bottom: 1.1rem;
    color: var(--c-ink-muted);
    position: relative;
    z-index: 1;
}

.breadcrumbs a { color: var(--c-ink-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-accent-dark); }
.breadcrumbs .sep { margin-inline: .55rem; color: var(--c-accent); }

/* ============ İçerik — editoryal iki kolon ============ */
.page-body { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }

.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
}

.article-layout.no-rail { grid-template-columns: minmax(0, 760px); justify-content: center; }

.page-content { max-width: 720px; }

.content-section { margin-bottom: clamp(2rem, 4vw, 3rem); }
.content-section[id], .steps[id], .faq-list[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* Lead paragraf: Fransız editoryal giriş — serif, büyük, lettrine'li */
.content-section.is-lead {
    padding-left: 1.5rem;
    border-left: 3px solid var(--c-accent);
}

.content-section.is-lead p {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: 1.65;
    font-weight: 400;
    color: var(--c-ink);
}

/* (lettrine koyu-sans temada devre dışı) */

/* Oto-numaralı H2 (data-num'dan) */
.content-section h2 {
    position: relative;
    margin-bottom: 1.15rem;
    padding-left: 1rem;
    border-left: 4px solid var(--c-accent);
    color: var(--c-primary);
}

/* (numara etiketi Stitch düzeninde kullanılmıyor; id’ler ve rail nav korunuyor) */

/* "À retenir" bölümleri: Stitch'in "Note Clinique" paneli — herhangi bir sayfada
   Title tam olarak "À retenir" olan Heading2 bölümü otomatik bu stille render edilir
   (bkz. Detail.cshtml). İçerik aynı kalır, yalnız görsel olarak ayrışır. */
.content-section.clinical-note {
    background: var(--c-cream);
    border: 1px solid var(--c-line);
    border-left: 4px solid var(--c-primary);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
}

.content-section.clinical-note h2 {
    display: flex;
    align-items: center;
    gap: .6rem;
    border-left: none;
    padding-left: 0;
    margin-bottom: .8rem;
    color: var(--c-primary);
}

.content-section.clinical-note h2 svg { flex-shrink: 0; color: var(--c-primary); }

.content-section p { margin-bottom: 1.1rem; color: var(--c-ink-soft); font-size: 1.075rem; }
.content-section p:last-child { margin-bottom: 0; }
.content-section ul, .content-section ol { margin: 0 0 1.1rem 1.4rem; color: var(--c-ink-soft); }
.content-section li { margin-bottom: .45rem; }

/* ---- Ana sayfa "sommaire" düzeni: vitrin bölümleri geniş, metin sütunu dar ---- */
.article-layout.is-home { grid-template-columns: minmax(0, 1fr); max-width: none; }
.article-layout.is-home .page-content { max-width: none; }
.article-layout.is-home .content-section,
.article-layout.is-home .keypoints,
.article-layout.is-home .steps,
.article-layout.is-home .faq-list { max-width: 75ch; margin-inline: auto; }
.article-layout.is-home .content-section.is-lead { margin-inline: auto; }
/* Spotlight içeren section genişler (koyu bant dar sütuna sıkışmasın) */
.article-layout.is-home .content-section:has(.spotlight) { max-width: none; }

/* ---- Uzmanlık vitrini (ExpertiseGrid — içerik Pages tablosundan otomatik) ---- */
.expertise-band {
    position: relative;
    margin: clamp(1rem, 3vw, 2rem) 0 clamp(2.5rem, 5vw, 4rem);
}

/* Head: metin solda, blueprint sağda — akış içinde, kartlarla asla çakışmaz */
.expertise-headrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: end;
    margin-bottom: 1.8rem;
}

.blueprint-layer {
    width: clamp(180px, 20vw, 270px);
    height: auto;
    opacity: .7;
    pointer-events: none;
    justify-self: end;
    filter: brightness(2.4) saturate(.5) sepia(.35) hue-rotate(-8deg);
}

.expertise-head { max-width: 62ch; }
.expertise-head h2 { margin-bottom: .6rem; }
.expertise-head p { color: var(--c-ink-soft); }

.expertise-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.expertise-card {
    display: flex;
    flex-direction: column;
    background: var(--c-cream);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    transition: border-color .2s, box-shadow .25s var(--ease-out), transform .2s var(--ease-out);
}

.expertise-card .card-media { display: block; height: 150px; overflow: hidden; }
.expertise-card .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-out); filter: saturate(.85); }
.expertise-card:hover .card-media img { transform: scale(1.05); }
.expertise-card .card-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.2rem 1.3rem 1.1rem; flex: 1; }

.expertise-card h3 { font-size: 1.05rem; color: var(--c-ink); }

.expertise-card p {
    font-size: .88rem;
    line-height: 1.55;
    color: var(--c-ink-soft);
    flex: 1;
}

.card-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--c-accent-dark);
}

.card-cta svg { transition: transform .2s var(--ease-out); }

/* Hover: altın glow (Héritage-Futurisme) */
.expertise-card:hover {
    border-color: var(--c-accent-2);
    transform: translateY(-3px);
    box-shadow: 0 12px 34px rgba(15, 61, 76, .12), 0 0 0 1px rgba(178, 138, 82, .35), 0 0 24px rgba(178, 138, 82, .18);
}

.expertise-card:hover .card-cta svg { transform: translateX(4px); }

/* ---- Spotlight: koyu encre bant + cam kart (içerik DB'den .spotlight markup'ı) ---- */
.spotlight {
    position: relative;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    background:
        radial-gradient(ellipse 620px 320px at 88% -20%, rgba(186, 141, 117, .3), transparent 60%),
        linear-gradient(150deg, #1e1e1e, #0a0a0a);
    border-radius: var(--radius);
    padding: clamp(1.75rem, 4.5vw, 3rem);
    margin: clamp(2rem, 4vw, 3rem) 0;
    color: #fff;
    overflow: hidden;
}

/* İnce fütürist grid overlay */
.spotlight::before,
.cta-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
}

.spotlight-media { position: relative; z-index: 1; }

.spotlight-media img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(220, 199, 164, .55);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35), 0 0 0 10px rgba(255, 255, 255, .04);
}

.spotlight-body { position: relative; z-index: 1; }

.spotlight-eyebrow {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--c-accent-2);
    margin-bottom: .6rem;
}

.spotlight-body h2 { color: #fff; margin-bottom: .8rem; }
.spotlight-body h2::after { display: none; }
.spotlight-body p { color: rgba(255, 255, 255, .82); margin-bottom: .9rem; }

/* Cam güven kartı (Konsolosluk) */
.glass {
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(220, 199, 164, .35);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
}

.spotlight .glass {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    font-size: .92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
    margin: 1.1rem 0 1.3rem;
}

.spotlight .glass svg { flex-shrink: 0; margin-top: .15rem; color: var(--c-accent-2); }

/* ---- FAQ teaser ---- */
.faq-teaser { max-width: 75ch; margin-inline: auto; margin-bottom: clamp(2rem, 4vw, 3rem); }
.faq-teaser > h2 { margin-bottom: 1.2rem; }
.faq-teaser-more { margin-top: 1.4rem; }

.btn-outline-dark { background: transparent; border-color: var(--c-line); color: var(--c-ink); }
.btn-outline-dark:hover { border-color: var(--c-accent); color: var(--c-accent-dark); }

@media (max-width: 900px) {
    .spotlight { grid-template-columns: 1fr; text-align: left; }
    .spotlight-media { max-width: 190px; }
    .blueprint-layer { display: none; }
}

/* ---- "À retenir" vurgu kartı (KeyPoints) ---- */
.keypoints {
    background: linear-gradient(160deg, var(--c-cream), var(--c-cream-2));
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    padding: clamp(1.4rem, 3vw, 2rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
    position: relative;
}

.keypoints::before {
    content: "✦";
    position: absolute;
    top: 1.3rem;
    right: 1.5rem;
    color: var(--c-accent-2);
    font-size: 1.2rem;
}

.kp-title { font-size: 1.15rem; margin-bottom: 1rem; padding: 0; border: 0; }
.kp-title::before { display: none; }

.keypoints ul { list-style: none; margin: 0; display: grid; gap: .7rem; }

.keypoints li {
    position: relative;
    padding-left: 1.9rem;
    color: var(--c-ink);
    font-size: 1rem;
    line-height: 1.55;
}

.keypoints li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .35em;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / .7rem no-repeat;
}

/* ---- Süreç zaman çizelgesi (Steps) ---- */
.steps { margin-bottom: clamp(2rem, 4vw, 3rem); }
.steps > h2 { position: relative; margin-bottom: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--c-line); }

.steps-body ol {
    list-style: none;
    counter-reset: step;
    margin: 0;
    display: grid;
    gap: 0;
}

.steps-body li {
    counter-increment: step;
    position: relative;
    padding: 0 0 1.6rem 3.5rem;
    color: var(--c-ink-soft);
    line-height: 1.6;
}

.steps-body li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: -.15rem;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--c-primary);
    color: #131313;
    font-family: var(--font-serif);
    font-size: .85rem;
    font-weight: 700;
    z-index: 1;
}

/* Adımları birleştiren dikey çizgi */
.steps-body li::after {
    content: "";
    position: absolute;
    left: 1.2rem;
    top: 2.3rem;
    bottom: -.2rem;
    width: 2px;
    background: linear-gradient(var(--c-accent-2), transparent);
}

.steps-body li:last-child { padding-bottom: 0; }
.steps-body li:last-child::after { display: none; }

.steps-body li strong { color: var(--c-primary); font-weight: 600; display: block; margin-bottom: .15rem; font-family: var(--font-serif); font-size: 1.08rem; }

/* ---- Sticky yan ray ---- */
.rail-sticky { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.5rem; }

.rail-nav { border-left: 2px solid var(--c-line); padding-left: 1.1rem; }

.rail-heading {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--c-ink-soft);
    margin-bottom: .85rem;
}

.rail-nav ul { list-style: none; display: grid; gap: .1rem; }

.rail-nav a {
    display: block;
    padding: .35rem 0;
    font-size: .9rem;
    color: var(--c-ink-soft);
    text-decoration: none;
    line-height: 1.35;
    transition: color .15s, padding-left .15s;
}

.rail-nav a:hover, .rail-nav a.active { color: var(--c-primary); padding-left: .3rem; }
.rail-nav a.active { font-weight: 600; }

.rail-cta {
    background: linear-gradient(155deg, #222222, #0d0d0d);
    color: #fff;
    border-radius: var(--radius);
    padding: 1.4rem;
}

.rail-cta-title { font-family: var(--font-serif); font-size: 1.1rem; color: #fff; margin-bottom: .5rem; }
.rail-cta-text { font-size: .85rem; color: rgba(255,255,255,.8); margin-bottom: 1rem; line-height: 1.55; }
.btn-block-sm { display: block; text-align: center; padding: .7rem 1rem; font-size: .88rem; }

@media (max-width: 900px) {
    /* minmax(0,...) şart: 1fr (=minmax(auto,1fr)) kolonun küçülmesini engelleyip
       metni sağdan taşırıyordu */
    .article-layout, .article-layout.no-rail { grid-template-columns: minmax(0, 1fr); }
    .article-rail { order: -1; } /* mobilde ray içeriğin üstünde */
    .rail-sticky { position: static; }
    .rail-nav { display: none; } /* mobilde uzun nav gizli, CTA kalır */
    .page-content { max-width: none; min-width: 0; }
}

.page-content { min-width: 0; }
.content-section p, .keypoints li, .steps-body li { overflow-wrap: break-word; }

/* Scroll-scrub video bandı: full-bleed sinematik bölüm (içerik DB'den gelir).
   Sarmalayıcı yüksek; video yapışık kalır ve kaydırmayla oynar (site.js). */
.video-scrub {
    position: relative;
    height: 420vh; /* 10 sn video ~3 ekran boyu kaydırmaya yayılır — sinematik tempo */
    width: 100%;
}

.vs-sticky {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    height: calc(100svh - var(--header-h));
    overflow: hidden;
    background: var(--c-primary);
}

.vs-sticky video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vs-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 4rem) clamp(1.75rem, 4vw, 3rem);
    background: linear-gradient(transparent, rgba(10, 42, 53, .88));
    color: #fff;
}

.vs-eyebrow {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--c-accent-2);
    margin-bottom: .5rem;
}

.vs-overlay h2 {
    color: var(--c-ink-strong);
    font-size: clamp(1.5rem, 3.4vw, 2.3rem);
    margin-bottom: .6rem;
}

.vs-overlay h2::after { display: none; }

.vs-text {
    max-width: 56ch;
    color: rgba(255, 255, 255, .85);
    font-size: .98rem;
    margin: 0;
}

@media (max-width: 980px) {
    .video-scrub { height: 320vh; }
}

/* İçerik görselleri: editoryal figure — metin ölçüsünü aşan hafif taşma (içerik DB'den) */
.content-figure {
    margin: 2.2rem 0;
    max-width: 420px;
}

.content-figure img {
    width: 100%;
    max-height: 460px;
    object-fit: contain;
    background: linear-gradient(180deg, #ffffff, #faf8f4);
    border: 1px solid var(--c-line);
    border-radius: 160px 160px 16px 16px;
    padding: 1.8rem 1.6rem 1.4rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}

.content-figure img:hover { box-shadow: var(--shadow); transform: translateY(-3px); }

.content-figure figcaption {
    margin-top: .8rem;
    font-size: .82rem;
    color: var(--c-ink-muted);
    letter-spacing: .02em;
}

/* Tıbbi diyagram figure: geniş, çerçevesiz, açık zemin */
.content-figure.schema { max-width: 100%; margin: 2.4rem 0; }
.content-figure.schema img {
    border-radius: var(--radius);
    background: radial-gradient(ellipse at 50% 40%, #ffffff, #ece7de);
    border: 1px solid var(--c-line);
    padding: 1.6rem;
    max-height: none;
}

.legal-note {
    font-size: .86rem;
    color: var(--c-ink-muted);
    background: #171717;
    border-left: 3px solid var(--c-accent);
    padding: 1rem 1.2rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ============ FAQ ============ */
.faq-list { display: grid; gap: .8rem; }

.faq-item {
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-cream);
    overflow: hidden;
    transition: box-shadow .2s, border-color .2s;
}

.faq-item:hover { border-color: var(--c-accent-2); }
.faq-item[open] { box-shadow: var(--shadow-sm); border-color: var(--c-accent-2); }

.faq-item summary {
    cursor: pointer;
    padding: 1.05rem 3.2rem 1.05rem 1.4rem;
    list-style: none;
    position: relative;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #2a2a2a;
    color: var(--c-accent-dark);
    font-size: 1.15rem;
    line-height: 1;
    transition: background .2s, color .2s;
}

.faq-item[open] summary::after { content: "–"; background: var(--c-accent); color: #131313; }

.faq-item summary h3 {
    display: inline;
    font-size: 1.22rem;
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--c-primary);
}

.faq-answer { padding: 0 1.4rem 1.2rem; }
.faq-answer p { margin-bottom: .8rem; color: var(--c-ink-soft); font-size: .96rem; }
.faq-answer p:last-child { margin-bottom: 0; }

/* ============ CTA bandı ============ */
.cta-band {
    position: relative;
    background:
        radial-gradient(ellipse 700px 380px at 15% 120%, rgba(186, 141, 117, .28), transparent 65%),
        linear-gradient(140deg, #1c1c1c, #060606);
    color: #fff;
    padding: clamp(3rem, 7vw, 4.75rem) 0;
    text-align: center;
    overflow: hidden;
}

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

/* Évaluation paneli (Stitch): panel + dashed drop-zone görünümü + WhatsApp CTA */
.eval-panel {
    max-width: 720px;
    margin-inline: auto;
    background: var(--c-cream);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    padding: clamp(1.75rem, 4vw, 2.75rem);
    text-align: center;
}

.eval-panel h2 { color: var(--c-ink-strong); margin-bottom: .8rem; }
.eval-panel p { color: var(--c-ink-soft); max-width: 58ch; margin: 0 auto 1.4rem; }

.eval-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.8rem 1.5rem;
    margin-bottom: 1.4rem;
    border: 2px dashed rgba(238, 188, 162, .45);
    border-radius: var(--radius);
    background: rgba(238, 188, 162, .04);
    color: var(--c-ink);
    text-decoration: none;
    transition: border-color .2s, background .2s;
}

.eval-dropzone:hover { border-color: var(--c-primary); background: rgba(238, 188, 162, .08); color: var(--c-ink); }
.eval-dropzone svg { color: var(--c-primary); }
.eval-dropzone strong { font-family: var(--font-serif); font-size: 1.02rem; }
.eval-dropzone span { font-size: .8rem; color: var(--c-ink-soft); }

.cta-band h2 { color: #fff; margin-bottom: .9rem; }
.cta-band p { color: rgba(255, 255, 255, .82); max-width: 62ch; margin: 0 auto 1.6rem; }

/* ============ İlgili sayfalar ============ */
.related-links {
    background: var(--c-cream);
    padding: clamp(2.4rem, 5vw, 3.6rem) 0;
    border-top: 1px solid var(--c-line);
}

.related-links h2 { margin-bottom: 1.4rem; }

.related-links ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: .85rem;
}

/* 6 kart auto-fill ile 4+2 olarak kırılıyordu (müşteri notu: "3-3 yapsan").
   Masaüstünde satır başına sabit 3 kart. */
@media (min-width: 900px) {
    .related-links ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.related-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: var(--c-cream);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    font-size: .93rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--c-primary);
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

.related-links a svg { flex-shrink: 0; color: var(--c-accent); transition: transform .18s; }

.related-links a:hover {
    border-color: var(--c-accent);
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
    transform: translateY(-2px);
}

.related-links a:hover svg { transform: translateX(3px); }

/* ============ İletişim formu ============ */
.contact-form-wrap {
    max-width: 640px;
    background: var(--c-cream);
    border: 1px solid var(--c-line);
    color: var(--c-ink);
    border-radius: var(--radius);
    padding: clamp(1.4rem, 4vw, 2.2rem);
}

.contact-form { display: grid; gap: 1.1rem; margin-top: 1.2rem; }

.form-row { display: grid; gap: .35rem; }

.form-row label { font-size: .87rem; font-weight: 600; color: var(--c-primary); }

.form-row input,
.form-row textarea {
    font: inherit;
    padding: .75rem 1rem;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    background: #1a1a1a;
    color: var(--c-ink);
}

.form-row input:focus,
.form-row textarea:focus {
    outline: 2px solid rgba(185, 142, 85, .35);
    border-color: var(--c-accent);
}

/* Floating label: boşken etiket alan içinde, odak/doluyken üste süzülür */
.form-float { position: relative; }

.form-float label {
    position: absolute;
    left: 1rem;
    top: .85rem;
    padding: 0 .3rem;
    background: transparent;
    color: var(--c-ink-soft);
    font-weight: 500;
    pointer-events: none;
    transition: transform .18s var(--ease-out), color .18s, background .18s, font-size .18s;
    transform-origin: left top;
}

.form-float input:focus ~ label,
.form-float input:not(:placeholder-shown) ~ label,
.form-float textarea:focus ~ label,
.form-float textarea:not(:placeholder-shown) ~ label {
    transform: translateY(-1.45rem) scale(.82);
    background: #1a1a1a;
    color: var(--c-accent-dark);
    border-radius: 4px;
}

.form-float input:focus ~ label,
.form-float textarea:focus ~ label { color: var(--c-primary); }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-error {
    background: #fdecea;
    color: #a4342a;
    border: 1px solid #f2c4bf;
    border-radius: var(--radius-sm);
    padding: .8rem 1rem;
    font-size: .92rem;
}

/* ============ Footer ============ */
.site-footer {
    background: linear-gradient(170deg, #0f0f0f, #000000);
    color: rgba(255, 255, 255, .72);
    font-size: .89rem;
}

/* Footer düzeni: HER ŞEY sola hizalı. Önceki sürümde marka ortalı, kolonlar
   solda, "Site officiel" ortalı, yasal metin solda, telif ortalıydı — 5 blok
   3 ayrı hizada duruyordu ve "şablon" hissi veriyordu. */
.footer-stitch {
    text-align: left;
    padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
    display: grid;
    gap: 1.75rem;
}

/* Kimlik kolonu + 3 menü kolonu. Kimlik kolonu, 1. menü kolonunun (4 link)
   diğerlerinden (8 ve 6 link) kısa kalmasıyla oluşan boşluğu da dengeler. */
.footer-columns {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3.5vw, 2.75rem);
    padding-block: 1.75rem;
    border-block: 1px solid rgba(255, 255, 255, .08);
}

/* ---- Kimlik kolonu (tamamı DB'den: logo, marka, etiket, adres, WhatsApp) ---- */
.footer-identity { display: grid; gap: .9rem; align-content: start; }

.footer-identity .footer-brand-row {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.footer-identity .footer-logo { width: 40px; height: auto; flex-shrink: 0; }

.footer-brand {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--c-primary);
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.25;
}

.footer-brand-tagline {
    display: block;
    font-family: var(--font-sans);
    font-size: .7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--c-ink-muted);
}

.footer-address {
    font-style: normal;
    font-size: .85rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .62);
}

.footer-contact-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    color: var(--c-accent-2);
    text-decoration: none;
    font-size: .88rem;
    transition: color .2s var(--ease-out);
}

.footer-contact-link svg { flex-shrink: 0; }
.footer-contact-link:hover { color: var(--c-primary); }

/* ---- Menü kolonları ---- */
.footer-columns .footer-heading a { color: inherit; text-decoration: none; }
.footer-columns .footer-heading a:hover { color: var(--c-primary); }

.footer-col ul { list-style: none; }

/* Dokunma hedefi: mobilde 22 linkin tamamı 32px'in altındaydı (WCAG 2.5.8).
   Dikey padding ile satır yüksekliği ≥40px'e çıkarıldı; masaüstünde de
   tıklama alanı büyüdüğü için zarar yok. */
.footer-col a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding-block: .3rem;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    font-size: .88rem;
    line-height: 1.45;
    transition: color .2s var(--ease-out);
}

.footer-col a:hover { color: var(--c-primary); }

.footer-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }

.footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: rgba(255,255,255,.72);
    text-decoration: none;
    font-size: .88rem;
    transition: color .2s var(--ease-out);
}

.footer-nav a:hover { color: var(--c-primary); }

@media (max-width: 900px) {
    .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-identity { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .footer-columns { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

/* Yasal metin: 62ch dar kalıp ortalanınca "üçgen" görünüyordu (müşteri notu).
   Tam genişlik + sola hizalı blok halinde, düz bir paragraf gibi durur. */
.footer-legal-wrap { width: 100%; max-width: none; }
.footer-copy { font-size: .8rem; color: rgba(255,255,255,.4); }

.footer-legal {
    margin-bottom: .8rem;
    line-height: 1.7;
    font-size: .82rem;
    color: rgba(255, 255, 255, .5);
}

.footer-heading {
    font-weight: 700;
    color: var(--c-accent-2);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .76rem;
    margin-bottom: .8rem;
}

/* ============ 404 ============ */
.notfound-inner {
    padding-block: clamp(3rem, 9vw, 6.5rem) clamp(3.5rem, 8vw, 6rem);
    max-width: 780px;
}

/* Tek "wow" öğesi: ana sayfa H1'iyle aynı Cormorant, dev punto, silik bakır. */
.notfound-code {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(6rem, 18vw, 13rem);
    font-weight: 600;
    line-height: .85;
    letter-spacing: -.04em;
    color: var(--c-accent);
    opacity: .22;
    /* Yarım çakışma "hata" gibi duruyordu; rakam ayrı bir katman olarak durur. */
    margin-bottom: .5rem;
    user-select: none;
}

.notfound h1 { max-width: 18ch; margin-bottom: 1.1rem; }

.notfound-lead {
    max-width: 56ch;
    color: var(--c-ink-soft);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 2.25rem;
}

.notfound-links {
    display: grid;
    gap: 0;
    margin-bottom: 2.5rem;
    border-top: 1px solid var(--c-line);
}

.notfound-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 48px;
    padding: .85rem .25rem;
    border-bottom: 1px solid var(--c-line);
    color: var(--c-ink);
    text-decoration: none;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: .98rem;
    transition: color .3s var(--ease-out), padding-left .3s var(--ease-out);
}

.notfound-links svg {
    flex-shrink: 0;
    color: var(--c-accent);
    transition: transform .3s var(--ease-out);
}

.notfound-links a:hover,
.notfound-links a:focus-visible { color: var(--c-primary); padding-left: .9rem; }
.notfound-links a:hover svg,
.notfound-links a:focus-visible svg { transform: translateX(5px); }

.notfound-actions { display: flex; flex-wrap: wrap; gap: .9rem; }

@media (prefers-reduced-motion: reduce) {
    .notfound-links a,
    .notfound-links svg { transition: none; }
    .notfound-links a:hover { padding-left: .25rem; }
    .notfound-links a:hover svg { transform: none; }
}

/* ============ Mobil sabit aksiyon barı (Stitch) ============ */
.mobile-actionbar {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 95;
    background: rgba(14, 14, 14, .92);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--c-line);
}

.mobile-actionbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom, 0px));
    color: var(--c-ink-soft);
    text-decoration: none;
    font-size: .68rem;
    letter-spacing: .06em;
}

.mobile-actionbar a:first-child { color: var(--c-whatsapp); }
.mobile-actionbar a:hover { color: var(--c-primary); }

@media (max-width: 900px) {
    .mobile-actionbar { display: flex; }
    body { padding-bottom: 64px; }
}

/* ============ WhatsApp ============ */
.whatsapp-float {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: .55rem;
    height: 56px;
    min-width: 56px;
    padding: 0 1rem;
    border-radius: 999px;
    background: var(--c-whatsapp);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .4);
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

.whatsapp-float svg { flex-shrink: 0; }

.whatsapp-float .wa-label {
    font-size: .88rem;
    font-weight: 600;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width .28s var(--ease-out-2), opacity .2s var(--ease-out);
}

.whatsapp-float:hover, .whatsapp-float:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(37, 211, 102, .5);
    color: #fff;
}

.whatsapp-float:hover .wa-label,
.whatsapp-float:focus-visible .wa-label { max-width: 200px; opacity: 1; }

/* Mobilde alt aksiyon barında zaten WhatsApp var — float buton gereksiz.
   Bu kural, taban .whatsapp-float kuralından SONRA gelmeli (aynı özgüllük,
   kaynak sırası kazanır) — önceden erkenden tanımlanmıştı ve taban kural
   tarafından eziliyordu, float buton mobilde alt bar'ın arkasında görünüyordu. */
@media (max-width: 900px) {
    .whatsapp-float { display: none; }
}

.wa-inline {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.1rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--c-primary);
    text-decoration: none;
}

.wa-inline svg { color: var(--c-whatsapp); }
.wa-inline:hover { color: var(--c-accent-dark); text-decoration: underline; }

/* Test kancası (?flat=1): pinned bölümler düz akar — tam sayfa screenshot için */
.flat-shot .hero-scroll { height: auto; }
.flat-shot .hero { position: static; height: auto; min-height: 680px; }
.flat-shot .video-scrub { height: auto; }
.flat-shot .vs-sticky { position: static; height: 480px; }

/* ============ Sayfa geçişleri (View Transitions API) ============ */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vtOut .22s var(--ease-out) both; }
::view-transition-new(root) { animation: vtIn .34s var(--ease-out-2) both; }

@keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }

/* ============ Sinematik grain dokusu ============ */
.hero::before,
.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    opacity: .05;
    pointer-events: none;
    z-index: 0;
}

/* ============ Marquee şeridi (içerik DB'den, .marquee generic) ============ */
.marquee {
    overflow: clip;
    background: #0d0d0d;
    border-block: 1px solid var(--c-line);
    padding-block: 1rem;
}

.marquee-track {
    display: flex;
    gap: 3.5rem;
    width: max-content;
    animation: marqueeScroll 36s linear infinite;
}

.marquee-track span {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(.8rem, 1.6vw, 1rem);
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--c-accent);
    opacity: .6;
    white-space: nowrap;
}

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

@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ============ Custom cursor (yalnız hassas işaretçili cihazlar) ============ */
@media (pointer: fine) {
    .cursor-ring {
        position: fixed;
        top: 0;
        left: 0;
        width: 34px;
        height: 34px;
        margin: -17px 0 0 -17px;
        pointer-events: none;
        z-index: 400;
        opacity: .55;
        transition: opacity .25s;
    }

    /* GSAP dış öğeyi translate eder; ölçek çakışmasın diye halka ::before'da */
    .cursor-ring::before {
        content: "";
        position: absolute;
        inset: 0;
        border: 1.5px solid var(--c-accent);
        border-radius: 50%;
        transition: transform .25s var(--ease-out);
    }

    .cursor-ring.is-active { opacity: .9; }
    .cursor-ring.is-active::before { transform: scale(1.7); }
    .cursor-ring.is-hidden { opacity: 0; }
}

/* Hero H1 kelime animasyonu için: split edilince CSS giriş animasyonu devre dışı */
.hero-content > h1.split { animation: none; opacity: 1; }
.hero h1 .w { display: inline-block; }

/* ============ Motion (subtle tier) ============ */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.in { opacity: 1; transform: none; }

/* Hero giriş koreografisi: sıralı, küçük offsetli fade-up */
.hero-content > * {
    animation: heroUp .55s var(--ease-out-2) both;
}

.hero-content > *:nth-child(1) { animation-delay: .05s; }
.hero-content > *:nth-child(2) { animation-delay: .14s; }
.hero-content > *:nth-child(3) { animation-delay: .23s; }
.hero-content > *:nth-child(4) { animation-delay: .32s; }
.hero-content > *:nth-child(5) { animation-delay: .41s; }

@keyframes heroUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

/* FAQ cevabı açılırken yumuşak geçiş */
.faq-item[open] .faq-answer { animation: faqIn .28s var(--ease-out) both; }

@keyframes faqIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    .marquee-track { animation: none; }
    .cursor-ring { display: none; }
}

/* ============ Mobil ============ */
@media (max-width: 980px) {
    /* backdrop-filter, fixed konumlu mobil menünün containing block'unu header'a
       çevirip paneli hapsediyor — mobilde kaldırılmalı */
    .site-header { backdrop-filter: none; background: #131313; }

    .brand-logo { height: 38px; }

    .nav-toggle { display: flex; }

    .site-nav {
        position: fixed;
        inset: 0;
        padding-top: calc(var(--header-h) + .5rem);
        background: #131313;
        transform: translateX(100%);
        transition: transform .3s cubic-bezier(.4, 0, .2, 1);
        overflow-y: auto;
        z-index: 110;
    }

    .site-nav.open { transform: translateX(0); }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .75rem 1.25rem 2.5rem;
    }

    .nav-link {
        justify-content: space-between;
        padding: 1rem .4rem;
        font-size: 1.06rem;
        border-bottom: 1px solid var(--c-line);
        border-radius: 0;
    }

    .nav-link:hover { background: none; }

    .dropdown, .dropdown-wide {
        position: static;
        transform: none;
        opacity: 1;
        visibility: hidden;
        display: none;
        min-width: 0;
        border: 0;
        box-shadow: none;
        padding: .25rem 0 .5rem .9rem;
        grid-template-columns: 1fr;
    }

    .has-dropdown.open .dropdown { display: block; visibility: visible; }

    /* Masaüstü hover/focus kuralı (.has-dropdown:focus-within .dropdown) daha
       yüksek özgüllükte olduğu için dokunmatik cihazda linke odak kalınca
       (tap sonrası mobil tarayıcılar odağı korur) taban transform:none'ı ezip
       masaüstü ortalama transform'unu geri getiriyordu — dropdown ekranın
       solundan taşıyordu. Aynı özgüllükte, sonradan tanımlanan bu kural kazanır. */
    .has-dropdown:hover .dropdown,
    .has-dropdown:focus-within .dropdown { transform: none; }

    .dropdown a { padding: .7rem .4rem; font-size: .98rem; color: var(--c-ink-soft); }
    .dropdown a:hover { padding-left: .4rem; background: none; }

    .nav-cta-item { margin: 1.25rem 0 0; }
    .btn-nav { display: block; text-align: center; padding: .9rem; font-size: 1rem; }

    body.nav-open { overflow: hidden; }

    .gl-left { display: none; } /* mobilde tek gravür yeter */
    .gl-right { opacity: .1; width: 180px; }
    .pont-layer { width: 120%; opacity: .22; }
    .hero-scroll { height: 185vh; }
    .hero { height: auto; min-height: calc(100svh - var(--header-h)); align-items: flex-start; overflow-y: hidden; }
    .hero-inner { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 1.5rem 3.5rem; }
    .hero-visual { order: 2; }
    .imp-stage { --sw: 200px; }
    .hero-lead p { font-size: .98rem; }
    .hero-points { display: none; } /* mobilde hero tek ekrana sığsın; noktalar içerikte zaten var */
    .hero-skyline { width: 200vw; opacity: .13; }
    .scroll-hint { display: none; }
    .hero-actions .btn { flex: 1 1 auto; text-align: center; }

    .brand-tagline { display: none; }
    .brand-name { font-size: 1.02rem; }
}