/* ==========================================================================
   VERA COFFEE — Tasarım sistemi
   Tek dosya, @layer ile sıralı. Derleme adımı yoktur.

   Katman sırası özellik çakışmalarını çözer: sonraki katman her zaman kazanır,
   böylece seçici özgüllüğüyle savaşmak gerekmez.
   ========================================================================== */

@layer reset, tokens, base, layout, components, sections, utilities;


/* ==========================================================================
   FONTLAR
   ========================================================================== */
@font-face {
  font-family: 'Inter var';
  src: url('../fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 350 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces var';
  src: url('../fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}


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

  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }

  body {
    min-height: 100svh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

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

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

  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  h1, h2, h3, h4 { text-wrap: balance; }
  p { text-wrap: pretty; }

  ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }

  a { color: inherit; text-decoration: none; }

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

  :target { scroll-margin-top: 6rem; }

  ::selection { background: var(--wine); color: var(--porcelain); }
}


/* ==========================================================================
   @layer tokens — tek doğruluk kaynağı
   Palet doğrudan mekânın render'larından örneklendi.
   ========================================================================== */
@layer tokens {
  :root {
    /* --- Nötr: travertin & meşe --------------------------------------- */
    --porcelain : #FBF8F3;
    --cream     : #F3ECE1;
    --sand      : #E4D7C4;
    --oak       : #C6A67C;

    /* --- Karakter ------------------------------------------------------ */
    --wine      : #6E2230;
    --wine-deep : #4A1620;
    --clay      : #B4674F;

    /* --- Mürekkep ------------------------------------------------------ */
    --ink       : #191411;
    --ink-soft  : #241D19;
    --graphite  : #4A423C;
    --muted     : #8A7F76;

    /* --- Kids Club (yalnızca ilgili bölümde) ---------------------------- */
    --kids-mist : #C7DAD9;
    --kids-iris : #6A5E9E;
    --kids-blush: #E8A899;

    /* --- Anlamsal ------------------------------------------------------- */
    --bg        : var(--porcelain);
    --fg        : var(--graphite);
    --heading   : var(--ink);
    --accent    : var(--wine);
    --line      : color-mix(in srgb, var(--sand) 70%, transparent);
    --line-soft : color-mix(in srgb, var(--sand) 40%, transparent);

    /* --- Tipografi ------------------------------------------------------ */
    --font-display: 'Fraunces var', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --font-body   : 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
    --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.94rem);
    --step-0 : clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem);
    --step-1 : clamp(1.20rem, 1.12rem + 0.42vw, 1.44rem);
    --step-2 : clamp(1.44rem, 1.28rem + 0.80vw, 1.92rem);
    --step-3 : clamp(1.73rem, 1.45rem + 1.40vw, 2.56rem);
    --step-4 : clamp(2.07rem, 1.60rem + 2.35vw, 3.41rem);
    --step-5 : clamp(2.49rem, 1.70rem + 3.95vw, 4.55rem);
    --step-6 : clamp(2.99rem, 1.65rem + 6.70vw, 6.06rem);

    /* --- Boşluk (8px tabanlı) ------------------------------------------- */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
    --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
    --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;
    --sp-10: 8rem;

    --section-y : clamp(3.5rem, 6.5vw, 6.5rem);
    --gutter    : clamp(1.25rem, 4vw, 3rem);
    --measure   : 62ch;
    --shell     : 1440px;
    --shell-narrow: 980px;

    /* --- Hareket -------------------------------------------------------- */
    --ease-out  : cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-fast  : 220ms;
    --dur       : 480ms;
    --dur-slow  : 820ms;

    /* --- Yüzey ---------------------------------------------------------- */
    --radius-sm : 4px;
    --radius    : 10px;
    --radius-lg : 20px;
    --radius-pill: 999px;
    --shadow-sm : 0 1px 2px rgb(25 20 17 / .04), 0 2px 8px rgb(25 20 17 / .04);
    --shadow    : 0 2px 6px rgb(25 20 17 / .05), 0 12px 32px -8px rgb(25 20 17 / .10);
    --shadow-lg : 0 4px 12px rgb(25 20 17 / .06), 0 32px 64px -16px rgb(25 20 17 / .18);

    --header-h  : 76px;
  }

  @media (max-width: 720px) {
    :root { --header-h: 64px; }
  }

  /* Koyu bölümler için tema tersine çevirme.
     Bir bölüme .is-dark verildiğinde tüm alt elemanlar otomatik uyum sağlar. */
  .is-dark {
    --bg      : var(--ink);
    --fg      : color-mix(in srgb, var(--porcelain) 76%, transparent);
    --heading : var(--porcelain);
    --muted   : color-mix(in srgb, var(--porcelain) 52%, transparent);
    --line    : color-mix(in srgb, var(--porcelain) 14%, transparent);
    --line-soft: color-mix(in srgb, var(--porcelain) 8%, transparent);
    --accent  : var(--oak);
    color: var(--fg);
    background: var(--bg);
  }

  .is-wine {
    --bg      : var(--wine);
    --fg      : color-mix(in srgb, var(--porcelain) 82%, transparent);
    --heading : var(--porcelain);
    --muted   : color-mix(in srgb, var(--porcelain) 60%, transparent);
    --line    : color-mix(in srgb, var(--porcelain) 18%, transparent);
    --accent  : var(--sand);
    color: var(--fg);
    background: var(--bg);
  }

  .is-cream { background: var(--cream); }
}


/* ==========================================================================
   @layer base
   ========================================================================== */
@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 400;
    color: var(--fg);
    background: var(--bg);
    font-variant-numeric: lining-nums tabular-nums;
    overflow-x: clip;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--heading);
  }
  h1 { font-size: var(--step-5); }
  h2 { font-size: var(--step-4); }
  h3 { font-size: var(--step-2); line-height: 1.2; }
  h4 { font-size: var(--step-1); line-height: 1.3; }

  a:not([class]) {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    transition: text-decoration-color var(--dur-fast) var(--ease-out);
  }
  a:not([class]):hover { text-decoration-color: currentColor; }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
  }

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

  strong, b { font-weight: 600; }

  small { font-size: var(--step--1); }

  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--cream); }
  ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--oak) 60%, transparent);
    border-radius: var(--radius-pill);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--oak); }
}


/* ==========================================================================
   @layer layout
   ========================================================================== */
@layer layout {
  .shell {
    width: min(100% - var(--gutter) * 2, var(--shell));
    margin-inline: auto;
  }
  .shell--narrow { width: min(100% - var(--gutter) * 2, var(--shell-narrow)); }
  .shell--wide   { width: min(100% - var(--gutter) * 2, 1680px); }

  .section {
    padding-block: var(--section-y);
    position: relative;
  }
  .section--tight { padding-block: calc(var(--section-y) * .6); }
  .section--flush-top { padding-top: 0; }

  /* 12 kolonlu editoryal grid */
  .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
  }
  @media (max-width: 900px) {
    .grid { grid-template-columns: repeat(6, 1fr); }
  }
  @media (max-width: 560px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
  }

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

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--sp-3));
    align-items: center;
  }

  .prose {
    max-width: var(--measure);
    font-size: var(--step-0);
    line-height: 1.72;
  }
  .prose > * + * { margin-top: 1.1em; }
  .prose h3 { margin-top: 1.8em; }
  .prose ul, .prose ol { padding-left: 1.35em; }
  .prose li + li { margin-top: .45em; }
  .prose li::marker { color: var(--accent); }
  .prose blockquote {
    border-left: 2px solid var(--accent);
    padding-left: var(--sp-5);
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.4;
    color: var(--heading);
  }

  /* Ekran okuyucu için görünmez, klavye için erişilebilir */
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .skip-link {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    z-index: 200;
    padding: var(--sp-3) var(--sp-5);
    background: var(--ink);
    color: var(--porcelain);
    border-radius: var(--radius);
    transform: translateY(-200%);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .skip-link:focus { transform: translateY(0); }
}


/* ==========================================================================
   @layer components
   ========================================================================== */
@layer components {

  /* --- Eyebrow (bölüm üstü küçük etiket) ------------------------------- */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .eyebrow::before {
    content: '';
    width: 1.75rem;
    height: 1px;
    background: currentColor;
    opacity: .55;
  }
  .eyebrow--plain::before { display: none; }

  /* --- Bölüm başlığı (editoryal iki sütun) ------------------------------- */
  .sec-head { display: grid; gap: var(--sp-5) clamp(2rem, 5vw, 4.5rem); }
  .sec-head--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
  }
  @media (max-width: 860px) {
    .sec-head--split { grid-template-columns: 1fr; align-items: start; }
  }

  .sec-head__title {
    margin-top: var(--sp-4);
    font-size: var(--step-3);
    max-width: 18ch;
  }
  .sec-head--split .sec-head__title { max-width: 16ch; }

  .sec-head__lead {
    color: var(--fg);
    font-size: var(--step-0);
    line-height: 1.72;
    max-width: 48ch;
  }
  .sec-head__lead > * + * { margin-top: .9em; }

  /* Eski API ile yazılmış şablonlar bozulmasın */
  .heading { max-width: 22ch; }
  .heading--wide { max-width: none; }
  .heading__lead {
    max-width: 54ch;
    margin-top: var(--sp-5);
    color: var(--fg);
    font-size: var(--step-0);
    line-height: 1.7;
  }
  .heading__lead > * + * { margin-top: .9em; }

  /* --- Butonlar --------------------------------------------------------- */
  .btn {
    --btn-bg: var(--ink);
    --btn-fg: var(--porcelain);
    --btn-bd: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: 0.95em 1.7em;
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 1px solid var(--btn-bd);
    border-radius: var(--radius-pill);
    cursor: pointer;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }
  /* Dolgu, hover'da alttan yukarı büyür — "ağır" premium his */
  .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--btn-hover, var(--wine));
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--dur) var(--ease-out);
  }
  .btn:hover::after,
  .btn:focus-visible::after { transform: scaleY(1); }
  .btn:hover { border-color: var(--btn-hover, var(--wine)); }
  .btn:active { transform: translateY(1px); }

  .btn--primary { --btn-bg: var(--wine); --btn-bd: var(--wine); --btn-hover: var(--wine-deep); }
  .btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--heading);
    --btn-bd: color-mix(in srgb, currentColor 30%, transparent);
    --btn-hover: var(--ink);
  }
  .btn--ghost:hover { color: var(--porcelain); }
  .is-dark .btn--ghost, .is-wine .btn--ghost { --btn-hover: var(--porcelain); }
  .is-dark .btn--ghost:hover, .is-wine .btn--ghost:hover { color: var(--ink); }

  .btn--light { --btn-bg: var(--porcelain); --btn-fg: var(--ink); --btn-bd: var(--porcelain); --btn-hover: var(--sand); }
  .btn--light:hover { color: var(--ink); }

  .btn--sm { padding: 0.7em 1.25em; font-size: var(--step--2); }
  .btn--lg { padding: 1.1em 2.1em; font-size: var(--step-0); }
  .btn--block { display: flex; width: 100%; }

  .btn svg { width: 1em; height: 1em; flex: none; }

  /* --- Metin bağlantısı (ok animasyonlu) -------------------------------- */
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--heading);
    padding-bottom: 2px;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--dur) var(--ease-out);
  }
  .link-arrow svg {
    width: .85em; height: .85em;
    transition: transform var(--dur) var(--ease-out);
  }
  .link-arrow:hover { background-size: 0% 1px; }
  .link-arrow:hover svg { transform: translateX(4px); }
  /* WCAG 2.5.8 dokunma hedefi */
  .link-arrow { min-height: 26px; }

  /* --- Rozet ------------------------------------------------------------ */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .35em .75em;
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--oak) 18%, transparent);
    color: color-mix(in srgb, var(--ink) 78%, var(--oak));
    white-space: nowrap;
  }
  .badge--wine { background: color-mix(in srgb, var(--wine) 12%, transparent); color: var(--wine); }
  .badge--green{ background: #E3EDE3; color: #2F5A38; }
  .badge--new  { background: var(--wine); color: var(--porcelain); }
  .badge--soft { background: transparent; border: 1px solid var(--line); color: var(--muted); }

  /* --- Görsel çerçevesi ------------------------------------------------- */
  .v-figure {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--sand);
  }
  .v-figure picture,
  .v-figure > img { display: block; }
  .v-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio, auto);
  }
  .v-figure__caption {
    margin-top: var(--sp-3);
    font-size: var(--step--1);
    color: var(--muted);
  }
  .v-figure--ratio img { aspect-ratio: var(--ratio, 4 / 3); }

  .v-img { background: var(--sand); }

  /* Yumuşak yakınlaşma — kart hover'ında */
  .zoom-host { overflow: hidden; border-radius: var(--radius); }
  .zoom-host img {
    transition: transform 900ms var(--ease-out), filter 900ms var(--ease-out);
    will-change: transform;
  }
  .zoom-host:hover img { transform: scale(1.045); }

  /* --- Kart ------------------------------------------------------------- */
  .card {
    display: flex;
    flex-direction: column;
    background: var(--porcelain);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out);
  }
  .card:hover {
    border-color: color-mix(in srgb, var(--oak) 55%, transparent);
    box-shadow: var(--shadow);
    transform: translateY(-3px);
  }
  .card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
  .is-dark .card { background: color-mix(in srgb, var(--porcelain) 5%, transparent); }

  /* --- Form ------------------------------------------------------------- */
  .field { display: flex; flex-direction: column; gap: var(--sp-2); }
  .field__label {
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--heading);
  }
  .field__label .req { color: var(--wine); }
  .field__hint { font-size: var(--step--2); color: var(--muted); }
  .field__error {
    font-size: var(--step--2);
    color: #A32B2B;
    display: flex;
    align-items: center;
    gap: .35em;
  }

  .input, .textarea, .select {
    width: 100%;
    padding: 0.85em 1em;
    font-size: var(--step-0);
    color: var(--heading);
    background: var(--porcelain);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
    appearance: none;
  }
  .textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
  .select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238A7F76' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1em center;
    background-size: 12px;
    padding-right: 2.75em;
    cursor: pointer;
  }
  .input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
  .input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  }
  .input[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: #A32B2B; }

  .check {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--step--1);
    line-height: 1.5;
    cursor: pointer;
  }
  .check input {
    flex: none;
    width: 1.15em; height: 1.15em;
    margin-top: .18em;
    accent-color: var(--wine);
    cursor: pointer;
  }

  /* Bal küpü — botlar doldurur, insanlar görmez */
  .hp {
    position: absolute !important;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
  }

  /* --- Bildirim --------------------------------------------------------- */
  .notice {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius);
    font-size: var(--step--1);
    line-height: 1.6;
    border: 1px solid;
  }
  .notice--success { background: #EAF3EC; border-color: #BFD9C6; color: #23502F; }
  .notice--error   { background: #FBEBEB; border-color: #E4C0C0; color: #8C2A2A; }
  .notice--info    { background: var(--cream); border-color: var(--sand); color: var(--graphite); }

  /* --- Akordiyon (S.S.S.) ----------------------------------------------- */
  .accordion { border-top: 1px solid var(--line); }
  .accordion__item { border-bottom: 1px solid var(--line); }
  .accordion__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    padding: var(--sp-5) 0;
    font-size: var(--step-1);
    font-family: var(--font-display);
    color: var(--heading);
    cursor: pointer;
    list-style: none;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .accordion__item summary::-webkit-details-marker { display: none; }
  .accordion__item summary:hover { color: var(--accent); }
  .accordion__icon {
    flex: none;
    width: 1.4rem; height: 1.4rem;
    position: relative;
  }
  .accordion__icon::before,
  .accordion__icon::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1px;
    background: currentColor;
    transition: transform var(--dur) var(--ease-out);
  }
  .accordion__icon::after { transform: rotate(90deg); }
  .accordion__item[open] .accordion__icon::after { transform: rotate(0deg); }
  .accordion__body {
    padding-bottom: var(--sp-6);
    max-width: 62ch;
    color: var(--fg);
  }
  .accordion__body > * + * { margin-top: .9em; }

  /* --- Yatay kaydırma rayı ---------------------------------------------- */
  .rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 340px);
    gap: var(--sp-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    padding-block: var(--sp-2) var(--sp-6);
    margin-inline: calc(var(--gutter) * -1);
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
  }
  .rail > * { scroll-snap-align: start; }
  @media (min-width: 900px) {
    .rail { grid-auto-columns: 360px; }
  }

  /* --- Ayraç sayı/etiket ------------------------------------------------ */
  .stat__num {
    font-family: var(--font-display);
    font-size: var(--step-4);
    line-height: 1;
    color: var(--heading);
  }
  .stat__label { font-size: var(--step--1); color: var(--muted); }
}


/* ==========================================================================
   @layer utilities — en son katman, her zaman kazanır
   ========================================================================== */
@layer utilities {
  .text-center { text-align: center; }
  .mx-auto { margin-inline: auto; }
  /* 100vw kaydırma çubuğunu saymaz ve yatay taşma yaratır.
     Bölümler zaten tam genişlik olduğu için tam-taşma yalnızca
     .shell İÇİNDE gerekir; orada da güvenli olması için % tabanlı. */
  .full-bleed {
    width: calc(100% + var(--gutter) * 2);
    margin-inline: calc(var(--gutter) * -1);
  }
  .no-scroll { overflow: hidden; }
  .relative { position: relative; }

  .muted { color: var(--muted); }
  .display { font-family: var(--font-display); }
  .balance { text-wrap: balance; }

  .hide-mobile { }
  @media (max-width: 720px) { .hide-mobile { display: none !important; } }
  .hide-desktop { }
  @media (min-width: 721px) { .hide-desktop { display: none !important; } }

  .ratio-1 { --ratio: 1 / 1; }
  .ratio-43 { --ratio: 4 / 3; }
  .ratio-34 { --ratio: 3 / 4; }
  .ratio-169 { --ratio: 16 / 9; }
  .ratio-23 { --ratio: 2 / 3; }
  .ratio-32 { --ratio: 3 / 2; }
}