/* ============================================================================
   ATÖLYE — AJANS / PORTFOLYO TEMA AİLESİ · TASARIM BELİRTEÇLERİ
   ============================================================================
   ÖLÇÜ FİŞİ (referanslardan Playwright ile ölçüldü, tahmin yok):
     · Kap: dış 1440px, iç 1320–1400px
     · Dikey ritim: 72px TABAN, adımlar ×0.8 ×1.2 ×1.6 ×2 ×2.4
       → 57,6 · 72 · 86,4 · 115,2 · 144 · 172,8  (en sık: 86,4 → 30 kez)
     · Başlık ölçeği: 187,2 / 144 / 72 / 49,2 / 43,2 / 32 / 27,88 / 24 / 20,16
     · Ağırlık: 300–400–500 baskın. KALIN YOK — ajans dilinde dev punto
       ince ağırlıkla dengelenir; 700 kullanmak referans dilini bozar.
     · Bölüm yüksekliği: medyan 489px, %75 848px
     · Sayfa uzunluğu: 5.700–12.300px, 9–38 bölüm

   NİÇİN KENDİ PALETİMİZ: referansların düzen kalıbı alınır, görsel kimliği
   alınmaz. Renkler, yazı tipi eşleşmesi ve varlıklar CEA'nın kendisi.

   AÇIK/KOYU: tek belirteç kümesi, [data-gorunum="koyu"] ile devriliyor.
   Referans ailesinde her demonun koyu ikizi var; tek şablondan iki tema
   çıkarmanın yolu budur — iki ayrı CSS değil, devrilen belirteç.
   ========================================================================= */

:root {
    /* --- ÖLÇEK: 72px tabanlı dikey ritim --- */
    --at-r-0: 28.8px;
    --at-r-1: 43.2px;
    --at-r-2: 57.6px;
    --at-r-3: 72px;
    --at-r-4: 86.4px;
    --at-r-5: 115.2px;
    --at-r-6: 144px;
    --at-r-7: 172.8px;

    /* --- TİPOGRAFİ ÖLÇEĞİ --- */
    --at-y-xs: 13px;
    --at-y-s: 15px;
    --at-y-m: 17px;
    --at-y-l: 20.16px;
    --at-y-xl: 24px;
    --at-y-2xl: 27.88px;
    --at-y-3xl: 32px;
    --at-y-4xl: 43.2px;
    --at-y-5xl: 49.2px;
    --at-y-6xl: 72px;
    --at-y-7xl: 144px;
    --at-y-8xl: 187.2px;

    /* --- YAZI TİPİ: sans gövde + serif teşhir (referans dili) --- */
    --at-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --at-serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

    /* --- KAP --- */
    --at-kap: 1440px;
    --at-kap-dar: 1320px;
    --at-yan: 40px;

    /* --- AÇIK PALET (CEA'nın kendi renkleri) --- */
    --at-zemin: #ffffff;
    --at-zemin-2: #f4f2ef;      /* sıcak kırık beyaz — ajans dilinde nötr gri değil */
    --at-zemin-3: #e9e5df;
    --at-metin: #14100c;
    --at-metin-2: #5b5348;      /* AA: #f4f2ef üzerinde 6,77:1 · ölçüldü */
    --at-metin-3: #7a7266;
    --at-cizgi: rgba(20, 16, 12, 0.12);
    --at-vurgu: #b4532a;        /* terrakota — CEA kimliği, referanstan değil */
    --at-vurgu-metin: #ffffff;
    --at-ustu: #14100c;

    /* --- HAREKET --- */
    --at-gecis: 520ms cubic-bezier(0.16, 1, 0.3, 1);
    --at-gecis-hizli: 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* KOYU İKİZ: yalnız belirteçler devrilir, hiçbir bileşen kuralı tekrarlanmaz. */
:root[data-gorunum="koyu"] {
    --at-zemin: #0d0b09;
    --at-zemin-2: #16130f;
    --at-zemin-3: #211c17;
    --at-metin: #f7f4f0;
    --at-metin-2: #a9a094;      /* AA: #16130f üzerinde 7,18:1 · ölçüldü */
    --at-metin-3: #857c70;
    --at-cizgi: rgba(247, 244, 240, 0.14);
    --at-vurgu: #e08a5f;        /* koyu zeminde açık terrakota */
    --at-vurgu-metin: #14100c;
}

/* Sistem tercihi: kullanıcı açıkça seçmediyse işletim sistemine uy. */
@media (prefers-color-scheme: dark) {
    :root:not([data-gorunum="acik"]) {
        --at-zemin: #0d0b09;
        --at-zemin-2: #16130f;
        --at-zemin-3: #211c17;
        --at-metin: #f7f4f0;
        --at-metin-2: #a9a094;
        --at-metin-3: #857c70;
        --at-cizgi: rgba(247, 244, 240, 0.14);
    }
}

/* ============================================================================
   ÇEKİRDEK: sıfırlama + tipografi taban
   ============================================================================
   NİÇİN AYRI SIFIRLAMA: bu tema ailesi mağaza kabuğundan (.td-govde) BAĞIMSIZ
   çalışacak. Mağaza sıfırlaması `h1,h2,h3,p { margin:0 }` gibi (0,1,1)
   özgüllükte kurallar taşıyor ve tek sınıflı bileşen kurallarını yeniyor —
   bu proje boyunca beş kez bu tuzağa düşüldü. Atölye kendi kökünü kuruyor.
   ========================================================================= */

.at { 
    background: var(--at-zemin);
    color: var(--at-metin);
    font-family: var(--at-sans);
    font-size: var(--at-y-m);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.at *, .at *::before, .at *::after { box-sizing: border-box; }
.at img, .at video, .at svg { max-width: 100%; height: auto; display: block; }

/* Teşhir başlıkları: dev punto + İNCE ağırlık. Ölçülen ağırlık 400–500. */
.at-teshir {
    font-family: var(--at-serif);
    font-weight: 400;
    line-height: 0.94;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--at-metin);
    /* clamp: 187,2px ölçüldü ama 390px ekranda taşar. Alt sınır ölçekli. */
    font-size: clamp(44px, 9.2vw, var(--at-y-8xl));
}
.at-teshir--2 { font-size: clamp(36px, 6.6vw, var(--at-y-7xl)); }
.at-teshir--3 { font-size: clamp(30px, 4.2vw, var(--at-y-6xl)); }

.at-baslik {
    font-family: var(--at-sans);
    font-weight: 500;
    font-size: clamp(26px, 3.2vw, var(--at-y-4xl));
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--at-metin);
}
.at-alt {
    font-size: var(--at-y-l);
    line-height: 1.55;
    color: var(--at-metin-2);
    margin: 0;
}
.at-etiket {
    font-size: var(--at-y-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--at-metin-3);
    margin: 0;
}

/* Kap ve bölüm ritmi */
.at-kap {
    width: 100%;
    max-width: var(--at-kap);
    margin-inline: auto;
    padding-inline: var(--at-yan);
}
.at-kap--dar { max-width: var(--at-kap-dar); }
.at-bolum { padding-block: var(--at-r-5); }      /* 115,2px — ölçülen medyan aralık */
.at-bolum--sik { padding-block: var(--at-r-3); }  /* 72 */
.at-bolum--genis { padding-block: var(--at-r-7); }/* 172,8 */
.at-bolum--ikinci { background: var(--at-zemin-2); }
.at-bolum--ustu { background: var(--at-ustu); }

@media (max-width: 900px) {
    :root { --at-yan: 24px; }
    .at-bolum { padding-block: var(--at-r-3); }
    .at-bolum--genis { padding-block: var(--at-r-4); }
}
@media (max-width: 560px) {
    :root { --at-yan: 18px; }
    .at-bolum { padding-block: var(--at-r-2); }
}

/* Hareket azaltma: dev tipografi + kaydırma animasyonu vestibüler tetikleyici. */
@media (prefers-reduced-motion: reduce) {
    .at *, .at *::before, .at *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}