/* ═══════════════════════════════════════════
   LIS DE JUIN, V2 Design System
   Tema: Porselen (cream) + Plum + Blush rose
═══════════════════════════════════════════ */

/* ── CSS Custom Properties ── */
/* Brand V2 (Porselen + Plum + Blush), logo + "Merci, cherie" referansi.
   NOT: Tema koyudan ACIGA cevrildi. Degisken ISIMLERI korundu (200+ kullanim
   dokunulmadan calissin diye), DEGERLERI baskin role gore yeniden atandi:
   "noir" ailesi = artik ACIK porselen yuzey/zemin, "cream" ailesi = artik KOYU plum murekkep.
   Bilincli bir deger takasidir; ileride degisken adlari sadelestirilebilir. */
:root {
    /* Blush / rose accent (cream uzerinde okunur tonlar) */
    --clr-rose: #C0848D;
    --clr-rose-light: #D9A6AD;
    --clr-rose-lighter: #EFD8D6;
    --clr-rose-dark: #A66A74;
    --clr-rose-muted: #CBAAB0;

    /* "noir" ailesi = ACIK porselen yuzeyler (isim korundu, deger acildi) */
    --clr-noir: #E9E4DA;
    --clr-noir-deep: #F0EDE5;
    --clr-noir-soft: #E2DCD0;
    --clr-noir-card: #F7F4EE;

    /* "cream" ailesi = KOYU plum murekkep (isim korundu, deger koyulasti) */
    --clr-cream: #22181C;
    --clr-cream-warm: #3A2E33;
    --clr-white: #FFFFFF;

    /* Functional Colors */
    --clr-bg: var(--clr-noir-deep);
    --clr-bg-alt: var(--clr-noir);
    --clr-bg-card: var(--clr-noir-card);
    --clr-surface: var(--clr-noir-soft);
    --clr-border: rgba(34, 24, 28, 0.14);
    --clr-border-hover: rgba(34, 24, 28, 0.30);

    --clr-text: var(--clr-cream);
    --clr-text-muted: #6E6166;
    /* #9A8F90 idi: porselen zeminde 2,68:1, form zemininde 2,29:1 veriyordu
       (WCAG AA 4,5:1 ister). Fiyat alti notlar, breadcrumb, form ipuclari,
       "Lutfen beden secin" gibi 26 kullanim yeri okunmuyordu. */
    --clr-text-dim: #6E6166;
    /* Dekoratif gri: cizgi, ikon, ayrac gibi METIN OLMAYAN ogeler icin */
    --clr-decor-dim: #9A8F90;

    /* Rose ikiye ayrildi: dolgu/cizgi icin --clr-rose, ACIK ZEMINDE METIN
       icin --clr-rose-text. #C0848D porselende yalnizca 2,59:1 veriyordu ve
       fiyat, sepet toplami, form hatasi gibi kritik metinlerde kullaniliyordu.
       #8E4E5A: porselende 5,30:1, kartta 5,65:1. */
    --clr-rose-text: #8E4E5A;

    /* Durum renkleri. Token'lar bir donusum sirasinda KENDILERINE referans verir hale
       gelmisti (--clr-success: var(--clr-success)); CSS bunu dongu sayip
       deklarasyonu dusuruyordu, yani "kupon uygulandi" ile "gecersiz kupon"
       AYNI renkte cikiyordu. */
    --clr-success: #2E6B4F;   /* porselende 5,39:1 */
    --clr-danger:  #A32B2B;   /* porselende 6,11:1 */

    /* Form alani kenarligi: --clr-border (0.14 alpha) kart uzerinde 1,33:1,
       yani "buraya yazilir" siniri gorunmuyordu. WCAG 1.4.11 icin 3:1 gerek. */
    --clr-field-border: rgba(34, 24, 28, 0.45);

    --clr-accent: var(--clr-rose);
    --clr-accent-light: var(--clr-rose-light);
    --clr-accent-dark: var(--clr-rose-dark);

    /* Plum (gercek koyu), koyu kalmasi gereken ogeler icin acik referans */
    --clr-ink: #22181C;
    --clr-ink-soft: #3A2E33;

    /* Koyu gorsel/overlay uzerindeki metin DAIMA acik (tema acik olsa da) */
    --clr-on-dark: #F4EFE7;
    --clr-on-dark-muted: rgba(244, 239, 231, 0.80);
    --clr-on-dark-rose: #EFD8D6;

    /* Gradients */
    --grad-rose: linear-gradient(135deg, var(--clr-rose-dark), var(--clr-rose), var(--clr-rose-light));
    --grad-dark: linear-gradient(180deg, var(--clr-noir-deep) 0%, var(--clr-noir) 100%);
    /* Gorsel uzeri metin okunurlugu icin overlay KOYU kalir (tema acik olsa da) */
    /* Ust durak 0.10 idi: hero fotografinin acik bolgelerinde nav baglantilari
       2,25:1, altyazi 2,75:1 kontrastta kaliyordu (canvas'tan gercek piksel
       olcumu). Ust ve orta duraklar guclendirildi. */
    --grad-overlay: linear-gradient(180deg, rgba(34,24,28,0.28) 0%, rgba(34,24,28,0.50) 55%, rgba(34,24,28,0.90) 100%);
    --grad-rose-soft: linear-gradient(135deg, rgba(192,132,141,0.10) 0%, rgba(192,132,141,0.03) 100%);

    /* Typography, Josefin Sans (geometric sans) + Cormorant Garamond (serif) */
    --font-heading: 'Josefin Sans', 'Helvetica Neue', sans-serif;
    --font-body: 'Cormorant Garamond', 'Times New Roman', serif;
    --font-sans: 'Outfit', 'Helvetica Neue', sans-serif;

    /* Type scale (modular, design system) */
    --fs-micro: 10px;                        /* mikro etiket (uppercase) */
    --fs-label: 11px;                        /* etiket / nav / buton */
    --fs-eyebrow: 13px;                      /* eyebrow / bolum etiketi */
    --fs-body: 18px;                         /* govde (serif) */
    --fs-lead: clamp(16px, 2vw, 22px);       /* giris/intro paragraf */
    --fs-h3: clamp(20px, 2.8vw, 30px);       /* alt baslik */
    --fs-h2: clamp(28px, 4.5vw, 50px);       /* bolum basligi */
    --fs-h1: clamp(34px, 5vw, 54px);         /* sayfa/urun basligi */
    --fs-hero: clamp(42px, 7vw, 84px);       /* hero display */

    /* Letter-spacing (tracking) ladder */
    --track-label: 2px;                      /* etiket/nav */
    --track-eyebrow: 3px;                    /* eyebrow */
    --track-hero: 4px;                       /* hero baslik */
    --track-wide: 6px;                       /* wordmark/badge */

    /* Line-height ladder */
    --lh-display: 1.12;
    --lh-heading: 1.2;
    --lh-body: 1.7;
    --lh-ui: 1.5;

    /* Spacing scale */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 64px;
    --section-padding: clamp(80px, 10vw, 140px);
    --container-max: 1200px;
    --container-padding: clamp(20px, 4vw, 40px);

    /* Shadows (porselen tema, plum tonlu) */
    --shadow-sm: 0 2px 10px rgba(34, 24, 28, 0.06);
    --shadow-md: 0 12px 32px rgba(34, 24, 28, 0.10);
    --shadow-lg: 0 24px 60px rgba(34, 24, 28, 0.16);

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-fast: 0.3s var(--ease-out);
    --transition-medium: 0.6s var(--ease-out);
    --transition-slow: 1s var(--ease-out);

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 100px;
}

/* ── Reset & Base ── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════
   [hidden] GLOBAL GUVENLIK KURALI
   Tarayicinin varsayilani `[hidden] { display: none }` cok dusuk oncelikli;
   elemana CSS'te herhangi bir `display` verildigi anda EZILIYOR ve JS'in
   `el.hidden = true` demesi hicbir ise yaramiyor. Bu tuzak bu projede UC KEZ
   yasandi:
     1) kayit sayfasindaki sosyal butonlar (gizlenmesi gerekirken gorunuyordu),
     2) siparis basari ekranindaki uye/misafir bloklari,
     3) odeme sayfasindaki "+ Yeni Adres Ekle" butonu, ki misafire de gorunuyor
        ve tiklaninca hicbir sey olmuyordu (gelistirici "buton calismiyor,
        yapmadiniz sanirim" diye bildirdi).
   Tek satirla sinifin tamamini kapatiyoruz. Bilesen bazli [hidden] kurallari
   artik gereksiz ama zararsiz, duruyorlar.
   2026-07-28.
═══════════════════════════════════════════ */
[hidden] {
    display: none !important;
}


html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--clr-rose-dark) var(--clr-noir-deep);
}

html::-webkit-scrollbar {
    width: 5px;
}

html::-webkit-scrollbar-track {
    background: var(--clr-noir-deep);
}

html::-webkit-scrollbar-thumb {
    background: var(--clr-rose-dark);
    border-radius: 3px;
}

body {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.7;
    color: var(--clr-text);
    background-color: var(--clr-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--clr-rose);
    color: var(--clr-noir-deep);
}

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

a {
    text-decoration: none;
    color: inherit;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* ── Preloader ── */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--clr-noir-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s var(--ease-out), visibility 0.8s;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.preloader-logo {
    width: auto;
    height: 120px;
    opacity: 0;
    animation: fadeUp 0.9s var(--ease-out) 0.1s forwards;
}

.preloader-logo img {
    width: auto;
    height: 100%;
    object-fit: contain;
    display: block;
}

.preloader-wordmark {
    width: 190px;
    height: auto;
    opacity: 0;
    animation: fadeUp 0.9s var(--ease-out) 0.35s forwards;
}

.preloader-line {
    width: 50px;
    height: 1px;
    margin-top: 10px;
    background: rgba(34, 24, 28, 0.15);
    position: relative;
    overflow: hidden;
}

.preloader-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--clr-rose);
    animation: preloaderSlide 1.2s var(--ease-in-out) infinite;
}

@keyframes preloaderSlide {
    0% { left: -100%; }
    50% { left: 0; }
    100% { left: 100%; }
}

/* ── Custom Cursor ── */
#custom-cursor {
    width: 8px;
    height: 8px;
    background: var(--clr-rose);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, background 0.3s;
    mix-blend-mode: difference;
}

#cursor-follower {
    width: 36px;
    height: 36px;
    border: 1px solid var(--clr-rose);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out), border-color 0.3s;
    opacity: 0.4;
}

#custom-cursor.hover {
    width: 16px;
    height: 16px;
}

#cursor-follower.hover {
    width: 50px;
    height: 50px;
    border-color: var(--clr-rose-light);
}

@media (hover: none) {
    #custom-cursor, #cursor-follower {
        display: none;
    }
}

/* ── Erişilebilirlik yardımcıları ── */

/* Ekran okuyucuya görünür, gözle görünmez */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* İçeriğe atla: klavye kullanıcısı her sayfada 10+ nav ögesini tekrar
   geçmek zorunda kalıyordu (WCAG 2.4.1). Yalnızca odaklanınca görünür. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10001;
    background: var(--clr-ink);
    color: var(--clr-on-dark);
    padding: 12px 20px;
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
}

.skip-link:focus { left: 8px; top: 8px; }

/* Görünür odak halkası. Sitede hiçbir yerde :focus-visible kuralı yoktu,
   buna karşılık 9 dosyada `outline: none` vardı ve yerine konan 1px kenarlık
   değişimi 2,22:1 kontrast veriyordu (WCAG 2.4.7 + 1.4.11). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--clr-ink);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Koyu görsel üzerindeki ögelerde halka açık renk olmalı */
#main-header:not(.scrolled) :focus-visible,
.hero-cta :focus-visible,
.category-card:focus-visible {
    outline-color: var(--clr-on-dark);
}

/* Capa linkleri sabit header'in altina girmesin. scrollIntoView bu payi
   kendiliginden hesaba katiyor, JS'te ayrica offset hesabi gerekmiyor.
   Header 77px, ustune bir nefes. Bkz. script.js capa dinleyicisi: eski kod
   window.scrollTo kullaniyordu ve bu sitede o hicbir sey yapmiyor. */
:target,
section[id],
#main-content {
    scroll-margin-top: 96px;
}

/* ── Navigation ── */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 18px 0;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    /* Kendi GPU katmani: altdaki transform'lu hero ile "fixed element
       ghosting" (uste kayinca takili cream bar) olusmasini onler */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#main-header.scrolled {
    background: rgba(241, 238, 230, 0.97);
    border-bottom-color: var(--clr-border);
}

.navbar {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Wordmark logosu: inline SVG, ana harfler currentColor (temaya gore),
   "de" (wm-de) daima blush pembe. */
.nav-wordmark {
    display: block;
    width: clamp(150px, 18vw, 188px);
    height: auto;
    color: var(--clr-ink);
    transition: color var(--transition-fast);
}

.nav-wordmark path { fill: currentColor; }
.nav-wordmark .wm-de { fill: var(--clr-rose); }

.nav-logo:hover .nav-wordmark { color: var(--clr-rose-dark); }

/* Hero uzeri (scroll oncesi): ana harfler acik, "de" belirgin blush pembe */
#main-header:not(.scrolled) .nav-wordmark { color: var(--clr-on-dark); }
#main-header:not(.scrolled) .nav-wordmark .wm-de { fill: var(--clr-rose-light); }

.nav-links {
    display: flex;
    list-style: none;
    gap: 40px;
}

.nav-link {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    position: relative;
    transition: color var(--transition-fast);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--clr-rose);
    transition: width var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
    color: var(--clr-rose);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-btn {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-noir-deep);
    background-color: var(--clr-cream);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: inline-block;
}

.nav-btn:hover {
    background-color: var(--clr-rose);
    color: var(--clr-cream);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(196, 160, 160, 0.2);
}

/* Nav Auth Buttons */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-user-btn,
.nav-login-btn,
.nav-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--clr-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
}

.nav-user-btn:hover,
.nav-login-btn:hover,
.nav-icon-btn:hover {
    color: var(--clr-rose);
}

/* Nav seridi perdesi: hero fotografinin acik bolgelerinde nav baglantilari
   2,25:1 kontrastta kaliyordu. Cozum olarak tum hero'yu koyulastirmak yerine
   (fotograf markanin vitrini) sadece seridin arkasina yumusak, asagi dogru
   kaybolan bir perde konuyor. Fotograf acik kaliyor, metin okunuyor. */
#main-header:not(.scrolled)::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 160px;
    background: linear-gradient(180deg, rgba(34, 24, 28, 0.55) 0%, rgba(34, 24, 28, 0.28) 55%, transparent 100%);
    pointer-events: none;
    z-index: -1;
}

/* Hero uzeri (scroll oncesi) navbar: koyu gorsel uzerinde acik nav ogeleri.
   .cart-trigger bu listede YOKTU: sepet ikonu koyu hero fotografi uzerinde
   koyu plum kaliyordu, yani dort ikondan ucu beyazken sepet neredeyse
   gorunmuyordu. Sitedeki en kritik ikon oydu. */
#main-header:not(.scrolled) .nav-link,
#main-header:not(.scrolled) .nav-icon-btn,
#main-header:not(.scrolled) .nav-user-btn,
#main-header:not(.scrolled) .nav-login-btn,
#main-header:not(.scrolled) .cart-trigger {
    color: rgba(240, 237, 229, 0.88);
}

#main-header:not(.scrolled) .nav-link:hover,
#main-header:not(.scrolled) .nav-link.active,
#main-header:not(.scrolled) .nav-icon-btn:hover,
#main-header:not(.scrolled) .nav-user-btn:hover,
#main-header:not(.scrolled) .nav-login-btn:hover,
#main-header:not(.scrolled) .cart-trigger:hover {
    color: var(--clr-rose-lighter);
}

.wishlist-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--clr-rose);
    color: var(--clr-noir-deep);
    border-radius: 8px;
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.wishlist-badge.active { display: flex; }

.nav-icon-btn.wishlist-trigger.active {
    color: var(--clr-rose);
}
.nav-icon-btn.wishlist-trigger.active svg {
    fill: var(--clr-rose);
}

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
    padding: 8px;
}

.hamburger .bar {
    width: 28px;
    height: 1px;
    background: var(--clr-rose);
    transition: all var(--transition-fast);
    transform-origin: center;
}

.hamburger.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Nav kapasite esigi. Eski deger 768px idi ama nav 5 madde + 188px wordmark +
   aksiyon ikonlariyla 1100px altinda nefes payi birakmiyor: 1024px'te ic
   genislik 944px, icerik ~962px, yani TASIYOR ve linkler iki satira sariyordu.
   Breakpoint icerigin gercekten kirildigi yere konuldu. 2026-07-27. */
@media (max-width: 1100px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
}

/* ── Hero Section ── */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 120px;
    padding-bottom: 60px;
}

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

.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;   /* yuzu/eli koru, ustteki boslugu kirp, yastiklardan biraz goster */
    transform: scale(1);
    transition: transform 1.2s var(--ease-out, ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .hero-section:hover .hero-bg-img {
        transform: scale(1.03);
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--grad-overlay);
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 820px;
    padding: 0 var(--container-padding);
    margin-block: auto;
}

.hero-badge {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--clr-on-dark-rose);
    margin-bottom: 36px;
    text-shadow: 0 1px 10px rgba(34, 24, 28, 0.4);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s var(--ease-out) 0.5s forwards;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: var(--fs-hero);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 28px;
    color: var(--clr-on-dark);
    /* Acik gorsel uzerinde okunabilirlik icin yumusak golge */
    text-shadow: 0 2px 24px rgba(34, 24, 28, 0.45), 0 1px 3px rgba(34, 24, 28, 0.3);
}

/* Gradient-clip (accent) satirda text-shadow gorunmez; drop-shadow filtresi kullan */
.title-line.accent {
    filter: drop-shadow(0 2px 12px rgba(34, 24, 28, 0.4));
}

.title-line {
    display: block;
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp 1s var(--ease-out) forwards;
}

.title-line[data-delay="0"] { animation-delay: 0.7s; }
.title-line[data-delay="1"] { animation-delay: 0.9s; }
.title-line[data-delay="2"] { animation-delay: 1.1s; }

.title-line.accent {
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(135deg, #EFD8D6, #E8C8CD 60%, #F4EFE7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    font-weight: 300;
    color: var(--clr-on-dark-muted);
    max-width: 560px;
    margin: 0 auto 44px;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 12px rgba(34, 24, 28, 0.4);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s var(--ease-out) 1.4s forwards;
}

.hero-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s var(--ease-out) 1.7s forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Buttons */
.btn {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 16px 40px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

/* Birincil CTA: plum dolgu + cream metin (yuksek kontrast, acik bolumler) */
.btn-primary {
    background: var(--clr-ink);
    color: var(--clr-on-dark);
    border: 1px solid var(--clr-ink);
    border-radius: var(--radius-sm);
}

.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;   /* metnin ALTINDA kalsin: hover dolgusu metni ortmez */
    background: var(--clr-rose-dark);
    transform: translateX(-100%);
    transition: transform var(--transition-fast);
}

.btn-primary:hover::before {
    transform: translateX(0);
}

.btn-primary span,
.btn-primary svg {
    position: relative;
    z-index: 1;
}

/* Outline / ikincil CTA: acik bolumlerde plum kontur + plum metin, hover dolgu.
   .btn-secondary HICBIR CSS'te tanimli DEGILDI (2026-07-27 denetimi): canlida
   borderWidth 0px ve seffaf zeminle olculdu, yani looks.html, bos sepet ve iki
   checkout ekraninda ciplak metin olarak render oluyordu. Bu dordu de
   "gezinmeye don" linki, sitedeki esdegerleri (index.html, collection.html)
   zaten .btn-outline; ayri bir ucuncu agirlik icat etmek sistemi bozardi.
   .btn ile SCOPE'LU: looks-data.js'teki .look-add-to-cart.btn-secondary'nin
   shop.css'te kendi pill stili var, ciplak selector onu ezerdi.
   Kenarlik 0.35 idi: porselende 2,15:1, WCAG 1.4.11 metin disi kontrast
   esigi 3:1'in ALTINDA, butonu buton yapan tek cizgi oydu. 0.50 ile
   porselende 3,22:1, sepet panelinde 3,14:1. Hero kendi rengini override
   ettigi icin etkilenmez. */
.btn-outline,
.btn.btn-secondary {
    background: transparent;
    color: var(--clr-ink);
    border: 1px solid rgba(34, 24, 28, 0.5);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn-outline:hover,
.btn.btn-secondary:hover {
    background: var(--clr-ink);
    border-color: var(--clr-ink);
    color: var(--clr-on-dark);
}

/* Bolum sonu CTA sarmalayicisi. collection.css'te tanimliydi ama looks.html
   collection.css'i YUKLEMIYOR, yani /looklar'da buton ortalanmiyordu. */
.col-cta-wrap {
    text-align: center;
    margin-top: 40px;
}

/* ── Hero (koyu gorsel uzeri) butonlari: acik ── */
.hero-cta .btn-primary {
    background: var(--clr-on-dark-rose);
    color: var(--clr-ink);
    border-color: var(--clr-on-dark-rose);
}
.hero-cta .btn-primary::before { background: var(--clr-on-dark); }

.hero-cta .btn-outline {
    color: var(--clr-on-dark);
    border-color: rgba(244, 239, 231, 0.55);
}
.hero-cta .btn-outline:hover {
    background: var(--clr-on-dark);
    border-color: var(--clr-on-dark);
    color: var(--clr-ink);
}

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

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    animation: fadeUp 1s var(--ease-out) 2.2s forwards;
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
    pointer-events: none;
}

.scroll-indicator.faded {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(20px);
    animation: none;
}

.scroll-text {
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: 300;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--clr-text-dim);
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: rgba(196, 160, 160, 0.15);
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--clr-rose);
    animation: scrollDown 2s var(--ease-in-out) infinite;
}

@keyframes scrollDown {
    0% { top: -100%; }
    50% { top: 0; }
    100% { top: 100%; }
}

/* ── Brand Statement Banner ── */
.brand-statement {
    padding: 80px 0;
    background: var(--clr-rose-lighter);
    position: relative;
    overflow: hidden;
}

.brand-statement-inner {
    text-align: center;
    position: relative;
    z-index: 1;
}

.brand-statement-label {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(34, 24, 28, 0.6);
    margin-bottom: 20px;
    display: block;
}

.brand-statement-text {
    font-family: var(--font-body);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: 1.3;
    color: var(--clr-ink);
    max-width: 800px;
    margin: 0 auto;
    font-style: italic;
}

.brand-statement-monogram {
    width: 48px;
    height: 48px;
    margin: 28px auto 0;
    opacity: 0.3;
}

.brand-statement-monogram svg {
    width: 100%;
    height: 100%;
    color: var(--clr-ink);
    stroke-width: 2.5;
}

/* ── Section Header ── */
.section-header {
    margin-bottom: 60px;
}

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

.section-tag {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--clr-rose-text);
    display: inline-block;
    margin-bottom: 20px;
    position: relative;
    padding-left: 0;
}

.section-header.center .section-tag {
    padding-left: 0;
    padding-bottom: 16px;
}

.section-header.center .section-tag::before {
    display: none;
}

.section-title {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-cream);
}

.section-title em {
    font-style: italic;
    color: var(--clr-rose);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-body);
    font-size: 1.1em;
}

.section-desc {
    font-family: var(--font-body);
    font-size: 19px;
    color: var(--clr-text-muted);
    max-width: 550px;
    margin: 20px auto 0;
}

/* ── About Section ── */
.about-section {
    padding: var(--section-padding) 0;
    background: var(--clr-noir-deep);
}

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

.about-lead {
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--clr-cream);
    margin-bottom: 24px;
}

.about-body {
    font-size: 17px;
    color: var(--clr-text-muted);
    margin-bottom: 16px;
    line-height: 1.8;
}

.about-stats {
    display: flex;
    gap: 40px;
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--clr-border);
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 300;
    color: var(--clr-rose);
    line-height: 1;
    letter-spacing: 2px;
}

.stat-suffix {
    font-family: var(--font-heading);
    font-size: 26px;
    color: var(--clr-rose);
}

.stat-label {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    margin-top: 8px;
}

.about-visual {
    position: relative;
}

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

.about-image {
    width: 100%;
    height: 550px;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.about-image-wrapper:hover .about-image {
    transform: scale(1.05);
}

.floating-card {
    position: absolute;
    bottom: 24px;
    right: 24px;
    background: rgba(247, 244, 238, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--clr-border);
    box-shadow: 0 8px 30px rgba(34, 24, 28, 0.16);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.card-icon {
    font-size: 18px;
    color: var(--clr-rose);
}

.card-text {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 1.6;
    color: var(--clr-cream);
    text-transform: uppercase;
}

/* ── Marquee ── */
.marquee-section {
    padding: 36px 0;
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
    overflow: hidden;
    background: var(--clr-noir-deep);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 35s linear infinite;
}

.marquee-content {
    display: flex;
    align-items: center;
    gap: 48px;
    white-space: nowrap;
    padding-right: 48px;
}

.marquee-content span {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 300;
    letter-spacing: 6px;
    color: var(--clr-text-dim);
    text-transform: uppercase;
}

.marquee-dot {
    color: var(--clr-rose) !important;
    font-size: 10px !important;
    opacity: 0.6;
}

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

/* ── Featured Products Section ── */
.featured-section {
    padding: var(--section-padding) 0;
    background: var(--grad-dark);
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 40px;
}

.featured-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--clr-noir-card, var(--clr-noir));
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    transition: transform 0.4s var(--ease-out), border-color 0.3s ease;
}

.featured-card:hover {
    transform: translateY(-6px);
    border-color: var(--clr-rose);
}

.featured-card-image {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
}

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

@media (hover: hover) and (pointer: fine) {
    .featured-card:hover .featured-card-image img {
        transform: scale(1.05);
    }
}

.featured-card-info {
    padding: 20px 24px 24px;
}

.featured-cta {
    text-align: center;
    padding-top: 8px;
}

@media (max-width: 900px) {
    .featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .featured-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ── Categories Section ── */
.categories-section {
    padding: var(--section-padding) 0;
}

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

.category-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    aspect-ratio: 2 / 3;
    border: 1px solid var(--clr-border);
    transition: transform 0.4s var(--ease-out), border-color 0.3s ease;
}

.category-card:hover {
    transform: translateY(-4px);
    border-color: var(--clr-rose);
}

.category-card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.category-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;   /* tam boy fotografta bas kesilmesin */
    transition: transform 0.6s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .category-card:hover .category-card-bg img {
        transform: scale(1.06);
    }
}

.category-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20,14,16,0.82) 0%, rgba(20,14,16,0.45) 38%, rgba(20,14,16,0.08) 100%);
    z-index: 1;
}

.category-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 24px;
    z-index: 2;
}

.category-card-tag {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-on-dark-rose);
    margin-bottom: 8px;
    text-shadow: 0 1px 8px rgba(20,14,16,0.55);
}

.category-card-title {
    font-family: var(--font-heading);
    font-size: var(--fs-lead);
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-on-dark);
    margin-bottom: 6px;
    text-shadow: 0 2px 14px rgba(20,14,16,0.6);
}

.category-card-desc {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--clr-on-dark-muted);
    line-height: 1.5;
    text-shadow: 0 1px 8px rgba(20,14,16,0.5);
}

@media (max-width: 768px) {
    .categories-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .category-card {
        /* 16/9 kutu tam boy editorial fotografin %63'unu kirpiyordu:
           mobilde kategori kartlarindaki modeller boyunsuz gorunuyordu. */
        aspect-ratio: 3 / 4;
    }
}

/* ── Atelier Lead (secondary positioning) ── */
.atelier-lead {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--clr-text-muted);
    margin-top: 12px;
    font-style: italic;
    line-height: 1.6;
}

/* ── Collection Section ── */
.collection-section {
    padding: var(--section-padding) 0;
    background: var(--grad-dark);
}

.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
}

/* ── Collection Slider (index.html) ── */
.collection-slider {
    position: relative;
}

.collection-track {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding: 8px 4px 40px;
    margin: 0 -4px;
}

.collection-track::-webkit-scrollbar {
    display: none;
}

.collection-track .collection-card {
    flex: 0 0 calc((100% - 64px) / 3);
    scroll-snap-align: start;
}

.slider-arrow {
    position: absolute;
    top: calc(50% - 40px);
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--clr-noir-card);
    border: 1px solid var(--clr-border);
    color: var(--clr-cream);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all var(--transition-fast);
    backdrop-filter: blur(8px);
}

.slider-arrow svg {
    width: 20px;
    height: 20px;
}

.slider-arrow:hover:not(:disabled) {
    background: var(--clr-rose);
    color: var(--clr-noir-deep);
    border-color: var(--clr-rose);
    transform: translateY(-50%) scale(1.08);
}

.slider-arrow:disabled {
    opacity: 0.25;
    pointer-events: none;
}

.slider-arrow.prev {
    left: -24px;
}

.slider-arrow.next {
    right: -24px;
}

@media (max-width: 1024px) {
    .collection-track .collection-card {
        flex: 0 0 calc((100% - 32px) / 2);
    }
    .slider-arrow.prev { left: 8px; }
    .slider-arrow.next { right: 8px; }
}

@media (max-width: 600px) {
    .collection-track {
        gap: 20px;
        padding-bottom: 28px;
    }
    .collection-track .collection-card {
        flex: 0 0 82%;
    }
    .slider-arrow {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .collection-track {
        scroll-behavior: auto;
    }
    .hero-bg-img,
    .featured-card-image img,
    .category-card-bg img,
    .card-image {
        transition: none;
    }
    .hero-section:hover .hero-bg-img,
    .featured-card:hover .featured-card-image img,
    .category-card:hover .category-card-bg img,
    .collection-card:hover .card-image {
        transform: none;
    }
}

.collection-card {
    background: var(--clr-noir-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-medium);
}

.collection-card:hover {
    border-color: var(--clr-border-hover);
    transform: translateY(-8px);
    box-shadow: 0 24px 64px rgba(196, 160, 160, 0.06);
}

.card-image-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2/3;
}

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

@media (hover: hover) and (pointer: fine) {
    .collection-card:hover .card-image {
        transform: scale(1.04);
    }
}

.card-overlay {
    position: absolute;
    top: 16px;
    left: 16px;
}

.card-category {
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-rose);
    background: rgba(14, 14, 14, 0.75);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--clr-border);
}

.card-info {
    padding: 28px;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--clr-cream);
}

.card-price {
    display: block;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 2px;
    color: var(--clr-rose-text);
    margin-bottom: 12px;
}

.card-desc {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--clr-text-muted);
    margin-bottom: 20px;
    line-height: 1.6;
}

.card-link {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-rose-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap var(--transition-fast);
}

.card-link:hover {
    gap: 14px;
}

.card-link span {
    transition: transform var(--transition-fast);
}

.card-link:hover span {
    transform: translateX(4px);
}

/* ── Atelier Section ── */
.atelier-section {
    padding: var(--section-padding) 0;
    background: var(--clr-noir);
}

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

.atelier-image-wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}

.atelier-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    pointer-events: none;
}

.atelier-image {
    width: 100%;
    height: 600px;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.atelier-image-wrapper:hover .atelier-image {
    transform: scale(1.03);
}

.process-steps {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.step {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 24px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: all var(--transition-fast);
}

.step:hover {
    background: rgba(196, 160, 160, 0.04);
    border-color: var(--clr-border);
}

.step-number {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 300;
    color: var(--clr-rose);
    opacity: 0.35;
    min-width: 50px;
    letter-spacing: 2px;
    transition: opacity var(--transition-fast);
}

.step:hover .step-number {
    opacity: 1;
}

.step-title {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--clr-cream);
}

.step-desc {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--clr-text-muted);
    line-height: 1.7;
}

/* ── Testimonial ── */
/* ── Atölyeden Notlar ──
   Uydurma testimonial bölümünün yerine geçti. Aşağıdaki .testimonial-*
   kuralları bilerek duruyor: gerçek müşteri yorumu birikince o bölüm geri
   getirilecek. */
.atelier-notes-section {
    padding: 120px 0;
    background: var(--clr-bg-alt);
}

.atelier-notes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 56px;
}

.atelier-note {
    background: var(--clr-bg-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
}

.atelier-note-no {
    display: block;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 3px;
    color: var(--clr-rose-dark);
    margin-bottom: 20px;
}

.atelier-note-title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-text);
    margin-bottom: 14px;
}

.atelier-note p {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
    color: var(--clr-text-muted);
}

@media (max-width: 900px) {
    .atelier-notes { grid-template-columns: 1fr; gap: 20px; }
    .atelier-notes-section { padding: 80px 0; }
}

.testimonial-section {
    padding: var(--section-padding) 0;
    background: var(--clr-noir-deep);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}

.testimonial-carousel {
    position: relative;
    margin-top: 40px;
}

.testimonial-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 0;
}

.testimonial-track::-webkit-scrollbar {
    display: none;
}

.testimonial-wrapper {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: center;
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testimonial-wrapper .testimonial-quote,
.testimonial-wrapper .testimonial-author {
    max-width: 750px;
}

.testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
}

.testimonial-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(196, 160, 160, 0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.testimonial-dots button.active {
    background: var(--clr-rose);
    transform: scale(1.4);
}

.quote-mark {
    font-family: var(--font-body);
    font-size: 120px;
    line-height: 0.6;
    color: var(--clr-rose);
    opacity: 0.25;
    margin-bottom: 20px;
}

.testimonial-quote {
    font-family: var(--font-body);
    font-size: var(--fs-h3);
    font-weight: 300;
    font-style: italic;
    line-height: 1.7;
    color: var(--clr-cream);
    margin-bottom: 32px;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.author-name {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--clr-rose-text);
}

.author-title {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-text-dim);
}

/* ── Contact Section ── */
.contact-section {
    padding: var(--section-padding) 0;
    background: var(--grad-dark);
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.contact-lead {
    font-family: var(--font-body);
    font-size: 18px;
    color: var(--clr-text-muted);
    line-height: 1.8;
    margin-bottom: 40px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.contact-icon {
    font-size: 18px;
    min-width: 32px;
    text-align: center;
    padding-top: 2px;
}

.contact-item strong {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-cream);
    display: block;
    margin-bottom: 2px;
}

.contact-item p {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--clr-text-muted);
}

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

.social-link {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--clr-border);
    border-radius: 50%;
    color: var(--clr-text-muted);
    transition: all var(--transition-fast);
}

.social-link:hover {
    border-color: var(--clr-rose);
    color: var(--clr-rose);
    background: rgba(196, 160, 160, 0.06);
}

/* Ticari bilgi bloğu (iyzico üye işyeri gereksinimi) */
.contact-legal {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--clr-border);
}

.contact-legal strong {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-cream);
    display: block;
    margin-bottom: 10px;
}

.contact-legal p {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.9;
    color: var(--clr-text-muted);
}

.contact-legal a {
    color: var(--clr-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

.contact-legal a:hover {
    color: var(--clr-rose);
}

/* Contact Form */
/* Bal kupu: ekrandan da ekran okuyucudan da gizli, botlar doldurur */
.form-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Gönderim sonucu (canlı bölge, role="status") */
.form-status {
    font-size: 14px;
    line-height: 1.6;
    margin: -4px 0 4px;
}

.form-status:empty { margin: 0; }
.form-status.success { color: var(--clr-success); }
.form-status.error   { color: var(--clr-danger); }

.contact-form-wrapper {
    background: var(--clr-noir-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: 48px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-group {
    position: relative;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 16px 20px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 300;
    color: var(--clr-cream);
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--clr-rose);
}

.form-group label {
    position: absolute;
    top: 16px;
    left: 20px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 300;
    color: var(--clr-text-dim);
    pointer-events: none;
    transition: all var(--transition-fast);
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label {
    top: -8px;
    left: 16px;
    font-size: 11px;
    color: var(--clr-rose);
    background: var(--clr-noir-card);
    padding: 0 6px;
}

/* ── Telefon alani float-label onarimi ────────────────────────────
   validate.js input'u +90 onekli .lj-phone-field kutusuna sardigi icin
   yukaridaki BITISIK KARDES secicileri kopuyor ve etiket hic katlanmiyordu.
   Durum siniflari (lj-phone-group / lj-float) validate.js'ten geliyor.
   Dinlenmede etiket onegin SAGINDAN baslar: 50px onek + 20px input ic
   boslugu = 70px (canlida olculdu). Katlanmis hal yukaridaki kuralin
   birebir aynisi, yani telefon diger bes alanla ayni davraniyor. */
.form-group.lj-phone-group label {
    left: 70px;
}

.form-group.lj-phone-group.lj-float label {
    top: -8px;
    left: 16px;
    font-size: 11px;
    color: var(--clr-rose);
    background: var(--clr-noir-card);
    padding: 0 6px;
}

/* Gercek placeholder ("532 123 45 67") dinlenmede etiketle CIFT BASKI
   yapiyordu. Bosken gizli, odakta format ipucu olarak gorunur. */
.form-group.lj-phone-group input::placeholder {
    color: transparent;
}

.form-group.lj-phone-group input:focus::placeholder {
    color: var(--clr-text-dim);
}

.form-group select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A8F8A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
}

.form-group select option {
    background: var(--clr-noir-deep);
    color: var(--clr-cream);
}

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

/* ── Footer ── */
.footer {
    background: var(--clr-noir-deep);
    border-top: 1px solid var(--clr-border);
    padding: 60px 0 40px;
}

/* ── Footer Grid (multi-column) ── */
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: 48px;
    margin-bottom: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--clr-border);
}

.footer-col {
    min-width: 0;
}

.footer-col--brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-logo {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--clr-cream);
}

.footer-tagline {
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--clr-text-dim);
    margin-top: 8px;
}

.footer-about {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--clr-text-muted);
    margin-top: 16px;
    max-width: 280px;
}

.footer-heading {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-cream);
    margin: 0 0 18px;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-list a {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.footer-list a:hover { color: var(--clr-rose); }

/* Newsletter */
.footer-newsletter-text {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--clr-text-muted);
    margin: 0 0 14px;
}
.footer-newsletter-text strong { color: var(--clr-rose); font-weight: 500; }

.footer-newsletter-row {
    display: flex;
    /* rgba(232,223,214,0.22) idi: eski KOYU temanin acik krem tonu. Footer
       artik porselen oldugu icin acik ustune acik dusuyor, olculen kontrast
       1,12:1, yani kutunun siniri pratikte gorunmuyordu. Bulten %10 kupon
       kancasi, yani donusum noktasi. */
    border: 1px solid var(--clr-field-border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
    transition: border-color 0.25s;
}
.footer-newsletter-row:focus-within { border-color: var(--clr-rose-dark); }

.footer-newsletter-row input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: var(--clr-cream);
    padding: 12px 14px;
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 1px;
    outline: none;
}
.footer-newsletter-row input::placeholder { color: var(--clr-text-dim); }

.footer-newsletter-row button {
    background: var(--clr-rose);
    color: var(--clr-noir-deep);
    border: none;
    padding: 0 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s;
}
.footer-newsletter-row button:hover { background: #d4b3b3; }
.footer-newsletter-row button:disabled { opacity: 0.5; cursor: not-allowed; }

.footer-newsletter-consent {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.5;
    color: var(--clr-text-muted);
    cursor: pointer;
}
.footer-newsletter-consent input {
    margin-top: 3px;
    accent-color: var(--clr-rose);
    flex-shrink: 0;
}
.footer-newsletter-consent a { color: var(--clr-rose); text-decoration: underline; }

.footer-newsletter-msg {
    font-family: var(--font-body);
    font-size: 13px;
    margin: 8px 0 0;
    min-height: 18px;
}
.footer-newsletter-msg.success { color: var(--clr-success); }
.footer-newsletter-msg.error   { color: var(--clr-danger); }
.footer-newsletter-msg .coupon {
    display: inline-block;
    padding: 2px 8px;
    border: 1px dashed var(--clr-rose);
    border-radius: 3px;
    color: var(--clr-rose);
    letter-spacing: 2px;
    font-family: var(--font-heading);
    font-size: 12px;
}

/* iyzico odeme bandi (footer). Logo kitindeki oran 429x32, bozulmasin diye
   yalnizca yukseklik veriliyor, genislik auto. Dar ekranda kucultuluyor. */
.footer-payments {
    display: flex;
    justify-content: center;
    padding: 26px 0 0 0;
}

.footer-payments img {
    height: 26px;
    width: auto;
    max-width: 100%;
    opacity: 0.85;
}

@media (max-width: 600px) {
    .footer-payments img { height: 22px; }
}

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

.footer-bottom p {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 2px;
    color: var(--clr-text-dim);
}

.footer-credit {
    color: var(--clr-rose) !important;
    opacity: 0.4;
}

/* ── Scroll Animations ── */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ── Mobile Menu Overlay ── */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(34, 24, 28, 0.98);
    backdrop-filter: blur(30px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    color: var(--clr-on-dark);
    transition: all 0.5s var(--ease-out);
}

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

.mobile-menu-links {
    list-style: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.mobile-menu-links a {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 300;
    color: var(--clr-on-dark);
    letter-spacing: 6px;
    text-transform: uppercase;
    transition: color var(--transition-fast);
    display: block;
    opacity: 0;
    transform: translateY(30px);
}

.mobile-menu-overlay.active .mobile-menu-links a {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), color 0.3s;
}

.mobile-menu-links a:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu-links a:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu-links a:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu-links a:nth-child(4) { transition-delay: 0.25s; }
.mobile-menu-links a:nth-child(5) { transition-delay: 0.3s; }

.mobile-menu-links a:hover {
    color: var(--clr-rose);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .about-grid,
    .atelier-layout,
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

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

@media (max-width: 768px) {
    .about-image {
        height: 400px;
    }

    .atelier-image {
        height: 400px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px 24px;
    }
    .footer-col--brand,
    .footer-col--newsletter {
        grid-column: 1 / -1;
    }
    .footer-col--brand { align-items: flex-start; }
    .footer-about { max-width: none; }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .contact-form-wrapper {
        padding: 32px 24px;
    }

    .about-stats {
        gap: 24px;
    }

    .stat-number {
        font-size: 32px;
    }

    .step {
        padding: 16px;
    }

    .brand-statement {
        padding: 60px 20px;
    }
}

@media (max-width: 480px) {
    .hero-cta {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .about-stats {
        flex-direction: column;
        gap: 20px;
    }
}

/* ═══════════════════════════════════════════
   Skeleton Loaders + Empty States (A11)
═══════════════════════════════════════════ */
@keyframes ldj-skeleton-pulse {
    0%   { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.ldj-skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(212,175,155,0.08) 50%,
        rgba(255,255,255,0.04) 100%);
    background-size: 200px 100%;
    background-repeat: no-repeat;
    animation: ldj-skeleton-pulse 1.4s ease-in-out infinite;
    border-radius: 4px;
    display: block;
}

.ldj-skeleton-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0;
    background: rgba(26, 15, 23, 0.3);
    border: 1px solid rgba(212, 175, 155, 0.08);
    border-radius: 6px;
    overflow: hidden;
}

.ldj-skeleton-card .ldj-skeleton-img {
    aspect-ratio: 3/4;
    width: 100%;
    border-radius: 0;
}

.ldj-skeleton-card .ldj-skeleton-body {
    padding: 14px 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ldj-skeleton-line {
    height: 10px;
    border-radius: 3px;
}
.ldj-skeleton-line.w-60 { width: 60%; }
.ldj-skeleton-line.w-40 { width: 40%; }
.ldj-skeleton-line.w-80 { width: 80%; }

.ldj-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: var(--clr-text-muted, #b8a89b);
    font-family: var(--font-body, 'Cormorant Garamond', serif);
}
.ldj-empty-state .ldj-empty-icon {
    font-size: 48px;
    line-height: 1;
    color: var(--clr-rose, #d4af9b);
    margin-bottom: 18px;
    opacity: 0.6;
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-style: italic;
}
.ldj-empty-state .ldj-empty-title {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: 22px;
    color: var(--clr-text, #e8dfd6);
    margin-bottom: 8px;
    letter-spacing: 1px;
}
.ldj-empty-state .ldj-empty-sub {
    font-size: 15px;
    max-width: 420px;
    margin: 0 auto 22px;
    line-height: 1.6;
}
.ldj-empty-state .ldj-empty-cta {
    display: inline-block;
    padding: 12px 28px;
    border: 1px solid rgba(34, 24, 28, 0.35);
    color: var(--clr-ink);
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 14px;
    text-decoration: none;
    transition: background .25s ease, color .25s ease;
}
.ldj-empty-state .ldj-empty-cta:hover {
    background: var(--clr-rose, #d4af9b);
    color: #1a0f17;
}

/* ═══════════════════════════════════════════
   Look Beden Secim Modali (look-size-modal.js)
   Magaza karti, koleksiyon karti ve urun sayfasi look bandindan acilir.
   Beden secilmeden sepete urun eklenmesini engeller.
═══════════════════════════════════════════ */
.ljsm-wrap { position: fixed; inset: 0; z-index: 1200; display: none; }
.ljsm-wrap.open { display: block; }
.ljsm-overlay { position: absolute; inset: 0; background: rgba(34, 24, 28, 0.45); }

.ljsm-modal {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 32px));
    max-height: min(84vh, 720px);
    display: flex; flex-direction: column;
    background: var(--clr-bg-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    box-shadow: 0 24px 60px rgba(34, 24, 28, 0.18);
}

.ljsm-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; padding: 24px 28px 16px;
    border-bottom: 1px solid var(--clr-border);
}
.ljsm-eyebrow {
    display: block; font-family: var(--font-heading); font-size: 10px;
    letter-spacing: 3px; text-transform: uppercase; color: var(--clr-rose-text);
    margin-bottom: 6px;
}
.ljsm-title {
    font-family: var(--font-heading); font-size: 22px; font-weight: 300;
    letter-spacing: 1px; color: var(--clr-text); margin: 0;
}
.ljsm-close {
    background: none; border: none; padding: 8px; margin: -8px -8px 0 0;
    font-size: 15px; color: var(--clr-text-muted); cursor: pointer; line-height: 1;
}
.ljsm-close:hover { color: var(--clr-text); }
.ljsm-close:focus-visible { outline: 2px solid var(--clr-ink); outline-offset: 2px; }

.ljsm-body { overflow-y: auto; padding: 4px 28px; }

.ljsm-piece {
    display: flex; gap: 16px; padding: 18px 0;
    border-bottom: 1px solid var(--clr-border);
}
.ljsm-piece:last-child { border-bottom: none; }
.ljsm-piece-img {
    width: 64px; height: 96px;   /* 2:3 */
    object-fit: cover; object-position: center 25%;
    border-radius: var(--radius-sm); flex: none;
}
.ljsm-piece-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ljsm-piece-role {
    font-family: var(--font-heading); font-size: 9px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--clr-text-muted);
}
.ljsm-piece-title {
    font-family: var(--font-heading); font-size: 15px; letter-spacing: 1px;
    color: var(--clr-text);
}
.ljsm-piece-price {
    font-family: var(--font-heading); font-size: 13px;
    color: var(--clr-rose-text); letter-spacing: 1px;
}
.ljsm-out-note {
    margin: 6px 0 0; font-family: var(--font-body); font-size: 12px;
    font-style: italic; color: var(--clr-text-muted);
}

.ljsm-sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ljsm-sizes.needs-size { outline: 1px solid var(--clr-rose-dark); outline-offset: 4px; border-radius: var(--radius-sm); }

.ljsm-chip {
    position: relative; min-width: 48px; min-height: 44px; padding: 0 14px;
    background: var(--clr-bg); border: 1px solid var(--clr-field-border);
    border-radius: var(--radius-sm); color: var(--clr-text);
    font-family: var(--font-heading); font-size: 12px; letter-spacing: 2px;
    cursor: pointer; transition: all var(--transition-fast);
}
.ljsm-chip:hover:not(:disabled) { border-color: var(--clr-rose); color: var(--clr-rose-text); }
.ljsm-chip.active { background: var(--clr-ink); border-color: var(--clr-ink); color: var(--clr-on-dark); }
.ljsm-chip:disabled { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }
.ljsm-chip:focus-visible { outline: 2px solid var(--clr-ink); outline-offset: 2px; }
.ljsm-chip .size-low {
    position: absolute; top: -8px; right: -6px;
    background: var(--clr-ink); color: var(--clr-on-dark);
    font-family: var(--font-body); font-size: 9px; letter-spacing: 0;
    padding: 1px 6px; border-radius: 8px; text-transform: none;
}

.ljsm-footer {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px 28px 24px; border-top: 1px solid var(--clr-border);
}
.ljsm-total-row { display: flex; align-items: baseline; justify-content: space-between; }
.ljsm-total-label {
    font-family: var(--font-heading); font-size: 10px; letter-spacing: 3px;
    text-transform: uppercase; color: var(--clr-text-muted);
}
.ljsm-total { font-family: var(--font-heading); font-size: 20px; color: var(--clr-text); letter-spacing: 1px; }
.ljsm-price-old { color: var(--clr-text-muted); font-size: 14px; margin-right: 6px; }
.ljsm-price-new { color: var(--clr-rose-text); }
.ljsm-discount-pill {
    font-family: var(--font-body); font-size: 11px; color: var(--clr-on-dark);
    background: var(--clr-ink); border-radius: var(--radius-pill); padding: 2px 8px;
    vertical-align: middle;
}
.ljsm-hint {
    min-height: 16px; margin: 0; font-family: var(--font-body);
    font-size: 12px; font-style: italic; color: var(--clr-rose-text);
}
.ljsm-add {
    display: flex; align-items: center; justify-content: center;
    /* rose dolgu + beyaz metin 3,03:1 idi. Sitenin kanonik birincil butonu
       (.btn-primary) ink dolgu kullaniyor: 13,6:1. */
    background: var(--clr-ink); border: 1px solid var(--clr-ink); color: var(--clr-on-dark);
    font-family: var(--font-heading); font-size: 11px; letter-spacing: 3px;
    text-transform: uppercase; padding: 16px 28px; width: 100%;
    border-radius: var(--radius-pill); cursor: pointer;
    transition: all var(--transition-fast);
}
.ljsm-add:hover:not(.is-locked) { background: var(--clr-rose-dark); border-color: var(--clr-rose-dark); color: var(--clr-on-dark); }
.ljsm-add:focus-visible { outline: 2px solid var(--clr-ink); outline-offset: 2px; }
.ljsm-add.is-locked { background: var(--clr-surface); border-color: var(--clr-field-border); color: #5A4E53; cursor: not-allowed; }
.ljsm-detail-link {
    align-self: center; font-family: var(--font-heading); font-size: 10px;
    letter-spacing: 2px; text-transform: uppercase; color: var(--clr-text-muted);
    text-decoration: none;
}
.ljsm-detail-link:hover { color: var(--clr-rose-text); }

@media (max-width: 640px) {
    .ljsm-modal {
        top: auto; left: 0; right: 0; bottom: 0; transform: none;
        width: 100%; max-height: 88vh;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        border-left: none; border-right: none; border-bottom: none;
    }
    .ljsm-header, .ljsm-body, .ljsm-footer { padding-left: 20px; padding-right: 20px; }
}

.ljsm-savings {
    margin: 0;
    font-family: var(--font-body);
    font-size: 13px;
    font-style: italic;
    color: var(--clr-rose-text);
}

/* ═══════════════════════════════════════════
   Telefon alani: sabit +90 oneki (assets/js/validate.js bagliyor)
   Kullanici yalnizca 10 hane girer, DB'ye +905XXXXXXXXX yazilir.
═══════════════════════════════════════════ */
.lj-phone-field {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--clr-field-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--clr-bg);
}
.lj-phone-field:focus-within {
    border-color: var(--clr-ink);
    outline: 2px solid var(--clr-ink);
    outline-offset: 1px;
}
.lj-phone-prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--clr-surface, rgba(34, 24, 28, 0.05));
    border-right: 1px solid var(--clr-field-border);
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--clr-text-muted);
    white-space: nowrap;
}
.lj-phone-field input {
    flex: 1;
    min-width: 0;
    border: none !important;
    outline: none !important;
    background: transparent;
    border-radius: 0;
}

/* ═══════════════════════════════════════════
   Urun karti: baslik ve gorsel artik tiklanabilir + koleksiyon satiri
   Onceden kartta tek link "Detaylar" idi; urun adina tiklamak hicbir sey
   yapmiyordu. Kartin tamami <a> yapilmadi, cunku icinde favori butonu var
   (ic ice interaktif eleman gecersiz HTML uretir).
═══════════════════════════════════════════ */
.card-image-link {
    display: block;
    width: 100%;
    height: 100%;
}
.card-image-link:focus-visible {
    outline: 2px solid var(--clr-ink);
    outline-offset: -2px;
}

.card-title a {
    color: inherit;
    text-decoration: none;
}
.card-title a:hover {
    color: var(--clr-rose-text);
}
.card-title a:focus-visible {
    outline: 2px solid var(--clr-ink);
    outline-offset: 2px;
    border-radius: 2px;
}

.card-collection {
    display: block;
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-rose-text);
    text-decoration: none;
    margin-bottom: 6px;
}
.card-collection:hover { text-decoration: underline; }
.card-collection:focus-visible {
    outline: 2px solid var(--clr-ink);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════
   Ana sayfa koleksiyon kartlari (#collection)
   Tek koleksiyonda tek yatay kart; koleksiyon sayisi artinca alt alta dizilir.
═══════════════════════════════════════════ */
.collections-section {
    padding: var(--section-padding) 0;
}
.collections-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.collection-banner {
    display: grid;
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    /* stretch DEĞİL center: görsel artık kendi oranında (kırpılmıyor), ama
       hücre metin sütunu kadar uzuyordu ve görselin ALTINDA kocaman bir
       boşluk kalıyordu. Ortalayınca boşluk alta yığılmak yerine üste ve
       alta dengeli dağılıyor. */
    align-items: center;
    background: var(--clr-bg-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.collection-banner:hover {
    border-color: var(--clr-ink);
    transform: translateY(-3px);
}
.collection-banner:focus-visible {
    outline: 2px solid var(--clr-ink);
    outline-offset: 3px;
}
/* Kapak görseli KIRPILMIYOR (2026-08-02 kararı, koleksiyon hero'suyla aynı).
   Önceden `aspect-ratio: 2/3` + `object-fit: cover` + `center 25%` vardı,
   yani dikey editorial kare varsayılıyordu. 16:9 kapak yüklenince görselin
   büyük kısmı kesiliyordu. Artık hangi oranda yüklenirse o şekilde duruyor.
   Bunun bedeli: farklı oranlarda görseller yüklenirse kartların yüksekliği
   birbirinden farklı olur. Tek tip görünüm isteniyorsa koleksiyon
   kapakları aynı oranda yüklenmeli. */
.collection-banner-img {
    overflow: hidden;
    background: var(--clr-bg-alt, var(--clr-noir));
}
.collection-banner-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.8s var(--ease-out);
}
.collection-banner:hover .collection-banner-img img { transform: scale(1.04); }

.collection-banner-info {
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}
.collection-banner-label {
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--clr-rose-text);
}
.collection-banner-title {
    font-family: var(--font-heading);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-text);
    margin: 0;
}
.collection-banner-tagline {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 17px;
    color: var(--clr-text-muted);
    margin: 0;
}
.collection-banner-teaser {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.75;
    color: var(--clr-text);
    margin: 0;
}
.collection-banner-meta {
    display: flex;
    gap: 18px;
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}
.collection-banner-cta {
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-text);
    margin-top: 6px;
}
.collection-banner-cta span {
    margin-left: 6px;
    transition: margin var(--transition-fast);
}
.collection-banner:hover .collection-banner-cta span { margin-left: 14px; }

@media (max-width: 860px) {
    .collection-banner { grid-template-columns: 1fr; }
    .collection-banner-img { aspect-ratio: 3 / 4; max-height: none; }
    .collection-banner-info { padding: 30px 24px 36px; }
}

/* ═══════════════════════════════════════════
   Karakter sayaci (assets/js/validate.js bindCounters)
   Uzun serbest metin alanlarinin altinda "N karakter kaldi" yazar.
   maxlength sessizce keser, kullanici neden yazamadigini anlamasin diye.
═══════════════════════════════════════════ */
.lj-counter {
    display: block;
    margin-top: 6px;
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    text-align: right;
}

/* Sinira dayaninca: --clr-danger (#A32B2B) porselende 6,11:1 (AA). */
.lj-counter--dolu {
    color: var(--clr-danger);
}

/* Katalog yüklenemedi uyarısı (common.js basar). Ürün gösterilemediğinde
   boş sayfayı açıklar; statik yedek kaldırıldığı için bu durum artık
   gerçekten mümkün. */
.lj-katalog-hata {
    max-width: 620px;
    margin: 120px auto 40px;
    padding: 28px 32px;
    border: 1px solid rgba(158, 42, 43, 0.3);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    background: rgba(158, 42, 43, 0.05);
    text-align: center;
}

.lj-katalog-hata p {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--clr-ink);
    margin: 0 0 10px;
}

.lj-katalog-hata p:last-of-type {
    color: var(--clr-text-muted);
    font-size: 15px;
    margin-bottom: 22px;
}

.lj-katalog-hata a {
    color: var(--clr-rose-text);
    text-decoration: underline;
}