/* ═══════════════════════════════════════════════════════════════════════════
   Ore Trace — tasarim sistemi.

   Kaynak: design_handoff_ore_trace/design/
     · _ds/industry-.../styles.css   (temel sistem: .blueprint, .btn, .input, …)
     · "Ore Trace.dc.html" <helmet>  (Ore Trace token'lari + sistem ustu duzeltmeler)

   Sira onemli: once temel sistem, sonra helmet duzeltmeleri — tasarim kaynagindaki
   yukleme sirasi da boyle (link, ardindan <style>). Deger degistirmeyin; metin ve
   olcu kararlari tasarimda nihai.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Temel sistem token'lari ─────────────────────────────────────────────
   Renk rampalari Ore Trace'e gore §2'de yeniden ayarlanir; buradaki --space-*
   ve --shadow-* degerleri oldugu gibi kalir (bilesenler bunlari okur). */
:root {
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

/* ── 2. Ore Trace token'lari (helmet :root) ───────────────────────────────── */
:root {
  --color-bg: #f1f5f9;
  --color-surface: #f8fafc;
  --color-text: #0f172a;
  --color-accent: #2563eb;
  --color-accent-2: #60a5fa;
  --color-divider: #e2e8f0;
  --color-accent-100: #eff6ff;  --color-accent-200: #dbeafe;  --color-accent-300: #bfdbfe;
  --color-accent-400: #60a5fa;  --color-accent-500: #3b82f6;  --color-accent-600: #1d4ed8;
  --color-accent-700: #1e40af;  --color-accent-800: #1e3a8a;  --color-accent-900: #0b1220;
  --color-accent-2-100: #eff6ff; --color-accent-2-200: #dbeafe; --color-accent-2-300: #bfdbfe;
  --color-accent-2-400: #60a5fa; --color-accent-2-500: #3b82f6; --color-accent-2-600: #1d4ed8;
  --color-accent-2-700: #1e40af; --color-accent-2-800: #1e3a8a; --color-accent-2-900: #0b1220;
  --font-heading: 'Hanken Grotesk', system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --radius-sm: 4px; --radius-md: 4px; --radius-lg: 4px;
}

/* ── 3. Cerceve ────────────────────────────────────────────────────────────
   Tasarimda kartlarin dort kosesinde `+` nisan isaretleri vardi; bunlar cizim
   sirasindaki hizalama isaretleriydi ve urunden cikarildi. Kalan sey cercevenin
   kendisi: kilcal cizgi. */
.blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0; }

/* ── 4. Temel tipografi ve ogeler ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* `hidden` her zaman kazanir. Tasarim satir ici stille geldigi icin (`display:flex`
   gibi) tarayicinin varsayilan [hidden] kurali sessizce eziliyordu: kapali olmasi
   gereken paneller, cekmece ve modal ayni anda acik duruyordu. */
[hidden] { display: none !important; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; } h2 { font-size: 32px; } h3 { font-size: 25px; }
h4 { font-size: 20px; } h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* ── 5. Butonlar ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* ── 6. Form ──────────────────────────────────────────────────────────────── */
.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-divider); }
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg); }
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* ── 7. Kart, rozet, tablo, dialog ────────────────────────────────────────── */
.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); }
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.elev-sm { box-shadow: var(--shadow-sm); } .elev-md { box-shadow: var(--shadow-md); } .elev-lg { box-shadow: var(--shadow-lg); }

.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table td { padding: var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); }
.dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; }
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* Bilesenler tel-kafes nesnelerdir: seffaf, kilcal cizgili. */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }

/* ── 8. Helmet duzeltmeleri (sistem ustu) ─────────────────────────────────── */
/* Industry varsayilani kare kose; Ore Trace her yerde 4px tasir. */
.btn, .tag, .card, .input, .seg, .dialog { border-radius: var(--radius-md); }
.btn { white-space: nowrap; }
select.input { background: #fff; cursor: pointer; appearance: auto; }
summary::-webkit-details-marker { display: none; }
[data-rail]::-webkit-scrollbar { display: none; width: 0; height: 0; }
summary [data-plus] { display: inline-block; transition: transform .18s ease; }
details[open] summary [data-plus] { transform: rotate(45deg); }
details summary:hover { color: #2563eb; }
@media (min-width: 920px) { #licensing [style*="right:-13px"] { display: grid !important; } }
img { max-width: 100%; }
table.table td { border-bottom: 0; }
html { scroll-behavior: smooth; }
p { margin: 0; }
body {
  margin: 0; background: #f1f5f9; color: #0f172a;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 15.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: #2563eb; text-decoration: none; }
a:hover { color: #1d4ed8; }
::selection { background: rgba(37,99,235,.16); }
:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

.ms {
  font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal;
  line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

@keyframes otPulse { 0% { box-shadow: 0 0 0 0 rgba(96,165,250,.55) } 70% { box-shadow: 0 0 0 9px rgba(96,165,250,0) } 100% { box-shadow: 0 0 0 0 rgba(96,165,250,0) } }
@keyframes otSweep { 0% { transform: translateX(-60px); opacity: 0 } 12% { opacity: 1 } 88% { opacity: 1 } 100% { transform: translateX(820px); opacity: 0 } }
@keyframes otDash { to { stroke-dashoffset: -240 } }
@keyframes otDrift { 0% { transform: translate3d(0,0,0) scale(1) } 100% { transform: translate3d(-1.4%,-1.2%,0) scale(1.035) } }

/* ── 9. Portal ekleri ──────────────────────────────────────────────────────
   Tasarim tek bir SPA idi: acilir menu, mobil menu ve genislik kararlari JS
   `vw` state'inden geliyordu. Sunucu tarafinda ayni davranisin karsiligi tek
   kirilma noktasi (900px) ve birkac yardimci siniftir. */

.ot-shell { min-height: 100vh; background: #fff; color: #0f172a; }
.ot-wrap {
  width: 100%; max-width: 1280px; margin: 0 auto;
  padding-left: clamp(16px, 4vw, 40px); padding-right: clamp(16px, 4vw, 40px);
}
.ot-wrap-admin {
  width: 100%; max-width: 1520px; margin: 0 auto;
  padding-left: clamp(14px, 3vw, 34px); padding-right: clamp(14px, 3vw, 34px);
}

/* Tek kirilma noktasi: 900px */
.ot-wide { display: flex; }
.ot-narrow { display: none; }
@media (max-width: 899px) {
  .ot-wide { display: none; }
  .ot-narrow { display: flex; }
}

/* Urun acilir menusu — tasarimda mouseenter ile aciliyordu, >= 900px'te. */
.ot-drop { position: relative; }
.ot-drop-menu { display: none; }
@media (min-width: 900px) {
  .ot-drop:hover .ot-drop-menu, .ot-drop:focus-within .ot-drop-menu { display: block; }
  /* Tetikleyicinin alt kenari ile menunun ust kenari arasinda birkac piksellik
     bosluk var; fare oradan gecerken hicbir seyin uzerinde olmuyor, hover
     dusuyor ve menu kapaniyordu. Gorunmez bir kopru ikisini tek hover alani
     yapar. Yalnizca menu acikken var olur, yoksa altindaki icerigin tiklarini
     yerdi. */
  .ot-drop::after { content: ""; position: absolute; left: -14px; top: 100%; width: 380px; height: 14px; display: none; }
  .ot-drop:hover::after, .ot-drop:focus-within::after { display: block; }
}
.ot-drop-item:hover { background: #f8fafc; }

/* Mobil menu — buton ikonu menu <-> close */
.ot-menu-panel { display: none; }
.ot-menu-panel.is-open { display: block; }

/* Tiklanabilir yuzeylerde ortak gecis (.16s ease) */
.ot-hover { transition: border-color .16s ease, background .16s ease, color .16s ease; }
.ot-hover-accent:hover { border-color: #2563eb; color: #2563eb; }
.ot-hover-lite:hover { border-color: #60a5fa; color: #60a5fa; }
.ot-row-click { cursor: pointer; }
.ot-row-click:hover { background: #f8fafc; }

/* Dil anahtari — aktif dil #60a5fa, pasif rgba(148,163,184,.85) */
.ot-lang { color: rgba(148,163,184,.85); }
.ot-lang.is-on { color: #60a5fa; }

/* Lightbox */
.ot-lb { display: none; }
.ot-lb.is-open { display: flex; }
body.ot-locked { overflow: hidden; }

/* Bildirim serisi (flash) */
.ot-flash-host { position: fixed; top: 88px; right: 20px; z-index: 140; display: flex; flex-direction: column; gap: 8px; }
.ot-flash {
  background: #0F172A; color: #E8EEF9; border-radius: 4px; padding: 13px 16px; font-size: 13.5px;
  box-shadow: 0 12px 24px -6px rgba(16,24,40,.28); display: flex; align-items: center; gap: 10px;
}
.ot-flash .ms { font-size: 18px; color: #60a5fa; }
.ot-flash-danger .ms { color: #FDA29B; }
.ot-flash-warning .ms { color: #FEC84B; }
.ot-flash button { background: none; border: 0; padding: 0; margin-left: 6px; cursor: pointer; color: #8A97AD; }

/* ── Aksiyon menusu (uc nokta) ─────────────────────────────────────────────
   Satir basina uc-dort dugme tabloyu sisiriyordu; aksiyonlar tek bir 36px
   dugmenin arkasina alindi. Acilan kutu `position:fixed` — tablonun kendi
   kaydirma kutusu tarafindan kirpilmasin diye; konumu JS yerlestirir. */
.ot-menu { position: relative; display: inline-block; }
.ot-menu-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid #E2E8F0; background: #fff; border-radius: 4px; cursor: pointer;
  color: #55637A; transition: border-color .16s ease, color .16s ease;
}
.ot-menu-btn:hover, .ot-menu.is-open .ot-menu-btn { border-color: #2563eb; color: #2563eb; }
/* Olcek tablonun kendisinden gelir: hucre ici kontroller 12.5px, mono etiketler
   11px. Menu bunlardan buyuk olursa satirin yanina yapistirilmis ayri bir
   arayuz gibi durur. */
.ot-menu-pop {
  position: fixed; z-index: 125; min-width: 196px; max-width: 260px;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 4px;
  box-shadow: 0 12px 32px rgba(15,23,42,.13);
  padding: 4px; display: flex; flex-direction: column; gap: 1px; text-align: left;
}
.ot-menu-pop form { margin: 0; }
/* Etiketler mono: bu menuler mono agirlikli tablolardan aciliyor ve tasarimda
   islem/kod katmaninin sesi JetBrains Mono. Govde yazisiyla ayni fontta olunca
   menu, tablonun degil sayfanin bir parcasi gibi duruyordu. */
.ot-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 31px;
  padding: 0 9px; border: 0; background: none; border-radius: 3px; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500;
  letter-spacing: .01em; line-height: 1.2; color: #0F172A;
  text-align: left; white-space: nowrap;
}
.ot-menu-item:hover { background: #F8FAFC; }
.ot-menu-item .ms { font-size: 16px; color: #8A97AD; flex: none; }
.ot-menu-item-danger { color: #B42318; }
.ot-menu-item-danger .ms { color: #B42318; }
.ot-menu-row { display: flex; align-items: center; gap: 6px; padding: 4px 9px 5px; }
.ot-menu-row .input {
  min-height: 28px; width: 56px; padding: 0 7px; text-align: right;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
}
.ot-menu-row .ot-menu-unit {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #8A97AD;
}
.ot-menu-row .ot-menu-item {
  min-height: 28px; padding: 0 11px; width: auto; border-radius: 3px;
  border: 1px solid #2563eb; background: #2563eb; color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
}
.ot-menu-row .ot-menu-item:hover { background: #1d4ed8; border-color: #1d4ed8; }
.ot-menu-sep { height: 1px; background: #F1F5F9; margin: 3px 1px; }
.ot-menu-note { padding: 2px 9px 5px; font-size: 11px; line-height: 1.4; color: #8A97AD; white-space: normal; }
.ot-menu-check { display: flex; align-items: center; gap: 7px; padding: 3px 9px; font-size: 11.5px; line-height: 1.35; color: #55637A; white-space: normal; }
.ot-menu-check input { flex: none; }

/* ── Yonetim: kullanici detayi modali (admin.js) ───────────────────────────
   admin.js kendi HTML'ini uretir; siniflari burada tasarim diline oturur.
   Rozetler tasarimin tek rozet sozlugundeki (PILL) renkleri tasir. */
.pill {
  display: inline-flex; align-items: center; font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: .06em; padding: 4px 9px; border-radius: 4px; white-space: nowrap;
  background: #F2F4F7; color: #475467; border: 1px solid #E4E7EC;
}
.pill-paid, .pill-active, .pill-ok { background: #ECFDF3; color: #067647; border-color: #ABEFC6; }
.pill-pending, .pill-awaiting_approval { background: #FFFAEB; color: #B54708; border-color: #FEDF89; }
.pill-rejected { background: #FEF3F2; color: #B42318; border-color: #FECDCA; }

.modal-root { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.5); }
.modal {
  position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 4px;
  padding: 20px; max-width: 620px; width: 100%; max-height: 86vh; overflow: auto;
  box-shadow: 0 12px 24px -6px rgba(16,24,40,.28);
}
.modal-close {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid;
  place-items: center; border: 1px solid #E2E8F0; background: #fff; border-radius: 4px;
  cursor: pointer; color: #55637A;
}
.modal-close:hover { border-color: #2563eb; color: #2563eb; }
.mdl-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-right: 40px; }
.mdl-head h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.mdl-sub { margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #55637A; }
.mdl-grid {
  margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px; background: #E2E8F0; border: 1px solid #E2E8F0; border-radius: 4px; overflow: hidden;
}
.mdl-grid > div { background: #fff; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.mdl-k { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; color: #8A97AD; text-transform: uppercase; }
.mdl-v { font-size: 13.5px; color: #0F172A; }
.mdl-sec { margin-top: 18px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; color: #55637A; text-transform: uppercase; }
.mdl-lics { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.mdl-lic { border: 1px solid #E2E8F0; border-radius: 4px; padding: 12px 14px; }
.mdl-lic-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.mdl-lic-key, .mdl-lic-meta { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #55637A; }
.mdl-lic-meta, .mdl-lic-use { margin-top: 6px; }
.mdl-seats { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.mdl-purge { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.mdl-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid #E2E8F0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mdl-loading { padding: 30px; text-align: center; color: #8A97AD; }
.mdl-delform { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn-danger { background: #B42318; border-color: #B42318; color: #fff; }
.btn-danger:hover { background: #912018; border-color: #912018; }
.btn-outline { border-color: var(--color-divider); }
.btn-sm { height: 36px; padding: 0 12px; font-size: 12.5px; }
.muted { color: #8A97AD; }
.small { font-size: 12.5px; }
.mono { font-family: 'JetBrains Mono', monospace; }

/* ── Kaydirmali dogrulama (captcha.js) ─────────────────────────────────────
   Tasarimdaki giris kartinin dogrulama blogu: baslik, kesik cizgili ray uzerinde
   mavi parca, sagda durum, altta ipucu. */
.captcha { border: 1px solid #e2e8f0; border-radius: 4px; padding: 12px; background: #f8fafc; }
.captcha-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: .14em; color: #55637a; text-transform: uppercase;
}
.captcha-row { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.captcha-track {
  flex: 1 1 auto; height: 36px; border: 1px dashed #cbd5e1; border-radius: 4px;
  background: #fff; position: relative; touch-action: none;
}
.captcha-track.near { border-color: #2563eb; }
.captcha-slot {
  position: absolute; top: 4px; bottom: 4px; width: 58px; border-radius: 3px;
  border: 1px dashed #cbd5e1; background: #f1f5f9;
}
.captcha-knob {
  position: absolute; top: 4px; bottom: 4px; width: 58px; background: #2563eb;
  border-radius: 3px; display: grid; place-items: center; color: #fff;
  cursor: grab; touch-action: none; transition: border-color .16s ease;
}
.captcha-knob:active { cursor: grabbing; }
.captcha-knob.locked { background: #16a34a; cursor: default; }
.captcha-knob .ms { font-size: 18px; }
.captcha-status {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: .1em; color: #55637a; white-space: nowrap;
}
.captcha-hint { margin-top: 8px; font-size: 12px; line-height: 1.5; color: #8a97ad; }
.captcha.is-error { border-color: #FECDCA; cursor: pointer; }
.captcha.is-solved { border-color: #ABEFC6; background: #ECFDF3; }
.captcha.shake { animation: otShake .4s ease; }
@keyframes otShake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-5px) } 75% { transform: translateX(5px) } }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Gorsel bulunmadiginda tur cercevesi bos kalmasin */
.ot-tour-img { display: block; width: 100%; aspect-ratio: 16/9; border-radius: 2px; background: #fff center center / contain no-repeat; }