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

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; }
  img, svg, canvas { display: block; max-inline-size: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  ul, ol { list-style: none; }
  table { border-collapse: collapse; }
  :where(a) { color: inherit; }
}

@layer base {
  :root {
    color-scheme: light dark;

    --color-bg: #f6f7f9;
    --color-bg-alt: #ffffff;
    --color-bg-sunken: #eceff3;
    --color-surface: #ffffff;
    --color-surface-2: #f2f4f7;
    --color-border: #d8dee7;
    --color-border-strong: #b6c0cd;
    --color-text: #16202c;
    --color-text-soft: #55606f;
    --color-text-faint: #7d8798;

    --color-primary: #0e7490;
    --color-primary-strong: #0b5b71;
    --color-primary-soft: #e0f5fb;
    --color-accent: #f59e0b;
    --color-accent-soft: #fef3c7;
    --color-ok: #15803d;
    --color-ok-soft: #dcfce7;
    --color-warn: #b45309;
    --color-warn-soft: #fef3c7;
    --color-err: #b91c1c;
    --color-err-soft: #fee2e2;

    --color-hero-1: #0b2233;
    --color-hero-2: #103c52;

    --sheet-bg: #ffffff;
    --sheet-line: #cbd5e1;
    --cut-line: #0f172a;
    --bend-line: #dc2626;
    --remnant-line: #ca8a04;

    --space-3xs: .25rem;
    --space-2xs: .5rem;
    --space-xs: .75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.25rem;
    --space-xl: 3.5rem;
    --space-2xl: 5rem;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --font-base: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace;

    --shadow-sm: 0 1px 2px rgb(15 23 42 / .06), 0 1px 3px rgb(15 23 42 / .08);
    --shadow-md: 0 4px 12px rgb(15 23 42 / .08), 0 2px 4px rgb(15 23 42 / .06);
    --shadow-lg: 0 18px 40px rgb(15 23 42 / .14);

    --wrap: 78rem;
    --wrap-narrow: 56rem;
  }

  :root[data-tema="koyu"],
  :root:not([data-tema="acik"]) {
    color-scheme: light;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) {
      color-scheme: dark;
      --color-bg: #0d1219;
      --color-bg-alt: #121924;
      --color-bg-sunken: #090d13;
      --color-surface: #151d29;
      --color-surface-2: #1b2533;
      --color-border: #2a3648;
      --color-border-strong: #3d4c63;
      --color-text: #e6ecf3;
      --color-text-soft: #a3b0c2;
      --color-text-faint: #7b8899;
      --color-primary: #22b8d8;
      --color-primary-strong: #6fd9ef;
      --color-primary-soft: #10323d;
      --color-accent: #fbbf24;
      --color-accent-soft: #3a2d0c;
      --color-ok: #4ade80;
      --color-ok-soft: #0f2d1c;
      --color-warn: #fbbf24;
      --color-warn-soft: #33260a;
      --color-err: #f87171;
      --color-err-soft: #3b1414;
      --sheet-bg: #0f1620;
      --sheet-line: #33445c;
      --cut-line: #d8e4f2;
      --bend-line: #f87171;
      --remnant-line: #fbbf24;
      --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
      --shadow-md: 0 4px 14px rgb(0 0 0 / .45);
      --shadow-lg: 0 20px 50px rgb(0 0 0 / .6);
    }
  }

  :root[data-tema="koyu"] {
    color-scheme: dark;
    --color-bg: #0d1219;
    --color-bg-alt: #121924;
    --color-bg-sunken: #090d13;
    --color-surface: #151d29;
    --color-surface-2: #1b2533;
    --color-border: #2a3648;
    --color-border-strong: #3d4c63;
    --color-text: #e6ecf3;
    --color-text-soft: #a3b0c2;
    --color-text-faint: #7b8899;
    --color-primary: #22b8d8;
    --color-primary-strong: #6fd9ef;
    --color-primary-soft: #10323d;
    --color-accent: #fbbf24;
    --color-accent-soft: #3a2d0c;
    --color-ok: #4ade80;
    --color-ok-soft: #0f2d1c;
    --color-warn: #fbbf24;
    --color-warn-soft: #33260a;
    --color-err: #f87171;
    --color-err-soft: #3b1414;
    --sheet-bg: #0f1620;
    --sheet-line: #33445c;
    --cut-line: #d8e4f2;
    --bend-line: #f87171;
    --remnant-line: #fbbf24;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
    --shadow-md: 0 4px 14px rgb(0 0 0 / .45);
    --shadow-lg: 0 20px 50px rgb(0 0 0 / .6);
  }

  body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 1rem;
    line-height: 1.6;
    min-block-size: 100svh;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 { line-height: 1.2; font-weight: 650; letter-spacing: -.015em; text-wrap: balance; }
  h1 { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3.1rem); }
  h2 { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); }
  h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); }
  p { text-wrap: pretty; }
  a { color: var(--color-primary); text-underline-offset: .18em; }
  a:hover { color: var(--color-primary-strong); }
  code, .sayi { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; scroll-behavior: auto; }
  }
}

@layer layout {
  .sarmal { inline-size: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
  .sarmal--dar { inline-size: min(100% - 2rem, var(--wrap-narrow)); margin-inline: auto; }
  .bolum { padding-block: var(--space-xl); }
  .bolum--sunken { background-color: var(--color-bg-alt); border-block: 1px solid var(--color-border); }
  .atla-baglantisi {
    position: absolute; inset-inline-start: -9999px; inset-block-start: 0; z-index: 100;
    background-color: var(--color-primary); color: #fff; padding: var(--space-2xs) var(--space-sm);
    border-end-end-radius: var(--radius-md);
  }
  .atla-baglantisi:focus { inset-inline-start: 0; }
}

@layer components {
  /* ── Ust bant ────────────────────────────────────────────────────────── */
  .ust-bant {
    position: sticky; inset-block-start: 0; z-index: 40;
    background-color: color-mix(in srgb, var(--color-bg-alt) 88%, transparent);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--color-border);
  }
  .ust-bant__ic { display: flex; align-items: center; gap: var(--space-sm); padding-block: var(--space-2xs); flex-wrap: wrap; }
  .marka { display: flex; align-items: center; gap: var(--space-2xs); text-decoration: none; color: var(--color-text); }
  .marka__logo { inline-size: clamp(2.1rem, 1.7rem + 1.4vw, 2.75rem); block-size: auto; }
  .marka__ad { font-size: clamp(1rem, .92rem + .35vw, 1.2rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
  .marka__alt { display: block; font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-faint); }
  .ust-bant__menu { display: flex; gap: var(--space-3xs); margin-inline-start: auto; align-items: center; flex-wrap: wrap; }
  .ust-bant__baglanti {
    padding: var(--space-3xs) var(--space-2xs); border-radius: var(--radius-sm);
    font-size: .92rem; color: var(--color-text-soft); text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
  }
  .ust-bant__baglanti:hover { background-color: var(--color-surface-2); color: var(--color-text); }
  .tema-dugmesi {
    display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-soft);
  }
  .tema-dugmesi:hover { background-color: var(--color-surface-2); color: var(--color-text); }

  /* ── Ana baner ───────────────────────────────────────────────────────── */
  .baner {
    background-image: linear-gradient(135deg, var(--color-hero-1), var(--color-hero-2) 58%, #0a4a63);
    color: #e8f4fa; position: relative; overflow: hidden;
    border-block-end: 1px solid var(--color-border);
  }
  .baner::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(to right, rgb(255 255 255 / .045) 1px, transparent 1px),
      linear-gradient(to bottom, rgb(255 255 255 / .045) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(120% 90% at 78% 0%, #000 20%, transparent 72%);
  }
  .baner__ic { position: relative; z-index: 1; padding-block: clamp(2.5rem, 1.4rem + 5vw, 4.75rem); display: grid; gap: var(--space-md); }
  .baner__etiket {
    justify-self: start; display: inline-flex; align-items: center; gap: var(--space-3xs);
    background-color: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .18);
    border-radius: var(--radius-pill); padding: .18rem .7rem; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  }
  .baner__baslik { color: #fff; max-inline-size: 22ch; }
  .baner__baslik em { font-style: normal; color: #67e8f9; }
  .baner__ozet { max-inline-size: 62ch; color: #c3dcea; font-size: clamp(1rem, .95rem + .35vw, 1.15rem); }
  .baner__eylemler { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
  .baner__olcumler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-md); margin-block-start: var(--space-2xs); }
  .olcum__deger { font-family: var(--font-mono); font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); font-weight: 600; color: #fff; }
  .olcum__ad { font-size: .82rem; color: #9fc4d6; }

  /* ── Baner sahnesi (anlatim animasyonu) ──────────────────────────────── */
  /* Sahne dar ekranda yazinin ALTINA duser; genis ekranda saga gecer. Grid
     yerlesimi @media (min-width: 64rem) icinde kurulur. */
  .baner__yazi { display: grid; gap: var(--space-md); }
  .baner__sahne { display: grid; gap: var(--space-xs); justify-items: stretch; }
  .sahne { inline-size: 100%; block-size: auto; max-block-size: 20rem; overflow: visible; }
  .sahne__sac {
    fill: rgb(8 30 42 / .55); stroke: rgb(103 232 249 / .55); stroke-width: 1.4;
    stroke-dasharray: 7 5;
  }
  .sahne__parca {
    fill: rgb(103 232 249 / .14); stroke: #67e8f9; stroke-width: 1.6;
    transform-box: fill-box; transform-origin: center; opacity: 0;
    animation: parca-yerles 10s cubic-bezier(.22, .68, .3, 1) infinite;
    animation-delay: var(--s);
  }
  /* Yerlesmeyen kose: kullanilabilir artik. Parcalar oturduktan SONRA belirir. */
  .sahne__artik {
    fill: rgb(251 191 36 / .1); stroke: #fbbf24; stroke-width: 1.4; stroke-dasharray: 4 4;
    opacity: 0; animation: artik-belir 10s ease-in-out infinite;
  }
  /* Lazer basi: yalnizca sac dolduktan sonra yukaridan asagi tarar. */
  .sahne__lazer {
    stroke: #fbbf24; stroke-width: 2; stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgb(251 191 36 / .85));
    opacity: 0; animation: lazer-tara 10s ease-in-out infinite;
  }
  .sahne__adimlar {
    display: flex; flex-wrap: wrap; gap: var(--space-3xs); list-style: none;
    margin: 0; padding: 0; font-size: .76rem; letter-spacing: .02em;
  }
  .sahne__adimlar li {
    border: 1px solid rgb(255 255 255 / .16); border-radius: var(--radius-pill);
    padding: .16rem .62rem; color: #9fc4d6; background-color: rgb(255 255 255 / .04);
    animation: adim-yan 10s ease-in-out infinite; animation-delay: var(--s);
  }
  @keyframes parca-yerles {
    0%   { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--da)); }
    9%   { opacity: .95; }
    26%  { opacity: .95; transform: translate(0, 0) rotate(0deg); }
    90%  { opacity: .95; transform: translate(0, 0) rotate(0deg); }
    100% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  }
  @keyframes artik-belir {
    0%, 40% { opacity: 0; }
    52%, 88% { opacity: 1; }
    100% { opacity: 0; }
  }
  @keyframes lazer-tara {
    0%, 52% { opacity: 0; transform: translateY(0); }
    56% { opacity: 1; transform: translateY(0); }
    86% { opacity: 1; transform: translateY(192px); }
    92%, 100% { opacity: 0; transform: translateY(192px); }
  }
  @keyframes adim-yan {
    0%, 18% { color: #06222e; background-color: #67e8f9; border-color: #67e8f9; }
    30%, 100% { color: #9fc4d6; background-color: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .16); }
  }
  /* Hareket azaltma acikken sahne DURUR ve yerlesmis hali gosterilir.
     Genel kural animasyonu .01ms'e indirdigi icin son kare (opacity:0)
     kalirdi - sahne tamamen kaybolurdu. */
  @media (prefers-reduced-motion: reduce) {
    .sahne__parca { animation: none; opacity: .95; }
    .sahne__artik { animation: none; opacity: 1; }
    .sahne__lazer { animation: none; opacity: 0; }
    .sahne__adimlar li { animation: none; }
  }
  /* ── Ust bant rozeti ─────────────────────────────────────────────────── */
  .ust-bant__rozet {
    display: inline-flex; align-items: center; justify-content: center;
    min-inline-size: 1.15rem; margin-inline-start: .38rem; padding: 0 .3rem;
    border-radius: var(--radius-pill); background-color: #22b8d8; color: #04202b;
    font-family: var(--font-mono); font-size: .7rem; font-weight: 600; line-height: 1.5;
  }

  /* ── Dugmeler ────────────────────────────────────────────────────────── */
  .dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3xs);
    padding: .6rem 1.15rem; border-radius: var(--radius-md); font-weight: 600; font-size: .95rem;
    border: 1px solid transparent; text-decoration: none; text-align: center;
    transition: transform .15s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease;
  }
  .dugme:hover { transform: translateY(-1px); }
  .dugme:active { transform: translateY(0); }
  .dugme[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
  .dugme--birincil { background-color: var(--color-primary); color: #fff; }
  .dugme--birincil:hover { background-color: var(--color-primary-strong); color: #fff; }
  .dugme--ikincil { background-color: transparent; border-color: var(--color-border-strong); color: var(--color-text); }
  .dugme--ikincil:hover { background-color: var(--color-surface-2); }
  .dugme--hayalet { color: var(--color-text-soft); padding-inline: .7rem; }
  .dugme--hayalet:hover { background-color: var(--color-surface-2); color: var(--color-text); }
  .dugme--aydinlik { background-color: #fff; color: #0b2233; }
  .dugme--aydinlik:hover { background-color: #dff4fb; color: #0b2233; }
  .dugme--cerceve-aydinlik { border-color: rgb(255 255 255 / .35); color: #e8f4fa; }
  .dugme--cerceve-aydinlik:hover { background-color: rgb(255 255 255 / .1); color: #fff; }
  .dugme--kucuk { padding: .32rem .7rem; font-size: .84rem; border-radius: var(--radius-sm); }

  /* ── Slayt gosterisi ─────────────────────────────────────────────────── */
  .slayt-kutusu { position: relative; }
  .slayt-cerceve {
    position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background-color: var(--color-surface); box-shadow: var(--shadow-md); overflow: hidden;
    aspect-ratio: 16 / 9;
  }
  .slayt {
    position: absolute; inset: 0; opacity: 0; visibility: hidden;
    transition: opacity .7s ease, visibility .7s;
    display: grid; grid-template-rows: 1fr auto;
  }
  .slayt[data-etkin="1"] { opacity: 1; visibility: visible; }
  .slayt__gorsel { inline-size: 100%; block-size: 100%; object-fit: cover; background-color: var(--color-bg-sunken); }
  .slayt__yazi {
    background-image: linear-gradient(to top, rgb(6 16 24 / .93), rgb(6 16 24 / .74) 62%, transparent);
    color: #eaf4f9; padding: var(--space-md) var(--space-sm) var(--space-sm);
    position: absolute; inset-inline: 0; inset-block-end: 0;
  }
  .slayt__adim { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .16em; color: #67e8f9; }
  .slayt__baslik { font-size: clamp(1.05rem, .95rem + .7vw, 1.5rem); color: #fff; margin-block-start: var(--space-3xs); }
  .slayt__ozet { font-size: clamp(.86rem, .82rem + .2vw, .98rem); color: #bcd5e2; max-inline-size: 60ch; }
  .slayt-kumanda { display: flex; align-items: center; gap: var(--space-2xs); margin-block-start: var(--space-2xs); flex-wrap: wrap; }
  .slayt-noktalar { display: flex; gap: var(--space-3xs); }
  .slayt-nokta {
    inline-size: 2.5rem; block-size: .34rem; border-radius: var(--radius-pill);
    background-color: var(--color-border-strong); position: relative; overflow: hidden;
  }
  .slayt-nokta[aria-current="true"] { background-color: var(--color-border); }
  .slayt-nokta__dolgu {
    position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 0;
    background-color: var(--color-primary);
  }
  .slayt-nokta[aria-current="true"] .slayt-nokta__dolgu { animation: slayt-ilerle 7s linear forwards; }
  .slayt-kutusu[data-duraklat="1"] .slayt-nokta__dolgu { animation-play-state: paused; }
  @keyframes slayt-ilerle { from { inline-size: 0; } to { inline-size: 100%; } }
  @media (prefers-reduced-motion: reduce) {
    .slayt { transition: none; }
    .slayt-nokta[aria-current="true"] .slayt-nokta__dolgu { animation: none; inline-size: 100%; }
  }

  /* ── Kartlar / adimlar ───────────────────────────────────────────────── */
  .kart-izgara { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .kart {
    background-color: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: var(--space-sm); box-shadow: var(--shadow-sm);
  }
  .kart__no { font-family: var(--font-mono); color: var(--color-primary); font-size: .8rem; letter-spacing: .12em; }
  .kart__baslik { margin-block: var(--space-3xs) var(--space-3xs); }
  .kart__ozet { color: var(--color-text-soft); font-size: .93rem; }

  /* ── Uygulama adimlari ───────────────────────────────────────────────── */
  .adim { margin-block-end: var(--space-md); }
  .adim__basi { display: flex; align-items: baseline; gap: var(--space-2xs); flex-wrap: wrap; margin-block-end: var(--space-2xs); }
  .adim__rozet {
    background-color: var(--color-primary-soft); color: var(--color-primary-strong);
    border-radius: var(--radius-pill); padding: .1rem .6rem; font-size: .78rem; font-weight: 700;
    font-family: var(--font-mono);
  }
  .adim__ozet { color: var(--color-text-soft); font-size: .92rem; margin-inline-start: auto; }

  /* ── Birakma alani ───────────────────────────────────────────────────── */
  .birakma {
    border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg);
    background-color: var(--color-surface); padding: clamp(1.5rem, 1rem + 3vw, 3rem) var(--space-sm);
    text-align: center; display: grid; gap: var(--space-2xs); justify-items: center;
    transition: border-color .2s ease, background-color .2s ease;
  }
  .birakma[data-uzerinde="1"] { border-color: var(--color-primary); background-color: var(--color-primary-soft); }
  .birakma__ikon { color: var(--color-primary); }
  .birakma__baslik { font-size: 1.1rem; font-weight: 650; }
  .birakma__ozet { color: var(--color-text-soft); font-size: .92rem; max-inline-size: 52ch; }
  .birakma__eylemler { display: flex; gap: var(--space-2xs); flex-wrap: wrap; justify-content: center; margin-block-start: var(--space-2xs); }
  .gizli-giris { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

  /* ── Tablo ───────────────────────────────────────────────────────────── */
  .tablo-kutusu { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface); }
  .tablo { inline-size: 100%; min-inline-size: 54rem; font-size: .9rem; }
  .tablo th, .tablo td { padding: .5rem .6rem; text-align: start; border-block-end: 1px solid var(--color-border); vertical-align: middle; }
  .tablo thead th {
    position: sticky; inset-block-start: 0; background-color: var(--color-surface-2);
    font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-soft); z-index: 1;
  }
  .tablo tbody tr:hover { background-color: var(--color-surface-2); }
  .tablo td.sayi, .tablo th.sayi { text-align: end; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .tablo__ad { font-weight: 600; }
  .tablo__yol { display: block; color: var(--color-text-faint); font-size: .78rem; }
  /* Artik ust banttan acilan pencerede duruyor: kendi cercevesi kaldirildi,
     pencerenin cercevesiyle cift kutu gorunuyordu. */
  .teknik-alan { display: grid; gap: var(--space-2xs); }
  .toplu-arac {
    display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap;
    padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); background-color: var(--color-surface-2);
  }
  .toplu-arac__ad { font-size: .85rem; font-weight: 650; color: var(--color-text-soft); }
  /* SolidWorks koprusu paneli. Birakma alaninin ICINDE acildigi icin metin
     hizasi geri alinir - birakma alani ortali, serit sola dayali durmali. */
  .montaj { display: grid; gap: var(--space-2xs); margin-block-start: var(--space-xs); text-align: start; }
  /* .alan varsayilan olarak tam genislik kaplar; bu serit icinde yan yana durmali. */
  .toplu-arac .alan { inline-size: auto; }
  .alan {
    inline-size: 100%; min-inline-size: 4.5rem; padding: .28rem .4rem; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); background-color: var(--color-bg-alt); color: var(--color-text);
  }
  .alan--dar { min-inline-size: 4rem; }
  .alan:focus { border-color: var(--color-primary); }
  .alan[data-eksik="1"] { border-color: var(--color-err); background-color: var(--color-err-soft); }

  .rozet {
    display: inline-flex; align-items: center; gap: .22rem; border-radius: var(--radius-pill);
    padding: .08rem .5rem; font-size: .74rem; font-weight: 600; white-space: nowrap;
  }
  .rozet--ok { background-color: var(--color-ok-soft); color: var(--color-ok); }
  .rozet--uyari { background-color: var(--color-warn-soft); color: var(--color-warn); }
  .rozet--hata { background-color: var(--color-err-soft); color: var(--color-err); }
  .rozet--notr { background-color: var(--color-surface-2); color: var(--color-text-soft); }

  /* ── Ayarlar ─────────────────────────────────────────────────────────── */
  .ayar-penceresi {
    border: 0; padding: 0; background: transparent;
    inline-size: min(96vw, 62rem); max-inline-size: 96vw; max-block-size: 92svh;
  }
  .ayar-penceresi::backdrop { background-color: rgb(6 12 20 / .8); backdrop-filter: blur(3px); }
  .ayar-pencere__ic {
    display: flex; flex-direction: column; max-block-size: 92svh; overflow: hidden;
    background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  }
  .ayar-pencere__basi {
    display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap;
    padding: var(--space-2xs) var(--space-sm); border-block-end: 1px solid var(--color-border);
    background-color: var(--color-surface-2);
  }
  .ayar-pencere__basi h3 { font-size: 1rem; }
  .ayar-pencere__basi .soluk { font-size: .82rem; max-inline-size: 48ch; }
  /* Ayar listesi pencereden uzun; baslik sabit kalsin diye yalniz govde kayar. */
  .ayar-pencere__govde { overflow-y: auto; }
  .ayar-govde { padding: var(--space-sm); display: grid; gap: var(--space-md); }
  .ayar-grup { display: grid; gap: var(--space-2xs); }
  .ayar-grup > h3 { font-size: .95rem; letter-spacing: .02em; }
  .ayar-grup__ozet { font-size: .85rem; color: var(--color-text-faint); }
  .ayar-satirlar { display: grid; gap: var(--space-2xs); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .ayar-satir { display: grid; gap: .2rem; }
  .ayar-satir > label { font-size: .85rem; font-weight: 600; color: var(--color-text-soft); }
  .ayar-satir small { font-size: .76rem; color: var(--color-text-faint); }
  .onay { display: flex; align-items: start; gap: var(--space-3xs); font-size: .88rem; cursor: pointer; }
  .onay input { margin-block-start: .3rem; accent-color: var(--color-primary); }
  .ebat-listesi { display: grid; gap: var(--space-3xs); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .ebat-oge {
    display: flex; align-items: center; gap: var(--space-3xs); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); padding: .34rem .5rem; font-size: .88rem; cursor: pointer;
    background-color: var(--color-bg-alt);
  }
  .ebat-oge:hover { border-color: var(--color-border-strong); }
  .ebat-oge input { accent-color: var(--color-primary); }
  .ebat-oge__sil { margin-inline-start: auto; color: var(--color-text-faint); font-size: 1rem; line-height: 1; padding-inline: .2rem; }
  .ebat-oge__sil:hover { color: var(--color-err); }
  .ebat-ekle { display: flex; gap: var(--space-3xs); flex-wrap: wrap; align-items: end; }

  /* ── Ilerleme ────────────────────────────────────────────────────────── */
  .ilerleme { display: grid; gap: var(--space-3xs); }
  .ilerleme__cubuk { block-size: .5rem; border-radius: var(--radius-pill); background-color: var(--color-surface-2); overflow: hidden; }
  .ilerleme__dolgu { block-size: 100%; inline-size: 0; background-color: var(--color-primary); transition: inline-size .25s ease; }
  .ilerleme__yazi { font-size: .85rem; color: var(--color-text-soft); }

  /* ── Sonuc ───────────────────────────────────────────────────────────── */
  .grup-kart {
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background-color: var(--color-surface); margin-block-end: var(--space-sm); overflow: hidden;
  }
  .grup-basi {
    display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap;
    padding: var(--space-xs) var(--space-sm); background-color: var(--color-surface-2);
    border-block-end: 1px solid var(--color-border);
  }
  .grup-basi__ad { font-weight: 700; }
  .grup-basi__olcum { margin-inline-start: auto; display: flex; gap: var(--space-sm); flex-wrap: wrap; font-size: .85rem; color: var(--color-text-soft); }
  .grup-govde { padding: var(--space-sm); display: grid; gap: var(--space-sm); }
  .sac-izgara { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
  .sac-kart { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background-color: var(--color-bg-alt); }
  .sac-kart__tuval { display: block; inline-size: 100%; block-size: auto; background-color: var(--sheet-bg); cursor: zoom-in; }
  .sac-kart__alt { padding: var(--space-2xs); display: grid; gap: var(--space-3xs); }
  .sac-kart__ad { font-weight: 650; font-size: .92rem; }
  .sac-kart__satir { display: flex; justify-content: space-between; gap: var(--space-3xs); font-size: .8rem; color: var(--color-text-soft); }
  .sac-kart__satir b { font-family: var(--font-mono); font-weight: 600; color: var(--color-text); }
  .sac-kart__eylem { display: flex; gap: var(--space-3xs); margin-block-start: var(--space-3xs); }

  .ozet-serit { display: grid; gap: var(--space-2xs); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .ozet-kutu { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2xs) var(--space-xs); background-color: var(--color-bg-alt); }
  .ozet-kutu__deger { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 650; }
  .ozet-kutu__ad { font-size: .78rem; color: var(--color-text-faint); }

  .not {
    border-inline-start: 3px solid var(--color-border-strong); padding: var(--space-2xs) var(--space-xs);
    background-color: var(--color-surface-2); border-radius: var(--radius-sm); font-size: .88rem;
  }
  .not--uyari { border-color: var(--color-warn); background-color: var(--color-warn-soft); color: var(--color-warn); }
  .not--hata { border-color: var(--color-err); background-color: var(--color-err-soft); color: var(--color-err); }
  .not--bilgi { border-color: var(--color-primary); background-color: var(--color-primary-soft); }
  .not ul { margin-block-start: var(--space-3xs); display: grid; gap: .1rem; }
  .not li::before { content: "— "; opacity: .6; }

  /* ── Buyuteç penceresi ───────────────────────────────────────────────── */
  .buyutec {
    border: 0; padding: 0; background: transparent; max-inline-size: 96vw; max-block-size: 94svh;
    inline-size: min(96vw, 68rem);
  }
  .buyutec::backdrop { background-color: rgb(6 12 20 / .8); backdrop-filter: blur(3px); }
  .buyutec__ic { background-color: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); }
  .buyutec__basi { display: flex; align-items: center; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-sm); border-block-end: 1px solid var(--color-border); }
  .buyutec__basi h3 { font-size: 1rem; }
  .buyutec__kapat { margin-inline-start: auto; }
  .buyutec__tuval { display: block; inline-size: 100%; block-size: auto; background-color: var(--sheet-bg); }

  /* ── Alt bant ────────────────────────────────────────────────────────── */
  .alt-bant { background-color: var(--color-bg-alt); border-block-start: 1px solid var(--color-border); padding-block: var(--space-md); margin-block-start: var(--space-xl); }
  .alt-bant__ic { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center; justify-content: space-between; font-size: .88rem; color: var(--color-text-soft); }
}

@layer utilities {
  .gorsel-gizli {
    position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .yigin { display: grid; gap: var(--space-sm); }
  .yigin--dar { gap: var(--space-2xs); }
  .satir { display: flex; gap: var(--space-2xs); flex-wrap: wrap; align-items: center; }
  .sag { margin-inline-start: auto; }
  .soluk { color: var(--color-text-soft); }
  .kapali { display: none; }
}

@media (min-width: 40rem) {
  .baner__olcumler { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .baner__ic { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: clamp(2rem, 3vw, 3.25rem); align-items: center; }
}

@media print {
  .ust-bant, .baner, .slayt-kutusu, .birakma, .ayar-penceresi, .alt-bant, .dugme { display: none; }
  body { background-color: #fff; color: #000; }
  .sac-kart { break-inside: avoid; }
}