/*
 * meetbado.com — site stili (11f art direction, 11g UX yapısı). Tek dosya, harici istek yok, satır içi stil yok (CSP).
 * Katmanlar: reset, tokens, base, layout, components, utilities.
 * İŞLEVSEL KURALLAR (korunmalı, utilities katmanının sonunda, katmansız):
 *  - u-gorunmez: ekran okuyucuda kalan, görsel olarak gizli metin
 *  - c-form__tuzak: bot tuzağı alanı ekran dışında (görünür olursa insanlar doldurur, kayıt sessizce düşer)
 *  - u-atla: odak alınca görünen "İçeriğe geç"
 *  - [hidden]: JS'nin açtığı öğeler (yapışkan CTA, kopyala) JS yoksa gizli kalır
 *  - hitap demosu :has() (JS'siz selam)
 */
@layer reset, tokens, base, layout, components, utilities;

/* ---------------------------------------------------------------- fontlar (kendi sunucumuz, KVKK) */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-var-latinext.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
/* Yedek yığın metrik eşlemesi (Outfit 700 ↔ Arial Bold; CLS ≈ 0). fontTools ile ölçüldü. */
@font-face {
  font-family: "Outfit Yedek";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  size-adjust: 95.3%; ascent-override: 104.9%; descent-override: 27.3%; line-gap-override: 0%;
}
/* Figtree (metin) indirilip assets/fonts/ altına alt kümelenmiş olarak eklenince bu bloğu açın ve
   <head>'e önyükleme EKLEMEYİN (11g §9.3: yalnız başlık fontu önceden yüklenir).
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-var-latinext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
*/

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
  fieldset { padding: 0; border: 0; min-width: 0; }
  legend { padding: 0; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  img, picture, svg, video { display: block; max-width: 100%; }
  img, video { height: auto; }
  input, button, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  table { border-collapse: collapse; }
  summary { cursor: pointer; }
  summary::-webkit-details-marker { display: none; }
}

@layer tokens {
  :root {
    color-scheme: light;
    /* Ham palet (03c §3.1 + 11f) */
    --kagit:#F4EFE6; --tezgah:#E4DCCD; --murekkep:#1E1B18; --kursun:#5C564E; --toz:#8A8378;
    --kul:#B8B0A3; --cay:#A3352B; --cay-koyu:#7E2A20; --gece:#1F2A44; --ekran:#000000;
    --buz:#BFF3FF; --kehribar:#FFC56B; --kulak:#FF6B6B; --alan:#FBF8F2; --not-sari:#F6E4B4; --hata-grisi:#7E8C96;
    /* Roller */
    --zemin:var(--kagit); --zemin-2:var(--tezgah); --zemin-koyu:var(--gece); --zemin-bado:var(--ekran);
    --zemin-alan:var(--alan); --zemin-uyari:var(--not-sari);
    --metin:var(--murekkep); --metin-2:var(--kursun); --metin-ters:var(--kagit); --metin-ters-2:var(--kul);
    --metin-bado:var(--buz);
    --vurgu:var(--cay); --vurgu-basili:var(--cay-koyu); --vurgu-ustu:#FFFFFF;
    --cizgi:var(--toz); --cizgi-alan-renk:var(--kursun); --cizgi-guclu-renk:var(--murekkep);
    --durum-gizlilik:var(--kulak); --durum-mesgul:var(--kehribar);
    --odak:var(--cay); --odak-koyu:var(--kagit);
    /* Tipografi */
    --font-baslik:"Outfit", "Outfit Yedek", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-metin:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fs-display:clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);
    --fs-h1:clamp(2.125rem, 1.5rem + 2.8vw, 3.5rem);
    --fs-h2:clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
    --fs-h3:clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --fs-lead:clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
    --fs-body:clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
    --fs-small:0.9375rem; --fs-label:0.8125rem; --fs-button:1.0625rem;
    --fs-bado:clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
    --fs-price:clamp(2rem, 1.6rem + 1.6vw, 3rem);
    --lh-display:1.02; --lh-h:1.1; --lh-body:1.6; --lh-small:1.5;
    /* Boşluk ve yerleşim */
    --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
    --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
    --s-bolum:clamp(4rem, 2rem + 6vw, 8rem);
    --gutter:clamp(1rem, 0.2rem + 3.5vw, 4rem);
    --max:1200px; --max-prose:66ch; --max-form:520px;
    /* Köşe ve çizgi */
    --r-kagit:4px; --r-alan:8px; --r-buton:10px; --r-cip:999px; --r-ekran-s:16px; --r-ekran-l:28px;
    --cizgi-ince:1px solid var(--cizgi);
    --cizgi-alan:1.5px solid var(--cizgi-alan-renk);
    --cizgi-guclu:1.5px solid var(--cizgi-guclu-renk);
    /* Hareket */
    --sure-bado-hizli:120ms; --sure-bado:250ms; --sure-marka:300ms; --sure-marka-yavas:450ms;
    --egri-bado:cubic-bezier(0.65, 0, 0.35, 1); --egri-marka:cubic-bezier(0.25, 0.1, 0.25, 1);
    --ust-yukseklik:56px;
  }
  @media (min-width: 768px) { :root { --ust-yukseklik:72px; } }
}

@layer base {
  html { scroll-padding-top: calc(var(--ust-yukseklik) + 16px); }
  @media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
  body {
    background: var(--zemin); color: var(--metin);
    font-family: var(--font-metin); font-size: var(--fs-body); line-height: var(--lh-body);
    font-variant-ligatures: no-common-ligatures; /* "fi" bağında ı/i noktası kaybolmasın (11f §2.2 kabul testi) */
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
  }
  h1, h2, h3 { font-family: var(--font-baslik); color: var(--metin); text-wrap: balance; }
  h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.06; letter-spacing: -0.015em; }
  h2 { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-h); letter-spacing: -0.01em; }
  h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; }
  p, li { text-wrap: pretty; hyphens: manual; }
  a { color: var(--metin); text-decoration-line: underline; text-decoration-color: var(--vurgu); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness 150ms var(--egri-marka); }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 3px solid var(--odak); outline-offset: 2px; }
  strong { font-weight: 650; }
  small { font-size: var(--fs-small); }
  ::selection { background: var(--not-sari); color: var(--murekkep); }
  table { width: 100%; }
}

@layer layout {
  .l-kap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  .l-bolum { padding-block: var(--s-bolum); background: var(--zemin); }
  .l-bolum--tezgah { background: var(--zemin-2); }
  .l-bolum--gece { background: var(--zemin-koyu); color: var(--metin-ters); }
  .l-bolum--ince { padding-block: var(--s-6); }
  .l-iki { display: grid; gap: var(--s-7); }
  @media (min-width: 1024px) {
    .l-iki { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); }
    .l-iki > :first-child { grid-column: 1 / span 6; }
    .l-iki > :last-child { grid-column: 8 / span 5; }
  }
  main { display: block; }
  section[id] { scroll-margin-top: calc(var(--ust-yukseklik) + 8px); }
}

@layer components {
  /* ---------- Butonlar (11f §2.6) */
  .c-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: 48px; padding: 0 var(--s-5); border: 1.5px solid transparent; border-radius: var(--r-buton);
    font-family: var(--font-metin); font-size: var(--fs-button); font-weight: 600; line-height: 1.2; letter-spacing: 0.01em;
    text-decoration: none; text-align: center; cursor: pointer;
    transition: background-color 150ms var(--egri-marka), color 150ms var(--egri-marka), border-color 150ms var(--egri-marka);
  }
  .c-btn--birincil { background: var(--vurgu); color: var(--vurgu-ustu); border-color: var(--vurgu); }
  .c-btn--birincil:hover { background: var(--vurgu-basili); border-color: var(--vurgu-basili); }
  .c-btn--birincil:active { background: var(--vurgu-basili); transform: translateY(1px); }
  .c-btn--birincil:focus-visible { outline-offset: 3px; }
  .c-btn--ikincil { background: transparent; color: var(--metin); border-color: var(--cizgi-guclu-renk); }
  .c-btn--ikincil:hover, .c-btn--ikincil:active { background: var(--zemin-2); }
  .l-bolum--tezgah .c-btn--ikincil:hover { background: var(--zemin); }
  .c-btn--metin { min-height: 44px; padding: 0 var(--s-1); background: none; border: 0; color: var(--metin); text-decoration: underline; text-decoration-color: var(--vurgu); text-underline-offset: 3px; font-weight: 600; }
  .c-btn--kucuk { min-height: 44px; padding: 0 var(--s-4); font-size: var(--fs-small); }
  .c-btn:disabled, .c-btn[aria-disabled="true"] { background: var(--zemin-2); color: var(--metin-2); border-color: var(--zemin-2); cursor: not-allowed; transform: none; }
  .c-btn[aria-busy="true"] { background: var(--vurgu); color: var(--vurgu-ustu); border-color: var(--vurgu); cursor: progress; }
  .c-btn[aria-busy="true"]::after { content: ""; width: 20px; height: 4px; background: radial-gradient(circle at 2px 2px, currentColor 2px, transparent 2.5px) 0 0 / 8px 4px repeat-x; animation: c-nokta 900ms steps(3, jump-none) infinite; }
  @keyframes c-nokta { from { width: 4px; } to { width: 20px; } }
  .c-dugmeler { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

  /* ---------- Atla bağlantısı */
  .u-atla { background: var(--murekkep); color: var(--kagit); padding: var(--s-3) var(--s-4); z-index: 100; }
  .u-atla:focus { position: fixed !important; top: 8px; left: 8px; }

  /* ---------- Üst çubuk (11g §3.1) */
  .c-ust-cubuk { background: var(--zemin); border-bottom: 1px solid transparent; z-index: 20; }
  .c-ust-cubuk__ic { display: flex; align-items: center; gap: var(--s-5); min-height: 56px; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  .c-ust-cubuk__logo { display: block; margin-left: -10px; margin-right: auto; text-decoration: none; }
  .c-ust-cubuk__logo img { width: 120px; height: auto; }
  .c-ust-cubuk__nav ul { display: flex; gap: var(--s-1); list-style: none; padding: 0; }
  .c-ust-cubuk__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); font-weight: 600; font-size: var(--fs-small); text-decoration-color: transparent; }
  .c-ust-cubuk__nav a:hover { text-decoration-color: var(--vurgu); }
  @media (min-width: 768px) {
    .l-site .c-ust-cubuk { position: sticky; top: 0; }
    .c-ust-cubuk__ic { min-height: 72px; transition: min-height var(--sure-marka) var(--egri-marka); }
    .c-ust-cubuk__logo img { width: 132px; }
    .c-ust-cubuk[data-kaydirildi] { border-bottom-color: var(--cizgi); }
    .c-ust-cubuk[data-kaydirildi] .c-ust-cubuk__ic { min-height: 56px; }
  }

  /* ---------- Atölye cetveli (İ2) */
  .c-cetvel { position: relative; height: 22px; margin-bottom: var(--s-6); border-top: var(--cizgi-ince); }
  .c-cetvel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: repeating-linear-gradient(90deg, var(--cizgi) 0 1px, transparent 1px 8px); }
  .c-cetvel__etiket { position: absolute; left: 0; top: 7px; padding-right: var(--s-3); background: inherit; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--metin-2); line-height: 1.3; }
  .c-cetvel__etiket { background: var(--zemin); }
  .l-bolum--tezgah .c-cetvel__etiket { background: var(--zemin-2); }
  .l-bolum--gece .c-cetvel__etiket { background: var(--zemin-koyu); color: var(--metin-ters-2); }

  /* ---------- Ortak metin parçaları */
  .c-bolum-bas { max-width: 44rem; margin-bottom: var(--s-7); }
  .c-bolum-bas > * + *, .c-metin > * + * { margin-top: var(--s-4); }
  h2 + p, h2 + .c-metin { margin-top: var(--s-4); }
  .c-giris { font-size: var(--fs-lead); line-height: 1.55; }
  .c-not { margin-top: var(--s-4); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--metin-2); max-width: var(--max-prose); }
  .c-not--kutu { padding: var(--s-3) var(--s-4); border-left: 3px solid var(--cizgi); background: var(--zemin-2); border-radius: 0 var(--r-kagit) var(--r-kagit) 0; color: var(--metin); }
  .c-etiket-satir { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--metin-2); font-variant-numeric: tabular-nums; }
  .c-kart { background: var(--zemin); border-radius: var(--r-kagit); padding: var(--s-5); }
  .l-bolum:not(.l-bolum--tezgah) .c-kart { background: var(--zemin-2); }
  @media (min-width: 768px) { .c-kart { padding: var(--s-6); } }

  /* ---------- Kenar notu (İ4) */
  .c-kenar-notu { font-family: var(--font-baslik); font-weight: 500; font-size: 1.125rem; line-height: 1.3; color: var(--vurgu); }
  .c-kenar-notu__ok { fill: none; stroke: var(--vurgu); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

  /* ---------- Durum çipleri (11f §2.9: renksiz anlam) */
  .c-durum { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-cip); border: 1.5px solid var(--murekkep); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; vertical-align: middle; font-variant-numeric: tabular-nums; }
  .c-durum[data-durum="kutuda"], .c-durum[data-durum="bitti"], .c-durum[data-durum="acik"] { background: var(--murekkep); color: var(--kagit); }
  .c-durum[data-durum="test"], .c-durum[data-durum="suruyor"] { color: var(--murekkep); }
  .c-durum[data-durum="test"]::before, .c-durum[data-durum="suruyor"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
  .c-durum[data-durum="yolda"], .c-durum[data-durum="planlandi"], .c-durum[data-durum="hedef"] { border-style: dashed; border-color: var(--kursun); color: var(--kursun); }
  .c-durum:empty { width: 14px; height: 14px; padding: 0; border-radius: 50%; background: linear-gradient(90deg, var(--murekkep) 50%, transparent 50%); }
  .c-durum-satiri { margin-top: var(--s-3); }

  /* ---------- Bado'nun ekranı (11f §3) */
  .c-ekran { flex: none; overflow: visible; --bx: 0px; --by: 0px; }
  .c-ekran__yuz { fill: var(--ekran); }
  .c-ekran__iris { fill: var(--buz); transition: fill var(--sure-bado) var(--egri-bado); }
  .c-ekran__parilti { fill: #fff; }
  rect.c-ekran__goz, ellipse.c-ekran__goz { fill: var(--buz); } /* statik bakim.html / hata.html (eski 100'lük tuval) */
  .c-ekran__kapak, .c-ekran__gulus { fill: var(--ekran); }
  .c-ekran__bakis { transform: translate(var(--bx), var(--by)); transition: transform var(--sure-bado-hizli) var(--egri-bado); }
  .c-ekran__goz { transition: transform var(--sure-bado) var(--egri-bado); }
  .c-ekran__goz--sol, .c-ekran__goz--sol .c-ekran__goz-ic { transform-origin: 82px 120px; }
  .c-ekran__goz--sag, .c-ekran__goz--sag .c-ekran__goz-ic { transform-origin: 158px 120px; }
  .c-ekran__kapak, .c-ekran__gulus { transform: scale(1, 0); transition: transform var(--sure-bado) var(--egri-bado); }
  .c-ekran__kapak--ust { transform-origin: 0 80px; }
  .c-ekran__kapak--alt { transform-origin: 0 160px; }
  .c-ekran__gulus { transform: scale(0); }
  .c-ekran__goz--sol .c-ekran__gulus { transform-origin: 82px 164px; }
  .c-ekran__goz--sag .c-ekran__gulus { transform-origin: 158px 164px; }
  .c-ekran__halka { fill: none; stroke: var(--kehribar); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 666; stroke-dashoffset: 200; transform: rotate(-90deg); transform-origin: 120px 120px; opacity: 0; }
  .c-ekran__kulak { fill: var(--kulak); opacity: 0; }
  .c-ekran__noktalar { fill: var(--buz); opacity: 0; }
  .c-ekran__ter { fill: var(--buz); opacity: 0; }
  .c-ekran__mikrofon { fill: none; stroke: var(--buz); stroke-width: 6; stroke-linecap: round; opacity: 0; }
  .c-ekran__cizik { stroke: var(--kulak); }
  /* göz kırpma: 70 ms kapanma → 40 ms bekleme → 100 ms açılma; aralık JS ile 3–7 sn */
  .c-ekran__goz-ic { animation: c-kirp var(--kirp-sure, 5.2s) var(--kirp-gecikme, 1.2s) infinite; }
  [data-kirp="cift"] .c-ekran__goz-ic { animation-name: c-kirp-cift; }
  @keyframes c-kirp { 0%, 95.4% { transform: scaleY(1); } 96.7%, 97.5% { transform: scaleY(0.08); } 99.4%, 100% { transform: scaleY(1); } }
  @keyframes c-kirp-cift { 0%, 91% { transform: scaleY(1); } 92.3%, 93% { transform: scaleY(0.08); } 94.8%, 95.6% { transform: scaleY(1); } 96.9%, 97.6% { transform: scaleY(0.08); } 99.5%, 100% { transform: scaleY(1); } }
  .c-ekran--acilis .c-ekran__goz-ic { animation: c-acilis 760ms linear 1 both, c-kirp var(--kirp-sure, 5.2s) 2s infinite; }
  @keyframes c-acilis { 0% { transform: scaleY(0.08); } 30% { transform: scaleY(0.08); } 60%, 100% { transform: scaleY(1); } }
  [data-durdu] *, .is-gizli-sekme .c-ekran * { animation-play-state: paused !important; }
  [data-yaziyor] .c-ekran__goz-ic { animation: none; }
  /* ifadeler */
  [data-ifade="dinliyor"] .c-ekran__goz { transform: scale(1.05); }
  [data-ifade="merakli"] { --bx: 8px; --by: -8px; }
  [data-ifade="merakli"] .c-ekran__goz--sol { transform: scale(1.12); }
  [data-ifade="merakli"] .c-ekran__goz--sag { transform: scale(0.86); }
  [data-ifade="mutlu"] { --by: -4px; }
  [data-ifade="mutlu"] .c-ekran__gulus, [data-ifade="muzip"] .c-ekran__goz--sol .c-ekran__gulus { transform: scale(1); }
  [data-ifade="muzip"] .c-ekran__goz--sag .c-ekran__kapak--ust { transform: scale(1, 0.62); }
  [data-ifade="muzip"] .c-ekran__goz--sag .c-ekran__kapak--alt { transform: scale(1, 0.25); }
  [data-ifade="mutlu"] .c-ekran__goz-ic, [data-ifade="muzip"] .c-ekran__goz-ic,
  [data-ifade="uyku"] .c-ekran__goz-ic, [data-ifade="mikrofon-kapali"] .c-ekran__goz-ic, [data-ifade="kulaklar-kapali"] .c-ekran__goz-ic,
  [data-ifade="odak"] .c-ekran__goz-ic, [data-ifade="baglanti-yok"] .c-ekran__goz-ic { animation: none; }
  [data-ifade="dusunuyor"] { --bx: 10px; --by: -10px; }
  [data-ifade="dusunuyor"] .c-ekran__goz { transform: scaleY(0.86); }
  [data-ifade="dusunuyor"] .c-ekran__noktalar { opacity: 1; }
  [data-ifade="dusunuyor"] .c-ekran__noktalar circle { animation: c-dalga 900ms var(--egri-bado) infinite; }
  [data-ifade="dusunuyor"] .c-ekran__noktalar circle:nth-child(2) { animation-delay: 150ms; }
  [data-ifade="dusunuyor"] .c-ekran__noktalar circle:nth-child(3) { animation-delay: 300ms; }
  @keyframes c-dalga { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-10px); } }
  [data-ifade="odak"] .c-ekran__iris { fill: var(--kehribar); }
  [data-ifade="odak"] .c-ekran__goz { transform: scale(1.04, 0.72); }
  [data-ifade="odak"] .c-ekran__halka { opacity: 1; }
  [data-ifade="uyku"] .c-ekran__goz { transform: scale(0.93, 0.083); }
  [data-ifade="uyku"] .c-ekran__bakis { animation: c-nefes 4.5s ease-in-out infinite; }
  @keyframes c-nefes { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
  [data-ifade="mikrofon-kapali"] .c-ekran__kapak, [data-ifade="kulaklar-kapali"] .c-ekran__kapak { transform: scale(1, 0.375); }
  [data-ifade="mikrofon-kapali"] .c-ekran__kulak, [data-ifade="kulaklar-kapali"] .c-ekran__kulak,
  [data-ifade="mikrofon-kapali"] .c-ekran__mikrofon, [data-ifade="kulaklar-kapali"] .c-ekran__mikrofon { opacity: 1; }
  [data-ifade="mikrofon-kapali"], [data-ifade="kulaklar-kapali"] { --by: -6px; }
  [data-ifade="asagi"] { --by: 12px; }
  [data-ifade="mahcup"] { --bx: -12px; --by: 10px; }
  [data-ifade="mahcup"] .c-ekran__goz { transform: scaleY(0.8); }
  [data-ifade="mahcup"] .c-ekran__ter { opacity: 1; }
  [data-ifade="saskin"] .c-ekran__goz { transform: scale(1.16); }
  [data-ifade="baglanti-yok"] .c-ekran__iris { fill: var(--hata-grisi); }
  [data-ifade="baglanti-yok"] .c-ekran__bakis { animation: c-tara 3s var(--egri-bado) infinite alternate; }
  @keyframes c-tara { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
  .c-ekran__kulak, .c-ekran__mikrofon, .c-ekran__noktalar, .c-ekran__ter, .c-ekran__halka { transition: opacity var(--sure-bado) var(--egri-bado); }

  /* ---------- Bado ekran kartı ve balon (İ1) */
  .c-bado { display: flex; align-items: center; gap: var(--s-4); margin-block: var(--s-5); }
  .c-balon {
    position: relative; flex: 1 1 auto; max-width: 28rem; margin-left: 12px;
    background: var(--zemin-bado); color: var(--metin-bado); border-radius: var(--r-ekran-s);
    padding: var(--s-4) var(--s-5); font-size: var(--fs-bado); font-weight: 500; line-height: 1.4;
  }
  .c-balon::before { content: ""; position: absolute; left: -11px; top: 18px; border: 12px solid transparent; border-left: 0; border-right-color: var(--zemin-bado); }
  .c-bado--48 .c-balon { font-size: 1.125rem; padding: var(--s-3) var(--s-4); }
  .c-bado--48 .c-balon::before { top: 12px; }
  .c-bado--160 { flex-wrap: wrap; align-items: flex-start; }
  .c-bado--160 .c-ekran { width: 120px; height: 120px; }
  .c-bado--160 .c-balon { flex-basis: 100%; margin: 12px 0 0; }
  .c-bado--160 .c-balon::before { left: 40px; top: -11px; border: 12px solid transparent; border-top: 0; border-bottom-color: var(--zemin-bado); }
  @media (min-width: 560px) {
    .c-bado--160 { flex-wrap: nowrap; align-items: center; }
    .c-bado--160 .c-ekran { width: 160px; height: 160px; }
    .c-bado--160 .c-balon { flex-basis: auto; margin: 0 0 0 12px; border-radius: var(--r-ekran-l); padding: var(--s-5) var(--s-6); }
    .c-bado--160 .c-balon::before { left: -11px; top: 50%; margin-top: -12px; border: 12px solid transparent; border-left: 0; border-right-color: var(--zemin-bado); }
  }

  /* ---------- Hitap demosu ve seçim çipleri */
  .c-secim { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .c-secim > legend { width: 100%; margin-bottom: var(--s-3); font-weight: 600; font-size: var(--fs-small); }
  .c-secim--cip > input, .c-secim--cip fieldset > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
  .c-secim--cip > label, .c-secim--cip fieldset > label {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); border: var(--cizgi-guclu); border-radius: var(--r-cip);
    font-weight: 600; font-size: var(--fs-small); cursor: pointer; background: transparent; transition: background-color 150ms var(--egri-marka), color 150ms var(--egri-marka);
  }
  .c-secim--cip > label:hover, .c-secim--cip fieldset > label:hover { background: var(--zemin-2); }
  .l-bolum--tezgah .c-secim--cip > label:hover { background: var(--zemin); }
  .c-secim--cip > input:checked + label, .c-secim--cip fieldset > input:checked + label { background: var(--murekkep); color: var(--kagit); border-color: var(--murekkep); }
  .c-secim--cip > input:focus-visible + label, .c-secim--cip fieldset > input:focus-visible + label { outline: 3px solid var(--odak); outline-offset: 2px; }
  .c-secim > :not(input):not(label):not(legend) { flex-basis: 100%; }
  .c-hitap-kutu { margin-top: var(--s-6); }
  .c-hitap__selam { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--zemin-bado); color: var(--metin-bado); border-radius: var(--r-ekran-s); font-size: var(--fs-bado); font-weight: 500; }
  .js .c-hitap .c-hitap__selam { display: none !important; }

  /* ---------- Hero (bölüm 2) */
  .c-hero { padding-top: var(--s-5); padding-bottom: var(--s-8); }
  .c-hero__izgara { display: grid; gap: var(--s-6); }
  .c-hero__ust-satir { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--metin-2); line-height: 1.3; }
  .c-hero__baslik { margin-top: var(--s-4); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.02em; font-weight: 700; max-width: 14ch; }
  .c-hero__alt-baslik { margin-top: var(--s-4); font-size: var(--fs-lead); line-height: 1.55; color: var(--metin-2); max-width: 36rem; }
  .c-hero__durum { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--fs-small); line-height: 1.4; }
  .c-hero .c-form { margin-top: var(--s-5); }
  @media (max-width: 559px) {
    .c-hero { padding-top: var(--s-3); }
    .c-hero__ust-satir .c-ekran { width: 40px; height: 40px; }
    .c-hero__baslik, .c-hero__alt-baslik, .c-hero__durum { margin-top: var(--s-3); }
    .c-hero .c-form { margin-top: var(--s-4); }
    .c-form > * + * { margin-top: var(--s-3); }
    .c-onay { padding-block: 8px; }
  }
  .c-hero__gorsel { position: relative; max-width: 560px; width: 100%; margin-inline: auto; }
  .c-hero__gorsel img { aspect-ratio: 4 / 3; width: 100%; object-fit: contain; }
  .c-hero__not { margin-top: var(--s-3); }
  .c-hero__ok { display: none; }
  /* Mobil: ürün ilk ekranda görünsün → H1'den hemen sonra kompakt görsel, ardından alt başlık ve form (orkestra kararı, QA) */
  @media (max-width: 959px) {
    .c-hero__izgara { gap: 0; }
    .c-hero__metin { display: contents; }
    .c-hero__ust-satir { order: 1; }
    .c-hero__baslik { order: 2; }
    .c-hero__gorsel { order: 3; max-width: 300px; margin-top: var(--s-2); }
    .c-hero__gorsel img { aspect-ratio: 4 / 3; object-fit: contain; }
    .c-hero__alt-baslik { order: 4; }
    .c-hero__durum { order: 5; }
    .c-hero [data-yuva="rezervasyon-cta"] { order: 6; }
    .c-hero .c-form { order: 7; }
    .c-hero__not { display: none; }
  }
  @media (min-width: 960px) {
    .c-hero { padding-top: var(--s-7); }
    .c-hero__izgara { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-items: center; }
    .c-hero__metin { grid-column: 1 / span 6; }
    .c-hero__gorsel { grid-column: 7 / span 6; max-width: none; margin-right: calc(-1 * min(var(--gutter), 48px)); }
    .c-hero__gorsel img { aspect-ratio: 5 / 4; }
    .c-hero__not { position: absolute; left: 0; top: 16%; max-width: 24%; margin: 0; }
    .c-hero__ok { display: block; position: absolute; left: 13%; top: 26%; width: 30%; height: auto; }
    .c-hero .c-etiket { left: 4%; bottom: 8%; }
  }

  /* ---------- Görsel + etiket şeridi (İ5) + ölçü çizgisi (İ3) */
  .c-gorsel { position: relative; }
  .c-gorsel picture, .c-gorsel img { width: 100%; }
  .c-gorsel--dikey img { aspect-ratio: 4 / 5; }
  .c-gorsel--kare img { aspect-ratio: 1; }
  .c-etiket { position: absolute; left: 0; bottom: 0; padding: 5px 10px; background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--r-kagit); font-size: var(--fs-label); font-weight: 600; line-height: 1.2; color: var(--murekkep); }
  .c-olcu { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .c-olcu__cizgi { fill: none; stroke: var(--metin); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
  .c-olcu__uzatma { fill: none; stroke: var(--cizgi); stroke-width: 1px; vector-effect: non-scaling-stroke; }
  .c-olcu__uc { fill: var(--metin); }
  .c-olcu__isaret { fill: none; stroke: var(--metin); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
  .c-olcu__yazi { font-family: var(--font-metin); font-weight: 600; font-size: 44px; fill: var(--metin); paint-order: stroke; stroke: var(--zemin); stroke-width: 10px; stroke-linejoin: round; font-variant-numeric: tabular-nums; }

  /* ---------- Güven şeridi (bölüm 3) */
  .c-guven { display: grid; gap: var(--s-4); }
  .c-guven li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-small); line-height: 1.45; }
  .c-guven strong { display: block; font-size: 1rem; }
  .c-guven__baglanti { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-3); font-weight: 600; font-size: var(--fs-small); }
  .c-ikon { flex: none; fill: none; stroke: var(--metin); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .c-ikon .u-dolu { fill: var(--metin); stroke: none; }
  .c-ikon .u-led { fill: var(--vurgu); stroke: none; }
  .c-ikon .u-kesik { stroke: var(--cizgi); stroke-dasharray: 3 4; }
  @media (min-width: 900px) {
    .l-bolum--ince .l-kap { display: flex; align-items: center; gap: var(--s-5); }
    .c-guven { flex: 1; grid-template-columns: repeat(3, 1fr); gap: 0; }
    .c-guven li { padding: 0 var(--s-5); border-left: var(--cizgi-ince); }
    .c-guven li:first-child { padding-left: 0; border-left: 0; }
    .c-guven__baglanti { margin: 0; white-space: nowrap; }
  }

  /* ---------- Bölüm 4: Bado kim? */
  .c-bado-bolum__urun > * + * { margin-top: var(--s-4); }
  .c-bado-bolum__urun .c-gorsel { max-width: 440px; margin-top: var(--s-5); }
  @media (min-width: 1024px) {
    .c-bado-bolum__urun { padding-top: var(--s-2); }
  }

  /* ---------- Bölüm 5: ritüel kartları */
  .c-rituel-listesi { display: grid; gap: var(--s-4); }
  @media (min-width: 640px) { .c-rituel-listesi { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .c-rituel-listesi { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
  .c-kart-rituel { display: grid; grid-template-columns: 48px 1fr; column-gap: var(--s-4); row-gap: var(--s-2); align-content: start; }
  .c-kart-rituel .c-ekran { grid-row: span 2; }
  .c-kart-rituel h3 { align-self: end; }
  .c-kart-rituel .c-durum { justify-self: start; }
  .c-kart-rituel p { grid-column: 1 / -1; margin-top: var(--s-2); font-size: var(--fs-small); line-height: var(--lh-small); }
  .c-ne-yapar__alt { margin-top: var(--s-8); }
  .c-ne-yapar__alt p + p { margin-top: var(--s-3); }
  .c-turkce h3 { font-size: var(--fs-h3); margin-bottom: var(--s-4); }
  @media (min-width: 1024px) {
    .c-ne-yapar__alt > :first-child { grid-column: 1 / span 5; }
    .c-ne-yapar__alt > :last-child { grid-column: 7 / span 6; }
  }

  /* ---------- Bölüm 6: gizlilik */
  .c-gizlilik { align-items: start; }
  .c-gizlilik .c-gorsel { max-width: 460px; }
  .c-madde + .c-madde { margin-top: var(--s-5); padding-top: var(--s-5); border-top: var(--cizgi-ince); }
  .c-madde h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
  .c-madde p { margin-top: var(--s-2); }
  @media (min-width: 1024px) {
    .c-gizlilik > :first-child { grid-column: 1 / span 5; }
    .c-gizlilik > :last-child { grid-column: 7 / span 6; }
  }
  .c-surgu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-8); max-width: 40rem; }
  .c-surgu__kare { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-3); border: var(--cizgi-guclu); border-radius: var(--r-kagit); }
  .c-surgu__durum { grid-column: 1 / -1; text-align: center; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
  .c-surgu__cizim { width: 72px; height: auto; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .c-surgu__govde { stroke: var(--metin); stroke-width: 1.5; }
  .c-surgu__duvar { stroke: var(--cizgi); stroke-width: 1; stroke-dasharray: 4 4; }
  .c-surgu__kanal { stroke: var(--metin); stroke-width: 1.5; }
  .c-surgu__dugme { fill: var(--metin); transition: transform var(--sure-bado) var(--egri-bado); }
  .c-surgu__dugme--kapali, .c-surgu[data-durum="kapali"] .c-surgu__dugme { transform: translateY(40px); }
  .c-surgu__ok { stroke: var(--cizgi); stroke-width: 1.5; }
  .c-surgu > .c-btn, .c-surgu > .c-not { grid-column: 1 / -1; justify-self: start; }
  .c-surgu > .c-not { margin-top: 0; }
  @media (min-width: 560px) { .c-surgu__cizim { width: 90px; } }
  .js .c-surgu { grid-template-columns: minmax(0, 20rem); }
  .js .c-surgu__kare[data-kare="kapali"] { display: none; }

  /* ---------- Bölüm 7: takvim (cetvel gibi zaman çizgisi) */
  .c-takvim-kutu { max-width: 72rem; }
  .c-takvim { position: relative; display: grid; gap: var(--s-6); margin-bottom: var(--s-6); padding-left: 28px; }
  .c-takvim::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--cizgi); }
  .c-takvim li { position: relative; }
  .c-takvim li::before { content: ""; position: absolute; left: -28px; top: 4px; width: 15px; height: 15px; border-radius: 50%; border: 1.5px dashed var(--kursun); background: var(--zemin); }
  .c-takvim li[data-durum="acik"]::before, .c-takvim li[data-durum="bitti"]::before { border: 1.5px solid var(--murekkep); background: var(--murekkep); }
  .c-takvim li[data-durum="suruyor"]::before { border: 1.5px solid var(--murekkep); background: linear-gradient(90deg, var(--murekkep) 50%, var(--zemin) 50%); }
  .c-takvim__tarih { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--metin-2); }
  .c-takvim h3 { margin-top: var(--s-1); }
  .c-takvim p:not(.c-takvim__tarih) { margin-top: var(--s-1); font-size: var(--fs-small); }
  .c-takvim .c-durum { margin-top: var(--s-3); }
  .c-takvim-kutu > p { max-width: var(--max-prose); }
  .c-takvim-kutu > p + p { margin-top: var(--s-3); }
  @media (min-width: 900px) {
    .c-takvim { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); padding: 36px 0 0; }
    .c-takvim::before { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 6px; background: linear-gradient(var(--cizgi), var(--cizgi)) 0 0 / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--cizgi) 0 1px, transparent 1px 8px); }
    .c-takvim li::before { left: 0; top: -36px; }
  }

  /* ---------- Bölüm 8: fiyat */
  .c-fiyat-izgara { align-items: start; margin-top: var(--s-6); }
  .c-fiyat-kart { padding: var(--s-6); border: var(--cizgi-guclu); border-radius: var(--r-kagit); }
  .c-fiyat-kart .c-gorsel { max-width: 420px; margin-inline: auto; }
  .c-fiyat-kart__yedek { margin-top: var(--s-5); font-size: var(--fs-lead); line-height: 1.5; }
  .c-fiyat { font-family: var(--font-baslik); font-size: var(--fs-price); font-weight: 600; font-variant-numeric: tabular-nums; }
  .c-abonelik > * + * { margin-top: var(--s-4); }
  .c-tablo caption { text-align: left; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--metin-2); padding-bottom: var(--s-3); }
  .c-tablo th, .c-tablo td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: var(--cizgi-ince); }
  .c-tablo th { font-family: var(--font-baslik); font-weight: 600; font-size: 1rem; line-height: 1.3; border-bottom: var(--cizgi-guclu); }
  .c-tablo td { width: 50%; font-size: var(--fs-small); }
  .c-tablo ul { padding-left: 1.1em; }
  .c-tablo li + li { margin-top: var(--s-2); }
  [data-yuva="rezervasyon"] { margin-top: var(--s-7); }
  .c-rezervasyon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }
  @media (min-width: 1024px) {
    .c-fiyat-izgara > :first-child { grid-column: 1 / span 6; }
    .c-fiyat-izgara > :last-child { grid-column: 8 / span 5; }
  }

  /* ---------- Bölüm 9: kimler için */
  .c-segmentler { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
  @media (min-width: 640px) { .c-segmentler { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1100px) { .c-segmentler { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); } }
  .c-segment { display: flex; flex-direction: column; gap: var(--s-3); border: 1.5px solid transparent; transition: border-color 150ms var(--egri-marka); scroll-margin-top: calc(var(--ust-yukseklik) + 16px); }
  .c-segment:hover, .c-segment:focus-within, .c-segment[aria-current="true"] { border-color: var(--murekkep); }
  .c-segment .c-ikon { width: 72px; height: 72px; margin-bottom: var(--s-2); }
  .c-segment p { font-size: var(--fs-small); line-height: var(--lh-small); }
  .c-segment__ek { color: var(--metin-2); }
  .c-segment__secildi { font-weight: 600; }
  .c-segment__cta { margin-top: auto; align-self: flex-start; }

  /* ---------- Bölüm 10: atölye */
  .c-atolye img { width: 100%; max-width: 320px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-kagit); }
  .l-bolum--gece h2, .l-bolum--gece h3 { color: var(--metin-ters); }
  .l-bolum--gece a { color: var(--metin-ters-2); text-decoration-color: currentColor; }
  .l-bolum--gece :focus-visible { outline-color: var(--odak-koyu); }

  /* ---------- Bölüm 11: SSS */
  .c-sss-izgara { display: grid; gap: var(--s-6); }
  .c-sss-izgara__bas > * + * { margin-top: var(--s-4); }
  .c-sss-izgara__iletisim { font-size: var(--fs-small); color: var(--metin-2); }
  @media (min-width: 1024px) {
    .c-sss-izgara { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); }
    .c-sss-izgara__bas { grid-column: 1 / span 4; }
    .c-sss-liste { grid-column: 6 / span 7; }
  }
  .c-sss { border-bottom: var(--cizgi-ince); }
  .c-sss:first-child { border-top: var(--cizgi-ince); }
  .c-sss summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 44px; padding: var(--s-5) 0; list-style: none; }
  .c-sss summary h3 { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem); }
  .c-sss summary::after { content: ""; flex: none; width: 18px; height: 18px; background: linear-gradient(var(--metin), var(--metin)) center / 18px 1.5px no-repeat, linear-gradient(var(--metin), var(--metin)) center / 1.5px 18px no-repeat; transition: transform 200ms var(--egri-marka); }
  .c-sss[open] summary::after { transform: rotate(45deg); }
  .c-sss__yanit { padding-bottom: var(--s-5); max-width: var(--max-prose); }
  .c-sss[open] .c-sss__yanit { animation: c-belir var(--sure-marka) var(--egri-marka); }
  @keyframes c-belir { from { opacity: 0; } to { opacity: 1; } }

  /* ---------- Bölüm 12: son CTA */
  .c-katil { display: grid; gap: var(--s-6); align-items: center; }
  .c-katil__form { max-width: 36rem; }
  .c-katil__form h2 + p { margin-top: var(--s-3); }
  .c-katil__form .c-form { margin-top: var(--s-5); }
  .c-sayac { margin-top: var(--s-3); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
  @media (min-width: 960px) {
    .c-katil { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); }
    .c-katil__form { grid-column: 1 / span 7; }
    .c-katil__bado { grid-column: 9 / span 4; }
  }

  /* ---------- Form (11f §2.7, 11g §5) */
  .c-form { max-width: var(--max-form); }
  .c-form > * + * { margin-top: var(--s-4); }
  .c-alan > label, .c-paylas > label { display: block; margin-bottom: var(--s-2); font-weight: 600; font-size: var(--fs-small); }
  .c-alan input[type="email"], .c-alan input[type="text"], .c-paylas input[type="text"] {
    display: block; width: 100%; height: 52px; padding: 0 var(--s-4); background: var(--zemin-alan); color: var(--metin);
    border: var(--cizgi-alan); border-radius: var(--r-alan); font-size: 1.0625rem; font-family: var(--font-metin);
    transition: border-color 150ms var(--egri-marka);
  }
  .c-alan input::placeholder { color: var(--metin-2); opacity: 1; }
  .c-alan input:hover { border-color: var(--murekkep); }
  .c-alan input:focus-visible { border: 2px solid var(--murekkep); }
  .c-alan input[aria-invalid="true"] { border: 2px solid var(--murekkep); }
  .c-alan input:read-only { background: var(--zemin-2); }
  .c-alan__ipucu { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--metin-2); }
  .c-alan__hata:empty { display: none; }
  .c-alan__hata, .c-alan__oneri, .c-alan > [data-js="oneri"], .c-uyari {
    display: flex; gap: var(--s-2); align-items: flex-start; margin-top: var(--s-2); padding: var(--s-2) var(--s-3);
    background: var(--zemin-uyari); border-left: 3px solid var(--murekkep); border-radius: var(--r-kagit);
    font-size: var(--fs-small); line-height: 1.45; color: var(--murekkep);
  }
  .c-alan__hata::before, .c-uyari[role="alert"]::before {
    content: "!"; flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
    border: 1.5px solid var(--murekkep); font-weight: 700; font-size: 0.8125rem; line-height: 1;
  }
  .c-alan__oneri, .c-alan > [data-js="oneri"] { flex-wrap: wrap; align-items: center; padding-block: 0; }
  .c-alan__oneri .c-btn--metin, .c-alan > [data-js="oneri"] button { min-height: 40px; padding: 0 var(--s-1); background: none; border: 0; font-weight: 600; text-decoration: underline; text-decoration-color: var(--vurgu); text-underline-offset: 3px; }
  .c-uyari { margin-block: var(--s-4); padding-block: var(--s-3); }
  .c-uyari[role="status"] { background: var(--zemin-2); }
  .c-form__ozet { font-weight: 600; font-size: var(--fs-small); }
  .c-form__ilgi { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-height: 36px; padding: 0 var(--s-3); border: var(--cizgi-guclu); border-radius: var(--r-cip); font-size: var(--fs-small); font-weight: 600; }
  .c-onay-grubu > legend { margin-bottom: var(--s-1); font-size: var(--fs-small); font-weight: 600; }
  .c-onay { display: grid; grid-template-columns: 22px 1fr; column-gap: var(--s-3); align-items: start; padding-block: 11px; }
  .c-onay label { font-size: var(--fs-small); line-height: 1.45; cursor: pointer; }
  .c-onay .c-alan__hata { grid-column: 1 / -1; }
  input[type="checkbox"], input[type="radio"] {
    appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; background: var(--zemin-alan);
    border: var(--cizgi-alan); border-radius: 4px; display: inline-grid; place-content: center; cursor: pointer; vertical-align: middle;
  }
  input[type="radio"] { border-radius: 50%; }
  input[type="checkbox"]:checked { background: var(--murekkep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5.5 11.5l3.5 3.5 7.5-8' fill='none' stroke='%23F4EFE6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; border-color: var(--murekkep); }
  input[type="radio"]:checked { background: radial-gradient(circle, var(--murekkep) 0 5px, var(--zemin-alan) 5.5px); border-color: var(--murekkep); }
  .c-onay input { margin-top: 1px; }
  .c-onay-grubu__aciklama, .c-onay-grubu__baglantilar, .c-form__yas, .c-form__kvkk, .c-form__mikro { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--metin-2); }
  .c-onay-grubu__aciklama { margin-top: var(--s-1); }
  .c-onay-grubu__baglantilar { margin-top: var(--s-2); }
  .c-onay-grubu__baglantilar a, .c-form__kvkk a { color: var(--metin); }
  .c-form .c-btn--birincil { width: 100%; }
  @media (min-width: 560px) { .c-form .c-btn--birincil { width: auto; min-width: 14rem; } }
  .c-form__durum:empty { display: none; }
  .c-form__durum { font-size: var(--fs-small); font-weight: 600; }
  .c-form--ust .c-onay-grubu__aciklama { display: inline; }

  /* düz radyo/onay listeleri (çıkış, veri talebi, anket koşullu alanları) */
  fieldset:not(.c-secim):not(.c-onay-grubu) { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3); align-items: center; margin-block: var(--s-4); }
  fieldset:not(.c-secim):not(.c-onay-grubu) > legend { grid-column: 1 / -1; margin-bottom: var(--s-3); font-weight: 600; }
  fieldset:not(.c-secim):not(.c-onay-grubu) > label { min-height: 32px; display: flex; align-items: center; cursor: pointer; }
  fieldset:not(.c-secim):not(.c-onay-grubu) > :not(input):not(label):not(legend) { grid-column: 1 / -1; }
  .c-secim--cip fieldset:not(.c-secim) { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .c-secim--cip fieldset:not(.c-secim) > legend { width: 100%; margin-bottom: var(--s-2); font-size: var(--fs-small); }

  /* ---------- Akış sayfaları (onay, doğrula, doğrulandı, çıkış, veri talebi, 404) */
  .c-akis { max-width: calc(40rem + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  .c-akis > * + * { margin-top: var(--s-4); }
  .c-akis > h1 { margin-top: var(--s-5); }
  .c-akis > .c-bado { margin-top: 0; }
  .c-akis ul:not([class]) { padding-left: 1.2em; }
  .c-akis ul:not([class]) li + li { margin-top: var(--s-1); }
  .c-akis h2 { font-size: var(--fs-h3); margin-top: var(--s-7); }
  .c-akis form > * + * { margin-top: var(--s-4); }
  .c-akis form .c-btn + .c-btn { margin-left: var(--s-2); }
  .c-akis form .c-btn--ikincil + p, .c-akis [data-js="yeniden-gonder"] [data-js="durum"] { font-size: var(--fs-small); color: var(--metin-2); }
  .c-anket, .c-paylas { margin-top: var(--s-8) !important; padding-top: var(--s-6); border-top: var(--cizgi-ince); }
  .c-anket > * + *, .c-paylas > * + * { margin-top: var(--s-4); }
  .c-anket form fieldset[data-adim] { margin-top: var(--s-6); }
  .c-anket form fieldset[data-adim] > legend { font-family: var(--font-baslik); font-size: var(--fs-h3); font-weight: 600; }
  .c-anket__kosullu { margin-top: var(--s-4); }
  .c-anket__kosullu > input[type="checkbox"] { margin-right: var(--s-3); }
  .c-anket__kosullu > label { font-size: var(--fs-small); }
  @supports selector(:has(*)) {
    .c-anket__kosullu[data-kosul="adimla"] { display: none; }
    fieldset:has(#a-hitap-adimla:checked) .c-anket__kosullu[data-kosul="adimla"] { display: block; }
    .c-anket__kosullu[data-kosul="kurumsal"] { display: none; }
    fieldset:has(#a-ilgi-kurumsal:checked) .c-anket__kosullu[data-kosul="kurumsal"] { display: block; }
  }
  .c-anket__ilerleme { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--metin-2); }
  .c-anket [data-js="durum"]:empty { display: none; }
  .c-anket [data-js="durum"] { font-size: var(--fs-small); color: var(--metin-2); }
  .c-paylas ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding: 0; list-style: none; }
  .c-paylas ul a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font-weight: 600; }
  .c-paylas ul a .c-ikon { stroke: currentColor; }
  .c-paylas ul a .c-ikon .u-dolu { fill: currentColor; }
  .c-paylas [data-js="kopyala"] { margin-top: var(--s-2); }

  /* ---------- Yasal ve iletişim */
  .c-yasal { max-width: calc(var(--max-prose) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  .c-yasal > * + *, .c-yasal__govde > * + * { margin-top: var(--s-4); }
  .c-yasal__surum { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--metin-2); font-variant-numeric: tabular-nums; }
  .c-yasal h2 { font-size: var(--fs-h3); margin-top: var(--s-7); }
  .c-yasal__govde h2, .c-yasal__govde h3 { scroll-margin-top: calc(var(--ust-yukseklik) + 16px); }
  .c-yasal nav ul { padding-left: 1.2em; }
  .c-yasal__govde ul, .c-yasal__govde ol { padding-left: 1.3em; }
  .c-yasal__govde table { font-size: var(--fs-small); }
  .c-yasal__govde th, .c-yasal__govde td { text-align: left; vertical-align: top; padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: var(--cizgi-ince); }
  .c-yasal aside.c-not { padding: var(--s-4); background: var(--zemin-2); border-radius: var(--r-kagit); color: var(--metin); font-size: var(--fs-body); }
  .c-yasal dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--s-2) var(--s-5); }
  .c-yasal dt { font-weight: 600; }
  .c-yasal dd { overflow-wrap: anywhere; }
  @media (max-width: 559px) { .c-yasal dl { grid-template-columns: 1fr; } .c-yasal dd { margin-bottom: var(--s-3); } }

  /* ---------- Yapışkan alt CTA (yalnız mobil, yalnız landing) */
  .c-yapiskan { position: fixed; inset: auto 0 0 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 64px; padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom)); background: var(--zemin); border-top: var(--cizgi-ince); font-size: var(--fs-small); font-weight: 600; }
  @media (prefers-reduced-motion: no-preference) { .c-yapiskan { animation: c-yukari 150ms var(--egri-marka); } }
  @keyframes c-yukari { from { transform: translateY(100%); } to { transform: none; } }
  @media (min-width: 768px) { .c-yapiskan { display: none !important; } }
  body:has(.c-yapiskan:not([hidden])) { padding-bottom: 72px; }

  /* ---------- Bilgi bandı (çerez onay bandı DEĞİL). JS'siz: akışta; JS ile: içeriği itmeyen küçük kart. */
  .c-bant { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--gutter); background: var(--zemin-2); font-size: var(--fs-small); line-height: 1.45; }
  .c-bant p { flex: 1 1 18rem; }
  @media (min-width: 768px) { .js .c-bant { position: fixed; z-index: 40; left: auto; right: var(--s-3); bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); max-width: 30rem; padding: var(--s-3) var(--s-4); border: var(--cizgi-guclu); border-radius: var(--r-kagit); background: var(--zemin); } }
  .c-bant .c-btn { min-height: 44px; }

  /* ---------- Altbilgi (Gece) */
  .c-alt-bilgi { background: var(--zemin-koyu); color: var(--metin-ters); padding-block: var(--s-8) var(--s-7); font-size: var(--fs-small); }
  .c-alt-bilgi a { color: var(--metin-ters-2); text-decoration-color: currentColor; display: inline-flex; align-items: center; min-height: 44px; }
  .c-alt-bilgi a:hover { color: var(--metin-ters); }
  .c-alt-bilgi :focus-visible { outline-color: var(--odak-koyu); }
  .c-alt-bilgi h2 { font-family: var(--font-metin); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--metin-ters-2); margin: var(--s-5) 0 var(--s-1); }
  .c-alt-bilgi__izgara { display: grid; gap: var(--s-6); }
  .c-alt-bilgi ul { list-style: none; padding: 0; }
  .c-alt-bilgi__marka p + p { margin-top: var(--s-2); color: var(--metin-ters-2); }
  .c-alt-bilgi__marka img { width: 132px; margin-left: -10px; margin-bottom: var(--s-3); }
  @media (min-width: 768px) {
    .c-alt-bilgi__izgara { grid-template-columns: 2fr 1fr 1fr; }
    .c-alt-bilgi h2 { margin-top: 0; }
  }
  .c-alt-bilgi--kisa { padding-block: var(--s-6); }
  .c-alt-bilgi__kisa { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-5); }
  .c-alt-bilgi__kisa span { color: var(--metin-ters-2); }
  .l-akis .c-ust-cubuk__ic { justify-content: center; }
  .l-akis .c-ust-cubuk__logo { margin: 0; }
  .l-akis main, .l-site main > .c-akis, .l-site main > .c-yasal { padding-block: var(--s-7) var(--s-9); }
}

@layer utilities {
  @media (max-width: 767px) { .u-masaustu { display: none !important; } }
  @media (min-width: 768px) { .u-mobil { display: none !important; } }
  @media (max-width: 959px) { .c-hero__alt-baslik--uzun { display: none !important; } }
  @media (min-width: 960px) { .c-hero__alt-baslik--kisa { display: none !important; } }

  /* Hareket azaltma (11f §2.10-5): göz, nokta dalgası, geçişler kapanır; ifadeler durağan olarak yine görünür. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
  @media print {
    .c-ust-cubuk, .c-yapiskan, .c-bant, .c-alt-bilgi, .c-form, .c-cetvel { display: none !important; }
    body { background: #fff; }
  }
}

/* ---------------------------------------------------------------- İŞLEVSEL (katmansız: her katmandan güçlü) */
[hidden] { display: none !important; }
.u-gorunmez, .c-form__tuzak {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.c-form__tuzak { left: -10000px; }
.u-atla { position: absolute; left: -10000px; }
.u-atla:focus { position: static; }
.c-hitap__selam { display: none; }
.c-hitap:has(#h-hocam:checked) [data-selam="hocam"],
.c-hitap:has(#h-kanka:checked) [data-selam="kanka"],
.c-hitap:has(#h-adinla:checked) [data-selam="adinla"],
.c-hitap:has(#h-siz:checked) [data-selam="siz"] { display: block; }
