@charset "UTF-8";

/* ===================================================================
   ANFORA DİJİTAL — HUKUK BÜROSU ŞABLONU
   Tema: "Ceviz & Keten"  ·  v4 — palet değişimi
   -------------------------------------------------------------------
   ┌─────────────────────────────────────────────────────────────────┐
   │  TEMA DEĞİŞTİRMEK İÇİN TEK YAPMANIZ GEREKEN:                     │
   │  Aşağıdaki "1. PALET" bloğundaki --c-* değerlerini değiştirin.   │
   │  Dosyanın geri kalanı (2000+ satır) bu değerlere değil, birkaç   │
   │  satır aşağıdaki ANLAMSAL katmana (--paper, --text, --accent…)   │
   │  referans verir. Palet değişince tüm site — kartlar, düğmeler,   │
   │  başlık, altbilgi, revak — otomatik değişir; başka hiçbir yeri   │
   │  düzenlemeniz gerekmez.                                          │
   │                                                                   │
   │  İki dosya bu bloktan BAĞIMSIZ, elle senkron tutulmalıdır:       │
   │    · app/Views/layouts/site.php  (favicon + theme-color meta)    │
   │      — PHP, CSS custom property okuyamadığı için renk orada      │
   │      hardcode'dur. Dosyadaki yorum hangi tokenle eşleştiğini     │
   │      söyler.                                                     │
   │    · assets/css/admin.css — yönetim paneli BİLİNÇLİ OLARAK       │
   │      ayrı bir palet kullanır (bir "araç" gibi görünsün diye).    │
   │      Herkese açık siteyle birlikte değişmesini istiyorsanız o    │
   │      dosyanın kendi :root bloğunu ayrıca güncelleyin.            │
   └─────────────────────────────────────────────────────────────────┘

   KOYU MOD YOK — bilinçli tercih, §1 sonundaki nota bakın. Sistem
   tercihi ne olursa olsun site her zaman aynı keten zemini gösterir;
   yalnızca --deep bantları (altbilgi, düğmeler, revak) koyu kalır.

   NEDEN "CEVİZ & KETEN"
     Krem-pirinç ikilisi çok yaygın bir "sıcak SaaS" izlenimi
     bırakıyordu. Keten (doğal kumaş beyazı), ceviz (koyu ahşap
     mürekkep) ve orman yeşili (aksan) hukuk kütüphanesi / ahşap raf
     dünyasından geliyor — pirinçten farklı bir sıcaklık. Bakır,
     eskiden bordonun oynadığı "nadir üçüncü renk" rolünü üstlenir:
     yalnızca revak bölümünün zemininde kullanılır.

   GÖRSEL SİSTEM, BUTONLAR, HAREKET — v3'te tanıtıldı, değişmedi:
     `.figure` gerçek fotoğraf yuvası, `.plate` fotoğraf yokken devreye
     giren gravür plakası, `.portico` elle çizilmiş revak. Düğmeler
     matbaa klişesi gibi arkalarındaki renk bloğuna "basıyor". Hareket
     kademeli girer, `prefers-reduced-motion` ile tamamen kapanır.

   KONTRAST (WCAG 2.2 AA) — keten #F5F0E6 üzerinde
     --text        #3B2E24 ... 11.5:1  AAA
     --text-muted  #5C4E42 ...  7.0:1  AAA
     --text-faint  #6F6152 ...  5.3:1  AA
     --accent-text #3F5B44 ...  6.6:1  AAA
   Koyu/bakır zeminde
     --text-on-deep   #EDE4D5 ... 15.7:1 AAA
     --accent-on-deep #8FB093 ...  7.1:1 AAA
   =================================================================== */


/* ===================================================================
   1. PALET  ←  bir sonraki tema değişikliğinde SADECE burayı düzenleyin
   =================================================================== */

:root {
    /* --- Keten (yüzey/kağıt) --- */
    --c-surface-50:  #FBF8F1;
    --c-surface-100: #F5F0E6;
    --c-surface-200: #ECE4D3;
    --c-surface-300: #E0D3B9;
    --c-surface-400: #CBB78F;

    /* --- Ceviz (mürekkep) --- */
    --c-ink-900: #17110D;
    --c-ink-800: #241B14;
    --c-ink-700: #382A1F;
    --c-ink-500: #3B2E24;

    /* --- Nötr metin (taupe) --- */
    --c-mute-600: #5C4E42;
    --c-mute-500: #6F6152;

    /* --- Orman (ana aksan) --- */
    --c-accent-700: #2E4433;
    --c-accent-600: #3F5B44;
    --c-accent-500: #547A5C;
    --c-accent-400: #6E9475;
    --c-accent-300: #8FB093;
    --c-accent-200: #C3D8C5;

    /* --- Bakır (nadir ikinci vurgu — yalnızca revak zemininde) --- */
    --c-accent2-900: #241610;
    --c-accent2-700: #6B3D22;
    --c-accent2-500: #A56A3F;

    --c-red-600:   #A32B21;   --c-red-100:   #F8E7E4;
    --c-green-700: #1F6B4A;   --c-green-100: #E5F1E9;
    --c-amber-700: #8A6208;   --c-amber-100: #F7EEDA;

    /* --- Anlamsal — bileşenler bunlara referans verir, primitiflere değil --- */
    --paper:        var(--c-surface-100);
    --paper-raised: var(--c-surface-50);
    --paper-tint:   var(--c-surface-200);
    --paper-edge:   var(--c-surface-300);
    --deep:         var(--c-ink-800);
    --deep-2:       var(--c-ink-700);

    --text:           var(--c-ink-500);
    --text-muted:     var(--c-mute-600);
    --text-faint:     var(--c-mute-500);
    --text-on-deep:   #EDE4D5;
    --text-on-deep-2: #C9BBA8;

    --accent:         var(--c-accent-500);
    --accent-text:    var(--c-accent-600);
    --accent-strong:  var(--c-accent-700);
    --accent-on-deep: var(--c-accent-300);

    --rule:         color-mix(in srgb, var(--c-ink-500) 16%, transparent);
    --rule-soft:    color-mix(in srgb, var(--c-ink-500) 9%,  transparent);
    --rule-strong:  color-mix(in srgb, var(--c-ink-500) 30%, transparent);
    --rule-on-deep: rgba(237, 228, 213, .16);

    --focus-ring: var(--c-accent-600);

    --ok-text:   var(--c-green-700);  --ok-bg:   var(--c-green-100);
    --err-text:  var(--c-red-600);    --err-bg:  var(--c-red-100);
    --warn-text: var(--c-amber-700);  --warn-bg: var(--c-amber-100);

    /* --- Tipografi --- */
    --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", Times, serif;
    --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono:    ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

    --fs-xs:   0.8125rem;
    --fs-sm:   0.9375rem;
    --fs-base: 1.0625rem;
    --fs-lg:   1.1875rem;
    --fs-xl:   clamp(1.28rem, 1.15rem + 0.5vw, 1.55rem);
    --fs-2xl:  clamp(1.6rem,  1.32rem + 1.2vw, 2.25rem);
    --fs-3xl:  clamp(2rem,    1.5rem  + 2.3vw, 3.15rem);
    --fs-4xl:  clamp(2.4rem,  1.5rem  + 3.9vw, 4.35rem);

    --lh-tight: 1.1;
    --lh-snug:  1.28;
    --lh-base:  1.7;
    --lh-loose: 1.82;

    --ls-tight: -0.02em;
    --ls-wide:   0.08em;
    --ls-widest: 0.2em;

    /* --- Ölçek --- */
    --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;
    --sp-4: 1rem;    --sp-5: 1.5rem;  --sp-6: 2rem;
    --sp-7: 2.5rem;  --sp-8: 3rem;    --sp-9: 4rem;
    --sp-10: 5rem;   --sp-11: 6.5rem;

    --section-y: clamp(3.75rem, 2rem + 6.5vw, 7.5rem);

    --container:        75rem;
    --container-narrow: 44rem;
    --measure:          38rem;
    --gutter: clamp(1.25rem, .5rem + 2.6vw, 3rem);

    --radius: 0;
    --radius-input: 2px;

    --ease:     cubic-bezier(.2, .6, .3, 1);
    --ease-out: cubic-bezier(.16, .84, .32, 1);
    --dur: .2s;

    --header-h: 4.5rem;

    /*
     * Yalnızca açık tema desteklenir — bilinçli bir tercih.
     *
     * Bu bildirim tarayıcıya "sayfa açık temaya göre tasarlandı" der;
     * böylece işletim sistemi koyu moddayken bile native form
     * kontrolleri (checkbox, select, kaydırma çubuğu) sayfayla uyumlu
     * açık renklerde çizilir, yamalı bir görünüm oluşmaz.
     */
    color-scheme: light;
}

/*
 * Koyu tema KASITLI OLARAK yok.
 *
 * İki kez denendi (önce simsiyah, sonra ceviz kahve zemin) ve ikisi de
 * kimliği bozdu: bu tasarımın tamamı "kağıt üzerine mürekkep" fikri
 * üzerine kurulu — antetli kağıt, fihrist, kartvizit dizimi, gravür
 * plakaları. Kağıdın kendisi koyulaşınca metafor çöküyor. Bu yüzden
 * sistem koyu moddayken de site her zaman aynı keten zemini gösterir.
 *
 * Yeniden eklemeyi düşünüyorsanız: --deep zaten her iki modda da koyu
 * (altbilgi, düğmeler) — asıl istenen "koyu vurgu" muhtemelen o. Zemini
 * (--paper) koyulaştırmak yerine önce bu bant sisteminin yeterli olup
 * olmadığını değerlendirin.
 */


/* ===================================================================
   2. SIFIRLAMA VE KAĞIT
   =================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
    position: relative;
    min-height: 100vh;
    background: var(--paper);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Kağıt greni: 140px'lik tek SVG karesi döşenir, ~0.4 KB, ek istek yok */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .05;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 140px 140px;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-6) 0; }

::selection { background: var(--c-accent-200); color: var(--c-ink-800); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }


/* ===================================================================
   3. TİPOGRAFİ
   =================================================================== */

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-xl);  line-height: var(--lh-snug); }
h4 { font-size: var(--fs-lg);  line-height: var(--lh-snug); }

p { text-wrap: pretty; }

a {
    color: var(--accent-text);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: color var(--dur) var(--ease);
}

a:hover { color: var(--accent-strong); }

strong, b { font-weight: 600; }
small { font-size: var(--fs-sm); }
abbr[title] { text-decoration: underline dotted; cursor: help; }
code, kbd, samp { font-family: var(--font-mono); font-size: .9em; }

.marginal {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-sm);
    color: var(--accent-text);
    line-height: 1.4;
}

.marginal--rule { display: block; padding-top: .75rem; border-top: 1px solid var(--accent); }
.marginal--on-deep { color: var(--accent-on-deep); }
.marginal--on-deep.marginal--rule { border-top-color: var(--accent-on-deep); }

.versal {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--text-faint);
}

.lead {
    font-size: var(--fs-lg);
    line-height: var(--lh-loose);
    color: var(--text-muted);
    max-width: var(--measure);
}

.display { font-family: var(--font-display); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }

.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.serif { font-family: var(--font-display); }
.italic { font-style: italic; }
.tnum { font-variant-numeric: tabular-nums lining-nums; }


/* ===================================================================
   4. ÇİZGİLER
   =================================================================== */

.rule-double {
    height: 4px; border: 0; margin: 0;
    background:
        linear-gradient(var(--text), var(--text)) 0 0   / 100% 2px no-repeat,
        linear-gradient(var(--rule), var(--rule)) 0 4px / 100% 1px no-repeat;
}

.rule-double--on-deep {
    background:
        linear-gradient(var(--accent-on-deep), var(--accent-on-deep)) 0 0 / 100% 2px no-repeat,
        linear-gradient(var(--rule-on-deep), var(--rule-on-deep))     0 4px / 100% 1px no-repeat;
}

.rule-hair { height: 1px; border: 0; background: var(--rule); }
.rule-short { width: 3rem; height: 2px; border: 0; background: var(--accent); }


/* ===================================================================
   5. YERLEŞİM
   =================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    position: relative;
    z-index: 2;
}

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

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--tint { background: var(--paper-tint); border-block: 1px solid var(--rule-soft); }

.spread { display: grid; gap: var(--sp-5); }

@media (min-width: 60rem) {
    .spread { grid-template-columns: 11rem minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); }
    .spread__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}

.spread__head { max-width: 40rem; display: grid; gap: var(--sp-4); }

.with-aside { display: grid; gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); align-items: start; }

@media (min-width: 62rem) {
    .with-aside { grid-template-columns: minmax(0, 1fr) 17.5rem; }
    .with-aside__side { position: sticky; top: calc(var(--header-h) + 2rem); }
}

.stack { display: grid; gap: var(--sp-4); }
.stack--lg { gap: var(--sp-7); }
.stack--sm { gap: var(--sp-2); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute;
    top: -100%; left: var(--sp-4);
    z-index: 200;
    padding: var(--sp-3) var(--sp-5);
    background: var(--deep);
    color: var(--text-on-deep);
    font-size: var(--fs-sm); font-weight: 600;
    text-decoration: none;
    transition: top var(--dur) var(--ease);
}

.skip-link:focus-visible { top: 0; color: var(--text-on-deep); }


/* ===================================================================
   6. GÖRSEL SİSTEMİ
   -------------------------------------------------------------------
   `.figure` gerçek fotoğrafın yuvası, `.plate` fotoğraf yokken devreye
   giren gravür plakası. İkisi aynı kutuyu doldurur; yönetici panelden
   görsel yüklediğinde düzen milim oynamaz.
   =================================================================== */

.figure {
    position: relative;
    overflow: hidden;
    background: var(--paper-tint);
}

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

.figure--wide     { aspect-ratio: 16 / 10; }
.figure--portrait { aspect-ratio: 4 / 5; }
.figure--tall     { aspect-ratio: 3 / 4; }
.figure--square   { aspect-ratio: 1; }

/* Fotoğrafın kağıda basılmış hissi: hafif desatürasyon + sıcaklık */
.figure--print img { filter: saturate(.9) contrast(1.03) sepia(.06); }

.figure--zoom img { transition: transform .9s var(--ease); }
.figure--zoom:hover img { transform: scale(1.045); }

/* Gravür çerçevesi — basılı levhalardaki iç kenar */
.figure--framed::after {
    content: "";
    position: absolute;
    inset: .7rem;
    border: 1px solid rgba(247, 241, 230, .35);
    pointer-events: none;
}

/* Görsel üstü künye şeridi */
.figure__caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 2.5rem 1.25rem .9rem;
    background: linear-gradient(transparent, rgba(12, 15, 21, .78));
    color: #F3EEE2;
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-sm);
}

/* --- Gravür plakası (fotoğraf yer tutucusu) --- */
.plate {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%; height: 100%;
    overflow: hidden;
    color: var(--accent);
    background:
        repeating-linear-gradient(
            45deg,
            color-mix(in srgb, var(--accent) 13%, transparent) 0 1px,
            transparent 1px 8px
        ),
        linear-gradient(155deg, var(--paper-tint), var(--paper-edge));
}

.plate__frame { position: absolute; inset: .8rem; border: 1px solid currentColor; opacity: .28; }
.plate__frame::after { content: ""; position: absolute; inset: .3rem; border: 1px solid currentColor; opacity: .45; }

.plate__mark {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 5vw, 3.2rem);
    letter-spacing: .05em;
    opacity: .55;
}

.plate__seal { width: min(48%, 7.5rem); height: auto; opacity: .48; }

.plate--deep {
    color: var(--accent-on-deep);
    background:
        repeating-linear-gradient(45deg, rgba(201,169,97,.1) 0 1px, transparent 1px 8px),
        linear-gradient(155deg, var(--c-ink-700), var(--c-ink-900));
}

/* --- Tam genişlik görsel şeridi --- */
.band { display: grid; gap: 1px; background: var(--rule); }

@media (min-width: 40rem) { .band { grid-template-columns: repeat(3, 1fr); } }

.band__cell { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-tint); }
.band__cell img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.03) sepia(.06); }


/* ===================================================================
   7. SİMGELER
   =================================================================== */

.icon {
    width: 1.25rem; height: 1.25rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}

.icon--sm { width: 1rem;   height: 1rem;   stroke-width: 1.7; }
.icon--lg { width: 1.6rem; height: 1.6rem; stroke-width: 1.4; }
.icon--xl { width: 2.4rem; height: 2.4rem; stroke-width: 1.1; }


/* ===================================================================
   8. DÜĞMELER — LETTERPRESS
   -------------------------------------------------------------------
   Gövdenin arkasında sabit bir renk bloğu (box-shadow ile, bulanıklık
   sıfır) durur. Üzerine gelince buton bloğa doğru 2px kayar, tıklanınca
   tamamen üstüne oturur: matbaa klişesinin kağıda basması.
   =================================================================== */

.btn {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    --btn-bd: var(--rule-strong);
    --btn-block: transparent;

    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 2.875rem;
    padding: .7rem 1.6rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-bd);
    border-radius: var(--radius);
    box-shadow: 5px 5px 0 -1px var(--btn-block);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .015em;
    text-decoration: none;
    text-align: center;
    transition: transform .16s var(--ease),
                box-shadow .16s var(--ease),
                background .26s var(--ease),
                color .26s var(--ease),
                border-color .26s var(--ease);
}

.btn:hover  { transform: translate(2px, 2px); box-shadow: 3px 3px 0 -1px var(--btn-block); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 -1px var(--btn-block); }

.btn[disabled], .btn[aria-disabled="true"] {
    opacity: .55; cursor: not-allowed;
    transform: none; box-shadow: none;
}

.btn--primary {
    --btn-bg: var(--deep);
    --btn-fg: var(--text-on-deep);
    --btn-bd: var(--deep);
    --btn-block: var(--accent);
}

.btn--primary:hover { color: var(--text-on-deep); }

.btn--accent {
    --btn-bg: var(--accent-text);
    --btn-fg: #FFF8E9;
    --btn-bd: var(--accent-text);
    --btn-block: var(--deep);
}

.btn--accent:hover { color: #FFF8E9; }

/* Hayalet: alttan yukarı dolan mürekkep */
.btn--ghost { --btn-bd: var(--rule-strong); }

.btn--ghost::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--deep);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .34s var(--ease-out);
}

.btn--ghost:hover {
    color: var(--text-on-deep);
    border-color: var(--deep);
    box-shadow: 3px 3px 0 -1px var(--accent);
}

.btn--ghost:hover::before { transform: scaleY(1); }

.btn--on-deep {
    --btn-fg: var(--text-on-deep);
    --btn-bd: var(--rule-on-deep);
    --btn-block: var(--accent-on-deep);
}

.btn--on-deep::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: var(--accent-on-deep);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .34s var(--ease-out);
}

.btn--on-deep:hover { color: var(--c-ink-900); border-color: var(--accent-on-deep); }
.btn--on-deep:hover::before { transform: scaleY(1); }

.btn--sm { min-height: 2.25rem; padding: .4rem 1rem; font-size: var(--fs-xs); box-shadow: 3px 3px 0 -1px var(--btn-block); }
.btn--sm:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 -1px var(--btn-block); }
.btn--sm:active { transform: translate(3px, 3px); box-shadow: 0 0 0 -1px var(--btn-block); }

.btn--block { width: 100%; }

.btn__icon { width: 1.05em; height: 1.05em; flex: none; }

.btn__arrow { width: 1.05em; height: 1.05em; flex: none; transition: transform .3s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(.25rem); }

/* Metin bağlantısı: altı çizgi sağa doğru büyür */
.link-rule {
    display: inline-block;
    position: relative;
    padding-bottom: .3rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--accent-text);
    text-decoration: none;
}

.link-rule::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(.35);
    transform-origin: left;
    transition: transform .34s var(--ease-out);
}

.link-rule:hover::after, .link-rule:focus-visible::after { transform: scaleX(1); }
.link-rule--on-deep { color: var(--accent-on-deep); }


/* ===================================================================
   9. BAŞLIK
   =================================================================== */

.colophon {
    background: var(--paper-tint);
    border-bottom: 1px solid var(--rule-soft);
    font-size: var(--fs-xs);
    color: var(--text-faint);
}

.colophon__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); min-height: 2.4rem; flex-wrap: wrap;
}

.colophon__list { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.colophon__item { display: inline-flex; align-items: center; gap: .45rem; }
.colophon a { color: var(--text-muted); text-decoration: none; }
.colophon a:hover { color: var(--accent-text); text-decoration: underline; }
.colophon svg { width: .9rem; height: .9rem; color: var(--accent); }
.colophon .serif { font-style: italic; color: var(--text-muted); }

@media (max-width: 55rem) { .colophon { display: none; } }

.site-header {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: saturate(1.3) blur(8px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease);
}

.site-header.is-stuck { border-bottom-color: var(--rule); }

.site-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: var(--sp-3); text-decoration: none; color: var(--text); flex: none; }

.brand__mark {
    width: 2.35rem; height: 2.35rem; flex: none; color: var(--accent);
    object-fit: contain; transition: transform .5s var(--ease);
}

.brand:hover .brand__mark { transform: rotate(-12deg); }

.brand__text { display: grid; gap: .1rem; }
.brand__name { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.15; letter-spacing: var(--ls-tight); }
.brand__sub { font-family: var(--font-display); font-style: italic; font-size: .7rem; color: var(--text-faint); }

.nav { display: flex; align-items: center; gap: var(--sp-4); }
.nav__list { display: flex; align-items: center; gap: .1rem; }
.nav__item { position: relative; }

.nav__link {
    position: relative;
    display: inline-flex; align-items: center; gap: .35rem;
    min-height: 2.75rem; padding: 0 .8rem;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

.nav__link::after {
    content: "";
    position: absolute; left: .8rem; right: .8rem; bottom: .9rem;
    height: 1px; background: var(--accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease-out);
}

.nav__link:hover { color: var(--text); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--text); font-weight: 600; }

.nav__caret { width: .7rem; height: .7rem; transition: transform var(--dur) var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__panel {
    position: absolute; top: calc(100% - .3rem); left: -.5rem; z-index: 50;
    min-width: 23rem; padding: var(--sp-4);
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-top: 2px solid var(--accent);
    box-shadow: 8px 8px 0 -1px color-mix(in srgb, var(--c-ink-500) 8%, transparent);
    display: none;
}

.nav__panel[data-open="true"] { display: block; animation: panelIn .22s var(--ease-out); }

@keyframes panelIn { from { opacity: 0; transform: translateY(-6px); } }

.nav__panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-4); }

.nav__panel-link {
    display: grid; grid-template-columns: 1.6rem 1fr;
    align-items: baseline; gap: .5rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}

.nav__panel-link:hover, .nav__panel-link:focus-visible { color: var(--accent-text); padding-left: .25rem; }
.nav__panel-num { font-family: var(--font-display); font-size: .75rem; color: var(--accent); letter-spacing: .04em; }
.nav__panel-foot { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--rule); }

.nav-toggle {
    display: none; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem;
    border: 1px solid var(--rule-strong);
    color: var(--text);
}

.nav-toggle__bars { position: relative; width: 1.15rem; height: 1px; background: currentColor; }

.nav-toggle__bars::before, .nav-toggle__bars::after {
    content: ""; position: absolute; left: 0;
    width: 100%; height: 1px; background: currentColor;
    transition: transform .28s var(--ease);
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top:  6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 61.99rem) {
    .nav-toggle { display: inline-flex; }

    .nav {
        position: fixed; inset: var(--header-h) 0 0 auto;
        width: min(23rem, 100%); display: block; z-index: 95;
        padding: var(--sp-5) var(--gutter) var(--sp-9);
        background: var(--paper-raised);
        border-left: 1px solid var(--rule);
        overflow-y: auto; overscroll-behavior: contain;
        transform: translateX(100%); visibility: hidden;
        transition: transform .3s var(--ease-out), visibility .3s;
    }

    .nav[data-open="true"] { transform: translateX(0); visibility: visible; }

    .nav__list { display: grid; gap: 0; }
    .nav__item { border-bottom: 1px solid var(--rule-soft); }

    .nav__link {
        justify-content: space-between; width: 100%;
        min-height: 3.25rem; padding-inline: 0;
        font-family: var(--font-display); font-size: var(--fs-lg);
    }

    .nav__link::after { display: none; }

    .nav__panel {
        position: static; display: none; min-width: 0;
        padding: 0 0 var(--sp-4); border: 0; background: transparent; box-shadow: none;
    }

    .nav__panel[data-open="true"] { display: block; }
    .nav__panel-grid { grid-template-columns: 1fr; }

    .nav__cta { margin-top: var(--sp-5); }
    .nav__cta .btn { width: 100%; }

    .nav-backdrop {
        position: fixed; inset: 0; z-index: 90;
        background: rgba(12, 15, 21, .5);
        opacity: 0; visibility: hidden;
        transition: opacity var(--dur) var(--ease), visibility var(--dur);
    }

    .nav-backdrop[data-open="true"] { opacity: 1; visibility: visible; }
    body.is-nav-open { overflow: hidden; }
}

@media (min-width: 62rem) { .nav-backdrop { display: none; } }


/* ===================================================================
   10. KAHRAMAN BÖLÜMÜ
   -------------------------------------------------------------------
   Sol: antetli kağıt tipografisi.  Sağ: dikey fotoğraf yuvası, altına
   taşan künye plakasıyla. Görsel bölümün alt kenarı bir sonraki
   bölümün üzerine biner — katman ve derinlik, düz akışı kırar.
   =================================================================== */

.hero { position: relative; border-bottom: 1px solid var(--rule); }

.hero__inner {
    position: relative;
    display: grid;
    gap: var(--sp-7);
    padding-block: clamp(2.5rem, 1.5rem + 5vw, 4.5rem) clamp(3rem, 1.5rem + 5vw, 5.5rem);
}

@media (min-width: 62rem) {
    .hero__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        align-items: center;
        gap: clamp(2.5rem, 1rem + 5vw, 5.5rem);
    }
}

.hero__letterhead {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: var(--sp-4);
    padding-bottom: .75rem;
    margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem);
    border-bottom: 1px solid var(--text);
    font-family: var(--font-display); font-style: italic;
    font-size: var(--fs-sm); color: var(--text-muted);
}

.hero__letterhead span:last-child { font-style: normal; letter-spacing: var(--ls-wide); font-size: var(--fs-xs); }

.hero__content { display: grid; gap: var(--sp-5); }

.hero__title { font-size: var(--fs-4xl); max-width: 14ch; }

/* Vurgulu kelimenin altındaki fırça izi */
.hero__title em { font-style: italic; position: relative; white-space: nowrap; }

.hero__title em::after {
    content: "";
    position: absolute;
    left: -.04em; right: -.04em; bottom: -.06em;
    height: .28em;
    background: var(--accent);
    opacity: .55;
    transform-origin: left;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.4c28-3.1 62-4.6 98-4.4 34 .2 66 1.9 98 5.2-30-1.4-63-2-98-1.8-36 .2-70 .5-98 1z' fill='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.4c28-3.1 62-4.6 98-4.4 34 .2 66 1.9 98 5.2-30-1.4-63-2-98-1.8-36 .2-70 .5-98 1z' fill='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.hero__text {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    line-height: var(--lh-loose);
    color: var(--text-muted);
    max-width: 34rem;
}

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

.hero__facts {
    display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8);
    margin-top: var(--sp-3); padding-top: var(--sp-5);
    border-top: 1px solid var(--rule);
}

.hero__fact { display: grid; gap: .15rem; }

.hero__fact dt {
    font-size: var(--fs-xs); letter-spacing: var(--ls-wide);
    text-transform: uppercase; color: var(--text-faint);
}

.hero__fact dd { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text); }

/* --- Görsel sütunu --- */
.hero__media { position: relative; }

.hero__figure { aspect-ratio: 4 / 5; }

@media (min-width: 62rem) { .hero__figure { aspect-ratio: 3 / 4; } }

/* Görselin üstüne binen mühür plakası — katmanlanma */
.hero__stamp {
    position: absolute;
    left: clamp(-2.5rem, -2vw, -1rem);
    bottom: clamp(-2rem, -2vw, -1.25rem);
    z-index: 3;
    display: grid;
    place-items: center;
    width: clamp(6.5rem, 12vw, 9rem);
    aspect-ratio: 1;
    background: var(--paper);
    border: 1px solid var(--rule);
    color: var(--accent);
    box-shadow: 6px 6px 0 -1px color-mix(in srgb, var(--c-ink-500) 8%, transparent);
}

.hero__stamp svg { width: 74%; height: auto; }


/* ===================================================================
   11. FİHRİST
   =================================================================== */

.index-list { border-top: 1px solid var(--text); }

.index-item {
    position: relative;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 0 var(--sp-4);
    align-items: start;
    padding-block: clamp(1.25rem, .75rem + 1.2vw, 2rem);
    padding-inline: .75rem;
    margin-inline: -.75rem;
    border-bottom: 1px solid var(--rule);
    transition: background .3s var(--ease);
}

@media (min-width: 52rem) {
    .index-item {
        grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr) 2.5rem;
        align-items: baseline;
        gap: 0 var(--sp-5);
    }
}

.index-item:hover { background: var(--paper-tint); }

/* Alt kenarda soldan sağa çizilen pirinç çizgi */
.index-item::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease-out);
}

.index-item:hover::after { transform: scaleX(1); }

.index-item__num {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    letter-spacing: .1em;
    color: var(--accent);
    padding-top: .18em;
    transition: transform .35s var(--ease);
}

.index-item:hover .index-item__num { transform: translateX(.3rem); }

.index-item__title { font-size: var(--fs-xl); letter-spacing: var(--ls-tight); }
.index-item__title a { color: var(--text); text-decoration: none; }
.index-item__title a::after { content: ""; position: absolute; inset: 0; }
.index-item:hover .index-item__title a { color: var(--accent-text); }

.index-item__text {
    grid-column: 2 / -1;
    margin-top: .4rem;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--text-muted);
    max-width: 46ch;
}

@media (min-width: 52rem) { .index-item__text { grid-column: 3; margin-top: 0; } }

.index-item__mark { display: none; color: var(--accent); opacity: .45; transition: opacity .3s, transform .3s var(--ease); }

@media (min-width: 52rem) { .index-item__mark { display: block; justify-self: end; } }

.index-item:hover .index-item__mark { opacity: 1; transform: translateX(.3rem); }


/* ===================================================================
   12. REVAK — GÖRSEL BÖLÜM
   -------------------------------------------------------------------
   Bakır-mürekkep zemin, altında elle çizilmiş sütunlu revak gravürü.
   Sayfanın görsel ağırlık merkezi burası.
   =================================================================== */

.portico {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(158deg, var(--c-accent2-900) 0%, var(--c-ink-900) 62%);
    color: var(--text-on-deep);
}

/* İnce çapraz gravür taraması */
.portico::before {
    content: "";
    position: absolute; inset: 0; z-index: -2;
    background: repeating-linear-gradient(-52deg, rgba(255,255,255,.018) 0 1px, transparent 1px 9px);
}

.portico__art {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: -1;
    height: clamp(11rem, 34%, 22rem);
    color: var(--c-accent-300);
    opacity: .22;
    pointer-events: none;
}

.arcade { width: 100%; height: 100%; }

.portico__inner {
    position: relative;
    padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(9rem, 5rem + 14vw, 16rem);
}

.portico__quote {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.6rem);
    line-height: 1.3;
    letter-spacing: var(--ls-tight);
    color: var(--text-on-deep);
    max-width: 22ch;
    text-wrap: balance;
}

.portico__quote em { font-style: italic; color: var(--accent-on-deep); }

.portico__attribution {
    margin-top: var(--sp-4);
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-sm);
    color: var(--text-on-deep-2);
}

/* Dipnotlar */
.notes { display: grid; gap: 0; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); border-top: 1px solid var(--rule-on-deep); }

@media (min-width: 52rem) {
    .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 1rem + 4vw, 5rem); }
}

.note {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0 var(--sp-3);
    padding-block: var(--sp-5);
    border-bottom: 1px solid var(--rule-on-deep);
}

.note__num { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--accent-on-deep); padding-top: .2em; }
.note__title { font-size: var(--fs-lg); color: var(--text-on-deep); }
.note__text { grid-column: 2; margin-top: .45rem; font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--text-on-deep-2); }


/* ===================================================================
   13. ASİMETRİK GÖRSEL + METİN
   =================================================================== */

.feature { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }

@media (min-width: 60rem) {
    .feature { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
    .feature--reverse .feature__media { order: 2; }
}

.feature__media { position: relative; }

/* Görselin köşesinden taşan not plakası — derinlik */
.feature__plaque {
    position: absolute;
    right: clamp(-2rem, -1.5vw, -1rem);
    bottom: clamp(-1.75rem, -1.5vw, -1rem);
    z-index: 3;
    max-width: 15rem;
    padding: var(--sp-4);
    background: var(--paper);
    border-top: 2px solid var(--accent);
    box-shadow: 6px 6px 0 -1px color-mix(in srgb, var(--c-ink-500) 8%, transparent);
}

.feature__plaque p { font-family: var(--font-display); font-style: italic; font-size: var(--fs-sm); color: var(--text-muted); }

@media (max-width: 47.99rem) {
    .feature__plaque { position: static; max-width: none; margin-top: var(--sp-4); box-shadow: none; }
}


/* ===================================================================
   14. KADRO
   =================================================================== */

.roster { display: grid; gap: 0; border-top: 1px solid var(--text); }

@media (min-width: 46rem) {
    .roster--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
        border-top: 0;
    }
}

@media (min-width: 64rem) {
    .roster--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* İlk avukat iki sütun kaplar ve yatay dizilir — eşit ızgara ritmini
       bilinçli olarak kırar. */
    .roster--grid .roster__item:first-child {
        grid-column: span 2;
        grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
        align-items: center;
        gap: var(--sp-5);
    }
}

.roster__item {
    position: relative;
    display: grid;
    gap: var(--sp-4);
    padding-block: var(--sp-5);
    border-bottom: 1px solid var(--rule);
    grid-template-columns: 5rem minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 46rem) {
    .roster--grid .roster__item {
        grid-template-columns: 1fr;
        padding-block: var(--sp-5) var(--sp-6);
        border-top: 1px solid var(--text);
        border-bottom: 0;
    }
}

.roster__portrait { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-tint); }
.roster__portrait img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.03) sepia(.06); transition: transform .9s var(--ease); }
.roster__item:hover .roster__portrait img { transform: scale(1.04); }

.roster__body { display: grid; gap: .3rem; align-content: start; }
.roster__name { font-size: var(--fs-lg); }
.roster__name a { color: var(--text); text-decoration: none; }
.roster__name a::after { content: ""; position: absolute; inset: 0; }
.roster__item:hover .roster__name a { color: var(--accent-text); }
.roster__role { font-family: var(--font-display); font-style: italic; font-size: var(--fs-sm); color: var(--accent-text); }
.roster__meta { font-size: var(--fs-xs); color: var(--text-faint); }


/* ===================================================================
   15. GAZETE DÜZENİ
   =================================================================== */

/* align-items:start ŞART — varsayılan stretch, .entries'i (kısa metin
   listesi) .lede'nin (görsel + başlık) yüksekliğine zorlar ve altında
   gereksiz boşluk bırakır. Sütun yükseklikleri kendi içeriğine göre
   kalsın. */
.broadsheet { display: grid; align-items: start; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }

@media (min-width: 58rem) { .broadsheet { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }

.lede { position: relative; display: grid; gap: var(--sp-4); }
.lede__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-tint); border: 1px solid var(--rule); }
.lede__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.lede:hover .lede__media img { transform: scale(1.035); }
.lede__title { font-size: var(--fs-2xl); }
.lede__title a { color: var(--text); text-decoration: none; }
.lede__title a::after { content: ""; position: absolute; inset: 0; }
.lede:hover .lede__title a { color: var(--accent-text); }
.lede__text { color: var(--text-muted); max-width: 42ch; }

.entries { border-top: 1px solid var(--text); }

.entry {
    position: relative;
    display: grid; gap: .35rem;
    padding-block: var(--sp-5);
    border-bottom: 1px solid var(--rule);
    transition: padding-left .35s var(--ease);
}

.entry:hover { padding-left: .5rem; }
.entry__title { font-size: var(--fs-lg); }
.entry__title a { color: var(--text); text-decoration: none; }
.entry__title a::after { content: ""; position: absolute; inset: 0; }
.entry:hover .entry__title a { color: var(--accent-text); }
.entry__text { font-size: var(--fs-sm); color: var(--text-muted); }

.byline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--fs-xs); color: var(--text-faint); }
.byline > * + *::before { content: "·"; margin-right: .5rem; color: var(--rule-strong); }


/* ===================================================================
   16. KARTLAR
   =================================================================== */

.card {
    position: relative;
    display: flex; flex-direction: column; gap: var(--sp-3);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--text);
    transition: border-top-color .3s var(--ease);
}

.card:hover { border-top-color: var(--accent); }

.card__title { font-size: var(--fs-lg); }
.card__title a { color: var(--text); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card:hover .card__title a { color: var(--accent-text); }
.card__text { font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--text-muted); flex: 1; }
.card__icon { color: var(--accent); transition: transform .4s var(--ease); }
.card:hover .card__icon { transform: translateY(-2px); }

.card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-tint); border: 1px solid var(--rule); margin-bottom: var(--sp-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }


/* ===================================================================
   17. ROZET
   =================================================================== */

.badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .55rem;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    border: 1px solid var(--rule);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

a.badge:hover { border-color: var(--accent); color: var(--accent-text); }
.badge--accent { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.tag-list { display: flex; flex-wrap: wrap; gap: .4rem; }


/* ===================================================================
   18. FORMLAR
   =================================================================== */

.form { display: grid; gap: var(--sp-5); }
.field { display: grid; gap: .4rem; }
.field__label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--fs-sm);
    font-weight: 600;
}

.field__label .icon { color: var(--accent); }
.field__req { color: var(--err-text); margin-left: .1rem; }
.field__hint { font-size: var(--fs-xs); color: var(--text-faint); }
.field__error { display: flex; align-items: flex-start; gap: .35rem; font-size: var(--fs-xs); font-weight: 600; color: var(--err-text); }

.input, .textarea, .select {
    width: 100%;
    min-height: 2.875rem;
    padding: .7rem .9rem;
    background: var(--paper-raised);
    color: var(--text);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-input);
    font-size: var(--fs-base);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.input::placeholder, .textarea::placeholder { color: var(--text-faint); opacity: .85; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--text-faint); }

.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.textarea { min-height: 9rem; resize: vertical; line-height: var(--lh-base); }

.select {
    appearance: none;
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F6152' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    background-size: 1.1rem;
}

.field.has-error .input, .field.has-error .textarea, .field.has-error .select { border-color: var(--err-text); }

.checkbox {
    display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start;
    font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--text-muted); cursor: pointer;
}

.checkbox input[type="checkbox"] {
    appearance: none;
    width: 1.2rem; height: 1.2rem; margin-top: .25rem;
    background: var(--paper-raised);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-input);
    cursor: pointer; flex: none;
    transition: background .2s var(--ease), border-color .2s var(--ease);
}

.checkbox input[type="checkbox"]:checked {
    background: var(--accent-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / .8rem no-repeat;
    border-color: var(--accent-text);
}

.checkbox a { font-weight: 600; }
.hp-field { position: absolute !important; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }

/*
 * Onay kutusu — KVKK açık rızası gibi yasal ağırlığı olan tek bir
 * checkbox'ı gövde metninden ayırır. Resmî evrak üzerindeki mühürlü
 * kutu hissi: sol kenarda aksan çizgisi, hafif tint zemin.
 */
.consent-box {
    padding: var(--sp-4) var(--sp-5);
    background: var(--paper-tint);
    border: 1px solid var(--rule);
    border-left: 2px solid var(--accent);
}

.consent-box.has-error { border-left-color: var(--err-text); }

@media (min-width: 40rem) {
    .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
}


/* ===================================================================
   19. BİLDİRİM
   =================================================================== */

.alert {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid transparent; border-left-width: 2px;
    font-size: var(--fs-sm); line-height: var(--lh-base);
}

.alert svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .2rem; }
.alert--success { background: var(--ok-bg);   color: var(--ok-text);   border-left-color: var(--ok-text); }
.alert--error   { background: var(--err-bg);  color: var(--err-text);  border-left-color: var(--err-text); }
.alert--warning { background: var(--warn-bg); color: var(--warn-text); border-left-color: var(--warn-text); }
.alert--info    { background: var(--paper-tint); color: var(--text-muted); border-left-color: var(--accent); }
.alert strong { display: block; margin-bottom: .1rem; }


/* ===================================================================
   20. GEZİNME YARDIMCILARI
   =================================================================== */

.breadcrumb { padding-block: var(--sp-4); font-size: var(--fs-xs); color: var(--text-faint); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.breadcrumb li { display: inline-flex; align-items: center; gap: .5rem; }
.breadcrumb li + li::before { content: "—"; color: var(--rule-strong); }
.breadcrumb a { color: var(--text-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-text); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text-muted); }

.page-head { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(2rem, 1.25rem + 2.5vw, 3.5rem); }
.page-head__inner { display: grid; gap: var(--sp-4); max-width: 46rem; }

/* Yalnızca Hakkımızda'da kullanılır (bkz. site/about.php) — diğer 9 sayfadaki
   page-head sol hizalı "antetli kağıt" düzenini korur, burada değişmez.
   Çizgi de aynı genişliğe (46rem) çekilip ortalanır — yoksa tam genişlikteki
   çizgiyle ortalanmış, dar metin bloğu orantısız durur. */
.page-head__inner--center { margin-inline: auto; text-align: center; }
/* .lead kendi max-width'iyle daralır ama otomatik ortalanmaz (bkz. §2 .lead) —
   burada elle ortalanır, yoksa üstteki h1'e göre sola kaymış görünür. */
.page-head__inner--center .lead { margin-inline: auto; }
.page-head__rule--center { max-width: 46rem; margin-inline: auto; }

.page-head__rule {
    height: 3px;
    margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    background:
        linear-gradient(var(--text), var(--text)) 0 0   / 100% 2px no-repeat,
        linear-gradient(var(--rule), var(--rule)) 0 3px / 100% 1px no-repeat;
}

.pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: .35rem; margin-top: var(--sp-8); padding-top: var(--sp-5);
    border-top: 1px solid var(--rule);
}

.pagination a, .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.75rem; min-height: 2.75rem; padding: 0 .75rem;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--text-muted); text-decoration: none;
    border: 1px solid var(--rule);
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.pagination a:hover { border-color: var(--accent); color: var(--accent-text); }
.pagination [aria-current="page"] { background: var(--deep); border-color: var(--deep); color: var(--text-on-deep); }
.pagination .is-disabled { opacity: .35; pointer-events: none; }

.accordion { border-top: 1px solid var(--text); }
.accordion__item { border-bottom: 1px solid var(--rule); }

.accordion__q {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--sp-4); padding-block: var(--sp-4);
    font-family: var(--font-display); font-size: var(--fs-lg); line-height: var(--lh-snug);
    color: var(--text); cursor: pointer; list-style: none;
    transition: color var(--dur) var(--ease);
}

.accordion__q::-webkit-details-marker { display: none; }
.accordion__q:hover { color: var(--accent-text); }

.accordion__icon { position: relative; width: 1rem; height: 1rem; flex: none; margin-top: .42rem; color: var(--accent); }

.accordion__icon::before, .accordion__icon::after {
    content: ""; position: absolute; inset: 50% 0 auto 0;
    height: 1px; background: currentColor;
    transition: transform .3s var(--ease-out);
}

.accordion__icon::after { transform: rotate(90deg); }
.accordion__item[open] .accordion__icon::after { transform: rotate(0); }
.accordion__item[open] .accordion__q { color: var(--accent-text); }

.accordion__a {
    padding-bottom: var(--sp-5);
    font-size: var(--fs-sm); line-height: var(--lh-loose);
    color: var(--text-muted); max-width: 58ch;
}

.accordion__item[open] .accordion__a { animation: answerIn .34s var(--ease-out); }

@keyframes answerIn { from { opacity: 0; transform: translateY(-6px); } }

.accordion__a > * + * { margin-top: var(--sp-3); }


/* ===================================================================
   21. ZENGİN METİN
   =================================================================== */

.prose { font-size: var(--fs-base); line-height: var(--lh-loose); color: var(--text); max-width: var(--measure); }
.prose--wide { max-width: none; }
.prose > * + * { margin-top: var(--sp-4); }

.prose h2 { margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid var(--rule); font-size: var(--fs-xl); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: var(--sp-6); font-size: var(--fs-lg); }
.prose h4 { margin-top: var(--sp-5); font-family: var(--font-body); font-size: var(--fs-base); font-weight: 600; }
.prose p { color: var(--text-muted); }
.prose a { font-weight: 500; }

.prose ul, .prose ol { display: grid; gap: .55rem; padding-left: 1.4rem; color: var(--text-muted); }
.prose ul { list-style: none; }
.prose ol { list-style: decimal; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: ""; position: absolute; left: -1.25rem; top: .82em; width: .65rem; height: 1px; background: var(--accent); }
.prose ol > li::marker { color: var(--accent-text); font-family: var(--font-display); }

.prose blockquote {
    margin-block: var(--sp-6); padding-left: var(--sp-5);
    border-left: 2px solid var(--accent);
    font-family: var(--font-display); font-size: var(--fs-lg); font-style: italic;
    line-height: var(--lh-base); color: var(--text);
    text-indent: -.36em;
}

.prose blockquote p { color: inherit; }
.prose figure { margin-block: var(--sp-6); }
.prose figcaption { margin-top: .6rem; font-family: var(--font-display); font-style: italic; font-size: var(--fs-xs); color: var(--text-faint); }
.prose img { border: 1px solid var(--rule); }
.prose table { margin-block: var(--sp-6); font-size: var(--fs-sm); }
.prose th, .prose td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--rule); }
.prose th { font-weight: 600; color: var(--text); border-bottom-color: var(--text); }
.prose td { color: var(--text-muted); }
.prose hr { margin-block: var(--sp-7); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* ===================================================================
   22. İLETİŞİM BLOĞU
   =================================================================== */

.letterhead { padding-block: var(--section-y); }
.letterhead__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }

@media (min-width: 56rem) { .letterhead__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }

.letterhead__title { font-size: var(--fs-2xl); max-width: 17ch; }
.letterhead__text { margin-top: var(--sp-4); color: var(--text-muted); max-width: 38ch; }
.letterhead__actions { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-4); }

.calling-card { display: grid; gap: 0; border-top: 1px solid var(--text); }

.calling-card__row {
    display: grid; grid-template-columns: 7rem minmax(0, 1fr);
    gap: var(--sp-4); padding-block: var(--sp-4);
    border-bottom: 1px solid var(--rule); font-size: var(--fs-sm);
}

.calling-card__label { font-family: var(--font-display); font-style: italic; color: var(--text-faint); }
.calling-card__value { color: var(--text); line-height: 1.6; }
.calling-card__value a { color: var(--text); text-decoration: none; }
.calling-card__value a:hover { color: var(--accent-text); text-decoration: underline; }
.calling-card__value span { display: block; }


/* ===================================================================
   23. YAN KUTU, PROFİL, İLETİŞİM
   =================================================================== */

.side-box { display: grid; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--text); }
.side-box__title { font-family: var(--font-display); font-style: italic; font-size: var(--fs-sm); color: var(--accent-text); }

.side-nav { display: grid; }

.side-nav a {
    display: block; padding: .5rem 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: var(--fs-sm); color: var(--text-muted); text-decoration: none;
    transition: color var(--dur) var(--ease), padding-left .3s var(--ease);
}

.side-nav a:hover { color: var(--accent-text); padding-left: .35rem; }

.side-nav a[aria-current="page"] {
    color: var(--text); font-weight: 600;
    box-shadow: inset 2px 0 0 var(--accent);
    padding-left: .6rem;
}

.profile { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); }

@media (min-width: 55rem) { .profile { grid-template-columns: 18rem minmax(0, 1fr); align-items: start; } }

.profile__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-tint); border: 1px solid var(--rule); }
.profile__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.03) sepia(.06); }

.profile__facts { display: grid; gap: 0; margin-top: var(--sp-5); border-top: 1px solid var(--text); }
.profile__fact { display: grid; gap: .2rem; padding-block: var(--sp-3); border-bottom: 1px solid var(--rule); }
.profile__fact dt { font-family: var(--font-display); font-style: italic; font-size: var(--fs-xs); color: var(--text-faint); }
.profile__fact dd { margin: 0; font-size: var(--fs-sm); color: var(--text); }
.profile__fact dd ul { display: grid; gap: .25rem; }

.contact-grid { display: grid; gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); align-items: start; }

@media (min-width: 58rem) { .contact-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }

.map-frame { aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--rule); background: var(--paper-tint); }
.map-frame iframe { width: 100%; height: 100%; border: 0; }

.empty-state {
    display: grid; gap: var(--sp-3); justify-items: center; text-align: center;
    padding: var(--sp-9) var(--sp-5);
    border-block: 1px solid var(--rule); color: var(--text-muted);
}

.empty-state svg { width: 2.2rem; height: 2.2rem; color: var(--text-faint); }

.error-page { display: grid; gap: var(--sp-5); padding-block: clamp(3.5rem, 2rem + 7vw, 8rem); max-width: 40rem; }

.error-page__code { font-family: var(--font-display); font-size: clamp(3rem, 2rem + 6vw, 6rem); line-height: 1; color: var(--accent); opacity: .3; }


/* ===================================================================
   24. ALTBİLGİ
   =================================================================== */

.site-footer { background: var(--deep); color: var(--text-on-deep-2); font-size: var(--fs-sm); }
.site-footer a { color: var(--text-on-deep-2); text-decoration: none; }
.site-footer a:hover { color: var(--accent-on-deep); }

.footer__crest {
    height: 4px;
    background:
        linear-gradient(var(--c-accent-500), var(--c-accent-500)) 0 0 / 100% 2px no-repeat,
        linear-gradient(
            color-mix(in srgb, var(--c-accent-300) 30%, transparent),
            color-mix(in srgb, var(--c-accent-300) 30%, transparent)
        ) 0 4px / 100% 1px no-repeat;
}

.footer__main { display: grid; gap: var(--sp-7); padding-block: var(--sp-9) var(--sp-7); }

@media (min-width: 48rem) { .footer__main { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 70rem) { .footer__main { grid-template-columns: 1.8fr 1fr 1fr 1.3fr; } }

.footer__brand { display: grid; gap: var(--sp-4); max-width: 26rem; }
.footer__brand .brand, .footer__brand .brand__name { color: var(--text-on-deep); }
.footer__brand .brand__mark { color: var(--accent-on-deep); }
.footer__brand .brand__sub { color: var(--text-on-deep-2); }

.footer__disclaimer { font-size: var(--fs-xs); line-height: var(--lh-base); color: var(--text-on-deep-2); opacity: .82; }

.footer__col { display: grid; gap: var(--sp-3); align-content: start; }

.footer__title {
    font-family: var(--font-display); font-style: italic; font-size: var(--fs-sm);
    color: var(--accent-on-deep);
    padding-bottom: .5rem; border-bottom: 1px solid var(--rule-on-deep); margin-bottom: .35rem;
}

.footer__list { display: grid; gap: .5rem; }
.footer__list a { display: inline-block; padding-block: .05rem; font-size: var(--fs-sm); }

.footer__contact { display: grid; gap: .8rem; }

.footer__contact-item {
    display: grid; grid-template-columns: 1.05rem 1fr; gap: .7rem; align-items: start;
    font-size: var(--fs-sm); line-height: 1.55;
}

.footer__contact-item svg { width: 1.05rem; height: 1.05rem; color: var(--accent-on-deep); margin-top: .2rem; }
.footer__hours { display: grid; gap: .2rem; font-size: var(--fs-xs); }

.footer__bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--sp-4); padding-block: var(--sp-5);
    border-top: 1px solid var(--rule-on-deep); font-size: var(--fs-xs);
}

.footer__legal { display: flex; flex-wrap: wrap; gap: .35rem 1.15rem; }

.footer__note {
    padding-bottom: var(--sp-6);
    font-family: var(--font-display); font-style: italic;
    font-size: var(--fs-xs); line-height: var(--lh-base);
    color: var(--text-on-deep-2); opacity: .7; max-width: 62rem;
}

.social { display: flex; gap: .4rem; }

.social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem;
    border: 1px solid var(--rule-on-deep);
    transition: border-color var(--dur) var(--ease), transform .3s var(--ease);
}

.social a:hover { border-color: var(--accent-on-deep); transform: translateY(-2px); }
.social svg { width: 1.05rem; height: 1.05rem; }


/* ===================================================================
   24b. YÜZEN BUTONLAR
   -------------------------------------------------------------------
   Sitenin köşeli/keskin kenar dili burada da korunur (--radius: 0) —
   genel "yüzen yuvarlak balon" kalıbı yerine mühür gibi köşeli, ince
   gölgeli butonlar. "Yukarı çık" JS olmadan hiç görünmez (progressive
   enhancement: tıklaması zaten JS gerektirir, bkz. app.js).
   =================================================================== */

.floating-actions {
    position: fixed;
    left: var(--sp-4);
    bottom: var(--sp-4);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.floating-actions__btn,
.scroll-top {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem;
    background: var(--deep);
    color: var(--accent-on-deep);
    border: 1px solid var(--deep);
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
    cursor: pointer;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}

.floating-actions__btn svg,
.scroll-top svg { width: 1.35rem; height: 1.35rem; }

.floating-actions__btn:hover,
.scroll-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.28);
    color: var(--text-on-deep);
}

.scroll-top {
    position: fixed;
    right: var(--sp-4);
    bottom: var(--sp-4);
    z-index: 60;
}

.scroll-top[hidden] { display: none; }

@media (min-width: 48rem) {
    .floating-actions { left: var(--sp-5); bottom: var(--sp-5); }
    .scroll-top { right: var(--sp-5); bottom: var(--sp-5); }
}

/* Yüzen butonlar mobilde alt kenardan taşan sabit bir CTA şeridi varsa
   (bu şablonda yok) onunla çakışmaz; yine de dar ekranda footer'ın son
   satırlarıyla üst üste binmesin diye biraz küçültülür. */
@media (max-width: 26rem) {
    .floating-actions__btn, .scroll-top { width: 2.6rem; height: 2.6rem; }
    .floating-actions__btn svg, .scroll-top svg { width: 1.2rem; height: 1.2rem; }
}


/* ===================================================================
   25. HAREKET
   -------------------------------------------------------------------
   Tümü `.js` sınıfına bağlı: JavaScript kapalıyken hiçbir öğe gizli
   kalmaz. `prefers-reduced-motion` hepsini kapatır.
   =================================================================== */

/* --- Kaydırma ile beliren bloklar --- */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .65s var(--ease-out) var(--d, 0ms),
                transform .65s var(--ease-out) var(--d, 0ms);
}

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

/* Görseller yukarıdan aşağı kazınarak açılır */
.js [data-reveal="wipe"] {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1s var(--ease-out) var(--d, 0ms);
}

.js [data-reveal="wipe"].is-visible { clip-path: inset(0 0 0 0); }

/* --- Kahraman bölümü girişi --- */
.js .hero__letterhead,
.js .hero__content > *,
.js .hero__media { opacity: 0; }

.js .hero.is-ready .hero__letterhead { animation: heroIn .75s var(--ease-out) .05s forwards; }
.js .hero.is-ready .hero__content > * { animation: heroIn .75s var(--ease-out) forwards; }
.js .hero.is-ready .hero__content > *:nth-child(1) { animation-delay: .16s; }
.js .hero.is-ready .hero__content > *:nth-child(2) { animation-delay: .26s; }
.js .hero.is-ready .hero__content > *:nth-child(3) { animation-delay: .36s; }
.js .hero.is-ready .hero__content > *:nth-child(4) { animation-delay: .46s; }
.js .hero.is-ready .hero__media    { animation: mediaIn 1.05s var(--ease-out) .2s forwards; }

@keyframes heroIn  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mediaIn { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* Fırça izinin çizilmesi */
.js .hero__title em::after { transform: scaleX(0); }
.js .hero.is-ready .hero__title em::after { animation: brush .85s var(--ease-out) .8s forwards; }

@keyframes brush { to { transform: scaleX(1); } }

/* Mühür: çok yavaş dönüş — fark edilmez ama sayfayı "canlı" tutar */
.js .hero__stamp svg { animation: sealDrift 120s linear infinite; }

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

/* Revak gravürünün yavaş yükselişi */
.js .portico__art { transform: translateY(14px); transition: transform 1.4s var(--ease-out); }
.js .portico.is-visible .portico__art { transform: none; }

/* -------------------------------------------------------------------
   Hareketin atlandığı durumlar

   `no-anim` sınıfını app.js kök öğeye ekler: kullanıcı hareket azaltma
   istediğinde YA DA sayfa arka planda açıldığında (Ctrl+tık, bağlantı
   önizlemesi, ekran görüntüsü alan botlar).

   Neden gerekli: gizli sekmede tarayıcı yalnızca requestAnimationFrame'i
   değil, CSS geçiş ve animasyonlarını da dondurur. Sadece "göster"
   sınıfını eklemek yetmez — öğe opacity:0'da takılı kalır ve içerik
   hiç görünmez. Burada başlangıç gizli durumunun kendisi iptal edilir.
   ------------------------------------------------------------------- */

.no-anim [data-reveal],
.no-anim .hero__letterhead,
.no-anim .hero__content > *,
.no-anim .hero__media,
.no-anim .portico__art {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
}

.no-anim .hero__title em::after {
    transform: scaleX(1) !important;
    animation: none !important;
}

.no-anim .hero__stamp svg { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}


/* ===================================================================
   26. YAZDIRMA
   =================================================================== */

@media print {
    .colophon, .site-header, .site-footer, .nav-toggle,
    .letterhead__actions, .breadcrumb, .pagination,
    .hero__media, .hero__actions, .portico__art { display: none !important; }

    body { background: #fff; color: #000; font-size: 11pt; }
    body::before { display: none; }
    .section { padding-block: 1rem; }
    .btn { box-shadow: none !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
    .card, .accordion__item, .index-item, .entry { break-inside: avoid; }
}