@import url('fonts.css');

/* =====================================================================
   QR STUDYO

   Yon: sicak ama kurumsal. Kagit tonu bir zemin uzerinde derin petrol
   yesili ve pirinc sarisi; espresso murekkep. Derinlik katmanli yumusak
   golgelerle kurulur, sus amacli degil hiyerarsi amacli.

   Onceki iki denemeden ders:
     - Spesifikasyon foyu (mono etiketler, sifir yuvarlaklik) fazla soguktu.
     - Cikartma (sert ofset golge, egik nesneler) fazla oyuncuydu.
   Bu surum ikisinin arasini tutar: yumusak ve olculu yuvarlaklik, ince
   kenarliklar, guclu tipografik hiyerarsi, olculu hareket.

   Hareket bir "an" olarak kurgulanmistir, dagitilmis efektler olarak
   degil: sayfa acilisinda kademeli yukselme, kaydirinca bolum belirmesi,
   masthead arkasinda cok dusuk kontrastli bir QR modul alani.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokenlar — ACIK TEMA (isaretlenmemis varsayilan)
   --------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Zeminler */
  --paper:      #f6f2ea;
  --sheet:      #fffefb;
  --sheet-2:    #f9f6f0;
  --sheet-3:    #efe9dd;

  /* Murekkep — sicak espresso, saf siyah degil */
  --ink:        #1e1a16;
  --ink-2:      #5c534a;
  --ink-3:      #857b70;
  --ink-4:      #aaa093;

  --rule:       #e2dbcd;
  --rule-2:     #cdc4b2;

  /* Birincil — derin petrol yesili. Sicak kagit uzerinde hem guven
     verir hem de varsayilan arayuz mavisine benzemez. */
  --primary:    #10635e;
  --primary-2:  #0b4b47;
  --primary-3:  #e2efed;   /* cok acik zemin */
  --on-primary: #ffffff;

  /* Ikincil — pirinc */
  --brass:      #a4762a;
  --brass-2:    #f5ead5;

  /* Semantik */
  --ok:         #16704e;
  --ok-bg:      #e3f2ea;
  --warn:       #9a6410;
  --warn-bg:    #fbeed6;
  --crit:       #b3243f;
  --crit-bg:    #fce6ea;

  /* Tipografi */
  --display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans:    'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;

  /* Golgeler — katmanli ve yumusak; derinlik icin, sus icin degil */
  --sh-1: 0 1px 2px rgba(30, 26, 22, .05);
  --sh-2: 0 1px 2px rgba(30, 26, 22, .05), 0 4px 12px -4px rgba(30, 26, 22, .10);
  --sh-3: 0 2px 4px rgba(30, 26, 22, .05), 0 12px 28px -10px rgba(30, 26, 22, .16);
  --sh-4: 0 4px 8px rgba(30, 26, 22, .06), 0 24px 48px -16px rgba(30, 26, 22, .22);

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;

  --wrap: 1220px;
  --gutter: clamp(16px, 4vw, 36px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Sistem koyu — acik tema acikca secilmediyse */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper:      #14120f;
    --sheet:      #1c1916;
    --sheet-2:    #24201c;
    --sheet-3:    #2f2a24;

    --ink:        #f2ede4;
    --ink-2:      #b3a99c;
    --ink-3:      #8a8074;
    --ink-4:      #635b51;

    --rule:       #332e28;
    --rule-2:     #453e36;

    --primary:    #4fb8ad;
    --primary-2:  #6fcdc3;
    --primary-3:  #10302e;
    --on-primary: #04211f;

    --brass:      #d8a54a;
    --brass-2:    #35291a;

    --ok:         #4fbe8c;
    --ok-bg:      #10281e;
    --warn:       #d9a03e;
    --warn-bg:    #2e2411;
    --crit:       #f0637f;
    --crit-bg:    #331119;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-2: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px -4px rgba(0, 0, 0, .5);
    --sh-3: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 28px -10px rgba(0, 0, 0, .6);
    --sh-4: 0 4px 8px rgba(0, 0, 0, .45), 0 24px 48px -16px rgba(0, 0, 0, .7);
  }
}

/* Koyu tema acikca secildiginde */
:root[data-theme="dark"] {
  color-scheme: dark;

  --paper:      #14120f;
  --sheet:      #1c1916;
  --sheet-2:    #24201c;
  --sheet-3:    #2f2a24;

  --ink:        #f2ede4;
  --ink-2:      #b3a99c;
  --ink-3:      #8a8074;
  --ink-4:      #635b51;

  --rule:       #332e28;
  --rule-2:     #453e36;

  --primary:    #4fb8ad;
  --primary-2:  #6fcdc3;
  --primary-3:  #10302e;
  --on-primary: #04211f;

  --brass:      #d8a54a;
  --brass-2:    #35291a;

  --ok:         #4fbe8c;
  --ok-bg:      #10281e;
  --warn:       #d9a03e;
  --warn-bg:    #2e2411;
  --crit:       #f0637f;
  --crit-bg:    #331119;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px -4px rgba(0, 0, 0, .5);
  --sh-3: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 28px -10px rgba(0, 0, 0, .6);
  --sh-4: 0 4px 8px rgba(0, 0, 0, .45), 0 24px 48px -16px rgba(0, 0, 0, .7);
}

/* ---------------------------------------------------------------------
   2. Temel
   --------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0; line-height: 1.18;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.2vw, 2.95rem); font-weight: 650; letter-spacing: -0.032em; }
h2 { font-size: 1.1875rem; }
h3 { font-size: 1rem; letter-spacing: -0.014em; }

p { margin: 0; }

a { color: var(--primary); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.page { flex: 1; padding-bottom: 80px; }

.muted { color: var(--ink-2); }
.small { font-size: 0.8125rem; }
.mono  { font-family: var(--mono); font-size: 0.8125rem; }
.center { text-align: center; }

.hidden,
[hidden] { display: none !important; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px 4px 10px;
  background: var(--primary-3);
  color: var(--primary);
  border-radius: 999px;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.01em;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: currentColor; flex: none;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

::selection { background: var(--primary-3); color: var(--primary-2); }

/* ---------------------------------------------------------------------
   3. Hareket — kurgulanmis bir acilis, dagitilmis efektler degil
   --------------------------------------------------------------------- */

/* Sayfa acilisinda kademeli yukselme */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.rise {
  animation: rise .62s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

/* Kaydirinca beliren bolumler (effects.js isaretler) */
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--d, 0ms);
}

/* Onizleme yeniden cizildiginde kisa bir belirme */
@keyframes pop {
  from { opacity: 0; transform: scale(.965); }
  to   { opacity: 1; transform: none; }
}
.pop { animation: pop .32s var(--ease) both; }

/* Masthead arkasindaki modul alani */
.hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  /* Fisilti seviyesinde: hero demosu asil gorsel; bu yalnizca dokudur. */
  opacity: .22;
  /* Metnin arkasinda kaybolsun, kenarlara dogru silinsin */
  mask-image:
    linear-gradient(to bottom, #000 20%, transparent 96%),
    linear-gradient(to right, transparent 0%, #000 45%);
  -webkit-mask-image:
    linear-gradient(to bottom, #000 20%, transparent 96%),
    linear-gradient(to right, transparent 0%, #000 45%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

/* ---------------------------------------------------------------------
   4. Ust bant
   --------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.5) blur(12px);
  -webkit-backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
/* Sayfa kaydirilinca baslik zeminden ayrilir */
.site-header.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: var(--sh-2);
}

.header-inner { display: flex; align-items: center; gap: 20px; height: 60px; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-family: var(--display);
  font-weight: 650; font-size: 1.0625rem;
  letter-spacing: -0.03em;
}
.brand:hover { text-decoration: none; }
.brand .mark {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 8px;
  box-shadow: var(--sh-2);
  transition: transform .3s var(--ease);
}
.brand:hover .mark { transform: scale(1.06) rotate(-4deg); }
.brand .mark svg { width: 16px; height: 16px; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }

.site-nav a {
  position: relative;
  padding: 7px 13px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 0.875rem; font-weight: 500;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.site-nav a::after {
  content: ""; position: absolute;
  left: 13px; right: 13px; bottom: 2px; height: 2px;
  background: var(--primary); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .26s var(--ease);
}
.site-nav a:hover { color: var(--ink); text-decoration: none; }
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a.is-active { color: var(--primary); font-weight: 600; }
.site-nav a.is-active::after { transform: scaleX(1); }

.theme-toggle {
  margin-left: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  color: var(--ink-2);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color .16s, border-color .16s, transform .3s var(--ease);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--rule-2); transform: rotate(28deg); }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

/* ---------------------------------------------------------------------
   5. Masthead
   --------------------------------------------------------------------- */

.masthead {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding: 52px 0 38px;
}
/* DIKKAT: hero-canvas'i disarida birak. Ayni ozgullukte oldugu icin
   `.masthead > *` onun position:absolute degerini ezer, canvas izgara
   ogesine donusur ve masthead duzeni bozulur. */
.masthead > :not(.hero-canvas) { position: relative; z-index: 1; }

.masthead .eyebrow { margin-bottom: 16px; }
.masthead h1 { margin-bottom: 14px; }
.masthead .lede { max-width: 54ch; font-size: 1.0125rem; color: var(--ink-2); }

/* Sag kunye — rakam onde, aciklama arkada */
.colophon {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
}
.colophon > * {
  padding: 14px 18px;
  background: var(--sheet);
  font-size: 0.8125rem;
  color: var(--ink-2);
  white-space: nowrap;
}
.colophon b {
  display: block;
  font-family: var(--display);
  font-size: 1.375rem; font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 2px;
}

/* Guven satiri — masthead altinda kisa, isaretli maddeler */
.trust-row {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 18px 0 0; padding: 0;
  font-size: 0.875rem; color: var(--ink-2);
}
.trust-row li { display: inline-flex; align-items: center; gap: 8px; }
/* Onay rozeti: maske olarak SVG (disk icinden tik oyulmus).
   Renk `background`'tan geldigi icin her iki temada da dogru calisir —
   gomulu SVG'ye renk yazsaydik koyu temada sabit kalirdi. */
.trust-row li::before {
  content: "";
  width: 16px; height: 16px; flex: none;
  background: var(--primary);
  -webkit-mask: var(--check-mask) center / contain no-repeat;
  mask: var(--check-mask) center / contain no-repeat;
}
:root {
  --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm3.68-9.86a.9.9 0 0 0-1.36-1.18L7.06 8.72 5.6 7.3A.9.9 0 0 0 4.35 8.6l2.13 2.05a.9.9 0 0 0 1.3-.06l3.9-4.45z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   5b. Hero demosu — stok gorsel yerine urunun kendisi
   --------------------------------------------------------------------- */

/* Genislik: 216 px QR + 2 x 26 px sahne dolgusu + 2 x 1 px kenarlik = 270.
   Dar tutulursa QR overflow:hidden ile kirpilir. */
.hero-demo {
  width: 286px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.hero-demo.is-ready { opacity: 1; }

.hero-demo-stage {
  position: relative;
  display: grid; place-items: center;
  padding: 26px;
  background: var(--sheet-2);
  border-bottom: 1px solid var(--rule);
}
.hero-demo-canvas { display: block; }

/* Nisangah — dort kose parantezi, tararken aksan rengine doner */
.hero-demo-frame {
  position: absolute; inset: 14px;
  pointer-events: none;
}
.hero-demo-frame::before,
.hero-demo-frame::after {
  content: ""; position: absolute; width: 26px; height: 26px;
  border: 2px solid var(--rule-2); border-radius: 8px;
  transition: border-color .25s var(--ease);
}
.hero-demo-frame::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hero-demo-frame::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.hero-demo-stage.is-scanning .hero-demo-frame::before,
.hero-demo-stage.is-scanning .hero-demo-frame::after { border-color: var(--primary); }
.hero-demo-stage.is-hit .hero-demo-frame::before,
.hero-demo-stage.is-hit .hero-demo-frame::after { border-color: var(--ok); }

/* Tarama cizgisi — konumu JS tarafindan verilir, canvas boyamasiyla senkron */
.hero-demo-line {
  position: absolute;
  left: 26px; right: 26px; top: 26px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--primary) 60%, transparent);
  opacity: 0;
  transition: opacity .15s linear;
  pointer-events: none;
}

/* Sonuc seridi */
.hero-demo-result {
  display: grid; gap: 2px;
  padding: 13px 16px 15px;
  min-height: 78px;
}
.hero-demo-kind {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; margin-bottom: 4px;
  font-size: 0.6875rem; font-weight: 600;
  border-radius: 999px;
  background: var(--sheet-3); color: var(--ink-3);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.hero-demo-kind::before {
  content: ""; width: 5px; height: 5px; border-radius: 999px;
  background: currentColor;
}
.hero-demo.is-read .hero-demo-kind { background: var(--ok-bg); color: var(--ok); }

.hero-demo-l1 {
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.012em;
  color: var(--ink);
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-demo-l2 {
  font-size: 0.8125rem; color: var(--ink-3);
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s var(--ease) 60ms, transform .3s var(--ease) 60ms;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-demo.is-read .hero-demo-l1,
.hero-demo.is-read .hero-demo-l2 { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   6. Yuzeyler
   --------------------------------------------------------------------- */

.sheet {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.sheet-pad { padding: 24px var(--pad, 24px); }

.section-rule { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.section-rule .eyebrow { margin: 0; }

/* ---------------------------------------------------------------------
   7. Reklam alanlari
   --------------------------------------------------------------------- */

.ad-slot {
  display: block;
  margin: 26px 0;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--sheet-2);
  overflow: hidden;
}
.ad-slot .ad-label {
  display: block;
  padding: 3px 10px;
  font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-4);
  border-bottom: 1px solid var(--rule);
  background: var(--sheet-3);
}
/* Yer onceden ayrilir: reklam gelince sayfa zıplamaz */
.ad-slot .ad-body {
  display: grid; place-items: center;
  min-height: var(--ad-h, 90px);
  padding: 6px;
}
.ad-slot .ad-empty {
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--ink-4);
}
.ad-sidebar { margin: 0; }
.ad-leaderboard { margin-top: 0; }

/* QuizSite tanitim afisi — reklam agindan bagimsiz, dogrudan bagli gorsel.
   Kap genisse afis dogal olcusunde durur, darsa kuculur. */
.promo {
  display: block; margin: 24px 0; line-height: 0;
  transition: opacity .16s var(--ease);
}
.promo img {
  display: block;
  width: 100%; height: auto;
  margin-inline: auto;
  border-radius: var(--r);
}
.promo:hover { opacity: .93; }
/* Izgara boslugu olan sag sutunlarda ek margin gerekmez. */
.gen-side .promo { margin: 0; }

@media (max-width: 720px) {
  .ad-slot .ad-body { min-height: var(--ad-h-mobile, 100px); }
}

/* ---------------------------------------------------------------------
   8. Dugmeler
   --------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px;
  font: inherit; font-size: 0.875rem; font-weight: 550; line-height: 1.25;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--sh-1);
  transition: background .16s var(--ease), border-color .16s var(--ease),
              box-shadow .2s var(--ease), transform .16s var(--ease);
}
.btn:hover {
  background: var(--sheet-2); border-color: var(--ink-3);
  box-shadow: var(--sh-2); transform: translateY(-1px);
  text-decoration: none;
}
.btn:active { transform: translateY(0); box-shadow: var(--sh-1); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  box-shadow: var(--sh-2);
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-2); border-color: var(--primary-2);
  box-shadow: var(--sh-3); transform: translateY(-1px);
}

/* Birincil dugmede tikla-dalgasi (effects.js konumu belirler) */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary .ripple {
  position: absolute; border-radius: 999px;
  background: rgba(255, 255, 255, .38);
  transform: scale(0); opacity: 1;
  animation: ripple .55s var(--ease) forwards;
  pointer-events: none;
}
@keyframes ripple {
  to { transform: scale(2.6); opacity: 0; }
}

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); box-shadow: none; }
.btn-ghost:hover { background: var(--sheet-3); border-color: transparent; color: var(--ink); box-shadow: none; }

.btn-block { width: 100%; }
.btn-sm { padding: 5px 11px; font-size: 0.8125rem; border-radius: var(--r-sm); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------------------------------------------------------------------
   9. Form alanlari
   --------------------------------------------------------------------- */

.field { margin-bottom: 15px; }
.field:last-child { margin-bottom: 0; }

.field > label,
.field-label {
  display: block; margin-bottom: 6px;
  font-size: 0.8125rem; font-weight: 550;
  color: var(--ink-2);
}

.field input[type="text"], .field input[type="url"], .field input[type="email"],
.field input[type="tel"], .field input[type="number"], .field input[type="date"],
.field input[type="datetime-local"], .field input[type="password"],
.field select, .field textarea,
select.control {
  width: 100%;
  padding: 9px 12px;
  font: inherit; font-size: 0.9375rem;
  color: var(--ink);
  background: var(--sheet-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  transition: border-color .16s var(--ease), background .16s var(--ease),
              box-shadow .16s var(--ease);
}
.field textarea { min-height: 92px; resize: vertical; line-height: 1.55; font-size: 0.875rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary); background: var(--sheet);
  box-shadow: 0 0 0 3px var(--primary-3);
  outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }

.field .hint { margin-top: 5px; font-size: 0.8125rem; color: var(--ink-3); line-height: 1.5; }
.field .err  { margin-top: 5px; font-size: 0.8125rem; color: var(--crit); font-weight: 550; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--crit); }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.field-grid--phone { grid-template-columns: 90px minmax(0, 1fr); }

/* Onay kutusu */
.check {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 11px;
  font-size: 0.875rem; line-height: 1.5; color: var(--ink);
  cursor: pointer;
}
.check:last-child { margin-bottom: 0; }

.check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: none; position: relative;
  width: 18px; height: 18px; margin: 1px 0 0;
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              box-shadow .16s var(--ease);
}
.check:hover input[type="checkbox"] { border-color: var(--ink-3); }
.check input[type="checkbox"]:checked {
  background: var(--primary); border-color: var(--primary);
  box-shadow: var(--sh-1);
}
.check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute; left: 5.5px; top: 2px;
  width: 4px; height: 9px;
  border: solid var(--on-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

/* Renk secici */
.color-field {
  display: flex; align-items: stretch;
  border: 1px solid var(--rule-2); border-radius: var(--r); overflow: hidden;
  transition: border-color .16s, box-shadow .16s;
}
.color-field:hover { border-color: var(--ink-3); }
.color-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-3); }
.color-field input[type="color"] {
  width: 40px; height: 36px; flex: none;
  padding: 3px; background: var(--sheet-2);
  border: 0; border-right: 1px solid var(--rule);
  cursor: pointer;
}
.color-field .color-hex {
  flex: 1; min-width: 0; padding: 0 11px;
  font-family: var(--mono); font-size: 0.8125rem;
  text-transform: uppercase;
  color: var(--ink); background: var(--sheet-2); border: 0;
}
.color-field .color-hex:focus { outline: none; background: var(--sheet); }

/* Kaydirici */
.range-field { display: flex; align-items: center; gap: 14px; }
.range-field input[type="range"] {
  flex: 1; min-width: 0; height: 20px;
  appearance: none; -webkit-appearance: none;
  background: transparent; cursor: pointer;
}
.range-field input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; background: var(--sheet-3); border-radius: 999px;
}
.range-field input[type="range"]::-moz-range-track {
  height: 4px; background: var(--sheet-3); border-radius: 999px;
}
.range-field input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; margin-top: -6px;
  background: var(--primary);
  border: 2px solid var(--sheet); border-radius: 999px;
  box-shadow: var(--sh-2);
  transition: transform .16s var(--ease);
}
.range-field input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--primary);
  border: 2px solid var(--sheet); border-radius: 999px;
  box-shadow: var(--sh-2);
}
.range-field input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
.range-field output {
  min-width: 58px; text-align: right; flex: none;
  font-size: 0.8125rem; font-weight: 550;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------------
   10. Tip sekmeleri
   --------------------------------------------------------------------- */

.type-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
}

.type-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  font: inherit; font-size: 0.8125rem; font-weight: 500; line-height: 1.3;
  color: var(--ink-2);
  background: var(--sheet-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  transition: color .16s var(--ease), background .16s var(--ease),
              border-color .16s var(--ease), box-shadow .2s var(--ease),
              transform .16s var(--ease);
}
.type-tab:hover {
  color: var(--ink); border-color: var(--rule-2);
  background: var(--sheet); transform: translateY(-1px); box-shadow: var(--sh-1);
}
.type-tab.is-active {
  color: var(--on-primary);
  background: var(--primary);
  border-color: var(--primary);
  font-weight: 600;
  box-shadow: var(--sh-2);
}
.type-tab svg { width: 14px; height: 14px; flex: none; }

/* ---------------------------------------------------------------------
   11. Akordeon paneller
   --------------------------------------------------------------------- */

.panel { border-top: 1px solid var(--rule); }

.panel-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 15px 20px;
  font: inherit; color: var(--ink);
  background: transparent; border: 0;
  text-align: left; cursor: pointer;
  transition: background .16s var(--ease);
}
.panel-head:hover { background: var(--sheet-2); }

.panel-head .panel-name {
  font-family: var(--display);
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.018em;
}

.panel-state {
  margin-left: auto;
  display: flex; align-items: center; gap: 7px;
  font-size: 0.8125rem; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .2s var(--ease);
}
.panel-state .chip {
  display: inline-block; width: 13px; height: 13px; flex: none;
  border: 1px solid var(--rule-2); border-radius: 3px;
}
.panel-head[aria-expanded="true"] .panel-state { opacity: 0; }

.panel-head .chev {
  flex: none; margin-left: 4px; color: var(--ink-3);
  transition: transform .28s var(--ease), color .16s;
}
.panel-head[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--primary); }

.panel-head .panel-icon {
  flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  background: var(--sheet-3);
  border-radius: 8px;
  color: var(--ink-2);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.panel-head[aria-expanded="true"] .panel-icon { background: var(--primary-3); color: var(--primary); }

.panel-body { padding: 2px 20px 26px; }
.panel-body:not([hidden]) { animation: rise .34s var(--ease) both; }

.panel-group { margin-bottom: 24px; }
.panel-group:last-child { margin-bottom: 0; }
.panel-group > .group-title {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink);
}

/* ---------------------------------------------------------------------
   12. Secim izgaralari
   --------------------------------------------------------------------- */

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }

.swatch {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 11px 5px 9px;
  background: var(--sheet-2);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  cursor: pointer;
  font-size: 0.6875rem; font-weight: 500;
  color: var(--ink-3);
  text-align: center; line-height: 1.3;
  transition: transform .16s var(--ease), border-color .16s, background .16s,
              box-shadow .2s var(--ease);
}
.swatch:hover {
  color: var(--ink-2); border-color: var(--rule-2); background: var(--sheet);
  transform: translateY(-2px); box-shadow: var(--sh-2);
}
.swatch.is-active {
  color: var(--primary); background: var(--primary-3);
  border-color: var(--primary); box-shadow: var(--sh-1);
}
.swatch svg { width: 30px; height: 30px; display: block; color: var(--ink-2); }
.swatch.is-active svg { color: var(--primary); }

.wm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 7px; }
.wm-item {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; padding: 7px;
  background: var(--sheet-2);
  border: 1px solid var(--rule); border-radius: var(--r);
  cursor: pointer;
  transition: transform .16s var(--ease), border-color .16s, box-shadow .2s var(--ease);
}
.wm-item:hover {
  border-color: var(--rule-2); transform: translateY(-2px) scale(1.04);
  box-shadow: var(--sh-2);
}
.wm-item.is-active {
  border-color: var(--primary); background: var(--primary-3); box-shadow: var(--sh-1);
}
.wm-item img { width: 100%; height: 100%; object-fit: contain; }

/* ---------------------------------------------------------------------
   13. Uretici duzeni
   --------------------------------------------------------------------- */

.gen-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 22px;
  align-items: start;
}

.gen-form {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.gen-side { position: sticky; top: 78px; display: grid; gap: 16px; }

.preview-card {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 18px;
}

.preview-box {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 252px; padding: 18px;
  background: var(--sheet-2);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
}
.preview-box canvas, .preview-box svg, .preview-box img {
  max-width: 100%; height: auto; display: block;
  border-radius: 4px;
  box-shadow: var(--sh-3);
}
.preview-box.is-empty { color: var(--ink-3); font-size: 0.875rem; text-align: center; }

.preview-box.is-transparent {
  background-image:
    linear-gradient(45deg, var(--sheet-3) 25%, transparent 25%, transparent 75%, var(--sheet-3) 75%),
    linear-gradient(45deg, var(--sheet-3) 25%, transparent 25%, transparent 75%, var(--sheet-3) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

/* QR cizilirken parlama */
.preview-box.is-busy::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%,
              color-mix(in srgb, var(--primary) 12%, transparent) 50%, transparent 62%);
  animation: shimmer 1.1s linear infinite;
}
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.preview-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  padding: 12px 2px 0;
  font-size: 0.75rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.preview-meta .sep { color: var(--ink-4); }
.preview-meta .ok  { color: var(--ok); font-weight: 600; }
.preview-meta .bad { color: var(--crit); font-weight: 600; }

.preview-actions { display: grid; gap: 8px; margin-top: 14px; }
.preview-actions .split { display: grid; grid-template-columns: 1fr auto; gap: 8px; }

.raw-box {
  margin: 0; padding: 11px 13px;
  max-height: 132px; overflow: auto;
  font-family: var(--mono); font-size: 0.75rem; line-height: 1.6;
  color: var(--ink-2);
  background: var(--sheet-2);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  white-space: pre-wrap; word-break: break-all; text-align: left;
}

.note {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 13px; margin-bottom: 7px;
  font-size: 0.8125rem; line-height: 1.5;
  border: 1px solid; border-left-width: 3px;
  border-radius: var(--r-sm);
  animation: rise .34s var(--ease) both;
}
.note:last-child { margin-bottom: 0; }
.note svg { flex: none; margin-top: 2px; }

/* Not icindeki eylem dugmesi (or. "Otomatik onar"): metnin akisinda durur ama
   notun rengini devralmaz - uyari renginde bir dugme okunmuyor. */
.note .btn {
  vertical-align: -2px;
  color: var(--ink);
  background: var(--sheet);
}
.note .btn:disabled { opacity: .55; cursor: default; }
.note-warn    { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.note-danger  { background: var(--crit-bg); border-color: var(--crit); color: var(--crit); }
.note-success { background: var(--ok-bg);   border-color: var(--ok);   color: var(--ok); }
.note-info    { background: var(--primary-3); border-color: var(--primary); color: var(--primary-2); }

.dyn-box, .raw-card {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: 18px;
}

/* ---------------------------------------------------------------------
   14. Okuyucu duzeni
   --------------------------------------------------------------------- */

.scan-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.scan-left  { padding: 24px; border-right: 1px solid var(--rule); }
.scan-right { padding: 24px; }

.scan-tabs { display: flex; gap: 6px; margin-bottom: 20px; }
.scan-tab {
  padding: 7px 15px;
  font: inherit; font-size: 0.875rem; font-weight: 550;
  color: var(--ink-2);
  background: var(--sheet-2);
  border: 1px solid var(--rule); border-radius: 999px;
  cursor: pointer;
  transition: color .16s, background .16s, border-color .16s,
              box-shadow .2s var(--ease), transform .16s var(--ease);
}
.scan-tab:hover { color: var(--ink); border-color: var(--rule-2); transform: translateY(-1px); }
.scan-tab.is-active {
  color: var(--on-primary); background: var(--primary);
  border-color: var(--primary); font-weight: 600; box-shadow: var(--sh-2);
}

.dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 244px; padding: 26px;
  background: var(--sheet-2);
  border: 2px dashed var(--rule-2);
  border-radius: var(--r-lg);
  text-align: center; cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease),
              transform .18s var(--ease);
}
.dropzone:hover, .dropzone.is-over {
  border-color: var(--primary); background: var(--primary-3);
}
.dropzone.is-over { transform: scale(1.012); }
.dropzone .dz-title { font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: -0.018em; }
.dropzone .dz-sub   { font-size: 0.75rem; color: var(--ink-3); }
.dropzone svg { color: var(--ink-3); transition: color .18s, transform .3s var(--ease); }
.dropzone:hover svg, .dropzone.is-over svg { color: var(--primary); transform: translateY(-3px); }
.dz-preview { max-width: 100%; max-height: 176px; border-radius: var(--r-sm); box-shadow: var(--sh-2); }

/* Kamera
   Sahne, yayinin GERCEK en-boy oranini alir (--cam-ar / --cam-ar-num scanner.js
   tarafindan yazilir). Sabit 4/3 kutu + object-fit:cover, dikey ceken telefon
   kamerasinin goruntusunu ustten alttan kirpiyordu: kullanici kodu ekranda
   goremiyordu. Genislik, yuksekligi --cam-max-h ile sinirlayacak sekilde
   hesaplanir; boylece kutu tam oturur, ne kirpma ne siyah bant kalir. */
.cam-stage {
  --cam-max-h: 60vh;
  position: relative;
  width: min(100%, calc(var(--cam-max-h) * var(--cam-ar-num, 1.3333)));
  aspect-ratio: var(--cam-ar, 4 / 3);
  margin-inline: auto;
  background: #0d0b09;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cam-stage video { width: 100%; height: 100%; object-fit: contain; display: block; }
.cam-stage .cam-idle { color: #9a9086; font-size: 0.875rem; padding: 22px; text-align: center; line-height: 1.6; }

/* Donan kare + bulunan kodun cercevesi */
.cam-overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
}

/* Okundu rozeti — sonuc paneli mobilde katlamanin altinda kaldigi icin
   onayin kameranin uzerinde gorunmesi sart. */
.cam-hit {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2;
  display: flex; justify-content: center; pointer-events: none;
}
.cam-hit-inner {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 17px; border-radius: 999px;
  background: var(--ok); color: #fff;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
  animation: hitPop .34s var(--ease) both;
}
.cam-stage.is-hit::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: #fff; pointer-events: none;
  animation: hitFlash .5s ease-out both;
}
@keyframes hitFlash { from { opacity: .8; } to { opacity: 0; } }
@keyframes hitPop {
  from { opacity: 0; transform: translateY(12px) scale(.88); }
  to   { opacity: 1; transform: none; }
}

.cam-reticle {
  position: absolute; inset: 50% auto auto 50%;
  width: 60%; aspect-ratio: 1; transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 0 0 100vmax rgba(13, 11, 9, .52);
  border-radius: 14px;
}
.cam-reticle::before, .cam-reticle::after {
  content: ""; position: absolute; width: 32px; height: 32px;
  border: 3px solid #fff; border-radius: 12px;
}
.cam-reticle::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.cam-reticle::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* Tarama cizgisi — kamera acikken asagi yukari suzulur */
.cam-scanline {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--primary) 55%, transparent);
  animation: scanline 2.4s var(--ease) infinite;
  pointer-events: none;
}
@keyframes scanline {
  0%, 100% { top: 18%; opacity: 0; }
  10%      { opacity: 1; }
  90%      { opacity: 1; }
  50%      { top: 82%; }
}

.cam-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.cam-controls select { max-width: 190px; width: auto; }

/* Sonuc paneli */
.result-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  font-size: 0.75rem; font-weight: 600;
  border-radius: 999px;
  color: var(--ink-2); background: var(--sheet-3);
}
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.badge-live { background: var(--ok-bg); color: var(--ok); }
.badge-live.badge-dot::before { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; transform: scale(.8); } }
.badge-waiting { background: var(--sheet-3); color: var(--ink-3); }

.result-text {
  margin: 0 0 14px; padding: 13px;
  min-height: 108px; max-height: 236px; overflow: auto;
  font-family: var(--mono); font-size: 0.75rem; line-height: 1.7;
  color: var(--ink);
  background: var(--sheet-2);
  border: 1px solid var(--rule); border-radius: var(--r);
  white-space: pre-wrap; word-break: break-word;
}
.result-text.is-empty {
  color: var(--ink-3); font-family: var(--sans); font-size: 0.875rem;
  display: flex; align-items: center; justify-content: center; text-align: center;
}

.kv {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 1px; margin: 0 0 14px;
  font-size: 0.875rem;
  background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--r);
  overflow: hidden;
}
.kv dt {
  padding: 8px 14px;
  font-size: 0.8125rem; font-weight: 600; color: var(--ink-2);
  background: var(--sheet-3);
  white-space: nowrap;
}
.kv dd { margin: 0; padding: 8px 14px; background: var(--sheet); word-break: break-word; }

/* Gecmis */
.history { margin-top: 28px; }
.history-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.history-head h3 { margin: 0; }
.history-head .btn:first-of-type { margin-left: auto; }

.history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.history-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--sheet-2);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  font-size: 0.8125rem;
  transition: border-color .16s, background .16s, transform .16s var(--ease);
  animation: rise .4s var(--ease) both;
}
.history-item:hover { border-color: var(--rule-2); background: var(--sheet); transform: translateX(2px); }
.history-item .hi-text {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: 0.75rem;
}
.history-item .hi-time { flex: none; font-size: 0.75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.history-empty { padding: 24px; text-align: center; color: var(--ink-3); font-size: 0.875rem; }

/* ---------------------------------------------------------------------
   15. Bilgi kartlari
   --------------------------------------------------------------------- */

.notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; margin-top: 28px; }
.notes-grid > div {
  padding: 22px;
  background: var(--sheet);
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: box-shadow .24s var(--ease), transform .24s var(--ease);
}
.notes-grid > div:hover { box-shadow: var(--sh-3); transform: translateY(-3px); }
.notes-grid h3 { margin-bottom: 8px; }
.notes-grid p { font-size: 0.875rem; color: var(--ink-2); line-height: 1.62; }

/* ---------------------------------------------------------------------
   16. Tablolar ve istatistik
   --------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  background: var(--sheet);
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
table.data { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
table.data th, table.data td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--rule); }
table.data th {
  background: var(--sheet-2);
  font-size: 0.75rem; font-weight: 600; color: var(--ink-3);
  letter-spacing: 0.03em; white-space: nowrap;
}
table.data tbody tr { transition: background .14s; }
table.data tbody tr:hover { background: var(--sheet-2); }
table.data tr:last-child td { border-bottom: 0; }
table.data td.mono { font-family: var(--mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat {
  padding: 20px;
  background: var(--sheet);
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.stat .stat-label { font-size: 0.8125rem; font-weight: 550; color: var(--ink-2); margin-bottom: 8px; }
.stat .stat-value {
  font-family: var(--display); font-size: 2rem; font-weight: 650;
  letter-spacing: -0.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat .stat-sub { font-size: 0.75rem; color: var(--ink-3); margin-top: 7px; }

.spark { display: flex; align-items: flex-end; gap: 3px; height: 78px; margin-top: 12px; }
.spark-bar {
  flex: 1; min-width: 3px; background: var(--primary);
  border-radius: 2px 2px 0 0; min-height: 3px;
  transform-origin: bottom;
  animation: grow .5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 12ms);
}
.spark-bar[data-empty="1"] { background: var(--sheet-3); }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------------------------------------------------------------------
   17. Toast ve yukleniyor
   --------------------------------------------------------------------- */

.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 90;
  transform: translate(-50%, 14px);
  padding: 11px 20px;
  font-size: 0.875rem; font-weight: 550;
  color: var(--paper); background: var(--ink);
  border-radius: 999px;
  box-shadow: var(--sh-4);
  opacity: 0; pointer-events: none;
  transition: opacity .18s var(--ease), transform .28s var(--ease);
  max-width: calc(100vw - 32px); text-align: center;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.is-error   { background: var(--crit); color: #fff; }
.toast.is-success { background: var(--ok); color: #fff; }

.spinner {
  width: 14px; height: 14px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 999px;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   18. Alt bant
   --------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--sheet);
  padding: 24px 0 32px;
  margin-top: auto;
}
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline;
  font-size: 0.8125rem; color: var(--ink-3);
}
.footer-inner p { margin: 0; }
.footer-inner p:first-child {
  font-family: var(--display); font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink-2);
}

/* ---------------------------------------------------------------------
   19. Duyarli
   --------------------------------------------------------------------- */

@media (max-width: 1060px) {
  .gen-layout { grid-template-columns: 1fr; }
  .gen-side { position: static; order: -1; }
  .preview-box { min-height: 212px; }
}

@media (max-width: 900px) {
  .masthead { grid-template-columns: 1fr; align-items: start; gap: 26px; padding: 36px 0 28px; }
  .colophon { width: 100%; }
  /* Dar ekranda demo gizlenir; hero-demo.js de bu esikte hic yuklenmez.
     Mobilde kullanicinin istedigi sey birakma alani, gosterim degil. */
  .hero-demo { display: none; }

  .scan-layout { grid-template-columns: 1fr; }
  .scan-left   { border-right: 0; border-bottom: 1px solid var(--rule); }
}

@media (max-width: 640px) {
  body { font-size: 14px; }
  .header-inner { height: 54px; gap: 10px; }
  .site-nav a { padding: 5px 9px; font-size: 0.8125rem; }
  .site-nav a::after { left: 9px; right: 9px; }
  .brand span { display: none; }

  .field-grid { grid-template-columns: 1fr; }
  .panel-body, .panel-head { padding-left: 15px; padding-right: 15px; }
  .type-tabs { padding: 14px; }
  .scan-left, .scan-right, .sheet-pad { padding: 17px; }
  .panel-state { display: none; }
  .colophon { grid-template-columns: 1fr 1fr; }

  /* Dikey yayinda sahne ekrani doldurmasin; kontroller katlamanin ustunde kalsin. */
  .cam-stage { --cam-max-h: 52vh; }
  .cam-controls .btn { flex: 1 1 auto; }
  .cam-controls select { max-width: none; flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------
   20. Yazdirma
   --------------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .gen-form, .preview-actions, .raw-card,
  .toast, .dyn-box, .note, .masthead, .preview-meta, .ad-slot,
  .hero-canvas, .hero-demo { display: none !important; }
  body { background: #fff; color: #000; }
  .gen-layout { display: block; }
  .gen-side { position: static; }
  .preview-card { border: 0; box-shadow: none; padding: 0; }
  .preview-box { background: #fff; border: 0; min-height: 0; padding: 0; }
  .preview-box canvas { box-shadow: none; }
}

/* ---------------------------------------------------------------------
   21. Hareket azaltma tercihi
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-canvas, .cam-scanline { display: none; }
}