/* ==========================================================================
   Nine Visuals — Tasarım sistemi
   Palet, tipografi ve grid kararları brief §16 "Görsel tasarım sistemi"nden alınmıştır.
   Mobil öncelikli yazılmıştır: temel kurallar mobil, medya sorguları yukarı doğru büyür.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokenlar */
:root {
    /* ---------- 1.1 İlkel değerler
       Ne oldukları ile adlandırılır, rol taşımazlar. Yalnızca anlamsal
       katman bunları okur; bileşenler asla doğrudan kullanmaz. ---------- */

    /* Marka çekirdeği (brief §16) — beş rengin hiçbiri değişmedi. */
    --obsidian: #111111;
    --ivory: #F4EFE7;
    --taupe: #B7A58A;
    --sand: #D8C9B5;
    --graphite: #343434;

    /* Altın ailesinin uçları. Taupe tek başına düz bir bej okunuyor; bir
       gradyanın "altın" olarak okunabilmesi için parlak ve derin bir uca
       ihtiyacı var. Palet tek ailede kalır, yeni bir renk ailesi girmez. */
    --champagne: #E6D2AC;
    --champagne-lift: #F3E7D2;
    --bronze: #8A6E45;

    /* Işık kağıdı. Ivory sıcak ama koyu bir bej; sayfa zemini olarak siteyi
       kapalı gösteriyordu. Porselen açılışı aydınlatır, ivory bir alt bant
       olarak paletteki yerini korur. */
    --porcelain: #FBF8F3;
    --paper: #ffffff;

    /* İkincil vurgu — derin çam. Dekorasyon için değil: yalnızca durum
       bildiren birkaç işlevsel noktada kullanılır (form odağı, başarı,
       aktif dil, kontrol listesi imi). */
    --pine: #1F5B54;
    --pine-deep: #17443F;

    /* Verdigris — çamın parlak üyesi. Palet baştan sona 36–38° ton bandındaydı:
       hiçbir renk diğerine karşı durmadığı için sakin ama sönük okuyordu.
       Altının tam karşısındaki bu ton gerilimi tek başına kuruyor. Yüzey ve
       gradyan rengidir; açık zeminde 3.9:1 ile gövde metnini taşımaz, metin
       gerektiğinde --pine-deep (10.3:1) devreye girer. */
    --verdigris: #2F8A7E;
    --verdigris-lift: #4FA89A;
    /* Metin seçimi için opak açık ton. Yarı saydam olamaz: koyu bölümlerde
       saydam bir vurgu zeminle karışıp yazıyı okunmaz bırakıyor. */
    --verdigris-tint: #CDE3E0;

    /* Türetilmiş tonlar */
    --obsidian-soft: #1a1a1a;
    --obsidian-line: rgba(244, 239, 231, 0.14);
    --ivory-line: rgba(17, 17, 17, 0.10);
    --graphite-muted: #6b6b6b;
    --taupe-soft: rgba(183, 165, 138, 0.16);
    --champagne-soft: rgba(230, 210, 172, 0.32);
    --pine-soft: rgba(31, 91, 84, 0.10);
    /* Champagne Taupe'un koyu tonu: açık zeminde metin kontrastı için (AA). */
    --taupe-ink: #6F5D42;
    --success: #3f6b52;
    /* Daha önce hiç tanımlanmamıştı: .form-field .req ve doğrulama kenarlığı
       geçersiz bir değer okuyup rengini hiç almıyordu. */
    --danger: #A3382F;

    /* ---------- 1.2 Anlamsal roller — açık zemin (varsayılan) ---------- */
    --bg: var(--porcelain);
    --bg-alt: var(--ivory);
    --surface: var(--paper);
    /* Gövde metni graphite'ten bir tık koyulaştı: yeni gövde fontunun çizgisi
       daha açık düşüyor, aynı gri onu zayıf bırakıyordu. */
    --text: #2A2724;
    --heading: var(--obsidian);
    --muted: var(--graphite-muted);
    --line: var(--ivory-line);
    /* Brief §16: Champagne Taupe = vurgu, küçük etiket, çizgi, hover.
       Dekoratif kullanımda ham taupe, metinde okunabilir koyu tonu kullanılır. */
    --accent: var(--taupe);
    --accent-ink: var(--taupe-ink);
    --focus-ring: var(--bronze);

    /* ---------- 1.3 Yüzey karışımları
       Işık stüdyonun kendi malzemesinden geliyor: hero'nun ışıması bir
       softbox, kum bandı cyclorama'nın gölge tarafı. Gradyanlar süs değil,
       zeminin nereden aydınlandığını söyleyen bilgi. ---------- */
    --grad-gold: linear-gradient(135deg, var(--champagne) 0%, var(--taupe) 55%, var(--bronze) 100%);
    --grad-ink: linear-gradient(140deg, #1c1c1c 0%, #111111 58%, #0b0b0b 100%);
    --grad-paper: linear-gradient(180deg, #ffffff 0%, var(--porcelain) 100%);
    --grad-sand: linear-gradient(150deg, var(--champagne-lift) 0%, var(--sand) 100%);
    --glow-warm: radial-gradient(58% 52% at 76% 6%, rgba(230, 210, 172, 0.58) 0%, rgba(230, 210, 172, 0) 70%);
    /* Hero'nun ikinci ışığı kum yerine patina: softbox sağ üstten sıcak,
       sol alt köşe soğuk düşüyor. Fotoğrafçının kendi kurulumu — ve açık
       zeminde sıcak/soğuk gerilimi kuran şey de bu. */
    --glow-patina: radial-gradient(52% 46% at 4% 94%, rgba(47, 138, 126, 0.20) 0%, rgba(47, 138, 126, 0) 72%);


    /* Gölge merdiveni: her basamak bir yüzeyin ne kadar yükseldiğini söyler,
       hepsine aynı gri bulut serilmez. Tonlar sıcak — nötr gri, kağıdın
       üzerinde kirli görünüyor. */
    --shadow-1: 0 1px 2px rgba(17, 17, 17, 0.04), 0 2px 10px rgba(17, 17, 17, 0.04);
    --shadow-2: 0 2px 4px rgba(17, 17, 17, 0.03), 0 14px 32px -10px rgba(17, 17, 17, 0.14);
    --shadow-gold: 0 16px 38px -12px rgba(138, 110, 69, 0.34);

    /* ---------- 1.4 Bileşen düğmeleri ----------
       Buton renkleri token üzerinden gelir; koyu yüzeyler bunları tek yerden
       çevirir. --btn-bg düz renktir (ghost hover'ı onu metin rengi olarak da
       okur); --btn-surface asıl boyadır ve gradyan olabilir. */
    --btn-bg: var(--obsidian);
    --btn-surface: var(--grad-ink);
    --btn-ink: var(--ivory);
    --btn-ghost-ink: var(--heading);
    --btn-ghost-line: rgba(17, 17, 17, 0.26);

    /* Tipografi */
    /* Fraunces: düşük kontrastlı, optik boyutlu değişken serif. Didone'nin
       saç inceliğindeki serifleri web boyutlarında kırılıyor ve başlığı
       zayıf gösteriyordu; Fraunces gövdesini her boyutta koruyor.
       Plus Jakarta Sans: geniş harf gövdeli, kurumsal netlikte sans. */
    --font-display: "Fraunces", "Bodoni Moda", "Playfair Display", Georgia, "Times New Roman", serif;
    --font-body: "Plus Jakarta Sans", "Manrope", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* Başlık ağırlığı: 400 Fraunces'te fazla ince kalıyor. */
    --fw-display: 600;

    --fs-kicker: 0.6875rem;
    --fs-small: 0.8125rem;
    --fs-body: 1rem;
    --fs-lead: clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
    --fs-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
    --fs-h2: clamp(1.75rem, 1.35rem + 1.8vw, 3rem);
    /* Fraunces'in x yüksekliği Bodoni'den belirgin büyük; aynı punto daha
       iri okunuyor. Üst uçlar bir basamak geri alındı. */
    --fs-h1: clamp(2.25rem, 1.65rem + 2.7vw, 3.9rem);
    --fs-display: clamp(2.5rem, 1.75rem + 3.5vw, 4.75rem);

    --lh-tight: 1.08;
    --lh-heading: 1.16;
    --lh-body: 1.65;
    --ls-kicker: 0.16em;
    --ls-display: -0.022em;

    /* Boşluk skalası */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 2.75rem;
    --sp-8: 3.5rem;
    --sp-9: 5rem;

    /* Bölüm boşluğu: mobil 56–80, masaüstü 96–144 (brief §16) */
    --section-y: 3.5rem;
    --section-y-lg: 4.5rem;

    /* Ölçüler */
    --container: 1360px;
    --container-narrow: 820px;
    --gutter: 1.25rem;
    /* Yarıçap merdiveni: tek bir değer her yere uygulanmaz, rol belirler.
       2px'lik keskin köşe sayfayı sert ve ucuz gösteriyordu. */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-media: 16px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Hareket — yavaş ve kontrollü (brief §16) */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast: 200ms;
    --dur: 420ms;
    --dur-slow: 900ms;

    --header-h: 68px;
}

@media (min-width: 768px) {
    :root {
        --gutter: 1.75rem;
        --section-y: 5rem;
        --section-y-lg: 6.5rem;
        --header-h: 80px;
    }
}

@media (min-width: 1024px) {
    :root {
        --gutter: 2.5rem;
        --section-y: 6rem;
        --section-y-lg: 9rem;
    }
}

/* --------------------------------------------------------------- 2. Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* hidden özniteliği her zaman kazanır.
   Bileşenlerin kendi display kuralları (örn. .work-card{display:flex}) tarayıcının
   [hidden]{display:none} kuralını eziyordu; bu yüzden portföy filtresi kartları
   gizleyemiyor, çerez tercihleri paneli de hep açık geliyordu. */
[hidden] {
    display: none !important;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

img,
video {
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    color: var(--heading);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-display);
    text-wrap: balance;
    /* Fraunces'in opsz ekseni: küçük başlıkta serifler kalınlaşır, büyük
       başlıkta incelir. Tarayıcı ekseni kendisi sürsün. */
    font-optical-sizing: auto;
}

p {
    margin: 0 0 var(--sp-4);
    text-wrap: pretty;
}

p:last-child {
    margin-bottom: 0;
}

ul, ol {
    margin: 0 0 var(--sp-4);
    padding-left: 1.15rem;
}

a {
    color: inherit;
    text-decoration-color: rgba(183, 165, 138, 0.75);
    text-underline-offset: 0.22em;
    transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}

a:hover {
    color: var(--accent-ink);
    text-decoration-color: currentColor;
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: var(--sp-7) 0;
}

/* Şampanya vurgu, porselen zeminin neredeyse aynısıydı: metni seçtiğinizde
   seçildiği zor fark ediliyordu. Patina tonu hem ayrışıyor hem 14:1 okunuyor. */
::selection {
    background: var(--verdigris-tint);
    color: var(--obsidian);
}

/* Klavye erişilebilirliği (brief §19) */
:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--obsidian);
    color: var(--ivory);
    padding: 0.75rem 1.25rem;
    font-size: var(--fs-small);
}

.skip-link:focus {
    left: 0;
}

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

/* --------------------------------------------------------------- 3. Tipografi yardımcıları */
.h1, h1 { font-size: var(--fs-h1); }
.h2, h2 { font-size: var(--fs-h2); }
.h3, h3 { font-size: var(--fs-h3); }
.h4, h4 { font-size: var(--fs-h4); }

.display {
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
}

/* Büyük harf yalnızca kicker ve menü etiketlerinde (brief §16) */
.kicker {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--fs-kicker);
    font-weight: 600;
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--accent-ink);
    margin: 0 0 var(--sp-4);
}

.kicker--line::before {
    content: "";
    display: inline-block;
    width: 34px;
    height: 2px;
    border-radius: 2px;
    /* 34px'te altın gradyanın üç durağı ayırt edilmiyordu; iki uçlu bir
       geçiş hem okunuyor hem her bölüm başlığına bir patina notu bırakıyor. */
    background: linear-gradient(90deg, var(--taupe) 0%, var(--verdigris) 100%);
    vertical-align: middle;
    margin-right: 0.75rem;
}

.lead {
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--text);
}

.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.serif { font-family: var(--font-display); }
.measure { max-width: 62ch; }
.measure-narrow { max-width: 48ch; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------- 4. Layout */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding-block: var(--section-y);
}

.section--lg {
    padding-block: var(--section-y-lg);
}

.section--tight {
    padding-block: calc(var(--section-y) * 0.66);
}

/* Koyu zemin bölümü.
   Site artık açık baskın; koyu bantlar noktalama işareti gibi çalışıyor.
   Bu yüzden bant düz siyah bir levha olarak değil, sağ üstten aydınlatılmış
   bir yüzey olarak kuruluyor. */
.section--dark {
    position: relative;
    isolation: isolate;
    background: var(--grad-ink);
    --bg: var(--obsidian);
    --surface: var(--obsidian-soft);
    --text: rgba(244, 239, 231, 0.80);
    --heading: var(--ivory);
    --muted: rgba(244, 239, 231, 0.56);
    --line: var(--obsidian-line);
    --accent: var(--champagne);
    /* Koyu zeminde metin vurgusu taupe yerine şampanya: hem daha canlı
       hem kontrastı yüksek. */
    --accent-ink: var(--champagne);
    --focus-ring: var(--champagne);
    color: var(--text);
}

.section--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(46% 62% at 82% -4%, rgba(230, 210, 172, 0.15) 0%, rgba(230, 210, 172, 0) 68%);
    pointer-events: none;
}


.section--sand {
    background: var(--grad-sand);
    --bg: var(--sand);
    --surface: rgba(255, 255, 255, 0.74);
    --text: #3a342b;
    --heading: var(--obsidian);
    --muted: #6f6858;
    --line: rgba(17, 17, 17, 0.12);
    --accent-ink: #6B5836;
}

.section--alt {
    background: var(--bg-alt);
    --surface: var(--paper);
}

.section-head {
    margin-bottom: var(--sp-7);
}

.section-head--center {
    text-align: center;
    margin-inline: auto;
    max-width: 46rem;
}

.section-head p {
    margin-top: var(--sp-4);
    max-width: 46rem;
}

/* 12 kolonluk grid (mobilde 4) */
.grid {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-6); }
}

.cols-2,
.cols-3,
.cols-4 {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
    .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
    .cols-2 { gap: var(--sp-8); }
}

.split {
    display: grid;
    gap: var(--sp-6);
    align-items: center;
}

@media (min-width: 900px) {
    .split {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-9);
    }

    .split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
    .split--wide-right { grid-template-columns: 0.85fr 1.15fr; }
    .split--top { align-items: start; }
}

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

/* --------------------------------------------------------------- 5. Butonlar */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.95rem 1.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    /* --btn-surface asıl boyadır ve gradyan olabilir; --btn-bg düz renktir
       ve ghost hover'ında metin rengi olarak da okunur. */
    background: var(--btn-surface);
    color: var(--btn-ink);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-align: center;
    line-height: 1.2;
    box-shadow: var(--shadow-1);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

/* Ana eylem hover'da altına dönüyor: sayfadaki tek doygun renk hareketi. */
.btn:hover {
    background: var(--grad-gold);
    color: var(--obsidian);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

.btn:active { transform: translateY(0); box-shadow: var(--shadow-1); }

.btn--ghost {
    background: transparent;
    color: var(--btn-ghost-ink);
    border-color: var(--btn-ghost-line);
    box-shadow: none;
}

.btn--ghost:hover {
    background: var(--btn-ghost-ink);
    color: var(--btn-bg);
    border-color: var(--btn-ghost-ink);
    box-shadow: var(--shadow-1);
}

/* --------------------------------------------------------------------------
   Koyu yüzeyler tek yerden tanımlanır.

   Butonun kendi rengi token üzerinden geldiği için, koyu bir zemine yeni bir
   bölüm eklendiğinde yalnızca bu listeye yazılması yeterlidir. Daha önce
   yalnızca .section--dark düzeltiliyordu; hero, çerez bandı ve mobil menüdeki
   butonlar zeminle aynı renge düşüp görünmez oluyordu.
   -------------------------------------------------------------------------- */
.section--dark,
.cookie-banner,
.nav-mobile,
.site-footer {
    --btn-bg: var(--ivory);
    --btn-surface: linear-gradient(150deg, #FFFCF6 0%, #F0E9DE 100%);
    --btn-ink: var(--obsidian);
    --btn-ghost-ink: var(--ivory);
    --btn-ghost-line: rgba(244, 239, 231, 0.40);
    --accent-ink: var(--champagne);
}

/* Koyu kapsayıcılar yalnızca buton ve vurgu renklerini çeviriyordu; .muted
   gibi genel roller açık zemin değerinde kalıyordu. Mobil menüdeki Instagram
   künyesi bu yüzden siyah üzerine #6b6b6b düşüp 3.5:1'de kalıyordu (AA 4.5).
   Roller tek yerden çevrilir — bileşenlerin temayı bilmesi gerekmez.
   .section--dark kendi bloğunda zaten çeviriyor. */
.cookie-banner,
.nav-mobile,
.site-footer {
    --text: rgba(244, 239, 231, 0.80);
    --heading: var(--ivory);
    --muted: rgba(244, 239, 231, 0.62);
    --line: var(--obsidian-line);
    --surface: var(--obsidian-soft);
    --focus-ring: var(--champagne);
}

/* Kapsayıcıların genel bağlantı renk kuralları (örn. .nav-mobile a{color:ivory})
   seçici önceliği yüzünden .btn rengini eziyordu; mobil menüdeki buton ivory
   zeminde ivory yazıya düşüp okunmaz oluyordu. */
.nav-mobile .btn,
.site-footer .btn,
.cookie-banner .btn,
.site-header .btn { color: var(--btn-ink); }

.nav-mobile .btn--ghost,
.site-footer .btn--ghost,
.cookie-banner .btn--ghost,
.site-header .btn--ghost { color: var(--btn-ghost-ink); }

/* Overlay başlık artık aydınlık bir hero'nun üzerinde duruyor; butonları da
   sayfanın geri kalanıyla aynı: koyu mürekkep, açık yazı. */
.site-header--overlay,
.site-header:not(.site-header--overlay) {
    --btn-bg: var(--obsidian);
    --btn-surface: var(--grad-ink);
    --btn-ink: var(--ivory);
    --btn-ghost-ink: var(--heading);
    --btn-ghost-line: rgba(17, 17, 17, 0.26);
}

.btn--sm { padding: 0.65rem 1.15rem; font-size: 0.8125rem; }
.btn--block { display: flex; width: 100%; }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
}

@media (max-width: 479px) {
    .btn-row .btn { width: 100%; }
}

/* Ok işaretli metin bağlantısı */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--heading);
    /* Alt çizgi her zaman durur — bağlantı olduğu rengden değil çizgiden
       anlaşılmalı. Hover'da üzerine iş kartındakiyle aynı altın→patina
       süpürmesi biniyor: aynı jest, aynı anlam, iki farklı bileşende. */
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    background-image: linear-gradient(90deg, var(--taupe) 0%, var(--verdigris) 100%);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition: color var(--dur-fast) var(--ease), background-size var(--dur) var(--ease);
}

.link-arrow svg { transition: transform var(--dur-fast) var(--ease); }

.link-arrow:hover,
.link-arrow:focus-visible {
    color: var(--accent-ink);
    background-size: 100% 2px;
}

.link-arrow:hover svg,
.link-arrow:focus-visible svg { transform: translateX(4px); }

/* Koyu zeminde patina ucu kararıyor. */
.section--dark .link-arrow {
    background-image: linear-gradient(90deg, var(--champagne) 0%, var(--verdigris-lift) 100%);
}

/* --------------------------------------------------------------- 6. Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(251, 248, 243, 0.88);
    backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}

/* Kaydırınca beliren ayrım çizgisi nötr bir siyah tondu; aynı ağırlıkta
   bir patina teli onu paletin içine alıyor ve rengi sitede sürekli görünen
   tek yere koyuyor. */
.site-header.is-scrolled {
    border-bottom-color: rgba(47, 138, 126, 0.26);
    box-shadow: 0 1px 28px rgba(17, 17, 17, 0.06);
}

/* Dil seçici — yalnızca birden fazla dil yayındayken görünür. */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: var(--sp-3);
    padding-left: var(--sp-3);
    border-left: 1px solid var(--line);
}

.lang-switch__item {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-kicker);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: var(--muted);
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.lang-switch__item:hover { color: var(--heading); }

.lang-switch__item.is-active {
    color: var(--pine-deep);
    background: var(--pine-soft);
}

.site-header--overlay .lang-switch { border-left-color: var(--line); }
.site-header--overlay .lang-switch__item { color: var(--muted); }
.site-header--overlay .lang-switch__item:hover { color: var(--heading); }
.site-header--overlay .lang-switch__item.is-active { color: var(--pine-deep); }

/* Mobil menüde tam ad ile, satır olarak. */
.lang-switch--mobile {
    display: flex;
    gap: var(--sp-4);
    margin: var(--sp-6) 0 0;
    padding: var(--sp-4) 0 0;
    border-left: 0;
    border-top: 1px solid var(--obsidian-line);
}

.lang-switch--mobile .lang-switch__item {
    padding: 0;
    font-size: var(--fs-small);
    letter-spacing: 0.04em;
    color: rgba(244, 239, 231, 0.6);
    background: transparent;
}

.lang-switch--mobile .lang-switch__item.is-active { color: var(--champagne); }

/* Aydınlık hero üzerinde şeffaf başlangıç. Başlık hâlâ sabit ve şeffaf ki
   hero'nun ışıması ekranın üst kenarına kadar kesintisiz aksın; renkleri
   artık açık zemine göre. */
.site-header--overlay {
    position: fixed;
    left: 0;
    right: 0;
    background: transparent;
    backdrop-filter: none;
    color: var(--heading);
}

.site-header--overlay .brand,
.site-header--overlay .nav-link,
.site-header--overlay .nav-toggle {
    color: var(--heading);
}

/* Ana sayfanın overlay başlığı aynı çizgiyi kendi bloğunda tekrar
   tanımlıyor; ikisi ayrı kalırsa iç sayfalar patina, ana sayfa gri tel
   gösterir. */
.site-header--overlay.is-scrolled {
    background: rgba(251, 248, 243, 0.90);
    backdrop-filter: saturate(150%) blur(12px);
    border-bottom-color: rgba(47, 138, 126, 0.26);
    box-shadow: 0 1px 28px rgba(17, 17, 17, 0.06);
}

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

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--heading);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Yatay kilit (işaret + kelime logo) 4,5:1 oranındadır; 30 px yükseklikte
   "VISUALS" okunmaz kalıyordu. Başlık 68/80 px olduğu için yer var. */
.brand img { max-height: 34px; width: auto; }

@media (min-width: 1024px) {
    .brand img { max-height: 40px; }
}
.brand:hover { color: var(--accent-ink); }

.brand-mark {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    font-weight: 500;
}

/* Masaüstü navigasyon */
.nav-desktop { display: none; }

@media (min-width: 1024px) {
    .nav-desktop {
        display: flex;
        align-items: center;
        gap: var(--sp-6);
    }
}

.nav-link {
    position: relative;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--heading);
    padding-block: 0.35rem;
}

/* Menü altı çizgisi metin rengini taklit ediyordu; patina onu bağlantının
   kendisinden ayırıyor — hangi başlığın üzerinde olduğunuz renkle söyleniyor. */
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--verdigris);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
}

.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }

.nav-link.is-active { color: var(--accent-ink); }

/* Hamburger */
.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--heading);
}

@media (min-width: 1024px) {
    .nav-toggle { display: none; }
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

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

/* Mobil tam ekran menü */
.nav-mobile {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    flex-direction: column;
    background: var(--obsidian);
    color: var(--ivory);
    padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nav-mobile.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (min-width: 1024px) {
    .nav-mobile { display: none; }
}

.nav-mobile ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-mobile li + li { border-top: 1px solid var(--obsidian-line); }

.nav-mobile a {
    display: block;
    padding: 1.15rem 0;
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--ivory);
}

.nav-mobile a:hover { color: var(--taupe); }

/* Menü bağlantıları display serif; buton gövde tipografisinde kalmalı. */
.nav-mobile .btn {
    margin-top: var(--sp-6);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.nav-mobile-foot {
    margin-top: auto;
    padding-top: var(--sp-6);
    font-size: var(--fs-small);
    color: rgba(244, 239, 231, 0.6);
}

body.nav-open { overflow: hidden; }

/* Mobil sabit CTA (brief §15) */
.mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
    background: rgba(17, 17, 17, 0.96);
    backdrop-filter: blur(8px);
    transform: translateY(110%);
    transition: transform var(--dur) var(--ease);
}

.mobile-cta.is-visible { transform: translateY(0); }

.mobile-cta .btn {
    width: 100%;
    background: var(--ivory);
    color: var(--obsidian);
}

@media (min-width: 1024px) {
    .mobile-cta { display: none; }
}

body:has(.mobile-cta.is-visible) .site-footer { padding-bottom: 5.5rem; }

/* --------------------------------------------------------------- 7. Hero
   İlk ekran sitenin en önemli karesi. Ziyaretçiyi kapalı bir siyah levha
   değil, aydınlık bir stüdyo karşılıyor: zemin sağ üstten bir softbox gibi
   aydınlanıyor, sol alt köşe cyclorama'nın gölge tarafı. Kreatif artık
   zeminin altında perde arkasında değil, sahnenin üzerinde duruyor.
   ------------------------------------------------------------------------- */
.hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: center;
    min-height: min(86svh, 760px);
    padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-8);
    background: var(--grad-paper);
    color: var(--text);
    overflow: hidden;
}

/* Işık ayrı bir katmanda: ışıma usulca nefes alırken zemin sabit kalır
   (hareket bölümüne bakınız). */
.hero::before {
    content: "";
    position: absolute;
    inset: -12%;
    z-index: -1;
    background: var(--glow-warm), var(--glow-patina);
    pointer-events: none;
}

/* Hero'yu bir sonraki bölümden ayıran saç teli. Soldan sağa altından
   patinaya geçer: renk zemin kaplamadan, yalnızca 1px'lik bir kenarda
   duruyor. Sayfanın en üst kıvrımında bir kez görünüyor ve geçiyor. */
.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(183, 165, 138, 0) 0%, var(--taupe) 24%,
                var(--champagne) 46%, var(--verdigris) 78%, rgba(47, 138, 126, 0) 100%);
    opacity: 0.75;
}

/* Görsel de yuva da aynı kompozisyona girer: solda tipografi, sağda kare.
   Görsel tam kanama bir arka plan olmaktan çıktı; koyu kreatifin üzerine
   yazı okunsun diye perde çekmek gerekmiyor, açık kağıt kontrastı zaten
   veriyor — kreatif de gerçek rengiyle görünüyor. */
.hero--media,
.hero--slot {
    align-content: center;
    min-height: min(90svh, 860px);
}

.hero__grid {
    display: grid;
    gap: var(--sp-7);
}

@media (min-width: 900px) {
    .hero__grid {
        grid-template-columns: 1.05fr 0.95fr;
        align-items: center;
        gap: var(--sp-9);
    }
}

/* Video oynatılamazsa betik medyayı gizliyor; kolon o zaman toplanır,
   geriye boş bir ray kalmaz. */
@media (min-width: 900px) {
    .hero__grid:has(.hero__media[hidden]) { grid-template-columns: 1fr; }
}

.hero__media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-2), var(--shadow-gold);
    /* İnce şampanya halka: kreatifin kenarını kağıttan ayırır. */
    outline: 1px solid rgba(183, 165, 138, 0.45);
    /* Dekoratif katman tıklama almaz: arka plan videosu hero'nun üzerinde
       görünmez bir tıklama hedefi oluşturuyordu. */
    pointer-events: none;
}

/* Kırpım sağa hizalı. Hero görseli 16:9 bir marka plakası ve üzerindeki tek
   içerik sağ yarıdaki "9" monogramı; ortalanmış dikey bir kırpım monogramı
   tamamen kesip geriye boş siyah bir dikdörtgen bırakıyordu. */
.hero__media img,
.hero__media video {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: right center;
    opacity: 1;
}

@media (min-width: 900px) {
    .hero__media img,
    .hero__media video {
        aspect-ratio: 5 / 4;
        max-height: 68svh;
    }
}

/* Cam parlaması — çerçeveyi kağıdın üzerinde bir nesne gibi oturtur. */
.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(202deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 44%);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

.hero__kicker {
    color: var(--accent-ink);
}

.hero h1 {
    color: var(--heading);
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    max-width: 18ch;
}

/* İki kolonlu kompozisyonda kolon zaten sınırlıyor; 18ch fazladan kırıp
   son satırda tek kelime bırakıyordu. */
.hero--slot h1,
.hero--media h1 { max-width: none; }

.hero__text {
    margin-top: var(--sp-5);
    max-width: 54ch;
    color: var(--text);
    font-size: var(--fs-lead);
}

/* Güven satırı: altın bir saç teliyle ayrılır, künye gibi okunur. */
.hero__trust {
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, var(--taupe) 0%, var(--verdigris) 34%,
                  rgba(47, 138, 126, 0) 72%) 1;
    font-size: var(--fs-small);
    letter-spacing: 0.04em;
    color: var(--muted);
}

.hero__scroll {
    display: none;
}

@media (min-width: 1024px) {
    .hero__scroll {
        display: block;
        position: absolute;
        right: var(--gutter);
        bottom: var(--sp-8);
        z-index: 1;
        font-size: var(--fs-kicker);
        letter-spacing: var(--ls-kicker);
        text-transform: uppercase;
        color: var(--muted);
        writing-mode: vertical-rl;
        text-decoration: none;
        transition: color var(--dur-fast) var(--ease);
    }

    .hero__scroll:hover { color: var(--accent-ink); }
}

/* ---------------------------------------------------------------------------
   Medya yuvası

   Brief §17 her sayfa için hangi görselin gerekli olduğunu tek tek sayıyor.
   Görsel henüz yüklenmediğinde yuva boş bırakılmaz: hangi görselin oraya ait
   olduğunu ve önerilen teknik ölçüyü (brief §17 dosya standartları) söyleyen
   tasarlanmış bir alan gösterilir. Böylece eksik görsel, kırık bir sayfa değil
   bilinçli bir yer tutucu olarak okunur.
   --------------------------------------------------------------------------- */
.media-slot {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--sp-3);
    padding: var(--sp-6);
    text-align: center;
    color: rgba(17, 17, 17, 0.6);
    border-radius: var(--radius-media);
    overflow: hidden;
    /* Kum zemin + çok ince eğik tarama: düz bir boşluk değil, dokulu bir yüzey. */
    background-color: var(--sand);
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.22) 0 1px,
        transparent 1px 9px
    );
}

.media-slot::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(17, 17, 17, 0.16);
    pointer-events: none;
}

.media-slot__label {
    font-family: var(--font-body);
    font-size: var(--fs-kicker);
    font-weight: 600;
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--accent-ink);
}

.media-slot__title {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    color: rgba(17, 17, 17, 0.75);
    max-width: 24ch;
}

/* Sessiz marka imi — tekrar eden yuvalarda cümle yerine kullanılır. */
.media-slot__mark {
    font-family: var(--font-body);
    font-size: var(--fs-kicker);
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, 0.34);
}

.media-slot__spec {
    font-size: var(--fs-small);
    line-height: 1.45;
    color: rgba(17, 17, 17, 0.5);
    max-width: 30ch;
}

.media-slot--4x5 { aspect-ratio: 4 / 5; }
.media-slot--3x2 { aspect-ratio: 3 / 2; }
.media-slot--1x1 { aspect-ratio: 1 / 1; }

/* Koyu zeminde yuva, kumun sıcaklığını koruyan taupe bir yüzeye döner.
   Hero artık açık zeminli olduğu için varsayılan kum yüzeyinde kalır. */
.section--dark .media-slot {
    background-color: #241f19;
    background-image:
        repeating-linear-gradient(135deg, rgba(183, 165, 138, 0.10) 0 1px, transparent 1px 9px),
        linear-gradient(160deg, rgba(183, 165, 138, 0.22) 0%, rgba(183, 165, 138, 0.05) 100%);
    color: rgba(244, 239, 231, 0.72);
}

.section--dark .media-slot::after { border-color: rgba(183, 165, 138, 0.42); }
.section--dark .media-slot__title { color: rgba(244, 239, 231, 0.88); }
.section--dark .media-slot__mark { color: rgba(183, 165, 138, 0.62); }
.section--dark .media-slot__label { color: var(--champagne); }
.section--dark .media-slot__spec { color: rgba(244, 239, 231, 0.5); }

/* Hero yuvası ekranı taşırmasın: oran korunur, gerekirse daralır.
   Görselli hero ile aynı çerçeve dilini kullanır. */
.hero .media-slot {
    max-height: 60svh;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
}

/* ---------------------------------------------------------------------------
   Üçlü kreatif sistem (brief §5 / §17)
   Görsel önce gelir: brief §16 "portföy görsellerini sahnenin merkezine al".
   --------------------------------------------------------------------------- */
.system-head {
    margin-top: var(--sp-9);
    margin-bottom: var(--sp-6);
}

.system-grid {
    display: grid;
    gap: var(--sp-6);
    grid-template-columns: 1fr;
}

@media (min-width: 700px) {
    .system-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
}

.system-card__media {
    position: relative;
    margin-bottom: var(--sp-5);
    overflow: hidden;
    border-radius: var(--radius-media);
    /* Koyu bant üzerinde gölge görünmez; kenarı ince bir şampanya halka
       ayırır. */
    outline: 1px solid rgba(183, 165, 138, 0.22);
    box-shadow: var(--shadow-2);
}

.system-card__media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform var(--dur) var(--ease);
}

/* Brief §16: portföy hover'ında hafif zoom; ürün detayını bozmaz. */
.system-card:hover .system-card__media img { transform: scale(1.03); }

.system-card h4 {
    margin-top: var(--sp-2);
    font-size: var(--fs-h3);
}

.system-card p {
    margin-top: var(--sp-3);
    color: var(--muted);
}

/* Süreç / moodboard detayı (brief §17) */
.process-visual {
    margin-top: var(--sp-7);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-2);
}

img.process-visual {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Sayfa başlığı bloğu (iç sayfalar) — ana sayfa hero'suyla aynı aydınlık ton.
   Site açık baskın; koyu bantlar yalnızca çözüm bölümü, kapanış çağrısı ve
   footer'da noktalama işareti olarak kalıyor. */
.page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--grad-paper);
    color: var(--text);
    padding-block: calc(var(--header-h) + 3rem) var(--section-y);
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: -40% -10% -10% -10%;
    z-index: -1;
    background: var(--glow-warm);
    pointer-events: none;
}

/* İç sayfalar hero ile aynı saç telini taşır — aynı jest, her sayfada. */
.page-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(183, 165, 138, 0) 0%, var(--taupe) 24%,
                var(--champagne) 46%, var(--verdigris) 78%, rgba(47, 138, 126, 0) 100%);
    opacity: 0.7;
}

.page-hero h1 {
    color: var(--heading);
    max-width: 20ch;
}

.page-hero .kicker { color: var(--accent-ink); }

.page-hero__text {
    margin-top: var(--sp-5);
    max-width: 58ch;
    color: var(--text);
    font-size: var(--fs-lead);
}

/* --------------------------------------------------------------- 8. Kartlar */
/* Kart kağıdın üzerinde hafifçe yükselir. Yükselme hareketi (translate)
   yalnızca gerçekten tıklanabilir olan .work-card'a ayrıldı: duran bir
   müşteri yorumunun fare altında zıplaması için bir sebep yok. */
.card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.card:hover {
    border-color: rgba(183, 165, 138, 0.55);
    box-shadow: var(--shadow-2);
}

.section--dark .card {
    background: var(--obsidian-soft);
    border-color: var(--obsidian-line);
    box-shadow: none;
}

.section--dark .card:hover {
    border-color: rgba(183, 165, 138, 0.45);
    box-shadow: none;
}

.section--sand .card {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(17, 17, 17, 0.08);
}

.card__index {
    font-family: var(--font-display);
    font-size: 0.875rem;
    color: var(--accent-ink);
    letter-spacing: 0.08em;
}

.card h3 { font-size: var(--fs-h4); }

.card p { color: var(--muted); font-size: 0.9375rem; }

/* Numaralı liste kartları (süreç, sistem) */
.numbered {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-5);
}

@media (min-width: 768px) {
    .numbered { gap: var(--sp-6); }
}

.numbered li {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: var(--sp-4);
    align-items: start;
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--line);
}

.numbered li:last-child { border-bottom: 0; padding-bottom: 0; }

.numbered__no {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: var(--fw-display);
    color: var(--accent-ink);
    letter-spacing: 0.04em;
    padding-top: 0.1rem;
}

/* Süreç adımları gerçekten bir sıra; rakamlar altın gradyanla dolduruluyor.
   Yalnızca burada — sıralı olmayan kart künyeleri (.card__index) düz renkte
   kalıyor, aksi hâlde numara bir bilgi değil süs olurdu. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .numbered__no {
        background: var(--grad-gold);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* Koyu zeminde gradyanın bronz ucu kayboluyor; skala yukarı çekilir. */
    .section--dark .numbered__no {
        background: linear-gradient(135deg, var(--champagne-lift) 0%, var(--champagne) 52%, var(--taupe) 100%);
        -webkit-background-clip: text;
        background-clip: text;
    }

    /* Son adım teslim. Rakam patinaya döner: sıranın bittiğini sayı değil
       renk söyler. Listeler değişken uzunlukta olduğu için :last-child —
       kaç adım olursa olsun doğru yerde döner. */
    .numbered li:last-child .numbered__no {
        background: linear-gradient(135deg, var(--verdigris) 0%, var(--pine) 55%, var(--pine-deep) 100%);
        -webkit-background-clip: text;
        background-clip: text;
    }

    .section--dark .numbered li:last-child .numbered__no {
        background: linear-gradient(135deg, #8ECFC3 0%, var(--verdigris-lift) 100%);
        -webkit-background-clip: text;
        background-clip: text;
    }
}

.numbered h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.numbered p { color: var(--muted); font-size: 0.9375rem; }

/* Madde işaretli kontrol listesi */
.checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
}

.checklist li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* İm bir onay: "bu dahil" diyor. Altın vurgu rengiydi, onay rengi değil —
   patina bunu söyleyen ton. Sitede en çok tekrar eden işaret bu olduğu için
   rengi tek başına hizmet sayfalarına bir ritim veriyor. */
.checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 11px;
    height: 2px;
    border-radius: 2px;
    background: var(--verdigris);
}

/* Koyu zeminde verdigris kararıyor; skala bir basamak yukarı çekilir. */
.section--dark .checklist li::before,
.site-footer .checklist li::before { background: var(--verdigris-lift); }

/* Kum bandı verdigris'e fazla yakın: im 2.56:1'e düşüyor, grafikler için
   gereken 3:1'in altında (WCAG 1.4.11). Aynı ailenin koyu ucu 4.89:1 veriyor. */
.section--sand .checklist li::before { background: var(--pine); }

.section--sand .kicker--line::before {
    background: linear-gradient(90deg, var(--taupe-ink) 0%, var(--pine) 100%);
}

.section--dark .kicker--line::before {
    background: linear-gradient(90deg, var(--champagne) 0%, var(--verdigris-lift) 100%);
}

/* Etiket / rozet */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.tag--accent {
    border-color: rgba(183, 165, 138, 0.55);
    color: var(--accent-ink);
    background: var(--champagne-soft);
}

/* Konsept çalışma rozeti: uyarı değil, dürüst bir künye. İki rozet türü
   aynı altın tonundayken gözle ayrılmıyordu; künye çizgisi patinaya geçince
   .tag--accent (altın hap) ile karışmıyor — renk artık bilgi taşıyor. */
.tag--concept {
    border-color: transparent;
    border-left: 2px solid var(--verdigris);
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    padding-left: 0.55rem;
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 500;
    font-style: italic;
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* Tanım tablosu (kapsam, vaka çalışması) */
.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.spec-table th,
.spec-table td {
    text-align: left;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.spec-table th {
    width: 38%;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--heading);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    padding-right: var(--sp-4);
}

.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }

@media (max-width: 559px) {
    .spec-table th,
    .spec-table td { display: block; width: 100%; }
    .spec-table th { border-bottom: 0; padding-bottom: 0.25rem; color: var(--accent-ink); }
    .spec-table td { padding-top: 0; }
}

/* --------------------------------------------------------------- 9. Portföy grid */
.work-grid {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
}

@media (min-width: 1100px) {
    .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .work-grid--editorial { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .work-grid--editorial .work-card { grid-column: span 2; }
    .work-grid--editorial .work-card--wide { grid-column: span 3; }
}

/* Tıklanabilir olan tek kart bu; yükselme hareketi buraya ayrıldı. */
.work-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform var(--dur) var(--ease);
}

.work-card:hover,
.work-card:focus-visible { transform: translateY(-4px); }

.work-card__media {
    position: relative;
    overflow: hidden;
    background: var(--sand);
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-media);
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--dur) var(--ease);
}

.work-card:hover .work-card__media,
.work-card:focus-visible .work-card__media { box-shadow: var(--shadow-2); }

.work-card--wide .work-card__media { aspect-ratio: 3 / 2; }

.work-card__media img,
.work-card__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Hover'da hafif zoom; ürün detayını bozacak efekt yok (brief §16) */
    transition: transform var(--dur-slow) var(--ease);
}

.work-card:hover .work-card__media img,
.work-card:focus-visible .work-card__media img { transform: scale(1.035); }

.work-card__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--champagne-lift) 0%, var(--sand) 55%, #c4b096 100%);
    color: rgba(17, 17, 17, 0.42);
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    text-align: center;
    padding: var(--sp-5);
}

.work-card__badges {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    z-index: 1;
}

.work-card__badges .tag {
    background: rgba(251, 248, 243, 0.94);
    border-color: transparent;
    color: var(--graphite);
    box-shadow: var(--shadow-1);
    backdrop-filter: blur(4px);
}

/* Bu blok .tag--concept'ten daha belirgin olduğu için künye çizgisini de
   siliyordu: iş kartındaki konsept rozeti sıradan bir etikete dönüşüyordu.
   Beyaz hap görsel üzerinde okunabilirlik için kalır, ayırt eden çizgi geri
   gelir. */
.work-card__badges .tag--concept {
    border-left: 2px solid var(--verdigris);
    border-radius: 0;
}

.work-card__body {
    padding-top: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.work-card__meta {
    font-size: var(--fs-kicker);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--accent-ink);
}

/* Başlığın altına hover'da bir çizgi çekilir: kartın tıklanabilir olduğunu
   söyleyen işaret, ayrıca bir ok ya da "Devamı" etiketi gerekmez. Çizgi
   soldan sağa büyürken altından patinaya döner — hareketin kendisi renkle
   ölçülür. */
.work-card h3 {
    font-size: var(--fs-h4);
    background-image: linear-gradient(90deg, var(--taupe) 0%, var(--verdigris) 100%);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition: color var(--dur-fast) var(--ease), background-size var(--dur) var(--ease);
}

.work-card:hover h3,
.work-card:focus-visible h3 {
    color: var(--accent-ink);
    background-size: 100% 2px;
}

.work-card__summary {
    font-size: 0.9375rem;
    color: var(--muted);
    line-height: 1.55;
}

/* Filtre çubuğu */
.filter-bar {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-6);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.filter-bar::-webkit-scrollbar { height: 3px; }
.filter-bar::-webkit-scrollbar-thumb { background: var(--line); }

.filter-chip {
    flex: 0 0 auto;
    padding: 0.55rem 1.05rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--dur-fast) var(--ease);
}

.filter-chip:hover {
    border-color: var(--taupe);
    color: var(--heading);
    background: var(--champagne-soft);
}

.filter-chip.is-active {
    background: var(--grad-ink);
    border-color: transparent;
    color: var(--ivory);
    box-shadow: var(--shadow-1);
}

/* --------------------------------------------------------------- Çalışma detayı
   Sayfa üç bloğa indirildi: künyeli başlık, medya, iki sütunlu vaka metni.
   Künye önceden medyanın altında kendi bölümünde duruyordu; bir ziyaretçi
   projenin ne olduğunu görmek için iki ekran kaydırmak zorunda kalıyordu. */
/* Çalışma detayının başlık bloğu .page-hero üzerine kuruludur; o blok açık
   temaya döndüğü için buradaki ivory başlık ve koyu zemin çizgileri kağıdın
   üzerinde görünmez kalıyordu. Artık kendi rollerini değil sayfanın açık
   paletini devralır — tek fark, künye kolonunun ayrı bir yüzey olması. */
.work-hero {
    --line: rgba(17, 17, 17, 0.12);
}

.work-hero__grid {
    display: grid;
    gap: var(--sp-6);
}

@media (min-width: 1000px) {
    .work-hero__grid {
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
        gap: var(--sp-9);
    }
}

.work-hero__crumbs {
    font-size: var(--fs-small);
    color: var(--muted);
    margin-bottom: var(--sp-5);
}

.work-hero__crumbs a { color: inherit; }
.work-hero__tags { margin-bottom: var(--sp-4); }
.work-hero .tag--accent { background: var(--champagne-soft); }

/* Künye paneli. Açık zeminde ince bir kağıt kartı olarak durur: proje
   bilgisi anlatı metninden ayrı bir yüzeyde okunur. */
.work-facts {
    color: var(--text);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--line);
}

@media (min-width: 1000px) {
    .work-facts {
        padding: var(--sp-6);
        border-top: 0;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
        box-shadow: var(--shadow-1);
    }
}

.work-facts .kicker { margin-bottom: var(--sp-4); }
.work-facts .spec-table { font-size: 0.875rem; }
.work-facts .spec-table th,
.work-facts .spec-table td { padding-block: 0.7rem; }
.work-facts .btn-row { margin-top: var(--sp-5); }

/* Vaka metni: tek sütunlu uzun akış yerine iki sütunlu ızgara. */
.case-grid {
    display: grid;
    gap: var(--sp-6);
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .case-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-7) var(--sp-8);
    }
}

.case-block__label {
    margin: 0 0 var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-body);
    font-size: var(--fs-kicker);
    font-weight: 600;
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--accent-ink);
}

.case-block p { max-width: 62ch; }

/* Galeri ve benzer çalışmalar başlıkları, bölüm boşluğu daralınca
   kendi alt boşluğunu da toplar. */
.section-head--tight { margin-bottom: var(--sp-5); }

/* Proje detay galerisi */
/* Kolon sayısı yere göre belirlenir. Sabit iki kolon, 1360 px'lik kapta her
   kareyi 800 px'i aşan bir yüksekliğe çıkarıyor, galeri tek karede bir ekran
   tutuyordu; sabit üç kolonda ise dört kreatif "3 + 1" diye kırılıyordu.
   auto-fit boş rayları toplar: dört kreatif tek sıraya, üç kreatif üç eşit
   kolona oturur. */
.gallery {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

@media (min-width: 700px) {
    .gallery { gap: var(--sp-5); }
    .gallery__item--wide { grid-column: 1 / -1; }
}

.gallery__item {
    position: relative;
    margin: 0;
}

/* Kreatifler ortak bir çerçeve içinde durur. Önceden görsel doğal boyutunda
   akıyordu: dikey bir kare tek başına ekranı doldurup yanındaki yatay kareyi
   küçük bırakıyor, ızgara okunmaz hâle geliyordu. Kutu oranı sabittir; tam
   hâli üzerine tıklayınca ışık kutusunda açılır. */
.gallery__zoom {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-media);
    overflow: hidden;
    background: var(--sand);
    line-height: 0;
    cursor: zoom-in;
}

/* Oran kutuyu değil ögenin kendisini bağlar: düğme ögesinin yükseklik
   hesabı tarayıcılar arasında tutarsızdır. */
.gallery__item img,
.gallery__item > video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-media);
}

/* Video kırpılmaz; kutuya sığdırılır, artan yer koyu kalır. */
.gallery__item > video {
    background: var(--obsidian);
    object-fit: contain;
}

@media (min-width: 700px) {
    .gallery__item--wide img,
    .gallery__item--wide > video {
        aspect-ratio: 16 / 9;
        /* Tüm kolonları kaplayan öge de ekranı aşmaz. */
        max-height: 72vh;
    }
}

/* Büyütme ipucu. Dokunmatik cihazda hover olmadığı için sürekli görünür. */
.gallery__zoom::after {
    content: "";
    position: absolute;
    right: var(--sp-3);
    bottom: var(--sp-3);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.55) center / 16px 16px no-repeat;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F4EFE7' stroke-width='1.4'%3E%3Ccircle cx='6.8' cy='6.8' r='4.6'/%3E%3Cpath d='m10.4 10.4 4 4M4.8 6.8h4M6.8 4.8v4'/%3E%3C/svg%3E");
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.gallery__zoom:hover::after,
.gallery__zoom:focus-visible::after { opacity: 1; }

@media (hover: none) {
    .gallery__zoom::after { opacity: 1; }
}

.gallery__item figcaption {
    padding: var(--sp-3) 0 0;
    font-size: var(--fs-small);
    color: var(--muted);
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    place-items: center;
    padding: var(--sp-5);
    background: rgba(17, 17, 17, 0.96);
}

.lightbox.is-open { display: grid; }

.lightbox img {
    max-width: min(1200px, 94vw);
    max-height: 88vh;
    object-fit: contain;
}

.lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(244, 239, 231, 0.3);
    border-radius: 50%;
    background: transparent;
    color: var(--ivory);
    font-size: 1.25rem;
    line-height: 1;
}

.lightbox__close:hover { background: rgba(244, 239, 231, 0.12); }

/* Video oynatıcı */
.video-frame {
    position: relative;
    display: flex;
    justify-content: center;
    /* Çerçeve, betik onu medyanın genişliğine indirdiğinde kapta ortalanır. */
    margin-inline: auto;
    background: var(--grad-ink);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-2);
}

/* Video kendi oranında, ekrana sığacak kadar büyür. Önceden yalnızca genişlik
   veriliyordu: dikey bir video 1200 px genişlikte 2000 px'i aşan bir yüksekliğe
   uzayıp sayfayı tek başına dolduruyordu. Daha büyüğünü isteyen tam ekrana
   geçer. */
.video-frame video {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(72vh, 660px);
}

.video-frame__expand {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(244, 239, 231, 0.35);
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.55);
    color: var(--ivory);
    font-size: var(--fs-small);
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.video-frame__expand:hover,
.video-frame__expand:focus-visible {
    background: rgba(17, 17, 17, 0.8);
    border-color: var(--ivory);
}

/* Videosu olmayan çalışmanın kapak görseli. Video ile aynı yükseklik sınırını
   paylaşır; tam hâli tıklanınca ışık kutusunda açılır. */
.media-frame {
    display: flex;
    justify-content: center;
    margin-inline: auto;
    background: var(--grad-ink);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-2);
}

.media-frame__zoom {
    display: block;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.media-frame__zoom img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(72vh, 660px);
}

/* --------------------------------------------------------------- 10. Akordeon (SSS) */
.accordion {
    border-top: 1px solid var(--line);
}

.accordion__item { border-bottom: 1px solid var(--line); }

.accordion__trigger {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    width: 100%;
    padding: 1.35rem 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    line-height: 1.35;
    color: var(--heading);
    transition: color var(--dur-fast) var(--ease);
}

.accordion__trigger:hover { color: var(--accent-ink); }

/* Artı işareti bir şampanya çipin içinde durur; açılınca çip altınla
   doluyor — hangi sorunun açık olduğunu ikonun kendisi söylüyor. */
.accordion__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin-top: 0.06em;
    position: relative;
    border-radius: 50%;
    background: var(--champagne-soft);
    color: var(--accent-ink);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.accordion__trigger:hover .accordion__icon { background: var(--taupe-soft); }

.accordion__trigger[aria-expanded="true"] .accordion__icon {
    background: var(--grad-gold);
    color: var(--obsidian);
}

.accordion__icon::before,
.accordion__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

.accordion__icon::before { width: 14px; height: 1.5px; }
.accordion__icon::after { width: 1.5px; height: 14px; }

.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur) var(--ease);
}

.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }

.accordion__panel > div { overflow: hidden; }

.accordion__panel p {
    padding-bottom: 1.35rem;
    color: var(--muted);
    max-width: 68ch;
}

/* --------------------------------------------------------------- 11. Formlar */
.form-grid {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-field--full { grid-column: 1 / -1; }
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.form-field label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--heading);
}

.form-field .req { color: var(--danger); }

.form-field .hint {
    font-size: var(--fs-small);
    color: var(--muted);
    line-height: 1.45;
}

.input,
.select,
.textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 0.9375rem;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.input::placeholder,
.textarea::placeholder { color: #a9a49b; }

/* İkincil vurgu burada işlevsel: odaklanılan alan altından ayrışsın diye
   çam yeşili. Renk bir durumu söylüyor, süs değil. */
.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--pine);
    box-shadow: 0 0 0 3px var(--pine-soft);
}

.textarea {
    min-height: 150px;
    resize: vertical;
    line-height: 1.6;
}

.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23343434' stroke-width='1.4' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.875rem;
    line-height: 1.55;
    cursor: pointer;
}

.checkbox input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 0.15rem;
    accent-color: var(--pine);
}

/* Hata metni altın rengindeydi: uyarı, vurgu rengiyle aynı dili konuşuyor
   ve bir hata gibi okunmuyordu. Artık --danger okunuyor (bu değişken daha
   önce hiç tanımlanmamıştı, dolayısıyla hiç uygulanmıyordu). */
.field-error,
.validation-summary-errors ul {
    background: transparent;
    color: var(--danger);
    font-size: var(--fs-small);
}

.input.input-validation-error,
.select.input-validation-error,
.textarea.input-validation-error {
    border-color: var(--danger);
}

.validation-summary-errors {
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid rgba(163, 56, 47, 0.3);
    border-radius: var(--radius);
    background: rgba(163, 56, 47, 0.06);
    margin-bottom: var(--sp-5);
}

.validation-summary-errors ul { margin: 0; padding-left: 1.15rem; }
.validation-summary-valid { display: none; }

.honeypot {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0;
    height: 0;
    width: 0;
}

.alert {
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    font-size: 0.9375rem;
    margin-bottom: var(--sp-5);
}

.alert--success {
    border-color: rgba(31, 91, 84, 0.32);
    background: var(--pine-soft);
    color: var(--pine-deep);
}

/* İkinci bir background bildirimi ilkini eziyordu: hata kutusu kırmızı
   yerine altın zeminde çiziliyordu. */
.alert--error {
    border-color: rgba(163, 56, 47, 0.32);
    background: rgba(163, 56, 47, 0.07);
    color: var(--danger);
}

/* --------------------------------------------------------------- 12. Footer */
.site-footer {
    position: relative;
    isolation: isolate;
    background: var(--grad-ink);
    color: rgba(244, 239, 231, 0.68);
    padding-block: var(--section-y) var(--sp-6);
}

/* Sayfanın en altında sönen bir ışık: footer da aydınlatılmış bir yüzey. */
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(40% 70% at 12% 0%, rgba(230, 210, 172, 0.12) 0%, rgba(230, 210, 172, 0) 70%);
    pointer-events: none;
}

.site-footer a { color: rgba(244, 239, 231, 0.72); text-decoration: none; }
.site-footer a:hover { color: var(--champagne); }

.footer-top {
    display: grid;
    gap: var(--sp-7);
    grid-template-columns: 1fr;
    padding-bottom: var(--sp-7);
    border-bottom: 1px solid var(--obsidian-line);
}

@media (min-width: 768px) {
    .footer-top { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--sp-6); }
}

@media (min-width: 1024px) {
    .footer-top { grid-template-columns: 2fr 1fr 1fr 1.2fr; }
}

.footer-brand .brand { color: var(--ivory); margin-bottom: var(--sp-4); }
.footer-brand .brand img { max-height: 46px; }

.footer-brand p {
    max-width: 34ch;
    font-size: 0.9375rem;
    color: rgba(244, 239, 231, 0.62);
}

.footer-col h3 {
    font-family: var(--font-body);
    font-size: var(--fs-kicker);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--champagne);
    margin-bottom: var(--sp-4);
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
    font-size: 0.9375rem;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    justify-content: space-between;
    align-items: center;
    padding-top: var(--sp-5);
    font-size: var(--fs-small);
    color: rgba(244, 239, 231, 0.66);
}

/* Dar ekranda üç öğe iki satıra bölünüp künye "Site sahibi" ile aynı hizaya
   düşüyor ve onun bir parçasıymış gibi okunuyordu; alt alta alınır. */
@media (max-width: 640px) {
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-3);
    }
}

/* Stüdyo künyesi — telif satırının son öğesi. Kendi şeridi yoktur;
   footer zaten iki yatay çizgi taşıyor, üçüncüsü künyeyi hak ettiğinden
   fazla öne çıkarıyordu. */
.footer-credit a {
    color: var(--champagne);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-fast) var(--ease);
}

.footer-credit a:hover,
.footer-credit a:focus-visible { border-bottom-color: currentColor; }

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-note {
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--obsidian-line);
    font-size: 0.75rem;
    line-height: 1.6;
    color: rgba(244, 239, 231, 0.66);
    max-width: 80ch;
}

/* --------------------------------------------------------------- 13. Çerez bildirimi */
.cookie-banner {
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    bottom: var(--gutter);
    /* Mobil menünün (z-index 95) altında kalır: menü açıkken bant
       gezinme bağlantılarının üzerine binip tıklanmalarını engelliyordu. */
    z-index: 90;
    max-width: 460px;
    max-height: calc(100svh - var(--header-h) - 2 * var(--gutter));
    overflow-y: auto;
    padding: var(--sp-5);
    background: var(--obsidian);
    color: rgba(244, 239, 231, 0.8);
    border: 1px solid var(--obsidian-line);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
    font-size: 0.875rem;
    line-height: 1.55;
    transform: translateY(140%);
    transition: transform var(--dur) var(--ease);
}

.cookie-banner.is-visible { transform: translateY(0); }

.cookie-banner a { color: var(--champagne); }

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

.cookie-banner .btn { flex: 1 1 auto; }

.cookie-prefs {
    display: grid;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--obsidian-line);
}

.cookie-prefs label {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    cursor: pointer;
}

/* Onay kutuları tasarım sistemine alınır; tarayıcı varsayılanı koyu zeminde
   okunmuyordu. accent-color desteklenmeyen tarayıcılarda yerel kutu görünür. */
.cookie-prefs input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.2rem;
    accent-color: var(--champagne);
}

.cookie-prefs input[type="checkbox"]:disabled { opacity: 0.55; }
.cookie-prefs strong { color: var(--ivory); font-weight: 600; }

@media (min-width: 640px) {
    .cookie-banner { left: auto; right: var(--gutter); }
}

/* --------------------------------------------------------------- 14. İçerik (zengin metin) */
.prose {
    max-width: 72ch;
    font-size: 1.0625rem;
    line-height: 1.75;
}

.prose h2 {
    font-size: var(--fs-h3);
    margin-top: var(--sp-8);
    margin-bottom: var(--sp-4);
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
    font-size: var(--fs-h4);
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-3);
}

.prose ul, .prose ol { margin-bottom: var(--sp-5); }
.prose li { margin-bottom: 0.5rem; }
.prose a { color: var(--accent-ink); }

.prose .legal-notice {
    padding: var(--sp-4) var(--sp-5);
    background: var(--champagne-soft);
    border-left: 3px solid var(--verdigris);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.9375rem;
    margin-bottom: var(--sp-6);
}

/* --------------------------------------------------------------- 15. Hareket
   Brief §16: yavaş ve kontrollü fade / reveal. Ürün detayını bozacak efekt yok.
   Tüm hareketler prefers-reduced-motion altında kapanır (bölüm sonundaki blok).
   ------------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

[data-reveal-delay="1"] { transition-delay: 90ms; }
[data-reveal-delay="2"] { transition-delay: 180ms; }
[data-reveal-delay="3"] { transition-delay: 270ms; }
[data-reveal-delay="4"] { transition-delay: 360ms; }
[data-reveal-delay="5"] { transition-delay: 450ms; }
[data-reveal-delay="6"] { transition-delay: 540ms; }

/* Izgaralarda kademeli açılış — gecikme JS tarafından sırayla atanır. */
[data-reveal][style*="--reveal-step"] { transition-delay: calc(var(--reveal-step) * 70ms); }

/* Not: görsellere açılışta ayrıca ölçek verilmedi — kartlarda zaten hover
   zoom'u var (brief §16) ve iki transform birbirini eziyordu. */

/* ---------------------------------------------------------- İlk yükleme
   Hero girişi salt CSS ile çalışır: JS yüklenmese de içerik görünür kalır
   (animation-fill-mode: both, bitiş durumu görünür). */
@keyframes nv-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

@keyframes nv-settle {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: none; }
}

.hero__copy > * {
    animation: nv-rise var(--dur-slow) var(--ease) both;
}

.hero__copy > *:nth-child(1) { animation-delay: 60ms; }
.hero__copy > *:nth-child(2) { animation-delay: 150ms; }
.hero__copy > *:nth-child(3) { animation-delay: 260ms; }
.hero__copy > *:nth-child(4) { animation-delay: 360ms; }
.hero__copy > *:nth-child(5) { animation-delay: 460ms; }

.hero .media-slot,
.hero__media {
    animation: nv-settle 1400ms var(--ease) both;
    animation-delay: 120ms;
}

/* ---------------------------------------------------------- Okuma göstergesi
   Sayfanın ne kadarının okunduğunu gösteren saç teli (brief §3: scroll oranı).
   Şampanyadan çama uzanır: ilerledikçe rengi de değişiyor. */
.scroll-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 120;
    pointer-events: none;
    background: transparent;
}

.scroll-progress__bar {
    height: 100%;
    /* Ucu çam değil verdigris: çam durum rengi (form odağı, aktif dil),
       verdigris yüzey rengi. Dekoratif olan bu çubuk ikincisine aittir. */
    background: linear-gradient(90deg, var(--champagne) 0%, var(--taupe) 42%, var(--verdigris) 100%);
    transform: scaleX(var(--nv-progress, 0));
    transform-origin: 0 50%;
    will-change: transform;
}

/* ---------------------------------------------------------- Hero ışığı
   Softbox usulca nefes alır. Zemin sabit kalır, yalnızca ışık katmanı
   hareket eder; 14 saniyede bir tur, fark edilmeyecek kadar yavaş. */
@keyframes nv-breathe {
    from { transform: scale(1); opacity: 0.88; }
    to   { transform: scale(1.06); opacity: 1; }
}

.hero::before {
    animation: nv-breathe 14s var(--ease) infinite alternate;
}

/* ---------------------------------------------------------- Hero kaydırma
   Kreatif çerçevesinin içinde içerikten biraz daha yavaş kayar; içerik
   uzaklaşırken solar. Ölçek 1.06'dan 1.22'ye çıkarıldı: görsel artık tam
   kanama değil sınırlı bir çerçevede, 40 px'lik kayma eski ölçekte
   çerçevenin kenarında boşluk bırakıyordu. Ölçek merkezden değil sağ
   kenardan büyür, yoksa sağa hizalı monogram çerçevenin dışına taşıyor. */
.hero__media img,
.hero__media video {
    transform: translate3d(0, var(--nv-parallax, 0px), 0) scale(1.22);
    transform-origin: 100% 50%;
    will-change: transform;
}

.hero__inner {
    opacity: var(--nv-hero-fade, 1);
}

/* Hareket azaltma tercihi (brief §16, §19) */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Giriş ve kaydırma hareketleri tamamen kapanır; içerik son hâliyle durur. */
    .hero__media img,
    .hero__media video {
        transform: none !important;
    }

    .hero__inner { opacity: 1 !important; }
    .scroll-progress { display: none; }
}

/* --------------------------------------------------------------- 16. Yardımcılar */
.divider {
    height: 1px;
    background: var(--line);
    border: 0;
    margin: 0;
}

.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-1x1 { aspect-ratio: 1 / 1; }
.ratio-16x9 { aspect-ratio: 16 / 9; }

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

.empty-state {
    padding: var(--sp-8) var(--sp-5);
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
}

.pill-note {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    background: var(--taupe-soft);
    border-radius: 999px;
    font-size: var(--fs-small);
    color: var(--accent-ink);
}

.next-project {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-6) 0;
    border-top: 1px solid var(--line);
    text-decoration: none;
}

.next-project:hover h3 { color: var(--accent-ink); }

/* Erişilebilir tablo kaydırma */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}