/* =========================================================
   FOTON ATÖLYE — Deep-sky & gezegen astrofotoğrafçılığı
   Palet: bg #0A0A0A / surface #121512 / ink #E8FFE6
          accent #9DFF57 (lime) / accent-2 #22D3EE (cyan)
   ========================================================= */

:root {
  --bg: #0A0A0A;
  --surface: #121512;
  --surface-2: #171b16;
  --surface-3: #1d231b;
  --ink: #E8FFE6;
  --ink-soft: #9fb39c;
  --ink-dim: #6f7d6c;
  --accent: #9DFF57;
  --accent-2: #22D3EE;
  --line: #243024;
  --line-strong: #36482f;
  --danger: #ff6b6b;

  --header-h: 72px;
  --maxw: 1240px;
  --mono: "Consolas", "SFMono-Regular", "JetBrains Mono", ui-monospace, "Courier New", monospace;
  --body: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-2: cubic-bezier(.4,0,.2,1);

  interpolate-size: allow-keywords;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body {
  overflow-x: hidden;
  max-width: 100vw;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* Ambient star grid behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(157,255,87,.05), transparent 38%),
    radial-gradient(circle at 82% 70%, rgba(34,211,238,.05), transparent 42%);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-2); text-decoration: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--mono);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0 0 .5em;
  color: var(--ink);
}

p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
}

.eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .74rem;
  font-weight: 700;
  color: var(--accent);
  display: inline-block;
  margin-bottom: 14px;
}
.eyebrow.cy { color: var(--accent-2); }

.lede { color: var(--ink-soft); font-size: 1.06rem; max-width: 62ch; }

.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }

section { position: relative; z-index: 1; }

.section {
  padding: clamp(56px, 8vw, 104px) 0;
  border-top: 1px solid var(--line);
}

.section-head { max-width: 70ch; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head h2 {
  font-size: clamp(1.7rem, 4vw, 2.7rem);
}
.section-head .lede { margin-top: 10px; }

/* monospace section tag */
.sec-tag {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #06140a;
  padding: 10px 16px;
  font-family: var(--mono);
  font-weight: 700;
  z-index: 4000;
}
.skip-link:focus { left: 8px; top: 8px; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1080;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(10, 10, 10, 0.92);
  border-bottom: 1px solid var(--line);
  transition: background 240ms var(--ease), height 240ms var(--ease), box-shadow 240ms var(--ease);
}
.site-header.is-scrolled {
  background: rgba(10,10,10,.98);
  box-shadow: 0 8px 28px -18px rgba(0,0,0,.9);
  height: 62px;
}
.header-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .01em;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand .logo-mark { width: 26px; height: 26px; flex: none; }
.brand b { color: var(--accent); font-weight: 700; }
.brand small {
  display: block;
  font-size: .56rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 400;
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: 26px;
}
.nav-desktop a {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  position: relative;
  padding: 4px 0;
  transition: color 200ms var(--ease);
}
.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width 220ms var(--ease);
}
.nav-desktop a:hover { color: var(--ink); }
.nav-desktop a:hover::after,
.nav-desktop a.is-active::after { width: 100%; }
.nav-desktop a.is-active { color: var(--ink); }

.nav-desktop .nav-cta::after { display: none; }
.nav-desktop .nav-cta {
  background: var(--accent);
  color: #06140a;
  padding: 9px 18px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: background 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}
.nav-desktop .nav-cta:hover {
  background: var(--accent-2);
  color: #04181c;
  transform: translateY(-2px);
}

/* hamburger */
.nav-toggle {
  position: relative;
  z-index: 1100;
  width: 44px; height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), box-shadow 240ms var(--ease);
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: var(--surface-3);
  border-color: var(--accent);
  box-shadow: 0 6px 20px -12px rgba(157,255,87,.5);
}
.nav-toggle:hover span { background: var(--accent); }
.nav-toggle:active { transform: scale(.96); }
.nav-toggle span {
  width: 20px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 280ms var(--ease), opacity 200ms var(--ease), background 200ms var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle { transition: background 200ms var(--ease), border-color 200ms var(--ease); }
  .nav-toggle:active { transform: none; }
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
  .nav-toggle { display: none; }
}

/* drawer */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(0,0,0,.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms var(--ease), visibility 240ms var(--ease);
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 1050;
  width: min(360px, 92vw);
  background: #0c0f0c;
  border-left: 1px solid var(--line-strong);
  transform: translateX(100%);
  transition: transform 320ms var(--ease);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 18px) 26px 28px;
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer a {
  font-family: var(--mono);
  font-size: 1.04rem;
  color: var(--ink-soft);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 200ms var(--ease);
}
.drawer a:hover, .drawer a.is-active { color: var(--accent); }
.drawer a .num {
  font-size: .72rem;
  color: var(--ink-dim);
}
.drawer .drawer-cta {
  margin-top: 22px;
  background: var(--accent);
  color: #06140a;
  border: 0;
  border-radius: 4px;
  justify-content: center;
  font-weight: 700;
  border-bottom: 0;
}
.drawer .drawer-cta:hover { background: var(--accent-2); color: #04181c; }

@media (min-width: 1024px) {
  .drawer, .drawer-backdrop { display: none; }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .03em;
  padding: 13px 22px;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease), border-color 200ms var(--ease), box-shadow 240ms var(--ease);
}
.btn-primary {
  background: var(--accent); color: #06140a;
  box-shadow: 0 0 0 0 rgba(157,255,87,0);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--accent-2); color: #04181c; transform: translateY(-2px);
  /* photon glow — the light the workshop is "collecting" */
  box-shadow: 0 10px 30px -10px rgba(34,211,238,.5), 0 0 18px -2px rgba(34,211,238,.4);
}
.btn-primary .arr { transition: transform 200ms var(--ease); }
.btn-primary:hover .arr { transform: translateX(3px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--surface-2); color: var(--ink); border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 8px 24px -14px rgba(157,255,87,.45);
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease); }
  .btn-primary:hover, .btn-primary:focus-visible,
  .btn-ghost:hover, .btn-ghost:focus-visible { transform: none; }
}
.btn-block { width: 100%; justify-content: center; }

/* =========================================================
   HERO
   ========================================================= */
main { padding-top: var(--header-h); }

/* keep anchored sections/targets clear of the fixed header */
main section[id], main [id]:target, #form { scroll-margin-top: calc(var(--header-h) + 16px); }

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 7vw, 80px) 0 clamp(48px, 7vw, 88px);
  border-bottom: 1px solid var(--line);
}

/* parallax starfield layers */
.starfield {
  position: absolute;
  inset: -10% 0 0 0;
  z-index: 0;
  pointer-events: none;
}
.star-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.star-layer.l1 { background-image:
  radial-gradient(1px 1px at 12% 18%, rgba(232,255,230,.7), transparent),
  radial-gradient(1px 1px at 38% 62%, rgba(232,255,230,.5), transparent),
  radial-gradient(1px 1px at 74% 28%, rgba(232,255,230,.6), transparent),
  radial-gradient(1px 1px at 88% 78%, rgba(232,255,230,.5), transparent),
  radial-gradient(1px 1px at 60% 88%, rgba(232,255,230,.4), transparent);
  background-size: 100% 100%;
}
.star-layer.l2 { background-image:
  radial-gradient(1.4px 1.4px at 22% 42%, rgba(157,255,87,.55), transparent),
  radial-gradient(1.4px 1.4px at 52% 22%, rgba(232,255,230,.6), transparent),
  radial-gradient(1.4px 1.4px at 80% 56%, rgba(34,211,238,.5), transparent),
  radial-gradient(1.4px 1.4px at 33% 82%, rgba(232,255,230,.5), transparent);
}
.star-layer.l3 { background-image:
  radial-gradient(2px 2px at 16% 70%, rgba(34,211,238,.6), transparent),
  radial-gradient(2px 2px at 66% 38%, rgba(157,255,87,.6), transparent),
  radial-gradient(2px 2px at 90% 16%, rgba(232,255,230,.7), transparent);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 44px);
  align-items: center;
}
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 1.15fr .85fr; }
}

.hero h1 {
  font-size: clamp(2.5rem, 7.4vw, 4.5rem);
  line-height: 1.02;
  margin: 0 0 18px;
}
.hero h1 .lime { color: var(--accent); }
.hero h1 .cy { color: var(--accent-2); }
.hero-sub {
  color: var(--ink-soft);
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  max-width: 56ch;
  margin-bottom: 26px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }

/* trust strip */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 6px;
}
.trust-pill {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(18,21,18,.6);
}
.trust-pill svg { width: 14px; height: 14px; color: var(--accent); }

/* EXIF badge row (replaces marquee) */
.exif-row {
  position: relative;
  z-index: 2;
  margin-top: clamp(28px, 4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.exif-chip {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .03em;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 7px 11px;
}
.exif-chip b { color: var(--accent-2); font-weight: 700; }

/* exposure calculator card */
.calc {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 22px 22px 18px;
  box-shadow: 0 24px 60px -40px rgba(0,0,0,.9);
}
.calc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.calc-head .label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.calc-led {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.calc-led .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: blink 1.6s steps(1) infinite;
}
@keyframes blink { 50% { opacity: .25; } }

.calc-rows { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.calc-line {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 10px;
  background: var(--surface);
  padding: 12px 14px;
}
.calc-line .k {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.calc-line .v {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.18rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.calc-line .v.cy { color: var(--accent-2); }
.calc-foot {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.calc-prog {
  flex: 1;
  height: 6px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.calc-prog i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  transition: width 380ms linear;
}
.calc-total {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.calc-total b { color: var(--ink); }

/* =========================================================
   OPTIC DIAGRAM / DECOR
   ========================================================= */
.optic-diagram { width: 100%; height: auto; color: var(--accent-2); }

/* =========================================================
   STATS
   ========================================================= */
.stats-band {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
}
@media (min-width: 760px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--bg);
  padding: clamp(26px, 4vw, 40px) clamp(16px, 3vw, 28px);
  text-align: left;
}
.stat .num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat .num .sfx { color: var(--accent-2); }
.stat .lab {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* =========================================================
   GENERIC CARD GRIDS
   ========================================================= */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(20px, 3vw, 26px);
  transition: transform 240ms var(--ease), border-color 240ms var(--ease), box-shadow 240ms var(--ease);
  min-width: 0;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: 0 26px 50px -34px rgba(157,255,87,.28);
}
.card .ico {
  width: 46px; height: 46px;
  border-radius: 10px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 16px;
}
.card .ico svg { width: 24px; height: 24px; }
.card h3 { font-size: 1.12rem; margin-bottom: 8px; word-break: keep-all; overflow-wrap: break-word; }
.card p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.card .tag {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: block;
  margin-bottom: 14px;
}

/* brief feature list */
.brief-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.brief-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.brief-list .ico {
  width: 38px; height: 38px; margin: 0;
  grid-row: 1 / 3;
}
.brief-list b { display: block; font-family: var(--mono); font-size: .96rem; color: var(--ink); }
.brief-list span { color: var(--ink-soft); font-size: .9rem; }

/* =========================================================
   SPEC TABLE / 2-col technical layout
   ========================================================= */
.spec {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.spec-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  background: var(--surface);
  transition: background 200ms var(--ease);
}
.spec-row:first-child { border-top: 0; }
.spec-row:hover { background: var(--surface-2); }
@media (min-width: 820px) {
  .spec-row { grid-template-columns: 240px 1fr auto; align-items: start; }
}
.spec-mod {
  padding: 22px clamp(18px, 3vw, 26px);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 820px) { .spec-mod { border-bottom: 0; border-right: 1px solid var(--line); } }
.spec-mod .code {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--accent-2);
  text-transform: uppercase;
}
.spec-mod h3 { font-size: 1.16rem; margin: 8px 0 0; }
.spec-body { padding: 22px clamp(18px, 3vw, 26px); }
.spec-body p { color: var(--ink-soft); font-size: .94rem; margin: 0 0 12px; }
.spec-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.spec-meta span {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 9px;
  background: var(--bg);
}
.spec-meta span b { color: var(--accent); }
.spec-side {
  padding: 22px clamp(18px, 3vw, 26px);
  border-top: 1px solid var(--line);
}
@media (min-width: 820px) { .spec-side { border-top: 0; border-left: 1px solid var(--line); min-width: 170px; } }
.spec-side .dur {
  font-family: var(--mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-dim);
}
.spec-side .lvl {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--accent);
  font-weight: 700;
}

/* =========================================================
   EQUIPMENT MATRIX (table)
   ========================================================= */
.table-scroll {
  display: block; width: 100%; max-width: 100%; min-width: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.table-scroll > table { margin: 0 !important; min-width: 560px; width: 100%; }
:where(*:has(> .table-scroll), *:has(> * > .table-scroll), *:has(> * > * > .table-scroll)) { min-width: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
thead th {
  background: var(--surface-2);
  text-align: left;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface); color: var(--ink); }
tbody td:first-child { color: var(--ink); font-family: var(--mono); }
.cell-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--accent-2) !important; }
.badge-ok { color: var(--accent); font-family: var(--mono); font-weight: 700; }
.badge-no { color: var(--ink-dim); font-family: var(--mono); }

/* =========================================================
   PRICING TABLE
   ========================================================= */
.price-table thead th:not(:first-child) { text-align: right; }
.price-table .price {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-table .feat-on { color: var(--accent); }
.price-table .feat-off { color: var(--ink-dim); }
.price-note {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--ink-dim);
  margin-top: 10px;
}

/* pricing cards */
.price-cards { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 720px) { .price-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .price-cards { grid-template-columns: repeat(4, 1fr); } }
.price-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  transition: transform 240ms var(--ease), border-color 240ms var(--ease);
  min-width: 0;
}
.price-card:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.price-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 30px 60px -40px rgba(157,255,87,.4); }
.price-card .pc-tag {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.price-card .pc-name { font-family: var(--mono); font-size: 1.18rem; margin: 8px 0 4px; }
.price-card .pc-price {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 2rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin: 12px 0 2px;
}
.price-card .pc-price small { font-size: .82rem; color: var(--ink-soft); font-weight: 400; }
.price-card .pc-sub { font-size: .8rem; color: var(--ink-dim); font-family: var(--mono); margin-bottom: 16px; }
.price-card ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.price-card ul li { font-size: .88rem; color: var(--ink-soft); display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start; }
.price-card ul li svg { width: 16px; height: 16px; color: var(--accent); margin-top: 3px; }
.price-card ul li.off { color: var(--ink-dim); }
.price-card ul li.off svg { color: var(--ink-dim); }
.price-card .btn { margin-top: auto; }

/* =========================================================
   BEFORE / AFTER (örnek isleme)
   ========================================================= */
.ba-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 880px) { .ba-grid { grid-template-columns: 1.3fr .7fr; align-items: center; } }
.ba-stage {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 16 / 10;
}
.ba-stage img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ba-stage .after-clip {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 50%);
}
.ba-divider {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(157,255,87,.6);
  z-index: 3;
}
.ba-tag {
  position: absolute;
  bottom: 12px;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
  z-index: 4;
}
.ba-tag.before { left: 12px; background: rgba(10,10,10,.8); color: var(--ink-soft); border: 1px solid var(--line); }
.ba-tag.after { right: 12px; background: rgba(157,255,87,.16); color: var(--accent); border: 1px solid var(--accent); }
.ba-info .step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ba-info .step-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: .92rem;
  color: var(--ink-soft);
}
.ba-info .step-list .n {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent-2);
  font-size: .8rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 7px;
  background: var(--bg);
}

/* =========================================================
   CONSTELLATION / process timeline
   ========================================================= */
.timeline { position: relative; display: grid; gap: 0; }
.tl-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 0 0 28px;
  position: relative;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-marker { position: relative; display: flex; flex-direction: column; align-items: center; }
.tl-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(157,255,87,.12);
  z-index: 2;
  margin-top: 4px;
}
.tl-line { flex: 1; width: 2px; background: var(--line); margin-top: 4px; }
.tl-item:last-child .tl-line { display: none; }
.tl-body { padding-bottom: 4px; }
.tl-time {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.tl-body h3 { font-size: 1.08rem; margin: 6px 0 6px; }
.tl-body p { color: var(--ink-soft); font-size: .92rem; margin: 0; }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testi-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 720px) { .testi-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } }
.testi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
}
.testi .stars { color: var(--accent); font-family: var(--mono); letter-spacing: .1em; font-size: .82rem; margin-bottom: 12px; }
.testi p { font-size: .95rem; color: var(--ink); margin: 0 0 16px; }
.testi .who {
  margin-top: auto;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--ink-soft);
}
.testi .who b { color: var(--accent-2); display: block; font-size: .86rem; }

/* =========================================================
   FAQ
   ========================================================= */
.faq { display: grid; gap: 12px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px clamp(16px, 3vw, 24px);
  font-family: var(--mono);
  font-weight: 700;
  font-size: .98rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus {
  flex: none;
  width: 22px; height: 22px;
  position: relative;
  color: var(--accent);
}
.faq summary .plus::before, .faq summary .plus::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 2px; background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 280ms var(--ease);
}
.faq summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary .plus::after { transform: translate(-50%, -50%) rotate(0); }
.faq .body {
  height: 0;
  padding: 0 clamp(16px, 3vw, 24px);
  overflow: hidden;
  transition: height 360ms var(--ease-2), padding-block-end 360ms var(--ease-2);
}
.faq details[open] .body { height: auto; padding-block-end: 22px; }
.faq .body p { color: var(--ink-soft); font-size: .93rem; margin: 0; }
@media (prefers-reduced-motion: reduce) { .faq .body { transition: none; } }

/* =========================================================
   FORMS
   ========================================================= */
.form-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(22px, 4vw, 36px);
}
.form-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 680px) { .form-grid.two { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label, .field > span.lbl {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input, .field select, .field textarea {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 13px 14px;
  color: var(--ink);
  font-family: var(--body);
  font-size: .96rem;
  width: 100%;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(157,255,87,.14);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-dim); }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.field.kvkk {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  grid-column: 1 / -1;
}
.field.kvkk label {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--body);
  font-size: .86rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.field input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 18px; height: 18px;
  min-width: 18px; min-height: 18px;
  padding: 0; border: 0; margin: 2px 0 0;
  accent-color: var(--accent);
}
.hp { position: absolute; left: -9999px; opacity: 0; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 16px;
}
.cc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  transition: transform 240ms var(--ease), border-color 240ms var(--ease), box-shadow 240ms var(--ease);
  min-width: 0;
}
.cc:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 22px 44px -34px rgba(34,211,238,.3); }
.cc .cc-ico {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 14px;
  transition: transform 240ms var(--ease), color 240ms var(--ease);
}
.cc:hover .cc-ico { transform: scale(1.08); color: var(--accent-2); }
.cc .cc-ico svg { width: 22px; height: 22px; }
.cc .cc-lab { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.cc .cc-val { font-family: var(--mono); font-size: 1rem; color: var(--ink); margin: 6px 0 4px; word-break: break-word; }
.cc .cc-val a { color: var(--ink); }
.cc .cc-val a:hover { color: var(--accent); }
.cc .cc-sub { font-size: .82rem; color: var(--ink-soft); margin: 0; }

.hours-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.hours-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: .86rem;
  font-variant-numeric: tabular-nums;
}
.hours-row .d { color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; font-size: .76rem; }
.hours-row .h { color: var(--ink); }
.hours-row.today { border-color: var(--accent); background: var(--surface-2); }
.hours-row.today .d { color: var(--accent); }

/* =========================================================
   TEAM
   ========================================================= */
.team-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 760px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.member {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 240ms var(--ease), border-color 240ms var(--ease);
}
.member:hover { transform: translateY(-5px); border-color: var(--line-strong); }
.member img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.member .m-body { padding: 18px 20px; }
.member h3 { font-size: 1.08rem; margin-bottom: 2px; }
.member .role { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.member p { font-size: .88rem; color: var(--ink-soft); margin: 0; }

/* =========================================================
   NOTES / news
   ========================================================= */
.notes-list { display: grid; gap: 12px; }
.note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.note time { font-family: var(--mono); font-size: .72rem; color: var(--accent-2); white-space: nowrap; }
.note b { font-family: var(--mono); font-size: .96rem; color: var(--ink); font-weight: 700; }
.note span { display: block; color: var(--ink-soft); font-size: .86rem; }

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band {
  background: linear-gradient(135deg, var(--surface-2), var(--bg));
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: clamp(30px, 5vw, 56px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); }
.cta-band p { color: var(--ink-soft); max-width: 56ch; margin: 0 auto 22px; }
.cta-band .hero-actions { justify-content: center; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: #07090700;
  border-top: 1px solid var(--line);
  padding: clamp(44px, 6vw, 72px) 0 28px;
  position: relative;
  z-index: 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer-grid h4 { font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 14px; }
.footer-grid a { color: var(--ink-soft); display: block; padding: 5px 0; font-size: .9rem; transition: color 200ms var(--ease); }
.footer-grid a:hover { color: var(--accent); }
.footer-brand p { color: var(--ink-soft); font-size: .9rem; max-width: 42ch; }
.footer-meta {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  align-items: center;
  justify-content: space-between;
}
.footer-meta p { margin: 0; font-family: var(--mono); font-size: .72rem; color: var(--ink-dim); }
.footer-meta .vkn { color: var(--ink-soft); }

/* =========================================================
   PAGE HEAD (interior pages)
   ========================================================= */
.page-head {
  padding: clamp(40px, 7vw, 80px) 0 clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.page-head h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
.page-head .lede { margin-top: 12px; }
.breadcrumb { font-family: var(--mono); font-size: .72rem; color: var(--ink-dim); margin-bottom: 14px; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--accent); }

/* legal/doc content */
.doc { max-width: 760px; }
.doc h2 { font-size: 1.4rem; margin: 40px 0 12px; }
.doc h3 { font-size: 1.1rem; margin: 26px 0 8px; color: var(--accent-2); }
.doc p, .doc li { color: var(--ink-soft); font-size: .96rem; line-height: 1.75; }
.doc p { margin: 0 0 1.1em; overflow-wrap: anywhere; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc .updated { font-family: var(--mono); font-size: .74rem; color: var(--ink-dim); margin-bottom: 24px; }

/* sitemap page */
.sitemap-cols { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 720px) { .sitemap-cols { grid-template-columns: repeat(3, 1fr); } }
.sitemap-cols ul { list-style: none; padding: 0; margin: 0; }
.sitemap-cols li { padding: 6px 0; }
.sitemap-cols a { color: var(--ink-soft); font-family: var(--mono); font-size: .9rem; }
.sitemap-cols a:hover { color: var(--accent); }

/* 404 */
.err-wrap { text-align: center; padding: clamp(60px, 12vw, 140px) 0; }
.err-wrap .code { font-family: var(--mono); font-size: clamp(4rem, 18vw, 11rem); color: var(--accent); line-height: 1; }
.err-wrap p { color: var(--ink-soft); max-width: 48ch; margin: 0 auto 24px; }

/* =========================================================
   COOKIE BANNER
   ========================================================= */
.cookie-banner {
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  max-width: 520px;
  margin: 0 auto;
  background: #0c0f0c;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 20px 22px;
  transform: translateY(140%);
  opacity: 0;
  transition: transform 280ms var(--ease), opacity 240ms var(--ease);
  z-index: 9999;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.9);
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
@media (min-width: 760px) { .cookie-banner { left: 24px; right: auto; max-width: 420px; } }
.cookie-banner h3 { font-size: 1rem; margin-bottom: 8px; }
.cookie-banner p { font-size: .84rem; color: var(--ink-soft); margin-bottom: 16px; }
.cookie-banner p a { color: var(--accent); }
.cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cookie-actions .btn { padding: 11px 14px; font-size: .8rem; min-height: 44px; justify-content: center; }
.cookie-actions .full { grid-column: 1 / -1; }
/* "Reddet" must read as an equally clickable choice as "Kabul et" — no dark pattern.
   Filled neutral surface + strong border so it carries the same visual weight as accept. */
.cookie-actions [data-consent="reject"] {
  background: #2a322688;
  color: var(--ink);
  border: 1.5px solid #5a7349;
  font-weight: 700;
}
.cookie-actions [data-consent="reject"]:hover,
.cookie-actions [data-consent="reject"]:focus-visible {
  background: #323b2e;
  border-color: var(--accent);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -14px rgba(157,255,87,.45);
}

/* =========================================================
   REVEAL
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 640ms var(--ease), transform 640ms var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.is-in { opacity: 1; transform: none; }
html.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* twinkle stars (decor svg circles) */
.twinkle { animation: twinkle 4s var(--ease) infinite; animation-delay: calc(var(--i, 0) * 0.4s); }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .3; transform: scale(.82); } }

/* constellation draw */
.constellation .c-line {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  transition: stroke-dashoffset 1.6s var(--ease);
}
.constellation.is-in .c-line { stroke-dashoffset: 0; }
.constellation .c-node { opacity: 0; transition: opacity 500ms var(--ease); transition-delay: calc(0.8s + var(--i,0) * 0.12s); }
.constellation.is-in .c-node { opacity: 1; }
html.no-js .constellation .c-line { stroke-dashoffset: 0; }
html.no-js .constellation .c-node { opacity: 1; }

/* orbital ambient */
.orbit-wrap { animation: orbit 42s linear infinite; transform-origin: center; }
@keyframes orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .orbit-wrap, .twinkle, .star-layer, .calc-led .dot { animation: none !important; }
  .star-layer { transform: none !important; }
}

.utilbar {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 22px;
}

.note-small { font-family: var(--mono); font-size: .72rem; color: var(--ink-dim); }

/* helpers */
.mt-0 { margin-top: 0; }
.center { text-align: center; }
.lead-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }

@media (max-width: 480px) {
  .card .ico { width: 40px; height: 40px; }
  .cookie-actions { grid-template-columns: 1fr; }
}

.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:9998;transition:width 80ms linear;pointer-events:none}

/* header-cta-padding-guard v1 */
.nav-desktop a.nav-cta, header a.nav-cta, .site-header a.nav-cta {
  padding: 10px 18px;
}

/* drawer-cta-color-guard v1 */
.drawer a.nav-cta, .drawer .nav-cta, .mobile-menu a.nav-cta, nav[class*=mobile] a.nav-cta {
  color: #06140a !important;
}