/* ============================================================================
   DGN — Layout primitifleri
   ----------------------------------------------------------------------------
   KURAL: Dış boşluk (margin) layout'un, iç boşluk (padding) bileşenin işidir.
   Bileşenler margin vermez; dikey ritim .flow üzerinden ebeveynden gelir.
   Bu kural iki bileşen yan yana geldiğinde margin çakışmasını imkânsız kılar.
   ========================================================================== */

@layer layout {

  /* --- Kap ---------------------------------------------------------------- */
  .container {
    width: 100%;
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-m);
  }

  @media (min-width: 64em) {
    .container { padding-inline: var(--space-l); }
  }

  .container--wide { max-inline-size: var(--container-wide); }
  .container--text { max-inline-size: var(--container-text); }

  /* --- Bölüm: SADECE dikey boşluk verir ----------------------------------- */
  .section { padding-block: var(--space-2xl); }
  .section--tight { padding-block: var(--space-xl); }
  .section--loose { padding-block: var(--space-3xl); }

  .section--surface { background-color: var(--surface); }
  .section--sunken  { background-color: var(--surface-sunken); }

  /* Ters bant: her iki temada koyu. İçindeki metin token'ları burada
     yeniden bağlanır ki bileşenler koyu bağlamı kendiliğinden izlesin. */
  .section--deep {
    background-color: var(--surface-deep);
    /* Koyu temada bant ile kâğıt neredeyse aynı değerde; kılcal kenar bandın
       nerede başlayıp bittiğini her iki temada da belli eder. */
    border-block: 1px solid rgb(255 255 255 / 0.10);
    color: var(--on-deep);
    --ink: var(--on-deep);
    --ink-2: var(--on-deep-2);
    --ink-3: var(--on-deep-2);
    --rule: rgb(255 255 255 / 0.14);
    --rule-strong: rgb(255 255 255 / 0.28);
    --surface: rgb(255 255 255 / 0.04);
    --surface-2: rgb(255 255 255 / 0.07);
    --paper: var(--surface-deep);
    --brand-deep: #9bd93e;
    --data: #8cbcc4;
  }

  /* Komşu iki bölüm aynı zemine sahipse arada kılcal bir ayrım kalsın */
  .section--surface + .section--surface { border-block-start: 1px solid var(--rule); }

  /* --- Akış: kardeşler arası dikey ritmin TEK kaynağı --------------------- */
  .flow > * + * { margin-block-start: var(--flow-space, var(--space-m)); }
  .flow--tight { --flow-space: var(--space-2xs); }
  .flow--snug  { --flow-space: var(--space-s); }
  .flow--loose { --flow-space: var(--space-l); }
  .flow--xl    { --flow-space: var(--space-xl); }

  /* --- Yatay küme --------------------------------------------------------- */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap, var(--space-s));
  }
  .cluster--between { justify-content: space-between; }
  .cluster--end     { justify-content: flex-end; }
  .cluster--baseline { align-items: baseline; }

  /* --- Otomatik ızgara ---------------------------------------------------- */
  .grid {
    display: grid;
    gap: var(--gap, var(--space-m));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--col, 16rem), 100%), 1fr));
  }

  /* --- İki kolonlu bölünme (metin + görsel) ------------------------------- */
  .split {
    display: grid;
    gap: var(--gap, var(--space-xl));
    align-items: center;
  }
  @media (min-width: 64em) {
    .split { grid-template-columns: 1fr 1fr; --gap: var(--space-2xl); }
    .split--wide-start { grid-template-columns: 7fr 5fr; }
    .split--wide-end   { grid-template-columns: 5fr 7fr; }
    .split--reverse > :first-child { order: 2; }
  }

  /* Form gibi uzun kolonlarda dikey ortalama boşluk bırakır; üstten hizala */
  .split--top { align-items: start; }

  /* --- Ölçü çizgisi ------------------------------------------------------
     Uçlarında kısa dikey işaretler olan yatay kılcal çizgi: teknik çizimin
     ölçü çizgisi. Bölüm ayırıcısı olarak kullanılır.                       */
  .rule {
    position: relative;
    block-size: 1px;
    background-color: var(--rule);
  }
  .rule::before,
  .rule::after {
    content: "";
    position: absolute;
    inset-block-start: -3px;
    inline-size: 1px;
    block-size: 7px;
    background-color: var(--rule-strong);
  }
  .rule::before { inset-inline-start: 0; }
  .rule::after  { inset-inline-end: 0; }

  /* --- Yardımcı hizalama -------------------------------------------------- */
  .center-text { text-align: center; }
  .measure { max-inline-size: var(--container-text); }
  .measure--wide { max-inline-size: 52rem; }
  .measure--center { margin-inline: auto; }
}