/* TANITIM SAYFASI — kok yoldaki herkese acik yuzey (TASK-255; SCR-042,
 * DEC-198, DEC-199). Token blogu URETILMISTIR (`npm run tokens`; apps/web/src/
 * styles/tokens.css ile birebir, TanitimTokenParityTest). Ilkeller
 * /ilkeller.css'ten gelir; burada yalniz `tanitim-` onekli kurallar vardir.
 * DESIGN.md makine kurallari bu dosyaya uzanir; tanitim yuzeyinin daraltilmis
 * istisna kumesi (DEC-388, DEC-389 b) §Do's and Don'ts altindadir: her istisna
 * satiri kendi forbid-ok gerekcesini tasir, sayisi oradaki OLCULEN tavana
 * baglidir. Dis font/CDN yoktur (TASK-430 KK-4). Dosya kucultulmeden sunulur:
 * yorum GERCEK bayttir, uzun gerekce 12-ux.md ve DESIGN.md'de yasar. */

:root {
  /* SEVKORA-TOKEN-BLOK BASLANGIC — uretilmis (token-css.mjs); elle duzenlenmez */
  /* Tema: TEK bildirim, iki deger (DEC-147). color-scheme sistem
     varsayilanini kurar; :root[data-theme=light|dark] acik tercihi
     uygular (DEC-146). */
  color-scheme: light dark;

  /* colors — acik / koyu ("gece kagidi", notr-gri SaaS koyusu DEGIL) */
  --color-canvas: light-dark(#DEDEE5, #08080C);
  --color-canvas-deep: light-dark(#D2D0DF, #0E0D16);
  --color-paper: light-dark(#FBFBFD, #111117);
  --color-paper-deep: light-dark(#F3F3F7, #0C0C12);
  --color-surface: light-dark(#FFFFFF, #1A1A23);
  --color-surface-overlay: light-dark(#FFFFFF, #23232E);
  --color-scrim: light-dark(rgb(16 18 43 / 40%), rgb(0 0 0 / 60%));
  --color-ink: light-dark(#16182B, #ECECF2);
  --color-ink-soft: light-dark(#61667D, #9EA0B2);
  --color-line: light-dark(#E9E9F0, #2A2A36);
  --color-line-strong: light-dark(#73738A, #767694);
  --color-fill-soft: light-dark(#F1F1F6, #22222D);
  --color-primary: light-dark(#4C1D95, #C9B8FC);
  --color-primary-deep: light-dark(#3B1578, #DED2FE);
  --color-on-fill: light-dark(#FFFFFF, #16182B);
  --color-on-photo: light-dark(#FFFFFF, #FFFFFF);
  --color-photo-scrim: light-dark(rgb(0 0 0 / 60%), rgb(0 0 0 / 60%));
  --color-photo-scrim-soft: light-dark(rgb(0 0 0 / 30%), rgb(0 0 0 / 30%));
  --color-photo-floor: light-dark(#717171, #717171);
  --color-data: light-dark(#155E75, #67E8F9);
  --color-accent: light-dark(#5B21B6, #C4B5FD);
  --color-success: light-dark(#065F46, #6EE7B7);
  --color-warning: light-dark(#92400E, #FCD34D);
  --color-danger: light-dark(#991B1B, #FCA5A5);
  --color-rail: light-dark(#F9F7FC, #15151D);
  --color-rail-deep: light-dark(#EBE3F5, #221A33);
  --color-rail-ink: light-dark(#16182B, #ECECF2);
  --color-rail-ink-soft: light-dark(#61667D, #9EA0B2);
  --color-rail-line: light-dark(#73738A, #767694);
  --color-rail-fill: light-dark(#FFFFFF, #262633);
  --color-rail-accent: light-dark(#5B21B6, #C4B5FD);
  --color-sky-surface: light-dark(#DBEAFE, #16233F);
  --color-sky-chip: light-dark(#BFDBFE, #1E3A5F);
  --color-sky-ink: light-dark(#1E40AF, #93C5FD);
  --color-violet-surface: light-dark(#EDE9FE, #241C46);
  --color-violet-chip: light-dark(#DDD6FE, #332764);
  --color-violet-ink: light-dark(#5B21B6, #C4B5FD);
  --color-rose-surface: light-dark(#FCE7F3, #3B1229);
  --color-rose-chip: light-dark(#FBCFE8, #551A3B);
  --color-rose-ink: light-dark(#9D174D, #F9A8D4);
  --color-amber-surface: light-dark(#FEF3C7, #372408);
  --color-amber-chip: light-dark(#FDE68A, #52360C);
  --color-amber-ink: light-dark(#92400E, #FCD34D);
  --color-mint-surface: light-dark(#D1FAE5, #0C2E20);
  --color-mint-chip: light-dark(#A7F3D0, #12452F);
  --color-mint-ink: light-dark(#065F46, #6EE7B7);
  --color-coral-surface: light-dark(#FEE2E2, #3A1517);
  --color-coral-chip: light-dark(#FECACA, #55201F);
  --color-coral-ink: light-dark(#991B1B, #FCA5A5);
  --color-teal-surface: light-dark(#CFFAFE, #0C2F36);
  --color-teal-chip: light-dark(#A5F3FC, #114650);
  --color-teal-ink: light-dark(#155E75, #67E8F9);
  --color-band-deep: light-dark(#3B1578, #1B1436);
  --color-band: light-dark(#4C1D95, #2C2154);
  --color-band-lift: light-dark(#5B21B6, #3B1578);
  --color-band-ink: light-dark(#FFFFFF, #FFFFFF);
  --color-band-ink-soft: light-dark(#DDD6FE, #C4B5FD);
  --color-karton: light-dark(#FDE68A, #FDE68A);
  --color-karton-acik: light-dark(#FEF3C7, #FEF3C7);
  --color-karton-koyu: light-dark(#92400E, #92400E);
  --color-etiket-kagit: light-dark(#FFFFFF, #FFFFFF);
  --color-etiket-cizgi: light-dark(#E9E9F0, #E9E9F0);
  --color-etiket-murekkep: light-dark(#16182B, #16182B);
  --color-etiket-murekkep-soluk: light-dark(#61667D, #61667D);
  --color-etiket-mor: light-dark(#4C1D95, #4C1D95);

  /* tint — durum renginin dusuk alfali yuzey tonlamasi (DEC-149) */
  --tint-surface: 12%;
  --tint-grup-cip: 50%;
  --color-tint-neutral: color-mix(in srgb, var(--color-ink-soft) var(--tint-surface), transparent);
  --color-tint-accent: color-mix(in srgb, var(--color-accent) var(--tint-surface), transparent);
  --color-tint-success: color-mix(in srgb, var(--color-success) var(--tint-surface), transparent);
  --color-tint-warning: color-mix(in srgb, var(--color-warning) var(--tint-surface), transparent);
  --color-tint-danger: color-mix(in srgb, var(--color-danger) var(--tint-surface), transparent);

  /* tint — kendi kagidina binmis (opak) ton; tek tuketici secili durum cipi (DEC-232) */
  --color-tint-on-surface-neutral: color-mix(in srgb, var(--color-ink-soft) var(--tint-surface), var(--color-surface));
  --color-tint-on-surface-accent: color-mix(in srgb, var(--color-accent) var(--tint-surface), var(--color-surface));
  --color-tint-on-surface-success: color-mix(in srgb, var(--color-success) var(--tint-surface), var(--color-surface));
  --color-tint-on-surface-warning: color-mix(in srgb, var(--color-warning) var(--tint-surface), var(--color-surface));
  --color-tint-on-surface-danger: color-mix(in srgb, var(--color-danger) var(--tint-surface), var(--color-surface));

  /* typography — aileler */
  --font-display: Archivo, system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* typography — display-3xl */
  --type-display-3xl-family: var(--font-display);
  --type-display-3xl-size: clamp(2.5rem, 5.4vw, 4.75rem);
  --type-display-3xl-weight: 700;
  --type-display-3xl-line-height: 1.02;
  --type-display-3xl-letter-spacing: -0.032em;

  /* typography — display-2xl */
  --type-display-2xl-family: var(--font-display);
  --type-display-2xl-size: 3.25rem;
  --type-display-2xl-weight: 700;
  --type-display-2xl-line-height: 1.04;
  --type-display-2xl-letter-spacing: -0.022em;

  /* typography — display-xl */
  --type-display-xl-family: var(--font-display);
  --type-display-xl-size: 2.5rem;
  --type-display-xl-weight: 700;
  --type-display-xl-line-height: 1.12;
  --type-display-xl-letter-spacing: -0.016em;

  /* typography — display-lg */
  --type-display-lg-family: var(--font-display);
  --type-display-lg-size: 1.875rem;
  --type-display-lg-weight: 600;
  --type-display-lg-line-height: 1.18;
  --type-display-lg-letter-spacing: -0.01em;

  /* typography — heading-md */
  --type-heading-md-family: var(--font-display);
  --type-heading-md-size: 1.3125rem;
  --type-heading-md-weight: 600;
  --type-heading-md-line-height: 1.3;

  /* typography — heading-sm */
  --type-heading-sm-family: var(--font-display);
  --type-heading-sm-size: 1.0625rem;
  --type-heading-sm-weight: 600;
  --type-heading-sm-line-height: 1.35;

  /* typography — body-md */
  --type-body-md-family: var(--font-body);
  --type-body-md-size: 0.9375rem;
  --type-body-md-line-height: 1.55;

  /* typography — body-sm */
  --type-body-sm-family: var(--font-body);
  --type-body-sm-size: 0.8125rem;
  --type-body-sm-line-height: 1.5;

  /* typography — label-xs */
  --type-label-xs-family: var(--font-body);
  --type-label-xs-size: 0.6875rem;
  --type-label-xs-weight: 600;
  --type-label-xs-letter-spacing: 0.08em;
  --type-label-xs-transform: uppercase;

  /* typography — mono-lg */
  --type-mono-lg-family: var(--font-mono);
  --type-mono-lg-size: 1.375rem;
  --type-mono-lg-letter-spacing: 0.012em;

  /* typography — mono-md */
  --type-mono-md-family: var(--font-mono);
  --type-mono-md-size: 0.875rem;

  /* typography — mono-xs */
  --type-mono-xs-family: var(--font-mono);
  --type-mono-xs-size: 0.625rem;

  /* spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-sm-md: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-lg-xl: 32px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* rounded */
  --rounded-none: 0px;
  --rounded-sm: 6px;
  --rounded-md: 10px;
  --rounded-lg: 14px;
  --rounded-xl: 18px;
  --rounded-2xl: 24px;
  --rounded-full: 999px;

  /* shadow */
  --shadow-raised: 0 1px 2px light-dark(rgb(16 18 43 / 4%), rgb(0 0 0 / 28%)), 0 4px 12px light-dark(rgb(16 18 43 / 6%), rgb(0 0 0 / 22%));
  --shadow-lifted: 0 1px 2px light-dark(rgb(16 18 43 / 5%), rgb(0 0 0 / 30%)), 0 8px 20px light-dark(rgb(16 18 43 / 8%), rgb(0 0 0 / 30%));
  --shadow-overlay: 0 12px 32px light-dark(rgb(16 18 43 / 14%), rgb(0 0 0 / 50%));
  --shadow-shell: 0 24px 64px light-dark(rgb(16 18 43 / 10%), rgb(0 0 0 / 55%));
  --shadow-deep: 0 2px 4px light-dark(rgb(16 18 43 / 5%), rgb(0 0 0 / 40%)), 0 20px 48px light-dark(rgb(16 18 43 / 12%), rgb(0 0 0 / 50%)), 0 56px 96px light-dark(rgb(16 18 43 / 10%), rgb(0 0 0 / 40%));

  /* motion */
  --motion-instant: 90ms;
  --motion-fast: 160ms;
  --motion-base: 260ms;
  --motion-slow: 460ms;
  --motion-stagger: 45ms;
  --motion-ease: cubic-bezier(0.2,0.8,0.2,1);
  --motion-ease-in: cubic-bezier(0.55,0,1,0.45);
  --motion-ease-line: cubic-bezier(0.65,0,0.35,1);

  /* breakpoints */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;

  /* layout */
  --layout-content-max: 1200px;
  --layout-tap-target: 44px;
  --layout-rail-width: 272px;
  --layout-rail-collapsed: 76px;
  --layout-shell-inset: 16px;
  /* SEVKORA-TOKEN-BLOK SON */
}

/* Acik tercih (data-theme) satir ici onyukleyiciden gelir; hicbir tercih
   kayitli degilken tema isletim sisteminden turer (DEC-147). */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* SEVKORA-TANITIM-TOKEN-BLOK BASLANGIC — uretilmis (token-css.mjs); elle duzenlenmez; KAPSAM YALNIZ BU YUZEY (DEC-389) */
/* gradient — tanitim yuzeyine ozel; SPA/admin/portal bu grubu TASIMAZ (DEC-389 b) */
:root {
  --gradient-band: linear-gradient(152deg, var(--color-band-deep) 0%, var(--color-band) 48%, var(--color-band-lift) 100%); /* forbid-ok: DEC-389 — tanitim yuzeyinin istisna kumesi, band gradyaninin acik yakasi; duraklar renk tokenidir, elle renk yoktur */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gradient-band: linear-gradient(152deg, var(--color-band-deep) 0%, var(--color-band) 46%, var(--color-band-lift) 100%); /* forbid-ok: DEC-389 — tanitim yuzeyinin istisna kumesi, band gradyaninin koyu yakasi; duraklar renk tokenidir, elle renk yoktur */
  }
}
:root[data-theme="dark"] {
  --gradient-band: linear-gradient(152deg, var(--color-band-deep) 0%, var(--color-band) 46%, var(--color-band-lift) 100%); /* forbid-ok: DEC-389 — tanitim yuzeyinin istisna kumesi, band gradyaninin koyu yakasi; duraklar renk tokenidir, elle renk yoktur */
}
/* shadow-tanitim — temadan bagimsiz nesne golgesi, tanitim yuzeyine ozel (DEC-142 istisnasi, TASK-437) */
:root {
  --shadow-etiket: 0 1px 2px rgb(16 18 43 / 12%);
}
/* SEVKORA-TANITIM-TOKEN-BLOK SON */

/* FONTLAR KENDI KOKENDEN (TASK-430 KK-4; DEC-388): @fontsource 5.3.0 kaynagindan
   bayt ayni kopya, apps/web/tests/tanitim-fontlar.test.ts bagi olcer; Turkce
   harfler latin-ext alt kumesindedir, alt kume yalniz gerekince iner. */
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/archivo-latin-500-normal.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: 'Archivo'; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/archivo-latin-ext-500-normal.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: 'Archivo'; font-style: normal; font-display: swap; font-weight: 600; src: url(/fonts/archivo-latin-600-normal.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: 'Archivo'; font-style: normal; font-display: swap; font-weight: 600; src: url(/fonts/archivo-latin-ext-600-normal.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: 'Archivo'; font-style: normal; font-display: swap; font-weight: 700; src: url(/fonts/archivo-latin-700-normal.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: 'Archivo'; font-style: normal; font-display: swap; font-weight: 700; src: url(/fonts/archivo-latin-ext-700-normal.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: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/inter-latin-400-normal.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: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/inter-latin-ext-400-normal.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: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/inter-latin-500-normal.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: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/inter-latin-ext-500-normal.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: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url(/fonts/inter-latin-600-normal.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: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url(/fonts/inter-latin-ext-600-normal.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: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/ibm-plex-mono-latin-400-normal.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: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/ibm-plex-mono-latin-ext-400-normal.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: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/ibm-plex-mono-latin-500-normal.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: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/ibm-plex-mono-latin-ext-500-normal.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; }

/* Kutu modeli TABANI. SPA bunu `base.css` ile kurar ve o dosya bu yuzeye
   YUKLENMEZ; onsuz 1px kenarli her oge bildirilen olcusunden buyuk cizilir
   ve sevk hattinin dugum hizasi sessizce kayar. */
body.tanitim,
.tanitim *,
.tanitim *::before,
.tanitim *::after {
  box-sizing: border-box;
}

/* ============================================================ TABAN ===== */

/* Zemin UC KADEMEDIR (DESIGN.md §Colors): paper-deep cukur, paper okuma,
   surface kart; ayrimi once bosluk, sonra cizgi, sonra fill-soft kurar. */
/* ATMOSFER ZEMINI — dekoratif gradyan yasagina acilan DORDUNCU mesru is
 * (TASK-377; DEC-336, kullanici karari). Yasak kaldirilmadi, DARALTILDI: SPA,
 * yonetim paneli, portal ve hata sayfalarinda dekoratif gradyan YOKTUR;
 * asagidaki uc satir kendi `forbid-ok:` gerekcesini tasir ve her design check
 * kosumunda ADIYLA listelenir (ED-045).
 *
 * SONDA BU KATMANI GOREMEZ: kontrast sondasi yalniz `background-color` okur.
 * Katmanin gercek piksellerdeki sapmasi tanitim-atmosfer-olcum.spec.ts ile
 * ayrica olculur ve bir TAVANA baglidir. Katman icerigin ARDINDA durur; zemini
 * olan bolumler (ana panel, `--cukur`, altbilgi) onu kendiliginden orter. */
body.tanitim::before {
  /* Tonlar TOKENDAN turer; alfalar OLCULEREK secildi: %6/%5/%4 sondada kanal
     basina 16 birim sapma verdi, %3/%2,5/%2,5 tam tavanda (10) durdu. */
  --atmosfer-huzme: color-mix(in srgb, var(--color-primary) 2.4%, transparent);
  --atmosfer-huzme-ikinci: color-mix(in srgb, var(--color-accent) 2%, transparent);
  --atmosfer-yikama: color-mix(in srgb, var(--color-primary) 2%, transparent);

  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(101deg, transparent 12%, var(--atmosfer-huzme) 26%, transparent 43%), /* forbid-ok: DEC-336 — tanitim atmosfer katmaninin BIRINCI huzmesi; dar kapsamli istisna, tonlar tokendan turer ve sapmasi ayri bir sondayla tavana baglidir */
    linear-gradient(94deg, transparent 54%, var(--atmosfer-huzme-ikinci) 66%, transparent 79%), /* forbid-ok: DEC-336 — IKINCI huzme; ayni katman, ayni gerekce, ayni tavan */
    radial-gradient(120% 74% at 82% -12%, var(--atmosfer-yikama) 0%, transparent 64%); /* forbid-ok: DEC-336 — huzmelerin dogdugu yumusak yikama; kenari yoktur, dolayisiyla bant izi birakmaz */
}

body.tanitim {
  margin: 0;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--type-body-md-family);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tanitim h1,
.tanitim h2,
.tanitim p,
.tanitim ol {
  margin: 0;
}

.tanitim ol {
  padding: 0;
  list-style: none;
}

/* CUKUR ZEMINDE BIRINCI MUREKKEP METIN OLARAK BIR KADEME KOYULASIR (DEC-230;
   olculdu: primary paper-deep uzerinde 4,33:1, govde esigini gecemez;
   primary-deep 6,10:1). Palet degismez; kural TEK YERDE bildirilir: cukur
   kaplar ozelligi tanimlar, metin kurallari okur. */
.tanitim-panel,
.tanitim-bolum--cukur,
.tanitim-bolum--cukur-ust,
.tanitim-alt {
  --tanitim-metin-murekkebi: var(--color-primary-deep);
}

.tanitim :focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Klavye kullanicisi icerige TEK sekmeyle ulasir; bagi gormeyen fare
   kullanicisi hicbir sey gormez. */
.tanitim-skip {
  position: absolute;
  top: var(--space-sm);
  left: -9999px;
  z-index: 2;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--rounded-sm);
  background-color: var(--color-surface);
  color: var(--color-primary);
}

.tanitim-skip:focus {
  left: var(--space-sm);
}

/* Bolum etiketi — konsimentonun BUYUK HARF alan adi. */
.tanitim-etiket {
  color: var(--color-ink-soft);
}

/* ============================================================ BOLUM ===== */

.tanitim-bolum {
  padding-block: var(--space-3xl);
}

/* BELIRME (TASK-437; DEC-391): on bes noktanin baslangic hali ve gecisi
   belirme.ts'ten satir ici yazilir (referansin kurBelirme'si: 14px, motion-slow,
   esik 0.06, alttan -8%); bu dosyada kural yoktur ve opakligi sifirlayan bir
   bildirim buraya girmez (DESIGN.md §Motion). */

/* BOLUM RITMI — AGIRLIK KADEMESI (TASK-268): iki AGIR moment (akis + anlati,
   ornek evrak), aralari HAFIF. Kademe yalniz dikey bosluk ve giris genisligiyle
   kurulur; yazi boyutu bolum basina degismez. */
.tanitim-bolum--agir {
  padding-block: var(--space-3xl);
}

.tanitim-bolum--hafif {
  padding-block: var(--space-2xl);
}

/* Hafif bolumun girisi daha dar bir olcuye oturur: kisa metin genis olcude
   seyrek gorunur ve agirligi olmayan bir bolum, agirligi varmis gibi yer
   kaplar. */
.tanitim-bolum--hafif .tanitim-bolum__basi,
.tanitim-bolum--hafif .tanitim-bolum__giris {
  max-width: 56ch;
}

.tanitim-bolum--cukur {
  background-color: var(--color-paper-deep);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.tanitim-bolum__basi {
  display: grid;
  gap: var(--space-sm-md);
  max-width: 68ch;
}

.tanitim-bolum__giris {
  max-width: 68ch;
  color: var(--color-ink-soft);
}

/* ============================================================ ANLATI ===== */

/* GONDERININ YOLU (FAZ C, TASK-433; DEC-388, DEC-391) — REFERANSIN PORTU.
   Olculer, dilimler ve renk duraklari Claude Design v2 paketinden BIREBIR
   gelir; sapan her deger piksel farkini buyutur ve o fark olculur (KK-1).

   HICBIR KURAL BIR DURAGI KOSULSUZ GIZLEMEZ (DEC-199): dort durak metni
   sunucu ciktisindadir ve betik inmezse alt alta TAM okunur. Yapiskanlik ve
   capraz gecis `.tanitim-anlati--canli` altinda yasar; o sinifi betik acar. */

.tanitim-yol {
  position: relative;
  background-color: var(--color-paper);
}

/* SAHNE — yapiskanligi BETIK kurar (380vh bolum / 100vh sahne). Burada yalniz
   akis ve kirpma durur; taban yuksekligi YOKTUR ve bu olculmus bir derstir
   (goruntu alanindan yuksek bir yapiskan oge yapismaz — KK-3). */
.tanitim-yol__sahne {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 3B UZAY — kamera burada. Izdusum tarayicinindir; betik yalniz z yazar. */
.tanitim-yol__uzay {
  position: absolute;
  inset: 0;
  perspective: 1100px;
  perspective-origin: 70% 46%;
  overflow: hidden;
  pointer-events: none;
}

/* ZEMIN DUZLEMI — KARE KARE BOYANMAZ (KK-6c): gradyan tek sefer boyanir,
   `background-position` hicbir karede degistirilmez.

   IZGARA KATMANLARI TASK-455'TE URUNDEN CIKTI (DEC-417): duzlem artik YALNIZ
   yolun seridini tasir. Serit KALIR ve bu bilinclidir — KK-6c olcumu boyanan
   bir yuzey ister, kaldirilsaydi kural hicbir seyi olcmez ve sessizce yesil
   donerdi (ED-178'in sinifi). Kaldirilan sey adiyla yazilir: iki tekrarli
   izgara katmani (dikey ve yatay). */
.tanitim-yol__zemin {
  position: absolute;
  inset-inline-start: 70%;
  inset-block-start: 60%;
  inline-size: 1800px;
  block-size: 3600px;
  transform-origin: top center;
  transform: translateX(-50%) rotateX(-90deg);
  background-image: linear-gradient(90deg, transparent calc(50% - 110px), color-mix(in srgb, var(--color-primary) 16%, transparent) calc(50% - 110px), color-mix(in srgb, var(--color-primary) 16%, transparent) calc(50% + 110px), transparent calc(50% + 110px)); /* forbid-ok: DEC-417 — referansin zemin duzleminden KALAN tek katman: yolun seridi; rengi TOKENDAN turer ve duzlem kare kare BOYANMAZ (KK-6c). Iki tekrarli izgara katmani TASK-455'te cikti */
  opacity: 0.62;
  mask-image: linear-gradient(to bottom, var(--color-ink) 0%, transparent 46%); /* forbid-ok: DEC-388 — izgaranin ufukta erimesi; bir ALFA rampasidir, renk tasimaz ve kenari olmadigi icin bant izi birakmaz */
  pointer-events: none;
}

/* RAY — KAPILARI TASIYAN UZAY. Kaydirma yalniz BUNU oteler; kapilar kendi
   yerlerinde durur. Bedeli olculebilir: her karede DORT donusum yerine BIR
   donusum yazilir ve tarayici tek bilesik katman tasir (KK-6). */
.tanitim-yol__ray {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(0);
  will-change: transform;
}

/* KAPI — dort durak, ray-uzayinda SABIT. Opaklik betikten yazilir. */
.tanitim-yol__kapi {
  position: absolute;
  inset-inline-start: 70%;
  inset-block-start: 48%;
  inline-size: 560px;
  block-size: 300px;
  margin: -150px 0 0 -280px;
  transform-style: preserve-3d;
  will-change: opacity;
}

.tanitim-yol__kapi--1 { transform: translateZ(-900px); }
.tanitim-yol__kapi--2 { transform: translateZ(-2000px); }
.tanitim-yol__kapi--3 { transform: translateZ(-3100px); }
.tanitim-yol__kapi--4 { transform: translateZ(-4200px); }

/* Duragin yere dusen golgesi: bir golge KADEMESI degil, cizilen nesnenin
   kendi golgesidir. */
.tanitim-yol__kapi-golge {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 4px;
  inline-size: 404px;
  block-size: 36px;
  margin-inline-start: -202px;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--color-photo-scrim) 40%, transparent) 0%, transparent 72%); /* forbid-ok: DEC-388 — duragin yere dusen golgesi; kenari yoktur, tonu photo-scrim tokeninden turer */
}

/* PANO — duragin icindeki gercek yuzey (form, etiket, fotograf). */
.tanitim-yol__pano {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 20px;
  transform: translateX(-50%);
  inline-size: 352px;
  padding: 16px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-raised);
}

.tanitim .tanitim-yol__pano-basi {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/* 01 SECIM — panelin kendi formu. */
.tanitim-yol__form {
  display: grid;
  gap: 0;
  border: 1px solid var(--color-line);
}

.tanitim-yol__satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-block-end: 1px solid var(--color-line);
}

.tanitim-yol__satir--vurgu {
  background-color: var(--color-fill-soft);
}

.tanitim-yol__satir--son {
  border-block-end: 0;
}

.tanitim-yol__satir-etiket {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.tanitim-yol__satir-deger {
  font-size: 13px;
}

.tanitim-yol__satir-deger--secim {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.tanitim-yol__satir-deger--mono {
  font-family: var(--font-mono);
}

.tanitim-yol__radyo {
  flex: none;
  inline-size: 11px;
  block-size: 11px;
  border-radius: 50%;
  border: 3px solid var(--color-primary);
}

.tanitim-yol__dugme {
  margin-block-start: 12px;
  padding: 9px 14px;
  background-color: var(--color-primary);
  color: var(--color-on-fill);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* 02 EVRAK — barkodlu etiketin kendisi. */
.tanitim-yol__belge {
  border: 1px solid var(--color-line-strong);
  padding: 12px;
}

.tanitim-yol__belge-basi {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding-block-end: 8px;
  border-block-end: 2px solid var(--color-line-strong);
}

.tanitim-yol__belge-marka {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.tanitim-yol__belge-firma {
  font-size: 11px;
  color: var(--color-ink-soft);
}

.tanitim-yol__belge-taraflar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-block-end: 1px solid var(--color-line);
}

.tanitim-yol__belge-taraf {
  padding: 8px 10px 8px 0;
}

.tanitim-yol__belge-taraf--sag {
  padding: 8px 0 8px 10px;
  border-inline-start: 1px solid var(--color-line);
}

.tanitim-yol__belge-etiket {
  margin: 0;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.tanitim .tanitim-yol__belge-deger {
  margin: 1px 0 0;
  font-size: 11px;
}

/* BARKOD CUBUKLARI GRADYAN DEGIL OGEDIR: genislik SINIFTAN gelir, satir ici
   stil yoktur ve istisna sayisi bu yuzden buyumez. */
.tanitim-yol__belge-barkod {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  block-size: 44px;
  margin-block-start: 12px;
  overflow: hidden;
}

.tanitim-yol__cubuk {
  flex: none;
  block-size: 100%;
  background-color: var(--color-etiket-murekkep);
}

.tanitim-yol__cubuk--2 { inline-size: 2px; }
.tanitim-yol__cubuk--3 { inline-size: 3px; }
.tanitim-yol__cubuk--4 { inline-size: 4px; }
.tanitim-yol__cubuk--5 { inline-size: 5px; }

.tanitim-yol__belge-alt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-block-start: 8px;
}

.tanitim-yol__belge-no {
  font-family: var(--font-mono);
  font-size: 13px;
}

.tanitim-yol__belge-adet {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ink-soft);
}

/* 03 YOL — kargo araci. */
.tanitim-yol__pano--arac {
  inset-block-end: 16px;
  inline-size: 470px;
  padding: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

.tanitim .tanitim-yol__pano-ust {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  text-align: center;
}

.tanitim-yol__foto {
  position: relative;
}

.tanitim-yol__foto-golge {
  position: absolute;
  inset-inline: 6%;
  inset-block-end: 2px;
  block-size: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--color-photo-scrim) 56.67%, transparent) 0%, transparent 74%); /* forbid-ok: DEC-388 — aracin yere dusen golgesi; kenari yoktur, tonu photo-scrim tokeninden turer */
}

/* 04 TESLIM — alicinin fotografi ve olcum noktasi. */
.tanitim-yol__pano4 {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 2px;
  transform: translateX(-50%);
  inline-size: 620px;
}

.tanitim-gorsel--yol {
  aspect-ratio: 16 / 9;
  border-radius: var(--rounded-none);
}

/* ISARETCI — alicinin ELINDEKI kutunun yeri: bir OLCUM noktasidir, cizilmez.
   Hiza betikte OLCULUR (KK-5), burada yazilmaz. */
.tanitim-yol__isaretci {
  position: absolute;
  inset-inline-start: 36.1%;
  inset-block-start: 70.9%;
  inline-size: 30.8%;
  block-size: 21.6%;
}

/* KOLI — RAYIN KARDESI: rayin otelemesini ALMAZ, kendi yolunu izler. Bes
   yuzlu karton kutu; butun tonlar karton tokenlarindan turer. */
.tanitim-yol__koli {
  position: absolute;
  inset-inline-start: 70%;
  inset-block-start: 56%;
  inline-size: 200px;
  block-size: 79px;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) translateZ(180px) rotateY(-14deg) rotateX(-11deg);
  will-change: transform;
}

.tanitim-yol__koli-on {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-karton) 86%, var(--color-karton-koyu)) 0%, color-mix(in srgb, var(--color-karton) 96%, var(--color-karton-koyu)) 100%); /* forbid-ok: DEC-388 — kolinin ON yuzu: kartonun isik alan yuzeyi; iki durak da karton tokenlarindan turer */
  border: 1px solid color-mix(in srgb, var(--color-karton-koyu) 34%, transparent);
  box-shadow: var(--shadow-deep);
}

.tanitim-yol__koli-dikis {
  position: absolute;
  inset-inline-start: 50%;
  inset-block: 0;
  inline-size: 20px;
  margin-inline-start: -10px;
  background-color: color-mix(in srgb, var(--color-karton-acik) 78%, var(--color-karton-koyu) 8%);
  border-inline: 1px solid color-mix(in srgb, var(--color-karton-koyu) 18%, transparent);
}

.tanitim-yol__koli-ust {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -80px;
  inline-size: 200px;
  block-size: 80px;
  transform-origin: bottom center;
  transform: rotateX(90deg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-karton-acik) 94%, var(--color-paper)) 0%, color-mix(in srgb, var(--color-karton) 88%, var(--color-karton-acik)) 100%); /* forbid-ok: DEC-388 — kolinin UST kapagi: en aydinlik yuz; duraklar karton ve kagit tokenlarindan turer */
  border: 1px solid color-mix(in srgb, var(--color-karton-koyu) 30%, transparent);
}

.tanitim-yol__koli-ust-dikis {
  position: absolute;
  inset-inline-start: 50%;
  inset-block: 0;
  inline-size: 20px;
  margin-inline-start: -10px;
  background-color: color-mix(in srgb, var(--color-karton-acik) 70%, var(--color-karton-koyu) 10%);
  border-inline: 1px solid color-mix(in srgb, var(--color-karton-koyu) 16%, transparent);
}

.tanitim-yol__koli-sag {
  position: absolute;
  inset-inline-start: 200px;
  inset-block-start: 0;
  inline-size: 80px;
  block-size: 79px;
  transform-origin: left center;
  transform: rotateY(90deg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-karton) 62%, var(--color-karton-koyu)) 0%, color-mix(in srgb, var(--color-karton) 74%, var(--color-karton-koyu)) 100%); /* forbid-ok: DEC-388 — kolinin SAG yan yuzu: golgede kalan yuz; iki durak da karton tokenlarindan turer */
  border: 1px solid color-mix(in srgb, var(--color-karton-koyu) 40%, transparent);
}

.tanitim-yol__koli-sol {
  position: absolute;
  inset-inline-start: -80px;
  inset-block-start: 0;
  inline-size: 80px;
  block-size: 79px;
  transform-origin: right center;
  transform: rotateY(-90deg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-karton) 70%, var(--color-karton-koyu)) 0%, color-mix(in srgb, var(--color-karton) 82%, var(--color-karton-koyu)) 100%); /* forbid-ok: DEC-388 — kolinin SOL yan yuzu; iki durak da karton tokenlarindan turer */
  border: 1px solid color-mix(in srgb, var(--color-karton-koyu) 38%, transparent);
}

/* ETIKET — basili kagit, KOLININ ICINDE. Ikinci duraktan sonra asagidan gelip
   uzerine oturur ve geri sarildiginda GERI ALINIR (KK-5). */
.tanitim-yol__etiket {
  position: absolute;
  inset-inline-start: 14px;
  inset-block-start: 13px;
  inline-size: 94px;
  block-size: 48px;
  padding: 6px 7px;
  background-color: var(--color-etiket-kagit);
  border: 1px solid var(--color-etiket-cizgi);
  transform-origin: center center;
  transform: translateZ(1px);
  opacity: 0; /* sf-absent-ok: DESIGN.md'nin yasagi KONTRAST SONDASINI korur — sonda opakligi sifir olan ogeyi ATLAR, yani metin tasiyan bir yuzey boyle gizlenirse kapi daha AZ oge olcerek yesil doner. BURADA o zarar YOKTUR: etiket, `aria-hidden` 3B uzayin icinde DEKORATIF bir cizimdir ve erisilebilirlik agacinda hic yoktur; sifir opaklik onun REFERANSTAKI dinlenme halidir (ikinci duraktan sonra betik onu ucurur, TASK-433 KK-5). Yasak DARALTILMADI ve satir SILINMEDI — istisna her kosumda adiyla yeniden listelenir. */
}

.tanitim-yol__etiket-basi {
  margin: 0;
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-etiket-murekkep-soluk);
}

.tanitim .tanitim-yol__etiket-no {
  margin: 1px 0 0;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-etiket-murekkep);
}

.tanitim-yol__etiket-barkod {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  block-size: 18px;
  margin-block-start: 4px;
  overflow: hidden;
}

.tanitim-yol__etiket-barkod .tanitim-yol__cubuk {
  background-color: var(--color-etiket-mor);
}

/* PERDELER — sahnenin ust ve sol yakasini kagida baglar; metnin okundugu
   yerde 3B uzay SONER. */
.tanitim-yol__perde {
  position: absolute;
  pointer-events: none;
}

.tanitim-yol__perde--ust {
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 38%;
  background: linear-gradient(to bottom, var(--color-paper) 12%, transparent 100%); /* forbid-ok: DEC-388 — sahnenin ust yakasini kagida baglayan perde; iki ucu da token, elle yazilmis renk yok */
}

.tanitim-yol__perde--sol {
  inset-inline-start: 0;
  inset-block: 0;
  inline-size: min(70%, 820px);
  background: linear-gradient(to right, var(--color-paper) 52%, transparent 100%); /* forbid-ok: DEC-388 — metnin okundugu sol yakanin perdesi; kontrastin TASIYICISIDIR, bir sus degil */
}

/* ICERIK — metin sutunu. Sahnenin USTUNDE durur ve okunur kalir. */
.tanitim-yol__icerik {
  position: relative;
  inline-size: 100%;
  max-inline-size: 1200px;
  margin-inline: auto;
  padding: clamp(28px, 5vh, 72px) 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 3vh, 36px);
  align-content: center;
  flex: 1;
  min-block-size: 0;
}

.tanitim-yol__basi {
  display: grid;
  gap: 14px;
  max-inline-size: 56ch;
}

.tanitim-yol__metinler {
  display: grid;
  gap: 32px;
  max-inline-size: 58ch;
}

/* DURAK — dordu de sunucu ciktisindadir ve KOSULSUZ GIZLENMEZ. */
.tanitim-durak {
  display: grid;
  gap: 12px;
  max-inline-size: 58ch;
}

/* KOSULLU KADEME: yalniz betik indiginde duraklar ust uste biner ve capraz
   gecer. Betik dusarse bu kural HIC uygulanmaz ve dort metin alt alta TAM
   okunur (DEC-199; TanitimSayfasiTest kapisi). */
.tanitim-anlati--canli .tanitim-durak {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  transition: opacity var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease);
}

/* DURAK BASLIGI — referansin h3 kademesi (1.5rem / 1.2 / 600 / -0.01em).
   Genel `type-heading-sm` bu kademede DEGILDIR (17px olcer) ve bu bolum
   referansa BIREBIR baglidir, dolayisiyla kademe ADIYLA yazilir. */
.tanitim-durak__baslik {
  /* MARGIN ADIYLA SIFIRLANIR: bu dosyanin `.tanitim` sifirlamasi h1/h2/p/ol
     sayar, h3 SAYMAZ — ve tarayici varsayilani h3 icin 1em'dir, yani 24px'lik
     bir baslikta ust+alt TAM 48px. Olculen fark tam o 48px'ti (referans 121px,
     canli 169px). Sifirlamayi genisletmek port EDILMEMIS bolumleri de
     oynatirdi; kademe kendi marjini kendi tasir. */
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.tanitim-durak__sira {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.tanitim-durak__metin {
  color: var(--color-ink-soft);
}

/* DAR EKRAN: 3B uzay yer kaplamayi birakir; yolun anlatisi duraklarin
   metnindedir ve o metin her genislikte tamdir. Esik 64rem, cunku sahne
   orada metinle ust uste binmeye baslar. */
@media (width < 64rem) {
  .tanitim-yol__uzay { display: none; }
}

/* ============================================== BARKOD CIZIMI ===== */

/* Takip numarasinin yanindaki cizim IKI yerde yasar: ornek kunyede (bolum-09,
   FAZ D port blogu) ve kahraman kolisinin etiketinde. Taban olculer KUNYENIN
   olculeridir (referans: 3/6/9px cubuk, 3px aralik, 76px boy); kolinin daha
   ince etiketi kendi blogunda ezer. */
.tanitim-barkod {
  display: grid;
  gap: 10px;
  justify-items: start;
  min-inline-size: 0;
}

.tanitim-barkod__cizim {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  block-size: 76px;
  max-inline-size: 100%;
  overflow: hidden;
}

.tanitim-barkod__cubuk {
  flex: none;
  block-size: 100%;
  background-color: var(--color-ink);
}

.tanitim-barkod__cubuk--ince {
  inline-size: 3px;
}

.tanitim-barkod__cubuk--orta {
  inline-size: 6px;
}

.tanitim-barkod__cubuk--kalin {
  inline-size: 9px;
}

.tanitim-barkod__deger {
  font-family: var(--type-mono-lg-family);
  font-size: 1.0625rem;
  user-select: all;
}

/* ======================================================= GELISTIRICI ===== */

/* KAP ORANLARI (DESIGN.md §Fotograf): `bant` (kunye ve kapanis vitrini), `yol`
   (yol panolari), `panel` (ana panel penceresi, port blogunda). */
.tanitim-gorsel--bant {
  aspect-ratio: 21 / 9;
  border-radius: var(--rounded-none);
}

.tanitim-gorsel__kare {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  /* Anlati duraklarinin vurgu gecisi de DURUR. Vurgunun kendisi kalkmaz
     cunku hicbir bilgiyi tek basina tasimiyordu; kalkan sey yalniz gecistir.
     Ayrica betik azaltilmis kipte vurguyu HIC kurmaz, yani bu kural ikinci
     bir emniyettir. */
  .tanitim-durak,
  .tanitim-durak::before,
  .tanitim-durak__sira {
    transition: none;
  }
}

/* ==========================================================================
   BIREBIR PORT — FAZ A: UST CUBUK, KAHRAMAN, ANA PANEL (TASK-431; DEC-388,
   DEC-389; kaynak .specforge/docs/research/tanitim-referans-v2/index.html).
   Referansin satir ici stilleri MEKANIK cevrildi: renk, golge ve hap kose
   TOKENDAN gelir; tokeni olmayan olcu (8/12px kose, 0.75rem ve 8/11/13px yazi,
   10/14/22/28px bosluk) referans GEOMETRISIDIR ve literal yazilir. Kabul
   olcusu harness'in parca basina piksel farkidir (tanitim-karsilastirma.mjs).
   OPAKLIK SIFIR BILDIRIMI BU DOSYAYA GIRMEZ (DESIGN.md yokluk capasi): gizleme
   `visibility` ile yapilir; sonda opakligi sifir ogeyi ATLAR. */

/* --- UST CUBUK — YAPISAN, YARI SAYDAM KAGIT (referans: sticky, z 40,
   paper %86 + backdrop blur 14px). Zemin BIR RENK olarak bildirilir (DEC-387)
   ve alfalidir: kontrast sondasi alfayi atalarin uzerine bindirerek olcer.
   Cubuk artik cukur zemin DEGIL kagittir; DEC-230'un primary-deep kurali
   burada baglamaz, baglantilar referanstaki gibi ink-soft'tur. */
.tanitim-bant {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background-color: color-mix(in srgb, var(--color-paper) 86%, transparent);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--color-line);
}

/* `max-width` FIZIKSEL yazilir: kabuk-sadeligi sondasi bu ozelligi adiyla
   okur (tanitim okuma kolonu {layout.content-max} tavanini korur). */
.tanitim-bant__ic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  max-width: var(--layout-content-max);
  margin-inline: auto;
  padding: var(--space-sm-md) var(--space-lg);
}

.tanitim-bant__marka {
  display: flex;
  align-items: center;
  gap: var(--space-sm-md);
  min-inline-size: 0;
  text-decoration: none;
}

/* Marka isareti: bant gradyanli 32px kutu icinde beyaz cizgi ikon; ikon
   `currentColor` cizer, rengi temadan bagimsiz band-ink tokenidir. */
.tanitim-bant__isaret {
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 8px;
  background-image: var(--gradient-band);
  color: var(--color-band-ink);
  box-shadow: var(--shadow-raised);
}

.tanitim-bant__ad {
  font-family: var(--font-display);
  font-size: var(--type-heading-md-size);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-ink);
}

.tanitim-bant__bolumler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  min-inline-size: 0;
}

/* HOVER referansin bildirdigi `a:hover` kuralidir (primary-deep): referansta
   satir ici renk o kurali ezer, port onu okunur oldugu yerde uygular; odak
   halkasi `.tanitim :focus-visible` ile ayni (2px primary, 2px pay). */
.tanitim-bant__baglanti {
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
  font-weight: 500;
  color: var(--color-ink-soft);
  text-decoration: none;
}

.tanitim-bant__baglanti:hover,
.tanitim-bant__btn:hover {
  color: var(--color-primary-deep);
}

/* Tema anahtari tanitimda referans gibi GECISSIZ ve hover'siz kalir (DEC-391);
   ortak parcaya (ilkeller.css) dokunulmaz, yalniz bu yuzeyde ezilir. */
.tanitim .tema-anahtari-yuz {
  transition: none;
}

.tanitim .tema-anahtari[aria-checked="false"]:hover .tema-anahtari-koyu,
.tanitim .tema-anahtari[aria-checked="true"]:hover .tema-anahtari-acik {
  color: var(--color-ink-soft);
}

.tanitim-bant__hesap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm-md);
}

.tanitim-bant__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 38px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--rounded-md);
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-primary);
}

/* Dolgulu dugmede metin rengi DEGISMEZ (primary-deep metin dolgu uzerinde
   okunmazdi); referansta hover zemini de degistirmez (DEC-391). */
.tanitim-bant__btn--birincil,
.tanitim-bant__btn--birincil:hover {
  padding-inline: 18px;
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-on-fill);
  box-shadow: var(--shadow-raised);
}

/* --- KAHRAMAN BANDI --------------------------------------------------------
   Bant TEMADAN BAGIMSIZ murekkep tasir (on-photo kalibi, DEC-384). Zemin BIR
   RENK olarak da bildirilir ve deger gradyanin EN ACIK duragidir (DEC-387):
   kontrast sondasi yalniz `background-color` okur, gradyan ona gorunmez.
   Bandin cizgi ve dolgu tonlari referansta temaya gore degisir (cizgi %20/%16,
   dolgu %10/%8); ikisi de band-ink tokeninden `light-dark()` ciftiyle turer. */
.tanitim-kahraman {
  --band-cizgi: light-dark(color-mix(in srgb, var(--color-band-ink) 20%, transparent), color-mix(in srgb, var(--color-band-ink) 16%, transparent));
  --band-dolgu: light-dark(color-mix(in srgb, var(--color-band-ink) 10%, transparent), color-mix(in srgb, var(--color-band-ink) 8%, transparent));

  position: relative;
  overflow: hidden;
  background-color: var(--color-band-lift);
  background-image: var(--gradient-band); /* {gradient.band}: tema ciftini ve koyu yakanin 46% duragini uretilmis blok tasir (DEC-389 b) */
  color: var(--color-band-ink);
}

/* Isima ve izgara BILGI TASIMAZ (`aria-hidden`); isima 9 saniyelik nefesle
   parlar, harness donmus (animasyonsuz) halde olcer. */
.tanitim-kahraman__isima {
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -10%;
  inline-size: 820px;
  block-size: 820px;
  border-radius: 50%;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--color-band-ink) 16%, transparent) 0%, transparent 62%); /* forbid-ok: DEC-384 — bandin isimasi; kenari yoktur, dolayisiyla bant izi birakmaz ve tonu band-ink tokeninden turer */
  animation: tanitim-parla 9s var(--motion-ease) infinite;
  pointer-events: none;
}

.tanitim-kahraman__izgara {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-band-ink) 6%, transparent) 0 1px, transparent 1px 96px); /* forbid-ok: DEC-384 — bandin olcek cizgileri; sevk evraki dilinin cetvelidir, tonu band-ink tokeninden turer */
  pointer-events: none;
}

.tanitim-kahraman__ic {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
  inline-size: 100%;
  max-inline-size: var(--layout-content-max);
  margin-inline: auto;
  padding: 112px var(--space-lg) 88px;
}

/* Iki kolon KIRILMA NOKTASIZ: `auto-fit` + `minmax(min(100%, 360px))` dar
   ekranda tek kolona iner (DESIGN.md §Layout). */
.tanitim-kahraman__govde {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 48px;
  align-items: center;
  min-inline-size: 0;
}

.tanitim-kahraman__soz {
  display: grid;
  gap: 28px;
  align-content: start;
  min-inline-size: 0;
}

/* Rozet bir grid ogesidir: `justify-self: start` olmadan kolonu kaplar. */
.tanitim-kahraman__rozet {
  justify-self: start;
  padding: 7px var(--space-md);
  border: 1px solid var(--band-cizgi);
  border-radius: var(--rounded-full);
  background-color: var(--band-dolgu);
  font-family: var(--font-mono);
  font-size: var(--type-body-sm-size);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-band-ink);
}

/* Sayfanin TEK en ust kademesi (DEC-384): display-3xl yalniz burada. */
.tanitim-kahraman__baslik {
  max-inline-size: 17ch;
  font-family: var(--type-display-3xl-family);
  font-size: var(--type-display-3xl-size);
  font-weight: var(--type-display-3xl-weight);
  line-height: var(--type-display-3xl-line-height);
  letter-spacing: var(--type-display-3xl-letter-spacing);
  text-wrap: pretty;
}

.tanitim-kahraman__giris {
  max-inline-size: 46ch;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-band-ink-soft);
}

.tanitim-kahraman__eylemler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm-md);
}

/* Bant uzerindeki eylemler: sessiz olan bandin cizgi ve dolgusunu, birincil
   olan kagit yuzeyi + derin golgeyi ({shadow.deep}, DEC-384) tasir. */
.tanitim-kahraman__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  padding: var(--space-sm-md) 22px;
  border: 1px solid var(--band-cizgi);
  border-radius: 12px;
  background-color: var(--band-dolgu);
  font-family: var(--font-body);
  font-size: var(--type-body-md-size);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-band-ink);
}

.tanitim-kahraman__btn--birincil,
.tanitim-kahraman__btn--birincil:hover {
  padding-inline: 26px;
  border-color: var(--color-surface);
  background-color: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-deep);
}

.tanitim-kahraman__btn--birincil:hover {
  color: var(--color-primary-deep);
}

/* Ozet satiri: dl uc hucre, ilk hucrenin sol dolgusu ve sol cizgisi yoktur. */
.tanitim-kahraman__ozet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin: 0;
  border-block-start: 1px solid var(--band-cizgi);
}

.tanitim-kahraman__ozet-oge {
  min-inline-size: 0;
  padding: 22px 28px;
  border-block-end: 1px solid var(--band-cizgi);
  border-inline-start: 1px solid var(--band-cizgi);
}

.tanitim-kahraman__ozet-oge:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.tanitim-kahraman__ozet dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-band-ink-soft);
}

.tanitim-kahraman__ozet dd {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: var(--type-heading-sm-size);
  font-weight: 500;
  color: var(--color-band-ink);
}

/* --- 3B KARTON KOLI --------------------------------------------------------
   Koli bir RESIM DEGIL bir KUTUDUR: uc yuzu ayri ayri cizilir. Karton ve
   etiket renkleri FIZIKSEL NESNEDIR ve iki temada AYNI degeri tasir (DEC-384;
   DEC-262/333 fotograf kalibi). Yuzler referansin gradyanlariyla boyanir ve
   ucu de tanitim istisna kumesindedir (DEC-389 b); yol sahnesinin kucuk kolisi
   ayni yuzleri tuketir. Kahramandaki koli 9 saniyelik suzulme animasyonuyla
   doner; donusu YALNIZ animasyon tasir (referans gibi), harness animasyonsuz
   olcer ve azaltilmis harekette ilk kare sabitlenir (asagida). */
.tanitim-kahraman__sahne {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 470px;
  min-inline-size: 0;
  perspective: 1150px;
  perspective-origin: 50% 45%;
}

/* Yere dusen golge: siyah %42 = photo-scrim (%60 siyah, temadan bagimsiz)
   %70 oraninda; `50%` yaricap ELIPS verir, hap tokeni 340x64 kutuda vermezdi. */
.tanitim-kahraman__golge {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 76%;
  inline-size: 340px;
  block-size: 64px;
  margin-inline-start: -170px;
  border-radius: 50%;
  background-image: radial-gradient(ellipse, color-mix(in srgb, var(--color-photo-scrim) 70%, transparent) 0%, transparent 70%); /* forbid-ok: DEC-384 — kolinin yere dusen golgesi; bir golge KADEMESI degil, cizilen nesnenin kendi golgesidir ve tonu photo-scrim tokeninden turer */
  animation: tanitim-koli-golge 9s ease-in-out infinite;
}

.tanitim-koli {
  position: relative;
  inline-size: 282px;
  block-size: 212px;
  transform-style: preserve-3d;
}

.tanitim-koli--kahraman {
  animation: tanitim-koli-suzul 9s ease-in-out infinite;
}

.tanitim-koli__on,
.tanitim-koli__ust,
.tanitim-koli__yan {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--color-karton-koyu) 34%, transparent);
}

.tanitim-koli__on {
  inset: 0;
  background-color: color-mix(in srgb, var(--color-karton) 92%, var(--color-karton-koyu));
  background-image: linear-gradient(160deg, color-mix(in srgb, var(--color-karton) 86%, var(--color-karton-koyu)) 0%, color-mix(in srgb, var(--color-karton) 96%, var(--color-karton-koyu)) 100%); /* forbid-ok: DEC-389 — tanitim istisna kumesi, kolinin ON yuzu: kartonun isik alan yuzeyi; iki durak da karton tokenlarindan turer */
}

.tanitim-koli__ust {
  inset-inline-start: 0;
  inset-block-start: -78px;
  inline-size: 282px;
  block-size: 78px;
  transform-origin: bottom center;
  transform: rotateX(90deg);
  border-color: color-mix(in srgb, var(--color-karton-koyu) 30%, transparent);
  background-color: var(--color-karton-acik);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--color-karton-acik) 94%, var(--color-etiket-kagit)) 0%, color-mix(in srgb, var(--color-karton) 88%, var(--color-karton-acik)) 100%); /* forbid-ok: DEC-389 — tanitim istisna kumesi, kolinin UST kapagi: en aydinlik yuz; duraklar karton ve kagit tokenlarindan turer */
}

.tanitim-koli__yan {
  inset-inline-start: 282px;
  inset-block-start: 0;
  inline-size: 78px;
  block-size: 212px;
  transform-origin: left center;
  transform: rotateY(90deg);
  display: grid;
  place-items: center;
  border-color: color-mix(in srgb, var(--color-karton-koyu) 40%, transparent);
  background-color: color-mix(in srgb, var(--color-karton) 78%, var(--color-karton-koyu));
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--color-karton) 62%, var(--color-karton-koyu)) 0%, color-mix(in srgb, var(--color-karton) 74%, var(--color-karton-koyu)) 100%); /* forbid-ok: DEC-389 — tanitim istisna kumesi, kolinin YAN yuzu: golgede kalan yuz; iki durak da karton tokenlarindan turer */
}

.tanitim-koli__yan-yazi {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: color-mix(in srgb, var(--color-karton-koyu) 78%, transparent);
  writing-mode: vertical-rl;
}

/* Bant (koli bandi): yuzde toplami 100'den kucuk color-mix REFERANSIN yazimidir
   ve alfa uretir (%86 / %80); ton ayni kalir. */
.tanitim-koli__bant {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: 32px;
  margin-inline-start: -16px;
  background-color: color-mix(in srgb, var(--color-karton-acik) 78%, var(--color-karton-koyu) 8%);
  border-inline: 1px solid color-mix(in srgb, var(--color-karton-koyu) 18%, transparent);
}

.tanitim-koli__bant--ust {
  inline-size: 26px;
  margin-inline-start: -13px;
  background-color: color-mix(in srgb, var(--color-karton-acik) 70%, var(--color-karton-koyu) 10%);
  border-inline-color: color-mix(in srgb, var(--color-karton-koyu) 16%, transparent);
}

/* Etiket kolinin UZERINE YAPISTIRILMIS bir kagittir. Golgesi tokendan gelir:
   referansin elle yazdigi tek katmanli golge (1px/2px, murekkep %12) istisna
   kumesinde DEGILDIR (DEC-389 b yalniz gradyan, shadow.deep ve hap kose);
   {shadow.etiket} temadan bagimsiz nesne golgesidir (DEC-142 istisnasi, TASK-437). */
.tanitim-koli__etiket {
  position: absolute;
  inset-inline-start: 28px;
  inset-block-start: 34px;
  inline-size: 162px;
  padding: 11px 12px;
  background-color: var(--color-etiket-kagit);
  border: 1px solid var(--color-etiket-cizgi);
  box-shadow: var(--shadow-etiket);
}

.tanitim-koli__etiket-alan {
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-etiket-murekkep-soluk);
}

/* Ozgulluk ADIYLA yukseltilir: `.tanitim p { margin: 0 }` sifirlamasi (0,1,1)
   tek sinifli kurali (0,1,0) ezer ve 3px ust bosluk hic uygulanmazdi (olculdu:
   etiket referanstan 3px kisa, TASK-431). */
.tanitim-koli__etiket > .tanitim-koli__etiket-no {
  margin-block-start: 3px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-etiket-murekkep);
}

/* Etiketin barkodu: 30px, cubuklar 2/3/5px (kunyedeki 2/4/6'dan ince). */
.tanitim-koli__etiket > .tanitim-barkod {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  block-size: 30px;
  margin-block-start: 9px;
}

.tanitim-koli__etiket .tanitim-barkod__cubuk {
  background-color: var(--color-etiket-murekkep);
}

.tanitim-koli__etiket .tanitim-barkod__cubuk--ince {
  inline-size: 2px;
}

.tanitim-koli__etiket .tanitim-barkod__cubuk--orta {
  inline-size: 3px;
}

.tanitim-koli__etiket .tanitim-barkod__cubuk--kalin {
  inline-size: 5px;
}

@keyframes tanitim-koli-suzul {
  0%, 100% { transform: translateY(6px) rotateX(-9deg) rotateY(-24deg); }
  50% { transform: translateY(-12px) rotateX(-12deg) rotateY(-14deg); }
}

@keyframes tanitim-koli-golge {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(0.88); opacity: 0.16; }
}

@keyframes tanitim-parla {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.7; }
}

/* --- ANA PANEL: TARAYICI CERCEVESI, ALTTAN KIRPILIR ------------------------
   Bolum ust dolgu tasir, alt dolgu TASIMAZ; cerceve 660px'te kesilir ve alt
   kenari 34px bolumun altina tasar, bolum onu `overflow: hidden` ile kirpar
   (referans geometrisi). Icerik gercek panelin ekran goruntusudur (DEC-385);
   pencerenin ICI referansin elle kurulmus mock'undan farklidir ve bu fark
   adiyla kayittadir, cerceve birebirdir. */
.tanitim-panel {
  padding-block: var(--space-3xl) 0;
  background-color: var(--color-paper-deep);
  overflow: hidden;
}

.tanitim-panel__ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  inline-size: 100%;
  max-inline-size: var(--layout-content-max);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.tanitim-panel__basi {
  display: grid;
  gap: 14px;
  max-inline-size: 60ch;
}

/* Bolum etiketi (mono, 0.16em, buyuk harf): cukur zeminde birinci murekkep
   DEC-230 geregi primary-deep, kagitta primary. B..E fazlari bunu tuketir. */
.tanitim-bolum__etiket {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tanitim-metin-murekkebi, var(--color-primary));
}

/* Bolum basligi referans olcegindedir (48px'e clamp'lenir; display-xl 40px
   degildir): B..E fazlari kendi bolumlerini bu sinifa tasir. */
.tanitim-bolum__baslik {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* Bolum aciklamasi (1.0625rem, ink-soft, 58ch); genis olcu bolum kendi
   sinifiyla ezer. */
.tanitim-bolum__aciklama {
  max-inline-size: 58ch;
  font-size: 1.0625rem;
  color: var(--color-ink-soft);
}

.tanitim-tarayici {
  margin: 0 0 -34px;
  min-inline-size: 0;
  max-block-size: 660px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  border-block-end: 0;
  border-start-start-radius: var(--rounded-xl);
  border-start-end-radius: var(--rounded-xl);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}

.tanitim-tarayici__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-sm-md) var(--space-md);
  border-block-end: 1px solid var(--color-line);
  background-color: var(--color-fill-soft);
}

.tanitim-tarayici__nokta {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background-color: var(--color-line-strong);
}

.tanitim-tarayici__adres {
  margin-inline-start: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink-soft);
}

/* Panel penceresi orani (DESIGN.md §Fotograf): kare 2880x1560'tan turer, kap
   nihai boyutunu bastan kaplar ve cercevenin 660px tavani alttan kirpar. */
.tanitim-gorsel--panel {
  aspect-ratio: 24 / 13;
  /* Referansin penceresi HER genislikte 660px: mock icerigi 880px alt sinirla
     yatay kayar, boyu kucultmez (TASK-437 KK-6). Kare de ayni kurala uyar:
     boy 624px altina inmez, 880px altina daralmaz, fazlasi kaydirilir. */
  min-block-size: 624px;
  min-inline-size: 880px;
}

.tanitim-tarayici__pencere {
  overflow-x: auto;
  max-inline-size: 100%;
}

/* Tanitim kaplari her genislikte referansin 24px yan dolgusunu tasir; ortak
   ilkel dar ekranda 16px'e iner ve 03/05/06 satir kirilmalarini kaydiriyordu
   (olculdu: 390px'te -8/+16, TASK-437 KK-6). */
.tanitim .layout-container {
  padding-inline: var(--space-lg);
}

/* IKI TEMALI KARE (TASK-437; DEC-391): etkin temanin karesi CSS ile secilir —
   betiksiz sistem temasi, betikle tercih (data-theme, DEC-147). Gizli kare
   tembel yuklendigi icin inmez; e2e yalniz etkin karenin indigini olcer. */
.tanitim-gorsel--kare-koyu {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tanitim-gorsel--kare-acik {
    display: none;
  }

  :root:not([data-theme="light"]) .tanitim-gorsel--kare-koyu {
    display: block;
  }
}

:root[data-theme="dark"] .tanitim-gorsel--kare-acik {
  display: none;
}

:root[data-theme="dark"] .tanitim-gorsel--kare-koyu {
  display: block;
}

/* AZALTILMIS HAREKET — port blogunun SONUNDA durur, cunku kaskad: yukaridaki
   genel `prefers-reduced-motion` blogu bu kurallardan ONCE gelir ve ayni
   ozgullukteki animasyon bildirimini ezemezdi (olculdu, TASK-431 KK-4).
   Kahramanin sonsuz animasyonlari DURUR; koli hareketsizken de bir KUTU olarak
   durur (suzulmenin ilk karesi), isima ve golge tam opaklikta kalir. */
@media (prefers-reduced-motion: reduce) {
  .tanitim-kahraman__isima,
  .tanitim-kahraman__golge,
  .tanitim-koli--kahraman {
    animation: none;
  }

  .tanitim-koli--kahraman {
    transform: translateY(6px) rotateX(-9deg) rotateY(-24deg);
  }
}

/* ==========================================================================
   BIREBIR PORT — FAZ B: AKIS, NE YAPAR, TEK AKIS (TASK-432; DEC-388, DEC-389).
   FAZ A'nin cevirme kurali aynen: renk, golge ve hap kose TOKENDAN; tokeni
   olmayan olcu (16px kose, 6/14/20/28px bosluk, 0.8125/1.0625rem yazi, sema
   geometrisi) referans GEOMETRISIDIR ve literal yazilir. Ortak port ilkelleri
   (`tanitim-bolum__ic/etiket/baslik/aciklama`) FAZ A'nin panel kurallarindan
   genellestirildi; C..E fazlari da onlari tuketir. */

/* --- ORTAK: bolum ici izgara (referans: gap 40px) ------------------------- */
.tanitim-bolum__ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

/* --- AKIS: UC ADIM KARTI, IKINCISI ETKIN -----------------------------------
   Bolum cukur zeminde ve YALNIZ alt cetvel tasir (ust komsusu ana panel ayni
   zemindedir); etiket DEC-230 geregi primary-deep. Referansin etkin noktaya
   `style-after` ile yazdigi halkayi hicbir calisma zamani cizmez (paketin
   support.js'i de tanimaz); port CIZILEN referansi izler, halka yoktur —
   bulunulan adim metinle, 2px cerceveyle ve birinci murekkeple soylenir. */
.tanitim-akis {
  --tanitim-metin-murekkebi: var(--color-primary-deep);

  background-color: var(--color-paper-deep);
  border-block-end: 1px solid var(--color-line);
}

.tanitim-akis__basi,
.tanitim-mimari__basi {
  display: grid;
  gap: 14px;
  max-inline-size: 64ch;
}

.tanitim-mimari__basi {
  max-inline-size: 60ch;
}

.tanitim-akis__aciklama {
  max-inline-size: 62ch;
}

.tanitim-adimlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
  min-inline-size: 0;
}

.tanitim-adimlar__adim {
  display: grid;
  gap: var(--space-md);
  align-content: start;
  min-inline-size: 0;
  padding: var(--space-lg);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.tanitim-adimlar__adim--etkin {
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-lifted);
}

.tanitim-adimlar__adim--sirada {
  border: 1px dashed var(--color-line-strong);
  box-shadow: none;
}

.tanitim-adimlar__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm-md);
}

.tanitim-adimlar__sira,
.tanitim-adimlar__durum,
.tanitim-adimlar__metin,
.tanitim-adimlar__adim--sirada .tanitim-adimlar__ad {
  color: var(--color-ink-soft);
}

.tanitim-adimlar__adim--etkin .tanitim-adimlar__sira,
.tanitim-adimlar__adim--etkin .tanitim-adimlar__durum {
  color: var(--color-primary);
}

.tanitim-adimlar__adim--tamam .tanitim-adimlar__durum {
  color: var(--color-success);
}

.tanitim-adimlar__nokta {
  position: relative;
  inline-size: 14px;
  block-size: 14px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  background-color: var(--color-primary);
}

.tanitim-adimlar__adim--sirada .tanitim-adimlar__nokta {
  border-color: var(--color-line-strong);
  background-color: var(--color-paper-deep);
}

/* ETKIN ADIMIN HALKASI — referansin style-after niyeti (DEC-391 c): 7px
   disarida 2px primary halka; nefes hareket serbestken (port blogu sonu). */
.tanitim-adimlar__adim--etkin .tanitim-adimlar__nokta::after {
  content: '';
  position: absolute;
  inset: -7px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
}

.tanitim-adimlar__govde {
  display: grid;
  gap: 6px;
}

/* h3 taban sifirlamada yoktur (h1/h2/p/ol); referans hepsini sifirlar. */
.tanitim-adimlar__ad {
  margin: 0;
}

.tanitim-adimlar__durum {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Bagli firma cumlesi kayittan turer (DEC-035/386); cip violet ailesinin
   zemin ve murekkebini tasir. */
.tanitim-akis__not {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
}

.tanitim-akis__firma {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 5px var(--space-sm-md);
  border-radius: var(--rounded-full);
  background-color: var(--color-violet-surface);
  color: var(--color-violet-ink);
  font-weight: 600;
}

/* --- NE YAPAR: ALTI ALAN TEK PANELDE ---------------------------------------
   Bas hucre izgaranin tum kolonlarini alir ve fill-soft zeminde durur; alanlar
   ust cetvel, ilk iki kolon sag cetvel tasir (`--cetvelli`, referans gibi
   alan basina). Etiket kagit bolumdedir: DEC-230 baglamaz, primary. */
.tanitim-yetenek {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  min-inline-size: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--rounded-xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
}

.tanitim-yetenek__basi {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  padding: clamp(28px, 4vw, 48px);
  background-color: var(--color-fill-soft);
}

.tanitim-yetenek__baslik {
  max-inline-size: 38ch;
}

.tanitim-yetenek__alan {
  display: grid;
  gap: var(--space-sm-md);
  align-content: start;
  min-inline-size: 0;
  padding: 28px;
  border-block-start: 1px solid var(--color-line);
}

.tanitim-yetenek__alan--cetvelli {
  border-inline-end: 1px solid var(--color-line);
}

.tanitim-yetenek__ikon {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 8px;
  background-color: var(--color-violet-surface);
  color: var(--color-violet-ink);
}

.tanitim-yetenek__etiket {
  color: var(--color-ink-soft);
}

.tanitim-yetenek__deger {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

/* --- TEK AKIS: EGIMLI ZEMIN DUZLEMI VE BIRLESME SEMASI ---------------------
   Kart 1100px perspektifli bir sahnedir; zemin izgarasi ve sema ayni duzlemde
   (rotateX 60deg, kok merkez %86) durur ve ustten alfa maskesiyle solar.
   Izgara ile iki maske tanitim istisna kumesindedir (DEC-389 b; DESIGN.md
   sayimi 13'ten 17'ye); maske duraklarindan yalniz ALFA okunur (transparent
   -> opak token), onekli maske yazilmaz (oneksiz `mask-image` her hedefte). Sema SVG'si viewBox 0 0 400 300, referans yollariyla birebir;
   paketler SMIL (`animateMotion`) ile yurur, harness onlari sifirinci
   saniyede dondurarak olcer. */
.tanitim-birlesme {
  position: relative;
  min-inline-size: 0;
  block-size: clamp(340px, 44vw, 440px);
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--rounded-xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-raised);
  perspective: 1100px;
  perspective-origin: 50% 34%;
}

.tanitim-birlesme__sema {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: -6%;
  transform-origin: center 86%;
  transform: rotateX(60deg);
}

.tanitim-birlesme__sema {
  inline-size: 860px;
  block-size: 560px;
  margin-inline-start: -430px;
  mask-image: linear-gradient(to bottom, transparent 2%, var(--color-ink) 34%); /* forbid-ok: DEC-389 — giren hatlarin ufukta solmasi; alfa maskesi */
}

.tanitim-birlesme__cizim {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* Halka viewBox biriminde kendi merkezinden nefes alir; taban opakligi SVG
   niteligindedir (0.3) ve harness animasyonsuz o degeri olcer. */
.tanitim-birlesme__halka {
  transform-origin: 200px 170px;
}

/* PAKETLER YALNIZ HAREKET SERBESTKEN GORUNUR (DESIGN.md §Motion yazilis yonu):
   SMIL'i CSS durduramaz; azaltilmis kipte yuruyen kutu birakmak yerine kutular
   hic cizilmez. Bilgi tasimazlar (sema aria-hidden); hatlar, dugum ve
   etiketler durur. Kural dustugunde de sayfa hareketsiz kalir. */
.tanitim-birlesme__paketler {
  visibility: hidden;
}

.tanitim-mimari__notlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  min-inline-size: 0;
  border-block-start: 1px solid var(--color-line);
}

.tanitim-mimari__not {
  min-inline-size: 0;
  padding: 20px var(--space-lg);
  border-block-end: 1px solid var(--color-line);
  border-inline-start: 1px solid var(--color-line);
  color: var(--color-ink-soft);
}

.tanitim-mimari__not:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

@keyframes tanitim-nefes {
  from {
    opacity: 0.3;
    transform: scale(0.86);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .tanitim-birlesme__halka {
    animation: tanitim-nefes 1800ms var(--motion-ease) infinite alternate;
  }

  .tanitim-adimlar__adim--etkin .tanitim-adimlar__nokta::after {
    animation: tanitim-nefes 1600ms var(--motion-ease) infinite alternate;
  }

  .tanitim-birlesme__paketler {
    visibility: visible;
  }
}

/* ==========================================================================
   BIREBIR PORT — FAZ D: KARGO FIRMALARI, UCRET VE BAKIYE, ORNEK KUNYE,
   GUVENLIK (TASK-434; DEC-388, DEC-389, DEC-393, DEC-394, DEC-399).
   Cevirme kurali A..C ile ayni: renk, golge ve hap kose TOKENDAN; tokeni
   olmayan olcu (14/20/28/36px bosluk, 16/10/8/6px kose, 1.3125rem firma adi,
   180x64 logo alani, 34x8 ilerleme dilimi) referans GEOMETRISIDIR ve literal
   yazilir. Dort bolumun eski kurallari bu blogun icine TASINDI, kopyalanmadi:
   dosya kucultulmeden sunulur ve ikizlenmis kural gercek bayttir. */

/* --- ORTAK: referansin bolum kabi -----------------------------------------
   `layout-container` ile ayni, TEK farkla: ilkel dar ekranda 24 -> 16px
   daraltir, referans daraltmaz (gerekce 12-ux.md SCR-042). */
.tanitim-bolum__kap {
  inline-size: 100%;
  max-inline-size: var(--layout-content-max);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

/* --- KARGO FIRMALARI: ALTI KART ------------------------------------------
   ICERIK kayittan (TanitimController), BICIM referanstan. YAKINDA kartlari
   referansin ADSIZ kartinin kalibini alir — DEC-394 (e), adlandirilmis TEK
   bilincli istisna; tarifi 12-ux.md SCR-042'de. */
.tanitim-firmalar__ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
}

.tanitim-firmalar__basi {
  display: grid;
  gap: 14px;
  max-inline-size: 60ch;
}

.tanitim-firmalar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-lg);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tanitim-firmalar__kart {
  display: grid;
  gap: 20px;
  justify-items: center;
  min-inline-size: 0;
  padding: 36px 28px;
  border: 1px solid var(--color-line);
  border-radius: var(--rounded-xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-raised);
  text-align: center;
}

.tanitim-firmalar__kart--yakinda,
.tanitim-firmalar__kart--bos {
  border: 1px dashed var(--color-line-strong);
  background-color: transparent;
  box-shadow: none;
}

.tanitim-firmalar__gorsel {
  inline-size: 100%;
  max-inline-size: 180px;
  block-size: 64px;
}

.tanitim-firmalar__gorsel--ikon {
  display: grid;
  place-items: center;
  color: var(--color-line-strong);
}

/* LOGO YER TUTUCUSU — referansin `<image-slot>` cizimiyle BIREBIR. Sistem
   yazi yuzu bilinclidir: yer tutucu tipografi olceginin parcasi degil, gecici
   bir olcu isaretidir ve marka izni gelince <img> ile degisir (DEC-389 c). */
.tanitim-firmalar__yer-tutucu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 96px;
  min-block-size: 36px;
  padding: 6px 10px;
  border: 1px dashed currentcolor;
  opacity: 0.55;
  font: 500 11px system-ui;
}

.tanitim-firmalar__govde {
  display: grid;
  gap: var(--space-sm);
  justify-items: center;
}

.tanitim-firmalar__ad {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 600;
}

.tanitim-firmalar__ad--sessiz {
  color: var(--color-ink-soft);
}

.tanitim-firmalar__rozet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--space-sm-md);
  border-radius: var(--rounded-full);
  font-family: var(--type-label-xs-family);
  font-size: var(--type-label-xs-size);
  font-weight: var(--type-label-xs-weight);
  letter-spacing: var(--type-label-xs-letter-spacing);
  text-transform: var(--type-label-xs-transform);
}

.tanitim-firmalar__rozet--anlasma {
  background-color: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
}

.tanitim-firmalar__rozet--kendi {
  background-color: var(--color-violet-surface);
  color: var(--color-violet-ink);
}

/* YAKINDA rozeti bir DURUM degildir: notr yuzey, notr murekkep. Kalip aktif
   rozetlerle AYNI ki alti kartin boyu esit kalsin. */
.tanitim-firmalar__rozet--yakinda {
  background-color: var(--color-fill-soft);
  color: var(--color-ink-soft);
}

.tanitim-firmalar__not {
  font-size: var(--type-body-sm-size);
  color: var(--color-ink-soft);
}

/* --- UCRET: BAKIYE DEFTERI ----------------------------------------------- */
.tanitim-ucret__ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
}

.tanitim-ucret__basi {
  display: grid;
  gap: 14px;
  max-inline-size: 64ch;
}

.tanitim-ucret__baslik {
  max-inline-size: 34ch;
}

.tanitim-ucret__aciklama {
  max-inline-size: 60ch;
}

.tanitim-defter {
  min-inline-size: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--rounded-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
}

.tanitim-defter__basi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm-md);
  padding: var(--space-md) var(--space-lg);
  border-block-end: 1px solid var(--color-line);
  background-color: var(--color-fill-soft);
}

.tanitim-defter__ad,
.tanitim-defter__damga,
.tanitim-defter__baslik {
  font-family: var(--type-label-xs-family);
  font-size: var(--type-label-xs-size);
  font-weight: var(--type-label-xs-weight);
  letter-spacing: var(--type-label-xs-letter-spacing);
  text-transform: var(--type-label-xs-transform);
  color: var(--color-ink-soft);
}

/* "ORNEK" damgasi bir DURUM degildir: notr murekkep, dolgusuz, golgesiz —
   damga kagida basilir, ustunde durmaz. */
.tanitim-defter__damga {
  display: inline-block;
  padding: 2px var(--space-sm);
  border: 1px solid var(--color-ink-soft);
  border-radius: var(--rounded-sm);
}

.tanitim-defter__kaydirma {
  max-inline-size: 100%;
  overflow-x: auto;
}

.tanitim-defter__tablo {
  inline-size: 100%;
  border-collapse: collapse;
}

/* Gorsel olarak gizli, erisilebilirlik agacinda DURUR: defterin ne oldugunu
   soyleyen tek cumle odur. */
.tanitim-defter__caption {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.tanitim-defter__baslik {
  padding: 10px var(--space-lg);
  border-block-end: 1px solid var(--color-line-strong);
  background-color: var(--color-fill-soft);
  text-align: start;
  white-space: nowrap;
}

.tanitim-defter__baslik--sayi {
  text-align: end;
}

.tanitim-defter__hucre {
  padding: 14px var(--space-lg);
  border-block-end: 1px solid var(--color-line);
}

.tanitim-defter__hucre--sayi {
  font-family: var(--type-mono-md-family);
  font-size: var(--type-mono-md-size);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.tanitim-defter__hucre--artan {
  color: var(--color-success);
}

.tanitim-defter__hucre--vurgu {
  font-weight: 500;
  color: var(--color-primary);
}

/* Son satirin alt cetveli YOKTUR: defterin kendi kenari zaten oradadir. */
.tanitim-defter__satir--son .tanitim-defter__hucre {
  border-block-end: 0;
}

/* DIPNOT — uc madde, aralarinda cetvel; kartlasmaz. */
.tanitim-dipnot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 0;
  min-inline-size: 0;
  border-block-start: 1px solid var(--color-line);
}

.tanitim-dipnot__madde {
  min-inline-size: 0;
  padding: 22px 28px;
  border-block-end: 1px solid var(--color-line);
  border-inline-start: 1px solid var(--color-line);
  color: var(--color-ink-soft);
}

.tanitim-dipnot__madde:first-child {
  padding-inline: 0 28px;
  border-inline-start: 0;
}

/* --- ORNEK KUNYE: VITRIN VE EVRAK ----------------------------------------
   DESIGN.md §Fotograf: `__kap` kirpar, `__gorsel` kaplar, perde icerigin
   ATASIDIR (kardes perde kontrast sondasina gorunmez) ve DUZ bir ortudur.
   Evrak kabin ALT kenarindan girer; negatif bosluk kompozisyonun kendisidir. */
.tanitim-kunye__ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.tanitim-vitrin {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* `max-inline-size` REFERANSTA YOKTUR ve OLCUMLE eklendi (TASK-434): oran ile
   asgari boy IKI YONLU bir kisittir — 360px goruntude 16/9 oran 175px boy
   verir, asgari 300px devreye girer ve GENISLIK 533px'e buyur; govde yatay
   kayar. DESIGN.md §Layout'un "govde asla yatay kaymaz" kurali DEC-388'in
   koruduğu sert kisitlardandir, dolayisiyla kap kendi kabina kelepcelenir.
   1200px ve ustunde HICBIR SEY degismez: orada genislik zaten %100'un
   altindadir ve oran baglar. */
.tanitim-vitrin__kap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-block-size: 300px;
  max-inline-size: 100%;
  border-radius: var(--rounded-xl);
}

.tanitim-vitrin__gorsel {
  position: absolute;
  inset: 0;
  z-index: 0;
  aspect-ratio: auto;
  border-radius: var(--rounded-none);
}

.tanitim-vitrin__perde {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  block-size: 100%;
  padding: clamp(24px, 4vw, 56px) var(--space-lg);
  background: var(--color-photo-scrim);
  color: var(--color-on-photo);
}

/* MUREKKEP YUZEYE BAGLANIR, SINIF LISTESINE DEGIL (olculdu: listede olmayan
   etiket perde ustunde ink-soft kaldi, e2e 1.01). */
.tanitim-vitrin__perde .tanitim-bolum__etiket,
.tanitim-vitrin__perde .tanitim-bolum__aciklama {
  color: inherit;
}

.tanitim-vitrin__perde .tanitim-bolum__etiket {
  opacity: 0.86;
}

.tanitim-vitrin__belge {
  display: grid;
  gap: 14px;
  inline-size: 100%;
  max-inline-size: min(100%, var(--layout-content-max));
  margin-inline: auto;
}

.tanitim-kunye__baslik {
  max-inline-size: 34ch;
}

/* EVRAK ARTEFAKTI — gonderi detayi bir form degil BIR KAYITTIR (DESIGN.md
   §Components): masthead, cetvelli izgara, perforasyon, barkod. */
.tanitim-belge {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 28px;
  min-inline-size: 0;
  margin: calc(-1 * clamp(195px, 29vw, 360px)) clamp(16px, 3vw, 40px) 0;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--color-line);
  border-radius: var(--rounded-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-deep);
}

/* MASTHEAD — belgenin adi. Altindaki 2px cetvel YAPISALDIR: ince kural
   veriyi boler, kalin kural belgeyi tanimlar. */
.tanitim-belge__masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-block-end: var(--space-md);
  border-block-end: 2px solid var(--color-line-strong);
}

.tanitim-belge__kimlik {
  display: grid;
  gap: 6px;
  min-inline-size: 0;
}

/* Belge numarasi SECILEBILIR: bu ekranda yapilacak en sik is onu bir yere
   yapistirmaktir. */
.tanitim-belge__kimlik-deger {
  font-family: var(--type-mono-lg-family);
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  letter-spacing: var(--type-mono-lg-letter-spacing);
  overflow-wrap: anywhere;
  user-select: all;
}

.tanitim-belge__durum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm-md);
}

.tanitim-belge__rozet {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px var(--space-sm-md);
  border-radius: var(--rounded-full);
  background-color: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
  font-size: var(--type-body-sm-size);
  font-weight: 600;
}

.tanitim-belge__firma {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
}

.tanitim-damga {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--color-primary);
  border-radius: var(--rounded-sm);
  color: var(--color-primary);
  font-family: var(--type-label-xs-family);
  font-size: var(--type-label-xs-size);
  font-weight: var(--type-label-xs-weight);
  letter-spacing: var(--type-label-xs-letter-spacing);
  text-transform: var(--type-label-xs-transform);
}

.tanitim-damga--sessiz {
  border-color: var(--color-ink-soft);
  color: var(--color-ink-soft);
}

/* SEVK HATTI — referansin kalibi: dort cubuk, gecmis/bulunulan DOLU, gelecek
   SOLUK, bulunulan ayrica halkali. Durum yalniz renkle degil METINLE de
   soylenir. Referansta bu bolumde animasyon YOKTUR ve port da tasimaz
   (DEC-399 b); urunun kendi hatti TransitSpine.css'te ve etkilenmez. */
.tanitim-hat {
  min-inline-size: 0;
}

.tanitim-hat__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tanitim-hat__durak {
  display: grid;
  gap: var(--space-sm);
  min-inline-size: 0;
}

.tanitim-hat__cubuk {
  position: relative;
  display: block;
  block-size: 4px;
  border-radius: 2px;
  background-color: var(--color-primary);
}

/* Bulunulan duragin halkasi: referansin 2px yayilimli golgesi, golge tokeni
   disina cikmadan `::after` kenariyla (DEC-392 kalibi). */
.tanitim-hat__durak--simdi .tanitim-hat__cubuk::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid color-mix(in srgb, var(--color-primary) 26%, transparent);
  border-radius: 4px;
}

.tanitim-hat__durak--gelecek .tanitim-hat__cubuk {
  background-color: var(--color-fill-soft);
}

.tanitim-hat__etiket {
  font-family: var(--type-label-xs-family);
  font-size: var(--type-label-xs-size);
  font-weight: var(--type-label-xs-weight);
  letter-spacing: var(--type-label-xs-letter-spacing);
  text-transform: var(--type-label-xs-transform);
}

.tanitim-hat__durum {
  font-size: var(--type-body-sm-size);
  color: var(--color-ink-soft);
}

.tanitim-hat__durak--simdi .tanitim-hat__etiket,
.tanitim-hat__durak--simdi .tanitim-hat__durum {
  color: var(--color-primary);
}

.tanitim-hat__durak--gelecek .tanitim-hat__etiket,
.tanitim-hat__durak--gelecek .tanitim-hat__durum {
  color: var(--color-ink-soft);
}

/* CETVELLI ALAN IZGARASI — konsimento alanlari; genislige `minmax()` ile
   uyar, medya sorgusu kullanmaz. */
.tanitim-belge__izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0;
  min-inline-size: 0;
  border-block-start: 1px solid var(--color-line);
}

.tanitim-alan {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  min-inline-size: 0;
  padding: 14px var(--space-md) 14px 0;
  border-block-end: 1px solid var(--color-line);
}

.tanitim-alan__etiket,
.tanitim-belge__kimlik-etiket,
.tanitim-barkod__etiket,
.tanitim-ilerleme__etiket {
  font-family: var(--type-label-xs-family);
  font-size: var(--type-label-xs-size);
  font-weight: var(--type-label-xs-weight);
  letter-spacing: var(--type-label-xs-letter-spacing);
  text-transform: var(--type-label-xs-transform);
  color: var(--color-ink-soft);
}

.tanitim-alan__deger {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.tanitim-alan__deger--sayi,
.tanitim-ilerleme__deger {
  font-family: var(--type-mono-md-family);
  font-size: var(--type-mono-md-size);
}

/* YOL ILERLEMESI — bes dilim, ucu dolu; sayi da YAZAR (dilimler tek basina
   bir yuzdeyi soyleyemez). */
.tanitim-ilerleme {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.tanitim-ilerleme__cizim {
  display: flex;
  gap: var(--space-xs);
}

.tanitim-ilerleme__dilim {
  inline-size: 34px;
  block-size: 8px;
  border-radius: 4px;
  background-color: var(--color-fill-soft);
}

.tanitim-ilerleme__dilim--dolu {
  background-color: var(--color-primary);
}

.tanitim-ilerleme__deger {
  font-weight: 500;
}

/* PERFORASYON — koparma cizgisi; matbaa aygitidir, sus degil. */
.tanitim-perforasyon {
  block-size: 0;
  border-block-start: 2px dotted var(--color-line-strong);
}

.tanitim-belge__etek {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  min-inline-size: 0;
}

/* ETIKET INDIRME KALIBI — referansla ayni piksel, ama BIR EYLEM DEGIL
   (DEC-400): blok ORNEK damgali bir kunyenin RESMIDIR ve olu bir baglanti
   eylem vaadi olurdu. `<span>`dir: odaklanamaz, tiklanamaz. */
.tanitim-belge__eylem {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  padding: var(--space-sm-md) 20px;
  border: 1px solid var(--color-line-strong);
  border-radius: 10px;
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* --- GUVENLIK: UC KART --------------------------------------------------- */
.tanitim-guvenlik__ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

.tanitim-guvenlik__basi {
  display: grid;
  gap: 14px;
  max-inline-size: 64ch;
}

.tanitim-kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tanitim-kartlar__kart {
  display: grid;
  gap: 14px;
  align-content: start;
  min-inline-size: 0;
  padding: var(--space-lg);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.tanitim-kartlar__ikon {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 8px;
  background-color: var(--color-violet-surface);
  color: var(--color-violet-ink);
}

/* h3 taban sifirlamada yoktur (h1/h2/p/ol); referans hepsini sifirlar. */
.tanitim-kartlar__baslik {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.3;
}

.tanitim-kartlar__metin {
  color: var(--color-ink-soft);
}

/* ==========================================================================
   BIREBIR PORT — FAZ E: GELISTIRICI, IS ORTAGI, KAPANIS, ALT BILGI
   (TASK-435; DEC-388, DEC-389, DEC-391, DEC-401).
   Cevirme kurali A..D ile ayni: renk, golge ve hap kose TOKENDAN; tokeni
   olmayan olcu (9/11/16/18/22/28/34/40/56px bosluk ve boy, 4/11/12/16px kose,
   0.5625/0.625/0.8125/0.9375/1.0625rem yazi, %86/%64/%74 iskelet genisligi)
   referans GEOMETRISIDIR ve literal yazilir. Dort parcanin eski kurallari bu
   blogun icine TASINMADI, DUSTU: konsol, vektorel cizim ve dort kurallik sema
   referansin kompozisyonunda yoktur (DEC-401 b, c). */

/* --- ORTAK: YALNIZ UST KENARLI CUKUR ZEMIN --------------------------------
   Referansin 09'u iki kenarlidir ama 11 ve 12 YALNIZ ust kenar tasir. Ikisi
   ust uste geldigi icin fazladan her kenar 1px'lik GERCEK bir boy farkidir
   (olculdu: `--cukur` ile bolum-11 referanstan tam 1px uzundu). */
.tanitim-bolum--cukur-ust {
  background-color: var(--color-paper-deep);
  border-block-start: 1px solid var(--color-line);
}

/* --- GELISTIRICI: IKI KOLON, METIN + UC KARTI ----------------------------- */
.tanitim-gelistirici {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 56px;
  align-items: start;
}

.tanitim-gelistirici__metin {
  display: grid;
  gap: 18px;
  align-content: start;
  min-inline-size: 0;
}

.tanitim-gelistirici__aciklama {
  max-inline-size: 56ch;
}

/* Referansin harfi bir DUGME degil ALTI CIZILI baglantidir; satir ici oldugu
   icin WCAG 2.5.8'in kendi istisnasina girer (yuzey taramasi onu sayar).
   Referansin GLOBAL `a` kurali (primary + 3px pay) burada ve alt bilgide
   bilesen kuralina cevrilir; cukur zeminde murekkep DEC-230 geregi bir
   kademe koyulasir, dolayisiyla hover orada zaten varilan renktir. */
.tanitim-gelistirici__bag,
.tanitim-alt__bag {
  color: var(--tanitim-metin-murekkebi, var(--color-primary));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tanitim-gelistirici__bag:hover,
.tanitim-alt__bag:hover {
  color: var(--color-primary-deep);
}

.tanitim-gelistirici__bag {
  font-weight: 600;
}

/* UC KARTI — panel kademesi: {shadow.raised}; lifted "secili/canli" demektir
   (DESIGN.md §Elevation & Depth). */
.tanitim-uclar {
  min-inline-size: 0;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.tanitim-uclar__basi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm-md);
  padding: 14px 20px;
  border-block-end: 1px solid var(--color-line);
  background-color: var(--color-fill-soft);
}

.tanitim-uclar__etiket {
  font-family: var(--type-label-xs-family);
  font-size: var(--type-label-xs-size);
  font-weight: var(--type-label-xs-weight);
  letter-spacing: var(--type-label-xs-letter-spacing);
  text-transform: var(--type-label-xs-transform);
  color: var(--color-ink-soft);
}

.tanitim-uclar__kume {
  display: grid;
}

.tanitim-uclar__satir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm-md);
  min-inline-size: 0;
  padding: var(--space-md) 20px;
  border-block-end: 1px solid var(--color-line);
}

/* METOT ADI RENKLE DEGIL METINLE OKUNUR (DESIGN.md: hue dekoratiftir). Renk
   yalnizca zaten okunan seyi pekistirir — "GET" sozcugu kaldirilirsa hicbir
   bilgi renkte KALMAZ. */
.tanitim-uclar__metot {
  flex: none;
  padding: 3px var(--space-sm);
  border-radius: var(--rounded-sm);
  background-color: var(--color-violet-chip);
  color: var(--color-violet-ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
}

.tanitim-uclar__metot--yazan {
  background-color: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--tanitim-metin-murekkebi, var(--color-primary));
}

.tanitim-uclar__yol {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: var(--type-mono-md-size);
  color: var(--color-ink);
}

/* DOGRULAMA BLOGU referanstan BIR SATIR uzundur (DEC-401 b): referans yalniz
   imza basligini gosterir, canli kart olay basligini da gosterir. */
.tanitim-uclar__dogrulama {
  display: grid;
  gap: 6px;
  min-inline-size: 0;
  padding: var(--space-md) 20px;
  background-color: var(--color-fill-soft);
}

.tanitim-uclar__deger {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: var(--type-mono-md-size);
  color: var(--color-ink);
}

/* --- IS ORTAGI: PENCERE + NUMARALI ADIMLAR + CAGRI ------------------------ */
.tanitim-ortak {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
}

.tanitim-ortak__basi {
  display: grid;
  gap: 14px;
  max-inline-size: 64ch;
}

.tanitim-ortak__aciklama {
  max-inline-size: 62ch;
}

.tanitim-ortak__kume {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--space-xl);
  align-items: start;
  min-inline-size: 0;
}

.tanitim-ortak__urun {
  display: grid;
  gap: var(--space-md);
  min-inline-size: 0;
}

/* PENCERE bir SAHNEDIR: bilgi TASIMAZ, `aria-hidden` tasir, renkleri
   tokendan okur (DESIGN.md sahne kurali). */
.tanitim-pencere {
  min-inline-size: 0;
  overflow: hidden;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--rounded-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lifted);
}

.tanitim-pencere__basi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-sm-md) var(--space-md);
  border-block-end: 1px solid var(--color-line);
}

.tanitim-pencere__benek {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
  border-radius: var(--rounded-full);
  background-color: var(--color-line-strong);
  opacity: 0.5;
}

.tanitim-pencere__ad,
.tanitim-pencere__panel-ad {
  font-family: var(--type-label-xs-family);
  font-size: var(--type-mono-xs-size);
  font-weight: var(--type-label-xs-weight);
  letter-spacing: var(--type-label-xs-letter-spacing);
  text-transform: var(--type-label-xs-transform);
}

.tanitim-pencere__ad {
  margin-inline-start: 6px;
  color: var(--color-ink-soft);
}

.tanitim-pencere__govde {
  padding: 20px;
}

/* GOMULU SEVKORA YUZEYI — bolumun cumlesinin ta kendisi: kenari primary'dir
   ve kalinligi (1.5px) referans geometrisidir. */
.tanitim-pencere__panel {
  overflow: hidden;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--rounded-md);
  background-color: var(--color-fill-soft);
}

.tanitim-pencere__panel-basi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-block-end: 1px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
}

.tanitim-pencere__panel-ad {
  color: var(--tanitim-metin-murekkebi, var(--color-primary));
}

.tanitim-pencere__panel-not {
  font-family: var(--font-mono);
  font-size: var(--type-label-xs-size);
  color: var(--color-ink-soft);
}

.tanitim-pencere__alan {
  display: grid;
  gap: 9px;
  padding: var(--space-md) 14px;
}

.tanitim-pencere__cubuk {
  block-size: var(--space-sm);
  border-radius: var(--space-xs);
  background-color: var(--color-line);
}

.tanitim-pencere__cubuk--bir {
  inline-size: 86%;
}

.tanitim-pencere__cubuk--iki {
  inline-size: 64%;
}

.tanitim-pencere__cubuk--uc {
  inline-size: 74%;
}

.tanitim-pencere__eylemler {
  display: flex;
  gap: 10px;
  padding-block-start: 6px;
}

.tanitim-pencere__hap {
  inline-size: 88px;
  block-size: 22px;
  border-radius: 11px;
  background-color: var(--color-primary);
}

.tanitim-pencere__hap--ikinci {
  inline-size: 64px;
  background-color: color-mix(in srgb, var(--color-primary) 34%, transparent);
}

.tanitim-pencere__imza {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: 9px 14px;
  border-block-start: 1px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
  background-color: var(--color-surface);
}

.tanitim-pencere__imza-on {
  font-family: var(--type-label-xs-family);
  font-size: 0.5625rem;
  font-weight: var(--type-label-xs-weight);
  letter-spacing: var(--type-label-xs-letter-spacing);
  text-transform: var(--type-label-xs-transform);
  color: var(--color-ink-soft);
}

.tanitim-pencere__imza-ad {
  font-family: var(--font-display);
  font-size: var(--type-label-xs-size);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--tanitim-metin-murekkebi, var(--color-primary));
}

.tanitim-ortak__dipnot {
  font-size: var(--type-body-sm-size);
  color: var(--color-ink-soft);
}

/* NUMARALI ADIMLAR — referansin harfi (DEC-401 c): DUGUM DIKEY OMURGANIN
   USTUNDE oturur. Yatay sap ve cizimden omurgaya bag YOKTUR; omurga her
   satirin KENDI parcasidir, ilk satir kendi dugumunden asagi baslar ve son
   satir dugumunde biter — boylece omurga uc dugumlerin DISINA tasmaz. */
.tanitim-kademe {
  display: grid;
  min-inline-size: 0;
}

.tanitim-kademe__adim {
  position: relative;
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  min-inline-size: 0;
  padding-block-end: 28px;
  padding-inline-start: 34px;
}

.tanitim-kademe__adim:last-child {
  padding-block-end: 0;
}

.tanitim-kademe__adim::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 5px;
  inline-size: 1px;
  background-color: var(--color-line-strong);
}

.tanitim-kademe__adim:first-child::before {
  inset-block-start: 9px;
}

.tanitim-kademe__adim:last-child::before {
  inset-block-end: auto;
  block-size: 9px;
}

.tanitim-kademe__adim::after {
  content: '';
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-start: 0;
  inline-size: 11px;
  block-size: 11px;
  border-radius: var(--rounded-full);
  background-color: var(--color-primary);
}

.tanitim-kademe__basi {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.tanitim-kademe__no {
  font-family: var(--font-mono);
  font-size: var(--type-body-sm-size);
  color: var(--tanitim-metin-murekkebi, var(--color-primary));
}

/* h3 taban sifirlamada yoktur (h1/h2/p/ol); referans hepsini sifirlar. */
.tanitim-kademe__ad {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}

.tanitim-kademe__aciklama {
  max-inline-size: 52ch;
  color: var(--color-ink-soft);
}

.tanitim-ortak__cta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-lg);
  align-items: center;
  padding: 28px;
  border: 1px solid var(--color-line);
  border-radius: var(--rounded-lg);
  background-color: var(--color-surface);
}

.tanitim-ortak__cta-metin {
  display: grid;
  gap: 6px;
  min-inline-size: 0;
}

.tanitim-ortak__cta-etiket {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.tanitim-ortak__cta-aciklama {
  max-inline-size: 52ch;
  color: var(--color-ink);
}

/* --- ORTAK: REFERANSIN EYLEM DUGMESI --------------------------------------
   Ust cubugun `tanitim-bant__btn`i DEGILDIR: referans bu uc bolumde 48px
   yuksek, BUYUK HARFSIZ ve govde olcegine yakin (0.9375rem) bir dugme cizer.
   Kose ve yan dolgu bolume gore degistigi icin degiskenden okunur. */
.tanitim-eylem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  padding: var(--space-sm-md) var(--eylem-yan, var(--space-lg));
  border: 1px solid transparent;
  border-radius: var(--eylem-kose, var(--rounded-md));
  font-family: var(--font-body);
  font-size: var(--type-body-md-size);
  font-weight: 600;
  text-decoration: none;
}

.tanitim-eylem--birincil {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-on-fill);
  box-shadow: var(--shadow-raised);
  justify-self: end;
}

/* --- KAPANIS: TAM KANAMA FOTOGRAF, DUZ PERDE ------------------------------ */
.tanitim-kapanis {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.tanitim-kapanis__gorsel {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--rounded-none);
  aspect-ratio: auto;
}

/* PERDE ICERIGIN ATASIDIR (ilk surum kardes perdeyle e2e KIRMIZI dondu):
   kontrast sondasi zemini atalari yuruyerek bulur. Fotograf inmezse metin
   yine perdenin ustundedir; dolgu buraya tasinir ki perde bolumun TAMAMINI
   kaplasin. Perde DUZ bir ortudur, gradyan degil (DEC-336 istisnasi buraya
   uzanmaz). */
.tanitim-kapanis__perde {
  position: relative;
  z-index: 1;
  padding-block: clamp(72px, 10vw, 128px);
  background: var(--color-photo-scrim);
  color: var(--color-on-photo);
}

.tanitim-kapanis__ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  justify-items: start;
}

/* Kapanis basligi referansin 60px kademesindedir (display-2xl 52px degildir);
   murekkep temadan bagimsizdir cunku zemin bir FOTOGRAFTIR. */
.tanitim-kapanis__baslik {
  max-inline-size: 34ch;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.026em;
  color: var(--color-on-photo);
}

.tanitim-kapanis__aciklama {
  max-inline-size: 52ch;
  font-size: 1.0625rem;
  color: var(--color-on-photo);
}

.tanitim-kapanis__eylemler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm-md);
}

/* Fotografin uzerindeki KAGIT eylem: zemin `surface`, murekkep `primary`. */
.tanitim-eylem--kagit {
  --eylem-yan: 26px;
  --eylem-kose: 12px;

  border-color: var(--color-surface);
  background-color: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-deep);
}

/* KAGIT EYLEM REFERANSIN `a:hover` KURALINI ALIR ve bu bir istisna DEGIL
   uygulamadir: murekkep `primary`, hover'da `primary-deep` olur ve zemin
   `surface` oldugu icin OKUNUR kalir. Dolgulu (`--birincil`) ve fotograf
   ustundeki saydam eylem bu kuralin DISINDADIR — orada primary-deep, kendi
   dolgusunun ya da fotografin uzerinde okunmaz; kullanici bunu adiyla
   onayladi (DEC-392 (5) I-02 alt sorusu, 2026-09-08). */
.tanitim-eylem--kagit:hover {
  color: var(--color-primary-deep);
}

/* Fotografin uzerindeki SAYDAM eylem de on-photo murekkebini alir: kenarlikli
   dugme govde murekkebiyle kalirsa perdenin uzerinde OKUNMAZ (atmosfer sondasi
   bunu bir kez yakaladi, en dusuk oge dugmenin kendisiydi). Kenar alfasi
   referansin %46'sidir ve tokenden karisir; elle renk yazilmaz. */
.tanitim-eylem--saydam {
  --eylem-yan: 22px;
  --eylem-kose: 12px;

  border-color: color-mix(in srgb, var(--color-on-photo) 46%, transparent);
  color: var(--color-on-photo);
}

/* --- ALT BILGI ------------------------------------------------------------
   REFERANSIN SATIRI BIREBIR; hukuki kume AYRI ikinci satirdadir (DEC-401 a)
   ve yalniz DOLUYKEN cizilir. */
.tanitim-alt {
  padding-block: var(--space-lg-xl);
  border-block-start: 1px solid var(--color-line);
  background-color: var(--color-paper-deep);
  color: var(--color-ink-soft);
}

.tanitim-alt__satir,
.tanitim-alt__hukuk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.tanitim-alt__satir {
  justify-content: space-between;
}

.tanitim-alt__hukuk {
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--color-line);
}

.tanitim-alt__marka {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-ink);
}

.tanitim-alt__not {
  font-size: var(--type-body-sm-size);
}

.tanitim-alt__bag {
  font-size: var(--type-body-sm-size);
}

/* ==================================================================
   DAR EKRAN — TASK-456 (kullanici talimati: sayfa bastan asaga mobil
   uyumlu olur, masaustu duzeni KESINLIKLE bozulmaz).

   BLOK NEDEN DOSYANIN SONUNDA. Asagidaki kurallarin hepsi yukarida
   yazilmis kurallari EZER ve CSS kaskadi ayni ozgullukte SONRAKINI
   secer. Ayni kurallari kendi bolumlerinin yanina yazmak, her birini
   ozgullugu artirarak yazmayi gerektirirdi; tek blok hem okunur hem de
   "mobilde ne degisiyor" sorusunun TEK cevabidir.

   ESIK 64rem ve bu bir tercih DEGIL: sayfanin 3B uzayi zaten orada
   gizleniyor (yukaridaki blok). Iki esik yazmak, sahnenin gizlendigi
   genislikle yerlesimin degistigi genisligi sessizce ayirirdi.

   MASAUSTU BU BLOGUN DISINDADIR ve olculur: piksel harness'i 1280 ve
   1440'ta kosar, ikisi de 64rem'in USTUNDE, yani buradaki hicbir kural
   uygulanmaz (TASK-456 KK-6).
   ================================================================== */
@media (width < 64rem) {
  /* BOLUM 2 — PANEL MAKETI KESILMEZ, SIGAR (KK-2).
     Olculdu: 360px'te kap kendi icinde +842px kayiyordu, yani ziyaretci
     1152px'lik ekran goruntusunun yalniz sol seridini goruyordu. Govde
     kaymasi SIFIRDI — kusur govde sondasinin ustunden sessizce geciyordu.

     KAYDIRMA DEGIL OLCEKLEME secildi (kullanici karari): yatay kaydirilan
     bir ekran goruntusu, panelin BUTUNUNU gosterme isini ziyaretciye
     birakir; kucultulmus hali ise bir bakista tamamini gosterir. Goruntunun
     kendisi degismez, yalnizca cizildigi kutu daralir. */
  .tanitim-gorsel--panel {
    min-inline-size: 0;
    min-block-size: 0;
  }

  .tanitim-tarayici__pencere {
    overflow-x: hidden;
  }

  /* BOLUM 6 — BIRLESME SEMASI KABINA SIGAR (KK-4).
     Olculdu: sema 860px sabit genisliktedir ve kap `overflow: hidden`
     tasidigi icin 360px'te hatlarin bir kismi KIRPILIYORDU (+321px).
     Sema akiskanlasir ama `viewBox` DEGISMEZ: hat acilari ve birlesme
     noktasi viewBox koordinatlarindadir, onu degistirmek semanin
     anlatisini degistirirdi. */
  .tanitim-birlesme__sema {
    /* IZDUSUM YERLESIM GENISLIGINDEN BUYUKTUR ve bu hesaplanabilir bir
       sayidir, tahmin degil: duzlem `rotateX(60deg)` ile yatirilir,
       `transform-origin` %86'dadir ve kap 1100px perspektif tasir. Yakin
       kenarin merkeze gore z uzakligi 560 * 0.14 * sin(60) = 67.9px,
       dolayisiyla olcegi 1100 / (1100 - 67.9) = 1.066. Yerlesim genisligi
       o olcege BOLUNMEZSE izdusum kabi 360px'te 20px asar (olculdu).
       Payda bir TOKEN DEGIL bir GEOMETRI sabitidir: yukaridaki dort degerin
       biri degisirse bu sayi da degisir ve sonda onu ADIYLA yakalar. */
    inline-size: min(860px, calc(100% / 1.066));
    margin-inline-start: calc(min(860px, calc(100% / 1.066)) / -2);
  }

  /* KUCUK KALINTI (KK-7) — HAT SERIDI.
     Olculdu: serit kabini 2px asiyordu. Kenarlik kutu genisligine DAHIL
     edilir; sebep bir tasarim tercihi degil, kutu modelinin kendisidir. */
  .tanitim-hat {
    box-sizing: border-box;
    max-inline-size: 100%;
  }
}


/* ==================================================================
   DOKUNMA HEDEFI — TASK-456 KK-5.

   IKI ESIK, IKI MEKANIZMA ve ayrim bir gevsetme DEGIL standardin kendi
   ayrimidir: dokunmatik yerlesimde 44px (WCAG 2.5.5), masaustu yerlesimde
   24px (WCAG 2.5.8). Yuzey olcumu de ayni iki esikle olcer.

   MASAUSTUNDE GORSEL BOYUT BUYUTULMEZ ve bu bir zorunluluktur: bu gorevin
   en sert kisiti masaustu duzeninin DEGISMEMESIDIR (KK-6, piksel harness'i
   ile olculur). Bir baglantiyi 20px'ten 24px'e cikarmak ust bandin ve alt
   bilginin ritmini oynatirdi. Dogru mekanizma GORUNMEZ BIR ISABET ORTUSUDUR
   (`::after`): kutu ayni cizilir, parmagin/imlecin dokundugu alan buyur ve
   sifir piksel degisir. Ayni kalip SPA'da onay kutusu/radyo icin zaten
   yazilidir (styles/layout.css) ve yuzey olcumu ortuyu ADIYLA okur.
   ================================================================== */
.tanitim-bant__baglanti,
.tanitim-gelistirici__bag,
.tanitim-alt__bag {
  position: relative;
}

.tanitim-bant__baglanti::after,
.tanitim-gelistirici__bag::after,
.tanitim-alt__bag::after {
  content: '';
  position: absolute;
  inset: -3px;
}

/* DOKUNMATIK YERLESIM — GERCEK 44px. Kosul genislik VEYA isaretci turudur;
   44px bir GENISLIK kurali degil bir GIRDI kuralidir (WCAG 2.5.5) ve genis
   ekranli dokunmatik bir cihaz genislik testinden gecerdi. Esik 64rem, yani
   sayfanin kendi mobil esigiyle AYNI — iki esik yazmak onlarin sessizce
   ayrismasi demekti. */
@media (width < 64rem), (pointer: coarse) {
  .tanitim-skip,
  .tanitim-bant__marka,
  .tanitim-bant__baglanti,
  .tanitim-bant__btn,
  .tanitim-gelistirici__bag,
  .tanitim-alt__bag {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--layout-tap-target, 44px);
  }

  /* HEDEF IKI BOYUTLUDUR. Yukseklik tabani tek basina yetmedi ve bunu olcum
     soyledi: `Akış` bagi 27x44 olculdu — parmak icin yeterince YUKSEK ama
     yeterince GENIS degil. Yalniz kisa adli baglar bu tabana ihtiyac duyar;
     otekiler metinleriyle zaten asar. */
  .tanitim-bant__baglanti {
    justify-content: center;
    min-inline-size: var(--layout-tap-target, 44px);
  }

  /* Ortu dokunmatik yerlesimde ISE YARAMAZ ve KALDIRILIR: kutu zaten 44px
     cizilir, negatif inset ise komsu baglantilarin isabet alanlarini UST USTE
     bindirirdi — yanlis dokunus, cozdugu kusurdan daha kotudur. */
  .tanitim-bant__baglanti::after,
  .tanitim-gelistirici__bag::after,
  .tanitim-alt__bag::after {
    content: none;
  }
}


/* ==================================================================
   MOBIL YOGUNLUK — TASK-457 (DEC-423).

   ESIK 48rem'DIR ve bu bir TAHMIN DEGIL BIR OLCUMDUR. Kahraman ozeti
   768px ve uzerinde TEK SATIRDIR (uc ogenin dt sol kenarlari 24/293/533);
   altinda izgara SARAR ve masaustu satiri icin yazilmis `:first-child`
   istisnasi sutunda kalir — 390px'te 24/53/53, 500px'te 24/279/53.
   Hizasizlik tam olarak izgaranin sardigi yerde baslar ve o yer 48rem'dir.

   SAYFANIN OTEKI ESIGI 64rem'DIR; ikisi AYRI SEY olctugu icin ayridir,
   sessizce ayrismis degildir. 64rem YERLESIMIN kirildigi yerdir (kap
   tasmalari, dokunma hedefi). 48rem YOGUNLUGUN telefonda dayanilmaz
   oldugu yerdir. Tek esige indirmek ya tablette gereksiz sadelestirme
   ya telefonda yetersiz sadelestirme demekti.

   MASAUSTU BU BLOGU HIC GORMEZ: blogun tamami 48rem'in ALTINDADIR,
   1280 ve 1440'ta tek bir bildirim bile uygulanmaz ve bu piksel
   harness'i ile ayrica OLCULUR (KK-7).
   ================================================================== */
@media (width < 48rem) {
  /* (a) 3B KOLI TELEFONDA CIZILMEZ — DEC-423 (a).
     Sahne `aria-hidden` DEKORATIF bir cizimdir ve erisilebilirlik
     agacinda hic yoktur; kaldirilmasi HICBIR bilgi goturmez. Olculdu:
     342x470px, yani telefonda ilk ekranin yarisi. Kaldirma gorsel bir
     tercih degil, ilk ekrani SOZE birakma kararidir. Masaustunde sahne
     AYNEN durur ve olcum bunu pozitif kontrol olarak okur. */
  .tanitim-kahraman__sahne {
    display: none;
  }

  /* (b) KAHRAMAN OZETI TEK SUTUNDA HIZALANIR — DEC-423 (b).
     Istisna SUTUNA degil SATIRA aittir. Tek sutun ZORLANIR (auto-fit
     500-767px arasinda iki sutun kurup ucuncu ogeyi alt satira dusuruyor
     ve o oge yine kayik kaliyordu — olculdu: 24,279,53). Sol dolgu ve sol
     cizgi TUM ogelerden kalkar; ayirici, ogelerin zaten tasidigi YATAY
     cizgidir. `:first-child` istisnasi SILINMEZ — masaustu satirinda o
     istisna DOGRUDUR — yalnizca bu esigin altinda etkisiz kalir. */
  .tanitim-kahraman__ozet {
    grid-template-columns: minmax(0, 1fr);
  }

  .tanitim-kahraman__ozet-oge {
    padding-inline: 0;
    border-inline-start: 0;
  }

  /* (c) AKIS KARTLARI SADELESIR, ICERIK KALIR — DEC-423 (c).
     Olculdu: uc kart 390px'te 830px tutuyordu (kart basina ~277px).
     Kazanc DOLGUDAN ve BOSLUKTAN alinir; uc adimin basligi, durum satiri
     ve metni AYNEN durur. Kart ritmi (kenarlik, koselik, etkin kartin
     vurgusu) korunur — sadelesen sey yer, goturulen sey bilgi degildir. */
  .tanitim-adimlar {
    gap: var(--space-sm-md);
  }

  /* SIRA NUMARASI KENDI SATIRINI BIRAKIR. Olculdu: 231px'lik kartin 34px'i
     yalnizca numarayi ve durum noktasini tasiyan AYRI BIR SATIRDI; metnin
     kendisi 140px. Numara, baslik blogu ve nokta telefonda TEK SIRAYA
     alinir — satirin kendisi ve bir bosluk kazanilir, HICBIR ICERIK
     gitmez. `display: contents` kutuyu kaldirir, cocuklari kartin kendi
     izgarasina verir; kap anlamsiz bir `<div>` oldugu icin erisilebilirlik
     agacinda bir sey degismez. */
  .tanitim-adimlar__adim {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-sm) var(--space-sm-md);
    padding: var(--space-md);
  }

  .tanitim-adimlar__ust {
    display: contents;
  }

  .tanitim-adimlar__sira {
    grid-column: 1;
    grid-row: 1;
    line-height: 1.15;
  }

  .tanitim-adimlar__govde {
    grid-column: 2;
    grid-row: 1;
  }

  .tanitim-adimlar__nokta {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }

  .tanitim-adimlar__metin {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* (e) KARGO FIRMALARI TOPLANIR — DEC-423 (e).
     Olculdu: bolum 1949px ile sayfanin EN UZUN bolumuydu; alti firma
     karti alti AYRI SATIRDI. Iki sutuna gecince alti satir uce iner.
     Kart icerigi TAM KALIR (logo yeri, ad, rozet); kuculen sey dolgu,
     bosluk ve logo seridinin yuksekligidir. */
  .tanitim-firmalar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm-md);
  }

  .tanitim-firmalar__kart {
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-sm-md);
  }

  .tanitim-firmalar__gorsel {
    block-size: 40px;
  }

  .tanitim-firmalar__yer-tutucu {
    min-inline-size: 0;
    min-block-size: 28px;
    padding: 4px 6px;
    font-size: 10px;
  }

  /* (d) BIRLESME SEMASI KARTIN ICINE OTURUR — DEC-423 (d).
     Olculdu (kirmizi taban, 390px): kart 340px, semanin ust boslugu 192px
     (kartin %56'si BOS) ve altindan 187px TASIP kirpiliyordu. Yani
     ziyaretci 335px'lik cizimin yalnizca 148px'ini (%44) goruyordu.
     Sebep: TASK-456 semanin `inline-size`'ini akiskanlastirdi ama
     `block-size` 560px SABIT kaldi; kart `clamp(340px,44vw,440px)` ile
     340px'e inince izdusum kartla birlikte kuculmedi.

     BU ESIGIN ALTINDA KART HER ZAMAN TAM 340px'DIR ve bu yuzden asagidaki
     yuzdeler TAHMIN DEGIL HESAPTIR: 48rem = 768px'te 44vw = 337.9px, yani
     clamp zaten alt sinira (340px) oturmustur ve daha dar her ekranda orada
     kalir. Yuzdeler o 340px'e gore cozulur.

     `viewBox` DEGISMEZ (TASK-456 gerekcesi aynen gecerli: hat acilari ve
     birlesme noktasi viewBox koordinatlarindadir). Degisen tek sey
     izdusumun OLCEGI ve KARTIN ICINDEKI YERIDIR. */
  .tanitim-birlesme {
    block-size: 220px;
  }

  .tanitim-birlesme__sema {
    block-size: 390px;
    inset-block-start: -66%;
  }

  /* (f) ORNEK KUNYE OLCEKLENIR, YAPISI KORUNUR — DEC-423 (f).
     Kullanici yonergesi bunu adiyla istedi: masaustu kart YAPISI ve
     ICERIGI korunur, olcu kuculur. Alan SILINMEZ ve kart bolunmez —
     alti alan iki sutuna girer (alti satir uce iner), dolgu ve bosluk
     daralir. Olculdu: bolum 1635px.

     Izgaranin kendi `minmax()` esigi 240px'tir ve 310px'lik belge
     genisliginde tek sutun uretir; esik burada DUSURULUR, kural
     degistirilmez. */
  .tanitim-belge__izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tanitim-belge {
    gap: var(--space-md);
    padding: var(--space-md);
  }

  .tanitim-alan {
    padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
  }
}


/* ==================================================================
   MOBIL KABUK — TASK-459 (DEC-424).

   ESIK 48rem'DIR, yani TASK-457'nin yogunluk esigiyle AYNI ve bu bilincli:
   kabugun sadelesmesi de yogunluk kararidir, ikinci bir esik yazmak ikisinin
   sessizce ayrismasi demekti.
   ================================================================== */

/* (a) KENAR CUBUGU — TABAN HALI: HICBIR SEY DEGISMEZ.
   Kume hicbir kutu olusturmaz (`contents`), dolayisiyla bandin flex duzeni
   BUGUNKUYLE ayni uc kutuyu gorur: marka | bolumler | hesap. Ac-kapa dugmesi
   isaretlemede vardir ama cizilmez. Betiksiz bir tarayici bu tabanda kalir ve
   hicbir baglanti kaybolmaz (DEC-199). */
.tanitim-bant__kume {
  display: contents;
}

.tanitim-bant__ac {
  display: none;
}

/* CUBUGUN UC YENI OGESI TABAN KURALDA CIZILMEZ — TASK-462 (DEC-427 e).
   Ac-kapa dugmesiyle AYNI kosullu kalip: gorunurlukleri 48rem altinda ve
   yalniz canli damga altinda acilir. Boylece masaustu bu ogeleri HIC gormez
   (kume orada `display: contents` tasir, yani cizilen her oge bandin flex
   duzenine bir kutu olarak girerdi) ve betik inmezse de hicbiri belirmez
   (DEC-199). */
.tanitim-bant__kenar-basi,
.tanitim-bant__kume-etiket,
.tanitim-bant__tema-etiket {
  display: none;
}

/* CUBUGA AIT BAGLANTILAR YALNIZ MASAUSTUNDE GIZLENIR — TASK-463 (DEC-428 b),
   ve bu sinir bir MUTASYONUN bulduğu SOZLESME IHLALINDEN dogdu.

   Ilk yazimda yedi yeni baglanti oteki uc yeni ogeyle AYNI taban kuralda
   gizlenmisti. Kampanya betiksiz hal bacagini KIRMIZI dusurdu ve sebebi
   adiyla yazdi: "betiksiz halde GIZLENEN baglanti: Panel, Ne yapar, Kargo
   firmalari, Ucretlendirme, Gonderi kunyesi, Guvenlik, Is ortakligi".
   DEC-199 sert bir kisittir — betik inmezse HICBIR BAGLANTI kaybolmaz — ve
   taban kuralda gizlemek tam olarak onu ihlal ediyordu.

   Ayrim su: uc dekoratif oge (marka basligi, iki etiket) cubugun KABUGUDUR ve
   betiksiz halde gorunmemeleri dogrudur; bu yediyse BAGLANTIDIR ve betiksiz
   halde bandin icinde GORUNMEK zorundadir. Masaustunde gizlenmelerinin sebebi
   ayridir ve olculdu: kume orada `display: contents` tasidigi icin her
   baglanti bandin flex satirina girer, on bir baglanti satiri SARDIRIR ve ust
   bar 63px'ten 112px'e cikar (piksel harness'i yakaladi). */
@media (width >= 48rem) {
  .tanitim-bant__baglanti--kenar {
    display: none;
  }
}

@media (width < 48rem) {
  /* CUBUK YALNIZ CANLI KIPTE KURULUR. Secicinin `data-tanitim-kabuk="canli"`
     ile baslamasi bu gorevin en onemli satiridir: damgayi betik yazar, yani
     betik inmezse asagidaki hicbir kural uygulanmaz. */
  [data-tanitim-kabuk='canli'] .tanitim-bant__ac {
    /* DUGME CUBUGUN USTUNDE KALIR ve bu bir OLCUMLE eklendi, bir tercihle
       degil. Cubuk soldan tam boy acilinca dugmenin UZERINE geliyordu:
       390px'te dugme 278.4-366px arasindadir, cubugun sag kenari 319.8px —
       yani dugmenin %47'si ortuluyordu ve merkezi cubugun disinda sadece
       2.4px ile kaliyordu. 360px'te cubuk 295.2px'e geldigi icin MERKEZ DE
       ortuluyor, yani ac-kapa dugmesi TIKLANAMAZ hale geliyordu.

       Bu, bir onceki gorevin dersinin aynisidir ters yonden: GORUNURLUK VE
       ETKILESIM AYRI SORULARDIR. `aria-expanded="true"` tasiyan bir acma
       dugmesinin sozlesmesi onun KAPATILABILIR olmasidir; ustte kalmasi o
       sozlesmenin geregidir, kozmetik bir duzeltme degil. Dugme ve cubuk ayni
       yiginlama baglaminin (bandin) cocuklaridir, dolayisiyla iki katman
       sayisi birbirine gore okunur: cubuk 1, dugme 2. */
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* DUGME YALNIZ IKONDUR (TASK-463; DEC-428 a). Gorunur metin dugmeyi
       44px'in uzerinde tutuyordu; metin kalkinca geriye 18px ikon + dolgu
       kalir, yani 42px.

       ASGARI GENISLIK BURADA YENIDEN BILDIRILMEZ ve bu bir OLCUMLE ogrenildi
       — AYNI DERSIN IKINCI ORNEGI (ilki TASK-462'de baglantilarin yukseklik
       tabanindaydi): dugme isaretlemede `layout-tap` sinifini tasir ve
       ilkeller.css o sinifa `min-width: var(--layout-tap-target)` verir
       (`@media (width < 1024px), (pointer: coarse)`). Ikinci bir bildirim
       olculemez bir cifte kapi kurar: mutasyon birini kaldirdiginda oteki
       tutar ve kapi ISIRMAZ. Tasiyici TEKTIR ve mutasyon onu — sinifin
       kendisini — hedefler. */
    min-block-size: var(--layout-tap-target, 44px);
    padding: var(--space-sm) var(--space-sm-md);
    border: 1px solid var(--color-line);
    border-radius: var(--rounded-md);
    background-color: var(--color-surface);
    font-family: var(--font-body);
    font-size: var(--type-body-sm-size);
    font-weight: 600;
    color: var(--color-ink);
    cursor: pointer;
  }

  [data-tanitim-kabuk='canli'] .tanitim-bant__ac-isaret {
    display: grid;
    place-items: center;
  }

  /* KAPSAYICI BLOK KISITI BURADA KALKAR — DEC-425 (a), ve bu gorevin en
     onemli satiri budur.

     `backdrop-filter` degeri `none` OLMAYAN her bildirim, tipki `filter` ve
     `transform` gibi, `position: fixed` cocuklari icin KAPSAYICI BLOK kurar.
     Bant o bildirimi tasidigi surece icine konan sabit bir cubuk GORUNUM
     ALANINA degil BANDA gore cozulur — yani ekranin soluna degil, bandin
     kutusuna yaslanir ve bandin altina sarkar. TASK-459 kisiti ASMAK yerine
     ondan KACTI (`absolute` yazdi) ve sonuc kullanicinin bildirdigi kusurdu:
     kenar cubugu degil, bir acilir panel. Dogru cevap kisiti KALDIRMAKTIR ve
     kaldirmanin YERI burasidir: yalniz 48rem altinda, yalniz canli kipte.

     BEDEL ADIYLA YAZILIR: telefonda bandin bulanik zemini kaybolur. Karsiligi
     opak bir zemindir, cunku bulaniksiz kalan yari saydam bir bant altindan
     gecen icerigi okunmaz bicimde gosterirdi. MASAUSTU DOKUNULMAZ: taban
     kural (sticky, %86 kagit, blur 14px) 48rem ve ustunde AYNEN durur ve bu
     ayri bir pozitif kontrolle olculur.

     Secici bandin KENDISIDIR (damga ayni ogededir), o yuzden birlesik yazilir
     ve bilesik secici taban kurali ozgullukle ezer. */
  [data-tanitim-kabuk='canli'].tanitim-bant {
    background-color: var(--color-paper);
    backdrop-filter: none;
  }

  /* KUME GERCEK BIR KUTUYA DONER ve o kutu SOLDAN ACILAN TAM BOY BIR KENAR
     CUBUGUDUR — DEC-425 (b). Yukaridaki kural kapsayici blok kisitini
     kaldirdigi icin `fixed` artik GORUNUM ALANINA gore cozulur: cubuk
     ekranin sol kenarina yaslanir ve ustten alta kadar uzanir.

     `max-block-size` YOKTUR ve olmamasi bilinclidir: tam boy bir cubugu
     ekranin bir bolumune kisitlamak onu yeniden bir panele cevirirdi. Icerik
     ekrandan uzunsa cubuk KENDI icinde kayar (`overflow-y`).

     KOSE YARICAPI DA YOKTUR: uc kenarina (ust, sol, alt) yaslanmis bir yuzeyin
     yuvarlatilacak bir kosesi yoktur; kutuyu sayfadan ayiran sey SAG KENARDAKI
     ayirici cizgidir. Dort tarafli kenarlik bu yuzden tek kenara indi. */
  [data-tanitim-kabuk='canli'] .tanitim-bant__kume {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 1;
    display: grid;
    gap: var(--space-md);
    align-content: start;
    inline-size: min(20rem, 82vw);
    overflow: hidden;
    border-inline-end: 1px solid var(--color-line);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-overlay);

    /* UC BOLGE — TASK-462 (DEC-427). Bir kenar cubugunu KABUK yapan sey
       bolgelerdir: kimligi tasiyan BAS, gezinmeyi tasiyan GOVDE ve eylemleri
       tasiyan, ALTA SABITLENMIS etek. Ortadaki 1fr satiri boslugu yutar,
       dolayisiyla hesap blogu icerik kisa oldugunda bile dibe yapisir ve
       cubugun alti bos kalmaz.

       DOLGU ARTIK KUMEDE DEGIL BOLGELERDE: ayirici cizgilerin cubugun TAM
       genisligini kat etmesi gerekir, kumenin kendi dolgusu onlari iceri
       ceker ve bolge sinirlari yarim kalirdi. */
    grid-template-rows: auto 1fr auto;
    gap: 0;
    padding: 0;

    /* KAPALI HAL: `visibility` odak sirasindan da CIKARIR — yalniz saydamlik
       ya da oteleme ile gizlenmis bir menunun baglantilari sekmeyle gezilir ve
       klavye kullanicisi gorunmeyen bir menude kaybolur. Modul ayrica `inert`
       yazar; ikisinden biri desteklenmese oteki tutar. */
    /* KAPALI HAL SOLA OTELENIR — DEC-425 (c) — ve YON SECILMEDI, OLCULDU.
       SAGA oteleme (`translateX(100%)`) kutuyu gorunum alaninin sagina
       tasir, kaydirilabilir alana KATILIR ve yuzey sozlesmesi sondasi
       TASK-459'da govdeyi 360px'te +295px kayan yakaladi — tam olarak
       `min(20rem, 82vw)` degeri. Yatay kayma DESIGN.md §Layout'un sert
       kisitidir; animasyon ugruna delinmez.

       SOLA oteleme LTR'de kaydirilabilir alani BUYUTMEZ (sol tarafa tasan
       icerik kaydirma uretmez) ve `fixed` ogeler belge kaydirma boyutuna
       zaten katilmaz. Iki gerekce de VARSAYIM DEGILDIR: ikisi de 360px'te
       kapali ve acik halde ayri ayri olculur (TASK-460 (g2) bacagi). */
    visibility: hidden;
    transform: translateX(-100%);

    /* GECIKME AYRILIR ve bu OLCUMLE ogrenildi: `visibility` gecis LISTESINDE
       oldugunda acilista sure boyunca `hidden` KALIR (olculdu: durum `acik`,
       `inert` kalkmis, ama hesaplanmis visibility hala hidden ve odak cubuga
       GIRMIYOR). Dogru kalip suredir sifir, gecikme yondur: kapanista cubuk
       kayip BITTIKTEN sonra gizlenir, acilista ANINDA gorunur olur. */
    /* SOLMA YOK, YALNIZ OTELEME: DESIGN.md'nin sifir-opaklik yasagi bu sayfada
       KONTRAST SONDASINI korur (sonda opakligi sifir olan ogeyi ATLAR) ve
       yasagin kendi metni "gizlenmesi gereken oge `visibility` ile gizlenir"
       der. Cubuk zaten oyle gizleniyor; sifir opaklik yalnizca bir solma
       efektiydi, yani yasaga muafiyet istemek icin bir SEBEP degildi ve
       kaldirildi. YASAGIN LITERALI BU YORUMA DA YAZILMAZ: bu depoda literal
       tarayan kapilar yorumlari da okur, yani yasagi ANLATAN bir cumle yasagi
       KIRABILIR (ilk yazimda tam olarak bu oldu). */
    transition:
      transform var(--motion-slow) var(--motion-ease),
      visibility 0s linear var(--motion-slow);
  }

  [data-tanitim-kabuk='canli'][data-tanitim-kenar-durum='acik'] .tanitim-bant__kume {
    visibility: visible;
    transform: translateX(0);
    transition:
      transform var(--motion-slow) var(--motion-ease),
      visibility 0s linear 0s;
  }

  /* ---- (1) BAS: kimlik satiri — DEC-427 (a).
     Yuksekligi BANDIN yuksekligine esitlenir, boylece cubugun ayirici cizgisi
     bandin ayiricisini KESINTISIZ surdurur; iki cizgi ayni y'de bulusur ve
     cubuk bandin altina yamanmis gibi degil, onun yaninda duruyormus gibi
     okunur. Deger olculdu ve bacakta iddia edilir. */
  [data-tanitim-kabuk='canli'] .tanitim-bant__kenar-basi {
    display: flex;
    align-items: center;
    gap: var(--space-sm-md);
    min-block-size: 68px;
    padding-inline: var(--space-lg);
    border-block-end: 1px solid var(--color-line);
  }

  /* ---- (2) GOVDE: etiketli bolum listesi — DEC-427 (b). */
  [data-tanitim-kabuk='canli'] .tanitim-bant__bolumler {
    display: grid;
    gap: var(--space-xs);
    justify-items: stretch;
    align-content: start;

    /* KAYAN BOLGE GOVDEDIR, CUBUGUN TAMAMI DEGIL (TASK-463; DEC-428 d).
       Liste on bir satira cikinca kucuk telefonlarda cubuktan uzun oluyor.
       Butun cubugu kaydirmak eteği ekrandan cikarir ve "etek alta sabittir"
       kararini (DEC-427 c) fiilen geri alirdi. Izgara satirlari `auto 1fr auto`
       oldugu icin bas ve etek kendi icerik boylarinda SABIT kalir, ortadaki
       1fr satiri artani yutar ve kaydirma YALNIZ burada olur.
       TASIYICI `overflow-y: auto`DUR, BASKA BIR SEY DEGIL — ve bu OLCULDU.
       Ilk yazimda yanina bir de `min-block-size: 0` konmustu ("izgara ogesi en
       kucuk icerik boyunda kalir" gerekcesiyle); mutasyon onu kaldirdiginda
       HICBIR SEY degismedi. Sebebi CSS'in kendi kuralidir: `overflow` degeri
       `visible` olmayan bir izgara ogesinin OTOMATIK ASGARI BOYU zaten
       sifirdir, yani bildirim bir NO-OP idi. AYNI DERSIN UCUNCU ORNEGI
       (oncekiler: baglantilarin yukseklik tabani ve dugmenin genislik tabani)
       — bir ozelligin ikinci bir tasiyicisi kapiyi olculemez kilar. */
    overflow-y: auto;
    padding: var(--space-md) var(--space-sm-md);
  }

  [data-tanitim-kabuk='canli'] .tanitim-bant__kume-etiket,
  [data-tanitim-kabuk='canli'] .tanitim-bant__tema-etiket {
    display: block;
    font-family: var(--type-label-xs-family);
    font-size: var(--type-label-xs-size);
    font-weight: var(--type-label-xs-weight);
    letter-spacing: var(--type-label-xs-letter-spacing);
    text-transform: var(--type-label-xs-transform);
    color: var(--color-ink-soft);
  }

  [data-tanitim-kabuk='canli'] .tanitim-bant__kume-etiket {
    padding: var(--space-xs) var(--space-sm-md) var(--space-sm);
  }

  /* Baglantilar SATIR olur: tam genislik ve kendi vurgu zemini. Bandin yatay
     ritmi burada dikey bir listeye doner.

     44px DOKUNMA HEDEFI BURADA YENIDEN BILDIRILMEZ ve bu bir OLCUMLE ogrenildi:
     `@media (width < 64rem), (pointer: coarse)` blogu `.tanitim-bant__baglanti`
     ve `.tanitim-bant__btn` icin tabani ZATEN veriyor (TASK-456). Ikinci bir
     bildirim gorunurde zararsizdir ama olculemez bir cifte kapi kurar: mutasyon
     birini kaldirdiginda oteki tutar, dolayisiyla kapi ISIRMAZ ve kimse
     hangisinin tasidigini bilmez. Tek bildirim birakildi; tabanin tuttugu
     bacakta olculur. */
  [data-tanitim-kabuk='canli'] .tanitim-bant__baglanti,
  [data-tanitim-kabuk='canli'] .tanitim-bant__baglanti--kenar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-inline: var(--space-sm-md);
    border-radius: var(--rounded-md);
    font-size: var(--type-body-md-size);
    color: var(--color-ink);
  }

  [data-tanitim-kabuk='canli'] .tanitim-bant__baglanti:hover {
    background-color: var(--color-paper-deep);
  }

  /* ---- (3) ETEK: alta sabitlenmis hesap blogu — DEC-427 (c).
     ETEGI ALTA BAGLAYAN TASIYICI ARTIK SATIR YAPISIDIR, `align-self` DEGIL
     (TASK-463; DEC-428 d): izgara `auto 1fr auto` oldugu icin etek ucuncu ve
     SON `auto` satirindadir, yani hem icerik boyunda kalir hem de cubugun
     dibine oturur. Onceki yazimda satirlar `auto auto 1fr` idi ve etegi dibe
     `align-self: end` cekiyordu; o bildirim bu yapida bir NO-OP olurdu ve
     kaldirildi. Kapinin mutasyon ignesi de yeni tasiyiciyi hedefler.
     Iki sutunlu izgara tema satirini kurar (etiket solda, anahtar sagda) ve
     dugmeler iki sutunu birden kaplar.

     ANAHTARIN ESNEMEMESININ TASIYICISI `auto` SUTUNUDUR, baska bir sey degil:
     ilk yazimda anahtara ayrica `justify-self: end` verilmisti ve mutasyon onu
     kaldirdiginda HICBIR SEY degismedi — `auto` sutunu zaten icerik
     genisligindedir, dolayisiyla o bildirim olculemez bir ikinci kemerdi.
     Kaldirildi; tasiyici tek ve bacakta olculur. */
  [data-tanitim-kabuk='canli'] .tanitim-bant__hesap {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-sm-md);
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    border-block-start: 1px solid var(--color-line);
  }

  [data-tanitim-kabuk='canli'] .tanitim-bant__btn {
    grid-column: 1 / -1;
    justify-content: center;
  }

  /* Sessiz eylem artik cikplak bir baglanti gibi durmaz: kendi kenarini alir
     ve birincil dugmeyle AYNI kutuyu paylasir. */
  [data-tanitim-kabuk='canli'] .tanitim-bant__btn:not(.tanitim-bant__btn--birincil) {
    border-color: var(--color-line-strong);
  }
}

/* (e) KAHRAMAN TELEFONDA ORTALANIR — DEC-424 (e).
   Soz blogu ortalanir; OZET SATIRI bu blogun DISINDADIR (kardesi) ve bu
   yuzden sola yasli kalir — TASK-457'de onarilan hiza bozulmaz. Ortalama
   yalniz `__soz` alt agacina yazilir, bandin tamamina degil. */
@media (width < 48rem) {
  .tanitim-kahraman__soz {
    justify-items: center;
    text-align: center;
  }

  .tanitim-kahraman__rozet {
    justify-self: center;
  }

  /* Okuma kolonu tavanlari ortalamayi GORUNMEZ kilardi: 17ch'lik bir baslik
     342px'lik bir kapta zaten daha dar durur ve `justify-items: center` onu
     ortalar, ama metnin KENDISI sola yasli kalirdi. Tavan telefonda kalkar,
     hiza `text-align` ile kurulur. */
  .tanitim-kahraman__baslik,
  .tanitim-kahraman__giris {
    max-inline-size: none;
  }

  /* Birincil eylem EKRANA YAYILIR (kullanici karari). IKI BILDIRIM GEREKIR ve
     sebebi olculdu: `__soz` bir izgaradir ve `justify-items: center` eylem
     kabini ICERIGINE kadar buzer (olculdu: kap 217px, kolon 342px), dolayisiyla
     dugmenin `inline-size: 100%` degeri 217px'in yuzdesi olur. Kap once
     `justify-self: stretch` ile kolonu doldurur, dugme sonra onu doldurur. */
  .tanitim-kahraman__eylemler {
    justify-self: stretch;
  }

  .tanitim-kahraman__btn {
    inline-size: 100%;
  }
}


/* (b) NE YAPAR BLOGU TELEFONDA KART DEGILDIR — DEC-424 (b).
   Olculdu: blok 342px, kabi 390px; kenarligi, 18px koseligi ve golgesi vardi.
   Asil daralma ise ICTEKI dolgudan geliyordu — alan metni ekran kenarindan
   24px (kap) + 28px (alan) = 52px iceride basliyordu, oteki bolumlerin metni
   ise 24px'te. Kabuk kalkar ve dolgu sifirlanir; blok oteki bolumlerle AYNI
   hizada akar. ICERIK AYNEN KALIR: alti alanin altisi da yerinde durur ve
   yatay cetveller (border-block-start) okunurlugu tasimaya devam eder. */
@media (width < 48rem) {
  .tanitim-yetenek {
    border: 0;
    border-radius: var(--rounded-none);
    background-color: transparent;
    box-shadow: none;
  }

  .tanitim-yetenek__basi {
    padding: 0 0 var(--space-md);
    background-color: transparent;
  }

  .tanitim-yetenek__alan {
    padding: var(--space-md) 0;
  }

  /* Sutun ayiricisi tek sutunda anlamsizdir: kalkar, yatay cetvel kalir. */
  .tanitim-yetenek__alan--cetvelli {
    border-inline-end: 0;
  }

  /* (c) TEK AKIS NOTLARI TEK SUTUNDA HIZALANIR — DEC-424 (c).
     TASK-457'nin kahraman ozetinde onardigi kusurun AYNISI, ikinci bir yerde:
     `:first-child` istisnasi masaustu SATIRI icindir. Olculdu: padSol 0/24/24,
     sol kenarlik 0/1/1. Istisna SILINMEZ — masaustu satirinda dogrudur — tek
     sutunda etkisiz birakilir. Tek sutun ZORLANIR cunku `auto-fit` 768px'te
     iki sutun kurup ucuncu notu alt satira dusuruyor ve o not yine kayik
     kaliyordu (olculdu: x 24,384,24). */
  .tanitim-mimari__notlar {
    grid-template-columns: minmax(0, 1fr);
  }

  .tanitim-mimari__not {
    padding-inline: 0;
    border-inline-start: 0;
  }

  /* (d) ORNEK KUNYE YATAY KALIR ve FOTOGRAFIN METNINI ORTMEZ — DEC-424 (d).
     IKI KUSUR, IKI SEBEP:
     (1) ORTUSME: kart `margin-block-start` ile fotografin icine cekilir ve
         clamp'in alt siniri (195px) telefonda fotografin (300px) neredeyse
         tamamini yiyordu; perde metninin alt kenari kartin ust kenarini 100px
         ASIYORDU. Cekme telefonda kucultulur — tasarim niyeti (belge fotografin
         UZERINE serilir) korunur, ortusme biter.
     (2) DIKEY UZAMA: kart 310x1014 idi (oran 0.31; masaustunde 1.58). Yan
         kenar boslugu kalkar (kart kabini doldurur) ve olculer kucultulur;
         ALAN SAYISI DEGISMEZ, yalnizca olcegi kuculur. */
  .tanitim-belge {
    margin-block-start: calc(-1 * var(--space-xl));
    margin-inline: 0;
    gap: var(--space-sm-md);
    padding: var(--space-sm-md);
  }

  .tanitim-alan {
    padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;
  }

  /* YOL ILERLEMESI ZAMAN CIZGISI OLARAK KALIR ve asil kazanc buradadir.
     Olculdu: `hat` blogu telefonda 277px, masaustunde 57px — cunku
     `minmax(min(100%, 170px), 1fr)` 318px'lik kartta TEK sutun uretiyor ve dort
     durak alt alta diziliyordu. Durak sayisi DORTTE SABITLENIR: cizgi soldan
     saga OKUNAN bir siradir; ALT ALTA dizmek onu bir LISTEYE cevirir ve tasidigi
     sirayi goturur.

     DORT SUTUN DENENDI ve GERI ALINDI — sebebi gozle olculdu: 318px'lik kartta
     dort sutun her duraga ~79px verir ve "OLUSTURULDU" ile "TESLIM ALINDI"
     etiketleri komsu sutunlarin UZERINE BINDI. Sayi (60px) iyi gorunurken ekran
     BOZUKTU. Iki sutun her duraga ~155px verir: etiketler tek satira siger,
     sira satir satir (1-2 / 3-4) okunur ve yukseklik yine 277px'ten cok
     asagidadir. Uzun bir sozcuk yine tasmasin diye sarma da ADIYLA yazilir. */
  .tanitim-hat__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm) var(--space-md);
  }

  .tanitim-hat__etiket,
  .tanitim-hat__durum {
    overflow-wrap: anywhere;
  }

  .tanitim-hat__durak {
    gap: var(--space-xs);
  }

  .tanitim-hat__durum {
    font-size: var(--type-label-xs-size);
    line-height: 1.25;
  }

  /* Kunye basligi ve eteginin dolgusu da kuculur: ikisi birlikte masaustune
     gore 110px fazla tasiyordu (127+213 yerine 91+139). */
  .tanitim-belge__masthead {
    gap: var(--space-sm);
  }

  .tanitim-belge__etek {
    gap: var(--space-sm-md);
  }

  /* Barkod ORNEKTIR, okutulacak bir kod degil (kunyenin tamami ornek
     degerlerdir): cizim yuksekligi telefonda kuculur. Cubuk kalinliklari
     DEGISMEZ — onlar referansin 2/5/3px oranlaridir ve kodun okunur DILIDIR. */
  .tanitim-barkod {
    gap: var(--space-sm);
  }

  .tanitim-barkod__cizim {
    block-size: 52px;
  }

  /* Ilerleme TEK SATIRDA kalir: olculdu, telefonda 55px (masaustunde 22px)
     cunku etiket, dilimler ve yuzde degeri alt alta sariyordu. Dilimler
     daralir ve bosluk kuculur; bes dilim + deger tek satira siger. */
  .tanitim-ilerleme {
    gap: var(--space-sm);
  }

  .tanitim-ilerleme__dilim {
    inline-size: 22px;
  }
}