/* Black + orange components (design/SANAT-YONETIMI.md "Bileşen kuralları"). Every colour comes from tokens.css. */

/* ---------- Icons ---------- */
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Buttons ----------
   Primary (.btn--gold, .btn--y, .btn--ink, .btn--ticket): mandarin fill, ink-0 label in Barlow Condensed 700 capitals, a
   1 px inset mandarin-deep edge and a 1 px mandarin-light catch light on the top-left; it never glows. Hover
   mandarin-light, pressed mandarin-deep, the label stays ink-0 in every state (8.13 / 11.21 / 4.78). The large key
   (.btn--lg) is the CTA plate: three ink-0 studs on each side. Secondary (.btn--ghost, .btn--bonus): transparent,
   1 px mandarin edge, mandarin label. Hover lifts only under real hover (a tap must not leave a key lifted);
   :active and .is-going (ui.js, on /go/ links while the next page loads) seat the key. */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 52px; max-width: 100%; padding: 8px var(--s-6);
  color: var(--on-brand); background: var(--brand);
  border: 0; border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--mandarin-deep), inset 1px 1px 0 1px var(--mandarin-light), 0 8px 20px rgba(0, 0, 0, 0.45);
  font: 700 1.0625rem/1.15 var(--font-label); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; text-align: center; text-wrap: balance;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast), color var(--dur-fast);
}
.btn .icon { color: currentColor; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); background: var(--cta-hover); }
}
.btn:active, .btn.is-going {
  transform: translateY(1px); transition-duration: 50ms; background: var(--cta-pressed);
  box-shadow: inset 0 0 0 1px var(--mandarin-deep), inset 0 3px 8px rgba(0, 0, 0, 0.35);
}
.btn.is-going { cursor: progress; }
.btn.is-going > .icon, .promo__cta.is-going > .icon { animation: go-nudge 0.5s ease-in-out infinite alternate; }
@keyframes go-nudge { to { translate: 4px 0; } }
/* CTA plate: the studs are painted, not glyphs: 3 ink-0 domes per side with a 1 px mandarin-light highlight. */
.btn--lg { min-height: 64px; padding: 0 calc(var(--s-8) + 14px); font-size: 1.3rem; }
.btn--lg::before, .btn--lg::after {
  content: ""; position: absolute; top: 50%; width: 6px; height: 36px; translate: 0 -50%; pointer-events: none;
  background: radial-gradient(circle at 36% 36%, var(--mandarin-light) 0 0.5px, transparent 1px) 0 0 / 6px 12px repeat-y, radial-gradient(circle, var(--ink-0) 0 2.3px, transparent 2.8px) 0 0 / 6px 12px repeat-y;
}
.btn--lg::before { left: 12px; }
.btn--lg::after { right: 12px; }
.btn--ghost, .btn--bonus {
  background: transparent; color: var(--mandarin); box-shadow: inset 0 0 0 1px var(--mandarin);
}
@media (hover: hover) {
  .btn--ghost:hover, .btn--bonus:hover { background: transparent; color: var(--mandarin-light); box-shadow: inset 0 0 0 1px var(--mandarin-light); }
}
.btn--ghost:active, .btn--ghost.is-going, .btn--bonus:active, .btn--bonus.is-going { background: color-mix(in srgb, var(--mandarin) 12%, transparent); box-shadow: inset 0 0 0 1px var(--mandarin-deep); }
.btn--ticket { gap: 6px; }
.btn--block { width: 100%; }
.btn--icon { min-width: 52px; padding: 0; }

/* Reel: label rolls up once on hover/focus. Each line is 1.35em tall so the İ/Ü marks above the caps stay inside the
   clipping window; the negative margin keeps the key's height. */
.btn__reel { display: inline-block; height: 1.35em; margin-block: -0.175em; overflow: hidden; line-height: 1.35; }
.btn__reel > span { display: block; transition: transform var(--dur) var(--ease-out); }
.btn:focus-visible .btn__reel > span { transform: translateY(-100%); }
@media (hover: hover) { .btn:hover .btn__reel > span { transform: translateY(-100%); } }

/* Tertiary: cream label, a mandarin-light underline on hover. */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding-bottom: 4px;
  font: 800 0.9375rem/1 var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  color: var(--cream); border-bottom: 1px solid var(--line); transition: gap var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.link-arrow .icon { color: var(--mandarin); }
.link-arrow:hover { gap: var(--s-3); border-color: var(--mandarin-light); }

/* ---------- Header: ink-0 at 90% + blur; cream wordmark with a mandarin dot; cream nav, active mandarin; one CTA ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header); color: var(--cream);
  background: var(--scrim); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: translate 0.25s var(--ease-out);
}
/* Phones/tablets: ui.js slides the header away while reading down and brings it back on the way up. */
.site-header--hide { translate: 0 calc(-100% - 4px); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 66px; }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; white-space: nowrap; }
.logo__mark { width: 36px; height: 36px; flex: none; }
.logo__text { font: 900 1.12rem/1 var(--font-display); letter-spacing: 0.08em; color: var(--cream); }
.logo__dot { color: var(--mandarin); }
.nav { display: none; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); white-space: nowrap; font: 700 1.0625rem/1 var(--font-label); letter-spacing: 0.04em; text-decoration: none; color: var(--cream); transition: color var(--dur-fast); }
.nav a:hover { color: var(--mandarin-light); }
.nav a[aria-current="page"] { color: var(--mandarin); box-shadow: inset 0 -2px 0 var(--mandarin); }
.header-cta { display: none; }
/* The welcome bonus sits at the top of every page from tablet width up: a quiet secondary key (the login is the CTA). */
.header-bonus { display: none; }
@media (min-width: 768px) {
  .header-bonus {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 12px; margin-left: auto;
    font: 800 1.0625rem/1 var(--font-label); letter-spacing: 0.04em; text-decoration: none; white-space: nowrap;
    color: var(--mandarin); border: 1px solid var(--line); border-radius: 4px; transition: border-color var(--dur-fast), color var(--dur-fast);
  }
  .header-bonus strong { font-weight: 800; color: inherit; }
  .header-bonus span { letter-spacing: 0.1em; color: var(--text-2); }
  .header-bonus .icon { width: 1.1em; height: 1.1em; }
  .header-bonus:active { border-color: var(--mandarin-deep); }
}
@media (hover: hover) and (min-width: 768px) {
  .header-bonus:hover { border-color: var(--mandarin); color: var(--mandarin-light); }
}
.menu { position: relative; }
.menu > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; min-width: 44px; padding: 0 var(--s-3); color: var(--cream); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; font: 800 1rem/1 var(--font-label); letter-spacing: 0.08em; }
.menu > summary .icon { color: var(--mandarin); }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { border-color: var(--mandarin); }
.menu__panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(280px, calc(100vw - 32px)); max-height: calc(100svh - 80px); overflow-y: auto; overscroll-behavior: contain; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-deep); padding: var(--s-2); }
.menu__panel a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--s-4); border-radius: 6px; font: 700 1.2rem/1 var(--font-label); text-decoration: none; color: var(--cream); }
.menu__panel a:hover { color: var(--mandarin-light); }
.menu__panel a[aria-current="page"] { color: var(--mandarin); box-shadow: inset 2px 0 0 var(--mandarin); }
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav a { padding: 0 10px; }
  .header-bonus span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 1024px) {
  .nav { display: flex; gap: var(--s-1); flex: 1; justify-content: center; }
  .header-bonus { margin-left: 0; }
  .header-cta { display: inline-flex; min-height: 44px; font-size: 0.9375rem; padding: 0 var(--s-4); }
  .menu { display: none; }
}

/* ---------- Tablet sign (404 / offline) ---------- */
.hero { padding-block: var(--s-8) var(--s-12); }
.marquee {
  position: relative; text-align: center; padding: var(--s-12) var(--s-4);
  background: var(--ink-2); border: 1px solid var(--line); border-top: 2px solid var(--mandarin); border-radius: var(--radius);
  box-shadow: var(--shadow-deep);
}
.marquee__kicker {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: var(--s-4);
  font: 800 0.875rem/1 var(--font-label); letter-spacing: 0.24em; color: var(--mandarin);
}
.marquee__kicker::before, .marquee__kicker::after { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, var(--ember), var(--mandarin)); }
.marquee__kicker::after { rotate: 180deg; }
.marquee h1 { font-size: clamp(2.2rem, 8vw, 4rem); line-height: 1.05; margin: 0 auto var(--s-4); max-width: 14ch; }
.marquee__lead { margin: 0 auto var(--s-6); font-size: var(--fs-md); max-width: 36ch; color: var(--text-2); }
.marquee__actions { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
/* "Adres güncel": a 6 px mandarin-light dot + text-2 (no badge colour of its own). */
.updated { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.02em; color: var(--status-text); }
.updated::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--status); }
.updated .icon { display: none; }
@media (max-width: 479px) { .marquee__kicker { font-size: 0.75rem; letter-spacing: 0.16em; } }
@media (min-width: 768px) { .marquee { padding: var(--s-16) var(--s-8); } }

/* ---------- Page head (inner pages): court black with the gate's warm light far above ---------- */
.page-head {
  position: relative; padding-block: var(--s-12);
  background: radial-gradient(70% 120% at 80% -30%, var(--glow), transparent 62%), linear-gradient(180deg, var(--ink-0) 0%, var(--ink-1) 100%);
}
.page-head h1 { max-width: 20ch; }
.page-head__lead { font-size: var(--fs-md); max-width: 60ch; color: var(--text-2); }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-6); }
.page-head .backup-list { margin-top: var(--s-4); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: 0 0 var(--s-4); font-weight: 600; font-size: var(--fs-sm); color: var(--text-2); }
.crumbs li + li { margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--line); }
.crumbs a { position: relative; display: inline-flex; min-height: 24px; align-items: center; color: var(--mandarin); }
/* Small inline links keep their look but get a ≥44px-tall hit area (no layout change). */
.crumbs a::after { content: ""; position: absolute; inset: -10px -4px; }

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
/* Channels: flex so a single card sits centred at a readable width instead of a narrow key in the top-left corner. */
.channel-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-6); }
.channel-grid > .channel-card { flex: 1 1 280px; max-width: 420px; }
ul.grid { list-style: none; padding: 0; margin: 0; }
.grid > li { margin: 0; }
.grid > li > .card { height: 100%; }
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
/* Card: ink-2 surface, 1 px line edge; on hover only the top hairline warms (ember → mandarin-deep). Never a filled orange card. */
.card {
  position: relative; background: var(--ink-2); color: var(--cream);
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-6);
}
.card::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: 1px; border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--ember), var(--mandarin-deep)); opacity: 0; transition: opacity var(--dur-fast);
}
@media (hover: hover) { .card:hover::before { opacity: 1; } }
.card h3 { margin-bottom: var(--s-2); }
.card p { color: var(--text-2); }
.card p:last-child { margin-bottom: 0; }
.bonus-card__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }
.bonus-card__head .icon { color: var(--mandarin); }
.bonus-card__head h3 { margin: 0; }

.channel-card { display: flex; flex-direction: column; gap: var(--s-3); }
.channel-card__top { display: flex; align-items: center; gap: var(--s-3); }
.channel-card__icon { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 50%; color: var(--mandarin); border: 1px solid var(--line); background: var(--ink-1); }
.channel-card__icon .icon { width: 24px; height: 24px; }
.channel-card h3 { margin: 0; }
.channel-card small { display: block; font-weight: 600; font-size: 0.875rem; color: var(--text-2); }
.channel-card .btn { margin-top: auto; }

/* Landing CTA card (home): the giriş key, the backups and the date. A mandarin rule on top marks it as the action card. */
.home-giris__card { display: grid; gap: var(--s-6); grid-template-columns: 1fr; border-top: 2px solid var(--mandarin); }
@media (min-width: 900px) { .home-giris__card { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.home-giris__actions { display: grid; gap: var(--s-4); justify-items: start; }

/* ---------- Stat table + fact lists ---------- */
.table-wrap { overflow-x: auto; }
.stat-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); font-variant-numeric: tabular-nums; }
.stat-table th, .stat-table td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.stat-table th { font: 800 0.9375rem/1.2 var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mandarin); background: var(--ink-1); }
.stat-table tbody th { width: auto; }
.stat-table tr:last-child th, .stat-table tr:last-child td { border-bottom: 0; }
.stat-table td { font-weight: 600; color: var(--cream); }
.table-note { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--s-3); }
.fact-list { overflow-x: auto; }
.fact-list li::marker { color: var(--mandarin); }
.fact-pending { color: var(--text-2); font-family: var(--font-label); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: var(--s-4); }
.steps li { counter-increment: step; margin: 0; display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); align-items: start; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font: 700 1.2rem/1 var(--font-label); color: var(--mandarin); border: 1.5px solid var(--mandarin); background: var(--ink-0);
}
.steps p { color: var(--text-2); }

/* ---------- Form fields: mandarin-deep edge, 2 px mandarin-light focus ring ---------- */
.filter { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); align-items: end; margin-bottom: var(--s-8); padding: var(--s-4); background: var(--ink-2); color: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); }
.filter[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field label { font: 800 0.9375rem/1 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mandarin); }
.field select, .field input { min-height: 48px; padding: 0 var(--s-3); background: var(--ink-1); color: var(--cream); border: 1px solid var(--mandarin-deep); border-radius: 4px; font-weight: 600; }
.field select:focus-visible, .field input:focus-visible { outline: 2px solid var(--mandarin-light); outline-offset: 2px; }
.filter__count { font-weight: 600; margin: 0; align-self: center; color: var(--text-2); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: var(--s-3); max-width: 860px; }
.faq details { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color var(--dur-fast); }
.faq details[open] { border-color: var(--ember); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 56px; padding: var(--s-3) var(--s-4); cursor: pointer; list-style: none; font: 700 1.125rem/1.3 var(--font-display); color: var(--cream); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; color: var(--mandarin); border: 1.5px solid var(--mandarin); border-radius: 50%; font: 400 1.35rem/1 var(--font-body); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 var(--s-4) var(--s-4); }
.faq details > div p { margin: 0; color: var(--text-2); }
.faq-item { padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.faq-item h3 { font-size: 1.15rem; }
.faq-item p { color: var(--text-2); }

/* ---------- Alerts, install, badge ---------- */
.alert { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); }
.grid > .alert { align-self: start; } /* a short note beside a long list keeps its own height */
.alert--danger { border-color: var(--ember); box-shadow: inset 3px 0 0 var(--mandarin); }
.alert--danger .icon { color: var(--danger); width: 28px; height: 28px; }
.alert h3, .alert__title { margin-bottom: var(--s-2); font-size: var(--fs-md); line-height: 1.2; }
.alert p, .alert li { color: var(--text-2); }
.alert p:last-child, .alert ul:last-child { margin-bottom: 0; }

.install-card { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .install-card { grid-template-columns: 1fr auto; align-items: center; } }
.install-card [hidden] { display: none; }

/* 18+: a 1.5 px mandarin ring, mandarin "18+", no fill. */
.badge-18 { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border: 1.5px solid var(--mandarin); border-radius: 50%; font-weight: 800; font-size: 1rem; line-height: 1; color: var(--mandarin); background: none; }

.backup-list { display: grid; gap: var(--s-3); list-style: none; padding: 0; }
.backup-list li { margin: 0; }

/* ---------- Footer: ink-0; text-2 body; cream links, hover mandarin; line dividers ---------- */
.site-footer { position: relative; background: var(--ink-0); color: var(--text-2); padding-block: var(--s-12) var(--s-8); border-top: 1px solid var(--line); }
.site-footer__grid { display: grid; gap: var(--s-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.site-footer h2 { font-size: 1.05rem; letter-spacing: 0.04em; color: var(--cream); margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: 0; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--cream); transition: color var(--dur-fast); }
@media (hover: hover) { .site-footer a:hover { color: var(--mandarin); } }
.rg { display: flex; gap: var(--s-4); align-items: flex-start; }
.rg .badge-18 { flex: none; }
.rg p { margin: 0; font-size: var(--fs-sm); }
.site-footer__bottom { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-mute); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); }

/* ---------- Sticky mobile bar ----------
   66px (--sticky-h): [ bonus (outline) ][ GÜNCEL GİRİŞ (filled, widest when there is no bonus) ][ Telegram ]. */
.sticky-bar {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky);
  display: grid; grid-auto-flow: column; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; gap: var(--s-2);
  padding: 9px var(--s-4) calc(var(--s-2) + env(safe-area-inset-bottom, 0px)); /* 1 + 9 + 48 + 8 = --sticky-h */
  background: var(--scrim); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
}
.sticky-bar .btn, .header-cta { white-space: nowrap; }
.sticky-bar .btn { min-height: 48px; font-size: 0.9375rem; padding: 0 var(--s-4); }
.sticky-bar .btn--icon { min-width: 48px; padding: 0; }
.sticky-bar .btn--ticket { padding: 0 var(--s-3); font-size: 1rem; }
.sticky-bar .btn--bonus .icon { color: inherit; }
@media (min-width: 768px) { .sticky-bar { display: none; } }

@media (max-width: 359px) {
  .logo__text { font-size: 0.98rem; }
  .logo__mark { width: 30px; height: 30px; }
  .menu > summary { padding: 0 10px; }
  .sticky-bar { gap: 6px; padding-inline: 10px; }
  .sticky-bar .btn { font-size: 0.875rem; padding: 0 12px; gap: 8px; }
  .sticky-bar .btn--ticket { padding: 0 10px; }
  .sticky-bar .btn--ticket .icon { display: none; }
}

/* ---------- 404 / offline ---------- */
.center-stage { min-height: 60dvh; display: grid; place-items: center; text-align: center; padding-block: var(--s-16); }
.center-stage .marquee__actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }