/* ============================================================
   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 — koyu lüks zemin + turkuaz vurgu (Clinique Dr Kasapoğlu markası).
       2026-08-13'e kadar bakır tonlardaydı; yeni logoyla turkuaza geçildi.
       (Eski bakır hex'leri bilerek yazılmıyor: regresyon testi CSS'te
       o değerlerin geri gelmediğini metin araması ile doğruluyor.) */
    /* 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) */
    /* Vurgu paleti — "Clinique Dr Kasapoğlu" logosundan ölçülen gerçek turkuazlar
       (koyu #3F9093, açık #A6D3D0). Koyu zemin (--c-bg) üzerinde kontrastlar:
       --c-primary 11.4:1, --c-accent 4.97:1 — ikisi de WCAG AA. */
    --c-primary: #a6d3d0;        /* birincil vurgu: açık turkuaz */
    --c-primary-2: #3f9093;
    --c-accent: #3f9093;         /* koyu turkuaz (logo) */
    --c-accent-2: #c2dedc;
    --c-accent-dark: #a6d3d0;    /* koyu zeminde "koyu vurgu" = daha açık ton */
    /* Aynı renklerin RGB üçlüleri: yarı saydam kullanımlar için.
       ÖNCEDEN 17 yerde rgba(238,188,162,…) diye ELLE yazılıydı ve "renkler tek
       yerden" kuralını deliyordu; artık tema değişikliği bu iki satırdan ibaret. */
    --c-primary-rgb: 166 211 208;
    --c-accent-rgb: 63 144 147;
    --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.
       Nötrler vurguya doğru hafifçe soğutuldu (önce sıcak krem tonlarıydı). */
    --c-surface-light: #f1f6f5;
    --c-ink-on-light: #232b2b;
    --c-ink-on-light-soft: #4e5a59;
    --c-line: #33403f;
    --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);
    /* Yatay marka kilidi icin: kilidin yuksekligini kare ikon belirliyor,
       alttaki "DR. KASAPOGLU" satiri kilidin ancak %13'u. 78px header'da o
       satir 6,6px'e dusup dagiliyordu (olculdu). 86px -> 58px kilit -> 7,4px. */
    --header-h: 86px;
}

* { 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);
    /* Header, metin kolonundan (1160px) daha geniş bir kaba yerleşir: 6 menü
       başlığı + marka geniş ekranda 1160'a sığmıyordu ve kabın dışına taşıyordu.
       Header'ın kendi ızgarasının olması yaygın ve bilinçli bir tercih. */
    max-width: 1280px;
}

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

/* Kilit yukseklikten olceklenir (width DEGIL): logo panelden degistirilebilir
   ve kare bir isaret yuklenirse genislik sabitlemesi onu devasa yapardi. */
.brand-logo { height: 58px; width: auto; display: block; }

.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; }

/* --- 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; }

/* 6. başlık (Clinique) eklenince nav 1366px'de taşıp CONTACT'ı ekran dışına
   itiyordu. Masaüstü nav 980px'e kadar açık kaldığı için dar masaüstlerinde
   yatay ölçüler kademeli olarak sıkıştırılır.
   Marka bloğu yatay kilide geçince 205px'ten 152px'e indi (metin katmanı
   kalktı), yani nav'a 53px daha yer açıldı; yine de dar masaüstünde nav
   yatay ölçüleri sıkışmaya devam eder. */
@media (max-width: 1400px) {
    .nav-link { padding-inline: .62rem; letter-spacing: .07em; }
}

@media (max-width: 1150px) {
    .nav-list { gap: .1rem; }
    .nav-link { padding-inline: .45rem; font-size: .74rem; letter-spacing: .05em; }
}

/* 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: #0b1f20;
}
.btn-gold:hover { color: #0b1f20; box-shadow: 0 10px 26px rgb(var(--c-primary-rgb) / .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 rgb(var(--c-primary-rgb) / .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 rgb(var(--c-primary-rgb) / .12); }

.ring-dashed {
    inset: 14px;
    border: 1px dashed rgb(var(--c-primary-rgb) / .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: rgb(var(--c-primary-rgb) / .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;
}

/* Açık zeminde turkuaz okunmaz — koyulaştırılmış varyantlar (kontrast testi doğrular) */
.light-band h2 em { font-style: normal; color: #2c6a6d; }

.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: #245659; text-decoration-color: rgba(36, 86, 89, .45); }
.light-band a:hover { color: #17403f; }

.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 rgb(var(--c-primary-rgb) / .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%, rgb(var(--c-accent-rgb) / .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, #f2f6f5 0%, #e8eeed 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 rgb(var(--c-accent-rgb) / .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 rgb(var(--c-primary-rgb) / .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 rgb(var(--c-primary-rgb) / .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%, rgb(var(--c-accent-rgb) / .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, #e8eeed);
    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%, rgb(var(--c-accent-rgb) / .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 rgb(var(--c-primary-rgb) / .45);
    border-radius: var(--radius);
    background: rgb(var(--c-primary-rgb) / .04);
    color: var(--c-ink);
    text-decoration: none;
    transition: border-color .2s, background .2s;
}

.eval-dropzone:hover { border-color: var(--c-primary); background: rgb(var(--c-primary-rgb) / .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; justify-items: start; }

/* Header ile ayni kural: yukseklikten olcekle, genisligi serbest birak.
   max-width dar ekranda kilidin kolonu tasirmasini engeller. */
.footer-identity .footer-logo { height: 58px; width: auto; max-width: 100%; display: block; }

.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-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;
}

/* ============ Clinique: süreç akışı (ProcessSteps) ============
   Body DB'de <ol> olarak durur (Steps ile aynı yazım). Masaüstünde 4'lü ızgara:
   tek satırda 8 adım 1366px'de ~155px'e düşüp metni taşırıyordu. */
.process { margin-bottom: clamp(2rem, 4vw, 3rem); }

.process-body ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(1rem, 2.2vw, 1.6rem);
    counter-reset: pstep;
}

.process-body li {
    counter-increment: pstep;
    position: relative;
    padding: 1.5rem 1.15rem 1.25rem;
    background: var(--c-cream);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    color: var(--c-ink-soft);
    font-size: .93rem;
    line-height: 1.6;
}

/* Adım numarası: kartın üst kenarına oturan rozet */
.process-body li::before {
    content: counter(pstep, decimal-leading-zero);
    position: absolute;
    top: -.85rem;
    left: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 1.7rem;
    padding: 0 .5rem;
    border-radius: 999px;
    background: var(--c-accent);
    color: #06181a;
    font-family: var(--font-serif);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.process-body li strong,
.process-body li b {
    display: block;
    margin-bottom: .3rem;
    color: var(--c-ink);
    font-family: var(--font-serif);
    font-size: .97rem;
    font-weight: 600;
}

@media (min-width: 700px) {
    .process-body ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
    .process-body ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.process-body > p { color: var(--c-ink-soft); max-width: 68ch; margin-bottom: 1.5rem; }

/* Vurgulu tek cümlelik mesaj (ör. "Le nom du praticien vous est communiqué…") */
.highlight-note {
    margin: 1.4rem 0 0;
    padding: 1rem 1.2rem;
    border-left: 3px solid var(--c-accent);
    background: rgb(var(--c-accent-rgb) / .09);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--c-ink) !important;
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.55;
}

/* ============ Clinique: Direction Médicale ============ */
.director {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    background:
        radial-gradient(ellipse 620px 320px at 88% -20%, rgb(var(--c-accent-rgb) / .3), transparent 60%),
        linear-gradient(150deg, #1e1e1e, #0a0a0a);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
}

@media (min-width: 820px) {
    .director { grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); }
}

.director-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid rgb(var(--c-primary-rgb) / .22);
}

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

.director-body h2 { margin-bottom: .25rem; }

.director-role {
    color: var(--c-accent-2);
    font-size: .95rem;
    margin-bottom: 1rem;
}

.director-body p { color: var(--c-ink-soft); margin-bottom: 1rem; line-height: 1.75; }
.director-body ul { margin: 0 0 1.25rem 1.2rem; color: var(--c-ink-soft); }
.director-body li { margin-bottom: .4rem; }

/* ============ Clinique: ekip ızgarası (TeamGrid) ============ */
.team { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.team > p { color: var(--c-ink-soft); max-width: 68ch; margin-bottom: 1.6rem; }

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(1.1rem, 2.5vw, 1.75rem);
}

.team-card {
    display: flex;
    flex-direction: column;
    background: var(--c-cream);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    overflow: hidden;
}

.team-media { display: block; }

.team-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}

.team-body { padding: 1.1rem 1.15rem 1.3rem; }

.team-body h3 { font-size: 1.02rem; margin-bottom: .15rem; }

.team-role { font-size: .84rem; color: var(--c-ink-muted); margin-bottom: .5rem; }

.team-specialty {
    font-size: .88rem;
    color: var(--c-primary);
    line-height: 1.45;
    margin-bottom: .9rem;
}

.team-expertise-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--c-ink-muted);
    padding-top: .75rem;
    border-top: 1px solid var(--c-line);
    margin-bottom: .45rem;
}

.team-expertise {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .28rem;
}

.team-expertise li {
    position: relative;
    padding-left: .85rem;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--c-ink-soft);
}

.team-expertise li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--c-accent);
}

/* ============ 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; }
}

/* ============ Navigasyon: hamburger eşiği ============
   6. başlık (Clinique) eklenince marka + 6 link 1100px'in altına SIĞMIYOR
   (ölçüldü: 1024px'te CONTACT ekranın dışında kalıyordu) ve bu fark punto/
   boşluk kısarak kapatılamayacak kadar büyük. Bu yüzden nav, genel mobil
   bloğundan (980px) ayrılıp kendi daha geniş eşiğine alındı; 980-1100 arası
   artık hamburger kullanır, sayfanın kalan düzeni masaüstü kalır. */
@media (max-width: 1100px) {
    /* backdrop-filter, fixed konumlu mobil menünün containing block'unu header'a
       çevirip paneli hapsediyor — panel kullanılan her genişlikte kaldırılmalı */
    .site-header { backdrop-filter: none; background: #131313; }

    .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; }
}

/* ============ Mobil ============ */
@media (max-width: 980px) {
    /* Mobilde nav hamburger'a dustugu icin markaya bol yatay yer kaliyor;
       sinir yine header yuksekligi. 50px kilit = 131px genis — 390px'lik
       ekranda hamburger'la birlikte rahat sigiyor. */
    :root { --header-h: 74px; }
    .brand-logo { height: 50px; }

    .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-name yalnizca "logo yok" yedek dalinda basilir */
    .brand-name { font-size: 1.02rem; }
}