@charset "UTF-8";

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/fraunces-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/fraunces-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                 U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                 U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/work-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/work-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                 U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@layer reset, tokens, base, layout, components, sections, utilities;

/* ==========================================================================
   Aslı Bale — main.css
   Tek dosya. Build step yok, SCSS yok (bkz. BRIEF.md §9).
   İçindekiler:
     1. reset       — normalize + kutu modeli
     2. tokens      — renk, tipografi, boşluk, easing
     3. base        — element varsayılanları, focus, seçim
     4. layout      — container, grid, bölüm ritmi
     5. components  — buton, link, hairline, medya, wordmark, nav, form
     6. sections    — hero, intro, program, galeri, duyurular, cta, footer
     7. utilities   — sr-only, focal, reveal
   Kurallar: gradient/glow/glassmorphism yok · radius 0 · transition:all yok ·
   ease-in yok · yalnızca transform + opacity animasyonlanır.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }

  ul[class], ol[class] { list-style: none; padding: 0; }

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

  img, video { height: auto; }

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

  button { background: none; border: 0; padding: 0; cursor: pointer; }

  table { border-collapse: collapse; }
}
/* --------------------------------------------------------------- 2. tokens */
@layer tokens {
  :root {
    /* --- Renk: açık zemin ------------------------------------------------
       Palet kurumun gerçek logosundan / marka kılavuzundan türetilmiştir
       (bkz. brand/Asli-Bale-Marka-Kilavuzu.pdf).
       Kontrast oranları WCAG formülüyle hesaplandı, BRIEF.md §7'de kayıtlı. */
    --paper:        #FBF6F2;   /* Stüdyo Kreması — ana zemin                 */
    --paper-2:      #F3E9E6;   /* placeholder dolgusu, hafif kırılma  1.1:1  */
    --ink:          #1A1614;   /* birincil metin        — 16.7:1 AAA         */
    --ink-2:        #57616C;   /* Stüdyo Grisi — ikincil metin, input kenarı
                                  — 5.9:1 AA                                 */
    --accent:       #3B2130;   /* Perde Şarabı — CTA, vurgu
                                  — YALNIZCA açık zeminde  13.5:1 AAA        */
    --accent-hover: #2A1722;   /* Perde Şarabı %15 koyu        — 15.7:1 AAA  */
    --pointe:       #F179AF;   /* Kurdele Pembesi — 2.4:1
                                  YALNIZCA DEKORATİF, asla metin rengi       */
    --gold:         #C9A24B;   /* Bar Altını — 2.2:1, NADİR + YALNIZCA
                                  DEKORATİF (rozet/ayraç), asla metin        */
    --line:         #E4D8D2;   /* 1.3:1 — dekoratif hairline, asla input     */
    --line-strong:  #57616C;   /* Stüdyo Grisi — 5.9:1, non-text UI sınırı,
                                  focus ring (3:1 eşiğini rahat geçer)       */

    /* --- Renk: koyu zemin -------------------------------------------------
       Perde Şarabı koyu zeminde 1.3:1 — GÖRÜNMEZ.
       Koyu bölümde CTA dolgusu asla şarap olmaz; Bar Altını'na döner. */
    --stage:            #170F13;  /* koyu bölüm zemini (şaraba kırık siyah)  */
    --stage-2:          #20161C;  /* koyu zeminde placeholder dolgusu 1.1:1  */
    --on-dark:          #FBF6F2;  /* Stüdyo Kreması — birincil metin 17.6:1  */
    --on-dark-2:        #9DA4AC;  /* Stüdyo Grisi'nin açık tonu   —  7.5:1   */
    --accent-on-dark:   #C9A24B;  /* Bar Altını — CTA dolgusu     —  7.9:1   */
    --accent-on-dark-h: #DCB565;  /* koyu zeminde CTA hover       —  9.7:1   */
    --line-on-dark:     #402E3D;  /* koyu zeminde dekoratif hairline 1.5:1   */

    /* --- Tipografi -------------------------------------------------------
       Aşama 1: web font yok. Sistem stack. Font kararı onay bekliyor.
       font-optical-sizing, destekleyen sistem serif'lerinde punto başına
       optik düzeltme sağlar (New York, Times New Roman). */
    /* ui-serif YAZILMAZ: Chrome/Windows'ta generic serif'e, oradan Times New
       Roman'a duser ve Georgia'ya hic sira gelmez. Sitenin premium algisi
       tamamen display serif'e yaslandigi icin Windows'ta Word tipografisi olurdu. */
    --font-display: "New York", "Iowan Old Style", "Palatino Linotype",
                    Palatino, Georgia, serif;
    --font-body:    system-ui, -apple-system, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, sans-serif;

    /* Leading punto ile TERS orantılıdır: display sıkı, gövde geniş. */
    --fs-display: clamp(2.5rem, 1.9rem + 3.1vw, 4.25rem);    /* 40 → 68 */
    --fs-h1:      clamp(2.25rem, 1.7rem + 2.7vw, 3.75rem);   /* 36 → 60 */
    --fs-h2:      clamp(1.75rem, 1.4rem + 1.7vw, 2.75rem);   /* 28 → 44 */
    --fs-h3:      clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);   /* 20 → 24 */
    --fs-lead:    clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);/* 18 → 22 */
    --fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);   /* 16 → 17 */
    --fs-caption: 0.8125rem;                                 /* 13      */
    --fs-eyebrow: 0.75rem;                                   /* 12      */

    --lh-display: 0.98;
    --lh-h1:      1.06;
    --lh-h2:      1.12;
    --lh-h3:      1.25;
    --lh-body:    1.65;

    --ls-display: -0.028em;
    --ls-h1:      -0.02em;
    --ls-h2:      -0.015em;
    --ls-eyebrow:  0.14em;

    /* Türkçe kelimeler uzun; 75ch fazla gelir. */
    --measure:      66ch;
    --measure-lead: 52ch;

    /* --- Boşluk (8px tabanlı) --------------------------------------------
       Üç kademe. Her boşluğu 144px yapmak bölümleri yüzen levhalara çevirir. */
    --space-2xs: 0.25rem;   /*  4 */
    --space-xs:  0.5rem;    /*  8 */
    --space-sm:  1rem;      /* 16 */
    --space-md:  1.5rem;    /* 24 */
    --space-lg:  2rem;      /* 32 */
    --space-xl:  3rem;      /* 48 */
    --space-2xl: 4rem;      /* 64 */

    --space-section:    clamp(4rem, 9vw, 7rem);       /* 64 → 112 varsayılan */
    --space-section-lg: clamp(5rem, 11vw, 9rem);      /* 80 → 144 koyu bölüm */
    --space-section-sm: clamp(2.5rem, 6vw, 4.5rem);   /* 40 →  72 sıkı ikili */

    /* --- Layout ---------------------------------------------------------- */
    --container: 1200px;
    --gutter:    clamp(1.25rem, 4vw, 2.5rem);
    --header-h:  4.5rem;    /* 72px — sabit, JS ile ölçülmez (CLS) */

    /* --- Easing ve süre ---------------------------------------------------
       Yerleşik CSS easing'leri zayıf. ease-in UI'da asla kullanılmaz. */
    --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

    --dur-press:  160ms;
    --dur-fast:   200ms;
    --dur-base:   260ms;
    --dur-drawer: 280ms;
    --dur-reveal: 400ms;

    /* Köşe yarıçapı YOK. Tek istisna focus ring offset'i. */
    --radius: 0;
  }
}

/* ----------------------------------------------------------------- 3. base */
@layer base {
  html {
    /* Sabit header altındaki anchor'lar başlığın altında kalmasın. */
    scroll-padding-top: calc(var(--header-h) + var(--space-sm));
    /* Mobil menü scroll kilidinde yatay kayma olmasın. */
    scrollbar-gutter: stable;
  }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    /* Kelime uzunluğu yüksek dilde taşmayı engeller. */
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-optical-sizing: auto;
    text-wrap: balance;
  }

  h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
  h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
  h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-family: var(--font-body);
       font-weight: 600; letter-spacing: -0.005em; }

  p { max-width: var(--measure); text-wrap: pretty; }

  a { color: inherit; }

  /* Odak halkası box-shadow ile değil outline ile — Windows High Contrast'ta
     box-shadow kaybolur. */
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
  .on-dark :focus-visible { outline-color: var(--accent-on-dark); }

  /* --pointe burada DOLGU, metin rengi değil; üstündeki --ink 6.9:1 ile AA geçer. */
  ::selection { background: var(--pointe); color: var(--ink); }

  /* Reduced motion: hareket kalkar, opacity kalır — sıfırlanmaz.
     "Daha az ve daha yumuşak", hiç değil. */
  /* Reduced motion: hareket kalkar, opacity kalır — sıfırlanmaz.
     transition-duration'ı 200ms'te bırakmak HATA olurdu: transition-property'nin
     başlangıç değeri 'all' olduğu için hiç transition tanımlamamış her öğe
     bütün özelliklerini animasyonlamaya başlar. Önce her şey durdurulur,
     sonra istenen opacity geçişleri tek tek geri verilir. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .reveal-ready [data-reveal] {
      transform: none;
      transition-duration: 200ms !important;
    }
  }
}

/* --------------------------------------------------------------- 4. layout */
@layer layout {
  .container {
    width: min(100% - (var(--gutter) * 2), var(--container));
    margin-inline: auto;
  }

  /* Sağdan viewport'a taşan medya için: sol tarafı container'a hizalı,
     sağ tarafı ekran kenarına kadar. */
  /* Sol kenarı .container ile piksel piksel hizalı, sağı ekran kenarına taşan blok.
     100vw KULLANILMAZ: scrollbar genişliğini içerir ve hesabı kaydırır.
     padding-inline-start da eklenmez: border-box altında içeriği bir gutter
     daha içeri iter ve bölüm başlığıyla hizayı bozar. */
  .container-bleed-right {
    width: min(100% - var(--gutter),
               calc((100% - var(--container)) / 2 + var(--container)));
    margin-inline-start: auto;
    margin-inline-end: 0;
  }

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

  /* Koyu bölüm. Sayfanın tek renk kırılması. */
  .on-dark {
    background: var(--stage);
    color: var(--on-dark);
  }
  .on-dark h1, .on-dark h2, .on-dark h3 { color: var(--on-dark); }

  .stack > * + * { margin-block-start: var(--space-md); }
  .stack-sm > * + * { margin-block-start: var(--space-sm); }
  .stack-lg > * + * { margin-block-start: var(--space-lg); }
}

/* ----------------------------------------------------------- 5. components */
@layer components {

  /* --- Eyebrow / meta satırı ---
     lang="tr" olmadan uppercase 'istanbul' → 'ISTANBUL' üretir (yanlış).
     html[lang=tr] ile tarayıcı 'İSTANBUL' üretir. */
  .eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    line-height: 1.4;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--ink-2);
    margin: 0;
  }
  .on-dark .eyebrow { color: var(--on-dark-2); }

  /* reset h2{margin:0} verdigi icin eyebrow ile baslik arasi 0px kaliyordu;
     koyu CTA bandinda 44px serif'in soru isareti alttaki 22px satira degiyordu. */
  .eyebrow + h1,
  .eyebrow + h2 { margin-block-start: var(--space-2xs); }

  .lead {
    font-size: var(--fs-lead);
    line-height: 1.5;
    max-width: var(--measure-lead);
  }

  .caption {
    font-size: var(--fs-caption);
    line-height: 1.45;
    letter-spacing: 0.01em;
    color: var(--ink-2);
  }
  .on-dark .caption { color: var(--on-dark-2); }

  /* --- Hairline --- */
  .hairline {
    border: 0;
    border-block-start: 1px solid var(--line);
    margin: 0;
  }
  .on-dark .hairline { border-block-start-color: var(--line-on-dark); }

  /* --- Butonlar ---
     Radius 0. Gradient yok. Gölge yok. */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;                 /* dokunma hedefi */
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background-color var(--dur-fast) ease,
                color var(--dur-fast) ease,
                transform var(--dur-press) var(--ease-out);
  }

  .btn--primary {
    background: var(--accent);        /* kağıt üzerinde 13.5:1 */
    color: var(--paper);              /* şarap üzerinde 13.5:1 */
  }

  /* Koyu zeminde şarap 1.3:1 ile kaybolur — dolgu Bar Altını'na döner. */
  .on-dark .btn--primary {
    background: var(--accent-on-dark);
    color: var(--ink);                /* altın üzerinde 7.5:1 */
  }

  .btn--ghost {
    border: 1px solid var(--line-strong);   /* 5.9:1 — non-text eşiği geçer */
    color: var(--ink);
  }
  .on-dark .btn--ghost { border-color: var(--on-dark-2); color: var(--on-dark); }

  /* Hover hareketi yalnızca gerçek işaretçide — dokunmatikte tap sahte hover üretir. */
  @media (hover: hover) and (pointer: fine) {
    .btn--primary:hover { background: var(--accent-hover); }
    .on-dark .btn--primary:hover { background: var(--accent-on-dark-h); }
    .btn--ghost:hover { background: var(--ink); color: var(--paper); }
    .on-dark .btn--ghost:hover { background: var(--on-dark); color: var(--ink); }
  }

  /* Basma geri bildirimi: arayüz kullanıcıyı duyduğunu söyler. */
  .btn:active { transform: scale(0.97); }

  /* --- Metin linki (hero'da ikinci aksiyon: iki ağır buton yan yana konmaz) --- */
  .link-underline {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    text-decoration: none;
    border-block-end: 1px solid var(--line-strong);
    transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .link-underline:hover { border-block-end-color: var(--accent); color: var(--accent); }
    .on-dark .link-underline:hover {
      border-block-end-color: var(--accent-on-dark); color: var(--accent-on-dark);
    }
  }

  /* --- Medya kutusu ---
     aspect-ratio wrapper hiçbir zaman kaldırılmaz. Placeholder'dan gerçek
     fotoğrafa geçiş yalnızca src + alt değişimidir; layout sabit kalır. */
  .media {
    position: relative;
    overflow: hidden;
    background: var(--paper-2);
    aspect-ratio: var(--ratio, 4 / 5);
  }
  .on-dark .media { background: var(--stage-2); }

  .media > img,
  .media > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focal, 50% 40%);
  }

  .media--4x5 { --ratio: 4 / 5; }
  .media--3x2 { --ratio: 3 / 2; }
  .media--16x9 { --ratio: 16 / 9; }

  /* Placeholder: ikon yok, "yakında" yazısı yok, çapraz çizgi yok, boyut yazısı yok.
     Yalnızca sıcak dolgu + içeriden 12px hairline çerçeve. */
  .media--placeholder::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid var(--line);
    pointer-events: none;
  }
  .on-dark .media--placeholder::after { border-color: var(--line-on-dark); }

  /* --- Wordmark ---
     Geçici. Gerçek SVG logo geldiğinde yalnızca partials/brand/wordmark.php
     değişir; kutu ölçüsü burada sabit olduğu için header hizası kaymaz. */
  .wordmark {
    display: inline-flex;
    align-items: center;
    height: var(--logo-h, 1.75rem);   /* 28px masaüstü */
    min-width: var(--logo-w, 8.5rem); /* gerçek logo için rezerve alan */
    text-decoration: none;
    color: inherit;
  }
  .wordmark__text {
    font-family: var(--font-display);
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  @media (max-width: 599px) {
    .wordmark { --logo-h: 1.5rem; --logo-w: 7.5rem; }
    .wordmark__text { font-size: 1rem; letter-spacing: 0.16em; }
  }

  /* --- Form --- */
  .field { display: block; }
  .field + .field { margin-block-start: var(--space-md); }

  .field__label {
    display: block;
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-block-end: var(--space-2xs);
  }

  .field__control {
    display: block;
    width: 100%;
    /* 16px altı iOS'ta focus'ta sayfayı zoomlar. */
    font-size: 1rem;
    padding: 0.75rem;
    background: var(--paper);
    color: var(--ink);
    /* --line (1.3:1) UI bileşeni eşiğini geçmez; kenarlık --ink-2 (6.8:1). */
    border: 1px solid var(--ink-2);
    border-radius: var(--radius);
    transition: border-color var(--dur-fast) ease;
  }
  .field__control:focus-visible { border-color: var(--accent); }
  .field__control[aria-invalid="true"] { border-color: var(--accent); border-width: 2px; }

  textarea.field__control { min-height: 8rem; resize: vertical; }

  .field__error {
    display: block;
    font-size: var(--fs-caption);
    color: var(--accent);
    font-weight: 600;
    margin-block-start: var(--space-2xs);
  }

  /* Honeypot — ekran okuyucudan da klavyeden de uzak. */
  .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .form-note {
    font-size: var(--fs-caption);
    color: var(--ink-2);
    max-width: var(--measure);
  }

  .alert {
    padding: var(--space-md);
    border-inline-start: 3px solid var(--accent);
    background: var(--paper-2);
  }
  .alert h2 { font-size: var(--fs-h3); font-family: var(--font-body); font-weight: 600; }

  /* --- Placeholder etiketi ---
     Taslak/onaysız içeriğin gerçek kurumsal bilgi gibi görünmemesi için. */
  .draft-note {
    font-size: var(--fs-caption);
    color: var(--ink-2);
    border-inline-start: 2px solid var(--line-strong);
    padding-inline-start: var(--space-sm);
    max-width: var(--measure);
  }
  .on-dark .draft-note { color: var(--on-dark-2); border-inline-start-color: var(--on-dark-2); }
}

/* ------------------------------------------------------------- 5b. header */
@layer components {
  .skip-link {
    position: absolute;
    inset-inline-start: var(--gutter);
    inset-block-start: 0;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    font-weight: 600;
    transform: translateY(-120%);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .skip-link:focus-visible { transform: translateY(0); }

  .header {
    position: sticky;
    inset-block-start: 0;
    /* Panelden (60) YÜKSEK olmalı: kapatma butonu header'ın içinde. */
    z-index: 70;
    height: var(--header-h);          /* sabit — CLS yok */
    background: var(--paper);
    border-block-end: 1px solid var(--line);
  }
  /* backdrop-filter YOK — glassmorphism yasak ve Safari'de pahalı. */

  /* Menü açıkken header koyu panelin üstünde durur ve şeffaflaşır;
     böylece kapatma butonu erişilebilir kalır ama açık bir bant görünmez. */
  [data-nav-open="true"] .header {
    background: transparent;
    border-block-end-color: transparent;
    color: var(--on-dark);
  }
  /* Focus trap kullanıcıyı buraya gönderir. .nav-toggle .on-dark ağacının
     içinde olmadığı için outline --accent kalırdı: koyu panelde 1.89:1 = görünmez. */
  [data-nav-open="true"] .header :focus-visible { outline-color: var(--accent-on-dark); }

  .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    height: 100%;
  }

  .nav__list { display: flex; align-items: center; gap: var(--space-lg); }

  .nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.9375rem;
    text-decoration: none;
    letter-spacing: 0.01em;
    border-block-end: 1px solid transparent;
    transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .nav__link[aria-current="page"] { border-block-end-color: var(--accent); }
  @media (hover: hover) and (pointer: fine) {
    .nav__link:hover { color: var(--accent); border-block-end-color: var(--line-strong); }
  }

  /* --- Hamburger --- */
  .nav-toggle {
    display: none;
    width: 48px;
    height: 48px;
    margin-inline-end: -0.75rem;   /* optik hizalama, dokunma alanı korunur */
    align-items: center;
    justify-content: center;
  }
  .nav-toggle__box { position: relative; width: 22px; height: 14px; }
  .nav-toggle__bar {
    position: absolute;
    inset-inline: 0;
    height: 1.5px;
    background: var(--ink);
    transition: transform var(--dur-base) var(--ease-out),
                opacity var(--dur-fast) ease;
  }
  .nav-toggle__bar:nth-child(1) { top: 0; }
  .nav-toggle__bar:nth-child(2) { top: 50%; margin-top: -0.75px; }
  .nav-toggle__bar:nth-child(3) { bottom: 0; }

  /* Hamburger → X morph (crossfade değil, gerçek dönüş) */
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: var(--on-dark); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(6.25px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-6.25px) rotate(-45deg);
  }

  /* --- Mobil menü paneli ---
     Tam ekran opak panel. Blur/glass yok. Yalnızca transform + opacity. */
  .mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: var(--stage);
    color: var(--on-dark);
    padding: calc(var(--header-h) + var(--space-lg)) var(--gutter) var(--space-xl);
    overscroll-behavior: contain;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    /* Çıkış hızlı (200ms): sistem yanıt veriyor.
       Giriş biraz yavaş (280ms): kullanıcı paneli okuyor. */
    transition: transform var(--dur-fast) var(--ease-drawer),
                visibility 0s linear var(--dur-fast);
  }
  .mobile-nav[data-open="true"] {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--dur-drawer) var(--ease-drawer),
                visibility 0s linear 0s;
  }

  /* .mobile-nav { display:flex } yazar kuralı UA'nın [hidden]{display:none}
     kuralını yener; hidden attribute'unun gerçekten iş görmesi için gerekli. */
  .mobile-nav[hidden] { display: none; }

  .mobile-nav__list { display: flex; flex-direction: column; }

  .mobile-nav__link {
    display: flex;
    align-items: center;
    min-height: 56px;
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 1.1rem + 1.4vw, 1.625rem);
    letter-spacing: -0.01em;
    text-decoration: none;
    border-block-end: 1px solid var(--line-on-dark);
    /* Stagger: panel açılınca sırayla girer. */
    opacity: 0;
    transform: translateX(12px);
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
  }
  .mobile-nav__link[aria-current="page"] { color: var(--accent-on-dark); }

  .mobile-nav[data-open="true"] .mobile-nav__link { opacity: 1; transform: translateX(0); }
  /* 40ms aralık, 5 öğe → 160ms kuyruk. Uzun gecikme yavaş hissettirir. */
  .mobile-nav[data-open="true"] .mobile-nav__link:nth-child(1) { transition-delay: 40ms; }
  .mobile-nav[data-open="true"] .mobile-nav__link:nth-child(2) { transition-delay: 80ms; }
  .mobile-nav[data-open="true"] .mobile-nav__link:nth-child(3) { transition-delay: 120ms; }
  .mobile-nav[data-open="true"] .mobile-nav__link:nth-child(4) { transition-delay: 160ms; }
  .mobile-nav[data-open="true"] .mobile-nav__link:nth-child(5) { transition-delay: 200ms; }

  /* CTA panelin ALTINDA — başparmak menzilinde, üstte değil. */
  .mobile-nav__footer { margin-block-start: auto; padding-block-start: var(--space-xl); }
  .mobile-nav__footer .btn { width: 100%; }

  @media (prefers-reduced-motion: reduce) {
    .mobile-nav__link {
      transform: none;
      transition-delay: 0ms !important;
      transition-duration: 200ms !important;
    }
    /* Özgüllük .mobile-nav[data-open="true"] (0,2,0) ile eşitlenmeli;
       yalnızca .mobile-nav (0,1,0) yazmak kaydırmayı KALDIRMAZ. */
    .mobile-nav,
    .mobile-nav[data-open="true"] {
      transform: none;
      transition: opacity 200ms linear, visibility 0s;
      transition-duration: 200ms !important;
    }
    .mobile-nav                   { opacity: 0; }
    .mobile-nav[data-open="true"] { opacity: 1; }
  }

  /* Menü açıkken body kilidi. iOS'ta overflow:hidden yetmez —
     position:fixed + scroll pozisyonu geri yükleme gerekir (nav.js). */
  body.is-locked {
    position: fixed;
    inset-inline: 0;
    width: 100%;
    overflow: hidden;
  }

  @media (max-width: 899px) {
    .nav { display: none; }
    .nav-toggle { display: inline-flex; }

    /* JS kapalıyken uygulanan yedek menü kuralları assets/css/nojs.css'tedir
       (<noscript> ile yüklenir; inline script CSP tarafından bloklanır). */
  }
  @media (min-width: 900px) {
    .mobile-nav { display: none; }
  }
}

/* ------------------------------------------------------------- 6. sections */
@layer sections {

  /* --- Hero: asimetrik editorial split ---
     Ortalanmış full-bleed koyu görsel + iki pill buton DEĞİL — o, kaçınılması
     istenen jenerik görüntü. Metin sola hizalı, medya sağdan viewport'a taşar. */
  .hero {
    /* 100vh yok: bir sonraki bölümün üst kenarı fold'da görünmeli.
       svh, iOS adres çubuğu zıplamasını engeller. */
    padding-block: var(--space-2xl) var(--space-section);
  }

  .hero__grid { display: grid; gap: var(--space-xl); }

  .hero__text { display: flex; flex-direction: column; }

  .hero__title {
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    margin-block-end: var(--space-md);
  }

  .hero__lead { margin-block-end: var(--space-lg); max-width: 46ch; }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md) var(--space-lg);
    margin-block-end: var(--space-lg);
  }

  /* "2000'den beri" — hairline'ın ALTINDA, H1'in üstünde değil.
     Rozet/pill içine konmaz: pill = AI klişesi. */
  .hero__meta { padding-block-start: var(--space-md); }

  .hero__media { position: relative; }

  @media (max-width: 899px) {
    /* Mobilde metin önce gelir: placeholder döneminde telefonu açar açmaz
       boş bir medya alanı görmek güveni bitirir.
       Gerçek fotoğraf gelince bu order tek satır CSS ile değişir. */
    .hero__media { order: 2; }
    .hero__text  { order: 1; }
    .hero__grid  { gap: var(--space-lg); }
  }

  @media (min-width: 900px) {
    .hero {
      display: flex;
      align-items: center;
      min-height: min(86svh, 880px);
      padding-block: var(--space-xl);
    }

    /* Medya sağdan ekran kenarına taşar — bu taşma tek başına
       "hazır şablon değil" sinyali verir.
       Sol kenar container hizasında kalır. */
    .hero > .container {
      width: 100%;
      max-width: none;
      margin-inline: 0;
      padding-inline-start: max(var(--gutter), calc((100% - var(--container)) / 2));
      padding-inline-end: 0;
    }
    .hero__grid {
      grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
      /* Metnin alt baseline'ı medyanın alt kenarına oturur — ortalama değil.
         Editorial ritim buradan gelir. */
      align-items: end;
      gap: var(--space-2xl);
      width: 100%;
    }
    .hero__text { padding-block-end: var(--space-lg); }

    /* Medya yükseklikten sınırlanır, oran korunur (genişlik yükseklikten türer).
       Aksi hâlde geniş kolonda 4:5 oranı ~940px yükseklik üretir ve hero şişer;
       bir sonraki bölümün üst kenarı fold'da görünmez olur. */
    .hero__media .media {
      height: min(74svh, 720px);
      width: auto;
      max-width: 100%;
      margin-inline-start: auto;
    }
  }

  /* --- Kurum beyanı ---
     Fotoğraf yokken güven yükünü metin taşır. */
  .intro__grid { display: grid; gap: var(--space-lg); }
  @media (min-width: 900px) {
    .intro__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
      gap: var(--space-2xl);
      align-items: start;
    }
  }
  .intro__body > * + * { margin-block-start: var(--space-md); }

  /* --- Eğitim programı ---
     Kart yok. Hairline ile ayrılmış satırlar — eşit yükseklikli üçlü grid
     jenerik SaaS ritmidir. */
  /* Metronomik ritmi kirmak icin: Dersler bolumu tam genislik bir hairline ile
     acilir, digerleri acilmaz. Tekrarlanan bolum yapisi brief'in acik kontrol
     maddelerinden biri. */
  .program__rule { margin-block-end: var(--space-lg); }

  .program__list { border-block-start: 1px solid var(--line); }

  .program__item {
    display: grid;
    gap: var(--space-xs);
    padding-block: var(--space-lg);
    border-block-end: 1px solid var(--line);
  }

  @media (min-width: 900px) {
    .program__item {
      grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
      gap: var(--space-xl);
      align-items: baseline;
    }
  }

  .program__name { font-family: var(--font-display); font-size: var(--fs-h3);
                   font-weight: 400; letter-spacing: -0.01em; }
  .program__desc { color: var(--ink-2); margin: 0; }

  /* --- Galeri ızgarası ---
     Yatay scroll-snap şerit KALDIRILDI: dokuz fotoğrafın altısı ekran dışında
     kalıyordu ve kimse sağa kaydırmıyordu. Izgarada hepsi aynı anda görünür.
     Kart yok, çerçeve yok, gölge yok — fotoğraflar doğrudan ızgaraya oturur;
     tek ritim boşluktan gelir. */
  .gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* Dokuz kare 3 sütunda tam kapanır. İki sütunda son kare tek başına kalıp
     satırı yarım bırakırdı; onu iki sütuna yayıp kapanış görseline çeviriyoruz. */
  @media (min-width: 600px) {
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  }

  @media (min-width: 900px) {
    .gallery-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-lg);
    }
    /* İki sütunun yayma kuralı üçte geçersiz — önce sıfırlanır. */
    .gallery-grid > li:last-child:nth-child(odd) { grid-column: auto; }

    /* Ana sayfada 9 kare üç sütunu tam kapatır. /galeri'de sayı değişkendir:
       son satırda tek kare kalırsa (3n+1) satır boyunca yayılıp kapanış
       görseline döner, iki kare kalırsa (3n+2) ikincisi iki sütuna yayılır.
       Aksi hâlde ızgaranın sağ alt köşesinde boş hücre kalıyor. */
    .gallery-grid > li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
    .gallery-grid > li:last-child:nth-child(3n + 2) { grid-column: span 2; }
  }

  /* Mobilde yigin, >=600px'te baseline'da yan yana.
     space-between + wrap dar ekranda linki container disina tasiriyordu. */
  .section__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    margin-block-end: var(--space-lg);
  }

  @media (min-width: 600px) {
    .section__head {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
    }
  }
  /* Bölüm başlıkları ortalanmaz — ortalanmış başlık + 60ch açıklama AI ritmidir. */

  /* --- Duyurular ---
     JSON boşken bölüm tek satıra çöker, delik açmaz. */
  .news__list { border-block-start: 1px solid var(--line); }

  .news__item { border-block-end: 1px solid var(--line); }

  .news__link {
    display: grid;
    gap: var(--space-2xs);
    padding-block: var(--space-md);
    text-decoration: none;
    transition: opacity var(--dur-fast) ease;
  }
  @media (min-width: 900px) {
    .news__link {
      grid-template-columns: 10rem minmax(0, 1fr);
      gap: var(--space-lg);
      align-items: baseline;
      padding-block: var(--space-lg);
    }
  }
  .news__title { font-family: var(--font-display); font-size: var(--fs-h3);
                 font-weight: 400; }
  @media (hover: hover) and (pointer: fine) {
    .news__link:hover .news__title { color: var(--accent); }
  }

  /* Bos durumda ALT hairline cizilmez: iki cizgi arasinda tek cumle,
     eksik bir tablo satiri gibi okunuyordu. Ust cizgi .news__list'ten gelir. */
  .news__empty {
    max-width: none;
    padding-block: var(--space-lg);
  }

  /* --- İletişim bandı (tek koyu bölüm) --- */
  .cta__grid { display: grid; gap: var(--space-lg); }
  @media (min-width: 900px) {
    .cta__grid {
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: var(--space-2xl);
      align-items: end;
    }
  }
  .cta__title { font-size: var(--fs-h2); margin-block-end: var(--space-sm); }

  /* CTA bandi ile footer ayni koyu renkte; simetrik buyuk padding ikisini tek
     bir uzun koyu kutleye ceviriyor ve aralarinda olu alan birakiyordu.
     Alt boslugu kisaltip aralarina hairline koyunca ikisi ayri ama bagli okunur. */
  .cta-band { padding-block: var(--space-section-lg) var(--space-section); }
  .cta-band + .footer { border-block-start: 1px solid var(--line-on-dark); }
  .cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

  /* --- İletişim sayfası ---
     Once aksiyon, sonra bilgi listesi. Iki sutuna bolunmuyor: solda tek bir
     telefon butonu, saginda uzun bir liste dengesiz duruyordu. Liste tam
     genislige de yayilmaz — kisa degerlerin yaninda 1200px'lik bos etiket
     sutunu kaliyor. */
  .contact__inner { max-width: 46rem; }

  .contact__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-end: var(--space-xl);
  }
  /* Dar ekranda iki buton yan yana sikisip metni sarmaliyordu. */
  @media (max-width: 599px) {
    .contact__buttons .btn { width: 100%; }
  }

  .contact__details { border-block-start: 1px solid var(--line); }

  .contact__row {
    display: grid;
    gap: var(--space-2xs);
    padding-block: var(--space-md);
    border-block-end: 1px solid var(--line);
  }
  @media (min-width: 600px) {
    .contact__row {
      grid-template-columns: 9rem minmax(0, 1fr);
      gap: var(--space-md);
      align-items: baseline;
    }
  }

  .contact__row dt {
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .contact__row dd { margin: 0; }

  .contact__hours { display: grid; gap: var(--space-2xs); max-width: 22rem; }
  .contact__hours li { display: flex; justify-content: space-between; gap: var(--space-md); }

  /* --- Harita ---
     Yukseklik SABIT: iframe'in ic yuksekligi olculemez, oran verilmezse
     harita yuklendiginde altindaki her sey asagi kayar (CLS). */
  .map {
    border: 1px solid var(--line);
    background: var(--paper-2);
  }
  .map__frame {
    display: block;
    width: 100%;
    height: clamp(20rem, 45vw, 30rem);
    border: 0;
  }

  /* --- Footer --- */
  .footer {
    background: var(--stage);
    color: var(--on-dark);
    padding-block: var(--space-xl) var(--space-lg);
  }
  .footer__grid { display: grid; gap: var(--space-lg); }
  @media (min-width: 700px) {
    .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 900px) {
    .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-xl); }
  }
  .footer__heading {
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--on-dark-2);
    margin-block-end: var(--space-sm);
  }
  /* Olculen yukseklik 20px idi — WCAG 2.5.8 (AA) 24px minimumun altinda.
     Hero butonlari ve nav-toggle dogru yapilmisti, footer atlanmisti. */
  .footer__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    border-block-end: 1px solid transparent;
  }
  @media (hover: hover) and (pointer: fine) {
    .footer__link:hover { border-block-end-color: var(--on-dark-2); }
  }
  .footer__bottom {
    margin-block-start: var(--space-xl);
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--line-on-dark);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-sm);
  }
}

/* ------------------------------------------------------------ 7. utilities */
@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Kadraj — inline style yerine class.
     CSP style-src 'self' inline style attribute'unu bloklar. */
  .focal-top    { --focal: 50% 20%; }
  .focal-center { --focal: 50% 50%; }
  .focal-bottom { --focal: 50% 80%; }

  .text-accent { color: var(--accent); }

  /* Inline style yerine. CSP style-src 'self' inline style attribute'unu bloklar. */
  .mt-sm { margin-block-start: var(--space-sm); }
  .mt-md { margin-block-start: var(--space-md); }
  .address { font-style: normal; }
  .no-wrap { white-space: nowrap; }

  /* --- Scroll reveal ---
     IntersectionObserver + CSS transition. GSAP yok (~37KB gz tasarruf).
     Ana sayfada en fazla 3 kullanım. translate ≤ 16px, ≤ 400ms.
     .js yoksa (JS kapalı/hata) içerik zaten görünür — no-JS'te kaybolmaz. */
  /* .reveal-ready sinifini reveal.js gozlemciyi kurmadan HEMEN ONCE ekler.
     Boylece gizleme yetenegi ile gosterme yetenegi ayni kosula baglanir:
     script hic yuklenmezse (ag hatasi, parse hatasi, CSP) icerik gorunur kalir. */
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-reveal) var(--ease-out),
                transform var(--dur-reveal) var(--ease-out);
  }
  .reveal-ready [data-reveal][data-revealed="true"] {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { transform: none; }
  }
}

/* ========================================================================
   2026 marka kılavuzu uygulaması
   Fraunces + Work Sans, gerçek logotype, kurdele pembesi ve kurumsal gri.
   ======================================================================== */
@layer tokens {
  :root {
    --paper: #FBF6F2;
    --paper-2: #F9EAF0;
    --ink: #272326;
    --ink-2: #57616C;
    --accent: #3B2130;
    --accent-hover: #291721;
    --pointe: #EA4A8E;
    --pointe-text: #9D2457;
    --ribbon: #F179AF;
    --gold: #C9A24B;
    --line: #DED7D4;
    --line-strong: #57616C;
    --stage: #3B2130;
    --stage-2: #2B1823;
    --on-dark: #FBF6F2;
    --on-dark-2: #D8CFD4;
    --line-on-dark: #684C5B;
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fs-display: clamp(3.35rem, 2rem + 5.2vw, 6.75rem);
    --fs-h2: clamp(2.25rem, 1.55rem + 2.4vw, 4rem);
    --fs-h3: clamp(1.4rem, 1.15rem + 0.7vw, 1.85rem);
    --fs-body: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);
    --header-h: 5.75rem;
    --container: 1240px;
    --radius: 0.375rem;
  }
}

@layer base {
  body { background: var(--paper); }
  h1, h2, h3 { font-weight: 600; }
  h2 { max-width: 16ch; }
}

@layer components {
  .eyebrow {
    color: var(--pointe-text);
    font-weight: 600;
    letter-spacing: 0.16em;
  }
  .on-dark .eyebrow { color: #F7A6C9; }

  .btn {
    min-height: 52px;
    border-radius: var(--radius);
    padding-inline: 1.6rem;
  }
  .btn--primary { box-shadow: 0 8px 24px rgb(59 33 48 / 12%); }

  .link-underline {
    border-color: color-mix(in srgb, var(--pointe) 70%, var(--paper));
  }

  .wordmark {
    width: 5.5rem;
    min-width: 5.5rem;
    height: 4.35rem;
  }
  .wordmark__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .header {
    background: rgb(251 246 242 / 96%);
    border-color: rgb(87 97 108 / 18%);
  }
  .header__inner { justify-content: initial; }
  .nav { margin-inline-start: auto; }
  .nav__list { gap: clamp(1.25rem, 2.5vw, 2.5rem); }
  .nav__link {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }
  .nav__link[aria-current="page"] { border-color: var(--pointe); }
  .header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-inline-start: var(--space-lg);
    padding-inline: 1.2rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
  }
  @media (hover: hover) and (pointer: fine) {
    .header__cta:hover { background: var(--accent); color: var(--paper); }
  }

  .footer .wordmark { width: 7.5rem; height: 5.75rem; }
  .footer .wordmark__image { filter: brightness(0) invert(1); }

  @media (max-width: 899px) {
    .header__cta { display: none; }
    .wordmark { width: 4.75rem; min-width: 4.75rem; height: 3.65rem; }
  }
}

@layer sections {
  .hero {
    min-height: auto;
    padding-block: clamp(2rem, 5vw, 4.5rem) clamp(4.5rem, 9vw, 8rem);
  }
  .hero__grid {
    display: grid;
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
  }
  .hero__eyebrow { margin-block-end: 1.25rem; }
  .hero__title {
    max-width: 7.5ch;
    margin-block-end: 1.5rem;
    font-weight: 600;
  }
  .hero__lead { max-width: 43ch; color: #4B4549; }
  .hero__actions { margin-block-end: clamp(2rem, 5vw, 3.5rem); }
  .hero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 34rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--line);
  }
  .hero__facts dt {
    color: var(--pointe-text);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .hero__facts dd {
    margin: 0.25rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1rem + 0.3vw, 1.3rem);
    font-weight: 500;
    line-height: 1.25;
  }

  .hero__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: clamp(31rem, 65vw, 43rem);
    padding: clamp(2rem, 6vw, 5rem);
    overflow: hidden;
    border-radius: var(--radius);
    background: linear-gradient(155deg, #FDEBF3 0%, #F8C5DA 52%, #F179AF 100%);
    text-align: center;
  }
  .hero__stage::before,
  .hero__stage::after {
    content: "";
    position: absolute;
    inset-inline: -18%;
    height: 20%;
    border: 2px solid rgb(255 255 255 / 72%);
    border-radius: 50%;
    transform: rotate(-6deg);
  }
  .hero__stage::before { inset-block-start: 10%; }
  .hero__stage::after { inset-block-end: 5%; transform: rotate(5deg); }
  .hero__stage img {
    position: relative;
    z-index: 1;
    width: min(78%, 24rem);
    height: auto;
    margin-block: 1rem;
  }
  .hero__stage-kicker,
  .hero__stage-location {
    position: relative;
    z-index: 1;
    color: #644D59;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .hero__stage p {
    position: relative;
    z-index: 1;
    max-width: 19ch;
    margin-block: 0.5rem 2rem;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.35rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.18;
  }

  .intro__grid { gap: clamp(2rem, 6vw, 6rem); }
  .intro__body { font-size: var(--fs-lead); line-height: 1.6; }
  .intro__body .link-underline { font-size: 1rem; }
  .intro__facts {
    display: grid;
    gap: 1px;
    margin-block-start: clamp(3rem, 7vw, 6rem);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--line);
  }
  .intro__facts > div { padding: clamp(1.5rem, 4vw, 2.5rem); background: #FFFDFC; }
  .intro__facts dt {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
    font-weight: 600;
    line-height: 1;
  }
  .intro__facts dd {
    margin: 0.65rem 0 0;
    color: var(--ink-2);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .program__rule { border-color: var(--pointe); }
  .program__list {
    display: grid;
    gap: 1rem;
    border: 0;
  }
  .program__item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: start;
    gap: 0.35rem 1.25rem;
    min-height: 15rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #FFFDFC;
  }
  .program__number {
    grid-row: 1 / span 2;
    color: var(--pointe-text);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-style: italic;
  }
  .program__name {
    font-size: clamp(1.55rem, 1.2rem + 0.9vw, 2.2rem);
    font-weight: 600;
  }
  .program__desc { align-self: end; margin-block-start: auto; line-height: 1.65; }

  /* 07.09.2026: kurumun eskizindeki dizilim — ust satirda uc esit MEB
     basamagi, altta tam genislikte RAD seridi. 2x2 grid dort basamagi esit
     agirlikta gosteriyordu; RAD ayri bir mufredat, ayri bir satir. */
  .program__item--wide { min-height: 0; }

  .philosophy {
    padding-block: clamp(5rem, 11vw, 9rem);
    background: var(--stage);
  }
  .philosophy__grid { display: grid; gap: clamp(3rem, 8vw, 8rem); align-items: end; }
  .philosophy h2 { max-width: 13ch; }
  .philosophy blockquote {
    padding-inline-start: clamp(1.5rem, 4vw, 3rem);
    border-inline-start: 3px solid var(--pointe);
  }
  .philosophy blockquote p {
    max-width: 18ch;
    color: #F7A6C9;
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 1.35rem + 3vw, 4.5rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.06;
  }
  .philosophy blockquote footer {
    margin-block-start: 1.5rem;
    color: var(--on-dark-2);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .cta-band {
    padding-block: clamp(4.5rem, 10vw, 8rem);
    background: linear-gradient(145deg, #F7B8D2 0%, #F179AF 100%);
    color: var(--ink);
  }
  .cta-band h2,
  .cta-band h3 { color: var(--ink); }
  .cta-band .eyebrow { color: #7D1D47; }
  .cta-band .btn--primary { background: var(--accent); color: var(--paper); }
  .cta-band + .footer { border: 0; }

  .footer { background: var(--ink-2); }
  .footer__heading, .footer .caption { color: #E9E7E8; }
  .footer__bottom { border-color: rgb(255 255 255 / 22%); }

  @media (min-width: 700px) {
    .intro__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 900px) {
    .program__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .program__item--wide {
      grid-column: 1 / -1;
      grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.25fr);
      align-items: baseline;
      gap: 0.35rem clamp(1.5rem, 3vw, 3rem);
    }
    .program__item--wide .program__number { grid-row: 1; }
    .program__item--wide .program__name { grid-column: 2; }
    .program__item--wide .program__desc {
      grid-column: 3;
      grid-row: 1;
      align-self: baseline;
      margin-block-start: 0;
    }
    .hero__grid { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); }
    .hero__stage { min-height: min(71svh, 43rem); }
    .intro__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
    .philosophy__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  }
  @media (max-width: 899px) {
    .hero { padding-block-start: 1.5rem; }
    .hero__stage { min-height: min(132vw, 38rem); }
    .hero__title { max-width: 8ch; }
    .program__item { min-height: 13rem; }
  }
  @media (max-width: 520px) {
    .hero__facts { grid-template-columns: 1fr; }
    .hero__stage { padding-inline: 1.5rem; }
  }
}

/* ========================================================================
   Aşama 2 — Kadromuz ve Sıkça Sorulan Sorular
   Alt sayfalar ana sayfanın kart ritmini TEKRARLAMAZ: uzun biyografi ve
   uzun yanıt metni kart içinde okunmaz. Bu iki bölüm hairline satır
   düzenindedir; başlık sütunu masaüstünde metne eşlik eder.
   ======================================================================== */
@layer sections {

  /* CTA bandi .on-dark sinifini tasir ama zemini PEMBE.
     .on-dark hover kurali linki bar altinina (#C9A24B) cevirirdi: pembe uzerinde
     ~1.5:1, okunmaz. Bandin kendi metin rengiyle ezilir. */
  .cta-band .link-underline { border-block-end-color: rgb(59 33 48 / 45%); }
  @media (hover: hover) and (pointer: fine) {
    .cta-band .link-underline:hover {
      border-block-end-color: var(--accent);
      color: var(--accent);
    }
  }

  /* --- Alt sayfa açılışı ---
     Ana sayfadaki hero burada tekrarlanmaz; sayfa doğrudan içerikle açılır. */
  .page-head {
    padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem);
  }
  .page-head__title { max-width: 18ch; }
  .page-head .lead { color: var(--ink-2); }

  /* --- Kadro ---------------------------------------------------------- */
  /* 07.09.2026: kurumdan siyah-beyaz stüdyo portreleri geldi. Portre, isimle
     AYNI sütunda ve isminin üstünde durur — üçüncü bir kolon açılmaz, uzun
     biyografinin okuma genişliği değişmez.
     Portresi olmayan kişide .roster__photo hiç basılmaz; boş kutu çizilmez,
     satır yalnızca isimle açılır ve grid boşluğu kendiliğinden kapanır. */
  .roster__rule {
    border-block-start-color: var(--pointe);
    margin-block-end: var(--space-lg);
  }
  .roster__group {
    max-width: 22ch;
    font-size: var(--fs-h3);
    margin-block-end: var(--space-md);
  }

  .roster__list { border-block-start: 1px solid var(--line); }

  .roster__item {
    display: grid;
    /* Mobilde isim/soru ile metin alt alta gelir; 8px cok sikisik durur. */
    gap: var(--space-sm);
    padding-block: var(--space-lg);
    border-block-end: 1px solid var(--line);
  }

  .roster__id { display: grid; gap: var(--space-sm); }

  /* Mobilde portre tam genişlik OLMAZ: 15 kişilik listede art arda 15 tane
     ekran boyu 4:5 kutu sayfayı okunmaz uzunluğa çıkarır. */
  .roster__photo { max-width: 10rem; }

  .roster__name {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.75rem);
    font-weight: 600;
    line-height: 1.15;
    text-wrap: balance;
  }

  .roster__bio { color: var(--ink-2); line-height: 1.7; }
  .roster__bio > p + p { margin-block-start: var(--space-sm); }

  @media (min-width: 900px) {
    .roster__item {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      gap: var(--space-xl);
      align-items: start;
      padding-block: var(--space-xl);
    }
    /* Portre sütunu DOLDURMAZ. Kadroda tek cümlelik özgeçmişler de var
       (Destek Hizmetleri); sütun genişliğinde bir 4:5 portre o satırlarda
       metinden iki kat uzun olur ve satır fotoğrafa dönüşür. 18rem her iki
       uçta da dengede kalıyor. */
    .roster__photo { max-width: 18rem; }

    /* Portre + isim uzun biyografi boyunca görünür kalır: 900 karakterlik
       ikinci paragrafta kimden bahsedildiği ekran dışında kalmasın.
       align-self: start ZORUNLU — gerilmiş grid öğesi sticky olamaz. */
    .roster__id {
      position: sticky;
      inset-block-start: calc(var(--header-h) + var(--space-md));
      align-self: start;
    }
  }

  /* --- Sıkça sorulan sorular ------------------------------------------ */
  /* Liste, program bölümündeki gibi pembe bir çizgiyle açılır. */
  .faq__list { border-block-start: 1px solid var(--pointe); }

  .faq__item {
    display: grid;
    /* Mobilde isim/soru ile metin alt alta gelir; 8px cok sikisik durur. */
    gap: var(--space-sm);
    padding-block: var(--space-lg);
    border-block-end: 1px solid var(--line);
  }

  .faq__q {
    max-width: 28ch;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.6rem);
    font-weight: 600;
    line-height: 1.2;
    text-wrap: balance;
  }

  .faq__a { color: var(--ink-2); line-height: 1.7; }
  .faq__a > p + p { margin-block-start: var(--space-sm); }

  @media (min-width: 900px) {
    .faq__item {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: var(--space-xl);
      align-items: start;
      padding-block: var(--space-xl);
    }
  }
}

/* ========================================================================
   Aşama 2 — Hakkında (tarihçe + yıl sonu resitalleri)
   Kadro ve SSS ile aynı hairline ritmi. Uzun anlatı kart içine sokulmaz;
   resital listesi ise kısa satırlar olduğu için iki sütuna açılır.
   ======================================================================== */
@layer sections {

  /* --- Tarihçe -------------------------------------------------------- */
  .story__rule {
    border-block-start-color: var(--pointe);
    margin-block-end: var(--space-lg);
  }

  .story__grid { display: grid; gap: var(--space-lg); }

  .story__body { color: var(--ink-2); line-height: 1.7; }
  .story__body > p + p { margin-block-start: var(--space-md); }

  /* Ana sayfadaki .intro__facts burada da kullanılır; tek fark üst boşluk:
     bu sayfada şeridin üstünde hero değil, beş paragraflık metin var. */
  .story__grid + .intro__facts { margin-block-start: clamp(2.5rem, 6vw, 4.5rem); }

  @media (min-width: 900px) {
    .story__grid {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      gap: var(--space-xl);
      align-items: start;
    }
    /* Başlık metin boyunca görünür kalır (kadro sayfasındaki isim gibi).
       align-self: start ZORUNLU — gerilmiş grid öğesi sticky olamaz. */
    .story__head {
      position: sticky;
      inset-block-start: calc(var(--header-h) + var(--space-md));
      align-self: start;
    }
  }

  /* --- Yıl sonu resitalleri ------------------------------------------- */
  .recitals__rule {
    border-block-start-color: var(--pointe);
    margin-block-end: var(--space-lg);
  }
  .recitals__head { max-width: 48ch; margin-block-end: var(--space-lg); }
  .recitals__head .lead { color: var(--ink-2); }

  .recitals__list {
    display: grid;
    border-block-start: 1px solid var(--line);
  }

  .recitals__item {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: var(--space-sm);
    align-items: baseline;
    padding-block: var(--space-sm);
    border-block-end: 1px solid var(--line);
  }

  .recitals__year {
    color: var(--pointe-text);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-style: italic;
    /* Yıllar alt alta hizalı okunsun: orantılı rakam sütunu kaydırır. */
    font-variant-numeric: tabular-nums;
  }

  .recitals__name {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1rem + 0.35vw, 1.35rem);
    font-weight: 500;
    line-height: 1.3;
    text-wrap: balance;
  }

  @media (min-width: 700px) {
    .recitals__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: clamp(2rem, 5vw, 4.5rem);
    }
    /* İki sütunda üst çizgi bir kez değil, her sütunun başında görünmeli;
       ilk satırın üstündeki çizgi listenin kendi border'ıdır, ikinci
       sütunun ilk öğesi de aynı hizada başlar — ek kural gerekmez. */
    .recitals__item { padding-block: var(--space-md); }
  }
}

/* ========================================================================
   Aşama 2 — Eğitim programı (MEB Onaylı Sertifika + RAD Syllabus)
   Kadro/SSS/Hakkında ile aynı hairline ritmi. Yeni bir kart dili açılmaz:
   basamak numarası ana sayfadaki .program__list'ten, rakam şeridi
   .intro__facts'ten, anlatı bloğu .story'den gelir.
   ======================================================================== */
@layer sections {

  /* --- Müfredat basamakları ------------------------------------------- */
  .curriculum__rule {
    border-block-start-color: var(--pointe);
    margin-block-end: var(--space-lg);
  }

  .curriculum__head { max-width: 62ch; margin-block-end: var(--space-lg); }
  .curriculum__head .lead { color: var(--ink-2); }
  .curriculum__intro {
    max-width: var(--measure);
    margin-block-start: var(--space-md);
    color: var(--ink-2);
    line-height: 1.7;
  }
  .curriculum__facts { margin-block-end: var(--space-xl); }

  .curriculum__list { border-block-start: 1px solid var(--line); }

  .curriculum__item {
    display: grid;
    gap: var(--space-sm);
    padding-block: var(--space-lg);
    border-block-end: 1px solid var(--line);
  }

  /* Numara resital yıllarıyla aynı dil: italik serif, pembe, tabular. */
  .curriculum__number {
    display: block;
    color: var(--pointe-text);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-style: italic;
    font-variant-numeric: tabular-nums;
  }

  .curriculum__name {
    margin-block-start: var(--space-2xs);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.75rem);
    font-weight: 600;
    line-height: 1.15;
    text-wrap: balance;
  }

  .curriculum__meta {
    margin-block-start: var(--space-xs);
    color: var(--ink-2);
    font-size: var(--fs-caption);
    line-height: 1.45;
  }

  .curriculum__body { color: var(--ink-2); line-height: 1.7; }
  .curriculum__body > p + p { margin-block-start: var(--space-sm); }

  /* Seviye adları: veli "kaç basamak var" sorusunun yanıtını metni okumadan
     görebilmeli. Etiketler tıklanabilir DEĞİL — link gibi görünmezler. */
  .curriculum__steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-xs);
    margin-block-start: var(--space-md);
  }
  .curriculum__steps li {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.3rem 0.6rem;
    color: var(--ink-2);
    font-size: var(--fs-caption);
    line-height: 1.3;
  }

  /* 5580 sayılı kanun notu dipnot değildir: programın somut çıktısıdır,
     bu yüzden küçültülmez, pembe bir kenarla işaretlenir. */
  .curriculum__note {
    max-width: var(--measure);
    margin-block-start: var(--space-lg);
    border-inline-start: 2px solid var(--pointe);
    padding-inline-start: var(--space-md);
    color: var(--ink-2);
    line-height: 1.7;
  }

  @media (min-width: 900px) {
    .curriculum__item {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      gap: var(--space-xl);
      align-items: start;
      padding-block: var(--space-xl);
    }
    /* Uzun seviye metni boyunca hangi basamakta olunduğu ekranda kalır.
       align-self: start ZORUNLU — gerilmiş grid öğesi sticky olamaz. */
    .curriculum__aside {
      position: sticky;
      inset-block-start: calc(var(--header-h) + var(--space-md));
      align-self: start;
    }
    .curriculum__note { margin-block-start: var(--space-xl); }
  }

  /* --- RAD kayıt sertifikası ------------------------------------------- */
  .certificate__rule {
    border-block-start-color: var(--pointe);
    margin-block-end: var(--space-lg);
  }

  .certificate__grid { display: grid; gap: var(--space-xl); }

  .certificate__lead {
    max-width: var(--measure-lead);
    margin-block-start: var(--space-md);
    color: var(--ink-2);
    line-height: 1.7;
  }

  .certificate__meta { margin-block-start: var(--space-lg); border-block-start: 1px solid var(--line); }
  .certificate__meta > div {
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    gap: var(--space-sm);
    align-items: baseline;
    padding-block: var(--space-sm);
    border-block-end: 1px solid var(--line);
  }
  .certificate__meta dt { color: var(--ink-2); font-size: var(--fs-caption); }
  .certificate__meta dd {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    line-height: 1.35;
  }

  .certificate__file { display: inline-block; margin-block-start: var(--space-lg); }

  /* Belge bir fotoğraf değil: kırpılmaz, kâğıt beyazı korunur ve masaya
     bırakılmış bir sayfa gibi hafif bir gölgeyle krem zeminden ayrılır. */
  .certificate__figure .media {
    background: #FFFFFF;
    border: 1px solid var(--line);
    box-shadow: 0 12px 32px rgb(59 33 48 / 10%);
  }

  @media (min-width: 900px) {
    .certificate__grid {
      grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
      gap: clamp(2rem, 5vw, 4.5rem);
      align-items: start;
    }
    .certificate__text {
      position: sticky;
      inset-block-start: calc(var(--header-h) + var(--space-md));
      align-self: start;
    }
  }

  /* --- RAD sınav skalası ------------------------------------------------ */
  .grades__rule {
    border-block-start-color: var(--pointe);
    margin-block-end: var(--space-lg);
  }
  .grades__head { max-width: 52ch; margin-block-end: var(--space-lg); }
  .grades__head .lead { color: var(--ink-2); }

  /* Tablo dar ekranda kendi içinde kayar; sayfa gövdesi yatay kaymaz.
     tabindex="0" ZORUNLU: kaydırılabilir bölge klavyeyle de gezilebilmeli. */
  .grades__scroll { overflow-x: auto; }
  .grades__scroll:focus-visible {
    outline: 2px solid var(--line-strong);
    outline-offset: 2px;
  }

  .grades__table { width: 100%; min-width: 32rem; }
  .grades__table th,
  .grades__table td {
    text-align: start;
    padding-block: var(--space-sm);
    padding-inline-end: var(--space-md);
    border-block-end: 1px solid var(--line);
  }
  .grades__table thead th {
    border-block-end: 1px solid var(--pointe);
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
  }

  .grades__score {
    font-family: var(--font-display);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .grades__result {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1rem + 0.35vw, 1.35rem);
    line-height: 1.3;
  }
  .grades__medal { color: var(--ink-2); white-space: nowrap; }

  /* Renk YALNIZCA dekoratif. Madalya adı metinde yazdığı için renk körlüğünde
     de okunur; nokta tek başına hiçbir bilgi taşımaz. */
  .grades__dot {
    display: inline-block;
    inline-size: 0.625rem;
    block-size: 0.625rem;
    border-radius: 50%;
    margin-inline-end: 0.5rem;
  }
  .grades__dot--gold   { background: var(--gold); }
  .grades__dot--silver { background: #A8ADB4; }
  .grades__dot--bronze { background: #A9713F; }
  .grades__none { color: var(--line-strong); }

  .grades__note {
    max-width: var(--measure);
    margin-block-start: var(--space-lg);
    color: var(--ink-2);
    font-size: var(--fs-caption);
    line-height: 1.6;
  }
}

@layer components {
  /* Belge/sertifika taraması: en-boy oranı içerikten gelir.
     Fotoğraflarda KULLANILMAZ — orada sabit oran CLS'i ve sayfa ritmini korur. */
  .media--auto { aspect-ratio: auto; }
  .media--auto > img { height: auto; object-fit: contain; }
}