/* ==========================================================================
   uTooler — style.css
   Ortak tasarım sistemi. Tüm renk ve ölçüler aşağıdaki değişkenlerden gelir.
   ========================================================================== */

/* ---------- 1. Tasarım değişkenleri (açık tema) ---------- */
:root {
  color-scheme: light;

  /* Renkler */
  --bg: #f6f7f9;
  --bg-soft: #eef0f4;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --border: #e3e6eb;
  --border-strong: #cdd2da;
  --text: #0f1729;
  --text-soft: #3d4657;
  --muted: #5f6878;
  --primary: #2f5bea;
  --primary-hover: #2449c7;
  --primary-soft: #eaf0ff;
  --primary-text: #ffffff;
  --accent: #0ea5a4;
  --success: #16803c;
  --success-soft: #e7f6ec;
  --warning: #a35c00;
  --warning-soft: #fff4e0;
  --danger: #c4282e;
  --danger-soft: #fdecec;
  --focus: #2f5bea;

  /* Kategori renkleri (ikon arka planları) */
  --cat-calc: #2f5bea;
  --cat-convert: #0e8f8e;
  --cat-text: #7a4fe0;
  --cat-random: #d1580f;
  --cat-games: #c2306b;

  /* Gölgeler */
  --shadow-sm: 0 1px 2px rgba(15, 23, 41, .06);
  --shadow: 0 1px 2px rgba(15, 23, 41, .05), 0 4px 14px rgba(15, 23, 41, .06);
  --shadow-lg: 0 2px 6px rgba(15, 23, 41, .06), 0 16px 40px rgba(15, 23, 41, .10);

  /* Tipografi (sistem fontları) */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: .875rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: 1.5rem;
  --fs-xl: clamp(1.75rem, 1.3rem + 1.7vw, 2.375rem);
  --fs-hero: clamp(2.125rem, 1.45rem + 2.7vw, 3.5rem);
  --lh: 1.6;

  /* Boşluklar */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Köşe ve ölçüler */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --container: 1160px;
  --content: 760px;
  --sidebar: 300px;
  --header-h: 60px;
  --tap: 44px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .18s;
}

/* ---------- 2. Koyu tema ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c1018;
  --bg-soft: #121826;
  --surface: #141a26;
  --surface-2: #182030;
  --border: #252e40;
  --border-strong: #34405a;
  --text: #e8ecf4;
  --text-soft: #c3cad8;
  --muted: #98a2b5;
  --primary: #6f93ff;
  --primary-hover: #8eaaff;
  --primary-soft: #1b2645;
  --primary-text: #0c1018;
  --accent: #3fd0cf;
  --success: #4ccb7a;
  --success-soft: #12291c;
  --warning: #f0b14a;
  --warning-soft: #2e2412;
  --danger: #ff7a7f;
  --danger-soft: #331618;
  --focus: #8eaaff;
  --cat-calc: #6f93ff;
  --cat-convert: #3fc4c3;
  --cat-text: #a888ff;
  --cat-random: #ff9a55;
  --cat-games: #ff6fa6;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .28);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .4);
}

/* ---------- 3. Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 64px);
}
@media (min-width: 900px) { html { scroll-padding-top: calc(var(--header-h) + var(--sp-4)); } }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main { flex: 1; }

img, svg, video, canvas { display: block; max-width: 100%; }
svg { flex-shrink: 0; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 var(--sp-3); letter-spacing: -.015em; color: var(--text); }
h1 { font-size: var(--fs-xl); font-weight: 750; }
h2 { font-size: var(--fs-lg); font-weight: 700; }
h3 { font-size: var(--fs-md); font-weight: 650; }
p { margin: 0 0 var(--sp-4); }

a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primary-hover); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: var(--primary-soft); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-4); top: -100px;
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--primary);
  color: var(--primary-text);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: var(--sp-3); color: var(--primary-text); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
@media (min-width: 640px) { .container { padding-inline: var(--sp-5); } }

/* ---------- 4. Üst bölüm (header) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--sp-3);
  min-height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text);
  text-decoration: none;
  font-weight: 750;
  font-size: 1.25rem;
  letter-spacing: -.03em;
  height: var(--header-h);
  margin-right: auto;
}
.logo:hover { color: var(--text); }
.logo-mark {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
}
.logo-mark svg { width: 18px; height: 18px; }
.logo b { color: var(--primary); font-weight: 750; }

.header-actions { display: flex; align-items: center; gap: var(--sp-1); }

.icon-btn, .lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--tap);
  height: 40px;
  padding: 0 var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icon-btn { padding: 0; width: 40px; min-width: 40px; }
.icon-btn:hover, .lang-link:hover { background: var(--bg-soft); color: var(--text); }
.icon-btn svg, .lang-link svg { width: 20px; height: 20px; }
.lang-link { border-color: var(--border); }

/* Tema ikonu: açık temada ay, koyu temada güneş */
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }

/* Ana menü: mobilde kaydırılabilir şerit, geniş ekranda üst çubukta */
.main-nav { order: 3; flex: 1 0 100%; min-width: 0; margin-top: -6px; }
.main-nav ul {
  display: flex;
  gap: var(--sp-1);
  margin: 0;
  padding: 0 0 var(--sp-2);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.main-nav ul::-webkit-scrollbar { display: none; }
@media (max-width: 899px) {
  .main-nav ul {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    padding-right: 24px;
  }
}
.main-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  min-height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-pill);
  color: var(--text-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.main-nav a:hover { background: var(--bg-soft); color: var(--text); }
.main-nav a[aria-current="page"], .main-nav a.is-active { background: var(--primary-soft); color: var(--primary); }
.main-nav .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .9; }

@media (min-width: 900px) {
  .header-bar { flex-wrap: nowrap; column-gap: var(--sp-5); }
  .logo { margin-right: 0; }
  .main-nav { order: 0; flex: 0 1 auto; margin: 0 auto 0 0; }
  .main-nav ul { padding: 0; }
}

/* Kategori renk noktaları */
.c-calc { color: var(--cat-calc); }
.c-convert { color: var(--cat-convert); }
.c-text { color: var(--cat-text); }
.c-random { color: var(--cat-random); }
.c-games { color: var(--cat-games); }

/* ---------- 5. Düzen (içerik + reklam kenar çubuğu) ---------- */
.page { padding-block: var(--sp-5) var(--sp-7); }
@media (min-width: 640px) { .page { padding-block: var(--sp-6) var(--sp-8); } }

/* Araç sayfaları: <div class="layout"><div class="content">…</div><aside class="sidebar">…</aside></div> */
.layout { display: grid; gap: var(--sp-6); }
.layout > * { min-width: 0; }
.content { max-width: 100%; }
@media (min-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1fr) var(--sidebar); align-items: start; }
  .sidebar { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
}
.sidebar { display: grid; gap: var(--sp-5); align-content: start; }

/* Reklam alanları — içi boşken görünmez, yer kaplamaz.
   Reklam eklenince ilgili div'in içine kod konur. */
.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  overflow: hidden;
}
.ad-slot:empty { display: none; }
.ad-slot--leaderboard { width: 100%; min-height: 90px; margin-block: var(--sp-5); }
.ad-slot--rect { width: 300px; max-width: 100%; min-height: 250px; }
.ad-slot--sidebar { width: 300px; min-height: 600px; }
@media (max-width: 1099px) { .ad-slot--sidebar { display: none; } }

/* ---------- 6. Ana sayfa ---------- */
.hero {
  position: relative;
  padding-block: var(--sp-6) var(--sp-5);
  text-align: center;
}
@media (min-width: 640px) { .hero { padding-block: var(--sp-8) var(--sp-6); } }
.hero::before {
  content: "";
  position: absolute;
  inset: -40% 0 auto;
  height: 420px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 60% at 30% 40%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%),
    radial-gradient(35% 55% at 72% 45%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
}
.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 800;
  letter-spacing: -.035em;
  margin-bottom: var(--sp-3);
  text-wrap: balance;
}
.hero h1 .grad {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p {
  max-width: 560px;
  margin: 0 auto var(--sp-5);
  color: var(--muted);
  font-size: var(--fs-md);
  text-wrap: pretty;
}

.search {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
}
.search svg {
  position: absolute;
  left: 16px; top: 50%;
  width: 20px; height: 20px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.search input {
  width: 100%;
  height: 54px;
  padding: 0 56px 0 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-md);
  box-shadow: var(--shadow);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent), var(--shadow); }
.search input::-webkit-search-cancel-button { display: none; }
.search kbd {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
}
@media (hover: none) { .search kbd { display: none; } }

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 24px; height: 24px;
  padding: 0 6px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust svg { width: 16px; height: 16px; color: var(--success); }

/* Kategori bölümleri */
.categories { display: grid; gap: var(--sp-7); }
.category-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.category-head h2 { margin: 0; font-size: var(--fs-lg); }
.category-head .count {
  margin-left: auto;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.cat-icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: color-mix(in srgb, currentColor 13%, transparent);
}
.cat-icon svg { width: 22px; height: 22px; }

.tool-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Araç kartı: hazır olanlar <a class="tool-item">, yakında olanlar <div class="tool-item is-soon"> */
.tool-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
a.tool-item:hover {
  color: var(--text);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  box-shadow: var(--shadow-lg);
}
.tool-item .t-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, currentColor 11%, transparent);
}
.tool-item .t-icon svg { width: 21px; height: 21px; }
.tool-item .t-body { min-width: 0; }
.tool-item .t-name { display: block; margin-bottom: 2px; font-weight: 650; line-height: 1.35; }
.tool-item .t-desc { display: block; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
.tool-item.is-soon { background: var(--surface-2); box-shadow: none; }
.tool-item.is-soon .t-name { color: var(--text-soft); }

.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--new { background: var(--success-soft); color: var(--success); }
.tool-item .badge { position: absolute; top: var(--sp-3); right: var(--sp-3); }
.tool-item.is-soon .t-name { padding-right: 58px; }

/* Ana sayfa: en çok kullanılanlar (arama yapılırken gizlenir) */
.popular { margin-bottom: var(--sp-7); }
.c-popular { color: var(--primary); }
body:has(#tool-search:not(:placeholder-shown)) .popular { display: none; }

.empty-state {
  padding: var(--sp-7) var(--sp-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--muted);
}

/* Bilgi şeridi */
.feature-strip {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 155px), 1fr));
  margin-top: var(--sp-8);
}
.feature {
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.feature svg { width: 24px; height: 24px; margin-bottom: var(--sp-3); color: var(--primary); }
.feature h3 { margin-bottom: var(--sp-1); font-size: var(--fs-base); }
.feature p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

/* ---------- 7. Araç sayfası bileşenleri ---------- */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--border-strong); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); text-decoration: underline; }

.page-head { margin-bottom: var(--sp-5); }
.page-head h1 { margin-bottom: var(--sp-2); }
.page-head .lead { margin: 0; color: var(--muted); font-size: var(--fs-md); max-width: var(--content); }

/* Aracın kutusu */
.tool {
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
@media (min-width: 640px) { .tool { padding: var(--sp-6); } }

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--sp-5);
  padding: 4px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 0 auto;
  min-height: 38px;
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab:disabled { opacity: .45; cursor: not-allowed; }
.tab:disabled:hover { color: var(--muted); }
.tab[aria-selected="true"], .tab[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
/* .tabs--wrap: sekmeler kaydırmak yerine alt satıra geçer; hepsi her zaman görünür */
.tabs--wrap { flex-wrap: wrap; overflow: visible; }
.tabs--wrap .tab { flex: 1 1 auto; }

/* Form */
.form-grid { display: grid; gap: var(--sp-4); }
/* .xs-2: telefonda da iki sütun (kısa sayı alanları için); .xs-full o satırı tam genişlik yapar */
.form-grid.xs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 639px) { .form-grid.xs-2 > .xs-full { grid-column: 1 / -1; } }
@media (min-width: 640px) {
  .form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); }
.hint { color: var(--muted); font-size: var(--fs-xs); }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-base); /* iOS yakınlaştırmasın diye 16px */
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.textarea { min-height: 180px; padding: var(--sp-3) var(--sp-4); line-height: 1.55; resize: vertical; }
.select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%238a93a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}
.input[aria-invalid="true"] { border-color: var(--danger); }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .addon {
  display: grid;
  place-items: center;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-soft);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--primary); }
.check { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); cursor: pointer; }
.check input { width: 20px; height: 20px; }
input[type="range"] { width: 100%; height: 28px; }

/* Düğmeler */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .08s var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { background: var(--bg-soft); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); box-shadow: 0 1px 2px color-mix(in srgb, var(--primary) 40%, transparent); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-text); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-sm { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn-lg { min-height: 56px; padding: 0 var(--sp-6); font-size: var(--fs-md); }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

/* Sonuç kutusu */
.result {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--radius);
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}
.result[hidden] { display: none; }
.result-label { color: var(--text-soft); font-size: var(--fs-sm); font-weight: 600; }
.result-value {
  margin: var(--sp-1) 0;
  color: var(--text);
  font-size: clamp(1.875rem, 1.4rem + 2.1vw, 2.625rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.result-note { margin: 0; color: var(--text-soft); font-size: var(--fs-sm); }
.result--error { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.result--error .result-value { color: var(--danger); font-size: var(--fs-md); }
.result-value.is-up { color: var(--success); }
.result-value.is-down { color: var(--danger); }
.result .stats { margin-top: var(--sp-4); }
.result .stats:empty { display: none; }
.result .stat { background: var(--surface); }
.result .stat b { font-size: var(--fs-md); overflow-wrap: anywhere; }
.result-formula { margin: var(--sp-2) 0 0; color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.result-formula:empty { display: none; }
.tool-intro { margin: 0 0 var(--sp-4); color: var(--muted); font-size: var(--fs-sm); }

.stats { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.stat { padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.stat b { display: block; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: var(--fs-sm); }

/* Tablolar */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th, td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); text-align: left; }
th { background: var(--surface-2); color: var(--text-soft); font-weight: 650; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Kopyalandı bildirimi */
.toast {
  position: fixed;
  left: 50%; bottom: var(--sp-5);
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-pill);
  background: var(--text);
  color: var(--bg);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Dosya bırakma alanı ve dosya/sayfa ızgarası (görselden PDF'e ve sonraki dosya araçları) */
.dropzone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-soft);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
@media (min-width: 640px) { .dropzone { padding: var(--sp-7) var(--sp-5); } }
.dropzone:hover, .dropzone.is-dragover { border-color: var(--primary); background: var(--primary-soft); }
.dropzone:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dropzone-icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: var(--sp-1);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--cat-convert);
  box-shadow: var(--shadow-sm);
}
.dropzone-icon svg { width: 28px; height: 28px; }
.dropzone-title { margin: 0; color: var(--text); font-size: var(--fs-md); font-weight: 700; }
.dropzone-hint { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.dropzone .btn { margin-top: var(--sp-2); pointer-events: none; }
.dropzone--compact { grid-auto-flow: column; justify-content: center; align-items: center; padding: var(--sp-3) var(--sp-4); border-width: 1.5px; }
.dropzone--compact .dropzone-icon, .dropzone--compact .dropzone-hint, .dropzone--compact .btn { display: none; }
.dropzone--compact .dropzone-title { font-size: var(--fs-sm); color: var(--primary); }
.dropzone--compact::before { content: "+"; color: var(--primary); font-size: 1.4em; font-weight: 600; line-height: 1; }

.file-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: var(--sp-5) 0 var(--sp-3); }
.file-toolbar .count { margin-right: auto; color: var(--text-soft); font-size: var(--fs-sm); font-weight: 650; }

.file-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 136px), 1fr));
  margin: 0; padding: 0;
  list-style: none;
}
@media (max-width: 400px) { .file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.file-card {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.file-card[draggable="true"] { cursor: grab; }
.file-card.is-dragging { opacity: .4; }
.file-card.is-drop-before { box-shadow: -4px 0 0 -1px var(--primary); }
.file-card.is-drop-after { box-shadow: 4px 0 0 -1px var(--primary); }
.file-card.is-error { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: var(--danger-soft); }
.file-stage { display: grid; place-items: center; aspect-ratio: 3 / 4; padding: var(--sp-2); border-radius: var(--radius-sm); background: var(--bg-soft); overflow: hidden; }
.paper { position: relative; max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 41, .12), 0 3px 10px rgba(15, 23, 41, .10); transition: aspect-ratio var(--dur) var(--ease); }
.paper canvas, .paper img { position: absolute; display: block; max-width: none; }
.file-num {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 1;
  min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--text); color: var(--bg);
  font-size: var(--fs-xs); font-weight: 700; line-height: 24px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.file-name { overflow: hidden; color: var(--text-soft); font-size: var(--fs-xs); white-space: nowrap; text-overflow: ellipsis; }
.file-name small { display: block; color: var(--muted); font-size: inherit; }
.file-actions { display: flex; justify-content: space-between; gap: 2px; }
.file-actions button {
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted);
  cursor: pointer;
}
.file-actions button:hover { background: var(--bg-soft); color: var(--text); }
.file-actions button:disabled { opacity: .3; cursor: default; background: transparent; }
.file-actions button.is-danger:hover { background: var(--danger-soft); color: var(--danger); }
.file-actions svg { width: 18px; height: 18px; }

.progress { height: 8px; margin-top: var(--sp-3); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--primary) 15%, transparent); overflow: hidden; }
.progress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--primary); transition: width .2s var(--ease); }
.progress[hidden] { display: none; }
.file-settings { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.form-grid + .form-grid { margin-top: var(--sp-4); }
.result--error .result-note { flex: 1; }
.notice-row { display: flex; align-items: flex-start; gap: var(--sp-3); }

/* Görsel format çevirici: kare önizleme (saydamlık için dama zemin), çıktı satırı, aralık alanı başlığı */
.file-stage--square {
  aspect-ratio: 1;
  background-image: conic-gradient(color-mix(in srgb, var(--text) 8%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--text) 8%, transparent) 0 75%, transparent 0);
  background-size: 16px 16px;
}
.file-stage > canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 2px; }
.file-out { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; color: var(--text); font-size: var(--fs-xs); font-weight: 650; font-variant-numeric: tabular-nums; }
.file-out:empty { display: none; }
.file-out small { flex-basis: 100%; color: var(--muted); font-size: inherit; font-weight: 400; }
.delta { color: var(--muted); font-weight: 700; }
.delta.is-down { color: var(--success); }
.delta.is-up { color: var(--warning); }
.field-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.field-head output { color: var(--text); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.field-hint { margin: 0; color: var(--muted); font-size: var(--fs-xs); }
.color-row { display: flex; align-items: center; gap: var(--sp-3); }
.color-input { flex: 0 0 56px; width: 56px; height: 48px; padding: 5px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.color-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-input::-webkit-color-swatch { border: 1px solid var(--border); border-radius: 6px; }
.color-input::-moz-color-swatch { border: 1px solid var(--border); border-radius: 6px; }

/* QR kod oluşturucu: telefonda içerik → önizleme → tasarım; genişte önizleme sağda sabit */
.qr-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qr-types .tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 0 var(--sp-2); }
.qr-types .tab svg { width: 16px; height: 16px; }
.qr-grid { display: grid; gap: var(--sp-5); grid-template-areas: "content" "preview" "design"; }
.qr-content { grid-area: content; min-width: 0; }
.qr-preview { grid-area: preview; min-width: 0; }
.qr-design { grid-area: design; min-width: 0; padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.qr-design > .field-head { margin-bottom: var(--sp-4); }
.qr-design h2 { margin: 0; font-size: var(--fs-md); }
.qr-content [role="tabpanel"] .form-grid { gap: var(--sp-3) var(--sp-4); }
@media (min-width: 720px) {
  .qr-grid { grid-template-columns: minmax(0, 1fr) minmax(240px, 290px); grid-template-areas: "content preview" "design preview"; column-gap: var(--sp-6); }
  .qr-preview { align-self: start; position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}
.qr-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 340px;
  margin-inline: auto;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.qr-stage.is-transparent {
  background-image: conic-gradient(color-mix(in srgb, var(--text) 8%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--text) 8%, transparent) 0 75%, transparent 0);
  background-size: 16px 16px;
}
.qr-out { width: 100%; }
.qr-out svg { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: var(--shadow-sm); transition: opacity var(--dur) var(--ease); }
.qr-stage.is-empty .qr-out svg { opacity: .1; box-shadow: none; }
.qr-msg {
  position: absolute;
  top: 50%;
  left: var(--sp-4);
  right: var(--sp-4);
  transform: translateY(-50%);
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
}
.qr-stage.is-error .qr-msg { background: var(--danger-soft); color: var(--danger); }
.qr-meta { min-height: 1.5em; margin: var(--sp-2) 0 0; color: var(--muted); font-size: var(--fs-xs); text-align: center; font-variant-numeric: tabular-nums; }
.qr-warn { margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); font-size: var(--fs-xs); font-weight: 600; }
.qr-preview .btn-row { margin-top: var(--sp-4); gap: var(--sp-2); }
.qr-preview .btn-row .btn { flex: 1 1 auto; }
.qr-preview .field { margin-top: var(--sp-4); }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.logo-row input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.logo-row input[type="file"]:focus-visible + .btn { outline: 3px solid var(--focus); outline-offset: 2px; }
.logo-row .file-label { overflow: hidden; max-width: 100%; color: var(--text-soft); font-size: var(--fs-sm); white-space: nowrap; text-overflow: ellipsis; }
.qr-design .color-row { flex-wrap: wrap; }
.color-row .check { min-height: 0; font-size: var(--fs-sm); }
.sidebar .table-wrap + .field-hint { margin-top: var(--sp-2); }

/* Hesap makinesi: ekran → (bilimsel tuşlar) + temel tuşlar → geçmiş.
   Basit modda genişte geçmiş sağda; bilimsel modda genişte iki tuş bloğu yan yana. */
.calc-modes { width: 100%; max-width: 320px; margin-bottom: var(--sp-4); }
.calc-display {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.calc-display:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.calc-meta { display: flex; align-items: center; gap: var(--sp-3); min-height: 32px; }
.calc-prev { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; text-overflow: ellipsis; direction: rtl; unicode-bidi: plaintext; }
.calc-angle { display: inline-flex; flex: 0 0 auto; padding: 3px; border-radius: var(--radius-pill); background: var(--bg-soft); }
.calc-angle button { min-height: 28px; padding: 0 var(--sp-3); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; cursor: pointer; }
.calc-angle button[aria-checked="true"] { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.calc[data-mode="basic"] .calc-angle { display: none; }
.calc-input {
  display: block;
  width: 100%;
  min-height: 1.35em;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  caret-color: var(--primary);
  font: inherit;
  font-size: clamp(2.125rem, 1.6rem + 2.2vw, 2.875rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.calc-input::placeholder { color: var(--muted); opacity: .6; }
.calc-input[data-size="m"] { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem); }
.calc-input[data-size="s"] { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.5rem); }
.calc.is-result .calc-input { font-weight: 800; }
.calc-input[aria-invalid="true"] { color: var(--danger); }
.calc-out { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); min-height: 36px; }
.calc-preview { min-width: 0; color: var(--muted); font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: right; }
.calc-preview.is-error { color: var(--danger); font-size: var(--fs-sm); }
.calc-copy { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; }
.calc-copy:hover { background: var(--bg-soft); color: var(--text); }
.calc-copy.is-idle { visibility: hidden; }
.kbd-table td:first-child { white-space: nowrap; }
.calc-copy svg { width: 18px; height: 18px; vertical-align: middle; }
.calc-body { display: grid; gap: var(--sp-5); }
.calc-pad { display: grid; gap: var(--sp-2); }
.calc-sci, .calc-basic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.calc[data-mode="basic"] .calc-sci { display: none; }
.ck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 58px;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font: inherit;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur) var(--ease), transform .08s var(--ease);
}
.ck:hover { background: var(--bg-soft); }
.ck:active, .ck.is-pressed { transform: scale(.96); background: var(--border); }
.ck svg { width: 24px; height: 24px; }
.ck sup { font-size: .62em; line-height: 0; }
.ck--op { border-color: transparent; background: var(--primary-soft); color: var(--primary); font-size: 1.625rem; }
.ck--op:hover { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
.ck--op:active, .ck--op.is-pressed { background: color-mix(in srgb, var(--primary) 26%, var(--surface)); }
.ck--eq { border-color: var(--primary); background: var(--primary); color: var(--primary-text); font-size: 1.625rem; }
.ck--eq:hover { background: var(--primary-hover); }
.ck--eq:active, .ck--eq.is-pressed { background: var(--primary-hover); }
.ck--util { border-color: transparent; background: color-mix(in srgb, var(--text) 6%, var(--surface)); box-shadow: none; color: var(--text-soft); font-size: 1.25rem; }
.ck--util:hover { background: color-mix(in srgb, var(--text) 11%, var(--surface)); color: var(--text); }
.ck--ac { color: var(--danger); font-size: var(--fs-md); font-weight: 700; }
.ck--ac:hover { color: var(--danger); }
.ck--fn { min-height: 46px; border-color: transparent; background: color-mix(in srgb, var(--text) 6%, var(--surface)); box-shadow: none; color: var(--text-soft); font-size: var(--fs-sm); }
.ck--fn:hover { background: color-mix(in srgb, var(--text) 11%, var(--surface)); color: var(--text); }
.ck--fn[aria-pressed="true"] { background: var(--primary); color: var(--primary-text); }
.ck .k2, .calc.is-2nd .ck .k1 { display: none; }
.calc.is-2nd .ck .k2 { display: inline; }
.calc.is-2nd .ck[data-k2] { color: var(--primary); }
@media (min-width: 640px) {
  .calc[data-mode="sci"] .calc-pad { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .calc[data-mode="sci"] .ck--fn { min-height: 58px; }
}
@media (min-width: 720px) {
  .calc[data-mode="basic"] .calc-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  /* Geçmiş, tuş takımının yüksekliğini aşmaz; içeride kayar */
  .calc[data-mode="basic"] .calc-history { contain: size; }
}
.calc-history { display: flex; flex-direction: column; min-height: 0; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.calc-history-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 36px; padding-inline: var(--sp-2); }
.calc-history-head h2 { margin: 0; color: var(--text-soft); font-size: var(--fs-sm); font-weight: 700; }
.calc-hist { flex: 1 1 auto; min-height: 0; max-height: 264px; margin: 0; padding: 0; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.calc[data-mode="basic"] .calc-hist { max-height: none; }
@media (max-width: 719px) { .calc[data-mode="basic"] .calc-hist { max-height: 264px; } }
.calc-hist-item { display: grid; gap: 2px; width: 100%; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; font-variant-numeric: tabular-nums; text-align: right; cursor: pointer; }
.calc-hist-item:hover { background: var(--bg-soft); }
.calc-hist-expr { color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.calc-hist-res { font-size: var(--fs-md); font-weight: 700; overflow-wrap: anywhere; }
.calc-hist li + li { border-top: 1px solid var(--border); }
.calc-hist-empty { margin: 0; padding: var(--sp-2); color: var(--muted); font-size: var(--fs-sm); }

/* Birim çevirici */
.tabs.uc-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
@media (min-width: 720px) { .tabs.uc-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.uc-cats .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 54px; padding: 6px 2px; font-size: var(--fs-xs); line-height: 1.2; text-align: center; white-space: normal; }
.uc-cats .tab svg { width: 20px; height: 20px; opacity: .8; }
@media (min-width: 640px) { .uc-cats .tab { min-height: 64px; gap: 5px; } .uc-cats .tab svg { width: 22px; height: 22px; } }
.uc-cats .tab[aria-checked="true"] svg { color: var(--cat-convert); opacity: 1; }
.uc-pair { display: grid; align-items: center; }
.uc-box { display: grid; min-width: 0; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.uc-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.uc-box > label { padding: var(--sp-3) var(--sp-4) 0; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.uc-num { width: 100%; min-width: 0; min-height: 52px; padding: 0 var(--sp-4) var(--sp-2); border: 0; background: transparent; color: var(--text); font: inherit; font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem); font-weight: 750; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.uc-num:focus, .uc-num:focus-visible { outline: none; }
.uc-num[aria-invalid="true"] { color: var(--danger); }
.uc-box .select { min-height: 50px; border: 0; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); background-color: var(--surface-2); color: var(--text); font-weight: 600; }
.uc-box .select:focus { box-shadow: none; border-color: var(--border); }
.uc-box .select:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 0 0 var(--radius) var(--radius); }
.uc-swap { position: relative; z-index: 1; justify-self: center; display: grid; place-items: center; width: 46px; height: 46px; margin-block: -11px; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--primary); box-shadow: var(--shadow); cursor: pointer; transition: transform .3s var(--ease), background var(--dur) var(--ease); }
.uc-swap:hover { background: var(--primary-soft); }
.uc-swap.is-flipped { transform: rotate(180deg); }
.uc-swap svg { width: 20px; height: 20px; transform: rotate(90deg); }
@media (min-width: 640px) {
  .uc-pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--sp-3); }
  .uc-swap { margin: 22px 0 0; }
  .uc-swap svg { transform: none; }
}
.result-value.uc-eq { font-size: clamp(1.375rem, 1.1rem + 1.3vw, 1.875rem); }
.result--error .result-value.uc-eq { font-size: var(--fs-md); }
.uc-copy { margin-top: var(--sp-4); }
.uc-all { margin-top: var(--sp-6); }
.uc-all h2 { margin-bottom: var(--sp-3); font-size: var(--fs-md); overflow-wrap: anywhere; }
.uc-all tbody th { padding: 0; background: transparent; font-weight: 400; }
.uc-all td { overflow-wrap: anywhere; }
.uc-pick { display: block; width: 100%; min-height: 46px; padding: var(--sp-2) var(--sp-4); border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.uc-pick small { margin-left: 6px; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.uc-pick:hover { color: var(--primary); }
.uc-all tr.is-current th, .uc-all tr.is-current td { background: var(--primary-soft); }
.uc-all tr.is-current .uc-pick { color: var(--primary); }
.uc-pop td { padding: 0; }
.uc-pop a { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); color: var(--text-soft); text-decoration: none; font-variant-numeric: tabular-nums; }
.uc-pop a:hover { background: var(--bg-soft); color: var(--primary); }
.uc-pop a b { color: var(--text); font-weight: 650; white-space: nowrap; }

/* Karar çarkı: genişte çark solda, liste sağda; dar ekranda çark → sonuç → liste.
   Çark tuvali dönerken yalnızca transform değişir; ibre ve göbek sabit kalır. */
.wh { container-type: inline-size; }
.wh-grid { display: grid; gap: var(--sp-5); }
@container (min-width: 620px) {
  .wh-grid { grid-template-columns: minmax(0, 1fr) minmax(230px, 270px); align-items: start; gap: var(--sp-5); }
}
.wh-main { display: grid; gap: var(--sp-4); justify-items: center; min-width: 0; }
.wh-stage {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-lg);
}
.wh-stage::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35), inset 0 0 18px rgba(0, 0, 0, .12);
  pointer-events: none;
}
.wh-canvas { display: block; width: 100%; height: 100%; border-radius: 50%; cursor: pointer; will-change: transform; touch-action: manipulation; }
.wh.is-spinning .wh-canvas, .wh.is-empty .wh-canvas { cursor: default; }
.wh-fx { position: absolute; left: -15%; top: -15%; width: 130%; height: 130%; z-index: 3; pointer-events: none; }
.wh-pointer {
  position: absolute;
  top: -8px; left: 50%;
  z-index: 2;
  width: 40px; height: 48px;
  margin-left: -20px;
  transform-origin: 50% 16px;
  filter: drop-shadow(0 3px 4px rgba(15, 23, 41, .3));
  pointer-events: none;
}
.wh-pointer svg { display: block; width: 100%; height: 100%; }
.wh-pointer .p-fill { fill: var(--text); }
.wh-pointer .p-ring { fill: var(--surface); }
.wh-hub {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 24%; height: 24%;
  min-width: 64px; min-height: 64px;
  border: 4px solid var(--surface);
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font: inherit;
  font-size: clamp(.8125rem, 2.4cqi, 1.0625rem);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px var(--border), 0 6px 18px rgba(15, 23, 41, .28);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.wh-hub:hover { transform: translate(-50%, -50%) scale(1.05); }
.wh-hub:active { transform: translate(-50%, -50%) scale(.97); }
.wh-hub:disabled { cursor: default; transform: translate(-50%, -50%); }
.wh.is-empty .wh-hub { opacity: .4; }
.wh.is-spinning .wh-hub { opacity: .92; }
.wh-spin { width: 100%; max-width: 360px; }
.wh-hint { margin: calc(var(--sp-2) * -1) 0 0; color: var(--muted); font-size: var(--fs-xs); text-align: center; }
@media (hover: none) { .wh-kbd { display: none; } }

.wh-result { width: 100%; margin-top: 0; text-align: center; border-color: color-mix(in srgb, var(--wh-c, var(--primary)) 35%, transparent); background: color-mix(in srgb, var(--wh-c, var(--primary)) 10%, var(--surface)); }
.wh-result.is-in { animation: wh-pop .42s var(--ease); }
@keyframes wh-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
.wh-winner { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); max-width: 100%; }
.wh-swatch { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface); }
.wh-result .btn-row { justify-content: center; margin-top: var(--sp-4); }
.wh-result .btn-row .btn { flex: 1 1 160px; max-width: 220px; }

.wh-side { display: grid; gap: var(--sp-3); min-width: 0; }
.wh-list { min-height: 240px; max-height: 480px; font-size: var(--fs-base); }
@container (min-width: 620px) { .wh-list { min-height: 300px; } }
.wh-list[readonly] { color: var(--muted); }
.field-head output.is-warn { color: var(--warning); }
.wh-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.wh-actions .btn { padding: 0 var(--sp-2); }
.wh-presets { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.wh-presets .label { width: 100%; }
.wh-chip { min-height: 36px; padding: 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-soft); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.wh-chip:hover { border-color: var(--primary); color: var(--primary); }
.wh-chip:disabled { opacity: .5; cursor: not-allowed; }
.wh-opts { display: grid; gap: 0; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.wh-opts .check { font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); }
.wh-opts .check + .check { border-top: 1px solid var(--border); }
.wh-history { margin-top: var(--sp-2); }
.wh-history h2 { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); }
.wh-hist { display: grid; gap: 2px; max-height: 220px; margin: var(--sp-2) 0 0; padding: 0; overflow: auto; list-style: none; counter-reset: wh; }
.wh-hist li { display: flex; align-items: center; gap: var(--sp-2); min-height: 34px; padding: 0 var(--sp-3); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.wh-hist li:first-child { background: var(--bg-soft); font-weight: 650; }
.wh-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; }
.wh-history.is-empty .wh-hist::before { content: attr(data-empty); display: block; padding: var(--sp-2) 0; color: var(--muted); font-size: var(--fs-sm); }
.wh-presets-list a { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); color: var(--text-soft); text-decoration: none; }
.wh-presets-list td { padding: 0; }
.wh-presets-list a:hover { background: var(--bg-soft); color: var(--primary); }
.wh-presets-list a b { color: var(--text); font-weight: 650; }
.wh-presets-list a small { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }

/* Kronometre ve geri sayım: sekmeler → kadran (halka + rakamlar) → düğmeler → turlar / süre ayarı.
   Rakamlar kadran genişliğine göre (cqi) büyür; tam ekranda kadran ekranı doldurur. */
.sw { container-type: inline-size; }
.sw-tabs .tab { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); flex: 1 1 0; min-height: 44px; font-size: var(--fs-base); }
.sw-tabs .tab svg { width: 18px; height: 18px; }
.sw-tabs .tab { min-width: 0; padding: 0 var(--sp-2); }
@container (max-width: 400px) { .sw-tabs .tab svg { display: none; } }
.sw-tabs .tab.is-live::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: sw-blink 1.4s ease-in-out infinite; }
.sw-panel { display: grid; gap: var(--sp-5); justify-items: center; }
.sw-dial { --sw-c: var(--primary); position: relative; width: 100%; max-width: 340px; aspect-ratio: 1; container-type: inline-size; }
.sw-dial--timer { --sw-c: var(--accent); }
.sw-dial.is-warn { --sw-c: var(--warning); }
.sw-dial.is-done { --sw-c: var(--danger); }
.sw-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.sw-ring circle { fill: none; }
.sw-track { stroke: var(--bg-soft); stroke-width: 9; }
.sw-ticks { stroke: var(--border-strong); stroke-width: 5; }
.sw-ticks--major { stroke: var(--muted); stroke-width: 7; }
.sw-prog { stroke: var(--sw-c); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke .3s var(--ease); }
.sw-dial.is-ringing .sw-prog { animation: sw-pulse .7s ease-in-out infinite alternate; }
.sw-face { position: absolute; inset: 14%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sw-time { display: flex; align-items: baseline; color: var(--text); font-size: 19cqi; font-weight: 750; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sw-time.is-long { font-size: 14.5cqi; }
.sw-frac { margin-left: .03em; color: var(--muted); font-size: .5em; font-weight: 650; }
.sw-dial.is-paused .sw-time { animation: sw-blink 1.6s ease-in-out infinite; }
.sw-dial.is-done .sw-time { color: var(--danger); }
.sw-sub { min-height: 1.6em; margin-top: 3.5cqi; color: var(--muted); font-size: clamp(var(--fs-sm), 4.6cqi, 2rem); font-weight: 600; font-variant-numeric: tabular-nums; white-space: pre; }
.sw-dial.is-done .sw-sub { color: var(--danger); font-weight: 750; }
.sw-ctrl { display: flex; gap: var(--sp-3); width: 100%; max-width: 440px; }
.sw-ctrl .btn { flex: 1 1 0; padding: 0 var(--sp-3); }
@container (max-width: 400px) { .sw-ctrl .btn svg { display: none; } }
.sw-ctrl .btn-primary.is-running { background: var(--text); border-color: var(--text); color: var(--bg); box-shadow: none; }
.sw-laps { width: 100%; max-width: 520px; }
.sw-laps h2 { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); }
.sw-laps .table-wrap { max-height: 340px; margin-top: var(--sp-2); overflow: auto; }
.sw-laps th { position: sticky; top: 0; z-index: 1; }
.sw-laps td { font-variant-numeric: tabular-nums; }
.sw-laps tr.is-live td { color: var(--muted); }
.sw-laps tr.is-best td:nth-child(2) { color: var(--success); font-weight: 700; }
.sw-laps tr.is-worst td:nth-child(2) { color: var(--danger); font-weight: 700; }
.sw-tag { margin-right: var(--sp-2); padding: 1px 7px; border-radius: var(--radius-pill); background: color-mix(in srgb, currentColor 14%, transparent); font-size: .75rem; font-weight: 700; vertical-align: 1px; }
.sw-set { display: grid; gap: var(--sp-4); justify-items: center; width: 100%; max-width: 440px; }
.sw-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); width: 100%; }
.sw-fields .field { text-align: center; }
.sw-fields .input { min-height: 56px; padding: 0 var(--sp-2); text-align: center; font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.sw-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.sw-done { width: 100%; max-width: 440px; animation: wh-pop .42s var(--ease); }
.sw-done .btn { width: 100%; background: var(--danger); border-color: var(--danger); color: var(--surface); }
.sw-done .btn:hover { background: color-mix(in srgb, var(--danger) 85%, var(--text)); color: var(--surface); }
.sw-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.sw-foot .check { font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); }
@keyframes sw-blink { 50% { opacity: .35; } }
@keyframes sw-pulse { from { opacity: 1; } to { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .sw-dial.is-paused .sw-time, .sw-dial.is-ringing .sw-prog, .sw-tabs .tab.is-live::after { animation: none; }
}
/* Tam ekran: kutu ekranı kaplar, kadran büyür */
.sw:fullscreen { display: flex; flex-direction: column; justify-content: center; overflow: auto; padding: var(--sp-5) max(var(--sp-4), 4vw); border: 0; border-radius: 0; box-shadow: none; background: var(--bg); }
.sw:fullscreen .sw-tabs { width: 100%; max-width: 440px; margin-inline: auto; }
.sw:fullscreen .sw-dial { max-width: min(64vh, 92vw); }
.sw:fullscreen .sw-ctrl { max-width: 560px; }
.sw:fullscreen .sw-foot { width: 100%; max-width: 560px; margin-inline: auto; }

/* ---------- Not ortalaması (GPA) ---------- */
/* Satırlar: ad + not + kredi + sil tek satırda; tür sütunlu (EN) satır telefonda iki satıra iner */
.gpa-cols, .gpa-row { display: grid; gap: var(--sp-2); grid-template-columns: minmax(0, 1fr) 88px 72px 36px; grid-template-areas: "n g c d"; }
.gpa-cols { margin-bottom: var(--sp-2); padding-inline: calc(var(--sp-1) + 5px) var(--sp-1); color: var(--muted); font-size: var(--fs-xs); font-weight: 650; }
.gpa-cols > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gpa-rows { display: grid; gap: var(--sp-2); }
.gpa-row {
  padding: var(--sp-1) var(--sp-1) var(--sp-1) calc(var(--sp-1) + 1px);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  transition: border-color var(--dur) var(--ease);
}
.gpa-row[data-tone="good"] { border-left-color: var(--success); }
.gpa-row[data-tone="ok"] { border-left-color: var(--primary); }
.gpa-row[data-tone="low"] { border-left-color: var(--warning); }
.gpa-row[data-tone="fail"] { border-left-color: var(--danger); }
.gpa-name { grid-area: n; }
.gpa-grade { grid-area: g; font-variant-numeric: tabular-nums; }
.gpa-cred { grid-area: c; font-variant-numeric: tabular-nums; }
.gpa-type { grid-area: t; }
.gpa-row .input, .gpa-row .select { min-height: 44px; padding-inline: var(--sp-3); }
.gpa-row .select { padding-right: 30px; background-position: right 7px center; font-weight: 600; }
.gpa-del {
  grid-area: d;
  display: grid;
  place-items: center;
  width: 36px; height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.gpa-del:hover { background: var(--danger-soft); color: var(--danger); }
@media (max-width: 639px) {
  .gpa-cols.is-typed { display: none; }
  .gpa-row--typed { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.2fr) 36px; grid-template-areas: "n n n d" "g c t t"; padding: var(--sp-2); }
}
@media (min-width: 640px) {
  .gpa-cols, .gpa-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, .8fr) 44px; }
  .gpa-cols.is-typed, .gpa-row--typed { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1fr) 44px; grid-template-areas: "n g c t d"; }
  .gpa-del { width: 44px; }
}
.gpa-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); }
.gpa-bar .select { width: auto; min-height: 40px; font-size: var(--fs-sm); }
.gpa-bar label { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-soft); font-size: var(--fs-sm); font-weight: 600; }
.gpa-prev, .pw-bulk { margin-top: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); }
.gpa-prev summary, .pw-bulk summary { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-4); color: var(--text-soft); font-size: var(--fs-sm); font-weight: 650; cursor: pointer; list-style: none; }
.gpa-prev summary::-webkit-details-marker, .pw-bulk summary::-webkit-details-marker { display: none; }
.gpa-prev summary::before, .pw-bulk summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-soft); color: var(--primary); font-weight: 800; }
.gpa-prev[open] summary::before, .pw-bulk[open] summary::before { content: "−"; }
.gpa-prev summary small, .pw-bulk summary small { margin-left: auto; color: var(--muted); font-weight: 500; }
.gpa-prev > div, .pw-bulk > div { padding: 0 var(--sp-4) var(--sp-4); }
.result-value small { color: var(--muted); font-size: .5em; font-weight: 700; letter-spacing: 0; }
.gpa-badge { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: var(--sp-2); padding: 0; vertical-align: -5px; letter-spacing: 0; }
.gpa-badge--good { background: var(--success-soft); color: var(--success); }
.gpa-badge--ok { background: var(--surface); color: var(--primary); }
.gpa-badge--warn { background: var(--warning-soft); color: var(--warning); }
/* Ölçek çubuğu: --p dolu kısım (0–100), işaretler --at konumunda */
.gpa-meter { position: relative; margin: var(--sp-4) 0 var(--sp-5); }
.gpa-meter[hidden] { display: none; }
.gpa-track { height: 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--primary) 14%, var(--surface)); overflow: hidden; }
.gpa-track > span { display: block; width: calc(var(--p, 0) * 1%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .35s var(--ease); }
.gpa-ticks span { position: absolute; top: 14px; left: calc(var(--at) * 1%); transform: translateX(-50%); color: var(--muted); font-size: .75rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.gpa-ticks span::before { content: ""; position: absolute; top: -16px; left: 50%; width: 2px; height: 14px; margin-left: -1px; background: var(--surface); }
.gpa-ticks span.is-on { color: var(--text-soft); }
.gpa-table { margin-top: var(--sp-4); background: var(--surface); }
.gpa-table[hidden] { display: none; }
.gpa-table td { padding-block: var(--sp-2); font-variant-numeric: tabular-nums; }
.gpa-table tr.is-hit td { background: var(--success-soft); color: var(--success); font-weight: 700; }
.result .gpa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .result .gpa-stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } }
@media (max-width: 479px) { .gpa-prev summary small { display: none; } }
#gpa-clear.is-undo { color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .gpa-track > span { transition: none; } }

/* ---------- Şifre oluşturucu ---------- */
/* Şifre kutusu + Yenile/Kopyala → güç çubuğu → ayarlar (sekmeye göre) → toplu üretim.
   Rakamlar mavi (.d), simgeler turuncu (.s) görünür; kopyalanan metin düzdür. */
.pw { container-type: inline-size; }
.pw .tabs { margin-bottom: var(--sp-4); }
.pw > .tabs .tab { flex: 1 1 auto; padding: 0 var(--sp-2); }
.pw-out { display: grid; gap: var(--sp-3); }
@container (min-width: 560px) {
  .pw-out { grid-template-columns: minmax(0, 1fr) 150px; }
  .pw-actions { flex-direction: column; }
}
.pw-display {
  display: flex;
  align-items: center;
  min-height: 92px;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: clamp(1.375rem, 1.05rem + 1.5vw, 1.875rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .02em;
  word-break: break-all;
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}
.pw-display[data-len="l"] { font-size: clamp(1.125rem, .95rem + .9vw, 1.5rem); }
.pw-display[data-len="xl"] { font-size: clamp(1rem, .9rem + .45vw, 1.1875rem); }
.pw[data-mode="words"] .pw-display { word-break: normal; }
.pw-display .d { color: var(--primary); }
.pw[data-mode="pin"] .pw-display { letter-spacing: .2em; }
.pw[data-mode="pin"] .pw-display .d { color: inherit; }
.pw-display .s { color: var(--cat-random); }
.pw-actions { display: flex; gap: var(--sp-3); }
.pw-actions .btn { flex: 1 1 0; padding: 0 var(--sp-4); }
.pw-copy.is-done, .pw-copy.is-done:hover { background: var(--success); border-color: var(--success); color: var(--primary-text); }
.pw-new.is-spin svg { animation: pw-spin .45s var(--ease); }
@keyframes pw-spin { to { transform: rotate(360deg); } }

.pw-meter { --c: var(--success); margin: var(--sp-4) 0 var(--sp-5); }
.pw-meter[data-level="0"] { --c: var(--danger); }
.pw-meter[data-level="1"] { --c: color-mix(in srgb, var(--danger) 55%, var(--warning)); }
.pw-meter[data-level="2"] { --c: var(--warning); }
.pw-meter[data-level="3"] { --c: color-mix(in srgb, var(--success) 80%, var(--accent)); }
.pw-meter[data-level="pin"] { --c: var(--text); }
.pw-meter[data-level="pin"] .pw-bars { display: none; }
.pw-bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.pw-bars i { height: 6px; border-radius: 3px; background: var(--bg-soft); transition: background var(--dur) var(--ease); }
.pw-meter[data-level="0"] .pw-bars i:nth-child(-n+1),
.pw-meter[data-level="1"] .pw-bars i:nth-child(-n+2),
.pw-meter[data-level="2"] .pw-bars i:nth-child(-n+3),
.pw-meter[data-level="3"] .pw-bars i:nth-child(-n+4),
.pw-meter[data-level="4"] .pw-bars i { background: var(--c); }
.pw-meter-text { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--sp-3); margin-top: var(--sp-2); font-size: var(--fs-sm); }
.pw-meter-text b { color: var(--c); }
.pw-meter-text span { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.pw-meter-text p { flex-basis: 100%; margin: 0; color: var(--text-soft); }

.pw-settings { display: grid; gap: var(--sp-4); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.pw-settings > [role="tabpanel"] { display: grid; gap: var(--sp-4); }
.pw-settings > [hidden] { display: none; }
.pw-range { display: flex; align-items: center; gap: var(--sp-3); }
.pw-step { flex: none; width: var(--tap); min-height: var(--tap); padding: 0; font-size: 1.25rem; line-height: 1; }
.pw-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.pw-types legend { margin-bottom: 6px; padding: 0; }
@container (min-width: 560px) { .pw-types { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pw-opt {
  position: relative;
  display: grid;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pw-opt:hover { border-color: var(--muted); }
.pw-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pw-opt::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.pw-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.pw-opt:has(input:checked)::after { content: "✓"; border-color: var(--primary); background: var(--primary); }
.pw-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.pw-opt-sample { color: var(--text); font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 700; }
.pw-opt-name { color: var(--text-soft); font-size: var(--fs-xs); font-weight: 600; }
.pw-checks { display: grid; }
.pw-checks .check { font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); }
.pw-checks .check .muted { font-weight: 400; }

.pw-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.pw-bulk-bar .select { width: auto; min-width: 96px; }
.pw-list { max-height: 340px; margin: var(--sp-4) 0 0; padding: 0; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); list-style: none; counter-reset: pw; }
.pw-list li { display: flex; align-items: center; gap: var(--sp-3); padding: 2px 2px 2px var(--sp-3); border-bottom: 1px solid var(--border); counter-increment: pw; }
.pw-list li:last-child { border-bottom: 0; }
.pw-list li::before { content: counter(pw); min-width: 2.2ch; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.pw-list code { flex: 1; min-width: 0; color: var(--text); font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.pw-bulk .btn-row { margin-top: var(--sp-3); }
.pw-private { display: flex; align-items: flex-start; gap: var(--sp-2); margin: var(--sp-4) 0 0; color: var(--muted); font-size: var(--fs-xs); }
.pw-private svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--success); }
@media (prefers-reduced-motion: reduce) { .pw-new.is-spin svg { animation: none; } }

/* ---------- Saat hesaplama ---------- */
/* Saat alanı: metin + (EN 12 saat) AM/PM + Şimdi düğmesi. Sonuçta 24 saatlik çizelge (gece yarısını
   geçen vardiya iki parça). Süre satırları: işaret (+/−) + saat + dakika (+ saniye) + sil. */
.tc { container-type: inline-size; }
.tc-pair { display: grid; gap: var(--sp-4); }
@container (min-width: 560px) { .tc-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tc-time { display: flex; gap: var(--sp-2); }
.tc-time .input { flex: 1 1 auto; min-width: 0; font-size: var(--fs-md); font-weight: 650; font-variant-numeric: tabular-nums; }
.tc-ampm, .tc-now {
  flex: none;
  min-height: 48px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}
.tc-ampm { width: 54px; padding: 0; color: var(--primary); }
.tc-ampm:hover, .tc-now:hover { border-color: var(--primary); color: var(--primary); }
.tc[data-clock="24"] .tc-ampm { display: none; }
.tc-brk { max-width: 260px; margin-top: var(--sp-4); }
.tc-brk .input { font-variant-numeric: tabular-nums; }
.tc .tabs.tc-op { display: inline-flex; width: auto; margin-bottom: 0; }
.tc-op .tab { min-width: 92px; min-height: 40px; font-size: var(--fs-base); }
.tc-addrow { display: grid; gap: var(--sp-4); }
@container (min-width: 560px) { .tc-addrow { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.tc-dur { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
@container (min-width: 560px) { .tc-dur { max-width: 50%; padding-right: var(--sp-2); } }
.tc-dur .input { font-variant-numeric: tabular-nums; }
.tc .sw-chips { justify-content: flex-start; margin-top: var(--sp-3); }

/* 24 saatlik çizelge */
.tc-line { margin: var(--sp-4) 0 var(--sp-1); }
.tc-track { position: relative; height: 12px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--primary) 14%, var(--surface)); overflow: hidden; }
.tc-seg { position: absolute; top: 0; bottom: 0; left: calc(var(--a, 0) * 1%); width: calc(var(--w, 0) * 1%); border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--primary), var(--accent)); transition: left .3s var(--ease), width .3s var(--ease); }
.tc-scale { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-size: .75rem; font-weight: 650; font-variant-numeric: tabular-nums; }

/* Süre satırları */
.tc-cols, .tc-row { display: grid; gap: var(--sp-2); grid-template-columns: 44px repeat(2, minmax(0, 1fr)) 36px; align-items: center; }
.tc-sum.has-sec .tc-cols, .tc-sum.has-sec .tc-row { grid-template-columns: 44px repeat(3, minmax(0, 1fr)) 36px; }
.tc-sum:not(.has-sec) .tc-s { display: none; }
.tc-cols { margin-bottom: var(--sp-2); padding-inline: var(--sp-1); color: var(--muted); font-size: var(--fs-xs); font-weight: 650; }
.tc-cols > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-rows { display: grid; gap: var(--sp-2); }
.tc-row { padding: var(--sp-1); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.tc-row .input { min-height: 44px; padding-inline: var(--sp-3); font-variant-numeric: tabular-nums; }
.tc-sign {
  width: 44px; height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--success);
  font: inherit;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.tc-row[data-sign="-"] .tc-sign { border-color: transparent; background: var(--danger-soft); color: var(--danger); }
.tc-row[data-sign="-"] { border-color: color-mix(in srgb, var(--danger) 25%, var(--border)); }
.tc-del { display: grid; place-items: center; width: 36px; height: 44px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; }
.tc-del:hover { background: var(--danger-soft); color: var(--danger); }
@media (min-width: 640px) {
  .tc-cols, .tc-row { grid-template-columns: 48px repeat(2, minmax(0, 1fr)) 44px; }
  .tc-sum.has-sec .tc-cols, .tc-sum.has-sec .tc-row { grid-template-columns: 48px repeat(3, minmax(0, 1fr)) 44px; }
  .tc-sign { width: 48px; }
  .tc-del { width: 44px; }
}
.tc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); }
.tc-bar .check { min-height: 36px; color: var(--text-soft); font-size: var(--fs-sm); font-weight: 600; }

/* Ondalık ⇄ saat:dakika */
.tc-conv { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: var(--sp-2); }
.tc-conv .input { font-size: var(--fs-md); font-weight: 650; font-variant-numeric: tabular-nums; }
.tc-swap { display: grid; place-items: center; width: 32px; height: 48px; color: var(--muted); }
.tc-swap svg { width: 20px; height: 20px; }

.tc .btn-row .check { margin-left: auto; color: var(--text-soft); font-size: var(--fs-sm); font-weight: 600; }
.result .tc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .result .tc-stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } }
.tc[data-mode="sum"] .btn-row .check, .tc[data-mode="dec"] .btn-row .check { display: none; }
#tc-clear.is-undo { color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .tc-seg { transition: none; } }

/* ---------- İki tarih arası gün ---------- */
/* İki tarih arası gün: tarih alanı + "Bugün" düğmesi, tarih değiştirme, ekle/çıkar,
   süre alanları, hazır süre çipleri, uyarı satırı, aradaki tatiller listesi */
.dc-pair { display: grid; gap: var(--sp-3); align-items: end; }
@media (min-width: 640px) { .dc-pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
.dc-date { display: flex; align-items: stretch; min-width: 0; }
.dc-date .input { flex: 1 1 auto; min-width: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.dc-today {
  flex: none;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-soft);
  color: var(--text-soft);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.dc-today:hover { background: var(--primary-soft); color: var(--primary); }
.dc-swap {
  justify-self: center;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  margin-bottom: 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dc-swap:hover { color: var(--primary); border-color: var(--primary); }
.dc-swap:active { transform: rotate(180deg); }
.dc-swap svg { width: 20px; height: 20px; transform: rotate(90deg); }
@media (min-width: 640px) { .dc-swap svg { transform: none; } }
.dc-opts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-4); }
.dc-opts .field { grid-auto-flow: column; align-items: center; gap: var(--sp-3); }
.dc-opts .select { width: auto; min-height: 44px; }
.dc[data-mode="add"] .dc-only-between, .dc[data-mode="between"] .dc-only-add { display: none; }
.dc-addhead { display: grid; gap: var(--sp-4); align-items: end; }
@media (min-width: 640px) { .dc-addhead { grid-template-columns: minmax(0, 1fr) auto; } }
.dc-op { margin: 0; }
.dc-op .tab { min-height: 40px; padding: 0 var(--sp-5); }
.dc-amounts { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--sp-4); }
@media (min-width: 640px) { .dc-amounts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dc.is-biz .dc-amt--cal { display: none; }
.dc.is-biz .dc-amounts { grid-template-columns: minmax(0, 1fr); max-width: 280px; }
.dc-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.dc-chip {
  min-height: 36px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-soft);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.dc-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.dc-warn { margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); font-size: var(--fs-sm); font-weight: 600; }
.dc-warn:empty { display: none; }
.dc-hols { margin-top: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.dc-hols summary { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); font-weight: 650; cursor: pointer; }
.dc-hols ul { margin: 0; padding: 0 var(--sp-4) var(--sp-3); list-style: none; display: grid; gap: 2px; max-height: 320px; overflow-y: auto; }
.dc-hols li { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: var(--sp-3); padding: 6px 0; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.dc-hols li time { color: var(--muted); font-variant-numeric: tabular-nums; }
.dc-hols li.is-weekend span { color: var(--muted); }
.dc-hols li.dc-more { display: block; color: var(--muted); }
@media (max-width: 479px) { .dc-hols li { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.dc .result .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
@media (max-width: 639px) { .dc .result .stat { padding: var(--sp-3); } .dc .result .stat b { font-size: var(--fs-base); } }
@media (min-width: 640px) { .dc .result .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); } }
.dc-cd a { font-weight: 600; text-decoration: none; }
.dc-cd a:hover { text-decoration: underline; }
.dc-cd-date { display: block; color: var(--muted); font-size: var(--fs-xs); }
.dc-cd td.num { white-space: nowrap; font-weight: 650; }

/* ---------- 8. İçerik metni, SSS, ilgili araçlar ---------- */
.section { margin-top: var(--sp-7); }
.section > h2 { margin-bottom: var(--sp-4); }

.prose { max-width: var(--content); color: var(--text-soft); }
.prose h2 { margin-top: var(--sp-6); }
.prose h3 { margin-top: var(--sp-5); }
.prose ul, .prose ol { margin: 0 0 var(--sp-4); padding-left: 1.3em; }
.prose li { margin-bottom: var(--sp-2); }
.prose strong { color: var(--text); }
.prose code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bg-soft);
  font-family: var(--font-mono);
  font-size: .9em;
}
.formula {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  overflow-x: auto;
}
.steps { counter-reset: s; padding: 0 !important; list-style: none; }
.steps li { position: relative; padding-left: 40px; min-height: 28px; }
.steps li::before {
  counter-increment: s;
  content: counter(s);
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.faq { display: grid; gap: var(--sp-2); max-width: var(--content); }
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq details > div { padding: 0 var(--sp-4) var(--sp-4); color: var(--text-soft); }
.faq details > div p:last-child { margin-bottom: 0; }

.related { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin: 0; padding: 0; list-style: none; }

/* ---------- 9. Oyunlar ---------- */
.game-wrap {
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.game-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.game-bar .spacer { flex: 1; }

/* ---------- 10. Alt bölüm (footer) ---------- */
.site-footer {
  margin-top: var(--sp-8);
  padding-block: var(--sp-7) var(--sp-6);
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.footer-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.footer-grid .logo { font-size: 1.125rem; margin-bottom: var(--sp-3); }
.footer-grid h2 { margin-bottom: var(--sp-3); color: var(--text); font-size: var(--fs-sm); font-weight: 700; }
.footer-grid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.footer-grid a { color: var(--muted); text-decoration: none; }
.footer-grid a:hover { color: var(--primary); text-decoration: underline; }
.footer-about p { max-width: 280px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.footer-bottom p { margin: 0; }

/* ---------- 11. Yardımcı sınıflar ---------- */
.muted { color: var(--muted); }
.center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--font-mono); }
[hidden] { display: none !important; }

/* ---------- 12. Yazdırma ---------- */
@media print {
  .site-header, .site-footer, .ad-slot, .sidebar, .skip-link, .btn-row { display: none !important; }
  body { background: #fff; color: #000; }
  .tool, .result { box-shadow: none; border-color: #999; }
}

/* ---------- 13. KDV hesaplama ---------- */
/* Yön sekmeleri → tutar + oran (hazır oran düğmeleri + "Diğer" alanı) + (TR) tevkifat.
   Sonuçta matrah/KDV/tevkifat oran çubuğu ve döküm satırları (dl). Kenar çubuğunda oran seçen tablolar. */
.vat > .tabs .tab { flex: 1 1 0; min-height: 44px; padding: var(--sp-1) var(--sp-3); white-space: normal; line-height: 1.25; }
.vat-fields { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) {
  .vat-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .vat-tev-field { grid-column: 1 / -1; }
}
.vat-amount .input { font-size: var(--fs-md); font-weight: 650; font-variant-numeric: tabular-nums; }
.vat-rates { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.vat-presets { flex: 1 1 170px; margin: 0; }
.vat-presets .tab { flex: 1 1 0; min-height: 40px; padding: 0 var(--sp-2); font-variant-numeric: tabular-nums; }
.vat-custom { flex: 1 1 108px; max-width: 100%; }
.vat-custom .input { min-width: 0; font-variant-numeric: tabular-nums; }
.vat-custom .input.is-on { border-color: var(--primary); background: var(--primary-soft); font-weight: 650; }

.vat-bar { display: flex; gap: 2px; height: 10px; margin-top: var(--sp-4); border-radius: var(--radius-pill); overflow: hidden; }
.vat-bar > span { flex: 0 1 0; min-width: 0; transition: flex-grow .3s var(--ease); }
.vat-bar-net { background: var(--primary); }
.vat-bar-vat { background: var(--accent); }
.vat-bar-wh { background: repeating-linear-gradient(135deg, var(--warning) 0 4px, color-mix(in srgb, var(--warning) 45%, transparent) 4px 8px); }

.vat-lines { margin: var(--sp-3) 0 0; padding: var(--sp-1) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.vat-lines:empty { display: none; }
.vat-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.vat-line:last-child { border-bottom: 0; }
.vat-line dt { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-soft); font-size: var(--fs-sm); }
.vat-line dd { margin: 0 0 0 auto; color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.vat-line.is-net dt::before, .vat-line.is-vat dt::before, .vat-line.is-wh dt::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--primary); }
.vat-line.is-vat dt::before { background: var(--accent); }
.vat-line.is-wh dt::before { background: var(--warning); }
.vat-line.is-wh dd { color: var(--warning); }
.vat-line.is-total dt { color: var(--text); font-weight: 700; }
.vat-line.is-total dd { font-size: var(--fs-md); font-weight: 800; }
@media (max-width: 639px) { .vat-lines { padding-inline: var(--sp-3); } }

.vat-hint { margin: var(--sp-2) 0 0; }
.vat-pick { display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 650; text-align: left; cursor: pointer; }
.vat-pick:hover { text-decoration: underline; }
.sidebar tr.is-current > td { background: var(--primary-soft); }
.sidebar tr.is-current .vat-pick { color: var(--text); }
.vat-doc-table { margin: 0 0 var(--sp-4); }
.vat-doc-table td.num { white-space: nowrap; }
.vat-side { min-width: 0; }

/* ---------- 14. Kalori hesaplama ---------- */
/* Birim seçici → cinsiyet/yaş/boy/kilo, hareket düzeyi, hedef + haftalık hız; açılır "formül ve yağ oranı".
   Sonuçta hedef kalori, BMR/koruma/değişim kartları, uyarı ve makro çubuğu + gram satırları.
   Kenar çubuğu tabloları KDV bölümündeki .vat-side / .vat-pick sınıflarını kullanır. */
.cal-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); }
.cal-top .tabs { flex: 0 1 auto; margin: 0; }
.cal-top .tab { min-height: 36px; padding: 0 var(--sp-3); }
.cal-fields { display: grid; align-items: start; gap: var(--sp-4) var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cal-full { grid-column: 1 / -1; }
@media (max-width: 639px) { .cal-goal-field, .cal-pace-field { grid-column: 1 / -1; } }
.cal-seg { margin: 0; }
.cal-seg .tab { flex: 1 1 0; min-height: 40px; padding: 0 var(--sp-2); }
.cal .input { font-variant-numeric: tabular-nums; }
.cal-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.cal-pair .input { padding-inline: var(--sp-3); }
.cal[data-units="metric"] .cal-imperial, .cal[data-units="imperial"] .cal-metric { display: none; }
.cal-pace-field .select:disabled { opacity: .5; cursor: not-allowed; }
.cal-more { margin-top: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); }
.cal-more summary { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-4); color: var(--text-soft); font-size: var(--fs-sm); font-weight: 650; cursor: pointer; list-style: none; }
.cal-more summary::-webkit-details-marker { display: none; }
.cal-more summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-soft); color: var(--primary); font-weight: 800; }
.cal-more[open] summary::before { content: "−"; }
.cal-more > .cal-fields { padding: 0 var(--sp-4) var(--sp-4); }
@media (max-width: 639px) { .cal-more > .cal-fields { grid-template-columns: minmax(0, 1fr); } }

.cal-result .result-value small { font-size: .45em; }
.result .cal-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.cal-stats .stat { padding: var(--sp-3); }
.cal-stats .stat b { font-size: var(--fs-md); }
.cal-stats .stat b small { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.cal-stats .stat > span, .cal-stats .stat > small { display: block; font-size: var(--fs-xs); line-height: 1.35; }
.cal-stats .stat > small { color: var(--muted); }
@media (max-width: 479px) {
  .result .cal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-stats .stat:last-child { grid-column: 1 / -1; }
}
.cal-warn { margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-4); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--text); font-size: var(--fs-sm); }
.cal-warn[hidden], .cal-macros[hidden] { display: none; }

.cal-macros { margin-top: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.cal-macros-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.cal-macros-head .select { width: auto; min-height: 40px; padding-block: 0; font-size: var(--fs-sm); }
.cal-bar { display: flex; gap: 2px; height: 10px; margin: var(--sp-3) 0 var(--sp-1); border-radius: var(--radius-pill); overflow: hidden; }
.cal-bar > span { flex: 0 1 0; min-width: 0; transition: flex-grow .3s var(--ease); }
.cal-bar-p, .cal-line.is-p dt::before { background: var(--primary); }
.cal-bar-c, .cal-line.is-c dt::before { background: var(--accent); }
.cal-bar-f, .cal-line.is-f dt::before { background: var(--warning); }
.cal-lines { margin: 0; }
.cal-line { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.cal-line:last-child { border-bottom: 0; padding-bottom: 0; }
.cal-line dt { position: relative; min-width: 0; padding-left: 18px; color: var(--text); font-weight: 650; }
.cal-line dt::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; border-radius: 3px; }
.cal-line dt small { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
.cal-line dd { flex: none; margin: 0 0 0 auto; font-size: var(--fs-md); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 639px) { .cal-macros { padding: var(--sp-3); } }

.sidebar tr.is-low td.num { color: var(--warning); }
.cal-doc-table { margin: 0 0 var(--sp-4); }
.cal-doc-table td.num { white-space: nowrap; }

/* ---------- 15. Gebelik haftası hesaplama ---------- */
/* Yöntem seçici (5 seçenek, alt satıra geçer) → tarih + yönteme özel alanlar; açılır "hesaplama tarihi".
   Sonuçta hafta+gün, trimester ilerleme çubuğu, doğum tarihi/kalan/ay kartları ve önemli tarihler zaman çizelgesi.
   Alan ızgarası, açılır bölüm ve uyarı kalori bölümündeki .cal-fields / .cal-pair / .cal-more / .cal-warn;
   tarih + "Bugün" düğmesi iki tarih bölümündeki .dc-date / .dc-today; kenar tabloları .vat-side. */
.preg-methods { margin-bottom: var(--sp-4); }
.preg-methods .tab { min-height: 40px; padding: 0 var(--sp-3); }
@media (max-width: 479px) {
  .preg-methods { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .preg-methods .tab { grid-column: span 2; padding: 0 var(--sp-1); }
  .preg-methods .tab:nth-child(n+4) { grid-column: span 3; }
}
.preg .input { font-variant-numeric: tabular-nums; }
.preg-only { display: none; }
.preg[data-method="lmp"] .preg-only--lmp,
.preg[data-method="ultrasound"] .preg-only--ultrasound,
.preg[data-method="ivf"] .preg-only--ivf { display: grid; }
.preg[data-method="conception"] .preg-date-field,
.preg[data-method="due"] .preg-date-field { grid-column: 1 / -1; }
@media (min-width: 640px) { .preg[data-method="conception"] .preg-date-field, .preg[data-method="due"] .preg-date-field { grid-column: auto; } }
@media (max-width: 479px) { .preg .cal-fields > .preg-date-field { grid-column: 1 / -1; } .preg-only--lmp, .preg-only--ivf { grid-column: 1 / -1; } }
.preg-ref-field { max-width: 340px; }

.preg-result .result-value small { color: var(--muted); font-size: .5em; font-weight: 700; letter-spacing: 0; }

.preg-progress { margin-top: var(--sp-4); }
.preg-progress[hidden], .preg-dates[hidden] { display: none; }
.preg-track { position: relative; height: 12px; margin-top: 30px; border-radius: var(--radius-pill); background: linear-gradient(90deg, transparent calc(35% - 1px), var(--surface) calc(35% - 1px) calc(35% + 1px), transparent calc(35% + 1px) calc(70% - 1px), var(--surface) calc(70% - 1px) calc(70% + 1px), transparent calc(70% + 1px)), var(--border); }
.preg-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .4s var(--ease); }
.preg-mark { position: absolute; bottom: calc(100% + 6px); left: 0; transform: translateX(-50%); padding: 1px 7px; border-radius: var(--radius-pill); background: var(--text); color: var(--surface); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; transition: left .4s var(--ease); }
.preg-mark::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -4px; border: 4px solid transparent; border-top-color: var(--text); }
.preg-tri { display: grid; grid-template-columns: 35fr 35fr 30fr; margin-top: var(--sp-2); }
.preg-tri > span { min-width: 0; padding-right: var(--sp-1); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; white-space: nowrap; }
.preg-tri > span small { display: block; font-weight: 500; }
.preg-tri > span.is-current { color: var(--primary); font-weight: 750; }
.preg-tri > span.is-current small { color: var(--text-soft); }
@media (max-width: 479px) { .preg-tri > span { font-size: .8125rem; } .preg-tri > span small { font-size: .75rem; } }
@media (prefers-reduced-motion: reduce) { .preg-fill, .preg-mark { transition: none; } }

.result .preg-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.preg-stats .stat { padding: var(--sp-3); }
.preg-stats .stat b { font-size: var(--fs-base); }
.preg-stats .stat > span, .preg-stats .stat > small { display: block; font-size: var(--fs-xs); line-height: 1.35; }
.preg-stats .stat > small { color: var(--muted); }
@media (max-width: 479px) {
  .result .preg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preg-stats .stat:first-child { grid-column: 1 / -1; }
}

.preg-dates { margin-top: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.preg-dates h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-base); }
.preg-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.preg-timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 5px; width: 2px; background: var(--border); }
.preg-timeline li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--sp-3); padding: var(--sp-2) 0 var(--sp-2) 26px; }
.preg-timeline li::before { content: ""; position: absolute; top: calc(var(--sp-2) + 5px); left: 0; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid var(--border-strong); border-radius: 50%; background: var(--surface); }
.preg-timeline b { grid-column: 1; grid-row: 1; font-size: var(--fs-sm); font-weight: 650; line-height: 1.4; }
.preg-timeline time { grid-column: 1; grid-row: 2; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.preg-timeline small { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.preg-timeline li.is-past b { color: var(--muted); font-weight: 600; }
.preg-timeline li.is-past::before { border-color: color-mix(in srgb, var(--primary) 45%, var(--surface)); background: color-mix(in srgb, var(--primary) 45%, var(--surface)); }
.preg-timeline li.is-now::before, .preg-timeline li.is-next::before { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.preg-timeline li.is-now { margin: 2px calc(-1 * var(--sp-2)); padding-left: calc(26px + var(--sp-2)); padding-right: var(--sp-2); border-radius: var(--radius-sm); background: var(--primary-soft); }
.preg-timeline li.is-now::before { left: var(--sp-2); background: var(--primary); }
.preg-timeline li.is-now small { color: var(--primary); }
.preg-timeline li.is-due b { color: var(--text); font-weight: 800; }
.preg-timeline li.is-due::before { border-color: var(--accent); }
@media (max-width: 639px) {
  .preg-dates { padding: var(--sp-3); }
  .preg-timeline li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
  .preg-timeline b { flex: 1 0 100%; order: -1; }
  .preg-timeline small { margin: 2px 0; padding: 0 6px; border-radius: var(--radius-pill); background: var(--bg-soft); font-size: .75rem; }
  .preg-timeline li.is-now small { background: var(--surface); }
}

.preg-note { margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-2); color: var(--text-soft); font-size: var(--fs-sm); }
.preg-doc-table { margin: 0 0 var(--sp-4); }
.preg-doc-table td.num { white-space: nowrap; }
.sidebar tr.is-current > th { background: var(--primary-soft); }

/* ---------- 16. Faiz hesaplama ---------- */
/* Mod sekmeleri (mevduat / bileşik / basit) → ortak ana para + oran, moda özel alanlar (.int-only--<mod>).
   Alan ızgarası ve açılır bölüm kalori bölümündeki .cal-fields / .cal-pair / .cal-more; vade düğmeleri ve
   döküm satırları KDV bölümündeki .vat-rates / .vat-presets / .vat-custom / .vat-bar / .vat-lines; kenar tabloları .vat-side.
   Bileşik modda yığılmış sütun grafiği (SVG, JS çizer) ve yıl yıl tablo. */
.int > .tabs .tab { flex: 1 1 0; min-height: 44px; padding: var(--sp-1) var(--sp-3); white-space: normal; line-height: 1.25; }
.int .input { font-variant-numeric: tabular-nums; }
#int-p, #int-r { font-size: var(--fs-md); font-weight: 650; }
.int-only { display: none; }
.int[data-mode="deposit"] .int-only--deposit,
.int[data-mode="compound"] .int-only--compound,
.int[data-mode="simple"] .int-only--simple { display: grid; }
.int[data-mode="compound"] details.int-only--compound { display: block; }
@media (max-width: 479px) { .int-fields > .field { grid-column: 1 / -1; } }
.int-terms .tab { min-width: 0; }
.int-add { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-2); }
.int-add .select { min-width: 0; }

.int-bar-add { background: color-mix(in srgb, var(--primary) 45%, var(--surface)); }
.vat-line.is-add dt::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--primary) 45%, var(--surface)); }
.int-result .stats { margin-top: var(--sp-3); }
.int-result .cal-stats .stat b { font-size: var(--fs-base); }

.int-growth { margin-top: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.int-growth[hidden] { display: none; }
.int-growth-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); }
.int-growth-head h3 { margin: 0; font-size: var(--fs-base); }
.int-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: 0; padding: 0; list-style: none; color: var(--text-soft); font-size: var(--fs-xs); }
.int-legend li { display: flex; align-items: center; gap: 6px; }
.int-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--primary); }
.int-legend li.is-a::before { background: color-mix(in srgb, var(--primary) 45%, var(--surface)); }
.int-legend li.is-i::before { background: var(--accent); }
.int-chart { position: relative; min-height: 220px; border-radius: var(--radius-sm); outline-offset: 4px; touch-action: pan-y; }
.int-chart svg { display: block; width: 100%; height: 220px; overflow: visible; }
.int-chart text { fill: var(--muted); font-family: var(--font); font-size: 12px; font-variant-numeric: tabular-nums; }
.int-chart .int-grid { stroke: var(--border); stroke-dasharray: 3 4; }
.int-chart .int-axis { stroke: var(--border-strong); }
.int-b-p { fill: var(--primary); }
.int-b-a { fill: color-mix(in srgb, var(--primary) 45%, var(--surface)); }
.int-b-i { fill: var(--accent); }
.int-hit { fill: transparent; }
.int-col rect:not(.int-hit) { transition: opacity var(--dur) var(--ease); }
.int-chart:hover .int-col:not(.is-on) rect:not(.int-hit), .int-chart:focus-visible .int-col:not(.is-on) rect:not(.int-hit) { opacity: .55; }
.int-col.is-on .int-hit { fill: color-mix(in srgb, var(--primary) 8%, transparent); }
.int-chart-info { min-height: 1.4em; margin: var(--sp-2) 0 0; color: var(--text-soft); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.int-schedule { margin-top: var(--sp-3); }
.int-schedule .table-wrap { max-height: 360px; margin: 0 var(--sp-4) var(--sp-4); overflow: auto; }
.int-schedule thead th { position: sticky; top: 0; z-index: 1; }
.int-schedule th, .int-schedule td { padding: var(--sp-2) var(--sp-3); white-space: nowrap; }
@media (max-width: 639px) {
  .int-growth { padding: var(--sp-3); }
  .int-schedule .table-wrap { margin: 0 var(--sp-2) var(--sp-2); }
  .int-schedule th, .int-schedule td { padding: var(--sp-2); font-size: var(--fs-xs); }
}
.int-doc-table { margin: 0 0 var(--sp-4); }
.int-doc-table td.num { white-space: nowrap; }

/* ---------- 17. Kesir hesaplama ---------- */
/* Mod sekmeleri (dört işlem / sadeleştir / ondalık → kesir / kesir → ondalık) → işlem seçici + kesir kutuları.
   Kesir kutusu: solda isteğe bağlı tam kısım, sağda pay / çizgi / payda; kutular yazılan basamağa göre genişler (--len).
   Sonuçta ve adım adım çözümde kesirler üst/alt (.fr) yazılır; devreden basamaklar üstü çizgili (.fr-rep). */
.frac > .tabs { flex-wrap: wrap; overflow: visible; }
.frac > .tabs .tab { flex: 1 1 40%; min-height: 44px; padding: var(--sp-1) var(--sp-3); white-space: normal; line-height: 1.25; }
@media (min-width: 720px) { .frac > .tabs .tab { flex-basis: 0; } }
.fr-panel[hidden] { display: none; }
.fr-ops { max-width: 340px; margin: 0 auto var(--sp-4); }
.fr-ops .tab { flex: 1 1 0; min-height: 44px; padding: 0; font-size: var(--fs-lg); font-weight: 600; line-height: 1; }
.fr-eq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3) var(--sp-4); }
.fr-in { display: flex; align-items: center; gap: var(--sp-2); }
.fr-in .input { min-height: 46px; padding: 0 6px; text-align: center; font-size: var(--fs-md); font-weight: 650; font-variant-numeric: tabular-nums; }
.fr-in .input::placeholder { color: var(--muted); font-size: var(--fs-xs); font-weight: 500; opacity: .8; }
.fr-in .fr-whole { width: clamp(52px, calc(var(--len, 1) * .66em + 30px), 168px); min-height: 56px; }
.fr-nd { display: grid; gap: 6px; width: clamp(68px, calc(var(--len, 1) * .66em + 30px), 184px); }
.fr-nd::before { content: ""; order: 2; height: 3px; border-radius: var(--radius-pill); background: var(--text); }
.fr-nd .fr-n { order: 1; }
.fr-nd .fr-d { order: 3; }
.fr-eq-op, .fr-eq-eq { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: var(--fs-lg); font-weight: 700; line-height: 1; }
.fr-eq-eq { background: none; color: var(--muted); }
.fr-dec-field { max-width: 320px; margin: 0 auto; }
.fr-dec-field .input { text-align: center; font-size: var(--fs-md); font-weight: 650; font-variant-numeric: tabular-nums; }
@media (max-width: 479px) {
  .fr-eq { column-gap: var(--sp-2); }
  .fr-in { gap: 6px; }
  .fr-eq-op { width: 34px; height: 34px; }
}
.fr-hint { margin: var(--sp-4) auto 0; max-width: 520px; text-align: center; }

/* Kesir gösterimi */
.fr-group { display: inline-flex; align-items: center; gap: .14em; white-space: nowrap; }
.fr { display: inline-flex; flex-direction: column; align-items: stretch; vertical-align: middle; font-size: .86em; line-height: 1.15; text-align: center; }
.fr-n { padding: 0 .2em .06em; border-bottom: max(1.5px, .07em) solid currentColor; }
.fr-d { padding: .06em .2em 0; }
.fr-w { margin-right: .06em; }
.fr-sign { margin-right: .04em; }
.fr-rep { text-decoration: overline; text-decoration-thickness: max(1.5px, .06em); text-underline-offset: 0; }
.fr-var { font-style: italic; }
.fr-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .42em; font-variant-numeric: tabular-nums; }
.fr-paren { color: var(--muted); font-weight: 400; }

/* Sonuç */
.result-value.fr-out { display: flex; flex-wrap: wrap; align-items: center; gap: .1em .35em; min-height: 1.6em; letter-spacing: -.01em; }
.result-value.fr-out .fr { font-size: .8em; }
.result-value.fr-out > .fr-t:not(.fr-w) { color: var(--muted); font-weight: 600; }
.result-value .fr-dec { overflow-wrap: anywhere; white-space: normal; }
.result .fr-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); }
.fr-stats .stat b { display: block; margin-top: 2px; font-variant-numeric: tabular-nums; }
.fr-stats .stat b span { color: inherit; font-size: inherit; }
.fr-stats .stat b .fr { font-size: .8em; }
.fr-stats .stat b .fr-line { font-size: var(--fs-md); }

/* Adım adım çözüm */
.fr-steps-box { margin-top: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.fr-steps-box[hidden] { display: none; }
.fr-steps-box h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-base); }
.fr-steps { counter-reset: fs; margin: 0; padding: 0; list-style: none; }
.fr-step { position: relative; padding: 0 0 var(--sp-4) 40px; }
.fr-step + .fr-step { padding-top: var(--sp-4); border-top: 1px dashed var(--border); }
.fr-step:last-child { padding-bottom: 0; }
.fr-step::before { counter-increment: fs; content: counter(fs); position: absolute; left: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: var(--fs-sm); font-weight: 700; }
.fr-step + .fr-step::before { top: var(--sp-4); }
.fr-step-t { margin: 0 0 var(--sp-2); padding-top: 3px; color: var(--text-soft); font-size: var(--fs-sm); font-weight: 650; }
.fr-step .fr-line { margin: var(--sp-2) 0 0; font-size: var(--fs-md); overflow-x: auto; }
.fr-step .fr-line + .fr-line { margin-top: var(--sp-3); }
.fr-step-x { margin: var(--sp-2) 0 0; color: var(--muted); font-size: var(--fs-xs); }
@media (max-width: 639px) {
  .fr-steps-box { padding: var(--sp-3); }
  .fr-step { padding-left: 36px; }
  .fr-step .fr-line { font-size: var(--fs-base); }
}

/* Kenar çubuğu ve metin */
.fr-side { min-width: 0; }
.fr-side .vat-pick { display: inline-flex; width: auto; }
.fr-side td .fr, .fr-doc .fr { font-size: .8em; }
.fr-rules { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.fr-rules li { display: grid; gap: 2px; }
.fr-rules .label { font-size: var(--fs-xs); }
.fr-rules .fr-line { font-size: var(--fs-base); }
.fr-doc { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface); font-size: var(--fs-md); }
.fr-doc .fr-line + .fr-line { margin-top: var(--sp-2); }
/* Çok uzun pay/payda: sonuçta satıra sığsın diye bölünür, çözüm satırları yatay kayar */
.result-value.fr-out .fr-group, .result-value.fr-out .fr { min-width: 0; max-width: 100%; white-space: normal; }
.result-value.fr-out .fr-n, .result-value.fr-out .fr-d { overflow-wrap: anywhere; }
.fr-step { min-width: 0; }
.fr-step-t, .fr-step-x, .fr-result .result-note { overflow-wrap: anywhere; }

/* ---------- 18. İdeal kilo ve vücut yağ oranı ---------- */
/* Mod seçici (ideal kilo / yağ oranı) + birim seçici → alanlar; yağ oranında mezura ölçüleri ve "nasıl ölçülür".
   Alan ızgarası, segment düğmeler, açılır bölüm, kartlar, uyarı ve satır listesi kalori bölümündeki
   .cal-top / .cal-fields / .cal-seg / .cal-pair / .cal-more / .cal-stats / .cal-warn / .cal-lines; kenar tabloları .vat-side.
   Sonuçta eşit genişlikte renkli bölgeli ölçek (.iw-scale): üstte ana işaret, altta ikinci işaret, altında bölge adları. */
.iw-modes { margin-bottom: var(--sp-4); }
.iw-modes .tab { flex: 1 1 0; min-height: 44px; font-size: var(--fs-base); }
.iw[data-mode="weight"] .iw-fat-only, .iw[data-mode="fat"] .iw-weight-only, .iw[data-sex="male"] .iw-hip { display: none; }
.iw[data-mode="weight"] .iw-sex-field { grid-column: 1 / -1; }
.iw-tape-title { display: block; margin: var(--sp-5) 0 var(--sp-2); }
.iw-tape { display: grid; gap: var(--sp-4) var(--sp-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.iw[data-sex="male"] .iw-tape { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.iw-tape .input { padding-inline: var(--sp-3); }
@media (max-width: 479px) {
  .iw-tape { gap: var(--sp-4) var(--sp-2); }
  .iw-tape .addon { padding: 0 var(--sp-2); }
}
.iw-howto { padding: 0 var(--sp-4) var(--sp-4); color: var(--text-soft); font-size: var(--fs-sm); }
.iw-howto ul { margin: 0; padding-left: 1.2em; }
.iw-howto li + li { margin-top: var(--sp-1); }

.iw-result .result-value small { color: var(--muted); font-size: .5em; font-weight: 700; letter-spacing: 0; }
.iw-scale { margin-top: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.iw-scale[hidden], .iw-pin[hidden], .iw-dot[hidden], .iw-lines-box[hidden] { display: none; }
.iw-bar { position: relative; margin-top: 30px; }
.iw-track { display: flex; gap: 2px; height: 12px; border-radius: var(--radius-pill); overflow: hidden; }
.iw-seg { flex: 1 1 0; }
.z-w-0, .z-f-0 { background: color-mix(in srgb, var(--primary) 60%, var(--surface)); }
.z-w-1, .z-f-2 { background: var(--success); }
.z-f-1 { background: var(--accent); }
.z-w-2, .z-f-3 { background: color-mix(in srgb, var(--warning) 80%, var(--surface)); }
.z-w-3, .z-f-4 { background: var(--danger); }
.iw-dot { position: absolute; top: 50%; left: var(--x, 0); width: 20px; height: 20px; margin: -10px 0 0 -10px; box-sizing: border-box; border: 4px solid var(--surface); border-radius: 50%; background: var(--text); box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-sm); transition: left .4s var(--ease); }
.iw-dot.is-b { width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 3px solid var(--text); background: var(--surface); box-shadow: var(--shadow-sm); }
.iw-pin { position: absolute; bottom: calc(100% + 9px); left: var(--x, 0); transform: translateX(calc(-50% + var(--shift, 0px))); padding: 1px 8px; border-radius: var(--radius-pill); background: var(--text); color: var(--surface); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; transition: left .4s var(--ease); }
.iw-pin.is-b { top: calc(100% + 9px); bottom: auto; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-soft); font-weight: 650; }
.iw-zones { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 2px; margin-top: var(--sp-3); }
.iw-scale.has-b .iw-zones { margin-top: 42px; }
.iw-zone { min-width: 0; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; text-align: center; }
.iw-zone small { display: block; font-size: .8125rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.iw-zone.is-current { color: var(--text); font-weight: 800; }
.iw-zone.is-current small { color: var(--text-soft); font-weight: 600; }
@media (max-width: 479px) {
  .iw-scale { padding: var(--sp-3); }
  .iw-zone { font-size: .8125rem; }
  .iw-zone small { font-size: .75rem; }
  .iw-zones { gap: 0; margin-inline: calc(-1 * var(--sp-1)); }
  .iw-scale[data-kind="f"] .iw-zone { font-size: .6875rem; letter-spacing: -.01em; }
  .iw-scale[data-kind="f"] .iw-zone small { font-size: .6875rem; }
}
@media (prefers-reduced-motion: reduce) { .iw-dot, .iw-pin { transition: none; } }

.iw-stats .stat b { font-size: var(--fs-base); white-space: nowrap; }
.iw-lines-box h3 { margin: 0 0 var(--sp-1); }
.iw-lines .cal-line dt { padding-left: 0; }
.iw-lines .cal-line dt::before { display: none; }
.iw-lines .cal-line dd { font-size: var(--fs-base); }
.sidebar td.is-sex { color: var(--primary); font-weight: 800; }
.iw-doc-table { margin: 0 0 var(--sp-4); }
.iw-doc-table td.num { white-space: nowrap; }

/* ---------- 19. Vücut kitle indeksi (VKİ / BMI) ---------- */
/* Birim seçici → cinsiyet, yaş (2–19 yaşta ay alanı da açılır), boy, kilo. Alanlar, kartlar ve uyarı kalori bölümündeki
   .cal-top / .cal-fields / .cal-seg / .cal-pair / .cal-stats / .cal-warn; renkli ölçek ideal kilo bölümündeki .iw-scale.
   Sonuç değerinin yanında kategori rozeti (.bmi-pill, ölçek renkleriyle). Kenar tabloları .vat-side. */
.bmi-age { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.bmi[data-group="adult"] .bmi-age { grid-template-columns: minmax(0, 1fr); }
.bmi[data-group="adult"] .bmi-child-only { display: none; }
.bmi-age .input { padding-inline: var(--sp-3); }
.bmi[data-group="child"] .bmi-age-field, .bmi[data-group="child"] .bmi-sex-field { grid-column: 1 / -1; }
.bmi-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.bmi-head .result-value { min-width: 0; }
.bmi-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); font-size: var(--fs-sm); font-weight: 750; white-space: nowrap; box-shadow: var(--shadow-sm); }
.bmi-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.bmi-pill[hidden] { display: none; }
.bmi-pill.is-0 { color: var(--primary); }
.bmi-pill.is-1 { color: var(--success); }
.bmi-pill.is-2 { color: color-mix(in srgb, var(--warning) 80%, var(--text)); }
.bmi-pill.is-3 { color: var(--danger); }
.bmi-stats .stat b { font-size: var(--fs-base); white-space: nowrap; }
@media (max-width: 479px) {
  .bmi-stats .stat:first-child { grid-column: 1 / -1; }
  .bmi-stats .stat:last-child { grid-column: auto; }
}
.bmi-doc-table { margin: 0 0 var(--sp-4); }
.bmi-doc-table td.num { white-space: nowrap; }

/* ---------- 20. Yaş hesaplama ---------- */
/* Doğum tarihi gün / ay / yıl alanları (TR gün-ay-yıl, EN ay-gün-yıl) + hesaplama tarihi (iki tarih bölümündeki
   .dc-date / .dc-today). Sonuçta yıl-ay-gün değeri (birimler <small>), sonraki doğum günü kartı ve yıl çubuğu,
   istatistik kartları, bin günlük dönüm noktası satırı. Uyarı satırı .dc-warn, kenar tabloları .vat-side. */
.age-grid { display: grid; gap: var(--sp-4); align-items: end; }
@media (min-width: 640px) { .age-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.age-dob { min-width: 0; margin: 0; padding: 0; border: 0; }
.age-dob legend { padding: 0; margin-bottom: 6px; }
.age-dob-row { display: grid; gap: var(--sp-2); }
.age-dob-row--dmy { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1.3fr); }
.age-dob-row--mdy { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1.3fr); }
.age-dob .field { gap: 4px; }
.age-dob .field > label { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.age-dob .input, .age-dob .select { padding-inline: var(--sp-3); }
.age-result .result-value small { margin-inline-end: .15em; }
.age-part { white-space: nowrap; }
.age-bday { margin-top: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.age-bday[hidden] { display: none; }
.age-bday-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px var(--sp-3); }
.age-bday-icon { grid-row: 1 / 3; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius); background: var(--primary-soft); color: var(--primary); }
.age-bday-icon svg { width: 22px; height: 22px; }
.age-bday-title { min-width: 0; font-size: var(--fs-sm); font-weight: 700; }
.age-bday-date { grid-column: 2 / 4; min-width: 0; color: var(--muted); font-size: var(--fs-xs); }
.age-bday-left { color: var(--primary); font-size: var(--fs-md); font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: end; }
.age-bar { height: 8px; margin-top: var(--sp-3); border-radius: var(--radius-pill); background: var(--bg-soft); overflow: hidden; }
.age-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .45s var(--ease); }
.age-bday-sub { margin: var(--sp-2) 0 0; color: var(--muted); font-size: var(--fs-xs); }
.age-result.is-bday .age-bday-icon { background: var(--warning-soft); color: var(--warning); }
.age-result.is-bday .age-bday-left { color: var(--warning); }
.result .age-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.age-stats .stat b { font-size: var(--fs-base); }
@media (min-width: 640px) { .result .age-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); } }
@media (max-width: 479px) {
  .age-stats .stat { padding: var(--sp-3); }
  .age-bday { padding: var(--sp-3); }
}
.age-mile { margin: var(--sp-3) 0 0; color: var(--text-soft); font-size: var(--fs-sm); font-weight: 600; }
.age-mile:empty { display: none; }
.age-sym { display: inline-block; width: 1.25em; color: var(--primary); }
.vat-side tr.is-current > th { background: var(--primary-soft); }
@media (prefers-reduced-motion: reduce) { .age-bar span { transition: none; } }

/* ---------- 21. Kelime sayacı ---------- */
/* Üstte altı sayaç kutusu (.wc-stats), büyük metin alanı, seçili metin satırı ve "bu cihazda sakla" kutusu,
   altında yan yana ayrıntı listesi (.wc-dl) ve en sık kelimeler (.wc-top), en altta tam genişlikte karakter sınırı çubukları (.wc-limits). */
.wc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-4); }
@media (min-width: 900px) { .wc-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.wc-stats .stat { min-width: 0; padding: var(--sp-3); background: var(--surface-2); }
.wc-stats .stat b { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.625rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-stats .stat b small { margin: 0 .2em 0 .1em; color: var(--muted); font-size: .58em; font-weight: 700; letter-spacing: 0; }
.wc-stats .stat span { display: block; font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-stats .stat:first-child { border-color: color-mix(in srgb, var(--primary) 30%, transparent); background: var(--primary-soft); }
.wc-stats .stat:first-child b { color: var(--primary); }
.wc-text { display: block; min-height: 260px; font-size: var(--fs-base); }
@media (min-width: 640px) { .wc-text { min-height: 320px; } }
.wc-under { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-2); }
.wc-sel { margin: 0; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary); font-size: var(--fs-xs); font-weight: 650; font-variant-numeric: tabular-nums; }
.wc-sel[hidden] { display: none; }
.wc-save { min-height: 36px; font-size: var(--fs-sm); color: var(--text-soft); }
.wc-save-note { margin: 0; flex-basis: 100%; color: var(--warning); }
.wc-save-note:empty { display: none; }
.wc-actions { margin-top: var(--sp-4); }
.wc-actions [hidden] { display: none; }
.wc-panels { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
@media (min-width: 720px) { .wc-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wc-panel--wide { grid-column: 1 / -1; } }
.wc-panel { min-width: 0; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.wc-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--sp-3); margin-bottom: var(--sp-3); }
.wc-panel-head h2 { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.wc-panel-head .check { min-height: 32px; font-size: var(--fs-xs); color: var(--muted); }
.wc-panel-head .check input { width: 18px; height: 18px; }
.wc-dl { display: grid; gap: 0; margin: 0; }
.wc-dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: 9px 0; border-top: 1px solid var(--border); }
.wc-dl > div:first-child { border-top: 0; padding-top: 0; }
.wc-dl dt { color: var(--text-soft); font-size: var(--fs-sm); }
.wc-dl dd { min-width: 0; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-limits { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .wc-limits { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); } }
.wc-lim { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-3); }
.wc-lim-name { min-width: 0; font-size: var(--fs-sm); font-weight: 600; }
.wc-lim-n { font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wc-lim .wc-meter { grid-column: 1 / -1; }
.wc-lim-note { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-xs); }
.wc-meter { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--bg-soft); overflow: hidden; }
.wc-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--primary); transition: width .25s var(--ease); }
.wc-lim.is-warn .wc-meter i { background: var(--warning); }
.wc-lim.is-warn .wc-lim-note { color: var(--warning); font-weight: 600; }
.wc-lim.is-over .wc-meter i { background: var(--danger); }
.wc-lim.is-over .wc-lim-n, .wc-lim.is-over .wc-lim-note { color: var(--danger); font-weight: 700; }
.wc-top { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; counter-reset: wc; }
.wc-top[hidden] { display: none; }
.wc-top li { display: grid; grid-template-columns: 1.6em minmax(0, 7.5em) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); counter-increment: wc; font-size: var(--fs-sm); }
.wc-top li::before { content: counter(wc); color: var(--muted); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.wc-tw { min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-top .wc-meter i { background: linear-gradient(90deg, var(--primary), var(--accent)); }
.wc-tn { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wc-tn small { min-width: 3.4em; color: var(--muted); font-size: var(--fs-xs); text-align: end; }
.wc-top-empty { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.wc-top-empty[hidden] { display: none; }
@media (max-width: 479px) {
  .wc-stats .stat { padding: var(--sp-2) var(--sp-3); }
  .wc-panel { padding: var(--sp-3); }
}
@media (prefers-reduced-motion: reduce) { .wc-meter i { transition: none; } }

/* ---------- 22. Rastgele sayı üretici ---------- */
/* Sekmeler: Sayı (büyük sonuç ekranı + Üret/Kopyala, altında hızlı seçim, aralık, adet, ondalık, sıralama)
   ve Liste ve çekiliş (textarea, kazanan/yedek, numaralı sonuç listesi + tarih damgası).
   Onay kutuları .pw-checks, gizlilik satırı .pw-private sınıflarını paylaşır. */
.rng > .tabs { margin-bottom: var(--sp-4); }
.rng > .tabs .tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 0; padding: 0 var(--sp-2); }
.rng > .tabs .tab svg { width: 18px; height: 18px; opacity: .7; }
.rng > .tabs .tab[aria-selected="true"] svg { color: var(--cat-random); opacity: 1; }
.rng [role="tabpanel"][hidden] { display: none; }
.rng-out { display: grid; gap: var(--sp-3); }
.rng-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 176px;
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--cat-random) 7%, transparent), transparent 70%),
    var(--surface-2);
  text-align: center;
  transition: opacity var(--dur) var(--ease);
}
.rng-display.is-stale { opacity: .45; }
.rng-num {
  display: block;
  max-width: 100%;
  color: var(--text);
  font-size: clamp(3.5rem, 2.4rem + 5vw, 5.75rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.rng-num[data-len="l"] { font-size: clamp(2.5rem, 1.9rem + 3vw, 3.75rem); }
.rng-num[data-len="xl"] { font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem); }
.rng-num.is-rolling { color: var(--muted); }
.rng-num.is-done { animation: rng-land .32s var(--ease); }
@keyframes rng-land { from { transform: scale(.9); opacity: .4; } to { transform: none; opacity: 1; } }
.rng-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); width: 100%; max-height: 300px; margin: 0; padding: 2px; overflow: auto; list-style: none; }
.rng-chips li {
  min-width: 3.1em;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-md);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  animation: rng-pop .3s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}
.rng-chips.is-balls { gap: var(--sp-3); }
.rng-chips.is-balls li {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--cat-random) 55%, #fff), var(--cat-random) 70%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12), var(--shadow-sm);
  color: #fff;
  font-size: var(--fs-lg);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.rng-chips li.no-anim, .rng-winners li.no-anim { animation: none; }
@keyframes rng-pop { from { transform: translateY(6px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.rng-chips.is-many { gap: 6px; }
.rng-chips.is-many li { min-width: 2.6em; padding: 4px 9px; font-size: var(--fs-sm); }
.rng-actions .btn, .rng-list-actions .btn { white-space: nowrap; }
.rng .field-head output { white-space: nowrap; }
.rng-odds td.num { white-space: nowrap; }
.rng-sum { margin: 0; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.rng-meta { margin: 0; color: var(--muted); font-size: var(--fs-sm); text-align: center; }
.rng-meta.is-error { color: var(--danger); font-weight: 600; }
.rng-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); }
.rng-go.is-spin svg { animation: pw-spin .45s var(--ease); }
.rng-copy.is-done, .rng-copy.is-done:hover { background: var(--success); border-color: var(--success); color: var(--primary-text); }
.rng-settings { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.rng-presets { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rng-preset { min-height: 40px; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; }
.rng-preset small { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.input-group .rng-sign { min-width: 48px; font: inherit; font-size: var(--fs-md); color: var(--text-soft); cursor: pointer; }
.input-group .rng-sign:hover { background: var(--border); color: var(--text); }
.rng-items { min-height: 210px; }
.rng-list-grid { margin-top: var(--sp-4); }
.rng-err { margin: var(--sp-2) 0 0; color: var(--danger); font-size: var(--fs-sm); font-weight: 600; }
.rng-err[hidden] { display: none; }
.rng-list-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.rng-list-actions .btn { flex: 1 1 auto; }
.rng-list-actions .btn-ghost { flex: 0 0 auto; }
@media (max-width: 559px) { .rng-list-actions .btn-primary { flex-basis: 100%; } }
.rng .form-grid > .field { align-content: start; }
.rng-res-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.rng-winners { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-4); padding: 0; list-style: none; counter-reset: rw; }
.rng-winners li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-md);
  font-weight: 700;
  overflow-wrap: anywhere;
  counter-increment: rw;
  animation: rng-pop .3s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.rng-winners li::before {
  content: counter(rw);
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cat-random);
  color: var(--primary-text);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.rng-result.is-rolling .rng-winners li { color: var(--muted); }
.rng-alts li { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-base); font-weight: 600; }
.rng-alts li::before { width: 26px; height: 26px; background: var(--bg-soft); color: var(--text-soft); font-size: var(--fs-xs); }
.rng-result.is-list .rng-winners { max-height: 420px; overflow: auto; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.rng-result.is-list .rng-winners li { padding: var(--sp-2) var(--sp-3); border: 0; border-bottom: 1px solid var(--border); border-radius: 0; font-size: var(--fs-sm); font-weight: 600; animation-delay: calc(var(--i, 0) * 15ms); }
.rng-result.is-list .rng-winners li:last-child { border-bottom: 0; }
.rng-result.is-list .rng-winners li::before { width: auto; height: auto; min-width: 2.4ch; background: none; color: var(--muted); font-size: var(--fs-xs); }
.rng-stamp { color: var(--muted); font-size: var(--fs-xs); }
@media (max-width: 479px) {
  .rng-display { min-height: 156px; padding: var(--sp-4) var(--sp-3); }
  .rng-chips.is-balls li { width: 50px; height: 50px; font-size: var(--fs-md); }
  .rng-actions .rng-copy { padding: 0 var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) {
  .rng-num.is-done, .rng-chips li, .rng-winners li, .rng-go.is-spin svg { animation: none; }
  .rng-display { transition: none; }
}

/* ---------- 23. Zar at ---------- */
/* Sekmeler: Zar at (1–10 zar, d4–d100, ekle/çıkar, zar tutma) ve Tavla (iki d6, çift, Kim başlar?).
   d6: CSS 3B küp (.die-cube > .die-face ×6, 3×3 nokta ızgarası); diğerleri SVG gövdeli düz zar, atılırken 3B takla atar.
   Boyut tepsi üzerindeki --ds değişkeninden. Ortak: .pw-private, .rng-sign (± düğmesi). */
.dice > .tabs { margin-bottom: var(--sp-4); }
.dice > .tabs .tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 0; padding: 0 var(--sp-2); }
.dice > .tabs .tab svg { width: 18px; height: 18px; opacity: .7; }
.dice > .tabs .tab[aria-selected="true"] svg { color: var(--cat-random); opacity: 1; }
.dice [role="tabpanel"][hidden] { display: none; }

.dice-stage {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background:
    radial-gradient(110% 80% at 50% 0%, color-mix(in srgb, var(--cat-random) 8%, transparent), transparent 70%),
    var(--surface-2);
  text-align: center;
}
.dice-tray {
  --ds: 92px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(var(--ds) * .34) calc(var(--ds) * .3);
  min-height: calc(var(--ds) * 1.5);
  padding: calc(var(--ds) * .18) 0 calc(var(--ds) * .1);
}
.dice-tray[data-size="m"] { --ds: 76px; }
.dice-tray[data-size="s"] { --ds: 64px; }
.dice-tray[data-size="xs"] { --ds: 54px; }
.dice-tray--bg { --ds: 100px; gap: var(--sp-6); }

/* Tek zar */
.die {
  position: relative;
  display: block;
  width: var(--ds);
  height: var(--ds);
  padding: 0;
  border: 0;
  border-radius: 20%;
  background: none;
  color: inherit;
  font: inherit;
  perspective: calc(var(--ds) * 7);
  -webkit-tap-highlight-color: transparent;
}
button.die { cursor: pointer; }
.die::after {
  content: "";
  position: absolute;
  left: 0;
  right: -8%;
  bottom: -14%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 23, 41, .42), rgba(15, 23, 41, .16) 55%, transparent);
  filter: blur(1.5px);
  z-index: -1;
}
:root[data-theme="dark"] .die::after { background: radial-gradient(closest-side, rgba(0, 0, 0, .75), rgba(0, 0, 0, .3) 60%, transparent); }
.die--poly::after { left: 10%; right: 10%; bottom: -12%; height: 16%; }
.die-body { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; }

/* d6 küpü: dolu gövde (iç dolgu düzlemleri), yuvarlak pahlı kenarlar, sabit ışığa göre yüz gölgesi (--sh, JS) */
.die-cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: scale3d(.84, .84, .84) rotateX(-24deg) rotateY(30deg);
}
.die-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
  padding: 16%;
  border-radius: 17%;
  background:
    radial-gradient(120% 120% at 30% 25%, #ffffff 0%, #faf8f3 45%, #ece8de 100%);
  box-shadow:
    inset 0 0 0 1px rgba(120, 110, 90, .16),
    inset 0 0 calc(var(--ds) * .07) rgba(120, 105, 80, .22),
    inset 0 0 calc(var(--ds) * .02) rgba(255, 255, 255, .9);
  backface-visibility: hidden;
}
.die-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #1c2335;
  opacity: var(--sh, .1);
  transition: opacity .9s cubic-bezier(.16, .72, .26, 1);
  pointer-events: none;
}
.die-face i {
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #1a2131 0%, #262e42 55%, #4a5266 100%);
  box-shadow:
    inset 0 calc(var(--ds) * .018) calc(var(--ds) * .022) rgba(0, 0, 0, .65),
    0 1px 0 rgba(255, 255, 255, .95),
    0 -1px 0 rgba(120, 105, 80, .25);
}
.die-face i.off { visibility: hidden; }
.die-face.f1 i:not(.off) {
  width: 92%;
  height: 92%;
  background: radial-gradient(circle at 50% 38%, #8c0f16 0%, #b81d25 55%, #e0545a 100%);
}
.die-core { position: absolute; inset: 2%; border-radius: 17%; background: #ebe7dd; backface-visibility: visible; }
.die-core.c2 { transform: rotateY(90deg); }
.die-core.c3 { transform: rotateX(90deg); }
.die-face.f1 { transform: translateZ(calc(var(--ds) / 2)); }
.die-face.f6 { transform: rotateY(180deg) translateZ(calc(var(--ds) / 2)); }
.die-face.f3 { transform: rotateY(90deg) translateZ(calc(var(--ds) / 2)); }
.die-face.f4 { transform: rotateY(-90deg) translateZ(calc(var(--ds) / 2)); }
.die-face.f2 { transform: rotateX(90deg) translateZ(calc(var(--ds) / 2)); }
.die-face.f5 { transform: rotateX(-90deg) translateZ(calc(var(--ds) / 2)); }

/* Çok yüzlü zarlar (d4, d8, d10, d12, d20, d100) */
.die-poly { position: absolute; inset: -4%; display: block; }
.die-poly svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 2px rgba(15, 23, 41, .22)); }
.die-shape { fill: color-mix(in srgb, var(--cat-random) 78%, #000); stroke: color-mix(in srgb, var(--cat-random) 60%, #000); stroke-width: 1.5; stroke-linejoin: round; }
.die-front { fill: color-mix(in srgb, var(--cat-random) 90%, #fff); }
.die-edges { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 1.4; stroke-linecap: round; }
.die-num { fill: #fff; font-family: var(--font); font-weight: 800; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: rgba(0, 0, 0, .18); stroke-width: 2px; }
.die.is-crit .die-shape { fill: #12703a; stroke: #0b4f28; }
.die.is-crit .die-front { fill: #1fa055; }
.die.is-fumble .die-shape { fill: #7e1218; stroke: #5c0c11; }
.die.is-fumble .die-front { fill: #c4282e; }

/* Atış animasyonu: zıplama (küp kendi geçişiyle döner) ve çok yüzlüde 3B takla */
.die.is-rolling .die-body { animation: dice-hop var(--dice-dur, .9s) cubic-bezier(.3, .6, .35, 1) both; animation-delay: var(--delay, 0ms); }
.die--poly.is-rolling .die-body { animation-name: dice-tumble; }
@keyframes dice-hop {
  0% { transform: none; }
  30% { transform: translateY(calc(var(--ds) * -.42)); }
  62% { transform: none; }
  78% { transform: translateY(calc(var(--ds) * -.08)); }
  100% { transform: none; }
}
@keyframes dice-tumble {
  0% { transform: none; }
  30% { transform: translateY(calc(var(--ds) * -.42)) rotate3d(1, .55, .25, 330deg); }
  62% { transform: rotate3d(1, .55, .25, 640deg); }
  78% { transform: translateY(calc(var(--ds) * -.08)) rotate3d(1, .55, .25, 700deg); }
  100% { transform: rotate3d(1, .55, .25, 720deg); }
}
.die.is-rolling::after { animation: dice-shadow var(--dice-dur, .9s) cubic-bezier(.3, .6, .35, 1) both; animation-delay: var(--delay, 0ms); }
@keyframes dice-shadow { 30% { transform: scale(.6); opacity: .45; } 62%, 100% { transform: none; opacity: 1; } }
.die.is-landed .die-body { animation: dice-fade .25s var(--ease); }
@keyframes dice-fade { from { opacity: .3; } to { opacity: 1; } }

/* Tutulan zar */
.die-lock {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 2;
  display: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  transform: translateZ(1px);
}
.die.is-held .die-lock { display: grid; }
.die.is-held::before {
  content: "";
  position: absolute;
  inset: -11px;
  border: 2.5px solid var(--primary);
  border-radius: 24%;
}
button.die:focus-visible { outline: 3px solid var(--focus); outline-offset: 8px; }
@media (hover: hover) { button.die:hover:not(.is-rolling) .die-body { transform: translateY(-3px); transition: transform var(--dur) var(--ease); } }

/* Toplam */
.dice-total { display: grid; justify-items: center; gap: 2px; }
.dice-total-label { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dice-total-value {
  display: block;
  color: var(--text);
  font-size: clamp(2.75rem, 2rem + 3.4vw, 4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.dice-total-value.is-rolling { color: var(--muted); }
.dice-total-value.is-done { animation: rng-land .32s var(--ease); }
.dice-sum { margin: 0; color: var(--text-soft); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dice-sum[hidden] { display: none; }
.dice-meta { margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--fs-sm); text-align: center; font-variant-numeric: tabular-nums; }
.dice-meta.is-error { color: var(--danger); font-weight: 600; }
.dice-meta.is-double { color: var(--cat-random); font-weight: 700; }
.dice-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
.dice-actions .btn { flex: 1 1 auto; white-space: nowrap; }
.dice-actions .btn-primary { flex-grow: 3; }
.dice-actions kbd { margin-left: var(--sp-1); font-family: var(--font); font-size: var(--fs-xs); border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .14); color: inherit; }
@media (hover: none) { .dice-actions kbd { display: none; } }
.dice-go.is-spin svg, .dice-actions .is-spin svg { animation: pw-spin .45s var(--ease); }
.dice-hint { margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--fs-xs); text-align: center; }
.dice-hint[hidden] { display: none; }

/* Ayarlar */
.dice-settings { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.dice-types { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); }
.dice-type {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 64px;
  padding: var(--sp-2) 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dice-type svg { width: 26px; height: 26px; color: var(--muted); }
.dice-type:hover { border-color: var(--muted); color: var(--text); }
.dice-type[aria-checked="true"] {
  border-color: var(--cat-random);
  background: color-mix(in srgb, var(--cat-random) 9%, var(--surface));
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--cat-random);
}
.dice-type[aria-checked="true"] svg { color: var(--cat-random); }
@media (max-width: 559px) { .dice-types { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dice-stepper { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap); }
.dice-stepper .input { border-radius: 0; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.dice-step {
  min-height: var(--tap);
  padding: 0;
  border: 1px solid var(--border-strong);
  background: var(--bg-soft);
  color: var(--text-soft);
  font: inherit;
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
}
.dice-step:first-child { border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.dice-step:last-child { border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.dice-step:hover:not(:disabled) { background: var(--border); color: var(--text); }
.dice-step:disabled { opacity: .45; cursor: default; }
.dice .form-grid > .field { align-content: start; }

/* Tavla */
.die-cap { display: none; }
.dice-tray.is-start .die-cap {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  display: block;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}
.dice-tray.is-start { padding-bottom: 34px; }
.dice-tray.is-start .die.is-winner .die-cap { color: var(--success); }
.dice-tray.is-start .die:not(.is-winner) { opacity: .55; }
.dice-tray.is-double .die::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 24%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-random) 70%, transparent), 0 0 24px color-mix(in srgb, var(--cat-random) 45%, transparent);
  animation: rng-land .4s var(--ease);
}
.dice-actions--bg .btn-primary { flex-grow: 2; }
.dice-bg-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-4);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.dice-bg-stats b { color: var(--text); }

/* Son atışlar */
.dice-history { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.dice-history-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.dice-history-head h2 { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--text-soft); }
.dice-hist { display: grid; max-height: 264px; margin: 0; padding: 0; overflow: auto; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.dice-hist[hidden] { display: none; }
.dice-hist li {
  display: grid;
  grid-template-columns: minmax(5.5em, auto) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.dice-hist li:last-child { border-bottom: 0; }
.dice-hist li.is-new { animation: rng-pop .3s var(--ease); background: color-mix(in srgb, var(--cat-random) 5%, transparent); }
.dh-what { color: var(--text-soft); font-weight: 600; white-space: nowrap; }
.dh-vals { min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-total { min-width: 2.2em; text-align: right; color: var(--text); white-space: nowrap; }
.dh-total.is-double { color: var(--cat-random); }
.dh-time { color: var(--muted); font-size: var(--fs-xs); }
.dice-hist-empty { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.dice-hist-empty[hidden] { display: none; }
.dice-odds td.num { white-space: nowrap; }
.dice-odds td.bar-cell { width: 34%; padding-left: 0; padding-right: 0; }
.dice-odds .bar { display: block; height: 8px; border-radius: 4px; background: var(--cat-random); opacity: .8; }

@media (max-width: 479px) {
  .dice-stage { padding: var(--sp-4) var(--sp-2) var(--sp-3); }
  .dice-tray { --ds: 80px; }
  .dice-tray[data-size="m"] { --ds: 66px; }
  .dice-tray[data-size="s"] { --ds: 56px; }
  .dice-tray[data-size="xs"] { --ds: 48px; }
  .dice-tray--bg { --ds: 88px; }
  .dice-hist li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dh-time { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .die.is-rolling .die-body, .die.is-rolling::after, .dice-total-value.is-done, .dice-hist li.is-new, .dice-tray.is-double .die::before, .dice-actions .is-spin svg { animation: none; }
  .die-cube { transition: none !important; }
  .die-face::after { transition: none; }
}

/* ---------- 24. Solitaire (Klondike) ---------- */
/* Oyun alanı .sol-felt (masa) içinde .sol-board; kartlar mutlak konumlu, JS --cw/--ch/--rank/--strip verir.
   Kart: .sc > .sc-in (çevirme) > .sc-f (ön yüz) + .sc-b (arka yüz). Masa rengi .sol[data-table]. */
.sol { padding: var(--sp-3); }
@media (min-width: 640px) { .sol { padding: var(--sp-4); } }
.sol {
  --felt-1: #1f8150; --felt-2: #0f5130;
  --sc-face: #fdfdfb; --sc-ink: #18202f; --sc-red: #d0263c;
  --sc-r: max(4px, calc(var(--cw, 60px) * .085));
  --sol-glow: #ffd43b;
  user-select: none;
  -webkit-user-select: none;
}
.sol[data-table="blue"] { --felt-1: #2369ae; --felt-2: #133d6c; }
.sol[data-table="slate"] { --felt-1: #4a5568; --felt-2: #242b38; }
.sol[data-table="wine"] { --felt-1: #95304f; --felt-2: #551628; }
:root[data-theme="dark"] .sol { --sc-face: #eceef2; --felt-1: #186640; --felt-2: #0a3a22; }
:root[data-theme="dark"] .sol[data-table="blue"] { --felt-1: #1c5690; --felt-2: #0e2d52; }
:root[data-theme="dark"] .sol[data-table="slate"] { --felt-1: #3a4352; --felt-2: #1a1f29; }
:root[data-theme="dark"] .sol[data-table="wine"] { --felt-1: #7a2742; --felt-2: #40101e; }

/* Üst çubuk: skor/süre/hamle + düğmeler */
.sol-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.sol-stats { display: flex; gap: var(--sp-5); margin: 0; }
.sol-stat { display: grid; line-height: 1.15; }
.sol-stat dt { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.sol-stat dd { margin: 0; font-size: var(--fs-md); font-weight: 750; font-variant-numeric: tabular-nums; }
.sol-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.sol-actions .btn { min-height: 40px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.sol-actions .btn[aria-expanded="true"] { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 35%, transparent); color: var(--primary); }
.sol-actions .btn.is-confirm { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 45%, transparent); color: var(--warning); }
@media (max-width: 599px) {
  .sol-stats { flex: 1; justify-content: space-between; gap: var(--sp-3); }
  .sol-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .sol-actions .btn { flex-direction: column; gap: 2px; min-height: 54px; padding: 0 4px; font-size: var(--fs-xs); }
}

/* Masa */
.sol-stage { position: relative; }
.sol-felt {
  position: relative;
  padding: 8px;
  border-radius: var(--radius);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"),
    radial-gradient(140% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .28)),
    radial-gradient(130% 85% at 50% 0%, rgba(255, 255, 255, .13), transparent 60%),
    radial-gradient(120% 120% at 50% 30%, var(--felt-1), var(--felt-2));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22), inset 0 2px 22px rgba(0, 0, 0, .34), 0 1px 0 rgba(255, 255, 255, .06);
}
@media (min-width: 640px) { .sol-felt { padding: var(--sp-4); } }
.sol-board { position: relative; min-height: 320px; touch-action: manipulation; }
.sol:not(.is-ready) .sol-board { visibility: hidden; }

/* Yuvalar (boş deste, temel, sütun) */
.sol-slot {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: var(--cw); height: var(--ch);
  border: 2px solid rgba(255, 255, 255, .22);
  border-radius: var(--sc-r);
  background: rgba(0, 0, 0, .12);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .22);
  color: rgba(255, 255, 255, .3);
  font-size: calc(var(--cw) * .42);
  font-weight: 750;
  line-height: 1;
}
.sol-slot--t { border-style: dashed; border-color: rgba(255, 255, 255, .18); background: transparent; }
.sol-slot--k { cursor: pointer; }
.sol-slot--k svg { width: calc(var(--cw) * .44); height: calc(var(--cw) * .44); color: rgba(255, 255, 255, .7); }
.sol-slot--k.is-empty svg { opacity: .3; }
.sol-slot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sol-slot.is-over { border-color: #fff; background: rgba(255, 255, 255, .14); }

/* Kart */
.sc {
  position: absolute; left: 0; top: 0;
  width: var(--cw); height: var(--ch);
  border-radius: var(--sc-r);
  transition: transform .24s var(--ease);
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.sc-in { position: absolute; inset: 0; transform: perspective(700px) rotateY(180deg); transform-style: preserve-3d; transition: transform .3s var(--ease); }
.sc.is-up .sc-in { transform: perspective(700px) rotateY(0); }
.sc-f, .sc-b { position: absolute; inset: 0; border-radius: var(--sc-r); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.sc-f {
  background: linear-gradient(170deg, #ffffff 0%, var(--sc-face) 55%, color-mix(in srgb, var(--sc-face) 92%, #c9c2b0) 100%);
  color: var(--sc-ink);
  box-shadow:
    inset 0 0 0 1px rgba(15, 23, 41, .12),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 1px rgba(0, 0, 0, .22),
    0 2px 6px rgba(0, 0, 0, .18);
  fill: currentColor;
}
.sc-f.is-red { color: var(--sc-red); }
.sc-b {
  transform: rotateY(180deg);
  display: grid; place-items: center;
  color: rgba(255, 255, 255, .92);
  background:
    radial-gradient(90% 60% at 30% 15%, rgba(255, 255, 255, .22), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 6px),
    linear-gradient(155deg, #3f70f5, #2148c4 55%, #0e8f8e);
  box-shadow:
    inset 0 0 0 max(2px, calc(var(--cw) * .045)) #f7f8fb,
    inset 0 0 0 calc(max(2px, calc(var(--cw) * .045)) + 1px) rgba(15, 23, 41, .18),
    0 0 0 1px rgba(15, 23, 41, .28),
    0 1px 1px rgba(0, 0, 0, .1);
}
.sc-b::before { content: ""; position: absolute; inset: max(4px, calc(var(--cw) * .09)); border: 1px solid rgba(255, 255, 255, .35); border-radius: calc(var(--sc-r) * .6); }
.sc-b svg { width: calc(var(--cw) * .38); height: calc(var(--cw) * .38); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }

/* Köşe: sayı solda, renk sağda (üst üste binen kartlarda görünür) */
.sc-i {
  position: absolute; top: calc(var(--cw) * .05); left: calc(var(--cw) * .08); right: calc(var(--cw) * .07);
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--strip) - var(--cw) * .05);
  line-height: 1;
}
.sc-i b { font-size: var(--rank); font-weight: 750; letter-spacing: -.05em; font-variant-numeric: lining-nums; }
.sc-is { width: calc(var(--rank) * .8); height: calc(var(--rank) * .8); flex: none; }
.sc-i2 { display: none; }
.is-big .sc-i2 { display: flex; top: auto; bottom: calc(var(--cw) * .05); transform: rotate(180deg); }

/* Orta kısım */
.sc-big { position: absolute; left: 50%; bottom: 9%; width: calc(var(--cw) * .54); height: calc(var(--cw) * .54); transform: translateX(-50%); }
.is-big .sc-big { display: none; }
.is-big .sc-big.sc-ace { display: block; bottom: auto; top: 50%; width: calc(var(--cw) * .48); height: calc(var(--cw) * .48); transform: translate(-50%, -50%); }
.sc-pips { display: none; position: absolute; left: 33%; right: 33%; top: 29.5%; bottom: 29.5%; }
.is-big .sc-pips { display: block; }
.sc-pip { position: absolute; width: calc(var(--cw) * .165); height: calc(var(--cw) * .165); transform: translate(-50%, -50%); }
.sc-pip.is-flip { transform: translate(-50%, -50%) rotate(180deg); }
.sc-face {
  position: absolute; left: 50%; bottom: 8%;
  display: grid; place-items: center; align-content: center; gap: 2%;
  width: calc(var(--cw) * .66); height: calc(var(--cw) * .7);
  transform: translateX(-50%);
  border-radius: calc(var(--sc-r) * .8);
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(255, 255, 255, .7), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, #e3b341 16%, transparent), color-mix(in srgb, currentColor 12%, transparent));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #b8860b 55%, transparent),
    inset 0 0 0 3px rgba(255, 255, 255, .55),
    inset 0 0 0 4px color-mix(in srgb, currentColor 20%, transparent);
}
.sc-crown { width: calc(var(--cw) * .42); height: calc(var(--cw) * .42); filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .8)) drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
.sc-fs { width: calc(var(--cw) * .16); height: calc(var(--cw) * .16); }
.is-big .sc-face { top: 23%; bottom: 23%; left: 17%; right: 17%; width: auto; height: auto; transform: none; }
.is-big .sc-crown { width: calc(var(--cw) * .4); height: calc(var(--cw) * .4); }
.is-big .sc-fs { width: calc(var(--cw) * .2); height: calc(var(--cw) * .2); }

/* Durumlar */
.sc:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sc.is-drag { transition: none; cursor: grabbing; }
.sc.is-drag .sc-f { box-shadow: inset 0 0 0 1px rgba(15, 23, 41, .12), 0 4px 8px rgba(0, 0, 0, .22), 0 16px 32px rgba(0, 0, 0, .38); }
.sc.is-sel .sc-f { box-shadow: 0 0 0 3px var(--sol-glow), 0 6px 16px rgba(0, 0, 0, .35); }
.sc.is-over .sc-f { box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(0, 0, 0, .35); }
.sc.is-hint .sc-f, .sc.is-hint .sc-b, .sol-slot.is-hint { animation: sol-hint .9s ease-in-out 2; }
@keyframes sol-hint {
  0%, 100% { box-shadow: 0 0 0 1px rgba(15, 23, 41, .16), 0 1px 2px rgba(0, 0, 0, .28); }
  50% { box-shadow: 0 0 0 3px var(--sol-glow), 0 0 18px 4px color-mix(in srgb, var(--sol-glow) 70%, transparent); }
}
.sc.is-shake .sc-in { animation: sol-shake .36s ease; }
@keyframes sol-shake { 20% { translate: -5px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 3px 0; } }
.sol-instant .sc, .sol-instant .sc-in { transition: none !important; }

/* Alt satır: oyun no + otomatik bitir */
.sol-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); min-height: 40px; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.sol-auto { animation: sol-pulse 1.6s ease-in-out infinite; }
@keyframes sol-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 22%, transparent); } }
.sol-keys { margin: 0; }
@media (max-width: 599px) { .sol-keys { display: none; } }

/* Ayarlar */
.sol-opts { display: grid; gap: var(--sp-4); margin-top: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
@media (min-width: 720px) { .sol-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.sol-opts .tabs { margin: 0; }
.sol-opts .check { min-height: 40px; font-size: var(--fs-sm); }
.sol-swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sol-swatch {
  width: 40px; height: 40px; padding: 0;
  border: 2px solid var(--surface); border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, var(--a), var(--b));
  box-shadow: 0 0 0 1px var(--border-strong);
  cursor: pointer;
}
.sol-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--primary); }
.sol-swatch:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sol-opts-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }

/* Kazanma */
.sol-cascade { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 6000; pointer-events: none; }
.sol-win {
  position: absolute; inset: 0; z-index: 7000;
  display: grid; place-items: start center;
  padding: clamp(16px, 6vw, 56px) var(--sp-4) var(--sp-4);
  border-radius: var(--radius);
  background: rgba(6, 10, 18, .42);
}
.sol-win-card {
  width: min(100%, 380px);
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: sol-pop .35s var(--ease);
}
@keyframes sol-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.sol-win-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--sp-2); border-radius: 50%; background: color-mix(in srgb, var(--cat-games) 14%, transparent); color: var(--cat-games); }
.sol-win-icon svg { width: 28px; height: 28px; }
.sol-win h2 { margin: 0 0 var(--sp-4); font-size: var(--fs-lg); }
.sol-win-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.sol-win-grid > div { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.sol-win-grid dt { color: var(--muted); font-size: var(--fs-xs); }
.sol-win-grid dd { margin: 0; font-size: var(--fs-md); font-weight: 750; font-variant-numeric: tabular-nums; }
.sol-rec { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success); font-size: .6875rem; font-weight: 700; vertical-align: middle; }
.sol-win-stats { margin: 0 0 var(--sp-4); color: var(--muted); font-size: var(--fs-sm); }
.sol-win .btn-row { justify-content: center; margin-top: 0; }

/* Yan panel */
.sol-side dl { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.sol-side dt { color: var(--muted); }
.sol-side dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.sol-side .btn.is-confirm { color: var(--danger); }
@media (prefers-reduced-motion: reduce) {
  .sc, .sc-in { transition: none !important; }
  .sol-auto, .sol-win-card, .sc.is-hint .sc-f, .sc.is-hint .sc-b, .sol-slot.is-hint { animation: none; }
  .sc.is-hint .sc-f, .sc.is-hint .sc-b { box-shadow: 0 0 0 3px var(--sol-glow); }
}

/* ---------- 25. Sudoku ---------- */
/* Düzen: .sdk-wrap ızgarası (telefonda tek sütun, geniş ekranda tahta + panel). .sdk-left "display: contents"
   olduğundan çubuk, durum, tahta ve mesaj doğrudan ızgaraya yerleşir. Tahta 81 hücre; yazı boyutu cqi ile. */
.sdk { padding: var(--sp-3); }
@media (min-width: 640px) { .sdk { padding: var(--sp-5); } }
.sdk {
  --sdk-line: var(--border);
  --sdk-thick: color-mix(in srgb, var(--text) 62%, transparent);
  --sdk-peer: color-mix(in srgb, var(--primary) 7%, var(--surface));
  --sdk-same: color-mix(in srgb, var(--primary) 21%, var(--surface));
  --sdk-sel: color-mix(in srgb, var(--primary) 32%, var(--surface));
  --sdk-unit: color-mix(in srgb, var(--warning) 15%, var(--surface));
}
:root[data-theme="dark"] .sdk { --sdk-thick: color-mix(in srgb, var(--text) 42%, transparent); --sdk-peer: color-mix(in srgb, var(--primary) 9%, var(--surface)); }

.sdk-wrap { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "status" "stage" "msg" "panel"; }
.sdk-left { display: contents; }
.sdk-bar { grid-area: bar; }
.sdk-status { grid-area: status; }
.sdk-stage { grid-area: stage; }
.sdk-msg { grid-area: msg; }
.sdk-panel { grid-area: panel; }
@media (min-width: 900px) {
  .sdk-wrap {
    grid-template-columns: minmax(0, 540px) minmax(250px, 300px);
    grid-template-areas: "bar bar" "status ." "stage panel" "msg panel";
    justify-content: center;
    column-gap: var(--sp-6);
  }
  .sdk-panel { align-self: start; }
}

/* Üst çubuk */
.sdk-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.sdk-info { display: grid; gap: 2px; min-width: 0; line-height: 1.2; }
.sdk-level { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-md); font-weight: 750; }
.sdk-level::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sdk-lv, var(--primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sdk-lv, var(--primary)) 20%, transparent); }
.sdk-level[data-diff="0"], .sdk-dots[data-diff="0"] { --sdk-lv: var(--success); }
.sdk-level[data-diff="1"], .sdk-dots[data-diff="1"] { --sdk-lv: var(--primary); }
.sdk-level[data-diff="2"], .sdk-dots[data-diff="2"] { --sdk-lv: var(--warning); }
.sdk-level[data-diff="3"], .sdk-dots[data-diff="3"] { --sdk-lv: var(--danger); }
.sdk-id { overflow: hidden; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.sdk-actions { display: flex; flex: none; gap: 6px; }
.sdk-actions .btn { min-height: 42px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.sdk-actions .btn[aria-expanded="true"] { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 35%, transparent); color: var(--primary); }
@media (max-width: 419px) {
  .sdk-actions .btn { width: 42px; padding: 0; }
  .sdk-actions .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Yeni oyun menüsü */
.sdk-menu-wrap { position: relative; }
.sdk-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  display: grid; gap: 2px;
  width: max-content; min-width: 260px; max-width: calc(100vw - 32px);
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: sdk-menu .16s var(--ease);
}
@keyframes sdk-menu { from { opacity: 0; transform: translateY(-4px); } }
.sdk-menu hr { margin: 4px 6px; border: 0; border-top: 1px solid var(--border); }
.sdk-mi {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 46px; padding: 0 var(--sp-3);
  border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text);
  font: inherit; font-weight: 600; text-align: left;
  cursor: pointer;
}
.sdk-mi:hover, .sdk-mi:focus-visible { background: var(--bg-soft); }
.sdk-mi:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sdk-mi svg { flex: none; width: 20px; height: 20px; color: var(--muted); }
.sdk-mi-t { flex: 1; }
.sdk-mi small { color: var(--muted); font-size: var(--fs-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
.sdk-dots { display: inline-flex; flex: none; gap: 3px; width: 33px; }
.sdk-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.sdk-dots[data-diff="0"] i:nth-child(-n+1), .sdk-dots[data-diff="1"] i:nth-child(-n+2),
.sdk-dots[data-diff="2"] i:nth-child(-n+3), .sdk-dots[data-diff="3"] i { background: var(--sdk-lv); }

/* Durum satırı: hata + süre */
.sdk-status { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 40px; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.sdk-status b { color: var(--text); font-weight: 750; font-variant-numeric: tabular-nums; }
.sdk-clock { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.sdk-clock b { font-size: var(--fs-md); }
.sdk-pause-btn { width: 36px; min-width: 36px; height: 36px; min-height: 36px; border: 0; background: none; color: var(--text-soft); }
.sdk-pause-btn svg { width: 18px; height: 18px; }

/* Tahta */
.sdk-stage { position: relative; }
.sdk-board {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--sdk-thick);
  border-radius: var(--radius);
  background: var(--surface);
  container-type: inline-size;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.sdk-row { display: contents; }
.sdk-c {
  position: relative;
  display: grid; place-items: center;
  min-width: 0;
  border-right: 1px solid var(--sdk-line);
  border-bottom: 1px solid var(--sdk-line);
  background: var(--surface);
  color: var(--primary);
  font-size: clamp(1.1rem, 5.6vw, 2.1rem);
  font-size: 6.3cqi;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  outline: none;
  transition: background-color .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.sdk-c[data-c="8"] { border-right: 0; }
.sdk-c[data-r="8"] { border-bottom: 0; }
.sdk-c.bx-r { border-right: 2px solid var(--sdk-thick); }
.sdk-c.bx-b { border-bottom: 2px solid var(--sdk-thick); }
.sdk-c.is-given { color: var(--text); font-weight: 650; }
.sdk-c.is-hinted { color: var(--accent); font-weight: 650; }
.sdk-c.is-peer { background: var(--sdk-peer); }
.sdk-c.is-unit { background: var(--sdk-unit); }
.sdk-c.is-same { background: var(--sdk-same); }
.sdk-c.is-sel { background: var(--sdk-sel); }
.sdk-c.is-conflict { color: var(--danger); }
.sdk-c.is-wrong { color: var(--danger); }
.sdk-c.is-wrong:not(.is-sel) { background: var(--danger-soft); }
.sdk-c:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.sdk-v { display: block; }

/* Notlar: hücrede 3 × 3 küçük rakam */
.sdk-n {
  position: absolute; inset: 5%;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  color: var(--muted);
  font-size: clamp(.55rem, 2.3vw, .9rem);
  font-size: 2.45cqi;
  font-weight: 650;
}
.sdk-n i { display: grid; place-items: center; font-style: normal; }
.sdk-n i.is-hl { margin: 6%; border-radius: 50%; background: var(--primary); color: var(--primary-text); }

/* Animasyonlar */
.sdk-c.is-pop .sdk-v { animation: sdk-pop .32s var(--ease) var(--dl, 0ms) both; }
@keyframes sdk-pop { from { opacity: 0; transform: scale(.35); } }
.sdk-c.is-shake .sdk-v { animation: sdk-shake .36s ease; }
@keyframes sdk-shake { 20% { transform: translateX(-12%); } 40% { transform: translateX(12%); } 60% { transform: translateX(-7%); } 80% { transform: translateX(7%); } }
.sdk-c.is-flash { animation: sdk-flash .75s ease var(--dl, 0ms); }
@keyframes sdk-flash { 35% { background-color: color-mix(in srgb, var(--primary) 34%, var(--surface)); } }
.sdk-c.is-hint { animation: sdk-hint .9s ease-in-out 2; }
@keyframes sdk-hint { 50% { box-shadow: inset 0 0 0 3px var(--warning); } }
.sdk-c.is-wave { animation: sdk-wave 1.1s var(--ease) var(--dl, 0ms) both; }
@keyframes sdk-wave {
  30% { background-color: color-mix(in srgb, var(--success) 30%, var(--surface)); transform: scale(.88); border-radius: 22%; }
  60% { transform: scale(1.04); }
}

/* Katmanlar: hazırlanıyor, duraklatıldı, çözüldü */
.sdk-busy, .sdk-pause, .sdk-win { position: absolute; inset: 0; z-index: 20; border-radius: var(--radius); }
.sdk-busy { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.sdk-spin { width: 34px; height: 34px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: sdk-spin .8s linear infinite; }
@keyframes sdk-spin { to { transform: rotate(360deg); } }
.sdk.is-paused .sdk-c > * { visibility: hidden; }
.sdk.is-paused .sdk-c { background: var(--surface); }
.sdk-pause { display: grid; place-items: center; padding: var(--sp-4); background: color-mix(in srgb, var(--surface) 70%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sdk-pause-card { max-width: 300px; text-align: center; }
.sdk-pause-card p { margin: 0 0 var(--sp-4); color: var(--muted); font-size: var(--fs-sm); }
.sdk-pause-card .sdk-pause-t { margin-bottom: var(--sp-1); color: var(--text); font-size: var(--fs-lg); font-weight: 750; }
.sdk-win { display: grid; place-items: center; padding: var(--sp-3); background: color-mix(in srgb, var(--bg) 45%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sdk-win-card {
  width: min(100%, 360px);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: sdk-win .4s var(--ease);
}
@keyframes sdk-win { from { opacity: 0; transform: translateY(12px) scale(.95); } }
.sdk-win-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--sp-2); border-radius: 50%; background: color-mix(in srgb, var(--cat-games) 14%, transparent); color: var(--cat-games); }
.sdk-win-icon svg { width: 28px; height: 28px; }
.sdk-win h2 { margin: 0; font-size: var(--fs-lg); }
.sdk-win-sub { margin: var(--sp-1) 0 var(--sp-4); color: var(--muted); font-size: var(--fs-sm); }
.sdk-win-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.sdk-win-grid > div { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.sdk-win-grid dt { color: var(--muted); font-size: var(--fs-xs); }
.sdk-win-grid dd { margin: 0; font-size: var(--fs-md); font-weight: 750; font-variant-numeric: tabular-nums; }
.sdk-rec { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success); font-size: .6875rem; font-weight: 700; vertical-align: middle; }
.sdk-win-stats { margin: 0 0 var(--sp-4); color: var(--muted); font-size: var(--fs-sm); }
.sdk-win .btn-row { justify-content: center; margin-top: 0; }
@media (max-width: 599px) {
  .sdk-win { padding: var(--sp-2); }
  .sdk-win-card { padding: var(--sp-4) var(--sp-3) var(--sp-3); }
  .sdk-win-icon { width: 44px; height: 44px; margin-bottom: var(--sp-1); }
  .sdk-win-icon svg { width: 22px; height: 22px; }
  .sdk-win h2 { font-size: var(--fs-md); }
  .sdk-win-sub { margin-bottom: var(--sp-3); font-size: var(--fs-xs); }
  .sdk-win-grid > div { padding: 6px var(--sp-2); }
  .sdk-win-grid dd { font-size: var(--fs-base); }
  .sdk-win-stats { margin-bottom: var(--sp-3); font-size: var(--fs-xs); }
  .sdk-win .btn { min-height: 42px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
}

/* İpucu / bilgi mesajı */
.sdk-msg {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  padding: 10px 6px 10px 12px;
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.45;
  animation: sdk-menu .2s var(--ease);
}
.sdk-msg[hidden] { display: none; }
.sdk-msg > svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--primary); }
.sdk-msg[data-kind="warn"] { background: var(--warning-soft); }
.sdk-msg[data-kind="warn"] > svg { color: var(--warning); }
.sdk-msg span { flex: 1; padding-top: 1px; }
.sdk-msg-x { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin: -4px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.sdk-msg-x:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }

/* Panel: araçlar + sayı tuşları */
.sdk-panel { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
@media (min-width: 900px) { .sdk-panel { gap: var(--sp-4); margin-top: 0; } }
.sdk-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.sdk-tool {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 60px; padding: 4px;
  border: 0; border-radius: var(--radius);
  background: none; color: var(--text-soft);
  font: inherit; font-size: var(--fs-xs); font-weight: 650;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sdk-tool svg { width: 24px; height: 24px; }
.sdk-tool:hover:not(:disabled) { background: var(--bg-soft); color: var(--text); }
.sdk-tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sdk-tool:disabled { opacity: .4; cursor: default; }
.sdk-tool[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); }
.sdk-pill, .sdk-badge {
  position: absolute; top: 5px; left: calc(50% + 8px);
  min-width: 20px; padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-soft); color: var(--muted);
  box-shadow: 0 0 0 2px var(--surface);
  font-size: .6875rem; font-style: normal; font-weight: 750; line-height: 1.35;
}
.sdk-tool[aria-pressed="true"] .sdk-pill { background: var(--primary); color: var(--primary-text); }
.sdk-badge { background: var(--accent); color: #fff; }
.sdk-badge[hidden] { display: none; }

.sdk-pad { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; }
.sdk-key {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0; height: 58px; padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--primary);
  font: inherit;
  cursor: pointer;
  transition: transform .08s ease, background-color .12s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.sdk-key b { font-size: 1.625rem; font-weight: 550; line-height: 1; }
.sdk-key small { margin-top: 3px; color: var(--muted); font-size: .6875rem; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.sdk-key:hover { background: var(--primary-soft); }
.sdk-key:active { transform: scale(.94); }
.sdk-key:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sdk-key.is-active { border-color: color-mix(in srgb, var(--primary) 55%, transparent); background: var(--primary-soft); }
.sdk-key.is-done { opacity: .28; }
.sdk.is-notes .sdk-key { border-style: dashed; border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.sdk.is-notes .sdk-key b { font-size: 1.25rem; color: var(--text-soft); }
@media (min-width: 900px) {
  .sdk-pad { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .sdk-key { height: 76px; border-radius: var(--radius); }
  .sdk-key b { font-size: 2.125rem; }
  .sdk.is-notes .sdk-key b { font-size: 1.5rem; }
  .sdk-key small { position: absolute; top: 8px; right: 10px; margin: 0; }
}
.sdk-keys { display: none; margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.9; }
@media (min-width: 900px) and (hover: hover) { .sdk-keys { display: block; } }

/* Ayarlar */
.sdk-opts { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
@media (min-width: 720px) { .sdk-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.sdk-opts .check { min-height: 40px; font-size: var(--fs-sm); }
.sdk-opts-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-1) 0; }

/* Yan panel */
.sdk-st-table th[scope="row"] { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; white-space: nowrap; }
.sdk-st-table .sdk-dots { width: 27px; gap: 1px; }
.sdk-side dl { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-3); margin: var(--sp-3) 0; font-size: var(--fs-sm); }
.sdk-side dt { color: var(--muted); }
.sdk-side dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.sdk-side .btn.is-confirm { color: var(--danger); }
@media (prefers-reduced-motion: reduce) {
  .sdk-c, .sdk-key { transition: none; }
  .sdk-c.is-pop .sdk-v, .sdk-c.is-flash, .sdk-c.is-wave, .sdk-c.is-shake .sdk-v, .sdk-menu, .sdk-msg, .sdk-win-card { animation: none; }
}

/* ---------- 26. Mayın Tarlası ---------- */
/* Tahta: .ms-board ızgarası, hücre boyutu JS'ten (--ms-cs, --ms-gap, --ms-pad). Kapalı kareler kabartmalı
   (gradyan + üst ışık + alt gölge), açık kareler gömük. Görünüm .ms[data-skin] ile: grass, ocean, classic. */
.ms { padding: var(--sp-3); }
@media (min-width: 640px) { .ms { padding: var(--sp-5); } }
.ms {
  --ms-r: .2;
  --ms-h1: #86d65a; --ms-h2: #5cb338; --ms-h1b: #7ccd51; --ms-h2b: #54a932;
  --ms-hi: rgba(255, 255, 255, .55); --ms-lo: rgba(26, 77, 10, .38);
  --ms-o1: #f4ead8; --ms-o2: #ede0c8; --ms-tray: #d6c4a2; --ms-edge: #c3ad86;
  --ms-q: #ffffff;
  --ms-n1: #2563eb; --ms-n2: #15803d; --ms-n3: #dc2626; --ms-n4: #6d28d9;
  --ms-n5: #b45309; --ms-n6: #0e7490; --ms-n7: #1f2937; --ms-n8: #6b7280;
}
.ms[data-skin="ocean"] {
  --ms-h1: #74a9ff; --ms-h2: #3f78e6; --ms-h1b: #6aa0fb; --ms-h2b: #386fdc;
  --ms-hi: rgba(255, 255, 255, .5); --ms-lo: rgba(10, 35, 110, .4);
  --ms-o1: #eff4fb; --ms-o2: #e5edf8; --ms-tray: #c9d6ea; --ms-edge: #b3c4de;
}
.ms[data-skin="classic"] {
  --ms-r: 0;
  --ms-h1: #d4d4d4; --ms-h2: #c4c4c4; --ms-h1b: #d4d4d4; --ms-h2b: #c4c4c4;
  --ms-hi: #ffffff; --ms-lo: #7b7b7b;
  --ms-o1: #c6c6c6; --ms-o2: #c6c6c6; --ms-tray: #8c8c8c; --ms-edge: #7b7b7b;
  --ms-q: #1f2937;
  --ms-n1: #0000d6; --ms-n2: #007b00; --ms-n3: #e00000; --ms-n4: #00007b;
  --ms-n5: #7b0000; --ms-n6: #007b7b; --ms-n7: #000000; --ms-n8: #7b7b7b;
}
:root[data-theme="dark"] .ms {
  --ms-h1: #5fb23f; --ms-h2: #3e8a28; --ms-h1b: #58a93a; --ms-h2b: #398125;
  --ms-hi: rgba(255, 255, 255, .28); --ms-lo: rgba(0, 0, 0, .45);
  --ms-o1: #252b22; --ms-o2: #21271e; --ms-tray: #161a14; --ms-edge: #2b3327;
  --ms-n1: #7aa7ff; --ms-n2: #5ad17e; --ms-n3: #ff7a7a; --ms-n4: #c39bff;
  --ms-n5: #ffb44d; --ms-n6: #4fd6e6; --ms-n7: #e5e7eb; --ms-n8: #a3aab8;
}
:root[data-theme="dark"] .ms[data-skin="ocean"] {
  --ms-h1: #5689ea; --ms-h2: #3462c4; --ms-h1b: #4f80e0; --ms-h2b: #2f5aba;
  --ms-o1: #1c2435; --ms-o2: #19202f; --ms-tray: #10151f; --ms-edge: #26304a;
}
:root[data-theme="dark"] .ms[data-skin="classic"] {
  --ms-h1: #6b717c; --ms-h2: #5d636d; --ms-h1b: #6b717c; --ms-h2b: #5d636d;
  --ms-hi: #8c929d; --ms-lo: #30343b;
  --ms-o1: #3a3e46; --ms-o2: #3a3e46; --ms-tray: #24272d; --ms-edge: #24272d;
  --ms-q: #f1f5f9;
  --ms-n1: #7aa7ff; --ms-n2: #5ad17e; --ms-n3: #ff7a7a; --ms-n4: #a5b4fc;
  --ms-n5: #ffb44d; --ms-n6: #4fd6e6; --ms-n7: #f1f5f9; --ms-n8: #a3aab8;
}

/* Üst çubuk ve menü */
.ms-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.ms-info { display: grid; gap: 2px; min-width: 0; line-height: 1.2; }
.ms-level { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-md); font-weight: 750; }
.ms-level::before, .ms-lvdot { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ms-lv, var(--primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-lv, var(--primary)) 20%, transparent); }
.ms-level[data-lvl="b"], .ms-lvdot[data-lvl="b"] { --ms-lv: var(--success); }
.ms-level[data-lvl="i"], .ms-lvdot[data-lvl="i"] { --ms-lv: var(--primary); }
.ms-level[data-lvl="e"], .ms-lvdot[data-lvl="e"] { --ms-lv: var(--danger); }
.ms-level[data-lvl="c"], .ms-lvdot[data-lvl="c"] { --ms-lv: var(--cat-text); }
.ms-size { overflow: hidden; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.ms-actions { display: flex; flex: none; gap: 6px; }
.ms-actions .btn { min-height: 42px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.ms-actions .btn[aria-expanded="true"] { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 35%, transparent); color: var(--primary); }
@media (max-width: 419px) {
  .ms-actions .btn { width: 42px; padding: 0; }
  .ms-actions .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.ms-menu-wrap { position: relative; }
.ms-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  display: grid; gap: 2px;
  width: max-content; min-width: 250px; max-width: calc(100vw - 32px);
  padding: 6px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-lg);
  animation: ms-menu .16s var(--ease);
}
@keyframes ms-menu { from { opacity: 0; transform: translateY(-4px); } }
.ms-menu hr { margin: 4px 6px; border: 0; border-top: 1px solid var(--border); }
.ms-mi {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 46px; padding: 0 var(--sp-3);
  border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text);
  font: inherit; font-weight: 600; text-align: left;
  cursor: pointer;
}
.ms-mi:hover, .ms-mi:focus-visible { background: var(--bg-soft); }
.ms-mi:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ms-mi svg { flex: none; width: 20px; height: 20px; color: var(--muted); }
.ms-mi .ms-lvdot { margin: 0 3px; }
.ms-mi-t { flex: 1; }
.ms-mi small { color: var(--muted); font-size: var(--fs-xs); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Özel tahta ve ayarlar */
.ms-custom, .ms-opts { margin-bottom: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); animation: ms-menu .2s var(--ease); }
.ms-custom[hidden], .ms-opts[hidden] { display: none; }
.ms-cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.ms-cgrid .field { margin: 0; }
.ms-custom .input { min-width: 0; font-variant-numeric: tabular-nums; }
.ms-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-3) 0 0; }
.ms-presets .btn { min-height: 34px; padding: 0 12px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.ms-cnote { margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ms-cnote[data-kind="warn"] { color: var(--danger); }
.ms-custom .btn-row { margin-top: var(--sp-3); }
.ms-opts { display: grid; gap: var(--sp-4); margin: var(--sp-4) 0 0; }
@media (min-width: 720px) { .ms-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.ms-opts .check { min-height: 40px; font-size: var(--fs-sm); }
.ms-skins { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ms-skin {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 12px 0 6px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer;
}
.ms-skin i { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 28px; height: 28px; padding: 3px; border-radius: 8px; background: var(--t); }
.ms-skin i::before, .ms-skin i::after { content: ""; border-radius: 3px; background: linear-gradient(180deg, var(--a), var(--b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .22); }
.ms-skin i::after { background: var(--o); box-shadow: none; }
.ms-skin[data-skin="grass"] i { --t: #d6c4a2; --a: #86d65a; --b: #5cb338; --o: #f4ead8; }
.ms-skin[data-skin="ocean"] i { --t: #c9d6ea; --a: #74a9ff; --b: #3f78e6; --o: #eff4fb; }
.ms-skin[data-skin="classic"] i { --t: #8c8c8c; --a: #d4d4d4; --b: #c4c4c4; --o: #c6c6c6; border-radius: 2px; }
.ms-skin[data-skin="classic"] i::before, .ms-skin[data-skin="classic"] i::after { border-radius: 0; }
.ms-skin[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); }
.ms-skin:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Durum: mayın sayacı, yüz, süre */
.ms-status { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 4vw, 28px); margin-bottom: var(--sp-3); }
.ms-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 96px; height: 46px; padding: 0 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #1b2130, #0f131c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 2px 6px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .6);
  color: #ff5a4a;
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; letter-spacing: .06em; line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(255, 70, 50, .55);
}
:root[data-theme="dark"] .ms-pill { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 2px 6px rgba(0, 0, 0, .5); }
.ms-pill svg { flex: none; width: 20px; height: 20px; }
.ms-pill .ms-ic-flag { width: 22px; height: 22px; filter: drop-shadow(0 0 4px rgba(255, 70, 50, .45)); }
.ms-pill .i-timer { color: #8b93a7; }
.ms-face {
  position: relative;
  display: grid; place-items: center; flex: none;
  width: 56px; height: 56px; padding: 0;
  border: 0; border-radius: 16px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--border), inset 0 -3px 0 var(--border), var(--shadow);
  cursor: pointer;
  transition: transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.ms-face:hover { box-shadow: inset 0 0 0 1px var(--border-strong), inset 0 -3px 0 var(--border-strong), var(--shadow); }
.ms-face:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-sm); }
.ms-face:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ms-face svg { width: 40px; height: 40px; overflow: visible; }
.ms-face .f { display: none; }
.ms-face[data-face="idle"] .f-idle, .ms-face[data-face="press"] .f-press,
.ms-face[data-face="dead"] .f-dead, .ms-face[data-face="win"] .f-win { display: inline; }
.ms-face[data-face="dead"] svg { animation: ms-face-dead .5s ease; }
.ms-face[data-face="win"] svg { animation: ms-face-win .6s var(--ease); }
.ms-face.is-confirm { box-shadow: inset 0 0 0 2px var(--warning), var(--shadow); }
@keyframes ms-face-dead { 20% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 70% { transform: rotate(-5deg); } }
@keyframes ms-face-win { 40% { transform: translateY(-6px) scale(1.12); } }

/* Sahne ve tahta */
.ms-stage { position: relative; }
.ms-scroll { overflow: auto; margin: -8px -12px 0; padding: 8px 12px 22px; overscroll-behavior-x: contain; scrollbar-width: thin; }
.ms-board {
  display: grid;
  gap: var(--ms-gap, 2px);
  width: max-content;
  margin: 0 auto;
  padding: var(--ms-pad, 6px);
  border-radius: calc(var(--ms-pad, 6px) + var(--ms-cs, 32px) * var(--ms-r) * .9);
  background: var(--ms-tray);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .2), 0 0 0 1px var(--ms-edge), var(--shadow-lg);
  outline: none;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .2s ease;
}
.ms[data-skin="classic"] .ms-board { box-shadow: inset 3px 3px 0 #7b7b7b, inset -3px -3px 0 #fff, 0 0 0 1px var(--ms-edge), var(--shadow); }
:root[data-theme="dark"] .ms[data-skin="classic"] .ms-board { box-shadow: inset 3px 3px 0 #1b1d22, inset -3px -3px 0 #6b717c, var(--shadow); }
.ms.is-flagmode .ms-board { box-shadow: inset 0 2px 8px rgba(0, 0, 0, .2), 0 0 0 1px var(--ms-edge), 0 0 0 4px color-mix(in srgb, var(--danger) 55%, transparent), var(--shadow-lg); }
.ms-row { display: contents; }

/* Kare */
.ms-c {
  --cap: linear-gradient(180deg, var(--ms-h1), var(--ms-h2));
  position: relative;
  display: grid; place-items: center;
  width: var(--ms-cs); height: var(--ms-cs);
  border-radius: calc(var(--ms-cs) * var(--ms-r));
  background: var(--cap);
  box-shadow: inset 0 calc(var(--ms-cs) * .06) 0 var(--ms-hi), inset 0 calc(var(--ms-cs) * -.1) 0 var(--ms-lo), 0 1px 2px rgba(0, 0, 0, .22);
  cursor: pointer;
  line-height: 1;
}
.ms-c.is-alt { --cap: linear-gradient(180deg, var(--ms-h1b), var(--ms-h2b)); }
.ms[data-skin="classic"] .ms-c { box-shadow: inset calc(var(--ms-cs) * .1) calc(var(--ms-cs) * .1) 0 var(--ms-hi), inset calc(var(--ms-cs) * -.1) calc(var(--ms-cs) * -.1) 0 var(--ms-lo); }
@media (hover: hover) {
  .ms-c:not(.is-open):hover { filter: brightness(1.08) saturate(1.06); }
  .ms.is-flagmode .ms-c:not(.is-open):hover { filter: brightness(1.05); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--danger) 70%, transparent), inset 0 calc(var(--ms-cs) * -.1) 0 var(--ms-lo); }
}
.ms-c.is-press {
  filter: brightness(.9);
  box-shadow: inset 0 calc(var(--ms-cs) * .08) calc(var(--ms-cs) * .12) rgba(0, 0, 0, .3);
  transform: translateY(1px);
}
.ms-c.is-open {
  background: var(--ms-o1);
  border-radius: calc(var(--ms-cs) * var(--ms-r) * .55);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
  cursor: default;
}
.ms-c.is-open.is-alt { background: var(--ms-o2); }
.ms[data-skin="classic"] .ms-c.is-open { box-shadow: inset 1px 1px 0 var(--ms-tray); }
.ms-c.is-open:has(b) { cursor: pointer; }
.ms-c b { font-size: calc(var(--ms-cs) * .64); font-weight: 850; letter-spacing: -.02em; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
:root[data-theme="dark"] .ms-c b { text-shadow: 0 0 calc(var(--ms-cs) * .25) currentColor; text-shadow: 0 0 calc(var(--ms-cs) * .3) color-mix(in srgb, currentColor 35%, transparent); }
.ms-c.n1 { color: var(--ms-n1); } .ms-c.n2 { color: var(--ms-n2); } .ms-c.n3 { color: var(--ms-n3); } .ms-c.n4 { color: var(--ms-n4); }
.ms-c.n5 { color: var(--ms-n5); } .ms-c.n6 { color: var(--ms-n6); } .ms-c.n7 { color: var(--ms-n7); } .ms-c.n8 { color: var(--ms-n8); }
.ms-c i { color: var(--ms-q); font-size: calc(var(--ms-cs) * .6); font-style: normal; font-weight: 850; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.ms-ic { display: block; width: calc(var(--ms-cs) * .74); height: calc(var(--ms-cs) * .74); overflow: visible; }
.ms-ic-flag { transform-origin: 35% 90%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.ms-ic-mine { width: calc(var(--ms-cs) * .8); height: calc(var(--ms-cs) * .8); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.ms-ic-x { position: absolute; left: 14%; top: 14%; width: 72%; height: 72%; color: #e11d48; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .8)); }
.ms-c.is-mine { background: color-mix(in srgb, var(--danger) 14%, var(--ms-o1)); }
.ms-c.is-boom { background: radial-gradient(circle at 50% 45%, #ffd36b 0%, #ff6a3d 38%, #d7261e 75%); box-shadow: 0 0 calc(var(--ms-cs) * .5) rgba(255, 80, 40, .55); z-index: 2; }
.ms-c.is-wrong .ms-ic-flag { opacity: .55; }
.ms.is-lost .ms-c:not(.is-open):not(.is-flag):not(.is-wrong) { filter: saturate(.55) brightness(.96); }
.ms-board.is-small .ms-c b { text-shadow: none; font-weight: 800; }
.ms-board:focus-visible .ms-c.is-cur { z-index: 3; outline: 3px solid var(--focus); outline-offset: 1px; }

/* Animasyonlar */
.ms-c.is-reveal::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: calc(var(--ms-cs) * var(--ms-r));
  background: var(--cap);
  box-shadow: inset 0 calc(var(--ms-cs) * .06) 0 var(--ms-hi), inset 0 calc(var(--ms-cs) * -.1) 0 var(--ms-lo);
  pointer-events: none;
  animation: ms-cap .38s cubic-bezier(.3, .1, .6, 1) var(--dl, 0ms) both;
}
.ms-c.is-reveal > * { animation: ms-in .3s var(--ease) calc(var(--dl, 0ms) + 80ms) both; }
@keyframes ms-cap {
  0% { transform: none; opacity: 1; }
  35% { transform: translateY(-12%) scale(1.06); opacity: 1; }
  100% { transform: translateY(18%) scale(.35) rotate(18deg); opacity: 0; }
}
@keyframes ms-in { from { opacity: 0; transform: scale(.4); } }
.ms-c.is-plant .ms-ic-flag { animation: ms-plant .42s cubic-bezier(.3, 1.4, .5, 1) var(--dl, 0ms) both; }
@keyframes ms-plant { 0% { opacity: 0; transform: translateY(-70%) scale(.5); } 60% { opacity: 1; transform: translateY(4%) scale(1.06, .92); } 100% { transform: none; } }
.ms-c.is-qpop i { animation: ms-in .25s var(--ease); }
.ms-c.is-unplant { animation: ms-bump .22s ease; }
@keyframes ms-bump { 50% { transform: scale(.88); } }
.ms-c.is-nudge { animation: ms-nudge .38s ease; }
@keyframes ms-nudge { 30% { transform: scale(.86); filter: brightness(1.25); } }
.ms-c.is-burst { animation: ms-burst .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.ms-c.is-burst .ms-ic { animation: ms-in .35s var(--ease) .05s both; }
@keyframes ms-burst { 0% { transform: scale(1.5); filter: brightness(2); } 100% { transform: none; } }
.ms-c.is-mine:not(.is-boom).is-reveal > * { animation-name: ms-mine-in; animation-duration: .4s; }
@keyframes ms-mine-in { 0% { opacity: 0; transform: scale(.2) rotate(-60deg); } 70% { opacity: 1; transform: scale(1.15); } }
.ms-c.is-wave { animation: ms-wave .9s var(--ease) var(--dl, 0ms) both; }
@keyframes ms-wave { 35% { transform: scale(.82); background-color: color-mix(in srgb, var(--success) 40%, var(--ms-o1)); } 70% { transform: scale(1.04); } }
.ms-c.is-hint::before {
  content: ""; position: absolute; inset: -4px; z-index: 4;
  border: 3px solid #f5b400; border-radius: calc(var(--ms-cs) * var(--ms-r) + 4px);
  box-shadow: 0 0 12px rgba(245, 180, 0, .7);
  pointer-events: none;
  animation: ms-ring .8s ease-in-out 3 both;
}
@keyframes ms-ring { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .6; } }
.ms-board.is-deal { animation: ms-deal .45s var(--ease); }
@keyframes ms-deal { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.ms-board.is-shake { animation: ms-shake .5s ease; }
@keyframes ms-shake { 15% { transform: translate(-6px, 2px); } 30% { transform: translate(5px, -3px); } 45% { transform: translate(-4px, 2px); } 60% { transform: translate(3px, -1px); } 80% { transform: translate(-1px, 1px); } }

/* Patlama efekti */
.ms-blast { position: absolute; z-index: 16; width: 0; height: 0; pointer-events: none; }
.ms-blast > span { position: absolute; border-radius: 50%; }
.ms-flash {
  left: calc(var(--s) * -1.6); top: calc(var(--s) * -1.6); width: calc(var(--s) * 3.2); height: calc(var(--s) * 3.2);
  background: radial-gradient(circle, rgba(255, 255, 225, .95) 0%, rgba(255, 190, 60, .8) 28%, rgba(255, 80, 30, .35) 52%, rgba(255, 60, 30, 0) 70%);
  animation: ms-flash .55s ease-out both;
}
@keyframes ms-flash { 0% { transform: scale(.2); opacity: 1; } 40% { opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
.ms-ring { left: calc(var(--s) * -.5); top: calc(var(--s) * -.5); width: var(--s); height: var(--s); border: 4px solid rgba(255, 110, 40, .9); animation: ms-ring-out .7s ease-out both; }
.ms-ring2 { border-color: rgba(255, 210, 90, .8); animation-delay: .12s; }
@keyframes ms-ring-out { from { transform: scale(.3); opacity: 1; } to { transform: scale(4.5); opacity: 0; border-width: 1px; } }
.ms-blast i {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6c2, #ffae2e 55%, #ff5a1f);
  box-shadow: 0 0 8px #ff7a00;
  transform: rotate(var(--a));
  animation: ms-spark .7s cubic-bezier(.1, .75, .3, 1) both;
}
@keyframes ms-spark { to { transform: rotate(var(--a)) translateX(calc(var(--s) * var(--d))) scale(var(--z)); opacity: 0; } }
.ms-fx { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
.ms-fx[hidden] { display: none; }

/* Katmanlar */
.ms-busy, .ms-pause { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); border-radius: var(--radius); }
.ms-busy { background: color-mix(in srgb, var(--surface) 78%, transparent); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.ms-busy[hidden], .ms-pause[hidden], .ms-end[hidden] { display: none; }
.ms-spin { width: 34px; height: 34px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: ms-spin .8s linear infinite; }
@keyframes ms-spin { to { transform: rotate(360deg); } }
.ms.is-paused .ms-c > * { visibility: hidden; }
.ms.is-paused .ms-board { filter: blur(4px) saturate(.6); }
.ms-pause { padding: var(--sp-4); background: color-mix(in srgb, var(--surface) 45%, transparent); text-align: center; }
.ms-pause p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.ms-pause .ms-pause-t { color: var(--text); font-size: var(--fs-lg); font-weight: 750; }
.ms-end { position: absolute; inset: 0; z-index: 22; display: grid; place-items: end center; padding: var(--sp-3); pointer-events: none; }
.ms-end.is-win { place-items: center; background: color-mix(in srgb, var(--bg) 35%, transparent); pointer-events: auto; }
.ms-end-card {
  position: relative;
  width: min(100%, 380px);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-lg);
  text-align: center;
  pointer-events: auto;
  animation: ms-card .42s var(--ease);
}
@keyframes ms-card { from { opacity: 0; transform: translateY(16px) scale(.95); } }
.ms-end-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--sp-2); border-radius: 50%; background: color-mix(in srgb, var(--cat-games) 14%, transparent); color: var(--cat-games); }
.ms-end-icon svg { width: 28px; height: 28px; }
.is-lose .ms-end-icon { background: color-mix(in srgb, var(--danger) 13%, transparent); }
.is-lose .ms-end-icon svg { width: 34px; height: 34px; }
.ms-end h2 { margin: 0; font-size: var(--fs-lg); }
.ms-end-sub { margin: var(--sp-1) 0 var(--sp-4); color: var(--muted); font-size: var(--fs-sm); }
.ms-end-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.ms-end-grid > div { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.ms-end-grid dt { color: var(--muted); font-size: var(--fs-xs); }
.ms-end-grid dd { margin: 0; font-size: var(--fs-md); font-weight: 750; font-variant-numeric: tabular-nums; }
.ms-rec { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success); font-size: .6875rem; font-weight: 700; vertical-align: middle; }
.ms-end-note { margin: 0 0 var(--sp-4); color: var(--muted); font-size: var(--fs-sm); }
.ms-end .btn-row { justify-content: center; gap: var(--sp-2); margin-top: 0; }
.ms-end-x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.ms-end-x:hover { background: var(--bg-soft); color: var(--text); }
@media (max-width: 599px) {
  .ms-end { padding: var(--sp-2); }
  .ms-end-card { padding: var(--sp-4) var(--sp-3) var(--sp-3); }
  .ms-end-icon { width: 44px; height: 44px; margin-bottom: var(--sp-1); }
  .ms-end-icon svg { width: 22px; height: 22px; }
  .ms-end h2 { font-size: var(--fs-md); }
  .ms-end-sub { margin-bottom: var(--sp-3); font-size: var(--fs-xs); }
  .ms-end-grid > div { padding: 6px var(--sp-2); }
  .ms-end-grid dd { font-size: var(--fs-base); }
  .ms-end-note { margin-bottom: var(--sp-3); font-size: var(--fs-xs); }
  .ms-end .btn { min-height: 42px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
}

/* Alt kontroller: aç / bayrak modu, ipucu */
.ms-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-2); }
.ms-mode { display: inline-flex; padding: 4px; border-radius: var(--radius-pill); background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--border); }
.ms-mode button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 18px;
  border: 0; border-radius: var(--radius-pill);
  background: none; color: var(--muted);
  font: inherit; font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ms-mode button svg { width: 22px; height: 22px; }
.ms-mode button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
#ms-mode-flag[aria-pressed="true"] { color: var(--danger); }
.ms-mode button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ms-controls > .btn { min-height: 46px; }
.ms-keys { display: none; margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.9; text-align: center; }
@media (hover: hover) and (min-width: 900px) { .ms-keys { display: block; } }

.ms-msg {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  max-width: 560px; margin: var(--sp-3) auto 0;
  padding: 10px 6px 10px 12px;
  border-radius: var(--radius);
  background: var(--primary-soft); color: var(--text);
  font-size: var(--fs-sm); line-height: 1.45;
  animation: ms-menu .2s var(--ease);
}
.ms-msg[hidden] { display: none; }
.ms-msg > svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--primary); }
.ms-msg[data-kind="warn"] { background: var(--warning-soft); }
.ms-msg[data-kind="warn"] > svg { color: var(--warning); }
.ms-msg span { flex: 1; padding-top: 1px; }
.ms-msg-x { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin: -4px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.ms-msg-x:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }

/* Yan panel */
.ms-side dl { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-3); margin: var(--sp-3) 0; font-size: var(--fs-sm); }
.ms-side dt { color: var(--muted); }
.ms-side dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.ms-side .btn.is-confirm { color: var(--danger); }
.ms-side-h { margin: var(--sp-4) 0 0; }
.ms-side, .ms-side ~ section { min-width: 0; }
.ms-st-table td:not(.num) { white-space: nowrap; }
.ms-st-table th, .ms-st-table td { padding-left: 6px; padding-right: 6px; font-size: var(--fs-xs); }
.ms-st-table th[scope="row"] { font-weight: 600; white-space: nowrap; }
.ms-st-table .ms-lvdot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; vertical-align: 1px; box-shadow: none; }
.ms-top { display: grid; gap: 4px; margin: var(--sp-2) 0 var(--sp-3); padding: 0; list-style: none; counter-reset: ms-top; }
.ms-top li { display: flex; align-items: center; gap: var(--sp-3); min-height: 38px; padding: 0 var(--sp-3); border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); font-size: var(--fs-sm); counter-increment: ms-top; }
.ms-top li::before { content: counter(ms-top); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-soft); color: var(--muted); font-size: .75rem; font-weight: 750; }
.ms-top li:first-child::before { background: #f5b400; color: #3b2a00; }
.ms-top b { font-variant-numeric: tabular-nums; }
.ms-top span { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); }
.ms-top li.ms-top-empty { justify-content: center; color: var(--muted); }
.ms-top li.ms-top-empty::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ms-c, .ms-board, .ms-face, .ms-mode button { transition: none; }
  .ms-c.is-reveal::after, .ms-c.is-reveal > *, .ms-c.is-plant .ms-ic-flag, .ms-c.is-wave, .ms-c.is-burst, .ms-c.is-nudge,
  .ms-board.is-deal, .ms-board.is-shake, .ms-menu, .ms-msg, .ms-end-card, .ms-face svg, .ms-custom, .ms-opts { animation: none; }
  .ms-c.is-reveal::after { display: none; }
}

/* ---------- 27. Satranç ---------- */
/* Tahta: .ch-board içinde üç katman (kareler, taşlar, ok/terfi/son kartı). Taşlar mutlak konumlu,
   transform ile kayar; renk ve doku .ch[data-board] ile: wood (varsayılan), green, blue, night. */
.ch { padding: var(--sp-3); }
@media (min-width: 640px) { .ch { padding: var(--sp-5); } }
.ch [hidden] { display: none !important; }
.ch {
  --ch-l: #f0d9b5; --ch-d: #b58863;
  --ch-frame: linear-gradient(145deg, #8a5630, #4b2a15);
  --ch-last: rgba(255, 210, 0, .42); --ch-sel: rgba(255, 196, 0, .6);
  --ch-dot: rgba(40, 25, 10, .26); --ch-hint: #1e88ff;
  --ch-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .16' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .18 0 0 0 0 .06 0 0 0 .75 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ch-tex-o: .55;
}
.ch[data-board="green"] {
  --ch-l: #eeeed2; --ch-d: #769656; --ch-frame: linear-gradient(145deg, #4c6b34, #2a3d1c);
  --ch-last: rgba(255, 235, 59, .5); --ch-sel: rgba(255, 225, 40, .62); --ch-dot: rgba(20, 40, 10, .24);
}
.ch[data-board="blue"] {
  --ch-l: #dee3e6; --ch-d: #8ca2ad; --ch-frame: linear-gradient(145deg, #566d7d, #2f3f4b);
  --ch-last: rgba(255, 222, 70, .5); --ch-sel: rgba(255, 210, 40, .62); --ch-dot: rgba(10, 30, 50, .24);
}
.ch[data-board="night"] {
  --ch-l: #a3afbf; --ch-d: #5b697d; --ch-frame: linear-gradient(145deg, #2b3340, #12161d);
  --ch-last: rgba(110, 196, 255, .42); --ch-sel: rgba(110, 196, 255, .6); --ch-dot: rgba(5, 12, 25, .3); --ch-hint: #ffb020;
}
.ch:not([data-board="wood"]) {
  --ch-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ch-tex-o: .1;
}

/* Üst çubuk ve paneller */
.ch-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.ch-info { display: grid; gap: 2px; min-width: 0; line-height: 1.2; }
.ch-info small { color: var(--muted); font-size: var(--fs-xs); }
.ch-lv { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-md); font-weight: 750; }
.ch-lv::before, .ch-lvdot { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ch-lvc, var(--primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch-lvc, var(--primary)) 20%, transparent); }
[data-lv="0"] { --ch-lvc: var(--cat-games); }
[data-lv="1"] { --ch-lvc: #16a34a; } [data-lv="2"] { --ch-lvc: #65a30d; } [data-lv="3"] { --ch-lvc: #2f5bea; }
[data-lv="4"] { --ch-lvc: #7c3aed; } [data-lv="5"] { --ch-lvc: #db2777; } [data-lv="6"] { --ch-lvc: #dc2626; }
.ch-actions { display: flex; flex: none; gap: 6px; }
.ch-actions .btn { min-height: 42px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.ch-actions .btn[aria-expanded="true"] { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 35%, transparent); color: var(--primary); }
@media (max-width: 419px) {
  .ch-actions .btn { width: 42px; padding: 0; }
  .ch-actions .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.ch-setup, .ch-opts { margin-bottom: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); animation: ch-pop .2s var(--ease); }
@keyframes ch-pop { from { opacity: 0; transform: translateY(-4px); } }
.ch-sgrid { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) { .ch-sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ch-span { grid-column: 1 / -1; } }
.ch-setup .btn-row { margin-top: var(--sp-4); }
.ch-seg, .ch-boards { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ch-seg button, .ch-bsk, .ch-lvb {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: border-color var(--dur), background var(--dur), color var(--dur);
}
.ch-seg button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); }
.ch-seg button svg { flex: none; }
.ch-seg button[aria-pressed="true"], .ch-bsk[aria-pressed="true"], .ch-lvb[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); }
.ch-seg button:focus-visible, .ch-bsk:focus-visible, .ch-lvb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ch-sw { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #4a4f5a; }
.ch-sw.is-w { background: #fff; } .ch-sw.is-b { background: #1d2027; } .ch-sw.is-r { background: linear-gradient(90deg, #fff 50%, #1d2027 50%); }
.ch-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: var(--sp-1); }
@media (min-width: 560px) { .ch-levels { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ch-lvb { display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 60px; padding: 6px 4px; border-radius: var(--radius-sm); }
.ch-lvb b { font-size: var(--fs-md); line-height: 1.1; color: var(--ch-lvc); }
.ch-lvb span { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.ch-lvb[aria-pressed="true"] span { color: inherit; }
.ch-lvb[data-level="1"] { --ch-lvc: #16a34a; } .ch-lvb[data-level="2"] { --ch-lvc: #65a30d; } .ch-lvb[data-level="3"] { --ch-lvc: #2f5bea; }
.ch-lvb[data-level="4"] { --ch-lvc: #7c3aed; } .ch-lvb[data-level="5"] { --ch-lvc: #db2777; } .ch-lvb[data-level="6"] { --ch-lvc: #dc2626; }
:root[data-theme="dark"] .ch-lvb b { filter: brightness(1.35); }
.ch-opts { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) { .ch-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.ch-opts .check { min-height: 40px; font-size: var(--fs-sm); }
.ch-bsk { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px 0 6px; border-radius: var(--radius-pill); }
.ch-bsk i { width: 28px; height: 28px; border-radius: 8px; background: conic-gradient(var(--d) 0 25%, var(--l) 0 50%, var(--d) 0 75%, var(--l) 0); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.ch-bsk[data-board="wood"] i { --l: #f0d9b5; --d: #b58863; }
.ch-bsk[data-board="green"] i { --l: #eeeed2; --d: #769656; }
.ch-bsk[data-board="blue"] i { --l: #dee3e6; --d: #8ca2ad; }
.ch-bsk[data-board="night"] i { --l: #a3afbf; --d: #5b697d; }

/* Düzen: masaüstünde tahta solda, panel sağda; telefonda alt alta */
.ch-main { display: grid; gap: var(--sp-3); }
.ch-play { width: 100%; min-width: 0; margin: 0 auto; }
@media (min-width: 900px) {
  .ch-main { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-5); align-items: stretch; }
  .ch-play { width: min(100%, max(380px, calc(100svh - 300px))); }
}
.ch-frame {
  position: relative; container-type: inline-size;
  padding: clamp(4px, 1.1cqi, 8px); border-radius: 12px;
  background: var(--ch-frame);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 1px 2px rgba(0, 0, 0, .2), 0 14px 34px -10px rgba(15, 23, 41, .45);
}
.ch-board {
  position: relative; aspect-ratio: 1 / 1; width: 100%;
  border-radius: 5px; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  outline: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
}
.ch-board:focus-visible { box-shadow: 0 0 0 3px var(--focus); }
.ch-board::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--ch-tex) center / 100% 100%; opacity: var(--ch-tex-o); mix-blend-mode: multiply; }
.ch-board::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .08)); }
.ch-sqs { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.ch-sq { position: relative; background: var(--ch-l); color: var(--ch-d); }
.ch-sq.is-dark { background: var(--ch-d); color: var(--ch-l); }
.ch-sq::before, .ch-sq::after { content: ""; position: absolute; pointer-events: none; }
.ch-sq.is-last::before { inset: 0; background: var(--ch-last); }
.ch-sq.is-sel::before { inset: 0; background: var(--ch-sel); }
.ch-sq.is-check::before { inset: 0; background: radial-gradient(circle at 50% 55%, rgba(255, 30, 30, 1) 0, rgba(235, 20, 20, .75) 30%, rgba(200, 0, 0, 0) 70%); animation: ch-check 1.4s ease-in-out infinite; }
@keyframes ch-check { 50% { opacity: .7; } }
.ch-sq.is-move::after { top: 50%; left: 50%; width: 30%; height: 30%; margin: -15% 0 0 -15%; border-radius: 50%; background: var(--ch-dot); }
.ch-sq.is-cap::after { inset: 0; background: radial-gradient(transparent 0 66%, var(--ch-dot) 67% 80%, transparent 81%); }
.ch-sq.is-hint { box-shadow: inset 0 0 0 3px var(--ch-hint); }
.ch-sq.is-over { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .8); }
.ch-sq.is-over.is-move::after { width: 44%; height: 44%; margin: -22% 0 0 -22%; }
.ch-sq.is-cursor { box-shadow: inset 0 0 0 3px var(--focus), inset 0 0 0 5px #fff; }
.ch-cr, .ch-cf { position: absolute; z-index: 1; font-size: clamp(9px, 2.1cqi, 14px); font-weight: 700; line-height: 1; opacity: .9; }
.ch-cr { top: 4%; left: 5%; }
.ch-cf { right: 6%; bottom: 4%; }
@media (hover: hover) { .ch-board:not(.is-locked) .ch-sq.is-move:hover::after { width: 40%; height: 40%; margin: -20% 0 0 -20%; } }

/* Taşlar */
.ch-pcs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ch-pc { position: absolute; top: 0; left: 0; width: 12.5%; height: 12.5%; transition: transform .24s cubic-bezier(.22, .8, .3, 1), opacity .2s; will-change: transform; }
.ch-pc svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 .14em .1em rgba(0, 0, 0, .32)); transition: transform .16s var(--ease); transform-origin: 50% 88%; }
.ch-pc { font-size: clamp(6px, 1.25cqi, 10px); }
.ch-pc.is-moving { z-index: 3; }
.ch-pc.is-lift svg { transform: scale(1.06); }
.ch-pc.is-drag { z-index: 5; transition: none; }
.ch-pc.is-drag svg { transform: none; filter: drop-shadow(0 .9em .6em rgba(0, 0, 0, .35)); }
.ch-pc.is-new, .ch-pc.is-gone { opacity: 0; }
.ch-pc.is-gone svg { transform: scale(.55); }
.ch-pc.is-fallen svg { transform: rotate(78deg) translate(4%, 6%); transition: transform .7s cubic-bezier(.5, -.4, .55, 1.45); }
.ch-pc.is-winner svg { filter: drop-shadow(0 0 .5em rgba(255, 196, 0, .95)) drop-shadow(0 .14em .1em rgba(0, 0, 0, .32)); }
.ch-board.is-locked .ch-pc, .ch-board.is-view { cursor: default; }
.ch-board:not(.is-locked) .ch-pcs { cursor: grab; }
.ch.no-anim .ch-pc, .ch-board.no-anim .ch-pc, .ch.no-anim .ch-pc svg { transition: none; }
.ch-arrows { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.ch-arrow { fill: var(--ch-hint); stroke: var(--ch-hint); opacity: .85; animation: ch-fade .3s var(--ease); }
@keyframes ch-fade { from { opacity: 0; } }
.ch-board.is-view .ch-sqs { filter: saturate(.8); }

/* Terfi seçimi */
.ch-promo { position: absolute; inset: 0; z-index: 6; background: rgba(10, 14, 22, .42); animation: ch-fade .15s; }
.ch-pr {
  position: absolute; width: 12.5%; height: 12.5%; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, #ffffff 0, #eef1f6 55%, #c3cad6 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  transition: border-radius .15s, transform .15s, background .15s;
}
.ch-pr svg { width: 100%; height: 100%; display: block; }
.ch-pr:hover, .ch-pr:focus-visible { border-radius: 14%; background: radial-gradient(circle at 50% 40%, #fff7d6 0, #ffd75e 100%); outline: none; transform: scale(1.04); }

/* Oyun sonu kartı + konfeti */
.ch-end { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; padding: var(--sp-3); background: color-mix(in srgb, var(--bg) 28%, transparent); animation: ch-fade .3s; }
.ch-end-card {
  position: relative; width: min(100%, 340px);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-lg); text-align: center;
  animation: ch-card .42s var(--ease);
}
@keyframes ch-card { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.ch-end-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--sp-2); border-radius: 50%; background: color-mix(in srgb, var(--cat-games) 14%, transparent); color: var(--cat-games); }
.ch-end.is-win .ch-end-icon { background: color-mix(in srgb, #f5b400 22%, transparent); color: #c98a00; }
.ch-end.is-lose .ch-end-icon { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.ch-end.is-draw .ch-end-icon { background: var(--primary-soft); color: var(--primary); }
.ch-end h2 { margin: 0; font-size: var(--fs-lg); }
.ch-end-sub { margin: var(--sp-1) 0 var(--sp-4); color: var(--muted); font-size: var(--fs-sm); }
.ch-end .btn-row { justify-content: center; gap: var(--sp-2); margin-top: 0; }
.ch-end .btn { min-height: 44px; padding: 0 var(--sp-4); }
.ch-end-x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.ch-end-x:hover { background: var(--bg-soft); color: var(--text); }
.ch-fx { position: absolute; inset: 0; z-index: 8; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 400px) { .ch-end-card { padding: var(--sp-4) var(--sp-3) var(--sp-3); } .ch-end-icon { width: 44px; height: 44px; } }

/* Oyuncu çubukları */
.ch-player { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 2px; }
.ch-av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--border); color: var(--text-soft); }
.ch-av svg { width: 30px; height: 30px; }
.ch-av svg[width="22"] { width: 22px; height: 22px; }
.ch-av.is-b { background: #2a2e37; color: #e6e9ef; box-shadow: none; }
.ch-av.is-w { background: #fbfaf6; color: #2a2e37; }
:root[data-theme="dark"] .ch-av.is-w { box-shadow: none; }
.ch-pn { display: grid; min-width: 0; line-height: 1.2; }
.ch-pn b { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-pn small { color: var(--muted); font-size: .8125rem; white-space: nowrap; }
.ch-caps { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; flex: 1; padding-left: 4px; }
.ch-cap { width: 22px; height: 22px; margin-left: -2px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .15)); }
.ch-cap.is-stack { margin-left: -13px; }
.ch-adv { margin-left: 6px; color: var(--muted); font-size: var(--fs-xs); font-weight: 750; font-variant-numeric: tabular-nums; }
.ch-turn { flex: none; width: 10px; height: 10px; margin-right: 4px; border-radius: 50%; background: transparent; transition: background .2s, box-shadow .2s; }
.ch-turn.is-on { background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.ch-dots { display: inline-flex; gap: 4px; padding: 0 4px; }
.ch-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: ch-dot 1s infinite ease-in-out; }
.ch-dots i:nth-child(2) { animation-delay: .15s; } .ch-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ch-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Panel: durum, hamle listesi, gezinme, araçlar */
.ch-panel { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.ch-status {
  display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0;
  padding: 8px 12px; border-radius: var(--radius); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border);
  font-size: var(--fs-sm); font-weight: 700;
}
.ch-sdot { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #4a4f5a; }
.ch-sdot.is-w { background: #fff; } .ch-sdot.is-b { background: #1d2027; }
.ch-status.is-check { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent); }
.ch-status.is-end { background: var(--primary-soft); color: var(--primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent); }
.ch-status.is-think span:last-child { animation: ch-think 1.2s ease-in-out infinite; }
@keyframes ch-think { 50% { opacity: .55; } }
.ch-status.is-view { color: var(--muted); font-weight: 600; }
.ch-moves { min-height: 7rem; max-height: 10.5rem; overflow-y: auto; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); outline: none; scroll-behavior: smooth; }
@media (min-width: 900px) { .ch-moves { flex: 1 1 0; height: 0; min-height: 9rem; max-height: none; } }
.ch-ml { margin: 0; padding: 4px; list-style: none; }
.ch-ml li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) minmax(0, 1fr); align-items: center; border-radius: 6px; }
.ch-ml li:nth-child(even) { background: var(--surface-2); }
.ch-mn { padding-left: 6px; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.ch-mv { display: inline-flex; align-items: center; justify-self: start; min-height: 30px; padding: 2px 8px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 650; font-variant-numeric: tabular-nums; cursor: pointer; }
.ch-mv:hover { background: var(--bg-soft); }
.ch-mv.is-cur { background: var(--primary); color: var(--primary-text); }
.ch-mv.is-empty { color: var(--muted); cursor: default; }
.ch-mv:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ch-fig { width: 1.3em; height: 1.3em; margin: -.2em .05em -.2em -.2em; flex: none; }
.ch-nomoves { margin: 2.2rem var(--sp-3); color: var(--muted); font-size: var(--fs-sm); text-align: center; }
.ch-res { margin: 2px 0 8px; font-weight: 750; text-align: center; }
.ch-nav { display: flex; align-items: center; gap: 6px; }
.ch-ib { flex: 1; display: grid; place-items: center; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; }
.ch-ib:hover:not(:disabled) { background: var(--bg-soft); }
.ch-ib:disabled { opacity: .38; cursor: default; }
.ch-ib:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ch-back { flex: none; min-height: 40px; }
.ch-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ch-tools .btn { flex-direction: column; gap: 3px; min-height: 60px; padding: 6px 2px; font-size: .78rem; font-weight: 650; line-height: 1.15; text-align: center; }
.ch-tools .btn svg { width: 22px; height: 22px; }
.ch-tools .btn:disabled { opacity: .45; }
.ch-tools .btn.is-confirm { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
@media (max-width: 899px) {
  .ch-tools { order: -1; }
  .ch-status { order: -2; }
}
.ch.is-thinking .ch-hint, .ch-board.is-view ~ * { cursor: default; }
.ch-keys { display: none; margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.9; text-align: center; }
@media (hover: hover) and (min-width: 900px) { .ch-keys { display: block; } }
.ch-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Kenar çubuğu */
.ch-side dl { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-3); margin: var(--sp-3) 0; font-size: var(--fs-sm); }
.ch-side dt { color: var(--muted); }
.ch-side dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.ch-side .btn.is-confirm { color: var(--danger); }
.ch-side, .ch-side ~ section { min-width: 0; }
.ch-side + .ch-side { margin-top: var(--sp-5); }
.ch-st-table th, .ch-st-table td { padding-left: 6px; padding-right: 6px; font-size: var(--fs-xs); }
.ch-st-table th[scope="row"] { font-weight: 600; white-space: nowrap; }
.ch-st-table .ch-lvdot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; vertical-align: 1px; box-shadow: none; }
.ch-vals td { vertical-align: middle; }
.ch-vfig { width: 28px; height: 28px; margin: -4px 8px -4px 0; vertical-align: middle; }