/* ============================================================================
   VOTUM — sayfa desenleri
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Marka
   -------------------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.brand:hover { color: inherit; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-name { font-weight: 660; letter-spacing: -0.015em; font-size: 1.0625rem; }

/* ----------------------------------------------------------------------------
   Üst çubuk — kaydırınca zemin kazanır
   -------------------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
              backdrop-filter var(--t-mid) var(--ease);
}
.site-head.is-stuck {
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom-color: var(--border);
}
.head-row { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.head-nav { display: flex; align-items: center; gap: .35rem; margin-inline-start: auto; }
.head-nav a:not(.btn) {
  padding: .45rem .75rem; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 520; color: var(--fg-muted); text-decoration: none;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.head-nav a:not(.btn):hover { color: var(--fg); background: var(--bg-sunken); }
.head-context { font-size: var(--fs-sm); color: var(--fg-muted); }
@media (max-width: 40rem) { .head-context { display: none; } }

/* ----------------------------------------------------------------------------
   Alt bilgi
   -------------------------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--border); margin-top: auto; padding-block: 2.5rem; }
.foot-row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; font-size: var(--fs-sm); color: var(--fg-muted); }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-inline-start: auto; }
.foot-links a { color: var(--fg-muted); text-decoration: none; }
.foot-links a:hover { color: var(--fg); }

body { display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }

/* ----------------------------------------------------------------------------
   Koyu bölüm — mühürlemenin olduğu anlar
   -------------------------------------------------------------------------- */
.on-ink {
  background: var(--ink-950); color: oklch(0.96 0.004 265);
  --fg: oklch(0.96 0.004 265);
  --fg-muted: oklch(0.73 0.014 265);
  --fg-subtle: oklch(0.60 0.016 265);
  --border: oklch(1 0 0 / 0.11);
  --border-soft: oklch(1 0 0 / 0.07);
  --bg-raised: oklch(1 0 0 / 0.045);
  --bg-sunken: oklch(0 0 0 / 0.22);
  --accent: var(--accent-400);
  --accent-fg: var(--ink-950);
  --accent-weak: oklch(0.70 0.16 278 / 0.16);
}
.on-ink h1, .on-ink h2, .on-ink h3 { color: oklch(0.985 0.003 265); }

/* ----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(4rem, 13vh, 8.5rem) clamp(3.5rem, 10vh, 6.5rem); }

/* Arka plan: ince ızgara + iki yumuşak ışık. Dekorasyon değil, derinlik. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(oklch(1 0 0 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 65% at 50% 32%, #000 30%, transparent 78%);
}
.hero::after {
  content: ""; position: absolute; inset: -30% -10% auto; height: 70%; pointer-events: none;
  background:
    radial-gradient(48rem 26rem at 22% 18%, oklch(0.585 0.205 277 / 0.30), transparent 62%),
    radial-gradient(40rem 22rem at 82% 8%, oklch(0.66 0.155 200 / 0.18), transparent 60%);
  filter: blur(6px);
}
.hero > * { position: relative; z-index: 1; }

.hero-inner { display: grid; gap: 1.6rem; max-width: 54rem; }
.hero.center .hero-inner { margin-inline: auto; text-align: center; justify-items: center; }
.hero h1 { font-size: var(--fs-display); letter-spacing: -0.035em; font-weight: 660; }
.hero .lead { max-width: 40rem; font-size: clamp(1.1rem, 1rem + 0.7vw, 1.375rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; }
.hero.center .hero-actions { justify-content: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .8rem .35rem .45rem; border-radius: var(--r-pill);
  background: oklch(1 0 0 / 0.07); border: 1px solid oklch(1 0 0 / 0.14);
  font-size: var(--fs-xs); font-weight: 540; color: oklch(0.88 0.01 265);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--verify-500); margin-inline-start: .3rem; }

/* ----------------------------------------------------------------------------
   İki yüz: gizlilik ↔ doğrulanabilirlik
   Ürünün fikri bu; sayfada da karşı karşıya duruyor.
   -------------------------------------------------------------------------- */
.duo { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
@media (min-width: 48rem) { .duo { grid-template-columns: 1fr 1fr; } }
.duo-side { padding: clamp(1.6rem, 4vw, 2.6rem); display: grid; gap: .85rem; align-content: start; background: var(--bg-raised); }
.duo-side.sealed { background: var(--ink-950); color: oklch(0.96 0.004 265); }
.duo-side.sealed h3 { color: oklch(0.985 0 0); }
.duo-side.sealed p  { color: oklch(0.74 0.014 265); }
.duo-side.sealed .icon-pad { background: oklch(1 0 0 / 0.08); color: var(--accent-400); }

/* ----------------------------------------------------------------------------
   Özellik ızgarası
   -------------------------------------------------------------------------- */
.grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.feature { display: grid; gap: .7rem; align-content: start; }
.feature h3 { margin: 0; }
.feature p { margin: 0; color: var(--fg-muted); font-size: var(--fs-sm); }

/* ----------------------------------------------------------------------------
   Adımlar — numaralı akış
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 0; counter-reset: step; list-style: none; padding: 0; margin: 0; }
.step {
  counter-increment: step;
  display: grid; grid-template-columns: auto 1fr; gap: 0 1.2rem;
  padding-bottom: 2rem; position: relative;
}
.step:last-child { padding-bottom: 0; }
.step-num {
  grid-row: 1 / span 2;
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--border); background: var(--bg-raised);
  font-size: var(--fs-sm); font-weight: 640; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.step-num::before { content: counter(step); }
/* Adımları birbirine bağlayan çizgi */
.step:not(:last-child)::before {
  content: ""; position: absolute; left: 20px; top: 44px; bottom: 6px;
  width: 1px; background: var(--border);
}
.step h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.step p  { margin: 0; color: var(--fg-muted); font-size: var(--fs-sm); }

/* ----------------------------------------------------------------------------
   Alıntı / öne çıkan ifade
   -------------------------------------------------------------------------- */
.pull {
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.9rem);
  line-height: 1.35; font-weight: 560; letter-spacing: -0.02em;
  max-width: 34ch; text-wrap: balance;
}

/* ----------------------------------------------------------------------------
   Oy kabini
   -------------------------------------------------------------------------- */
.booth { max-width: 40rem; margin-inline: auto; display: grid; gap: 1.5rem; }
.booth-head { display: grid; gap: .5rem; }

.token-input {
  font-family: var(--mono); font-size: 1.2rem; letter-spacing: .1em;
  text-align: center; text-transform: uppercase; min-height: 58px;
  border-radius: var(--r-lg);
}

.choices { display: grid; gap: .7rem; }
.choice {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.1rem 1.25rem; cursor: pointer;
  background: var(--bg-raised);
  border: 1.5px solid var(--border); border-radius: var(--r-lg);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              translate var(--t-fast) var(--ease-out);
}
.choice:hover { border-color: var(--fg-subtle); translate: 0 -1px; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-weak); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice input { width: 1.3rem; height: 1.3rem; margin-top: .18rem; }
.choice-body { display: grid; gap: .15rem; min-width: 0; }
.choice-name { font-weight: 580; font-size: 1.05rem; }
.choice-sub  { font-size: var(--fs-sm); color: var(--fg-muted); }
.choice-desc { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: .25rem; }
.choice-abstain { border-style: dashed; }

/* Makbuz */
.receipt { display: grid; gap: .6rem; justify-items: center; text-align: center; }
.receipt-code {
  font-family: var(--mono); font-weight: 680;
  font-size: clamp(1.5rem, 1rem + 3.2vw, 2.4rem); letter-spacing: .07em;
  padding: 1.1rem 1.4rem; width: 100%;
  background: var(--bg-sunken); border: 2px dashed var(--accent);
  border-radius: var(--r-lg); overflow-wrap: anywhere;
}
.seal-mark {
  display: grid; place-items: center; width: 68px; height: 68px;
  border-radius: 50%; background: oklch(0.66 0.155 158 / 0.13); color: var(--verify);
}
@media (prefers-reduced-motion: no-preference) {
  .seal-mark { animation: sealPop 520ms var(--ease-spring) both; }
  @keyframes sealPop { from { scale: .6; opacity: 0; } to { scale: 1; opacity: 1; } }
}

/* ----------------------------------------------------------------------------
   Yönetici kabuğu
   -------------------------------------------------------------------------- */
.admin-head { border-bottom: 1px solid var(--border); background: var(--bg-raised); position: sticky; top: 0; z-index: 40; }
.admin-head-row { display: flex; align-items: center; gap: 1rem; min-height: 60px; max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--gutter); }
.admin-scope {
  padding-inline-start: 1rem; margin-inline-start: .25rem;
  border-inline-start: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--fg-muted);
}
@media (max-width: 44rem) { .admin-scope { display: none; } }
.admin-who { margin-inline-start: auto; display: flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); }
/* inline-flex ZORUNLU: base.css tum svg leri display:block yapiyor. Flex
   olmadan ikon kendi satirini aliyor ve ad ALT SATIRA dusuyordu (baglanti
   28px yerine 51px). .admin-nav a ayni sebeple flex. */
.admin-who a {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--fg-muted); text-decoration: none; padding: .35rem .6rem; border-radius: var(--r-sm);
}
.admin-who a:hover { color: var(--fg); background: var(--bg-sunken); }

/* width:100% ZORUNLU. body flex kolonudur (yukarida, satir 47) ve flex
   duzeninde `margin-inline: auto` align-items:stretch i EZER: kutu artik
   genislemez, icerigine gore buzulur ve ortalanir. Tablosu olan sayfalarda
   fark edilmez -- tablo kutuyu zorla genisletir; bos sayfada kabuk ~600px e
   coker. .wrap/.wrap-wide (base.css) ayni sebeple width:100% tasir. */
.admin-shell {
  display: grid; gap: 2rem; align-items: start;
  width: 100%; max-width: var(--wrap-wide); margin-inline: auto;
  padding: 1.75rem var(--gutter) 5rem;
}
/* Iki sutun YALNIZCA kenar cubugu varken. Giris ve 2FA ekranlarinda nav
   basilmaz; kosulsuz yazildiginde tek grid ogesi olan .admin-main 15.5rem lik
   ILK sutuna dusuyor ve form ~250px e sikisiyordu. */
@media (min-width: 62rem) {
  .admin-shell:has(.admin-nav) { grid-template-columns: 15.5rem minmax(0, 1fr); gap: 2.5rem; }
}

.admin-nav { position: sticky; top: 84px; }
.admin-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.admin-nav a {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .8rem; border-radius: var(--r-md); min-height: 42px;
  font-size: var(--fs-sm); font-weight: 520; color: var(--fg-muted); text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.admin-nav a:hover { background: var(--bg-sunken); color: var(--fg); }
.admin-nav a.is-on { background: var(--accent-weak); color: var(--accent); font-weight: 580; }
.admin-nav a.is-on svg { color: var(--accent); }
.admin-nav .pill {
  margin-inline-start: auto; font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
  background: var(--bg-sunken); color: var(--fg-muted);
  border-radius: var(--r-pill); padding: .05rem .5rem; min-width: 1.6rem; text-align: center;
}
.admin-nav a.is-on .pill { background: var(--accent); color: var(--accent-fg); }

.admin-main { min-width: 0; display: grid; gap: 1.5rem; align-content: start; }
.page-head { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.page-head h1 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
.page-head .row-end { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Zincir / mühür durumu satırı */
.status-line { display: flex; gap: .6rem; align-items: center; font-size: var(--fs-sm); }
.status-ok   { color: var(--verify); }
.status-bad  { color: var(--danger); font-weight: 620; }

/* ----------------------------------------------------------------------------
   Anahtar payı noktaları
   -------------------------------------------------------------------------- */
.share-dots { display: flex; gap: .5rem; }
.share-dots .dot {
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 2px solid var(--border); background: transparent;
  transition: background var(--t-mid) var(--ease-spring), border-color var(--t-mid) var(--ease);
}
.share-dots .dot.on { background: var(--accent); border-color: var(--accent); scale: 1.05; }
.shares { display: grid; gap: 1rem; list-style: none; padding: 0; margin: 0; counter-reset: sh; }
.shares li { counter-increment: sh; display: grid; gap: .35rem; }
.share-label { font-size: var(--fs-xs); font-weight: 620; color: var(--fg-subtle); text-transform: uppercase; letter-spacing: .07em; }

/* ----------------------------------------------------------------------------
   Seçmen listesi (tahta)
   -------------------------------------------------------------------------- */
.roll { columns: 2 13rem; gap: 1.75rem; list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.roll li { break-inside: avoid; padding: .3rem 0; border-bottom: 1px solid var(--border-soft); }

.timeline { display: grid; gap: 0; margin: 0; }
.timeline > div {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between;
  padding: .75rem 0; border-bottom: 1px solid var(--border-soft);
}
.timeline > div:last-child { border-bottom: 0; }
.timeline dt { font-weight: 550; margin: 0; font-size: var(--fs-sm); }
.timeline dd { margin: 0; color: var(--fg-muted); font-size: var(--fs-sm); text-align: end; }

.limits { display: grid; gap: .9rem; padding-inline-start: 1.1rem; color: var(--fg-muted); font-size: var(--fs-sm); }
.limits li::marker { color: var(--fg-subtle); }

details.template { border: 1px solid var(--border); border-radius: var(--r-md); padding: .8rem 1rem; background: var(--bg-sunken); }
details.template summary { cursor: pointer; font-weight: 560; font-size: var(--fs-sm); }
blockquote.statement {
  margin: 1rem 0; padding: .9rem 1.15rem; border-inline-start: 3px solid var(--accent);
  background: var(--bg-sunken); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--fs-sm);
}

/* ----------------------------------------------------------------------------
   Sunum modu (projeksiyon)
   -------------------------------------------------------------------------- */
body.present {
  justify-content: center; gap: clamp(1.5rem, 4vh, 3rem);
  padding: clamp(1.5rem, 5vh, 4rem) clamp(1rem, 5vw, 5rem); text-align: center;
  background: var(--ink-950); color: oklch(0.96 0.004 265);
}
.present-brand { font-size: var(--fs-label); font-weight: 640; letter-spacing: .14em; text-transform: uppercase; color: oklch(0.65 0.016 265); }
.present h1 { font-size: clamp(1.9rem, 5.5vw, 4rem); letter-spacing: -0.03em; }
.present-org { color: oklch(0.72 0.014 265); font-size: clamp(1rem, 2vw, 1.35rem); }
.present-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(2rem, 8vw, 6rem); }
.present-stat { display: grid; gap: .3rem; }
.present-n { font-size: clamp(3rem, 12vw, 8rem); font-weight: 680; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.present-l { font-size: clamp(.8rem, 1.5vw, 1.05rem); color: oklch(0.68 0.016 265); text-transform: uppercase; letter-spacing: .1em; }
.present .results { max-width: 62rem; margin-inline: auto; width: 100%; text-align: start; }
.present .result-name  { font-size: clamp(1.15rem, 2.6vw, 2rem); }
.present .result-votes { font-size: clamp(1.4rem, 3.6vw, 2.7rem); }
.present .result-bar   { height: clamp(.9rem, 2vh, 1.4rem); background: oklch(1 0 0 / 0.09); }
.present-foot { display: grid; gap: .45rem; }
.present-hash { font-family: var(--mono); font-size: clamp(.6rem, 1vw, .8rem); color: oklch(0.62 0.016 265); overflow-wrap: anywhere; }
.present .status-ok  { color: var(--verify-500); }
.present .status-bad { color: var(--danger-500); }

/* Kopyala düğmesi: kopyalandıktan sonra ikon onaya döner.
   Tema düğmesiyle aynı teknik — satır içi style CSP'de yasak. */
.copy-done { display: none; }
.is-copied .copy-idle { display: none; }
.is-copied .copy-done { display: block; }
.is-copied { color: var(--ok, var(--accent)); }

/* Pano yedeği için gizli alan. execCommand seçilebilir bir öğe ister;
   .sr-only'nin clip-path'i bazı tarayıcılarda seçimi bozuyor. */
.copy-sink { position: fixed; top: 0; left: -9999px; opacity: 0; }

/* Tablo hücresinde kopyalanabilir değer. Değeri elle seçmek komşu
   hücreyi de alabiliyor; düğme tam olarak değerin kendisini kopyalar. */
.copy-cell { display: flex; align-items: center; gap: .4rem; }
.copy-cell code { min-width: 0; overflow-wrap: anywhere; }
.copy-cell > .btn { flex: none; padding-inline: .45rem; }

/* Pay satırı: kod ile düğme yan yana */
.share-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.share-row code { flex: 1 1 20rem; min-width: 0; }

/* Tema düğmesi: aktif temanın ikonu gizlenir */
.theme-sun  { display: none; }
.theme-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-sun  { display: block; }
  :root:not([data-theme="light"]) .theme-moon { display: none; }
}
:root[data-theme="dark"] .theme-sun  { display: block; }
:root[data-theme="dark"] .theme-moon { display: none; }
:root[data-theme="light"] .theme-sun  { display: none; }
:root[data-theme="light"] .theme-moon { display: block; }