/* ==========================================================================
   uTooler — style-rtl.css (style.css’ten i18n/rtl.js ile üretilir, elle düzenlemeyin)
   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;
  --cat-device: #1b8a43;

  /* 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;
  --cat-device: #5fd585;
  --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;
  right: 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-left: 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-left: 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-left: 0; }
  .main-nav { order: 0; flex: 0 1 auto; margin: 0 0 0 auto; }
  .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); }
.c-device { color: var(--cat-device); }

/* ---------- 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;
  right: 16px; top: 50%;
  width: 20px; height: 20px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.search input {
  width: 100%;
  height: 54px;
  padding: 0 48px 0 56px;
  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;
  left: 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-right: 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); left: var(--sp-3); }
.tool-item.is-soon .t-name { padding-left: 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-right: 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-left: 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: left 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: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-group .addon {
  display: grid;
  place-items: center;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  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: right; }
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: left; font-variant-numeric: tabular-nums; }

/* Kopyalandı bildirimi */
.toast {
  position: fixed;
  right: 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-left: 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); right: 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%;
  right: var(--sp-4);
  left: 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: right; cursor: pointer; }
.uc-pick small { margin-right: 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; right: -15%; top: -15%; width: 130%; height: 130%; z-index: 3; pointer-events: none; }
.wh-pointer {
  position: absolute;
  top: -8px; right: 50%;
  z-index: 2;
  width: 40px; height: 48px;
  margin-right: -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%; right: 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-right: .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-left: 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) calc(var(--sp-1) + 1px) var(--sp-1) var(--sp-1);
  border: 1px solid var(--border);
  border-right: 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-right-color: var(--success); }
.gpa-row[data-tone="ok"] { border-right-color: var(--primary); }
.gpa-row[data-tone="low"] { border-right-color: var(--warning); }
.gpa-row[data-tone="fail"] { border-right-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-left: 30px; background-position: left 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-right: 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-left: 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; right: 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; right: 50%; width: 2px; height: 14px; margin-right: -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;
  left: 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 var(--sp-3) 2px 2px; 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-left: 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; right: 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: right .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-right: 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: 0 var(--radius-sm) var(--radius-sm) 0; }
.dc-today {
  flex: none;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  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-right: 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-right: 3px solid var(--primary);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  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-right: 40px; min-height: 28px; }
.steps li::before {
  counter-increment: s;
  content: counter(s);
  position: absolute;
  right: 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-left: 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 auto 0 0; color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; text-align: left; 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: right; 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-right: 18px; color: var(--text); font-weight: 650; }
.cal-line dt::before { content: ""; position: absolute; right: 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 auto 0 0; 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); right: 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: right .4s var(--ease); }
.preg-mark::after { content: ""; position: absolute; top: 100%; right: 50%; margin-right: -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-left: 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; right: 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) 26px var(--sp-2) 0; }
.preg-timeline li::before { content: ""; position: absolute; top: calc(var(--sp-2) + 5px); right: 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-right: calc(26px + var(--sp-2)); padding-left: var(--sp-2); border-radius: var(--radius-sm); background: var(--primary-soft); }
.preg-timeline li.is-now::before { right: 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-right: 3px solid var(--primary); border-radius: var(--radius-sm) 0 0 var(--radius-sm); 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-left: .06em; }
.fr-sign { margin-left: .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 40px var(--sp-4) 0; }
.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; right: 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-right: 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-right: 3px solid var(--primary); border-radius: var(--radius-sm) 0 0 var(--radius-sm); 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-right: 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%; right: var(--x, 0); width: 20px; height: 20px; margin: -10px -10px 0 0; 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: right .4s var(--ease); }
.iw-dot.is-b { width: 16px; height: 16px; margin: -8px -8px 0 0; border: 3px solid var(--text); background: var(--surface); box-shadow: var(--shadow-sm); }
.iw-pin { position: absolute; bottom: calc(100% + 9px); right: var(--x, 0); transform: translateX(calc(-1*(-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: right .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-right: 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 .1em 0 .2em; 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: 499px) {
  .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; }

/* ---------- 28. Mahjong Solitaire ---------- */
/* Taşlar .mj-board içinde mutlak konumlu düğmeler; JS --tw/--th (yüz), --td (kalınlık), --tr (köşe) verir.
   Kalınlık sol-altta katmanlı gölgelerle (fildişi kenar + renkli taban), üst katmanlar sağ-yukarı kayar.
   Yüz çizimi JS'in eklediği SVG sprite'tan (#mj-f0 … #mj-f41). Masa rengi .mj[data-table]. */
.mj { padding: var(--sp-3); }
@media (min-width: 640px) { .mj { padding: var(--sp-5); } }
.mj {
  --mj-felt-1: #1e7a55; --mj-felt-2: #0b3b29;
  --mj-face-1: #fffef9; --mj-face-2: #f7efdc; --mj-face-3: #eadcbb;
  --mj-e1: #ece2c9; --mj-e2: #d7c69e;
  --mj-s1: #2a9b6e; --mj-s2: #17684a;
  --mj-sel: #f2a900; --mj-hint: #1ec8e6;
  --mj-ix: 1;
  user-select: none;
  -webkit-user-select: none;
}
.mj[data-table="ocean"] { --mj-felt-1: #2766a8; --mj-felt-2: #102f58; --mj-s1: #3f7fd6; --mj-s2: #24539b; }
.mj[data-table="wood"] { --mj-felt-1: #a0673a; --mj-felt-2: #5b3418; --mj-s1: #c3833a; --mj-s2: #8c5520; }
.mj[data-table="night"] { --mj-felt-1: #343c4f; --mj-felt-2: #141822; --mj-s1: #2bb0a6; --mj-s2: #17716b; }
:root[data-theme="dark"] .mj {
  --mj-felt-1: #176444; --mj-felt-2: #08281c;
  --mj-face-1: #f3eee1; --mj-face-2: #e7dec7; --mj-face-3: #d6c7a3;
  --mj-e1: #ddd2b6; --mj-e2: #c4b289;
}
:root[data-theme="dark"] .mj[data-table="ocean"] { --mj-felt-1: #1f5590; --mj-felt-2: #0b2244; }
:root[data-theme="dark"] .mj[data-table="wood"] { --mj-felt-1: #84532d; --mj-felt-2: #43250f; }
:root[data-theme="dark"] .mj[data-table="night"] { --mj-felt-1: #2a3142; --mj-felt-2: #0d1017; }

/* Üst çubuk ve menü */
.mj-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.mj-info { display: grid; gap: 2px; min-width: 0; line-height: 1.2; }
.mj-lay { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-md); font-weight: 750; }
.mj-lay::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--mj-dc, var(--primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-dc, var(--primary)) 20%, transparent); }
.mj-lay[data-d="1"], .mj-diff[data-d="1"] { --mj-dc: var(--success); }
.mj-lay[data-d="2"], .mj-diff[data-d="2"] { --mj-dc: var(--primary); }
.mj-lay[data-d="3"], .mj-diff[data-d="3"] { --mj-dc: var(--danger); }
.mj-seed { overflow: hidden; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.mj-actions { display: flex; flex: none; gap: 6px; }
.mj-actions .btn { min-height: 42px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.mj-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) {
  .mj-actions .btn { width: 42px; padding: 0; }
  .mj-actions .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.mj-menu-wrap { position: relative; }
.mj-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  display: grid; gap: 2px;
  width: max-content; min-width: 280px; 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: mj-menu .16s var(--ease);
}
.mj-menu[hidden] { display: none; }
@keyframes mj-menu { from { opacity: 0; transform: translateY(-4px); } }
.mj-menu hr { margin: 4px 6px; border: 0; border-top: 1px solid var(--border); }
.mj-mi {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 52px; padding: 4px var(--sp-3);
  border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text);
  font: inherit; font-weight: 650; text-align: left;
  cursor: pointer;
}
.mj-mi:hover, .mj-mi:focus-visible { background: var(--bg-soft); }
.mj-mi:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.mj-mi[aria-current="true"] { background: var(--primary-soft); }
.mj-mi-x { min-height: 46px; }
.mj-mi-x svg { flex: none; width: 20px; height: 20px; margin: 0 22px; color: var(--muted); }
.mj-prev { flex: none; width: 64px; height: 40px; color: var(--mj-s2); }
:root[data-theme="dark"] .mj-prev { color: #5fd3a5; }
.mj-mi-t { display: grid; flex: 1; line-height: 1.25; }
.mj-mi-t small { color: var(--muted); font-size: var(--fs-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
.mj-diff { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-xs); font-weight: 650; }
.mj-diff::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mj-dc); }
.mj-mi.is-confirm { background: var(--warning-soft); }
.mj-mi.is-confirm::after { content: attr(data-tip); position: absolute; right: 8px; bottom: 2px; color: var(--warning); font-size: .6875rem; font-weight: 700; }
.mj-mi.is-confirm .mj-diff { visibility: hidden; }

/* Ayarlar */
.mj-opts { display: grid; gap: var(--sp-4); margin: 0 0 var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); animation: mj-menu .2s var(--ease); }
.mj-opts[hidden] { display: none; }
@media (min-width: 720px) { .mj-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.mj-opts .field { margin: 0; }
.mj-opts .check { min-height: 40px; font-size: var(--fs-sm); }
.mj-tables { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mj-table {
  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;
}
.mj-table i { position: relative; width: 28px; height: 28px; border-radius: 8px; background: radial-gradient(120% 120% at 40% 30%, var(--a), var(--b)); }
.mj-table i::after { content: ""; position: absolute; left: 9px; top: 6px; width: 11px; height: 14px; border-radius: 2px; background: linear-gradient(150deg, #fffef9, #eadcbb); box-shadow: -1px 1px 0 #d7c69e, -2px 2px 0 var(--s); }
.mj-table[data-table="jade"] i { --a: #1e7a55; --b: #0b3b29; --s: #2a9b6e; }
.mj-table[data-table="ocean"] i { --a: #2766a8; --b: #102f58; --s: #3f7fd6; }
.mj-table[data-table="wood"] i { --a: #a0673a; --b: #5b3418; --s: #c3833a; }
.mj-table[data-table="night"] i { --a: #343c4f; --b: #141822; --s: #2bb0a6; }
.mj-table[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); }
.mj-table:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Durum hapları */
.mj-status { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px var(--sp-2); margin-bottom: var(--sp-3); }
.mj-pill {
  display: inline-flex; align-items: baseline; gap: 6px;
  min-height: 36px; padding: 7px 14px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text); font: inherit; line-height: 1.2;
}
.mj-pill small { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.mj-pill b { font-size: var(--fs-base); font-weight: 750; font-variant-numeric: tabular-nums; }
button.mj-pill { cursor: pointer; }
button.mj-pill:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.mj-pill.is-zero { background: var(--danger-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent); }
.mj-pill.is-zero b { color: var(--danger); }
@media (max-width: 419px) { .mj-status { flex-wrap: nowrap; gap: 4px; } .mj-pill { flex-direction: column; align-items: center; gap: 0; flex: 1; min-width: 0; padding: 5px 4px; border-radius: var(--radius-sm); } .mj-pill small { font-size: .6875rem; } .mj-pill b { font-size: var(--fs-sm); } }

/* Masa ve tahta */
.mj-stage { position: relative; }
.mj-felt {
  position: relative;
  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, .3)),
    radial-gradient(130% 85% at 50% 0%, rgba(255, 255, 255, .12), transparent 60%),
    radial-gradient(120% 120% at 50% 30%, var(--mj-felt-1), var(--mj-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);
}
.mj[data-table="wood"] .mj-felt {
  background:
    repeating-linear-gradient(92deg, rgba(255, 255, 255, .035) 0 3px, transparent 3px 11px, rgba(0, 0, 0, .05) 11px 13px, transparent 13px 23px),
    radial-gradient(140% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .32)),
    radial-gradient(130% 85% at 50% 0%, rgba(255, 255, 255, .12), transparent 60%),
    radial-gradient(120% 120% at 50% 30%, var(--mj-felt-1), var(--mj-felt-2));
}
.mj-scroll { overflow: auto; padding: 10px 8px; overscroll-behavior-x: contain; scrollbar-width: thin; }
@media (min-width: 640px) { .mj-scroll { padding: var(--sp-5) var(--sp-4); } }
.mj-board { position: relative; margin: 0 auto; outline: none; touch-action: manipulation; }
.mj:not(.is-ready) .mj-board { visibility: hidden; }
.mj.is-paused .mj-board { filter: blur(10px) saturate(.6); pointer-events: none; }

/* Taş */
.mj-t {
  position: absolute; left: 0; top: 0;
  width: var(--tw); height: var(--th);
  margin: 0; padding: 0;
  border: 0; border-radius: var(--tr);
  background: linear-gradient(152deg, var(--mj-face-1) 0%, var(--mj-face-2) 56%, var(--mj-face-3) 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .95), inset -1px -1px 0 rgba(140, 110, 60, .28),
    calc(var(--td) * -.17) calc(var(--td) * .17) 0 var(--mj-e1),
    calc(var(--td) * -.34) calc(var(--td) * .34) 0 var(--mj-e1),
    calc(var(--td) * -.5) calc(var(--td) * .5) 0 var(--mj-e2),
    calc(var(--td) * -.67) calc(var(--td) * .67) 0 var(--mj-s1),
    calc(var(--td) * -.84) calc(var(--td) * .84) 0 var(--mj-s1),
    calc(var(--td) * -1) calc(var(--td) * 1) 0 var(--mj-s2),
    calc(var(--td) * -1.5) calc(var(--td) * 2) calc(var(--td) * 2.2) rgba(0, 0, 0, .42);
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mj-fc { position: absolute; left: 6%; top: 4.5%; width: 88%; height: 91%; pointer-events: none; }
.mj-t::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .16s ease; }
.mj.is-dim .mj-t:not(.is-free)::after { opacity: 1; background: rgba(46, 34, 8, .2); }
:root[data-theme="dark"] .mj.is-dim .mj-t:not(.is-free)::after { background: rgba(10, 8, 2, .3); }
@media (hover: hover) { .mj-t.is-free:hover { filter: brightness(1.05) saturate(1.05); } }
.mj-t:focus { outline: none; }
.mj-t:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; z-index: 3; }
.mj-t.is-sel { filter: none; }
.mj-t.is-sel::after {
  opacity: 1;
  background: linear-gradient(152deg, rgba(255, 221, 102, .5), rgba(255, 170, 0, .42));
  box-shadow: inset 0 0 0 2px var(--mj-sel), 0 0 0 2px rgba(255, 255, 255, .75), 0 0 16px 4px rgba(255, 186, 30, .8);
}
.mj-t.is-hint::after {
  opacity: 1;
  background: rgba(30, 200, 230, .18);
  box-shadow: inset 0 0 0 2px var(--mj-hint), 0 0 0 2px rgba(255, 255, 255, .7), 0 0 16px 4px rgba(30, 200, 230, .75);
  animation: mj-hint 1s ease-in-out infinite;
}
@keyframes mj-hint { 50% { box-shadow: inset 0 0 0 2px var(--mj-hint), 0 0 0 2px rgba(255, 255, 255, .4), 0 0 6px 1px rgba(30, 200, 230, .4); background: rgba(30, 200, 230, .06); } }
.mj-t.is-no { animation: mj-no .36s ease; }
.mj-t.is-no::after { opacity: 1; background: rgba(220, 38, 38, .22); box-shadow: inset 0 0 0 2px rgba(220, 38, 38, .75); }
@keyframes mj-no { 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.mj-t.is-out { z-index: 6; pointer-events: none; animation: mj-out .46s cubic-bezier(.4, 0, .6, 1) forwards; }
.mj-t.is-out::after { opacity: 1; background: rgba(255, 236, 160, .45); box-shadow: 0 0 18px 6px rgba(255, 210, 80, .75); }
@keyframes mj-out {
  0% { transform: none; }
  32% { transform: translateY(-5px) scale(1.12); opacity: 1; }
  100% { transform: translate(var(--ox), var(--oy)) scale(.55); opacity: 0; }
}
.mj-t.is-gone { display: none; }
.mj-t.is-back { animation: mj-back .34s var(--ease); }
@keyframes mj-back { from { transform: translateY(-14px) scale(1.18); opacity: 0; } }
.mj-t.is-flip { animation: mj-flip .36s ease-in-out; }
@keyframes mj-flip { 50% { transform: scaleX(.05); filter: brightness(.85); } }
.mj-board.is-deal .mj-t { animation: mj-deal .5s var(--ease) both; }
@keyframes mj-deal { from { transform: translate(18px, -28px) scale(1.1); opacity: 0; } }
.mj.is-small .mj-t { box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .9),
    calc(var(--td) * -.34) calc(var(--td) * .34) 0 var(--mj-e1),
    calc(var(--td) * -.5) calc(var(--td) * .5) 0 var(--mj-e2),
    calc(var(--td) * -.75) calc(var(--td) * .75) 0 var(--mj-s1),
    calc(var(--td) * -1) calc(var(--td) * 1) 0 var(--mj-s2),
    calc(var(--td) * -1.2) calc(var(--td) * 1.5) calc(var(--td) * 1.2) rgba(0, 0, 0, .34); }

/* Eşleşme efektleri */
.mj-pop { position: absolute; z-index: 8; width: 0; height: 0; pointer-events: none; }
.mj-pop i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #ffe58a; box-shadow: 0 0 6px 2px rgba(255, 214, 90, .9); transform: rotate(var(--a)) translateY(0); animation: mj-spark .62s ease-out forwards; }
@keyframes mj-spark { 0% { transform: rotate(var(--a)) translateY(0) scale(1.3); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(calc(var(--tw, 40px) * -.95)) scale(.3); opacity: 0; } }
.mj-plus { position: absolute; z-index: 9; transform: translate(-50%, -50%); color: #fff; font-size: max(15px, calc(var(--tw) * .42)); font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 0 10px rgba(0, 0, 0, .25); pointer-events: none; animation: mj-plus .95s var(--ease) forwards; }
.mj-plus.is-combo { color: #ffe066; }
@keyframes mj-plus { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.7); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }

/* Katmanlar: duraklatma, sonuç kartı, konfeti */
.mj-fx { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
.mj-fx[hidden] { display: none; }
.mj-pause { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--radius); background: rgba(0, 0, 0, .18); color: #fff; text-align: center; }
.mj-pause[hidden] { display: none; }
.mj-pause p { margin: 0; font-size: var(--fs-sm); opacity: .9; }
.mj-pause .mj-pause-t { font-size: var(--fs-lg); font-weight: 750; opacity: 1; }
.mj-end { position: absolute; inset: 0; z-index: 22; display: grid; place-items: end center; padding: var(--sp-3); pointer-events: none; }
.mj-end[hidden] { display: none; }
.mj-end.is-win { place-items: center; background: color-mix(in srgb, var(--bg) 30%, transparent); pointer-events: auto; }
.mj-end-card {
  position: relative;
  width: min(100%, 400px);
  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: mj-card .42s var(--ease);
}
@keyframes mj-card { from { opacity: 0; transform: translateY(16px) scale(.95); } }
.mj-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); }
.mj-end-icon svg { width: 28px; height: 28px; }
.mj-end h2 { margin: 0; font-size: var(--fs-lg); }
.mj-end-sub { margin: var(--sp-1) 0 var(--sp-4); color: var(--muted); font-size: var(--fs-sm); }
.mj-end-card.is-stuck { padding-top: var(--sp-4); }
.mj-end-card.is-stuck h2 { padding: 0 36px; }
.mj-end-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.mj-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); }
.mj-end-grid dt { color: var(--muted); font-size: var(--fs-xs); }
.mj-end-grid dd { margin: 0; font-size: var(--fs-md); font-weight: 750; font-variant-numeric: tabular-nums; }
.mj-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; }
.mj-end-note { margin: 0 0 var(--sp-4); color: var(--muted); font-size: var(--fs-sm); }
.mj-end .btn-row { justify-content: center; gap: var(--sp-2); margin-top: 0; }
.mj-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; }
.mj-end-x:hover { background: var(--bg-soft); color: var(--text); }
@media (max-width: 599px) {
  .mj-end { padding: var(--sp-2); }
  .mj-end-card { padding: var(--sp-4) var(--sp-3) var(--sp-3); }
  .mj-end-icon { width: 44px; height: 44px; margin-bottom: var(--sp-1); }
  .mj-end-icon svg { width: 22px; height: 22px; }
  .mj-end h2 { font-size: var(--fs-md); }
  .mj-end-sub { margin-bottom: var(--sp-3); font-size: var(--fs-xs); }
  .mj-end-grid > div { padding: 6px var(--sp-2); }
  .mj-end-grid dd { font-size: var(--fs-base); }
  .mj-end-note { margin-bottom: var(--sp-3); font-size: var(--fs-xs); }
  .mj-end .btn { min-height: 42px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
}

/* Alt kontroller */
.mj-controls { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.mj.can-zoom .mj-controls { grid-template-columns: repeat(4, minmax(0, auto)); }
.mj-controls .btn { min-height: 46px; }
.mj-controls .btn:disabled { opacity: .45; cursor: default; }
.mj-zoom { display: none; }
.mj.can-zoom .mj-zoom { display: inline-flex; }
.mj-zoom[aria-pressed="true"] { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 35%, transparent); color: var(--primary); }
@media (max-width: 599px) {
  .mj-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .mj.can-zoom .mj-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mj-controls .btn { flex-direction: column; gap: 2px; min-height: 56px; padding: 0 4px; font-size: var(--fs-xs); }
}
.mj-msg { display: flex; align-items: flex-start; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--text); font-size: var(--fs-sm); animation: mj-menu .2s var(--ease); }
.mj-msg[hidden] { display: none; }
.mj-msg > svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--primary); }
.mj-msg span { flex: 1; }
.mj-msg-x { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin: -3px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.mj-msg-x:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--text); }
.mj-keys { margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--fs-xs); text-align: center; }
.mj-keys kbd { padding: 1px 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); font-family: var(--font); font-size: .75rem; }
@media (hover: none) { .mj-keys { display: none; } }

/* Yan panel */
.mj-side h3 { margin: var(--sp-4) 0 var(--sp-2); }
.mj-st-table { width: 100%; font-size: var(--fs-sm); }
.mj-st-table th, .mj-st-table td { padding: 6px 8px; }
.mj-st-table tbody th { font-weight: 600; text-align: left; }
.mj-side dl { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--sp-3); margin: var(--sp-3) 0; font-size: var(--fs-sm); }
.mj-side dt { color: var(--muted); }
.mj-side dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.mj-side .btn.is-confirm { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 45%, transparent); color: var(--warning); }
.mj-legend { display: grid; gap: var(--sp-3); margin: 0; }
.mj-legend dt { margin-bottom: 4px; color: var(--muted); font-size: var(--fs-xs); font-weight: 650; }
.mj-legend dd { display: flex; flex-wrap: wrap; gap: 4px 5px; margin: 0; padding-left: 3px; }
.mj-mini {
  position: relative; flex: none;
  width: 24px; height: 31px;
  border-radius: 4px;
  background: linear-gradient(152deg, #fffef9, #f7efdc 56%, #eadcbb);
  box-shadow: inset 1px 1px 0 #fff, -1px 1px 0 #ece2c9, -2px 2px 0 #d7c69e, -3px 3px 0 #2a9b6e, -3px 4px 4px rgba(0, 0, 0, .25);
}
.mj-mini svg { position: absolute; left: 6%; top: 4.5%; width: 88%; height: 91%; }
.mj-legend p { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-xs); }

@media (prefers-reduced-motion: reduce) {
  .mj-t, .mj-t::after, .mj-board.is-deal .mj-t, .mj-end-card, .mj-menu, .mj-opts, .mj-msg { animation: none !important; transition: none !important; }
}

/* ---------- 29. Dama (Checkers) ---------- */
/* Tahta: .dm-board içinde kareler, taşlar, yol oku ve son kartı katmanları. Taşlar JS'in eklediği SVG sprite
   (#dm-0m, #dm-0k, #dm-1m, #dm-1k); takım .dm[data-pieces] (classic, red, wood), tahta .dm[data-board]
   (wood, green, blue, night), kural .dm[data-variant] (tr: tüm kareler, us/br: koyu kareler). */
.dm { padding: var(--sp-3); }
@media (min-width: 640px) { .dm { padding: var(--sp-5); } }
.dm [hidden] { display: none !important; }
.dm {
  --dm-l: #f1dcb4; --dm-d: #a8754a;
  --dm-frame: linear-gradient(145deg, #8a5630, #4b2a15);
  --dm-last: rgba(255, 206, 40, .45); --dm-trail: rgba(255, 206, 40, .22); --dm-sel: rgba(255, 196, 0, .62);
  --dm-dot: rgba(30, 18, 6, .3); --dm-hint: #1e88ff; --dm-must: #ffcf33;
  --dm-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='11'/%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");
  --dm-tex-o: .55;
}
.dm[data-board="green"] {
  --dm-l: #eeeed2; --dm-d: #6f9150; --dm-frame: linear-gradient(145deg, #4c6b34, #2a3d1c);
  --dm-last: rgba(255, 235, 59, .5); --dm-trail: rgba(255, 235, 59, .24); --dm-sel: rgba(255, 225, 40, .62); --dm-dot: rgba(20, 40, 10, .28);
}
.dm[data-board="blue"] {
  --dm-l: #dee3e6; --dm-d: #7f97a4; --dm-frame: linear-gradient(145deg, #566d7d, #2f3f4b);
  --dm-last: rgba(255, 222, 70, .5); --dm-trail: rgba(255, 222, 70, .24); --dm-sel: rgba(255, 210, 40, .62); --dm-dot: rgba(10, 30, 50, .28);
}
.dm[data-board="night"] {
  --dm-l: #a3afbf; --dm-d: #4f5d71; --dm-frame: linear-gradient(145deg, #2b3340, #12161d);
  --dm-last: rgba(110, 196, 255, .45); --dm-trail: rgba(110, 196, 255, .22); --dm-sel: rgba(110, 196, 255, .6); --dm-dot: rgba(5, 12, 25, .34); --dm-hint: #ffb020;
}
.dm:not([data-board="wood"]) {
  --dm-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");
  --dm-tex-o: .1;
}
/* Türk damasında tahtanın tamamı kullanılır: yumuşak, çizgili düz tahta */
.dm[data-variant="tr"] { --dm-d: color-mix(in srgb, var(--dm-l) 80%, #6b4422); }
.dm[data-variant="tr"][data-board="green"] { --dm-d: color-mix(in srgb, var(--dm-l) 78%, #3d5a26); }
.dm[data-variant="tr"][data-board="blue"] { --dm-d: color-mix(in srgb, var(--dm-l) 78%, #3a5263); }
.dm[data-variant="tr"][data-board="night"] { --dm-d: color-mix(in srgb, var(--dm-l) 76%, #1f2733); }

/* Üst çubuk ve paneller */
.dm-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.dm-info { display: grid; gap: 2px; min-width: 0; line-height: 1.2; }
.dm-info small { color: var(--muted); font-size: var(--fs-xs); }
.dm-lv { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-md); font-weight: 750; }
.dm-lv::before, .dm-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); }
.dm-actions { display: flex; flex: none; gap: 6px; }
.dm-actions .btn { min-height: 42px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.dm-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) {
  .dm-actions .btn { width: 42px; padding: 0; }
  .dm-actions .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.dm-setup, .dm-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); }
.dm-sgrid { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) { .dm-sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dm-span { grid-column: 1 / -1; } }
.dm-setup .btn-row { margin-top: var(--sp-4); }
.dm-seg, .dm-boards { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.dm-seg button, .dm-bsk, .dm-psk, .dm-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);
}
.dm-seg button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); }
.dm-seg button svg { flex: none; }
.dm-seg button[aria-pressed="true"], .dm-bsk[aria-pressed="true"], .dm-psk[aria-pressed="true"], .dm-lvb[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); }
.dm-seg button:focus-visible, .dm-bsk:focus-visible, .dm-psk:focus-visible, .dm-lvb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dm-first { padding: 1px 7px; border-radius: var(--radius-pill); background: var(--bg-soft); color: var(--muted); font-size: .72rem; font-weight: 700; }
.dm-vinfo { display: block; margin-top: var(--sp-2); }
/* Kural simgesi: mini tahta, taş yönüyle */
.dm-vic { flex: none; width: 22px; height: 22px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.dm-vic[data-v="tr"] { background: radial-gradient(circle at 50% 50%, #2a2e37 0 28%, transparent 30%), linear-gradient(#e9cf9f, #d9b780); }
.dm-vic[data-v="us"] { background: radial-gradient(circle at 25% 25%, #d93a2e 0 17%, transparent 19%), radial-gradient(circle at 75% 75%, #2a2e37 0 17%, transparent 19%), conic-gradient(#b07a4e 0 25%, #f1dcb4 0 50%, #b07a4e 0 75%, #f1dcb4 0); }
.dm-vic[data-v="br"] { background: radial-gradient(circle at 25% 25%, #f5efe1 0 17%, #7c6a4b 18%, transparent 21%), radial-gradient(circle at 75% 75%, #2a2e37 0 17%, transparent 19%), conic-gradient(#6f9150 0 25%, #eeeed2 0 50%, #6f9150 0 75%, #eeeed2 0); }
.dm-vic[data-v="ru"] { background: radial-gradient(circle at 25% 75%, #f5efe1 0 17%, #7c6a4b 18%, transparent 21%), radial-gradient(circle at 75% 25%, #2a2e37 0 17%, transparent 19%), conic-gradient(#f0d9b5 0 25%, #8b5a3c 0 50%, #f0d9b5 0 75%, #8b5a3c 0); }
/* Renk seçimi: taş takımına göre */
.dm-sw { flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .35); }
.dm { --dm-c0: radial-gradient(circle at 35% 30%, #ffffff, #f5efe1 45%, #cdbf9f); --dm-c1: radial-gradient(circle at 35% 30%, #7a808c, #3a3e47 45%, #17191d); }
.dm[data-pieces="red"] { --dm-c0: radial-gradient(circle at 35% 30%, #ff9d8c, #d93a2e 45%, #8f1913); }
.dm[data-pieces="wood"] { --dm-c0: radial-gradient(circle at 35% 30%, #fff4d8, #ebc98c 45%, #b9894a); --dm-c1: radial-gradient(circle at 35% 30%, #b98458, #704325 45%, #3d210f); }
.dm-sw.is-w { background: var(--dm-c0); }
.dm-sw.is-b { background: var(--dm-c1); }
.dm-sw.is-r { background: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0) 50%), var(--dm-c0); position: relative; overflow: hidden; }
.dm-sw.is-r::after { content: ""; position: absolute; inset: 0 0 0 50%; background: var(--dm-c1); }
.dm-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: var(--sp-1); }
@media (min-width: 560px) { .dm-levels { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.dm-lvb { display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 60px; padding: 6px 4px; border-radius: var(--radius-sm); }
.dm-lvb b { font-size: var(--fs-md); line-height: 1.1; color: var(--ch-lvc); }
.dm-lvb span { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.dm-lvb[aria-pressed="true"] span { color: inherit; }
.dm-lvb[data-level="1"] { --ch-lvc: #16a34a; } .dm-lvb[data-level="2"] { --ch-lvc: #65a30d; } .dm-lvb[data-level="3"] { --ch-lvc: #2f5bea; }
.dm-lvb[data-level="4"] { --ch-lvc: #7c3aed; } .dm-lvb[data-level="5"] { --ch-lvc: #db2777; } .dm-lvb[data-level="6"] { --ch-lvc: #dc2626; }
:root[data-theme="dark"] .dm-lvb b { filter: brightness(1.35); }
.dm-opts { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) { .dm-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.dm-opts .check { min-height: 40px; font-size: var(--fs-sm); }
.dm-bsk, .dm-psk { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px 0 6px; border-radius: var(--radius-pill); }
.dm-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); }
.dm-bsk[data-board="wood"] i { --l: #f1dcb4; --d: #a8754a; }
.dm-bsk[data-board="green"] i { --l: #eeeed2; --d: #6f9150; }
.dm-bsk[data-board="blue"] i { --l: #dee3e6; --d: #7f97a4; }
.dm-bsk[data-board="night"] i { --l: #a3afbf; --d: #4f5d71; }
.dm-psk i { width: 34px; height: 24px; background: var(--b) right center / 22px 22px no-repeat, var(--a) left center / 22px 22px no-repeat; }
.dm-psk i { --a: radial-gradient(circle at 35% 30%, #ffffff, #f5efe1 40%, #cdbf9f 66%, transparent 70%); --b: radial-gradient(circle at 35% 30%, #7a808c, #3a3e47 40%, #17191d 66%, transparent 70%); }
.dm-psk[data-pieces="red"] i { --a: radial-gradient(circle at 35% 30%, #ff9d8c, #d93a2e 40%, #8f1913 66%, transparent 70%); }
.dm-psk[data-pieces="wood"] i { --a: radial-gradient(circle at 35% 30%, #fff4d8, #ebc98c 40%, #b9894a 66%, transparent 70%); --b: radial-gradient(circle at 35% 30%, #b98458, #704325 40%, #3d210f 66%, transparent 70%); }

/* Düzen: masaüstünde tahta solda, panel sağda; telefonda alt alta */
.dm-main { display: grid; gap: var(--sp-3); }
.dm-play { width: 100%; min-width: 0; margin: 0 auto; }
@media (min-width: 900px) {
  .dm-main { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-5); align-items: stretch; }
  .dm-play { width: min(100%, max(380px, calc(100svh - 300px))); }
}
.dm-frame {
  position: relative; container-type: inline-size;
  padding: clamp(5px, 1.4cqi, 11px); border-radius: 14px;
  background: var(--dm-frame);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -2px 0 rgba(0, 0, 0, .28), 0 1px 2px rgba(0, 0, 0, .2), 0 18px 40px -12px rgba(15, 23, 41, .5);
}
.dm-frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--dm-tex) center / 100% 100%; opacity: calc(var(--dm-tex-o) * .7); mix-blend-mode: multiply; }
.dm-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, .35), inset 0 0 18px rgba(0, 0, 0, .18);
}
.dm-board:focus-visible { box-shadow: 0 0 0 3px var(--focus); }
.dm-board::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--dm-tex) center / 100% 100%; opacity: var(--dm-tex-o); mix-blend-mode: multiply; }
.dm-board::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 30% 15%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%), linear-gradient(transparent 70%, rgba(0, 0, 0, .08)); }
.dm-sqs { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.dm-sq { position: relative; background: var(--dm-l); color: var(--dm-d); }
.dm-sq.is-dark { background: var(--dm-d); color: var(--dm-l); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .14); }
.dm[data-variant="tr"] .dm-sq { box-shadow: inset 0 0 0 .5px rgba(60, 35, 12, .35); color: color-mix(in srgb, var(--dm-l) 45%, #3a2410); }
.dm[data-variant="tr"][data-board="night"] .dm-sq { box-shadow: inset 0 0 0 .5px rgba(10, 16, 28, .45); color: #263040; }
.dm-sq::before, .dm-sq::after { content: ""; position: absolute; pointer-events: none; }
.dm-sq.is-trail::before { inset: 0; background: var(--dm-trail); }
.dm-sq.is-last::before { inset: 0; background: var(--dm-last); }
.dm-sq.is-sel::before { inset: 0; background: var(--dm-sel); }
.dm-sq.is-capd::after { top: 50%; left: 50%; width: 46%; height: 46%; margin: -23% 0 0 -23%; border-radius: 50%; border: 2px dashed rgba(200, 30, 30, .55); background: rgba(220, 40, 40, .1); }
.dm-sq.is-move::after { top: 50%; left: 50%; width: 30%; height: 30%; margin: -15% 0 0 -15%; border-radius: 50%; background: var(--dm-dot); }
.dm-sq.is-end::after { top: 50%; left: 50%; width: 22%; height: 22%; margin: -11% 0 0 -11%; border-radius: 50%; background: var(--dm-dot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dm-dot) 50%, transparent); }
.dm-sq.is-cap::after { inset: 8%; border-radius: 50%; border: 5px solid var(--dm-dot); border-width: clamp(3px, .8cqi, 6px); }
.dm-sq.is-hint { box-shadow: inset 0 0 0 3px var(--dm-hint); }
.dm-sq.is-over { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .8); }
.dm-sq.is-over.is-move::after { width: 44%; height: 44%; margin: -22% 0 0 -22%; }
.dm-sq.is-cursor { box-shadow: inset 0 0 0 3px var(--focus), inset 0 0 0 5px #fff; }
.dm-cr, .dm-cf, .dm-num { position: absolute; z-index: 1; font-size: clamp(9px, 2.1cqi, 14px); font-weight: 700; line-height: 1; opacity: .9; }
.dm-cr { top: 4%; left: 5%; }
.dm-cf { right: 6%; bottom: 4%; }
.dm-num { top: 5%; left: 6%; font-size: clamp(8px, 1.8cqi, 12px); opacity: .75; }
@media (hover: hover) { .dm-board:not(.is-locked) .dm-sq.is-move:hover::after { width: 40%; height: 40%; margin: -20% 0 0 -20%; } }

/* Taşlar */
.dm-pcs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.dm-pc { position: absolute; top: 0; left: 0; width: 12.5%; height: 12.5%; transition: transform .2s cubic-bezier(.22, .8, .3, 1), opacity .25s; will-change: transform; font-size: clamp(6px, 1.25cqi, 10px); }
.dm-pc svg { display: block; width: 88%; height: 88%; margin: 6%; overflow: visible; filter: drop-shadow(0 .22em .16em rgba(0, 0, 0, .38)); transition: transform .16s var(--ease), filter .16s; }
.dm-pc.is-moving { z-index: 4; transition-timing-function: cubic-bezier(.4, 0, .3, 1); }
.dm-pc.is-moving svg { transform: scale(1.06); filter: drop-shadow(0 .6em .45em rgba(0, 0, 0, .32)); }
.dm-pc.is-lift svg { transform: scale(1.07); filter: drop-shadow(0 .45em .35em rgba(0, 0, 0, .34)); }
.dm-pc.is-drag { z-index: 5; transition: none; }
.dm-pc.is-drag svg { transform: none; filter: drop-shadow(0 1em .7em rgba(0, 0, 0, .36)); }
.dm-pc.is-new, .dm-pc.is-gone { opacity: 0; }
.dm-pc.is-gone svg { transform: scale(.5) translateY(-20%); }
.dm-pc.is-taken { opacity: .35; }
.dm-pc.is-must::before { content: ""; position: absolute; inset: 1%; border-radius: 50%; box-shadow: 0 0 0 .3em var(--dm-must), 0 0 1.2em .3em color-mix(in srgb, var(--dm-must) 70%, transparent); animation: dm-must 1.3s ease-in-out infinite; }
@keyframes dm-must { 50% { opacity: .35; } }
.dm-pc.is-nudge svg { animation: dm-nudge .45s; }
@keyframes dm-nudge { 20% { transform: translateX(-8%); } 40% { transform: translateX(8%); } 60% { transform: translateX(-5%); } 80% { transform: translateX(4%); } }
.dm-pc.is-crown svg { animation: dm-crown .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes dm-crown { 0% { transform: scale(1); } 40% { transform: scale(1.25); filter: drop-shadow(0 0 .8em rgba(255, 200, 40, .95)); } }
.dm-pc.is-win svg { filter: drop-shadow(0 0 .55em rgba(255, 196, 0, .9)) drop-shadow(0 .22em .16em rgba(0, 0, 0, .38)); }
.dm-board.is-locked .dm-pc, .dm-board.is-view { cursor: default; }
.dm-board:not(.is-locked) .dm-pcs { cursor: pointer; }
.dm.no-anim .dm-pc, .dm-board.no-anim .dm-pc, .dm.no-anim .dm-pc svg { transition: none; }
.dm.no-anim .dm-pc.is-must::before { animation: none; }
.dm-arrows { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.dm-arrow { fill: var(--dm-hint); stroke: var(--dm-hint); opacity: .82; animation: ch-fade .3s var(--ease); }
.dm-arrow polyline { fill: none; }
.dm-board.is-view .dm-sqs { filter: saturate(.8); }
.dm-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Oyun sonu kartı + konfeti */
.dm-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; }
.dm-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);
}
.dm-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); }
.dm-end.is-win .dm-end-icon { background: color-mix(in srgb, #f5b400 22%, transparent); color: #c98a00; }
.dm-end.is-lose .dm-end-icon { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.dm-end.is-draw .dm-end-icon { background: var(--primary-soft); color: var(--primary); }
.dm-end h2 { margin: 0; font-size: var(--fs-lg); }
.dm-end-sub { margin: var(--sp-1) 0 var(--sp-4); color: var(--muted); font-size: var(--fs-sm); }
.dm-end .btn-row { justify-content: center; gap: var(--sp-2); margin-top: 0; }
.dm-end .btn { min-height: 44px; padding: 0 var(--sp-4); }
.dm-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; }
.dm-end-x:hover { background: var(--bg-soft); color: var(--text); }
.dm-fx { position: absolute; inset: 0; z-index: 8; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 400px) { .dm-end-card { padding: var(--sp-4) var(--sp-3) var(--sp-3); } .dm-end-icon { width: 44px; height: 44px; } }

/* Oyuncu çubukları */
.dm-player { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 2px; }
.dm-av { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--border); color: var(--text-soft); }
.dm-avp { width: 30px; height: 30px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.dm-av svg[width="22"] { position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; padding: 2px; border-radius: 6px; background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.dm-pn { display: grid; min-width: 0; line-height: 1.2; }
.dm-pn b { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-pn small { color: var(--muted); font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-caps { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; flex: 1; }
.dm-taken { display: inline-flex; align-items: center; gap: 3px; color: var(--text-soft); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.dm-cap { width: 20px; height: 20px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .2)); }
.dm-adv { padding: 1px 7px; border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success); font-size: var(--fs-xs); font-weight: 750; font-variant-numeric: tabular-nums; }
.dm-turn { flex: none; width: 10px; height: 10px; margin-right: 4px; border-radius: 50%; background: transparent; transition: background .2s, box-shadow .2s; }
.dm-turn.is-on { background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.dm-dots { display: inline-flex; gap: 4px; padding: 0 4px; }
.dm-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: ch-dot 1s infinite ease-in-out; }
.dm-dots i:nth-child(2) { animation-delay: .15s; } .dm-dots i:nth-child(3) { animation-delay: .3s; }

/* Panel: durum, hamle listesi, gezinme, araçlar */
.dm-panel { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.dm-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; transition: background .2s, color .2s;
}
.dm-sdot { flex: none; width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.dm-status.is-must { background: var(--warning-soft); color: var(--warning); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 30%, transparent); }
.dm-status.is-flash { animation: dm-flash .5s; }
@keyframes dm-flash { 30% { transform: translateX(-3px); } 60% { transform: translateX(3px); } }
.dm-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); }
.dm-status.is-think span:last-child { animation: ch-think 1.2s ease-in-out infinite; }
.dm-status.is-view { color: var(--muted); font-weight: 600; }
.dm-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) { .dm-moves { flex: 1 1 0; height: 0; min-height: 9rem; max-height: none; } }
.dm-ml { margin: 0; padding: 4px; list-style: none; }
.dm-ml li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) minmax(0, 1fr); align-items: center; border-radius: 6px; }
.dm-ml li:nth-child(even) { background: var(--surface-2); }
.dm-mn { padding-left: 6px; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.dm-mv { display: inline-flex; align-items: center; gap: 6px; justify-self: start; max-width: 100%; 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; overflow-wrap: anywhere; text-align: left; }
.dm-mv:hover { background: var(--bg-soft); }
.dm-mv.is-cur { background: var(--primary); color: var(--primary-text); }
.dm-mv:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.dm-mv sup { color: #c98a00; font-size: .8em; }
.dm-mv.is-cur sup { color: inherit; }
.dm-md { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--dm-c0); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); }
.dm-md[data-c="1"] { background: var(--dm-c1); }
.dm-nomoves { margin: 2.2rem var(--sp-3); color: var(--muted); font-size: var(--fs-sm); text-align: center; }
.dm-res { margin: 2px 0 8px; font-weight: 750; text-align: center; }
.dm-nav { display: flex; align-items: center; gap: 6px; }
.dm-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; }
.dm-ib:hover:not(:disabled) { background: var(--bg-soft); }
.dm-ib:disabled { opacity: .38; cursor: default; }
.dm-ib:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dm-back { flex: none; min-height: 40px; }
.dm-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dm-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; }
.dm-tools .btn svg { width: 22px; height: 22px; }
.dm-tools .btn:disabled { opacity: .45; }
.dm-tools .btn.is-confirm { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
@media (max-width: 899px) {
  .dm-tools { order: -1; }
  .dm-status { order: -2; }
}
.dm-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) { .dm-keys { display: block; } }

/* Kenar çubuğu */
.dm-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); }
.dm-side dt { color: var(--muted); }
.dm-side dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.dm-side .btn.is-confirm { color: var(--danger); }
.dm-side { min-width: 0; }
.dm-side + .dm-side { margin-top: var(--sp-5); }
.dm-st-var { margin: calc(var(--sp-2) * -1) 0 var(--sp-2); color: var(--muted); font-size: var(--fs-xs); }
.dm-st-table th, .dm-st-table td { padding-left: 6px; padding-right: 6px; font-size: var(--fs-xs); }
.dm-st-table th[scope="row"] { font-weight: 600; white-space: nowrap; }
.dm-st-table .dm-lvdot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; vertical-align: 1px; box-shadow: none; }
.dm-diff th[scope="row"] { white-space: normal; color: var(--muted); }
.dm-diff td { line-height: 1.3; }

/* ---------- 30. Örümcek Solitaire ---------- */
/* Kart, masa, çubuk, ayarlar ve kazanma ekranı bölüm 24'ten (.sol, .sc) gelir; kök: .tool.sol.sp.
   On sütun: JS --cw/--ch/--rank/--strip verir, dar ekranda .is-tiny (kalın, büyük köşe indeksi).
   Sol üstte tamamlanan diziler için .sp-tray, sağ üstte deste (.sp-stock) ve kalan dağıtım rozeti (.sp-badge). */
@media (max-width: 599px) {
  /* Telefonda masa kenardan kenara: on sütun için her piksel değerli */
  .sp { margin-inline: calc(-1 * var(--sp-4)); padding: var(--sp-3) 6px; border-inline: 0; border-radius: 0; }
  .sp .sol-bar { padding-inline: 6px; }
  .sp .sol-felt { padding: 6px 4px; border-radius: 12px; }
  .sp .sol-foot, .sp .pw-private, .sp .sol-opts { margin-inline: 6px; }
  .sp .sol-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .sp .sol-actions .btn { padding: 0 2px; font-size: .75rem; white-space: nowrap; letter-spacing: -.01em; }
}
.sp-board { min-height: 300px; isolation: isolate; }
.sp-deal { position: relative; }
.sp-dn {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--primary); color: #fff;
  font-size: .6875rem; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1;
}
.sp-dn[hidden] { display: none; }
@media (max-width: 599px) { .sp-dn { position: absolute; top: 4px; right: calc(50% - 22px); min-width: 17px; height: 17px; padding: 0 4px; } }

/* Tamamlanan diziler alanı */
.sp-tray {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: flex-end; justify-content: flex-end;
  height: var(--ch);
  padding: 0 calc(var(--cw) * .12) calc(var(--cw) * .1);
  border: 2px dashed rgba(255, 255, 255, .16);
  border-radius: var(--sc-r);
  background: linear-gradient(90deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .04));
  pointer-events: none;
}
.sp-tray-n { display: inline-flex; align-items: center; gap: 3px; color: rgba(255, 255, 255, .5); font-size: max(11px, calc(var(--cw) * .2)); font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-tray-n svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.sp-tray-n b { color: rgba(255, 255, 255, .85); font-weight: 800; }

/* Deste ve kalan dağıtım rozeti */
.sp-stock { border-style: solid; border-color: rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .1); }
.sp-stock::before { content: ""; width: 34%; aspect-ratio: 1; border: 2px solid rgba(255, 255, 255, .22); border-radius: 50%; }
.sp-stock:not(.is-empty)::before { display: none; }
.sp-badge {
  position: absolute; left: 0; top: 0; z-index: 1500;
  display: grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--radius-pill);
  background: #ffd43b; color: #3b2a00;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .35);
  font-size: 11px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition: transform .24s var(--ease);
}
.sp-badge[hidden] { display: none; }

/* Dar ekran kartı: büyük ve kalın köşe indeksi, ortada belirgin renk simgesi */
.sp-board.is-tiny { --sc-r: max(3px, calc(var(--cw) * .1)); }
.is-tiny .sc-i { top: calc(var(--cw) * .04); left: calc(var(--cw) * .06); right: calc(var(--cw) * .04); }
.is-tiny .sc-i b { font-weight: 800; letter-spacing: -.08em; }
.is-tiny .sc-is { width: calc(var(--rank) * .74); height: calc(var(--rank) * .74); }
.is-tiny .sc-big { bottom: 8%; width: calc(var(--cw) * .6); height: calc(var(--cw) * .6); }
.is-tiny .sc-face { bottom: 7%; width: calc(var(--cw) * .74); height: calc(var(--cw) * .74); }
.is-tiny .sc-crown { width: calc(var(--cw) * .46); height: calc(var(--cw) * .46); }
.is-tiny .sc-fs { display: none; }
.is-tiny .sc-b::before { inset: max(3px, calc(var(--cw) * .1)); }
.is-tiny .sc-b svg { width: calc(var(--cw) * .5); height: calc(var(--cw) * .5); }

/* Tamamlanan dizinin temele uçuşu */
.sc.is-fly { transition: transform .44s cubic-bezier(.2, .75, .25, 1); }
.sc.is-fly .sc-f { animation: sp-glow .7s ease-out; }
@keyframes sp-glow { 0% { box-shadow: 0 0 0 2px var(--sol-glow), 0 0 22px 6px color-mix(in srgb, var(--sol-glow) 75%, transparent); } }

/* Zorluk sekmelerindeki renk simgeleri */
.sp-pips { display: inline-flex; gap: 1px; margin-right: 6px; }
.sp-pips svg { width: 12px; height: 12px; fill: var(--text); }
.sp-pips .h { fill: #d0263c; }
:root[data-theme="dark"] .sp-pips .h { fill: #ff6b81; }
@media (prefers-reduced-motion: reduce) { .sc.is-fly, .sp-badge { transition: none !important; } .sc.is-fly .sc-f { animation: none; } }

/* ---------- 31. 2048 ---------- */
/* Tahta .g48-board: hücre boyu ve aralık JS'ten (--cs, --gap, --n). Taşlar .g48-t mutlak konumlu, yerleri
   transform ile; yüz .g48-tf gradyan + üst ışık + alt gölge. Renkler .g48[data-skin] (warm, ocean, candy)
   ve koyu tema için değer başına --t1/--t2/--tx değişkenleri. */
.g48 { padding: var(--sp-3); }
@media (min-width: 640px) { .g48 { padding: var(--sp-5); } }
.g48 {
  --g48-tray1: #c9bba9; --g48-tray2: #b2a18e; --g48-cell: #d8ccbf; --g48-edge: #9d8b77;
}
.g48[data-skin="ocean"] { --g48-tray1: #a6bddb; --g48-tray2: #8aa4c7; --g48-cell: #c4d5ec; --g48-edge: #7590b5; }
.g48[data-skin="candy"] { --g48-tray1: #dcbdd3; --g48-tray2: #c7a0bc; --g48-cell: #ecd6e5; --g48-edge: #b48aa8; }
:root[data-theme="dark"] .g48 { --g48-tray1: #2d2924; --g48-tray2: #23201c; --g48-cell: #39342e; --g48-edge: #171512; }
:root[data-theme="dark"] .g48[data-skin="ocean"] { --g48-tray1: #1a2638; --g48-tray2: #131c2a; --g48-cell: #223148; --g48-edge: #0c121c; }
:root[data-theme="dark"] .g48[data-skin="candy"] { --g48-tray1: #2d1c2a; --g48-tray2: #231621; --g48-cell: #3a2537; --g48-edge: #150d14; }

/* Üst çubuk: puanlar + düğmeler */
.g48-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); max-width: 560px; margin: 0 auto var(--sp-3); }
.g48-scores { display: flex; gap: 6px; min-width: 0; }
.g48-score {
  position: relative;
  display: grid; justify-items: center; gap: 1px;
  min-width: 78px; padding: 6px 12px 7px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--g48-tray1), var(--g48-tray2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 0 var(--g48-edge);
  color: #fff;
  line-height: 1.15;
}
.g48-score span:first-child { font-size: .6875rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.g48-score b { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.g48-score.is-best span:first-child::before { content: "★ "; color: #ffd43b; }
.g48-score.is-bump b { animation: g48-bump .26s var(--ease); }
.g48-score.is-rec { animation: g48-rec 1s ease-out; }
@keyframes g48-bump { 40% { transform: scale(1.12); } }
@keyframes g48-rec { 0% { box-shadow: 0 0 0 0 rgba(255, 196, 0, .9), 0 2px 0 var(--g48-edge); } 100% { box-shadow: 0 0 0 14px rgba(255, 196, 0, 0), 0 2px 0 var(--g48-edge); } }
.g48-add {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  color: var(--text); font-size: 1.05rem; font-weight: 800;
  pointer-events: none; white-space: nowrap;
  animation: g48-add .85s ease-out forwards;
}
@keyframes g48-add { 0% { opacity: 1; transform: translate(-50%, -10%); } 100% { opacity: 0; transform: translate(-50%, -160%); } }
.g48-actions { display: flex; flex: none; gap: 6px; }
.g48-actions .btn { min-height: 42px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.g48-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: 559px) {
  .g48-actions .btn { width: 42px; padding: 0; }
  .g48-actions .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 359px) { .g48-score { min-width: 64px; padding-inline: 8px; } .g48-score b { font-size: 1.1rem; } }

/* Yeni oyun menüsü */
.g48-menu-wrap { position: relative; }
.g48-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: g48-menu .16s var(--ease);
}
@keyframes g48-menu { from { opacity: 0; transform: translateY(-4px); } }
.g48-mi {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 56px; padding: 6px var(--sp-3);
  border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text);
  font: inherit; text-align: left;
  cursor: pointer;
}
.g48-mi:hover, .g48-mi:focus-visible { background: var(--bg-soft); }
.g48-mi:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.g48-mi[aria-checked="true"] { background: var(--primary-soft); }
.g48-mi-b { display: grid; gap: 1px; }
.g48-mi b { font-weight: 700; }
.g48-mi small { color: var(--muted); font-size: var(--fs-xs); }
.g48-mi-grid {
  flex: none; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 2px;
  width: 34px; height: 34px; padding: 3px;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--g48-tray1), var(--g48-tray2));
}
.g48-mi-grid i { border-radius: 2px; background: var(--g48-cell); }
.g48-mi-grid i:first-child { background: #f8a052; }
.g48-mi-grid i:nth-child(2) { background: #ffd04f; }

/* Ayarlar */
.g48-opts { display: grid; gap: var(--sp-4); max-width: 560px; margin: 0 auto var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); animation: g48-menu .18s var(--ease); }
@media (min-width: 640px) { .g48-opts { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.g48-opts .check { min-height: 40px; font-size: var(--fs-sm); }
.g48-skins { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.g48-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;
}
.g48-skin i { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 28px; height: 28px; padding: 3px; border-radius: 8px; background: var(--k0); }
.g48-skin i::before, .g48-skin i::after { content: ""; border-radius: 3px; background: linear-gradient(160deg, var(--k1), var(--k2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.g48-skin i::after { background: linear-gradient(160deg, var(--k3), var(--k4)); }
.g48-skin[data-skin="warm"] i { --k0: #b8a793; --k1: #ffc37f; --k2: #f8964a; --k3: #ffe45c; --k4: #f4a300; }
.g48-skin[data-skin="ocean"] i { --k0: #8fa8ca; --k1: #66bff6; --k2: #258fe0; --k3: #57e2d1; --k4: #12b0a1; }
.g48-skin[data-skin="candy"] i { --k0: #caa5c0; --k1: #ff92ca; --k2: #ea4697; --k3: #aaa6ff; --k4: #6a5ff4; }
.g48-skin[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); }
.g48-skin:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Bilgi satırı */
.g48-sub {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--sp-3);
  max-width: 560px; margin: 0 auto var(--sp-3);
  color: var(--muted); font-size: var(--fs-sm);
}
.g48-sub b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.g48-size { color: var(--text); font-weight: 700; }
.g48-sub-r { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-3); }
.g48-chip {
  display: inline-grid; place-items: center;
  min-width: 30px; height: 24px; padding: 0 7px;
  border-radius: 6px;
  background: linear-gradient(165deg, var(--t1, var(--bg-soft)), var(--t2, var(--bg-soft)));
  color: var(--tx, var(--text)) !important;
  font-size: .8125rem; font-weight: 800;
  text-shadow: 0 1px 1px var(--ts, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(0, 0, 0, .12);
}

/* Sahne ve tahta */
.g48-stage { position: relative; width: min(100%, 560px, max(300px, 100vh - 380px)); margin: 0 auto; }
@supports (height: 100svh) { .g48-stage { width: min(100%, 560px, max(300px, 100svh - 380px)); } }
.g48-board {
  --cs: 80px; --gap: 12px;
  position: relative;
  width: 100%; aspect-ratio: 1;
  border-radius: calc(var(--cs) * .14 + var(--gap) * .8);
  background: linear-gradient(180deg, var(--g48-tray1), var(--g48-tray2));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 -3px 0 rgba(0, 0, 0, .1), 0 4px 0 var(--g48-edge), 0 18px 40px -12px rgba(40, 25, 10, .45);
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.g48-board:focus-visible { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--focus), 0 4px 0 var(--g48-edge); }
:root[data-theme="dark"] .g48-board { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 4px 0 var(--g48-edge), 0 18px 40px -12px rgba(0, 0, 0, .7); }
.g48-cells {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); grid-auto-rows: 1fr; gap: var(--gap);
  padding: var(--gap);
}
.g48-cells i {
  border-radius: calc(var(--cs) * .12);
  background: var(--g48-cell);
  box-shadow: inset 0 calc(var(--cs) * .035) calc(var(--cs) * .06) rgba(0, 0, 0, .09), 0 1px 0 rgba(255, 255, 255, .18);
}
:root[data-theme="dark"] .g48-cells i { box-shadow: inset 0 calc(var(--cs) * .035) calc(var(--cs) * .06) rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .03); }
.g48-tiles { position: absolute; inset: 0; }
.g48-board.is-nudge[data-nudge="0"] .g48-tiles { animation: g48-nu .18s ease; }
.g48-board.is-nudge[data-nudge="1"] .g48-tiles { animation: g48-nr .18s ease; }
.g48-board.is-nudge[data-nudge="2"] .g48-tiles { animation: g48-nd .18s ease; }
.g48-board.is-nudge[data-nudge="3"] .g48-tiles { animation: g48-nl .18s ease; }
@keyframes g48-nu { 50% { transform: translateY(-3px); } }
@keyframes g48-nd { 50% { transform: translateY(3px); } }
@keyframes g48-nl { 50% { transform: translateX(-3px); } }
@keyframes g48-nr { 50% { transform: translateX(3px); } }

/* Taş */
.g48-t {
  --t1: #3c4250; --t2: #1b1f29; --tx: #ffd84a; --ts: rgba(0, 0, 0, .3); --gk: .26; --fs: .5;
  position: absolute; left: 0; top: 0; z-index: 1;
  width: var(--cs); height: var(--cs);
  transition: transform .11s ease-in-out;
  will-change: transform;
}
.g48-t[data-d="2"] { --fs: .46; }
.g48-t[data-d="3"] { --fs: .39; }
.g48-t[data-d="4"] { --fs: .3; }
.g48-t[data-d="5"] { --fs: .245; }
.g48-t[data-d="6"] { --fs: .205; }
.g48-board.no-anim .g48-t { transition: none; }
.g48-t.is-gone { z-index: 0; }
.g48-t.is-merged { z-index: 2; }
.g48-tf {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  overflow: hidden;
  border-radius: calc(var(--cs) * .12);
  background: linear-gradient(165deg, var(--t1), var(--t2));
  color: var(--tx);
  font-size: calc(var(--cs) * var(--fs));
  font-weight: 800; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  text-shadow: 0 calc(var(--cs) * .012) calc(var(--cs) * .03) var(--ts);
  box-shadow:
    inset 0 calc(var(--cs) * .035) 0 rgba(255, 255, 255, .42),
    inset 0 calc(var(--cs) * -.055) 0 rgba(0, 0, 0, .14),
    0 calc(var(--cs) * .04) calc(var(--cs) * .09) rgba(50, 25, 0, .2),
    0 0 calc(var(--cs) * var(--gk, 0)) color-mix(in srgb, var(--t2) 75%, transparent);
}
.g48-tf::before {
  content: ""; position: absolute; inset: 0 0 52% 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0));
  pointer-events: none;
}
:root[data-theme="dark"] .g48-tf { box-shadow: inset 0 calc(var(--cs) * .03) 0 rgba(255, 255, 255, .22), inset 0 calc(var(--cs) * -.055) 0 rgba(0, 0, 0, .25), 0 calc(var(--cs) * .04) calc(var(--cs) * .09) rgba(0, 0, 0, .4), 0 0 calc(var(--cs) * var(--gk, 0) * 1.3) color-mix(in srgb, var(--t2) 70%, transparent); }
:root[data-theme="dark"] .g48-t[data-v="2"] .g48-tf::before, :root[data-theme="dark"] .g48-t[data-v="4"] .g48-tf::before { opacity: .35; }
.g48-t.is-shine .g48-tf::after {
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: g48-shine 3.2s ease-in-out infinite 1s;
  pointer-events: none;
}
@keyframes g48-shine { 0% { transform: translateX(-120%); } 35%, 100% { transform: translateX(120%); } }
.g48-t.is-new .g48-tf { animation: g48-new .2s ease-out .1s backwards; }
.g48-t.is-merged .g48-tf { animation: g48-pop .22s ease-out; }
.g48-t.is-merged.is-big .g48-tf { animation: g48-popb .32s ease-out; }
.g48-t.is-merged.is-big::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: calc(var(--cs) * .12);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--t1) 85%, transparent);
  animation: g48-ring .5s ease-out forwards;
}
.g48-t.is-undo .g48-tf { animation: g48-undo .2s ease-out; }
@keyframes g48-new { 0% { opacity: 0; transform: scale(.1); } 70% { opacity: 1; transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes g48-pop { 0% { transform: scale(1); } 45% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes g48-popb { 0% { transform: scale(1); } 40% { transform: scale(1.28) rotate(-2deg); } 70% { transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes g48-ring { to { box-shadow: 0 0 0 calc(var(--cs) * .28) transparent; } }
@keyframes g48-undo { from { opacity: .3; transform: scale(.92); } }

/* Bitiş / kazanma katmanı */
.g48-end {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  padding: var(--sp-3);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter: blur(3px) saturate(1.2); backdrop-filter: blur(3px) saturate(1.2);
  animation: g48-fade .45s ease-out;
}
.g48-end.is-win { background: radial-gradient(circle at 50% 40%, rgba(255, 214, 64, .45), color-mix(in srgb, var(--surface) 55%, transparent) 70%); }
@keyframes g48-fade { from { opacity: 0; } }
.g48-end-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: g48-card .42s var(--ease);
}
@keyframes g48-card { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.g48-end-card p { margin: 0 0 var(--sp-3); color: var(--text-soft); font-size: var(--fs-sm); }
.g48-end-card .g48-end-t { margin-bottom: var(--sp-2); color: var(--text); font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.01em; }
.g48-end-rec { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: var(--radius-pill); background: #fff4cc; color: #7a5200 !important; font-weight: 700; }
:root[data-theme="dark"] .g48-end-rec { background: #3a2e0c; color: #ffd75e !important; }
.g48-end-card .btn-row { justify-content: center; margin: 0; }
.g48-end-tile { display: grid; place-items: center; margin: 0 0 var(--sp-3); }
.g48-end-tile .g48-t { --cs: 76px; position: relative; display: block; transform: none; animation: g48-trophy .7s var(--ease); }
@keyframes g48-trophy { 0% { transform: scale(.3) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.12) rotate(3deg); opacity: 1; } 100% { transform: none; } }
.g48-fx { position: absolute; inset: -40px; z-index: 6; width: calc(100% + 80px); height: calc(100% + 80px); pointer-events: none; }

.g48-keys { display: none; margin: var(--sp-4) 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.9; text-align: center; }
@media (hover: hover) and (min-width: 900px) { .g48-keys { display: block; } }
.g48 .pw-private { justify-content: center; }

/* Kenar çubuğu: istatistik ve taş koleksiyonu */
.g48-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); }
.g48-side dt { color: var(--muted); }
.g48-side dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.g48-side .btn.is-confirm { color: var(--danger); }
.g48-side, .g48-side ~ section { min-width: 0; }
.g48-st-table th, .g48-st-table td { padding-left: 6px; padding-right: 6px; font-size: var(--fs-xs); white-space: nowrap; }
.g48-st-table th[scope="row"] { font-weight: 600; }
.g48-coll { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: var(--sp-2) 0; padding: 0; list-style: none; }
.g48-t.g48-mini { --cs: 52px; position: relative; width: auto; height: auto; aspect-ratio: 1; transform: none; transition: none; container-type: inline-size; }
.g48-mini .g48-tf { font-size: calc(var(--fs) * 100cqw); border-radius: 18%; }
.g48-mini.is-locked .g48-tf { background: var(--bg-soft); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); text-shadow: none; }
.g48-mini.is-locked .g48-tf::before, .g48-mini.is-locked .g48-tf::after { display: none; }
.g48-coll-note { margin: 0 0 var(--sp-3); color: var(--muted); font-size: var(--fs-xs); }

/* Değer renkleri (warm varsayılan; ocean ve candy; koyu temada 2 ve 4) */
:is(.g48-t, .g48-chip)[data-v="2"] { --t1: #f4ede4; --t2: #e6d9c8; --tx: #6b5b4b; --ts: transparent; }
:is(.g48-t, .g48-chip)[data-v="4"] { --t1: #f5e4c3; --t2: #e7cfa3; --tx: #6b5b4b; --ts: transparent; }
:is(.g48-t, .g48-chip)[data-v="8"] { --t1: #ffc37f; --t2: #f8964a; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
:is(.g48-t, .g48-chip)[data-v="16"] { --t1: #ffa66b; --t2: #f47634; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
:is(.g48-t, .g48-chip)[data-v="32"] { --t1: #ff8a6b; --t2: #f1533b; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
:is(.g48-t, .g48-chip)[data-v="64"] { --t1: #ff6d55; --t2: #dc311e; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
:is(.g48-t, .g48-chip)[data-v="128"] { --t1: #ffd45e; --t2: #eaa923; --tx: #fff; --gk: 0.1; --ts: rgba(110, 50, 0, .55); }
:is(.g48-t, .g48-chip)[data-v="256"] { --t1: #ffc94a; --t2: #e59a14; --tx: #fff; --gk: 0.13; --ts: rgba(110, 50, 0, .55); }
:is(.g48-t, .g48-chip)[data-v="512"] { --t1: #ffbd3a; --t2: #df8a0b; --tx: #fff; --gk: 0.17; --ts: rgba(110, 50, 0, .55); }
:is(.g48-t, .g48-chip)[data-v="1024"] { --t1: #ffb02e; --t2: #d87905; --tx: #fff; --gk: 0.21; --ts: rgba(110, 50, 0, .55); }
:is(.g48-t, .g48-chip)[data-v="2048"] { --t1: #ffd84a; --t2: #ef9200; --tx: #fff; --gk: 0.26; --ts: rgba(110, 50, 0, .55); }
:is(.g48-t, .g48-chip)[data-v="4096"] { --t1: #c7a2ff; --t2: #8754f2; --tx: #fff; --gk: 0.26; --ts: rgba(0, 0, 0, .2); }
:is(.g48-t, .g48-chip)[data-v="8192"] { --t1: #94b6ff; --t2: #4a6cff; --tx: #fff; --gk: 0.26; --ts: rgba(0, 0, 0, .2); }
:is(.g48-t, .g48-chip)[data-v="16384"] { --t1: #6ad8e8; --t2: #1aa1b6; --tx: #fff; --gk: 0.26; --ts: rgba(0, 0, 0, .2); }
:is(.g48-t, .g48-chip)[data-v="32768"] { --t1: #73e4a8; --t2: #1ea665; --tx: #fff; --gk: 0.26; --ts: rgba(0, 0, 0, .2); }
:is(.g48-t, .g48-chip)[data-v="65536"] { --t1: #ff90c8; --t2: #df3f8e; --tx: #fff; --gk: 0.26; --ts: rgba(0, 0, 0, .2); }
:is(.g48-t, .g48-chip)[data-v="131072"] { --t1: #5b6478; --t2: #262c3b; --tx: #ffe680; --gk: 0.26; --ts: rgba(0, 0, 0, .2); }
[data-skin="ocean"] :is(.g48-t, .g48-chip)[data-v="2"] { --t1: #edf5fd; --t2: #d8e7f7; --tx: #31507b; --ts: transparent; }
[data-skin="ocean"] :is(.g48-t, .g48-chip)[data-v="4"] { --t1: #dbecfc; --t2: #c0daf4; --tx: #31507b; --ts: transparent; }
[data-skin="ocean"] :is(.g48-t, .g48-chip)[data-v="8"] { --t1: #92d5f8; --t2: #47afeb; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="ocean"] :is(.g48-t, .g48-chip)[data-v="16"] { --t1: #66bff6; --t2: #258fe0; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="ocean"] :is(.g48-t, .g48-chip)[data-v="32"] { --t1: #5f9ef9; --t2: #2d6ce4; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="ocean"] :is(.g48-t, .g48-chip)[data-v="64"] { --t1: #717ff7; --t2: #3a4bd6; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="ocean"] :is(.g48-t, .g48-chip)[data-v="128"] { --t1: #57e2d1; --t2: #12b0a1; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="ocean"] :is(.g48-t, .g48-chip)[data-v="256"] { --t1: #48d8b2; --t2: #0fa585; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="ocean"] :is(.g48-t, .g48-chip)[data-v="512"] { --t1: #55de97; --t2: #14a663; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="ocean"] :is(.g48-t, .g48-chip)[data-v="1024"] { --t1: #a2e563; --t2: #57a621; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="ocean"] :is(.g48-t, .g48-chip)[data-v="2048"] { --t1: #ffd84a; --t2: #ef9200; --tx: #fff; --ts: rgba(110, 50, 0, .55); }
[data-skin="ocean"] :is(.g48-t, .g48-chip)[data-v="4096"] { --t1: #ffa2ca; --t2: #e9498d; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="ocean"] :is(.g48-t, .g48-chip)[data-v="8192"] { --t1: #c7a2ff; --t2: #8754f2; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="ocean"] :is(.g48-t, .g48-chip)[data-v="16384"] { --t1: #ffb36b; --t2: #f0731c; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="ocean"] :is(.g48-t, .g48-chip)[data-v="32768"] { --t1: #ff8383; --t2: #dd3638; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="ocean"] :is(.g48-t, .g48-chip)[data-v="65536"] { --t1: #73e4a8; --t2: #1ea665; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="ocean"] :is(.g48-t, .g48-chip)[data-v="131072"] { --t1: #5b6478; --t2: #262c3b; --tx: #ffe680; --ts: rgba(0, 0, 0, .2); }
[data-skin="candy"] :is(.g48-t, .g48-chip)[data-v="2"] { --t1: #fdf0f7; --t2: #f7dbe9; --tx: #7a3b5e; --ts: transparent; }
[data-skin="candy"] :is(.g48-t, .g48-chip)[data-v="4"] { --t1: #fce3f1; --t2: #f2c4dc; --tx: #7a3b5e; --ts: transparent; }
[data-skin="candy"] :is(.g48-t, .g48-chip)[data-v="8"] { --t1: #ffb6da; --t2: #f26fb3; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="candy"] :is(.g48-t, .g48-chip)[data-v="16"] { --t1: #ff92ca; --t2: #ea4697; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="candy"] :is(.g48-t, .g48-chip)[data-v="32"] { --t1: #f791f2; --t2: #d43fec; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="candy"] :is(.g48-t, .g48-chip)[data-v="64"] { --t1: #d290ff; --t2: #a352f6; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="candy"] :is(.g48-t, .g48-chip)[data-v="128"] { --t1: #aaa6ff; --t2: #6a5ff4; --tx: #fff; --ts: rgba(110, 50, 0, .55); }
[data-skin="candy"] :is(.g48-t, .g48-chip)[data-v="256"] { --t1: #8dbaff; --t2: #387ff4; --tx: #fff; --ts: rgba(110, 50, 0, .55); }
[data-skin="candy"] :is(.g48-t, .g48-chip)[data-v="512"] { --t1: #72d5ff; --t2: #0ca2e6; --tx: #fff; --ts: rgba(110, 50, 0, .55); }
[data-skin="candy"] :is(.g48-t, .g48-chip)[data-v="1024"] { --t1: #5fe7d2; --t2: #12b5a3; --tx: #fff; --ts: rgba(110, 50, 0, .55); }
[data-skin="candy"] :is(.g48-t, .g48-chip)[data-v="2048"] { --t1: #ffd84a; --t2: #ef9200; --tx: #fff; --ts: rgba(110, 50, 0, .55); }
[data-skin="candy"] :is(.g48-t, .g48-chip)[data-v="4096"] { --t1: #ffb36b; --t2: #f0731c; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="candy"] :is(.g48-t, .g48-chip)[data-v="8192"] { --t1: #ff8383; --t2: #dd3638; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="candy"] :is(.g48-t, .g48-chip)[data-v="16384"] { --t1: #73e4a8; --t2: #1ea665; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="candy"] :is(.g48-t, .g48-chip)[data-v="32768"] { --t1: #94b6ff; --t2: #4a6cff; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="candy"] :is(.g48-t, .g48-chip)[data-v="65536"] { --t1: #c7a2ff; --t2: #8754f2; --tx: #fff; --ts: rgba(0, 0, 0, .2); }
[data-skin="candy"] :is(.g48-t, .g48-chip)[data-v="131072"] { --t1: #5b6478; --t2: #262c3b; --tx: #ffe680; --ts: rgba(0, 0, 0, .2); }
:root[data-theme="dark"] :is(.g48-t, .g48-chip)[data-v="2"] { --t1: #3d3833; --t2: #322d28; --tx: #eadccb; }
:root[data-theme="dark"] :is(.g48-t, .g48-chip)[data-v="4"] { --t1: #4b4237; --t2: #3e352b; --tx: #f2e2c4; }
:root[data-theme="dark"] [data-skin="ocean"] :is(.g48-t, .g48-chip)[data-v="2"] { --t1: #263649; --t2: #1e2b3c; --tx: #d0e3fa; }
:root[data-theme="dark"] [data-skin="ocean"] :is(.g48-t, .g48-chip)[data-v="4"] { --t1: #2d4462; --t2: #233651; --tx: #d8e9fb; }
:root[data-theme="dark"] [data-skin="candy"] :is(.g48-t, .g48-chip)[data-v="2"] { --t1: #432a3b; --t2: #372230; --tx: #f6d3e7; }
:root[data-theme="dark"] [data-skin="candy"] :is(.g48-t, .g48-chip)[data-v="4"] { --t1: #542e49; --t2: #45263c; --tx: #f9d7eb; }
@media (prefers-reduced-motion: reduce) {
  .g48-t { transition: none; }
  .g48-tf, .g48-t::after, .g48-tf::after, .g48-score b, .g48-score, .g48-add, .g48-end, .g48-end-card, .g48-end-tile .g48-t, .g48-menu, .g48-opts, .g48-tiles { animation: none !important; }
}

/* ---------- 32. Kelime Tahmin (Word Guess) ---------- */
/* Tahta .wg-board: kutu boyu --ts ekran genişliği ve yüksekliğinden (svh) hesaplanır. Kutu .wg-tile; harf
   girilince [data-l] (kenar koyulaşır, .is-pop), tahminde .is-flip ile döner ve yarıda [data-s] 0/1/2 alır.
   Renkler --wg-ok/in/no (açık/koyu, .is-cb = turuncu/mavi yüksek kontrast). Klavye .wg-kb, tuş genişliği --kn
   (EN 10, TR 11 tuşluk satır). İstatistik ve yardım <dialog class="wg-dlg">. */
.wg, .wg-legend {
  --wg-ok1: #43b866; --wg-ok2: #2d9a50;
  --wg-in1: #ecc246; --wg-in2: #d3a51e;
  --wg-no1: #8b94a4; --wg-no2: #727b8c;
  --wg-key: #dfe3ea; --wg-key-edge: #c3c9d3;
}
:root[data-theme="dark"] .wg, :root[data-theme="dark"] .wg-legend {
  --wg-ok1: #3fa760; --wg-ok2: #2f8a4c;
  --wg-in1: #cfa933; --wg-in2: #b38f1d;
  --wg-no1: #424958; --wg-no2: #363c49;
  --wg-key: #2c3342; --wg-key-edge: #191e28;
}
:root[data-theme] .wg.is-cb, :root[data-theme] .wg-legend.is-cb { --wg-ok1: #f78a45; --wg-ok2: #e5671f; --wg-in1: #78b6f5; --wg-in2: #4a95e6; }
:is(.wg, .wg-legend) [data-s="2"] { --c1: var(--wg-ok1); --c2: var(--wg-ok2); }
:is(.wg, .wg-legend) [data-s="1"] { --c1: var(--wg-in1); --c2: var(--wg-in2); }
:is(.wg, .wg-legend) [data-s="0"] { --c1: var(--wg-no1); --c2: var(--wg-no2); }
.wg { padding: var(--sp-3); }
@media (min-width: 640px) { .wg { padding: var(--sp-5); } }
.wg.is-error .wg-board { display: block; padding: var(--sp-5); color: var(--danger); text-align: center; }

/* Üst çubuk: mod sekmeleri + düğmeler */
.wg-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); max-width: 520px; margin: 0 auto var(--sp-3); }
.wg-modes, .wg-st-tabs {
  display: inline-flex; flex: none; gap: 2px;
  padding: 3px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--bg-soft);
}
.wg-mode, .wg-st-tab {
  min-height: 36px; padding: 0 14px;
  border: 0; border-radius: var(--radius-pill);
  background: none; color: var(--muted);
  font: inherit; font-size: var(--fs-sm); font-weight: 650; white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wg-mode b { color: var(--primary); font-weight: 800; font-variant-numeric: tabular-nums; }
.wg-mode[aria-selected="true"], .wg-st-tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), 0 0 0 1px var(--border); }
.wg-mode:focus-visible, .wg-st-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.wg-actions { display: flex; flex: none; gap: 6px; }
.wg-actions .btn { min-height: 42px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.wg-actions .btn[aria-expanded="true"] { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 35%, transparent); color: var(--primary); }
.wg-actions .btn.is-armed { border-color: var(--warning); color: var(--warning); }
.wg-only-p { display: none !important; }
.wg[data-mode="p"] .wg-only-p { display: inline-flex !important; }
.wg-actions .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wg-actions .btn { width: 42px; padding: 0; }
@media (max-width: 459px) { .wg-top { gap: var(--sp-2); } .wg-mode { padding: 0 10px; font-size: var(--fs-xs); } .wg-actions { gap: 4px; } .wg-actions .btn { width: 38px; min-height: 38px; } }
@media (max-width: 359px) { .wg { padding: var(--sp-2); } .wg-mode { padding: 0 7px; } .wg-actions .btn { width: 34px; } }

/* Ayarlar */
.wg-opts { display: grid; gap: var(--sp-3); max-width: 520px; margin: 0 auto var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); animation: wg-fade .18s var(--ease); }
.wg-opts .field { margin: 0; }
.wg-opts .check { min-height: 36px; font-size: var(--fs-sm); font-weight: 600; }
.wg-opts .hint { display: block; margin: -2px 0 0 28px; color: var(--muted); font-size: var(--fs-xs); }
.wg-opts > .btn { justify-self: start; }
@keyframes wg-fade { from { opacity: 0; transform: translateY(-4px); } }

/* Sahne ve tahta */
.wg-stage { position: relative; display: grid; justify-content: center; margin: 0 auto var(--sp-4); }
.wg-board {
  --wg-gap: 6px;
  --ts: max(40px, min(62px, (100vw - 80px) / 5, (100vh - 340px) / 6.7));
  display: grid; grid-template-rows: repeat(6, var(--ts)); gap: var(--wg-gap);
  -webkit-user-select: none; user-select: none;
}
@supports (height: 100svh) { .wg-board { --ts: max(40px, min(62px, (100vw - 80px) / 5, (100svh - 340px) / 6.7)); } }
.wg-row { display: grid; grid-template-columns: repeat(5, var(--ts)); gap: var(--wg-gap); }
.wg-tile {
  --ts: 52px;
  position: relative;
  display: grid; place-items: center;
  width: var(--ts); height: var(--ts);
  border: 2px solid var(--border-strong);
  border-radius: calc(var(--ts) * .13);
  background: var(--surface);
  color: var(--text);
  font-size: calc(var(--ts) * .5); font-weight: 800; line-height: 1;
  -webkit-user-select: none; user-select: none;
}
.wg-board .wg-tile { --ts: inherit; }
:root[data-theme="dark"] .wg-tile:not([data-s]) { border-color: #3a4150; background: color-mix(in srgb, var(--surface) 80%, var(--bg)); }
.wg-tile[data-l]:not([data-s]) { border-color: color-mix(in srgb, var(--text) 42%, var(--border-strong)); }
:root[data-theme="dark"] .wg-tile[data-l]:not([data-s]) { border-color: #6b7487; }
.wg-tile[data-s] {
  border-color: transparent;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 calc(var(--ts) * -.05) 0 rgba(0, 0, 0, .14), 0 3px 8px -3px color-mix(in srgb, var(--c2) 70%, transparent);
}
:root[data-theme="dark"] .wg-tile[data-s="0"] { color: #d5dae3; }
.wg-tile.is-pop { animation: wg-pop .12s ease-out; }
.wg-tile.is-flip { animation: wg-flip .46s ease-in-out both; }
.wg-tile.is-win { animation: wg-jump .62s cubic-bezier(.3, .7, .4, 1) both; }
.wg-row.is-shake { animation: wg-shake .5s ease; }
@keyframes wg-pop { 0% { transform: scale(.84); } 55% { transform: scale(1.09); } 100% { transform: scale(1); } }
@keyframes wg-flip { 0% { transform: perspective(400px) rotateX(0); } 50% { transform: perspective(400px) rotateX(-90deg); } 100% { transform: perspective(400px) rotateX(0); } }
@keyframes wg-jump { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-36%); } 52% { transform: translateY(5%); } 72% { transform: translateY(-12%); } 88% { transform: translateY(1%); } }
@keyframes wg-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(5px); } 30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); } }

/* Mesajlar ve konfeti */
.wg-msgs { position: absolute; left: 50%; top: 8%; z-index: 5; display: grid; justify-items: center; gap: 6px; transform: translateX(-50%); pointer-events: none; }
.wg-msg {
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--text); color: var(--surface);
  font-size: var(--fs-sm); font-weight: 700; white-space: nowrap;
  box-shadow: var(--shadow-lg);
  animation: wg-msg .18s var(--ease);
  transition: opacity .25s, transform .25s;
}
.wg-msg.is-out { opacity: 0; transform: translateY(-6px); }
@keyframes wg-msg { from { opacity: 0; transform: translateY(6px) scale(.96); } }
.wg-fx { position: absolute; inset: -40px -20px; z-index: 4; width: calc(100% + 40px); height: calc(100% + 80px); pointer-events: none; }

/* Oyun sonu paneli */
.wg-after {
  display: grid; gap: var(--sp-3);
  max-width: 520px; margin: 0 auto var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2);
  animation: wg-fade .3s var(--ease);
}
.wg-after-t { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.wg-after-w { display: inline-flex; gap: 3px; }
.wg-after-w i {
  display: grid; place-items: center;
  width: 28px; height: 32px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  color: #fff; font-style: normal; font-weight: 800; font-size: 1rem;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .14);
}
.wg-after-l { display: grid; gap: 1px; line-height: 1.3; }
.wg-after-l b { font-weight: 750; }
.wg-after-l a { font-size: var(--fs-sm); }
.wg-after-b { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--sp-2) var(--sp-3); }
.wg-after-b .btn { min-height: 44px; padding-inline: var(--sp-3); white-space: nowrap; }
.wg-next { display: grid; gap: 1px; line-height: 1.15; }
.wg-next small { color: var(--muted); font-size: var(--fs-xs); }
.wg-next b { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.wg-after-b .wg-next { order: -1; grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--sp-2); }
.wg-after-b .wg-next small { font-size: var(--fs-sm); }
@media (min-width: 520px) {
  .wg-after-b:has(.wg-next) { grid-template-columns: auto 1fr 1fr; }
  .wg-after-b .wg-next { grid-column: auto; display: grid; gap: 1px; padding-right: var(--sp-2); }
  .wg-after-b .wg-next small { font-size: var(--fs-xs); }
}

/* Klavye */
.wg-kb { --kn: 10; --kg: 5px; display: grid; gap: 7px; max-width: 520px; margin: 0 auto; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
:lang(tr) .wg-kb { --kn: 11; --kg: 4px; }
.wg-kr { display: flex; justify-content: center; gap: var(--kg); }
.wg-k {
  --kw: calc((100% - (var(--kn) - 1) * var(--kg)) / var(--kn));
  display: grid; place-items: center;
  flex: 0 1 var(--kw); min-width: 0;
  height: clamp(46px, 7vh, 58px); padding: 0;
  border: 0; border-radius: 7px;
  background: var(--wg-key); color: var(--text);
  font: inherit; font-size: clamp(.95rem, 4.2vw, 1.2rem); font-weight: 750; line-height: 1;
  box-shadow: 0 2px 0 var(--wg-key-edge);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .25s ease, color .25s ease, transform .06s ease, box-shadow .06s ease;
}
.wg-k.is-wide { flex-basis: calc(var(--kw) * 1.5 + var(--kg) / 2); font-size: clamp(.72rem, 3vw, .85rem); letter-spacing: .04em; text-transform: uppercase; }
.wg-k svg { width: 24px; height: 24px; }
.wg-k:hover { filter: brightness(1.04); }
.wg-k:active, .wg-k.is-press { transform: translateY(2px); box-shadow: 0 0 0 var(--wg-key-edge); }
.wg-k:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.wg-k[data-s] { background: linear-gradient(180deg, var(--c1), var(--c2)); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .2); box-shadow: 0 2px 0 color-mix(in srgb, var(--c2) 72%, #000); }
:root[data-theme="dark"] .wg-k[data-s="0"] { color: #9aa3b4; text-shadow: none; }
.wg-keys { display: none; margin: var(--sp-4) 0 0; color: var(--muted); font-size: var(--fs-xs); text-align: center; }
@media (hover: hover) and (min-width: 900px) { .wg-keys { display: block; } }

/* Diyaloglar */
.wg-dlg {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  padding: 0;
  border: 0; border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: auto;
}
.wg-dlg[open] { animation: wg-dlg .22s var(--ease); }
.wg-dlg::backdrop { background: rgba(8, 12, 20, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@keyframes wg-dlg { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.wg-dlg-in { position: relative; padding: var(--sp-5); }
.wg-dlg h2 { margin: 0 0 var(--sp-4); font-size: var(--fs-md); font-weight: 800; letter-spacing: .02em; text-align: center; }
.wg-dlg h2:focus { outline: none; }
.wg-dlg h3 { margin: var(--sp-5) 0 var(--sp-3); color: var(--muted); font-size: var(--fs-xs); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.wg-x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.wg-x:hover { background: var(--bg-soft); color: var(--text); }
.wg-x:focus-visible { outline: 2px solid var(--focus); }
.wg-st-tabs { display: flex; width: max-content; margin: 0 auto var(--sp-4); }
.wg-st-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); text-align: center; }
.wg-st-nums b { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.wg-st-nums span { display: block; color: var(--muted); font-size: .75rem; line-height: 1.25; }
.wg-dist { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.wg-db { display: grid; grid-template-columns: 14px 1fr; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.wg-db b {
  display: flex; justify-content: flex-end; align-items: center;
  width: var(--p); min-width: 28px; height: 24px; padding: 0 8px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--wg-no2), var(--wg-no1));
  color: #fff; font-size: .8125rem;
  transform-origin: left center;
  animation: wg-grow .55s var(--ease) both;
}
.wg-db:nth-child(2) b { animation-delay: .04s; } .wg-db:nth-child(3) b { animation-delay: .08s; } .wg-db:nth-child(4) b { animation-delay: .12s; } .wg-db:nth-child(5) b { animation-delay: .16s; } .wg-db:nth-child(6) b { animation-delay: .2s; }
.wg-db.is-hi b { background: linear-gradient(90deg, var(--wg-ok2), var(--wg-ok1)); }
.wg-db i { font-style: normal; }
@keyframes wg-grow { from { transform: scaleX(.15); opacity: .4; } }
.wg-st-none { margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--fs-sm); text-align: center; }
.wg-st-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.wg-st-foot .wg-next { margin-right: auto; }
.wg-st-foot .btn { min-height: 44px; }
.wg-help-l { display: grid; gap: 4px; margin: 0 0 var(--sp-4); padding-left: 1.2em; color: var(--text-soft); }
.wg-ex-i { margin-bottom: var(--sp-3); }
.wg-ex-i p { margin: 4px 0 0; color: var(--text-soft); font-size: var(--fs-sm); }
.wg-ex { display: flex; gap: 4px; }
.wg-ex .wg-tile { --ts: 40px; }
.wg-help-f { margin: var(--sp-4) 0; padding-top: var(--sp-3); border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-sm); }

/* Kenar sütunu */
.wg-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); }
.wg-side dt { color: var(--muted); }
.wg-side dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.wg-side, .wg-side ~ section { min-width: 0; }
.wg-legend { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-4); padding: 0; list-style: none; font-size: var(--fs-sm); }
.wg-legend li { display: flex; align-items: center; gap: var(--sp-3); }
.wg-legend .wg-tile { --ts: 30px; flex: none; }
.wg-table td b { letter-spacing: .08em; }
@media (prefers-reduced-motion: reduce) {
  .wg-tile, .wg-row, .wg-msg, .wg-after, .wg-opts, .wg-dlg[open], .wg-db b { animation: none !important; }
  .wg-k { transition: none; }
}

/* ---------- 33. Kelime Avı (Word Search) ---------- */
/* .ws-paper kâğıt görünümlü kart; içindeki .ws-board tam harf alanı (hücre boyu JS'ten --cs, --n).
   Vurgular .ws-marks SVG'sinde hücre biriminde kapsül çizgiler: dış çizgi --k, iç dolgu --kl.
   Renkler .ws-k0…9 (bulunma sırasına göre); koyu temada dolgu koyu tonda, harfler beyaz. */
.ws { padding: var(--sp-3); --ws-p1: #fffdf8; --ws-p2: #fbf6ea; --ws-edge: #e8dfcc; --ws-ink: #2a2f3c; --ws-tint: #fff; }
@media (min-width: 640px) { .ws { padding: var(--sp-5); } }
:root[data-theme="dark"] .ws { --ws-p1: #1d2333; --ws-p2: #171c2a; --ws-edge: #0d111b; --ws-ink: #e9ecf3; --ws-tint: #121725; }
.ws-k0 { --k: #f03e3e; } .ws-k1 { --k: #228be6; } .ws-k2 { --k: #f59f00; } .ws-k3 { --k: #37b24d; } .ws-k4 { --k: #845ef7; }
.ws-k5 { --k: #fd7e14; } .ws-k6 { --k: #1098ad; } .ws-k7 { --k: #e64980; } .ws-k8 { --k: #0ca678; } .ws-k9 { --k: #4c6ef5; }
[class*="ws-k"] { --kl: color-mix(in srgb, var(--k) 30%, var(--ws-tint)); }
:root[data-theme="dark"] [class*="ws-k"] { --kl: color-mix(in srgb, var(--k) 46%, var(--ws-tint)); }

/* Üst satır: tema adı + düğmeler */
.ws-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: 0 0 var(--sp-3); }
.ws-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-3); min-width: 0; }
.ws-theme { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--text); font-size: var(--fs-md); font-weight: 800; letter-spacing: -.01em; }
.ws-emoji { font-size: 1.25em; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.ws-lvl {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft); color: var(--primary);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}
.ws-lvl[data-lv="easy"] { background: var(--success-soft); color: var(--success); }
.ws-lvl[data-lv="hard"] { background: var(--danger-soft); color: var(--danger); }
.ws-actions { display: flex; gap: 6px; margin-left: auto; }
.ws-actions .btn { position: relative; min-height: 42px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.ws-actions .btn[aria-expanded="true"], .ws-actions .btn[aria-pressed="true"] { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 35%, transparent); color: var(--primary); }
.ws-actions .btn:disabled { opacity: .5; cursor: default; }
.ws-badge {
  position: absolute; top: -6px; right: -6px;
  display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--radius-pill); background: #f59f00; color: #fff;
  font-size: .75rem; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px var(--surface);
}
.ws-badge.is-bump { animation: ws-bump .32s var(--ease); }
@keyframes ws-bump { 40% { transform: scale(1.35); } }
@media (max-width: 559px) {
  .ws-head { flex-wrap: nowrap; }
  .ws-title { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ws-theme { font-size: var(--fs-base); }
  .ws-lvl { height: 22px; padding: 0 8px; font-size: .75rem; }
  .ws-actions .btn { width: 42px; padding: 0; }
  .ws-actions .btn span:not(.ws-badge) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Yeni oyun paneli */
.ws-panel { display: grid; gap: var(--sp-4); margin: 0 0 var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); animation: ws-drop .18s var(--ease); }
@keyframes ws-drop { from { opacity: 0; transform: translateY(-4px); } }
.ws-panel .label { margin-bottom: var(--sp-2); }
.ws-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: var(--sp-2); }
@media (max-width: 559px) { .ws-panel { padding: var(--sp-3); } .ws-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .ws-th { min-height: 44px; padding: 4px 8px; gap: 8px; } .ws-th span:last-child { line-height: 1.2; } .ws-panel-foot .btn { width: 100%; } }
.ws-th {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--fs-sm); font-weight: 650; text-align: left;
  cursor: pointer; transition: border-color var(--dur), background var(--dur), transform var(--dur);
}
.ws-th:hover { border-color: var(--border-strong); }
.ws-th:active { transform: scale(.98); }
.ws-th .ws-emoji { flex: none; font-size: 1.35rem; }
.ws-th[aria-pressed="true"], .ws-lv[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.ws-th:focus-visible, .ws-lv:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ws-levels { display: grid; gap: var(--sp-2); }
@media (min-width: 720px) { .ws-levels { grid-template-columns: repeat(3, 1fr); } }
.ws-lv {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 60px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.ws-lv-b { display: grid; gap: 1px; }
.ws-lv b { font-size: var(--fs-sm); font-weight: 750; }
.ws-lv small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }
.ws-lv-g {
  flex: none; display: grid; grid-template-columns: repeat(var(--g), 1fr); gap: 1px;
  width: 36px; height: 36px; padding: 3px;
  border: 1px solid var(--ws-edge); border-radius: 7px; background: var(--ws-p1);
}
.ws-lv-g i { border-radius: 1px; background: color-mix(in srgb, var(--ws-ink) 16%, transparent); }
.ws-lv-g i:nth-child(n+2):nth-child(-n+6) { background: #339af0; }
.ws-lv-g[data-lv="easy"] i:nth-child(n+2):nth-child(-n+6) { background: #40c057; }
.ws-lv-g:not([data-lv="easy"]) i:nth-child(10), .ws-lv-g:not([data-lv="easy"]) i:nth-child(19), .ws-lv-g:not([data-lv="easy"]) i:nth-child(28), .ws-lv-g:not([data-lv="easy"]) i:nth-child(37) { background: #f59f00; }
.ws-lv-g[data-lv="hard"] i:nth-child(n+2):nth-child(-n+6) { background: #f03e3e; }
.ws-lv-g[data-lv="hard"] i:nth-child(48), .ws-lv-g[data-lv="hard"] i:nth-child(40), .ws-lv-g[data-lv="hard"] i:nth-child(32) { background: #845ef7; }
.ws-panel-foot { display: flex; justify-content: flex-end; }
.ws-panel-foot .btn { min-width: 180px; }

/* İlerleme ve süre */
.ws-hud { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-3); color: var(--muted); font-size: var(--fs-sm); }
.ws-hud b { color: var(--text); font-weight: 750; font-variant-numeric: tabular-nums; }
.ws-progress { position: relative; flex: 1; height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--border); }
.ws-progress::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, #22b8cf, #40c057); transition: width .45s var(--ease); }
.ws-clock { display: inline-flex; align-items: center; gap: 5px; min-width: 64px; justify-content: flex-end; }
.ws-clock svg { width: 16px; height: 16px; }

/* Bulmaca alanı */
.ws-main { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 900px) { .ws-main { grid-template-columns: minmax(0, 580px) minmax(220px, 1fr); gap: var(--sp-5); } }
.ws-stage { position: relative; width: min(100%, 580px, max(320px, 100vh - 300px)); margin: 0 auto; }
@supports (height: 100svh) { .ws-stage { width: min(100%, 580px, max(320px, 100svh - 300px)); } }
@media (min-width: 900px) { .ws-stage { width: 100%; margin: 0; } }
.ws-paper {
  position: relative;
  padding: clamp(6px, 2.2%, 14px);
  border: 1px solid var(--ws-edge); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--ws-p1), var(--ws-p2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(40, 30, 10, .06), 0 14px 36px -14px rgba(40, 30, 10, .28);
}
:root[data-theme="dark"] .ws-paper { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 36px -14px rgba(0, 0, 0, .7); }
.ws-board {
  --cs: 32px;
  position: relative; width: 100%; aspect-ratio: 1;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  cursor: pointer; outline: none; border-radius: 8px;
}
.ws-board:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 45%, transparent); }
.ws-marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ws-marks line { fill: none; stroke-linecap: round; }
.ws-ln-o { stroke: var(--k); stroke-width: .8; }
.ws-ln-i { stroke: var(--kl); stroke-width: .66; }
.ws-mk .ws-ln-o { stroke-opacity: .95; }
.ws-mk.is-draw line { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: ws-draw .36s var(--ease) forwards; }
@keyframes ws-draw { to { stroke-dashoffset: 0; } }
.ws-sel { --k: var(--primary); --kl: color-mix(in srgb, var(--primary) 20%, var(--ws-tint)); }
.ws-sel .ws-ln-o { stroke-opacity: .85; }
.ws-sel.is-anchor { animation: ws-blink 1.1s ease-in-out infinite; }
@keyframes ws-blink { 50% { opacity: .45; } }
.ws-sel.is-miss { --k: var(--danger); --kl: color-mix(in srgb, var(--danger) 22%, var(--ws-tint)); animation: ws-miss .42s ease-out forwards; }
@keyframes ws-miss { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }
.ws-hint { fill: rgba(250, 176, 5, .28); stroke: #f59f00; stroke-width: .07; stroke-dasharray: .18 .1; transform-box: fill-box; transform-origin: center; animation: ws-pulse 1.3s ease-in-out infinite; }
.ws-hint.is-2 { animation-delay: .2s; }
@keyframes ws-pulse { 50% { transform: scale(1.14); fill: rgba(250, 176, 5, .45); } }
.ws-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr); pointer-events: none; }
.ws-c {
  display: grid; place-items: center;
  color: var(--ws-ink);
  font-size: calc(var(--cs) * .52); font-weight: 700; line-height: 1;
  transition: color .2s, transform .15s var(--ease);
}
.ws-board[data-lv="easy"] .ws-c { font-size: calc(var(--cs) * .48); }
.ws-c.is-on { font-weight: 800; }
:root[data-theme="dark"] .ws-c.is-on { color: #fff; }
.ws-c.is-sel { color: var(--primary); transform: scale(1.12); font-weight: 800; }
:root[data-theme="dark"] .ws-c.is-sel { color: #fff; }
.ws-board.is-kbd .ws-c.is-cur { border-radius: 50%; box-shadow: inset 0 0 0 2px var(--focus); }
.ws-board.is-done .ws-c:not(.is-on) { opacity: .32; transition: opacity .6s; }
.ws-board.is-new .ws-grid { animation: ws-in .45s var(--ease); }
@keyframes ws-in { from { opacity: 0; transform: scale(.97); } }

/* Seçim balonu */
.ws-bubble {
  position: absolute; left: var(--bx); top: var(--by); z-index: 4;
  max-width: 92%; padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--text); color: var(--surface);
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: .1em; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 6px));
  box-shadow: var(--shadow-lg); pointer-events: none;
}
.ws-bubble.is-below { transform: translate(-50%, 6px); }
.ws-bubble.is-ok { background: var(--success); color: #fff; animation: ws-ok .5s var(--ease); }
.ws-bubble.is-bad { background: var(--danger); color: #fff; animation: ws-shake .36s; }
@keyframes ws-ok { 40% { scale: 1.12; } }
@keyframes ws-shake { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }

/* Kelime listesi */
.ws-list { min-width: 0; }
.ws-list-h { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 var(--sp-2); }
.ws-list-h .label { margin: 0; }
.ws-list-h small { color: var(--muted); font-size: var(--fs-xs); }
.ws-words { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .ws-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }
.ws-w {
  display: inline-flex; align-items: center;
  min-height: 34px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .05em;
}
.ws-w span { position: relative; }
.ws-w.is-found { border-color: color-mix(in srgb, var(--k) 55%, transparent); background: var(--kl); color: color-mix(in srgb, var(--text) 62%, transparent); }
:root[data-theme="dark"] .ws-w.is-found { color: rgba(255, 255, 255, .78); }
.ws-w.is-found span::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px; border-radius: 2px; background: var(--k); transform-origin: left; }
.ws-w.is-pop { animation: ws-pop .5s var(--ease); }
.ws-w.is-pop span::after { animation: ws-strike .4s .1s var(--ease) both; }
@keyframes ws-pop { 35% { transform: scale(1.12); } }
@keyframes ws-strike { from { transform: scaleX(0); } }
.ws-tip { margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }

/* Duraklatma ve bitiş katmanı */
.ws.is-paused .ws-grid, .ws.is-paused .ws-marks { filter: blur(9px); opacity: .5; }
.ws-paused {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; align-content: center; gap: var(--sp-2);
  border: 0; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 40%, transparent);
  color: var(--text); font: inherit; font-weight: 800; font-size: var(--fs-md);
  cursor: pointer;
}
.ws-paused svg { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: var(--primary); color: #fff; box-shadow: var(--shadow-lg); }
.ws-end {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; padding: var(--sp-3);
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 50% 40%, rgba(64, 192, 87, .3), color-mix(in srgb, var(--surface) 50%, transparent) 70%);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: ws-fade .45s ease-out;
}
@keyframes ws-fade { from { opacity: 0; } }
.ws-end-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: ws-card .42s var(--ease);
}
@keyframes ws-card { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.ws-end-card p { margin: 0 0 var(--sp-3); color: var(--text-soft); font-size: var(--fs-sm); }
.ws-end-card p b { color: var(--text); }
.ws-end-card .ws-end-t { margin-bottom: var(--sp-2); color: var(--text); font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.01em; }
.ws-end-ic { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--sp-3); border-radius: 50%; background: linear-gradient(160deg, #ffe066, #f59f00); color: #fff; box-shadow: 0 6px 18px -6px rgba(245, 159, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .5); animation: ws-trophy .7s var(--ease); }
@keyframes ws-trophy { 0% { transform: scale(.3) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.12) rotate(3deg); opacity: 1; } 100% { transform: none; } }
.ws-end-rec { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: var(--radius-pill); background: #fff4cc; color: #7a5200 !important; font-weight: 700; }
:root[data-theme="dark"] .ws-end-rec { background: #3a2e0c; color: #ffd75e !important; }
.ws-end-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px var(--sp-3); color: var(--muted) !important; font-size: var(--fs-xs) !important; }
.ws-end-card .btn-row { justify-content: center; margin: 0; }
.ws-fx { position: absolute; inset: -40px; z-index: 6; width: calc(100% + 80px); height: calc(100% + 80px); pointer-events: none; }
.ws-keys { display: none; margin: var(--sp-4) 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.9; text-align: center; }
@media (hover: hover) and (min-width: 900px) { .ws-keys { display: block; } }
.ws .pw-private { justify-content: center; }

/* Kenar sütunu */
.ws-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); }
.ws-side dt { color: var(--muted); }
.ws-side dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.ws-side .btn.is-confirm { color: var(--danger); }
.ws-side, .ws-side ~ section { min-width: 0; }
.ws-st-table th, .ws-st-table td { padding-left: 6px; padding-right: 6px; font-size: var(--fs-xs); white-space: nowrap; }
.ws-st-table th[scope="row"] { font-weight: 600; }
.ws-dirs { display: inline-flex; gap: 2px; font-weight: 700; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) {
  .ws-mk.is-draw line, .ws-sel.is-anchor, .ws-hint, .ws-bubble, .ws-w.is-pop, .ws-w.is-pop span::after, .ws-board.is-new .ws-grid, .ws-end, .ws-end-card, .ws-end-ic, .ws-panel, .ws-badge { animation: none !important; }
  .ws-mk.is-draw line { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* ---------- 34. Yılan (Snake) ---------- */
/* Tahta tek canvas (#snk-cv); çizim JS'te. Tahta renkleri ve engel taşları buradaki değişkenlerden okunur
   (--snk-b1/--snk-b2 dama zemin, --snk-wall1/2 engel). Yılan renkleri .snk[data-skin] ile JS'te. */
.snk { padding: var(--sp-3); }
@media (min-width: 640px) { .snk { padding: var(--sp-5); } }
.snk {
  --snk-b1: #eef4e4; --snk-b2: #e3ecd5; --snk-frame1: #c9d8b4; --snk-frame2: #a9bd8f; --snk-edge: #8ea573;
  --snk-wall1: #9aa4b5; --snk-wall2: #646e82; --snk-ink: #0f1729;
}
:root[data-theme="dark"] .snk {
  --snk-b1: #18221d; --snk-b2: #141d19; --snk-frame1: #24322a; --snk-frame2: #1b2620; --snk-edge: #0b110e;
  --snk-wall1: #5b6577; --snk-wall2: #353d4c; --snk-ink: #f3f6fa;
}

/* Üst çubuk */
.snk-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); max-width: 560px; margin: 0 auto var(--sp-3); }
.snk-scores { display: flex; gap: 6px; min-width: 0; }
.snk-score {
  display: grid; justify-items: center; gap: 1px;
  min-width: 78px; padding: 6px 12px 7px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #2fb36b, #178a55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 0 #0f6a40;
  color: #fff; line-height: 1.15;
}
.snk-score.is-best { background: linear-gradient(180deg, #3a4558, #283142); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 0 #171d29; }
:root[data-theme="dark"] .snk-score.is-best { background: linear-gradient(180deg, #2f3a4c, #222a38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 2px 0 #0d1119; }
.snk-score span:first-child { font-size: .6875rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; opacity: .88; }
.snk-score b { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .22); }
.snk-score.is-best span:first-child::before { content: "★ "; color: #ffd43b; }
.snk-score.is-bump b { animation: snk-bump .26s var(--ease); }
.snk-score.is-rec { animation: snk-rec 1s ease-out; }
@keyframes snk-bump { 40% { transform: scale(1.14); } }
@keyframes snk-rec { 0% { box-shadow: 0 0 0 0 rgba(255, 196, 0, .9), 0 2px 0 #171d29; } 100% { box-shadow: 0 0 0 14px rgba(255, 196, 0, 0), 0 2px 0 #171d29; } }
.snk-actions { display: flex; flex: none; gap: 6px; }
.snk-actions .btn { min-height: 42px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.snk-actions .btn[aria-expanded="true"] { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 35%, transparent); color: var(--primary); }
.snk-actions .btn:disabled { opacity: .5; cursor: default; }
@media (max-width: 559px) {
  .snk-actions .btn { width: 42px; padding: 0; }
  .snk-actions .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 359px) { .snk-score { min-width: 64px; padding-inline: 8px; } .snk-score b { font-size: 1.1rem; } }

/* Ayarlar */
.snk-opts { display: grid; gap: var(--sp-4); max-width: 560px; margin: 0 auto var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); animation: snk-drop .18s var(--ease); }
@media (min-width: 640px) { .snk-opts { grid-template-columns: 1fr 1fr; align-items: start; } .snk-opts .field--wide { grid-column: 1 / -1; } }
@keyframes snk-drop { from { opacity: 0; transform: translateY(-6px); } }
.snk-opts .field { margin: 0; }
.snk-opts .check { min-height: 40px; font-size: var(--fs-sm); }
.snk-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.snk-seg button, .snk-skin {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 14px;
  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;
}
.snk-seg button small { color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.snk-seg button[aria-pressed="true"], .snk-skin[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); }
.snk-seg button[aria-pressed="true"] small { color: inherit; }
.snk-seg button:focus-visible, .snk-skin:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.snk-skin { padding-left: 6px; }
.snk-skin i { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--k1) 15%, var(--k2) 85%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(0, 0, 0, .15); position: relative; }
.snk-skin i::before, .snk-skin i::after { content: ""; position: absolute; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: inset 2px 0 0 1px #1d2433; }
.snk-skin i::before { left: 6px; } .snk-skin i::after { right: 6px; }
.snk-skin[data-skin="emerald"] i, .snk[data-skin="emerald"] .snk-pad { --k1: #6ee787; --k2: #0f8a63; }
.snk-skin[data-skin="ocean"] i, .snk[data-skin="ocean"] .snk-pad { --k1: #5fd4ff; --k2: #4b47e0; }
.snk-skin[data-skin="sunset"] i, .snk[data-skin="sunset"] .snk-pad { --k1: #ffd25e; --k2: #ec3f6a; }
.snk-skin[data-skin="grape"] i, .snk[data-skin="grape"] .snk-pad { --k1: #f3b0ff; --k2: #7d3cf2; }

/* Bilgi satırı */
.snk-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--sp-3); max-width: 560px; margin: 0 auto var(--sp-3); color: var(--muted); font-size: var(--fs-sm); }
.snk-sub b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.snk-mode { color: var(--text); font-weight: 700; }
.snk-sub-r { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-3); }

/* Sahne ve tahta */
.snk-stage { position: relative; width: min(100%, 560px, max(300px, 100vh - 360px)); margin: 0 auto; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
@supports (height: 100svh) { .snk-stage { width: min(100%, 560px, max(300px, 100svh - 360px)); } }
.snk[data-pad="1"] .snk-stage { width: min(100%, 560px, max(280px, 100vh - 500px)); }
@supports (height: 100svh) { .snk[data-pad="1"] .snk-stage { width: min(100%, 560px, max(280px, 100svh - 500px)); } }
.snk-board {
  position: relative;
  width: 100%; aspect-ratio: 1;
  padding: 7px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--snk-frame1), var(--snk-frame2));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -3px 0 rgba(0, 0, 0, .1), 0 4px 0 var(--snk-edge), 0 18px 40px -14px rgba(20, 40, 10, .45);
  outline: none;
  cursor: pointer;
}
.snk-board:focus-visible { box-shadow: 0 0 0 3px var(--focus), 0 4px 0 var(--snk-edge); }
.snk-board canvas { display: block; width: 100%; height: 100%; border-radius: 13px; background: var(--snk-b1); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
/* Duvarsız modda çerçeve kesik çizgili: kenardan geçilebilir */
.snk[data-mode="wrap"] .snk-board { background: repeating-linear-gradient(45deg, var(--snk-frame1) 0 10px, color-mix(in srgb, var(--snk-frame1) 55%, #2fb36b) 10px 20px); }
.snk.is-playing .snk-board { cursor: none; }

/* Kaplama kartları */
.snk-ov { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: var(--sp-4); border-radius: 20px; animation: snk-fade .3s ease-out; }
.snk-ov.is-pause, .snk-ov.is-over { background: color-mix(in srgb, var(--surface) 50%, transparent); -webkit-backdrop-filter: blur(4px) saturate(1.15); backdrop-filter: blur(4px) saturate(1.15); }
.snk-ov.is-ready { align-items: end; padding: var(--sp-3); }
.snk-ov.is-count { pointer-events: none; }
@keyframes snk-fade { from { opacity: 0; } }
.snk-card {
  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: snk-card .4s var(--ease);
}
@keyframes snk-card { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.snk-card--ready { width: auto; padding: 0; border: 0; background: none; box-shadow: none; display: grid; justify-items: center; gap: var(--sp-2); }
.snk-card--ready .btn-lg { min-height: 50px; padding-inline: var(--sp-6); border-radius: var(--radius-pill); box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--primary) 60%, transparent); }
.snk-card--ready .snk-card-h { margin: 0; padding: 4px 12px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--text-soft); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: var(--shadow-sm); }
.snk-card p { margin: 0 0 var(--sp-3); color: var(--text-soft); font-size: var(--fs-sm); }
.snk-card .snk-card-t { margin-bottom: var(--sp-2); color: var(--text); font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.01em; }
.snk-card .snk-card-h { margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--fs-xs); }
.snk-card .btn-row { justify-content: center; margin: 0; }
.snk-card-ic { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--sp-2); border-radius: 50%; background: var(--bg-soft); color: var(--text-soft); }
.snk-card-ic svg { width: 26px; height: 26px; }
.snk-card.is-rec .snk-card-ic { background: linear-gradient(180deg, #ffe17a, #ffb820); color: #6b4300; box-shadow: 0 0 0 6px rgba(255, 196, 0, .18); animation: snk-trophy .7s var(--ease); }
@keyframes snk-trophy { 0% { transform: scale(.4) rotate(-20deg); } 60% { transform: scale(1.15) rotate(6deg); } }
.snk-card-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: var(--sp-3) 0 var(--sp-4); padding: var(--sp-3) var(--sp-2); border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }
.snk-card-stats span { display: grid; gap: 2px; }
.snk-card-stats small { color: var(--muted); font-size: .75rem; font-weight: 600; }
.snk-card-stats b { color: var(--text); font-size: var(--fs-md); font-weight: 800; font-variant-numeric: tabular-nums; }
.snk-count { color: #fff; font-size: clamp(4rem, 22vw, 8rem); font-weight: 900; line-height: 1; text-shadow: 0 4px 0 rgba(0, 0, 0, .18), 0 0 40px rgba(47, 179, 107, .6); animation: snk-count .3s var(--ease); }
@keyframes snk-count { from { opacity: 0; transform: scale(1.6); } }
@media (max-width: 480px) {
  .snk-ov { padding: var(--sp-2); }
  .snk-card { padding: var(--sp-3); }
  .snk-card-ic { width: 40px; height: 40px; margin-bottom: 4px; }
  .snk-card-ic svg { width: 20px; height: 20px; }
  .snk-card .snk-card-t { margin-bottom: 2px; font-size: var(--fs-md); }
  .snk-card p { margin-bottom: var(--sp-2); }
  .snk-card-stats { margin: var(--sp-2) 0 var(--sp-3); padding: var(--sp-2) 4px; }
  .snk-card-stats b { font-size: var(--fs-base); }
  .snk-card .btn-row { flex-wrap: nowrap; gap: var(--sp-2); }
  .snk-card .btn-lg { min-height: 44px; padding-inline: var(--sp-3); font-size: var(--fs-sm); }
  .snk-card--over .btn-row .btn:last-child span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .snk-card .snk-card-h { display: none; }
  .snk-card--ready .snk-card-h { display: block; font-size: .8125rem; }
}

/* Ekran yön tuşları */
.snk-pad { display: none; grid-template-columns: repeat(3, 62px); grid-template-rows: repeat(3, 62px); gap: 6px; justify-content: center; margin: var(--sp-4) auto 0; touch-action: none; -webkit-user-select: none; user-select: none; }
.snk[data-pad="1"] .snk-pad { display: grid; }
.snk-pad button {
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 18px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: 0 3px 0 var(--border-strong), var(--shadow-sm);
  color: var(--text-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s, box-shadow .08s, background .08s;
}
.snk-pad button svg { width: 28px; height: 28px; }
.snk-pad [data-dir="up"] { grid-area: 1 / 2; } .snk-pad [data-dir="left"] { grid-area: 2 / 1; }
.snk-pad [data-act="pause"] { grid-area: 2 / 2; border-radius: 50%; color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--k1), var(--k2)); box-shadow: 0 3px 0 rgba(0, 0, 0, .2), var(--shadow-sm); }
.snk-pad [data-act="pause"] svg { width: 22px; height: 22px; }
.snk-pad [data-dir="right"] { grid-area: 2 / 3; } .snk-pad [data-dir="down"] { grid-area: 3 / 2; }
.snk-pad button.is-down, .snk-pad button:active { transform: translateY(3px); box-shadow: 0 0 0 var(--border-strong); background: var(--primary-soft); color: var(--primary); }
.snk-pad [data-act="pause"].is-down { background: linear-gradient(135deg, var(--k2), var(--k1)); color: #fff; }
.snk-pad button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.snk-keys { display: none; margin: var(--sp-4) 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.9; text-align: center; }
@media (hover: hover) and (min-width: 900px) { .snk-keys { display: block; } }
.snk .pw-private { justify-content: center; }

/* Kenar sütunu */
.snk-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); }
.snk-side dt { color: var(--muted); }
.snk-side dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.snk-side .btn.is-confirm { color: var(--danger); }
.snk-side, .snk-side ~ section { min-width: 0; }
.snk-st-table th, .snk-st-table td { padding-left: 6px; padding-right: 6px; font-size: var(--fs-xs); white-space: nowrap; }
.snk-st-table th[scope="row"] { font-weight: 600; }
.snk-items { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.snk-items li { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-soft); }
.snk-items i { flex: none; width: 22px; height: 22px; border-radius: 50%; }
.snk-items .is-apple { background: radial-gradient(circle at 35% 35%, #ff9a8f, #ef3b3b 50%, #a3121d); }
.snk-items .is-star { background: linear-gradient(180deg, #fff2a8, #ffc42e 50%, #e58a00); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); border-radius: 0; }
.snk-items .is-block { border-radius: 6px; background: linear-gradient(180deg, var(--snk-wall1, #9aa4b5), var(--snk-wall2, #646e82)); }
@media (prefers-reduced-motion: reduce) {
  .snk-ov, .snk-card, .snk-count, .snk-score.is-bump b, .snk-score.is-rec, .snk-card.is-rec .snk-card-ic, .snk-opts { animation: none !important; }
}
/* ---------- 35. PDF Birleştirme (Merge PDF) ---------- */
.mp-toolbar { gap: var(--sp-2) var(--sp-3); }
.mp-toolbar .count { flex: 1 1 auto; }
.tabs.mp-view { flex: none; margin: 0; padding: 3px; }
.mp-view .tab { min-height: 34px; padding: 0 var(--sp-3); }
.mp-tools { display: flex; flex-wrap: wrap; gap: 2px; flex-basis: 100%; }
.mp-tools .btn:disabled { opacity: .4; }
@media (min-width: 760px) { .mp-tools { flex-basis: auto; } }
.mp-hint { margin: 0 0 var(--sp-3); }
.mp-grid { position: relative; }
.mp-card {
  display: flex; flex-direction: column;
  border-top: 3px solid var(--mp-c, var(--border));
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.mp-card[draggable], .mp-card { cursor: grab; }
.mp-card .file-stage { position: relative; }
.mp-card .file-num { top: calc(var(--sp-3) + 2px); }
.mp-card.is-dragging { opacity: .35; outline: 2px dashed var(--primary); outline-offset: -2px; }
.mp-card .file-actions { margin-top: auto; }
.mp-card .file-actions button { cursor: pointer; }
.mp-badge {
  position: absolute; left: 8px; bottom: 8px;
  min-width: 24px; height: 22px; padding: 0 7px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--mp-c, var(--primary)) 88%, #000);
  color: #fff;
  font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.mp-badge[hidden] { display: none; }
.paper.is-stack {
  box-shadow:
    0 1px 2px rgba(15, 23, 41, .12),
    -4px 4px 0 -1px #fff, -4px 4px 0 0 rgba(15, 23, 41, .14),
    -8px 8px 0 -2px #fff, -8px 8px 0 -1px rgba(15, 23, 41, .12),
    0 6px 14px rgba(15, 23, 41, .14);
}
.paper.is-loading {
  background: linear-gradient(-100deg, #fff 30%, #eef1f6 50%, #fff 70%) 0 0 / 220% 100%;
  animation: mp-shimmer 1.2s linear infinite;
}
@keyframes mp-shimmer { to { background-position: 320% 0; } }
.mp-card .file-name { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; white-space: normal; }
.mp-card .file-name > :not(small):not(.mp-dot) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-card:not(.mp-page) .file-name { display: block; white-space: nowrap; }
.mp-card .file-name small { flex-basis: 100%; }
.mp-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mp-c, var(--primary)); transform: translateY(-1px); }
.mp-page .file-name { flex-wrap: nowrap; }
.mp-page .file-name span { flex: 1; }
.mp-range { display: grid; gap: 2px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; cursor: text; }
.mp-range .input { min-height: 34px; height: 34px; padding: 0 10px; font-size: var(--fs-sm); }
.mp-range .input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.mp-ghost {
  position: fixed; top: 0; right: 0; z-index: 1000;
  margin: 0; list-style: none;
  pointer-events: none;
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(15, 23, 41, .28), 0 2px 6px rgba(15, 23, 41, .16);
  opacity: .96;
  will-change: transform;
}
.tool.is-sorting, .tool.is-sorting * { cursor: grabbing !important; }
.tool.is-busy .mp-grid, .tool.is-busy .mp-toolbar { pointer-events: none; opacity: .6; }
#mp .check { margin-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); }
#mp-result .btn-row { flex-wrap: wrap; }
[data-theme="dark"] .paper.is-loading { background-image: linear-gradient(-100deg, #e9edf3 30%, #d8dee8 50%, #e9edf3 70%); }
@media (prefers-reduced-motion: reduce) { .paper.is-loading { animation: none; } }

/* ---------- 36. Görsel Sıkıştırma (Image Compressor) ---------- */
.ix-card .file-stage { width: 100%; border: 0; cursor: zoom-in; font: inherit; }
.ix-card .file-stage:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ix-card.is-selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.ix-card.is-working .file-stage > canvas { opacity: .55; transition: opacity var(--dur) var(--ease); }
.ix-card .ix-wait { flex-basis: 100%; color: var(--muted); font-size: inherit; font-weight: 600; }
.ix-card.is-working .ix-wait::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 6px; border: 2px solid currentColor; border-left-color: transparent; border-radius: 50%; vertical-align: -1px; animation: ix-spin .8s linear infinite; }
.file-out small.ix-kept { color: var(--success); font-weight: 600; }
.file-out small.ix-over { color: var(--warning); font-weight: 600; }
@keyframes ix-spin { to { transform: rotate(-360deg); } }

.ix-sum { margin-top: var(--sp-4); }
.ix-sum-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.ix-sum-text { flex: 1 1 220px; min-width: 0; }
.ix-sum .result-label:empty { display: none; }
.ix-sum .result-value { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.ix-sum.is-busy .result-value { color: var(--muted); }
.ix-dl { flex: 1 1 auto; }
@media (min-width: 560px) { .ix-dl { flex: 0 0 auto; } }
.ix-dl.is-disabled { opacity: .5; pointer-events: none; box-shadow: none; }

.ix-mode { max-width: 360px; margin-bottom: 0; }
.ix-mode .tab { flex: 1 1 0; }
.file-settings > .field + .field { margin-top: var(--sp-4); }
.ix-panel[hidden] { display: none; }
.ix-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ix-chip {
  min-height: 34px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text-soft);
  font: inherit; font-size: var(--fs-xs); font-weight: 650;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ix-chip:hover { border-color: var(--primary); color: var(--primary); }
.ix-chip[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.ix-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ix-target { display: flex; max-width: 280px; }
.ix-target .input { flex: 1 1 auto; min-width: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-variant-numeric: tabular-nums; }
.ix-target .select { flex: 0 0 92px; width: 92px; margin-right: -1px; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background-color: var(--bg-soft); font-weight: 600; }
.ix-target .input:focus, .ix-target .select:focus { position: relative; z-index: 1; }
.ix-dither[hidden] { display: none; }
.ix-dither .check { min-height: 36px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); }

.ix-compare { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.ix-compare[hidden] { display: none; }
.ix-cmp-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.ix-cmp-name { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--text); font-size: var(--fs-sm); font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.ix-cmp-head .btn svg { width: 18px; height: 18px; }
.ix-cmp-head .btn[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); }
.ix-view { position: relative; border-radius: var(--radius); overflow: hidden; }
.ix-stage {
  max-height: min(72vh, 680px);
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--bg-soft);
  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;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  cursor: ew-resize;
}
.ix-frame {
  --pos: 50%;
  position: relative;
  width: min(100%, calc(min(72vh, 680px) * var(--ar, 1.5)));
  aspect-ratio: var(--ar, 1.5);
  margin-inline: auto;
}
.ix-frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; pointer-events: none; }
.ix-frame img[hidden] { display: none; }
.ix-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ix-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2;
  width: 44px; margin-left: -22px;
  cursor: ew-resize; touch-action: none;
}
.ix-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 21px; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 41, .25), 0 0 8px rgba(15, 23, 41, .25); }
.ix-handle span {
  position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 41, .3);
}
.ix-handle span::before, .ix-handle span::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; }
.ix-handle span::before { left: 5px; border-right-color: #2f5bea; }
.ix-handle span::after { right: 5px; border-left-color: #2f5bea; }
.ix-handle:focus-visible { outline: none; }
.ix-handle:focus-visible span { box-shadow: 0 0 0 3px var(--focus), 0 2px 10px rgba(15, 23, 41, .3); }
.ix-tag {
  position: absolute; top: var(--sp-2); z-index: 3;
  max-width: calc(50% - 12px); padding: 3px 9px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(12, 16, 24, .72); color: #fff;
  font-size: 12px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ix-tag--l { left: var(--sp-2); }
.ix-tag--r { right: var(--sp-2); }
.ix-tag:empty { display: none; }
.ix-spin { position: absolute; right: var(--sp-3); bottom: var(--sp-3); z-index: 3; display: none; width: 22px; height: 22px; border: 3px solid rgba(255, 255, 255, .9); border-right-color: transparent; border-radius: 50%; box-shadow: 0 0 6px rgba(0, 0, 0, .25); animation: ix-spin .8s linear infinite; }
.ix-compare.is-pending .ix-spin { display: block; }
.ix-compare.is-pending #ix-after { opacity: .6; }
.ix-compare .field-hint { margin-top: var(--sp-2); }
.ix-compare.is-zoomed .ix-stage { overflow: auto; touch-action: auto; cursor: grab; }
.ix-compare.is-zoomed .ix-stage.is-dragging { cursor: grabbing; }
.ix-compare.is-zoomed .ix-frame { width: var(--zw); max-width: none; }
.ix-compare.is-zoomed .ix-frame img { image-rendering: pixelated; }
@media (prefers-reduced-motion: reduce) { .ix-spin, .ix-card.is-working .ix-wait::before { animation: none; } }
/* ---------- 37. Cihaz testleri (Kamera, Mikrofon, Ekran) ---------- */
.dt-stage {
  position: relative;
  aspect-ratio: var(--ar, 16 / 9);
  max-height: 72vh;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 90% at 50% 0%, #1b2233, #0b0e15 70%);
  color: #fff;
  isolation: isolate;
}
.dt-empty {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
}
.dt-empty-icon {
  display: grid; place-items: center;
  width: 64px; height: 64px; margin-bottom: var(--sp-2);
  border-radius: 50%;
  background: color-mix(in srgb, var(--cat-device) 26%, transparent);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--cat-device) 10%, transparent);
  color: #8ff0b0;
}
.dt-empty-icon svg { width: 30px; height: 30px; }
.dt-empty-title { margin: 0; font-size: var(--fs-md); font-weight: 750; }
.dt-empty-text { max-width: 440px; margin: 0 0 var(--sp-3); color: rgba(255, 255, 255, .72); font-size: var(--fs-sm); }
.dt.is-starting .dt-empty .btn { opacity: .7; pointer-events: none; }
.dt.is-starting .dt-empty-icon { animation: dt-pulse 1.2s var(--ease) infinite; }
.dt-live {
  position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(10, 13, 20, .62);
  font-size: 12px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  pointer-events: none;
}
.dt-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d366; box-shadow: 0 0 0 3px rgba(52, 211, 102, .25); }
.dt.is-rec .dt-dot { background: #ff4d4f; box-shadow: 0 0 0 3px rgba(255, 77, 79, .3); animation: dt-blink 1s steps(2, start) infinite; }
.dt-tools { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 3; display: flex; gap: 6px; }
.dt:not(.is-live) .dt-tools { display: none; }
.dt-tbtn {
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(10, 13, 20, .58); color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background var(--dur) var(--ease);
}
.dt-tbtn:hover { background: rgba(10, 13, 20, .8); }
.dt-tbtn[aria-pressed="true"] { background: var(--primary); }
.dt-tbtn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.dt-tbtn svg { width: 19px; height: 19px; }
.dt-tbtn[hidden] { display: none; }

.dt-status {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.dt-status-icon {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 28px; height: 28px; margin-top: 1px;
  border-radius: 50%;
  background: var(--bg-soft); color: var(--muted);
  font-size: 15px; font-weight: 800; line-height: 1;
}
.dt-status-icon::before { content: "i"; font-family: Georgia, serif; font-style: italic; }
.dt-status-body { min-width: 0; }
.dt-status-title { margin: 0; font-weight: 700; line-height: 1.4; }
.dt-status-text { margin: 2px 0 0; color: var(--text-soft); font-size: var(--fs-sm); }
.dt-status.is-wait .dt-status-icon { background: transparent; border: 3px solid color-mix(in srgb, var(--primary) 25%, transparent); border-top-color: var(--primary); animation: ix-spin .9s linear infinite; }
.dt-status.is-wait .dt-status-icon::before { content: none; }
.dt-status.is-ok { border-color: color-mix(in srgb, var(--success) 35%, transparent); background: var(--success-soft); }
.dt-status.is-ok .dt-status-icon { background: var(--success); color: #fff; }
.dt-status.is-ok .dt-status-icon::before { content: "✓"; font-family: inherit; font-style: normal; }
.dt-status.is-warn { border-color: color-mix(in srgb, var(--warning) 35%, transparent); background: var(--warning-soft); }
.dt-status.is-warn .dt-status-icon { background: var(--warning); color: #fff; }
.dt-status.is-error { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-soft); }
.dt-status.is-error .dt-status-icon { background: var(--danger); color: #fff; }
.dt-status.is-warn .dt-status-icon::before, .dt-status.is-error .dt-status-icon::before { content: "!"; font-family: inherit; font-style: normal; }
:root[data-theme="dark"] .dt-status.is-ok .dt-status-icon, :root[data-theme="dark"] .dt-status.is-warn .dt-status-icon, :root[data-theme="dark"] .dt-status.is-error .dt-status-icon { color: #0c1018; }

.dt-controls { display: grid; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-4); }
.dt-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.dt-actions .btn { flex: 1 1 auto; }
@media (min-width: 640px) {
  .dt-controls { grid-template-columns: 1fr 1fr; align-items: end; }
  .dt-actions { grid-column: 1 / -1; }
  .dt-actions .btn { flex: 0 1 auto; }
}
.dt-stats { margin-top: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.dt-stats .stat { padding: var(--sp-3) var(--sp-4); }
.dt-stats .stat b { overflow: hidden; font-size: var(--fs-md); white-space: nowrap; text-overflow: ellipsis; }
.dt-stats .dt-stat-wide { grid-column: 1 / -1; }
.dt-stats .dt-stat-wide b { font-size: var(--fs-base); }
.dt-privacy { display: flex; align-items: center; gap: 6px; margin: var(--sp-4) 0 0; color: var(--muted); font-size: var(--fs-xs); }
.dt-privacy svg { flex: none; width: 16px; height: 16px; color: var(--success); }
.dt-more { margin-top: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); }
.dt-more summary { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-4); font-size: var(--fs-sm); font-weight: 650; cursor: pointer; list-style: none; }
.dt-more summary::-webkit-details-marker { display: none; }
.dt-more summary::after { content: ""; width: 8px; height: 8px; margin-right: auto; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-2px); transition: transform var(--dur) var(--ease); }
.dt-more[open] summary::after { transform: rotate(135deg) translateY(-2px); }
.dt-more summary svg { width: 18px; height: 18px; color: var(--muted); }
.dt-more-body { display: grid; padding: 0 var(--sp-4) var(--sp-3); }
.dt-more-body .field-hint { margin-bottom: var(--sp-1); }
@keyframes dt-pulse { 50% { transform: scale(.92); opacity: .75; } }
@keyframes dt-blink { to { visibility: hidden; } }

/* Kamera */
.cam-stage video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.cam.is-live .cam-stage video { opacity: 1; }
.cam.is-mirror .cam-stage video { transform: scaleX(-1); }
.cam-grid {
  position: absolute; inset: 0; z-index: 1;
  display: none;
  background:
    linear-gradient(-90deg, transparent calc(33.333% - .5px), rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .5) calc(33.333% + .5px), transparent 0, transparent calc(66.666% - .5px), rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .5) calc(66.666% + .5px), transparent 0),
    linear-gradient(transparent calc(33.333% - .5px), rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .5) calc(33.333% + .5px), transparent 0, transparent calc(66.666% - .5px), rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .5) calc(66.666% + .5px), transparent 0);
  pointer-events: none;
}
.cam.is-grid.is-live .cam-grid { display: block; }
.cam-flash { position: absolute; inset: 0; z-index: 2; background: #fff; opacity: 0; pointer-events: none; }
.cam.is-flash .cam-flash { animation: cam-flash .45s ease-out; }
@keyframes cam-flash { 0% { opacity: .85; } 100% { opacity: 0; } }
.dt-stage:fullscreen { max-height: none; aspect-ratio: auto; border-radius: 0; background: #000; }
.dt-stage:-webkit-full-screen { max-height: none; aspect-ratio: auto; border-radius: 0; background: #000; width: 100%; height: 100%; }
.cam-meter { display: block; height: 4px; margin-top: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--bg-soft); }
.cam-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--success); transition: width .4s var(--ease); }
.cam-meter.is-mid i { background: var(--warning); }
.cam-meter.is-warn i { background: var(--danger); }
.cam-shots { margin-top: var(--sp-5); }
.cam-shots .file-toolbar { margin-top: 0; }
.cam-shots .file-toolbar .field-hint { margin-right: auto; }
.cam-shot-list { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin: 0; padding: 0; list-style: none; }
.cam-shot { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); animation: cam-in .3s var(--ease); }
.cam-shot-img { display: block; background: #000; }
.cam-shot-img img { display: block; width: 100%; height: auto; }
.cam-shot-bar { display: flex; align-items: center; gap: 2px; padding: 4px var(--sp-3) 4px 4px; }
.cam-shot-bar span { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.cam-shot-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; }
.cam-shot-btn:hover { background: var(--bg-soft); color: var(--text); }
.cam-shot-btn.is-danger:hover { background: var(--danger-soft); color: var(--danger); }
.cam-shot-btn svg { width: 18px; height: 18px; }
@keyframes cam-in { from { opacity: 0; transform: scale(.92); } }

/* Mikrofon */
.mic-stage { --ar: 16 / 9; }
@media (min-width: 640px) { .mic-stage { --ar: 21 / 9; } }
.mic-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.mic-meter { margin-top: var(--sp-4); }
.mic-meter-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.mic-meter-head output { font-size: var(--fs-md); font-weight: 800; font-variant-numeric: tabular-nums; }
.mic-bar { position: relative; height: 16px; overflow: hidden; border-radius: var(--radius-pill); background: var(--bg-soft); box-shadow: inset 0 1px 2px rgba(15, 23, 41, .12); }
.mic-bar-fill {
  position: absolute; inset: 0;
  background: linear-gradient(-90deg, #1fb866 0, #34c96f 66%, #e8c31b 80%, #f58a1f 90%, #ee3b3b 97%);
  clip-path: inset(0 100% 0 0);
  border-radius: inherit;
}
.mic-bar-peak { position: absolute; top: 0; bottom: 0; right: 0; width: 3px; margin-right: -1.5px; background: var(--text); opacity: .7; transition: right .08s linear; }
.mic-bar-peak.is-clip { background: var(--danger); opacity: 1; }
.mic-scale { position: relative; height: 18px; margin-top: 4px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.mic-scale span { position: absolute; top: 0; transform: translateX(50%); }
.mic-scale span:first-child { transform: none; }
.mic-scale span:last-child { transform: translateX(100%); }
@media (max-width: 480px) { .mic-scale span:nth-child(6) { display: none; } }
.mic-controls > .field:first-child { grid-column: 1 / -1; }
.mic-view { margin-bottom: 0; }
.mic-view .tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.mic-view .tab svg { width: 16px; height: 16px; opacity: .75; }
.mic-view .tab[aria-checked="true"] svg { color: var(--cat-device); opacity: 1; }
.mic-rec-btn[aria-pressed="true"] { border-color: var(--danger); background: var(--danger); color: #fff; }
.mic-rec-btn[aria-pressed="true"] svg { animation: dt-pulse 1s var(--ease) infinite; }
.mic-recbox { margin-top: var(--sp-4); padding: var(--sp-4); }
.mic-rec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.mic-recbox audio { display: block; width: 100%; margin: var(--sp-3) 0 var(--sp-2); }

/* Ekran */
.scr-hero { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 640px) { .scr-hero { grid-template-columns: 220px 1fr; } }
.scr-screen {
  position: relative;
  width: min(220px, 70%); margin: 0 auto 22px;
  aspect-ratio: 16 / 10;
  border: 7px solid #1b2130; border-radius: 12px;
  background: linear-gradient(-90deg, #000 0 11.1%, #fff 0 22.2%, #f00 0 33.3%, #0f0 0 44.4%, #00f 0 55.5%, #0ff 0 66.6%, #f0f 0 77.7%, #ff0 0 88.8%, #808080 0);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 640px) { .scr-screen { width: 100%; } }
.scr-screen::after { content: ""; position: absolute; right: 50%; bottom: -24px; width: 34%; height: 15px; transform: translateX(50%); border-radius: 0 0 6px 6px; background: #1b2130; clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.scr-screen span { position: absolute; top: 34%; right: 58%; width: 5px; height: 5px; background: #000; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 9px rgba(255, 255, 255, .35); border-radius: 1px; animation: dt-pulse 1.6s var(--ease) infinite; }
.scr-hero-text { display: grid; justify-items: start; gap: var(--sp-1); }
.scr-hero-text .btn { margin-top: var(--sp-3); }
.scr-sum { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.scr-h { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-md); }
.scr-tests { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); margin: 0; padding: 0; list-style: none; }
.scr-test {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  width: 100%; height: 100%;
  padding: var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font: inherit; text-align: right;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
button.scr-test:hover { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); box-shadow: var(--shadow); transform: translateY(-1px); }
.scr-test--custom { cursor: default; }
.scr-test-body { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.scr-test-name { font-weight: 650; line-height: 1.35; }
.scr-test-desc { color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
.scr-test--custom .btn { margin-top: var(--sp-2); }
.scr-hex { color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; }
.scr-sw { position: relative; flex: none; width: 56px; height: 42px; overflow: hidden; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .3); }
.scr-sw--pixels { background: linear-gradient(-90deg, #000 0 11.1%, #fff 0 22.2%, #f00 0 33.3%, #0f0 0 44.4%, #00f 0 55.5%, #0ff 0 66.6%, #f0f 0 77.7%, #ff0 0 88.8%, #808080 0); }
.scr-sw--gradients { background: linear-gradient(-90deg, #000, #fff) top / 100% 50% no-repeat, linear-gradient(-90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) bottom / 100% 50% no-repeat; }
.scr-sw--contrast { background: linear-gradient(-90deg, #000 0 25%, #0b0b0b 0 50%, #161616 0 75%, #222 0) top / 100% 50% no-repeat, linear-gradient(-90deg, #ddd 0 25%, #e9e9e9 0 50%, #f4f4f4 0 75%, #fff 0) bottom / 100% 50% no-repeat; }
.scr-sw--uniformity { background: radial-gradient(circle at 0 0, rgba(255, 255, 230, .35), transparent 45%), radial-gradient(circle at 100% 100%, rgba(255, 255, 230, .28), transparent 45%), #060606; }
.scr-sw--sharpness { background: repeating-linear-gradient(-90deg, #000 0 1px, #fff 1px 2px); }
.scr-sw--motion { background: linear-gradient(#111, #111) 64% 50% / 13px 13px no-repeat, linear-gradient(-90deg, transparent, rgba(0, 0, 0, .35)) 36% 50% / 18px 13px no-repeat, #8a8a8a; }
.scr-sw--touch { background: repeating-conic-gradient(#18b46b 0 25%, #10131a 0 50%) 0 0 / 14px 14px; }
.scr-sw--fixer { background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.scr-sw--custom input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); padding: 0; border: 0; background: none; cursor: pointer; }
.scr-sw--custom input::-webkit-color-swatch-wrapper { padding: 0; }
.scr-sw--custom input::-webkit-color-swatch { border: 0; }
.scr-sw--custom input::-moz-color-swatch { border: 0; }
.scr-sw--custom:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.scr-keys { margin-top: var(--sp-3); }
.scr-info .stat b { font-size: var(--fs-base); }
html.scr-lock, html.scr-lock body { overflow: hidden; }
.scr-ov { position: fixed; inset: 0; z-index: 1000; background: #000; outline: none; -webkit-user-select: none; user-select: none; }
.scr-ov[hidden] { display: none; }
.scr-ov.is-idle { cursor: none; }
.scr-ov canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
.scr-hud {
  position: absolute; right: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 2;
  display: flex; align-items: center; gap: 2px;
  max-width: calc(100% - 24px);
  padding: 5px;
  border-radius: var(--radius-pill);
  background: rgba(18, 22, 30, .84); color: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .08);
  transform: translateX(50%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.scr-ov.is-idle .scr-hud { opacity: 0; transform: translate(50%, 12px); pointer-events: none; }
.scr-hud-text { display: grid; min-width: 0; padding: 0 var(--sp-3); text-align: center; line-height: 1.3; }
.scr-hud-name { overflow: hidden; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.scr-hud-pos { font-size: 12px; opacity: .75; font-variant-numeric: tabular-nums; }
.scr-hud-pos:empty { display: none; }
.scr-hud-hint { overflow: hidden; font-size: 12px; opacity: .6; white-space: nowrap; text-overflow: ellipsis; }
.scr-ov.is-done .scr-hud-pos { color: #5ee08f; opacity: 1; font-weight: 700; }
.scr-hbtn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.scr-hbtn:hover { background: rgba(255, 255, 255, .14); }
.scr-hbtn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.scr-hbtn[hidden] { display: none; }
.scr-hbtn--close { background: rgba(255, 255, 255, .12); }
.scr-hbtn svg { width: 20px; height: 20px; }
.scr-warn { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: var(--sp-4); background: #000; }
.scr-warn[hidden] { display: none; }
.scr-warn-box { max-width: 460px; padding: var(--sp-5); border-radius: var(--radius-lg); background: #151a24; color: #e8ebf1; text-align: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.scr-warn-box p { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); }
.scr-warn-box .scr-warn-title { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-3); color: #fbbf24; font-size: var(--fs-md); font-weight: 750; }
.scr-warn-title svg { width: 22px; height: 22px; }
@media (max-width: 520px) { .scr-hud-hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .scr-screen span, .dt.is-starting .dt-empty-icon, .dt.is-rec .dt-dot, .mic-rec-btn[aria-pressed="true"] svg { animation: none; }
}

/* ---------- 38. Saat dilimi çevirici (Time Zone Converter) ---------- */
.tz { --tz-day: #f59e0b; --tz-dusk: #f97316; --tz-night: #6366f1; --tz-work: color-mix(in srgb, var(--success) 18%, var(--surface)); --tz-edge: color-mix(in srgb, var(--warning) 12%, var(--surface)); --tz-nightc: color-mix(in srgb, var(--tz-night) 14%, var(--surface-2)); }
:root[data-theme="dark"] .tz { --tz-day: #fbbf24; --tz-dusk: #fb923c; --tz-night: #a5b4fc; --tz-work: color-mix(in srgb, var(--success) 22%, var(--surface)); --tz-edge: color-mix(in srgb, var(--warning) 14%, var(--surface)); --tz-nightc: color-mix(in srgb, #6366f1 18%, var(--surface)); }

/* Üst çubuk */
.tz-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
.tz-bar .input { width: auto; min-width: 0; flex: 1 1 150px; max-width: 200px; min-height: 44px; }
.tz-now { position: relative; gap: var(--sp-2); }
.tz-now .tz-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.tz.is-live .tz-now .tz-dot { background: var(--success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent); animation: tz-pulse 2s infinite; }
@keyframes tz-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.tz-now[aria-pressed="true"] { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: var(--success-soft); color: var(--success); }
.tz-live { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
@media (max-width: 420px) { .tz-live { display: none; } .tz-bar .input { max-width: none; } }
.tz-fmt { margin: 0 auto 0 0; flex: none; }
.tz-fmt .tab { min-height: 34px; padding: 0 var(--sp-3); }
.tz-slide { margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4) var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.tz-slide-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-sm); }
.tz-slide-head label { color: var(--text-soft); font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tz-slide-head output { font-weight: 800; font-variant-numeric: tabular-nums; }
.tz-range { display: block; margin: var(--sp-1) 0 0; }
.tz-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Kartlar */
.tz-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.tz-card {
  --tz-c: var(--tz-day);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(-90deg, color-mix(in srgb, var(--tz-c) 9%, var(--surface)) 0, var(--surface) 55%);
  box-shadow: inset -4px 0 0 var(--tz-c);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tz-card[data-p="night"] { --tz-c: var(--tz-night); }
.tz-card[data-p="dawn"], .tz-card[data-p="dusk"] { --tz-c: var(--tz-dusk); }
.tz-card:first-child { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.tz-card.is-new { animation: tz-in .5s var(--ease); }
@keyframes tz-in { from { opacity: 0; transform: translateY(6px); background: var(--primary-soft); } }
.tz-info { min-width: 0; }
.tz-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--sp-2); font-size: var(--fs-md); font-weight: 750; line-height: 1.3; }
.tz-pi { display: grid; place-items: center; width: 22px; height: 22px; color: var(--tz-c); }
.tz-pi svg { width: 20px; height: 20px; }
.tz-city { min-width: 0; overflow-wrap: anywhere; }
.tz-name .badge { height: 20px; padding: 0 7px; font-size: .6875rem; text-transform: none; }
.tz-you { background: var(--primary-soft); color: var(--primary); }
.tz-dstb { background: var(--warning-soft); color: var(--warning); }
.tz-sub { margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; }
.tz-sub:empty { display: none; }
.tz-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-2); margin-top: 4px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.tz-off { color: var(--text-soft); font-weight: 600; }
.tz-diff { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--bg-soft); color: var(--text-soft); font-weight: 700; }
.tz-diff:empty { display: none; }
.tz-diff.is-ahead { background: var(--success-soft); color: var(--success); }
.tz-diff.is-behind { background: var(--danger-soft); color: var(--danger); }
.tz-dst { margin-top: 4px; color: var(--warning); font-size: var(--fs-xs); font-weight: 600; }
.tz-dst[hidden] { display: none; }
.tz-clock { display: grid; justify-items: end; text-align: left; }
.tz-tw { display: flex; align-items: baseline; }
.tz-time {
  width: 6.2ch;
  min-height: 46px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
  font-weight: 800;
  letter-spacing: -.02em;
  text-align: left;
  font-variant-numeric: tabular-nums;
  cursor: text;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tz-time:hover { border-color: var(--border-strong); background: var(--surface); }
.tz-time:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.tz-time[aria-invalid="true"] { border-color: var(--danger); }
.tz-h12 .tz-time { width: 8.4ch; }
.tz-sec { min-width: 2.6ch; color: var(--muted); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.tz-sec:empty { min-width: 0; }
.tz-date { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 6px; padding-left: 4px; color: var(--text-soft); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.tz-day { padding: 0 7px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; }
.tz-day[hidden] { display: none; }
.tz-day.is-next { background: var(--primary-soft); color: var(--primary); }
.tz-day.is-prev { background: var(--bg-soft); color: var(--muted); }
.tz-acts { display: grid; gap: 2px; align-self: stretch; align-content: center; }
.tz-act { 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; }
.tz-act:hover { background: var(--bg-soft); color: var(--text); }
.tz-act.tz-del:hover { background: var(--danger-soft); color: var(--danger); }
.tz-act:disabled { opacity: .35; cursor: not-allowed; background: transparent; color: var(--muted); }
.tz-act svg { width: 18px; height: 18px; }
@media (max-width: 420px) {
  .tz-card { grid-template-columns: minmax(0, 1fr) auto; padding-left: var(--sp-3); }
  .tz-acts { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin: -6px 0 -8px -6px; }
  .tz-acts .tz-act { width: 36px; height: 30px; }
  .tz-clock { align-self: start; }
}

/* Şehir ekle */
.tz-add { position: relative; margin-top: var(--sp-3); }
.tz-add-icon { position: absolute; right: 14px; top: 50%; width: 20px; height: 20px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.tz-add .input { padding-right: 44px; border-style: dashed; background: var(--surface-2); }
.tz-add .input:focus { border-style: solid; background: var(--surface); }
.tz-sugg { position: absolute; z-index: 20; right: 0; left: 0; top: calc(100% + 6px); max-height: 360px; margin: 0; padding: 6px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-lg); list-style: none; }
.tz-sugg[hidden] { display: none; }
.tz-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--tap); padding: 6px var(--sp-3); border-radius: var(--radius-sm); cursor: pointer; }
.tz-opt[aria-selected="true"] { background: var(--primary-soft); }
.tz-otext { display: grid; min-width: 0; line-height: 1.35; }
.tz-otext b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; }
.tz-otext small { overflow: hidden; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; text-overflow: ellipsis; }
.tz-otime { flex: none; color: var(--text-soft); font-weight: 700; font-variant-numeric: tabular-nums; }
.tz-none { padding: var(--sp-3); color: var(--muted); font-size: var(--fs-sm); }

/* Toplantı planlayıcı */
.tz-planner { margin-top: var(--sp-6); }
.tz-phead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); }
.tz-phead h2 { margin: 0; font-size: var(--fs-md); }
.tz-work { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-soft); font-size: var(--fs-sm); font-weight: 600; }
.tz-work .select { width: auto; min-height: 38px; padding: 0 var(--sp-3) 0 34px; font-size: var(--fs-sm); background-position: left 8px center; }
.tz-plan { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overscroll-behavior-x: contain; scrollbar-width: thin; }
.tz-pgrid { display: grid; min-width: max-content; padding: 6px 0 6px 6px; }
.tz-prow { display: grid; grid-template-columns: var(--tz-lab, 112px) repeat(24, minmax(34px, 1fr)); align-items: stretch; gap: 0 2px; }
.tz-prow + .tz-prow { margin-top: 3px; }
.tz-plab { position: sticky; right: 0; z-index: 2; display: grid; align-content: center; min-width: 0; padding: 0 var(--sp-3) 0 var(--sp-2); background: var(--surface); line-height: 1.2; box-shadow: -6px 0 8px -6px rgba(15, 23, 41, .18); }
.tz-plab b { overflow: hidden; font-size: var(--fs-xs); white-space: nowrap; text-overflow: ellipsis; }
.tz-plab small { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.tz-cell { position: relative; display: grid; place-items: center; min-height: 38px; border-radius: 6px; background: var(--tz-edge); color: var(--text-soft); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; cursor: pointer; user-select: none; }
.tz-cell i { font-size: 9px; font-style: normal; font-weight: 600; opacity: .75; }
.tz-cell.is-work { background: var(--tz-work); color: var(--text); }
.tz-cell.is-night { background: var(--tz-nightc); color: var(--muted); }
.tz-cell.is-midnight { box-shadow: inset -2px 0 0 var(--tz-night); }
.tz-mid { font-size: 10px; font-weight: 800; color: var(--tz-night); text-align: center; line-height: 1.1; }
.tz-cell:hover { outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent); outline-offset: -2px; }
.tz-cell.is-sel { background: var(--primary); color: var(--primary-text); box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 40%, transparent); }
.tz-cell.is-sel i, .tz-cell.is-sel .tz-mid { color: inherit; opacity: 1; }
.tz-pok .tz-cell { min-height: 26px; background: transparent; cursor: default; }
.tz-pok .tz-cell.is-ok { background: var(--success-soft); color: var(--success); cursor: pointer; }
.tz-pok .tz-cell.is-sel { background: transparent; box-shadow: inset 0 -3px 0 var(--primary); }
.tz-pok .tz-cell.is-ok.is-sel { background: var(--success); color: #fff; }
.tz-pok .tz-cell svg { width: 14px; height: 14px; }
.tz-pok .tz-plab b { color: var(--success); }
.tz-best { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }
.tz-best-t { color: var(--text-soft); font-weight: 600; }
.tz-chip { min-height: 34px; white-space: normal; text-align: right; font-variant-numeric: tabular-nums; }
.tz-chip.is-ok { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: var(--success-soft); color: var(--success); }
.tz-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: var(--sp-2) 0 0; padding: 0; color: var(--muted); font-size: var(--fs-xs); list-style: none; }
.tz-legend li { display: inline-flex; align-items: center; gap: 6px; }
.tz-legend i { width: 12px; height: 12px; border-radius: 3px; }
.tz-legend .l-work { background: var(--tz-work); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 35%, transparent); }
.tz-legend .l-edge { background: var(--tz-edge); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 30%, transparent); }
.tz-legend .l-night { background: var(--tz-nightc); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tz-night) 30%, transparent); }
@media (max-width: 520px) { .tz-prow { --tz-lab: 88px; } }

/* Kenar çubuğu: şu an dünyada */
.tz-world { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tz-wbtn { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); width: 100%; min-height: 40px; padding: 0 var(--sp-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-align: right; }
.tz-wbtn:hover { background: var(--bg-soft); }
.tz-wtime { color: var(--text-soft); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .tz.is-live .tz-now .tz-dot, .tz-card.is-new { animation: none; } }
/* Dar ekran: saat kartın altına iner (12 saatlik biçimde 420px, her biçimde 360px altı) */
@media (max-width: 420px) {
  .tz-h12 .tz-card { grid-template-columns: minmax(0, 1fr) auto; }
  .tz-h12 .tz-info { grid-column: 1 / -1; }
  .tz-h12 .tz-clock { justify-items: start; text-align: right; margin-right: -4px; }
  .tz-h12 .tz-date { justify-content: flex-start; padding: 0 4px 0 0; }
  .tz-h12 .tz-time { text-align: right; }
  .tz-h12 .tz-acts { grid-column: auto; align-self: end; margin: 0 0 -4px -6px; }
}
@media (max-width: 360px) {
  .tz-card { grid-template-columns: minmax(0, 1fr) auto; }
  .tz-info { grid-column: 1 / -1; }
  .tz-clock { justify-items: start; text-align: right; margin-right: -4px; }
  .tz-date { justify-content: flex-start; padding: 0 4px 0 0; }
  .tz-time { text-align: right; }
  .tz-acts { grid-column: auto; align-self: end; margin: 0 0 -4px -6px; }
}
.tz-work { flex-wrap: wrap; }
@supports (field-sizing: content) { .tz-time, .tz-h12 .tz-time { field-sizing: content; width: auto; min-width: 3ch; } }

/* ---------- 39. IP adresim (What Is My IP) ---------- */
.ip-hero {
  position: relative;
  padding: var(--sp-5);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 60%),
    radial-gradient(80% 120% at 100% 100%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow);
}
.ip-hero-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); }
.ip-hero-main { flex: 1 1 320px; min-width: 0; }
.ip-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; color: var(--text-soft); font-size: var(--fs-sm); font-weight: 650; }
.ip-kicker .badge { height: 20px; padding: 0 7px; text-transform: none; letter-spacing: .02em; background: var(--primary-soft); color: var(--primary); font-size: .6875rem; }
.ip-live { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); animation: ip-blink 1.2s ease-in-out infinite; }
.ip.has-ip .ip-live { background: var(--success); animation: ip-pulse 2.2s infinite; }
.ip.is-error .ip-live { background: var(--danger); animation: none; }
@keyframes ip-blink { 50% { opacity: .3; } }
@keyframes ip-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.ip-addr {
  margin: var(--sp-1) 0 0;
  font-family: var(--font-mono);
  font-size: clamp(1.9rem, 1.15rem + 3.4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.ip-addr.is-v6, .ip-addr.is-long { font-size: clamp(1.15rem, .75rem + 2.2vw, 1.85rem); letter-spacing: -.01em; }
.ip.has-ip .ip-addr { animation: ip-in .45s var(--ease); }
@keyframes ip-in { from { opacity: 0; transform: translateY(6px); } }
.ip-skel { color: var(--muted); font-family: var(--font); font-weight: 700; animation: ip-blink 1.4s ease-in-out infinite; }
.ip.is-error .ip-addr { color: var(--muted); font-family: var(--font); }
.ip-where { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-2); min-height: 1.6em; margin: var(--sp-2) 0 0; color: var(--text-soft); font-weight: 600; }
.ip-where-isp { flex-basis: 100%; color: var(--muted); font-size: var(--fs-sm); font-weight: 500; }
.ip-cc {
  display: inline-grid; place-items: center;
  height: 20px; margin-left: 6px; padding: 0 5px;
  border-radius: 5px;
  background: var(--text); color: var(--surface);
  font-size: 11px; font-weight: 800; letter-spacing: .05em; line-height: 1;
  vertical-align: 2px;
}
.ip-where .ip-cc { margin-left: -2px; }
.ip-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ip-icon-btn { width: var(--tap); padding: 0; }
.ip-icon-btn svg { margin: 0; }
.is-spin svg, .ip-look-form .is-busy svg { animation: ix-spin .9s linear infinite; }
@media (max-width: 520px) {
  .ip-hero { padding: var(--sp-4); }
  .ip-actions { flex-wrap: nowrap; width: 100%; }
  .ip-actions .btn:not(.ip-icon-btn) { flex: 1 1 0; min-width: 0; }
}

/* Noktalı dünya haritası */
.ip-mapbox { position: relative; max-width: 640px; margin: var(--sp-4) auto 0; }
.ip-map { display: block; width: 100%; height: auto; overflow: visible; }
.ip-land { fill: none; stroke: color-mix(in srgb, var(--text) 21%, transparent); stroke-width: .62; stroke-linecap: round; }
.ip-mark[hidden] { display: none; }
.ip-dot { fill: var(--primary); stroke: var(--surface); stroke-width: .45; }
.ip-ring { fill: var(--primary); opacity: 0; transform-box: fill-box; transform-origin: center; animation: ip-ring 2.4s var(--ease) infinite; }
.ip-ring2 { animation-delay: 1.2s; }
@keyframes ip-ring { 0% { opacity: .45; transform: scale(1); } 100% { opacity: 0; transform: scale(4.2); } }
.ip-mark.is-in .ip-dot { transform-box: fill-box; transform-origin: center; animation: ip-pop .5s var(--ease); }
@keyframes ip-pop { 0% { transform: scale(0); } 70% { transform: scale(1.35); } }
.ip-pin-label {
  position: absolute; z-index: 1;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--text); color: var(--surface);
  font-size: 12px; font-weight: 700; white-space: nowrap;
  box-shadow: var(--shadow);
  transform: translate(-12px, -50%);
  pointer-events: none;
}
.ip-pin-label.is-left { transform: translate(calc(-1*(-100% - 12px)), -50%); }
.ip-pin-label[hidden] { display: none; }
.ip-mapbox--sm { max-width: 520px; margin-top: var(--sp-3); }
.ip-mapbox[hidden] { display: none; }

/* IPv4 / IPv6 kutuları */
.ip-vers { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
@media (min-width: 640px) { .ip-vers { grid-template-columns: 1fr 1fr; } }
.ip-v { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ip-v-tag { flex: none; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.ip-v-body { display: grid; flex: 1; min-width: 0; }
.ip-v-val { font-family: var(--font-mono); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.ip-v-hint { color: var(--muted); font-size: var(--fs-xs); }
.ip-v-hint:empty { display: none; }
.ip-v.is-wait .ip-v-val { color: var(--muted); font-family: var(--font); animation: ip-blink 1.4s ease-in-out infinite; }
.ip-v.is-none .ip-v-val { color: var(--muted); font-family: var(--font); font-weight: 600; }
.ip-v.is-none .ip-v-tag { background: var(--bg-soft); color: var(--muted); }
.ip-v-copy { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.ip-v-copy:hover:not(:disabled) { background: var(--bg-soft); color: var(--text); }
.ip-v-copy:disabled { opacity: .35; cursor: default; }
.ip-v-copy svg { width: 18px; height: 18px; }
.ip-signals { margin: 6px 0 0; padding-right: 1.15em; color: var(--text-soft); font-size: var(--fs-sm); }
.ip-signals[hidden] { display: none; }

/* Kartlar ve tanım listeleri */
.ip-card { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5) var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.ip-card[hidden] { display: none; }
@media (max-width: 520px) { .ip-card { padding: var(--sp-4); } }
.ip-h { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); font-size: var(--fs-md); line-height: 1.3; }
.ip-h svg { flex: none; width: 20px; height: 20px; color: var(--cat-device); }
.ip-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 0 var(--sp-5); margin: 0; }
.ip-row { min-width: 0; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.ip-row.is-wide { grid-column: 1 / -1; }
.ip-row dt { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.ip-row dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.ip-mono { font-family: var(--font-mono); font-size: .94em; }
.ip-row dd.ip-mono { font-weight: 600; }
.ip-dim { color: var(--muted); font-size: var(--fs-sm); font-weight: 500; }
.ip-maplink { margin-right: 4px; font-size: var(--fs-sm); font-weight: 600; }
.ip-card .field-hint { margin-top: var(--sp-3); }
.ip.is-masked [data-sensitive] { filter: blur(.45em); user-select: none; -webkit-user-select: none; }
[data-sensitive] { transition: filter var(--dur) var(--ease); }

/* Sorgulama */
.ip-look-form { display: flex; gap: var(--sp-2); }
.ip-look-form .input { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); }
.ip-look-form .input::placeholder { font-family: var(--font); }
.ip-look-form .btn { flex: none; }
.ip-look-form .input[aria-invalid="true"] { border-color: var(--danger); }
.ip-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--fs-sm); }
.ip-chip { min-height: 32px; padding: 3px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-soft); font: 600 13px/1.3 var(--font-mono); cursor: pointer; overflow-wrap: anywhere; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.ip-chip:hover { border-color: var(--primary); color: var(--primary); }
.ip-chip.is-on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.ip-look-res { margin-top: var(--sp-4); animation: ip-in .3s var(--ease); }
.ip-look-res[hidden] { display: none; }
.ip-look-dns { margin: 0 0 6px; color: var(--muted); font-size: var(--fs-sm); }
.ip-look-ips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-3); }
.ip-look-ip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-2); margin: 0 0 var(--sp-2); font-size: var(--fs-md); font-weight: 750; }
.ip-look-ip .ip-mono { overflow-wrap: anywhere; }
.ip-kind { height: 22px; text-transform: none; letter-spacing: 0; }
.ip-kind.is-pub { background: var(--success-soft); color: var(--success); }
.ip-kind.is-priv { background: var(--warning-soft); color: var(--warning); }
.ip-look-msg { margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-soft); font-size: var(--fs-sm); }
.ip-look-msg.is-info { background: var(--primary-soft); color: var(--text); }
.ip-look-msg.is-warn { background: var(--warning-soft); color: var(--warning); }
.ip-look-msg.is-error { background: var(--danger-soft); color: var(--danger); }
.ip-look-msg.is-wait { color: var(--muted); animation: ip-blink 1.4s ease-in-out infinite; }
.ip-rtc-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.ip-rtc-res[hidden] { display: none; }
.ip-rtc-res .dt-status { margin-top: var(--sp-3); }
.ip-rtc-res .dt-status-text:empty { display: none; }
.sidebar td.ip-mono { white-space: nowrap; }
.sidebar td code { font-family: var(--font-mono); font-size: .9em; overflow-wrap: anywhere; }
@media (max-width: 480px) { .ip-look-form { flex-wrap: wrap; } .ip-look-form .btn { flex: 1 1 100%; } }
.ip.is-masked #ip-mapbox .ip-mark, .ip.is-masked #ip-mapbox .ip-pin-label { opacity: 0; }

/* ---------- 40. Hicri–Miladi tarih çevirici (Hijri Date Converter) ---------- */
.hc { --hc-moon: #b7791f; }
:root[data-theme="dark"] .hc { --hc-moon: #f6c768; }

/* İki taraf: Miladi ↔ Hicri */
.hc-pair { display: grid; gap: var(--sp-3); align-items: stretch; }
@media (min-width: 720px) { .hc-pair { grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.45fr); } }
.hc-side {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  min-width: 0;
  padding: 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), background var(--dur) var(--ease);
}
.hc-side.is-src { border-color: color-mix(in srgb, var(--primary) 55%, transparent); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.hc-side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 32px; }
.hc-side-head .label { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hc-side-head .label svg { width: 18px; height: 18px; color: var(--muted); }
.hc-side--h .hc-side-head .label svg { color: var(--hc-moon); }
.hc-side .btn-sm { min-height: 32px; }
.hc-hfields { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) 4.9rem; gap: var(--sp-2); }
.hc-hfields .select, .hc-hfields .input { padding-right: var(--sp-3); }
.hc-hfields .select { padding-left: 30px; background-position: left 8px center; }
.hc-hfields .input { font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.hc-hfields .input::-webkit-inner-spin-button, .hc-hfields .input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hc-side .input[type="date"] { min-width: 0; max-width: 100%; }
.hc-alt { margin: 0; color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.hc-alt[lang="ar"] { font-size: var(--fs-base); line-height: 1.5; }
.hc-arrow { display: none; }
@media (min-width: 720px) {
  .hc-arrow { display: grid; place-items: center; width: 36px; color: var(--muted); }
  .hc-arrow svg { width: 22px; height: 22px; transition: transform .25s var(--ease); }
  .hc.is-src-h .hc-arrow svg { transform: scaleX(-1); }
}

/* Takvim yöntemi ve düzeltme */
.hc-opts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-4); }
.hc-opts .tabs { margin: 0; flex: 0 1 auto; }
.hc-opts .tab { min-height: 36px; padding: 0 var(--sp-3); }
.hc-adj { display: flex; align-items: center; gap: var(--sp-2); margin-right: auto; font-size: var(--fs-sm); }
.hc-adj label { color: var(--text-soft); font-weight: 600; white-space: nowrap; }
.hc-adj .select { width: auto; min-height: 40px; padding-right: var(--sp-3); }
@media (max-width: 519px) { .hc-opts .tabs { flex: 1 1 100%; } .hc-adj { margin-right: 0; } }

/* Sonuç */
.hc .result-value { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
.hc-ar { margin: var(--sp-1) 0 0; color: var(--text-soft); font-size: var(--fs-md); line-height: 1.5; }
.hc .result .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 519px) {
  .hc .result .stats { gap: var(--sp-2); }
  .hc .result .stat { padding: var(--sp-3) 10px; }
  .hc .result .stat b { font-size: var(--fs-xs); overflow-wrap: anywhere; }
  .hc-hfields { grid-template-columns: 4.4rem minmax(0, 1fr); }
  .hc-hfields .input { grid-column: 1 / -1; }
}
.hc .result .stat b { font-size: var(--fs-base); overflow-wrap: normal; }
.hc .result .stat span + b + span { display: block; margin-top: 2px; font-size: var(--fs-xs); }
.hc-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); }
.hc-warn[hidden] { display: none; }

/* Ay takvimi */
.hc-sub { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.hc-sub-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
.hc-sub-head h2 { margin: 0; font-size: var(--fs-md); }
.hc-sub-head .hc-nav { display: flex; gap: 4px; margin-right: auto; }
.hc-nav .btn { min-height: 40px; border-color: var(--border); }
.hc-nav .hc-ib { width: 40px; padding: 0; }
.hc-cal-title { margin: 0; font-size: var(--fs-md); font-weight: 750; }
.hc-cal-sub { display: block; color: var(--muted); font-size: var(--fs-sm); font-weight: 500; }
.hc-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.hc-wd { padding: 4px 0; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .02em; }
.hc-day {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1px;
  min-height: 52px;
  padding: 4px 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hc-day b { font-size: var(--fs-md); font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hc-day span { color: var(--muted); font-size: 11.5px; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hc-day:hover { border-color: var(--primary); background: var(--primary-soft); }
.hc-day.is-pad { border-color: transparent; background: transparent; cursor: default; }
.hc-day.is-fri { background: color-mix(in srgb, var(--success) 7%, var(--surface)); }
.hc-day.is-ev::after { content: ""; position: absolute; top: 5px; left: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--hc-moon); }
.hc-day.is-today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.hc-day.is-today b { color: var(--primary); }
.hc-day.is-sel { border-color: var(--primary); background: var(--primary); }
.hc-day.is-sel b, .hc-day.is-sel span { color: var(--primary-text); }
.hc-day.is-sel.is-ev::after { background: var(--primary-text); }
@media (min-width: 640px) { .hc-day { min-height: 60px; } }
.hc-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: var(--sp-3) 0 0; padding: 0; list-style: none; color: var(--muted); font-size: var(--fs-xs); }
.hc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.hc-legend i { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--border-strong); }
.hc-legend .l-today { border: 2px solid var(--primary); }
.hc-legend .l-fri { background: color-mix(in srgb, var(--success) 14%, var(--surface)); }
.hc-legend .l-ev { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--hc-moon); }

/* Önemli günler */
.hc-ev-year { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.hc-events { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.hc-ev {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name rel" "h g";
  gap: 2px var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: right;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hc-ev:hover { border-color: var(--primary); background: var(--primary-soft); }
.hc-ev.is-sel { border-color: var(--primary); box-shadow: inset -3px 0 0 var(--primary); }
.hc-ev-name { grid-area: name; font-weight: 650; }
.hc-ev-h { grid-area: h; color: var(--muted); font-size: var(--fs-sm); }
.hc-ev-g { grid-area: g; justify-self: end; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hc-ev-g i { color: var(--muted); font-style: normal; font-weight: 500; }
.hc-ev-rel { grid-area: rel; justify-self: end; color: var(--primary); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.hc-ev.is-past { background: var(--surface-2); }
.hc-ev.is-past .hc-ev-name, .hc-ev.is-past .hc-ev-g { color: var(--muted); }
.hc-ev.is-past .hc-ev-rel { color: var(--muted); font-weight: 600; }
@media (min-width: 640px) {
  .hc-ev { grid-template-columns: minmax(0, 1fr) 9.5rem 10.5rem 6.5rem; grid-template-areas: "name h g rel"; align-items: center; }
  .hc-ev-g { justify-self: start; }
}

/* Kenar çubuğu */
.sidebar tr.is-now > td { background: var(--primary-soft); font-weight: 700; }
.sidebar td[lang="ar"] { font-size: var(--fs-base); white-space: nowrap; }

/* ---------- 41. Unix zaman damgası çevirici (Unix Timestamp Converter) ---------- */
/* Şu anki Unix zamanı şeridi */
.ux-now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  background: linear-gradient(-135deg, color-mix(in srgb, var(--cat-convert) 10%, var(--surface)), color-mix(in srgb, var(--primary) 8%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--cat-convert) 22%, var(--border));
}
.ux-now-main { display: grid; gap: 2px; min-width: 0; }
.ux-now-label { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-soft); font-size: var(--fs-sm); font-weight: 650; }
.ux-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.ux-pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--success); opacity: 0; animation: ux-pulse 2s var(--ease) infinite; }
@keyframes ux-pulse { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ux-pulse::after { animation: none; } }
.ux-now-val { color: var(--text); font-family: var(--font-mono); font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.25rem); font-weight: 750; letter-spacing: -.01em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ux-now-ms { color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.ux-now-act { display: flex; gap: var(--sp-2); }
.ux-now-act .btn { min-height: 40px; background: var(--surface); }
@media (max-width: 519px) { .ux-now-act { width: 100%; } .ux-now-act .btn { flex: 1 1 0; } }

/* İki taraf: zaman damgası ↔ tarih */
.ux-pair { display: grid; gap: var(--sp-3); align-items: stretch; }
@media (min-width: 720px) { .ux-pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
.ux-side {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  min-width: 0;
  padding: 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), background var(--dur) var(--ease);
}
.ux-side.is-src { border-color: color-mix(in srgb, var(--primary) 55%, transparent); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.ux-side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 36px; }
.ux-side-head .label { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.ux-side-head .label svg { width: 18px; height: 18px; color: var(--muted); }
.ux-side-head .select { width: auto; max-width: 55%; min-height: 36px; padding-right: var(--sp-3); font-size: var(--fs-sm); }
.ux-ts { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 650; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.ux-dtfields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--sp-2); }
.ux-dtfields .input { min-width: 0; padding: 0 10px; font-variant-numeric: tabular-nums; }
.ux-zone { width: 100%; min-height: 40px; font-size: var(--fs-sm); }
.ux-alt { margin: 0; color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.ux-ts[aria-invalid="true"] + .ux-alt { color: var(--danger); }
.ux-arrow { display: none; }
@media (min-width: 720px) {
  .ux-arrow { display: grid; place-items: center; width: 32px; color: var(--muted); }
  .ux-arrow svg { width: 22px; height: 22px; transition: transform .25s var(--ease); }
  .ux.is-src-dt .ux-arrow svg { transform: scaleX(-1); }
}

/* Hızlı düğmeler */
.ux-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-3); }
.ux-chip {
  min-height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 650;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ux-chip:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--text); }
.ux-chip.is-now { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); color: var(--primary); }
@media (max-width: 519px) { .ux-quick { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--sp-4)); padding-left: var(--sp-4); scrollbar-width: none; } .ux-quick::-webkit-scrollbar { display: none; } .ux-chip { flex: 0 0 auto; } }

/* Sonuç */
.ux .result-value { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem); }
.ux .result-value.is-num { font-family: var(--font-mono); letter-spacing: 0; }
.ux-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); }
.ux-warn[hidden] { display: none; }

/* Biçimler listesi */
.ux-fmts { display: grid; margin: var(--sp-4) 0 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.ux-fmts:empty { display: none; }
.ux-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dt btn" "dd btn"; align-items: center; gap: 0 var(--sp-2); padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2); border-top: 1px solid var(--border); }
.ux-row:first-child { border-top: 0; }
.ux-row:hover { background: var(--surface-2); }
.ux-row dt { grid-area: dt; color: var(--muted); font-size: var(--fs-xs); font-weight: 650; }
.ux-row dd { grid-area: dd; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); min-width: 0; margin: 0; }
.ux-row code { color: var(--text); font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ux-row small { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.ux-row small[hidden] { display: none; }
.ux-row--zone code, .ux-row--utc code, .ux-row--rel code, .ux-row--cal code { font-family: var(--font); font-size: var(--fs-base); }
.ux-row--s code { font-size: var(--fs-base); font-weight: 700; }
.ux-cp { grid-area: btn; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; }
.ux-cp svg { width: 18px; height: 18px; }
.ux-cp:hover { background: var(--primary-soft); color: var(--primary); }
@media (min-width: 640px) {
  .ux-row { grid-template-columns: 12.5rem minmax(0, 1fr) auto; grid-template-areas: "dt dd btn"; }
}

/* Toplu çevirme */
.ux-sub { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.ux-sub h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-md); }
.ux-sub > .field-hint { margin-bottom: var(--sp-3); }
.ux-batch { min-height: 132px; font-family: var(--font-mono); font-size: var(--fs-sm); }
.ux-bbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-2); }
.ux-bbar .field-hint { flex: 1 1 12rem; }
.ux-bbar .btn { min-height: 40px; }
.ux-bout { max-height: 380px; margin-top: var(--sp-3); overflow: auto; }
.ux-bout[hidden] { display: none; }
.ux-bout th { position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.ux-bout td { padding: var(--sp-2) var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-xs); white-space: nowrap; }
.ux-bout th { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }
.ux-bout td:first-child { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.ux-bout tr.is-bad td { color: var(--danger); }
.ux-bout tr.is-bad td:first-child { color: var(--muted); }

/* Kod örnekleri tablosu */
.ux-code td { vertical-align: top; }
.ux-code td:first-child { font-weight: 650; color: var(--text); white-space: nowrap; }
.ux-code code { white-space: nowrap; }

/* Kenar çubuğu */
.ux-cd { display: grid; gap: var(--sp-2); }
.ux-cd > div { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ux-cd span { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.ux-cd b { display: block; margin-top: 2px; color: var(--text); font-family: var(--font-mono); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.ux-cd a { font-family: var(--font-mono); font-weight: 650; }
.sidebar td a[data-ux] { font-family: var(--font-mono); white-space: nowrap; }

/* ---------- 42. Hafta numarası (Week Number) ---------- */
/* Bugünün haftası şeridi */
.wk-now {
  display: grid;
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: linear-gradient(-135deg, color-mix(in srgb, var(--cat-calc) 11%, var(--surface)), color-mix(in srgb, var(--accent) 8%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--cat-calc) 22%, var(--border));
}
@media (min-width: 640px) { .wk-now { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); align-items: end; padding: var(--sp-4) var(--sp-5); } }
.wk-now-main { display: grid; gap: 2px; min-width: 0; }
.wk-now-label { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-soft); font-size: var(--fs-sm); font-weight: 650; }
.wk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat-calc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-calc) 22%, transparent); flex: 0 0 auto; }
.wk-now-val { color: var(--text); font-size: clamp(2rem, 1.4rem + 2.4vw, 2.875rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wk-now-range { color: var(--text-soft); font-size: var(--fs-sm); }
.wk-now-side { display: grid; gap: var(--sp-2); min-width: 0; }
.wk-prog { height: 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--cat-calc) 14%, var(--surface)); overflow: hidden; }
.wk-prog span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(-90deg, var(--cat-calc), var(--accent)); transition: width .4s var(--ease); }
.wk-now-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.wk-prog-text { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.wk-now-foot .btn { min-height: 36px; background: var(--surface); flex: 0 0 auto; }

/* Hafta sistemi */
.wk-sysbar { display: grid; gap: 6px; margin-bottom: var(--sp-4); }
.wk-sys { margin: 0; }
.wk-sys .tab { padding: 0 var(--sp-3); }

/* İki taraf: tarih ↔ yıl + hafta */
.wk-pair { display: grid; gap: var(--sp-3); align-items: stretch; }
@media (min-width: 720px) { .wk-pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
.wk-side {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  min-width: 0;
  padding: 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), background var(--dur) var(--ease);
}
.wk:not(.is-src-w) .wk-side--d, .wk.is-src-w .wk-side--w { border-color: color-mix(in srgb, var(--primary) 55%, transparent); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.wk-side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 36px; }
.wk-side-head .label { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.wk-side-head .label svg { width: 18px; height: 18px; color: var(--muted); }
.wk-side-head .btn { min-height: 34px; color: var(--primary); }
.wk-side .input { min-width: 0; font-variant-numeric: tabular-nums; }
.wk-side--d .input { padding: 0 10px; }
.wk-wfields { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-2); }
.wk-wfields .field { gap: 2px; }
.wk-wfields .hint { font-weight: 600; }
.wk-step { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 4px; }
.wk-step .input { padding: 0 6px; text-align: center; font-weight: 700; -moz-appearance: textfield; appearance: textfield; }
.wk-step .input::-webkit-outer-spin-button, .wk-step .input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wk-stepbtn {
  display: grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.wk-stepbtn svg { width: 18px; height: 18px; }
.wk-stepbtn:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.wk-stepbtn:disabled { opacity: .45; cursor: not-allowed; }
.wk-err { margin: 0; min-height: 1.2em; color: var(--danger); font-size: var(--fs-xs); }
.wk-err:empty { min-height: 0; }
.wk-arrow { display: none; }
@media (min-width: 720px) {
  .wk-arrow { display: grid; place-items: center; width: 32px; color: var(--muted); }
  .wk-arrow svg { width: 22px; height: 22px; transition: transform .25s var(--ease); }
  .wk.is-src-w .wk-arrow svg { transform: scaleX(-1); }
}

/* Hızlı düğmeler */
.wk-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-3); }
.wk-chip {
  min-height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 650;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.wk-chip:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--text); }
.wk-chip.is-now { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); color: var(--primary); }
@media (max-width: 519px) { .wk-quick { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--sp-4)); padding-left: var(--sp-4); scrollbar-width: none; } .wk-quick::-webkit-scrollbar { display: none; } .wk-chip { flex: 0 0 auto; } }

/* Sonuç */
.wk-value small { margin-right: var(--sp-3); color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 650; letter-spacing: 0; white-space: nowrap; }
.wk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: var(--sp-4); }
.wk-day {
  display: grid;
  justify-items: center;
  gap: 0;
  min-width: 0;
  padding: var(--sp-2) 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  line-height: 1.25;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.wk-day:hover { border-color: var(--primary); }
.wk-day-wd, .wk-day-m { color: var(--muted); font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .02em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-day b { font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.wk-day.is-other { background: var(--surface-2); }
.wk-day.is-other b { color: var(--muted); }
.wk-day.is-today { border-color: var(--cat-calc); box-shadow: inset 0 0 0 1px var(--cat-calc); }
.wk-day.is-sel { border-color: var(--primary); background: var(--primary); color: var(--primary-text); }
.wk-day.is-sel .wk-day-wd, .wk-day.is-sel .wk-day-m, .wk-day.is-sel b { color: var(--primary-text); }
.wk .result .stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.25rem), 1fr)); gap: var(--sp-2); }
.wk .result .stat { padding: var(--sp-3); }
.wk .result .stat b { font-size: var(--fs-base); }
.wk-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); }
.wk-warn[hidden] { display: none; }

/* Yıllık takvim ve liste */
.wk-sub { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.wk-yhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.wk-yhead h2 { margin: 0; font-size: var(--fs-md); }
.wk-ytools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.wk-ynav { display: flex; align-items: center; gap: 4px; }
.wk-ynav output { min-width: 3.5rem; text-align: center; font-weight: 750; font-variant-numeric: tabular-nums; }
.wk-ynav .wk-stepbtn { min-width: 36px; min-height: 36px; }
.wk-view { margin: 0; padding: 3px; }
.wk-view .tab { min-height: 32px; padding: 0 var(--sp-3); }
.wk-sub > .field-hint { margin: 0 0 var(--sp-3); }
.wk-cal { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
.wk-cal[hidden], .wk-list[hidden] { display: none; }
.wk-month { padding: var(--sp-2) var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.wk-month table { table-layout: fixed; font-size: var(--fs-xs); }
.wk-month caption { padding: var(--sp-1) 0 var(--sp-2); color: var(--text); font-size: var(--fs-sm); font-weight: 750; text-align: right; padding-right: var(--sp-2); }
.wk-month th, .wk-month td { padding: 0; height: 30px; border: 0; text-align: center; font-variant-numeric: tabular-nums; }
.wk-month thead th { background: transparent; color: var(--muted); font-size: .75rem; font-weight: 650; }
.wk-month thead th.is-we, .wk-month td.is-we { color: var(--muted); }
.wk-month abbr { text-decoration: none; }
.wk-month td[data-n] { border-radius: 6px; cursor: pointer; }
.wk-month td[data-n]:hover { background: var(--bg-soft); }
.wk-month .wk-wn { width: 2.3rem; }
.wk-month tbody .wk-wn button {
  width: 30px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--bg-soft);
  color: var(--cat-calc);
  font: inherit;
  font-size: .75rem;
  font-weight: 750;
  cursor: pointer;
}
.wk-month tbody .wk-wn button:hover { background: var(--primary-soft); }
.wk-month tr.is-sel td[data-n] { background: var(--primary-soft); border-radius: 0; }
.wk-month tr.is-sel td[data-n]:hover { background: color-mix(in srgb, var(--primary) 20%, var(--surface)); }
.wk-month tr.is-sel .wk-wn button { background: var(--primary); color: var(--primary-text); }
.wk-month tr.is-now .wk-wn button { box-shadow: inset 0 0 0 1.5px var(--cat-calc); }
.wk-month td.is-today { box-shadow: inset 0 0 0 1.5px var(--cat-calc); border-radius: 6px; font-weight: 750; color: var(--text); }
.wk-month td.is-pick { background: var(--primary) !important; color: var(--primary-text); border-radius: 6px !important; font-weight: 750; }
.wk-list .table-wrap { max-height: 460px; overflow: auto; }
.wk-list th { position: sticky; top: 0; z-index: 1; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); white-space: nowrap; }
.wk-list td { padding: 6px var(--sp-3); font-size: var(--fs-sm); white-space: nowrap; }
.wk-list tr.is-now td { font-weight: 700; }
.wk-list tr.is-sel td { background: var(--primary-soft); }
.wk-lbtn { min-width: 36px; min-height: 30px; padding: 0 var(--sp-2); border: 0; border-radius: 6px; background: var(--bg-soft); color: var(--cat-calc); font: inherit; font-weight: 750; cursor: pointer; font-variant-numeric: tabular-nums; }
.wk-list tr.is-sel .wk-lbtn { background: var(--primary); color: var(--primary-text); }
.wk-list .btn-row { margin-top: var(--sp-3); }

/* Kod tablosu ve kenar çubuğu */
.wk-code td { vertical-align: top; }
.wk-code td:first-child { font-weight: 650; color: var(--text); white-space: nowrap; }
.wk-code code { white-space: nowrap; }
.wk-rules { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wk-rules li { position: relative; padding: var(--sp-2) 2.1rem var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--fs-sm); }
.wk-rules li::before { content: ""; position: absolute; right: .8rem; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--cat-calc); }
.wk-years { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--sp-2); padding: 0; list-style: none; }
.wk-years a { display: inline-grid; place-items: center; min-width: 3.5rem; min-height: 36px; padding: 0 var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none; }
.wk-years a:hover { border-color: var(--primary); background: var(--primary-soft); }
.sidebar td a[data-wk] { font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- 43. Tarihe geri sayım / Kaç gün kaldı (Countdown to Date) ---------- */
/* Canlı sayaç kartı */
.cd-hero {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius-lg);
  background: linear-gradient(-135deg, color-mix(in srgb, var(--cat-calc) 12%, var(--surface)), color-mix(in srgb, var(--accent) 9%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--cat-calc) 22%, var(--border));
  overflow: hidden;
}
@media (min-width: 640px) { .cd-hero { padding: var(--sp-5); } }
.cd-hero-top { display: grid; gap: 2px; min-width: 0; }
.cd-mode { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-soft); font-size: var(--fs-sm); font-weight: 650; }
.cd-mode::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cat-calc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-calc) 22%, transparent); flex: 0 0 auto; }
.cd-hero.is-past .cd-mode::before { background: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 20%, transparent); }
.cd-hero.is-today .cd-mode::before, .cd-hero.is-done .cd-mode::before { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent); }
.cd-hero-name { margin: 0; color: var(--text); font-size: clamp(1.25rem, 1.05rem + .9vw, 1.625rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; }
.cd-hero-when { color: var(--text-soft); font-size: var(--fs-sm); }
.cd-hero-local { color: var(--muted); font-size: var(--fs-xs); }
.cd-hero-local[hidden] { display: none; }
.cd-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
@media (min-width: 520px) { .cd-tiles { gap: var(--sp-3); } }
.cd-tile {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: var(--sp-3) 4px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--cat-calc) 14%, var(--border));
  box-shadow: var(--shadow-sm);
}
.cd-tile b { color: var(--text); font-size: clamp(1.75rem, 1rem + 3.6vw, 3.25rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.cd-tile:first-child b { color: var(--cat-calc); }
.cd-tile span { color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
@media (min-width: 520px) { .cd-tile span { font-size: var(--fs-xs); } }
.cd-hero.is-past .cd-tile:first-child b { color: var(--text-soft); }
.cd-hero.is-done .cd-tile { animation: cd-pop .6s var(--ease) 2; }
@keyframes cd-pop { 50% { transform: scale(1.06); } }
.cd-prog { display: grid; gap: 6px; }
.cd-prog[hidden] { display: none; }
.cd-prog-track { height: 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--cat-calc) 14%, var(--surface)); overflow: hidden; }
.cd-prog-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(-90deg, var(--cat-calc), var(--accent)); transition: width .6s linear; }
.cd-prog-text { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.cd-hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cd-hero-actions .btn { min-height: 38px; background: var(--surface); }
.cd-hero-actions .btn-primary { background: var(--primary); }
.cd-hero-actions .cd-fs { margin-right: auto; }
@media (max-width: 519px) { .cd-hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .cd-hero-actions .cd-fs { margin-right: 0; } }
.cd-fs .i-exit { display: none; }
.cd-fs[aria-pressed="true"] .i-enter { display: none; }
.cd-fs[aria-pressed="true"] .i-exit { display: inline; }

/* Tam ekran (gerçek ya da sayfa içi kaplama) */
.cd-hero:fullscreen, .cd-hero.is-full { align-content: center; justify-items: center; gap: var(--sp-5); width: 100%; height: 100%; margin: 0; padding: 4vh 4vw; border: 0; border-radius: 0; background: var(--bg); text-align: center; }
.cd-hero:-webkit-full-screen { align-content: center; justify-items: center; gap: var(--sp-5); width: 100%; height: 100%; margin: 0; padding: 4vh 4vw; border: 0; border-radius: 0; background: var(--bg); text-align: center; }
.cd-hero.is-full { position: fixed; inset: 0; z-index: 1000; }
body.cd-lock { overflow: hidden; }
.cd-hero:fullscreen .cd-hero-top, .cd-hero.is-full .cd-hero-top { justify-items: center; }
.cd-hero:fullscreen .cd-hero-name, .cd-hero.is-full .cd-hero-name { font-size: clamp(1.5rem, 4.5vw, 3.5rem); }
.cd-hero:fullscreen .cd-hero-when, .cd-hero.is-full .cd-hero-when { font-size: clamp(1rem, 1.8vw, 1.5rem); }
.cd-hero:fullscreen .cd-tiles, .cd-hero.is-full .cd-tiles { width: min(100%, 1400px); gap: 2vw; }
.cd-hero:fullscreen .cd-tile, .cd-hero.is-full .cd-tile { padding: 3vh 1vw; }
.cd-hero:fullscreen .cd-tile b, .cd-hero.is-full .cd-tile b { font-size: clamp(2.5rem, 11vw, 12rem); }
.cd-hero:fullscreen .cd-tile span, .cd-hero.is-full .cd-tile span { font-size: clamp(.75rem, 1.5vw, 1.25rem); }
.cd-hero:fullscreen .cd-prog, .cd-hero.is-full .cd-prog { width: min(100%, 900px); }
.cd-hero:fullscreen .cd-hero-actions > :not(.cd-fs), .cd-hero.is-full .cd-hero-actions > :not(.cd-fs) { display: none; }
.cd-hero:fullscreen .cd-fs, .cd-hero.is-full .cd-fs { margin: 0; }
.cd-hero:fullscreen .cd-hero-actions, .cd-hero.is-full .cd-hero-actions { display: flex; justify-content: center; }

/* Konfeti */
.cd-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cd-confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; opacity: 0; animation: cd-fall 2s ease-in forwards; }
.cd-confetti .c0 { background: var(--cat-calc); } .cd-confetti .c1 { background: var(--accent); } .cd-confetti .c2 { background: var(--cat-games); }
.cd-confetti .c3 { background: var(--cat-random); } .cd-confetti .c4 { background: var(--success); }
@keyframes cd-fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x, 0), -105vh) rotate(var(--r, 360deg)); } }

/* Form */
.cd-form { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cd-form .field { gap: 4px; min-width: 0; }
.cd-form .cd-f-name, .cd-form .cd-f-zone { grid-column: 1 / -1; }
@media (min-width: 720px) { .cd-form { grid-template-columns: minmax(0, 1fr) minmax(0, .75fr) minmax(0, 1.35fr); } .cd-form .cd-f-name { grid-column: 1 / -1; } .cd-form .cd-f-zone { grid-column: auto; } }
.cd-form .input, .cd-form .select { min-width: 0; font-variant-numeric: tabular-nums; }
.cd-form input[type="date"], .cd-form input[type="time"] { padding: 0 10px; }
.cd-err { grid-column: 1 / -1; margin: 0; color: var(--danger); font-size: var(--fs-xs); }
.cd-err:empty { display: none; }

/* Hazır günler */
.cd-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-4); }
.cd-chip {
  min-height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cd-chip:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--text); }
.cd-chip.is-on { border-color: var(--primary); background: var(--primary); color: var(--primary-text); }
@media (max-width: 519px) { .cd-presets { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--sp-4)); padding-left: var(--sp-4); scrollbar-width: none; } .cd-presets::-webkit-scrollbar { display: none; } .cd-chip { flex: 0 0 auto; } }
.cd-bday { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); padding: var(--sp-3); border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); }
.cd-bday[hidden] { display: none; }
.cd-bday label { font-size: var(--fs-sm); font-weight: 650; }
.cd-bday .input { width: auto; min-width: 11rem; padding: 0 10px; }

/* Sonuç */
.cd .result .stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: var(--sp-2); margin-top: 0; }
.cd .result .stat { padding: var(--sp-3); }
.cd .result .stat b { font-size: var(--fs-base); }
.cd .result .stat[title] span { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.cd-note, .cd-warn { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }
.cd-note { color: var(--muted); }
.cd-warn { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); }
.cd-note[hidden], .cd-warn[hidden] { display: none; }
.cd-opts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); }
.cd-opts .check { min-height: 36px; color: var(--text-soft); font-size: var(--fs-sm); font-weight: 600; }

/* Kaydedilen geri sayımlar */
.cd-sub { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.cd-sub h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-md); }
.cd-list { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.cd-item { position: relative; display: flex; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.cd-item:hover { border-color: var(--primary); }
.cd-item.is-cur { border-color: color-mix(in srgb, var(--primary) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.cd-item-main { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-2); border: 0; background: none; color: var(--text); font: inherit; text-align: right; cursor: pointer; border-radius: inherit; }
.cd-item-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-item-date { color: var(--muted); font-size: var(--fs-xs); }
.cd-item-left { margin-top: 2px; color: var(--cat-calc); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.cd-item.is-past .cd-item-left { color: var(--muted); }
.cd-item-del { display: grid; place-items: center; flex: 0 0 auto; width: 40px; margin: 4px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; }
.cd-item-del svg { width: 18px; height: 18px; }
.cd-item-del:hover { background: var(--danger-soft); color: var(--danger); }
.cd-list-empty { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.cd-list-empty[hidden] { display: none; }

/* Kenar çubuğu: yaklaşan günler */
.cd-up td { vertical-align: middle; }
.cd-up td a { display: block; font-weight: 650; text-decoration: none; }
.cd-up td a:hover { text-decoration: underline; }
.cd-up td small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.cd-up td.num b { color: var(--cat-calc); font-size: var(--fs-sm); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .cd-hero.is-done .cd-tile { animation: none; } .cd-prog-track span { transition: none; } }

/* ---------- 44. Hangi gün / Day of the week ---------- */
.dw-top { display: flex; align-items: flex-end; gap: var(--sp-2); }
@media (min-width: 520px) { .dw-top { gap: var(--sp-3); } }
.dw-field { flex: 1 1 auto; margin: 0; min-width: 0; }
.dw-dstep { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 4px; }
@media (min-width: 520px) { .dw-dstep { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; } }
.dw-dstep .input { min-width: 0; padding: 0 6px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.dw-stepbtn {
  display: grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dw-stepbtn svg { width: 18px; height: 18px; }
.dw-stepbtn:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.dw-dstep .dw-stepbtn { min-height: var(--tap); }
.dw-today { min-height: var(--tap); flex: 0 0 auto; padding: 0 var(--sp-3); }
.dw-err { margin: var(--sp-1) 0 0; min-height: 0; color: var(--danger); font-size: var(--fs-xs); }
.dw-err:empty { display: none; }
.dw-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-3) 0 var(--sp-4); }
.dw-chip {
  min-height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dw-chip:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--text); }
.dw-chip.is-now { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); color: var(--primary); }
@media (max-width: 519px) { .dw-quick { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--sp-4)); padding-left: var(--sp-4); scrollbar-width: none; } .dw-quick::-webkit-scrollbar { display: none; } .dw-chip { flex: 0 0 auto; } }
.dw-calbar { margin: 0 0 var(--sp-4); }
.dw-calbar[hidden] { display: none; }

/* Sonuç: büyük gün + ay takvimi */
.dw-main { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
@media (min-width: 720px) { .dw-main { grid-template-columns: minmax(0, 1fr) minmax(0, 17.5rem); align-items: stretch; } }
.dw-hero {
  display: grid;
  align-content: center;
  gap: var(--sp-1);
  min-width: 0;
  padding: var(--sp-4);
  border-radius: var(--radius-lg);
  background: linear-gradient(-135deg, color-mix(in srgb, var(--cat-calc) 12%, var(--surface)), color-mix(in srgb, var(--accent) 9%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--cat-calc) 22%, var(--border));
}
@media (min-width: 640px) { .dw-hero { padding: var(--sp-5); } }
.dw-full { color: var(--text-soft); font-size: var(--fs-sm); font-weight: 650; font-variant-numeric: tabular-nums; }
.dw-wd { display: block; color: var(--text); font-size: clamp(2.5rem, 1.6rem + 3.6vw, 3.75rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; overflow-wrap: anywhere; }
.dw-wd.is-we { background: linear-gradient(-90deg, var(--cat-calc), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dw-sent { margin: var(--sp-1) 0 0; color: var(--text); font-size: var(--fs-md); font-weight: 600; }
.dw-rel { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.dw-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: var(--sp-3); }
.dw-pill { display: grid; place-items: center; min-height: 30px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.dw-pill abbr { text-decoration: none; }
.dw-pill.is-on { background: var(--primary); color: var(--primary-text); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--primary) 60%, transparent); }
.dw-month { min-width: 0; padding: var(--sp-2) var(--sp-3) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.dw-mhead { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.dw-mhead h2 { margin: 0; font-size: var(--fs-sm); font-weight: 750; text-align: center; }
.dw-mhead .dw-stepbtn { min-width: 36px; min-height: 36px; border-color: transparent; }
.dw-month table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; font-size: var(--fs-xs); }
.dw-month th, .dw-month td { padding: 0; border: 0; background: transparent; text-align: center; }
.dw-month th { height: 26px; color: var(--muted); font-size: .75rem; font-weight: 650; }
.dw-month abbr { text-decoration: none; }
.dw-month td button {
  width: 100%;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.dw-month td button:hover { background: var(--bg-soft); }
.dw-month th.is-we, .dw-month td button.is-we { color: var(--muted); }
.dw-month td button.is-today { box-shadow: inset 0 0 0 1.5px var(--cat-calc); font-weight: 750; color: var(--text); }
.dw-month td button.is-sel { background: var(--primary); color: var(--primary-text); font-weight: 750; }

.dw .result .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: 0; }
@media (min-width: 640px) { .dw .result .stats { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } }
.dw .result .stat { padding: var(--sp-3); }
.dw .result .stat b { font-size: var(--fs-base); }
.dw-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); }
.dw-warn[hidden] { display: none; }
.dw-how { margin-top: var(--sp-3); border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.dw-how[hidden] { display: none; }
.dw-how summary { color: var(--primary); font-size: var(--fs-sm); font-weight: 650; cursor: pointer; }
.dw-how ol { display: grid; gap: 6px; margin: var(--sp-3) 0 0; padding-right: 1.4rem; color: var(--text-soft); font-size: var(--fs-sm); }

/* Başka yıllarda */
.dw-sub { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.dw-sub h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.dw-sub > .field-hint { margin: 0 0 var(--sp-3); }
.dw-yhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
.dw-yhead h2 { margin: 0; }
.dw-ynav { display: flex; align-items: center; gap: 4px; }
.dw-ynav output { min-width: 6.5rem; text-align: center; font-weight: 700; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.dw-ynav .dw-stepbtn { min-width: 36px; min-height: 36px; }
.dw-ygrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .dw-ygrid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.dw-y {
  display: grid;
  justify-items: center;
  gap: 0;
  width: 100%;
  min-width: 0;
  padding: var(--sp-2) 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  line-height: 1.25;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
button.dw-y:hover { border-color: var(--primary); }
.dw-y b { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.dw-y span { color: var(--muted); font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .02em; }
.dw-y.is-we span { color: var(--cat-calc); }
.dw-y.is-match { border-color: color-mix(in srgb, var(--cat-calc) 55%, var(--border)); background: color-mix(in srgb, var(--cat-calc) 10%, var(--surface)); }
.dw-y.is-now { box-shadow: inset 0 0 0 1px var(--cat-calc); }
.dw-y.is-sel { border-color: var(--primary); background: var(--primary); color: var(--primary-text); }
.dw-y.is-sel span { color: var(--primary-text); }
.dw-y.is-none { background: var(--surface-2); color: var(--muted); cursor: default; }
.dw-find { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4); }
.dw-find .label { margin: 0; }
.dw-find .select { width: auto; min-width: 10rem; }
.dw-find-out { margin: var(--sp-2) 0 0; color: var(--text-soft); font-size: var(--fs-sm); }
.dw-ylink { display: inline; padding: 0 2px; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-variant-numeric: tabular-nums; }

/* Ayın n. günü */
.dw-nth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); }
@media (min-width: 640px) { .dw-nth { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) minmax(0, 7fr) minmax(0, 5fr); } }
.dw-nth .field { gap: 2px; margin: 0; min-width: 0; }
.dw-nth .hint { font-weight: 600; }
.dw-nth .input { font-variant-numeric: tabular-nums; }
.dw-nth-out { margin: var(--sp-3) 0 0; padding: var(--sp-3); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--fs-sm); }
.dw-nth-out strong { color: var(--primary); }
.dw-nth-out.is-none { color: var(--warning); background: var(--warning-soft); }

/* Kenar çubuğu */
.dw-dd-text { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--text-soft); }
.dw-dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--sp-2); padding: 0; list-style: none; }
.dw-dd button { min-height: 32px; padding: 0 var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.dw-dd button:hover { border-color: var(--primary); background: var(--primary-soft); }
.dw-hol td a { font-weight: 650; }

/* ==========================================================================
   45. Dil menüsü (başlıktaki küre)
   ========================================================================== */
.lang-menu { position: relative; }
.lang-menu > summary { list-style: none; user-select: none; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary::after { content: ""; width: 7px; height: 7px; margin: -3px 2px 0 0; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .6; transition: transform var(--dur) var(--ease); }
.lang-menu[open] > summary { background: var(--bg-soft); color: var(--text); }
.lang-menu[open] > summary::after { transform: translateY(3px) rotate(135deg); }
.lang-menu-list { position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px; max-height: min(70vh, 420px); overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lang-menu-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--tap); padding: 0 var(--sp-3); border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-sm); font-weight: 550; text-decoration: none; }
.lang-menu-list a:hover, .lang-menu-list a:focus-visible { background: var(--bg-soft); }
.lang-menu-list a small { color: var(--muted); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .04em; }
.lang-menu-list a[aria-current="true"] { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.lang-menu-list a[aria-current="true"] small { color: var(--primary); }
@media (max-width: 420px) { .lang-menu > summary span { display: none; } .lang-menu > summary { padding: 0 var(--sp-2); } }
/* Henüz bu dile çevrilmemiş araca giden kart: küçük "EN" etiketi */
.tool-item[hreflang="en"] .t-name::after { content: "EN"; display: inline-block; margin-right: 6px; padding: 1px 5px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--muted); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; vertical-align: 2px; }
/* Dil önerisi bandı (common.js initLangSuggest): altta ortada, tek seferlik */
.lang-bar { position: fixed; right: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 90; display: flex; align-items: center; gap: var(--sp-3); width: min(560px, calc(100% - 32px)); padding: 10px var(--sp-4) 10px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); transform: translate(50%, 20px); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.lang-bar.is-in { transform: translate(50%, 0); opacity: 1; }
.lang-bar p { flex: 1; margin: 0; font-size: var(--fs-sm, .9375rem); line-height: 1.4; }
.lang-bar .btn { flex: none; white-space: nowrap; }
.lang-bar-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; }
.lang-bar-x:hover { background: var(--surface-2, rgba(127, 127, 127, .12)); color: var(--text); }
@media (max-width: 480px) { .lang-bar { flex-wrap: wrap; } .lang-bar p { flex-basis: calc(100% - 48px); } .lang-bar .btn { order: 3; flex: 1; } }
@media (prefers-reduced-motion: reduce) { .lang-bar { transition: none; } }
@media print { .lang-bar { display: none; } }

/* ---------- RTL ekleri (i18n/rtl.js) ---------- */
/* Arapça harfler birleşik yazılır: harf aralığı bozmasın */
html[lang="ar"] * { letter-spacing: normal !important; }
html[lang="ar"] { --font: system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", Roboto, Arial, sans-serif; }
html[lang="ar"] body { line-height: 1.7; }
/* Tahtalar, zarlar ve hesap makinesi soldan sağa */
.calc, .dice-stage, .tool.sol, .sdk-board, .sdk-pad, .tool.ms, .tool.ch, .tool.mj, .tool.dm, .tool.g48, .tool.snk, .ws-board, .ix-view { direction: ltr; }
/* Soldan sağa oyun kutularında metinler: yön ilk güçlü harften (Arapça cümlede nokta ve « · » sırası doğru kalsın) */
html[dir="rtl"] :is(.tool.sol, .tool.ms, .tool.ch, .tool.mj, .tool.dm, .tool.g48, .tool.snk, .ws-board) :is(div, p, h2, h3, label, small, span, b, strong, dt, dd, li, legend) { unicode-bidi: plaintext; }
/* Kelime tahmini: Arapça klavyede ilk sıra 12 tuş; silme oku sağdan sola akışta ters */
:lang(ar) .wg-kb { --kn: 12; --kg: 4px; }
html[dir="rtl"] .wg-k[data-k="back"] svg { transform: scaleX(-1); }
/* Karşılaştırma etiketleri kendi içinde sağdan sola */
html[dir="rtl"] .ix-tag { direction: rtl; }
/* Sırala okları (öne/arkaya al): sağdan sola akışta yön çevrilir */
html[dir="rtl"] [data-act="left"] svg, html[dir="rtl"] [data-act="right"] svg { transform: scaleX(-1); }
/* Kod, şifre, e-posta, URL, sayı alanları soldan sağa */
code, kbd, .mono, .pw-display, input[type="email"], input[type="url"], input[type="tel"], input[inputmode="url"], input[inputmode="email"], input[inputmode="tel"], input[inputmode="decimal"], input[inputmode="numeric"], input[type="number"] { direction: ltr; }
input[inputmode="decimal"], input[inputmode="numeric"], input[type="number"] { text-align: right; }
/* Ek kutucukları (.pdf, kg/m² …): yön ilk güçlü harfe göre */
html[dir="rtl"] .addon { unicode-bidi: plaintext; }
/* Saat göstergeleri soldan sağa (01:02.45) */
.sw-time { direction: ltr; }
/* Kesir işlemleri matematik düzeninde soldan sağa */
.fr-eq, .fr-line, .fr-group { direction: ltr; }
html[dir="rtl"] #fr-note { unicode-bidi: plaintext; }
/* Formül satırları: yön ilk güçlü harfe göre (salt sayı ise soldan sağa) */
html[dir="rtl"] .result-formula { unicode-bidi: plaintext; }
/* Saat dilimi: saat + saniye ve dünya saati soldan sağa */
.tz-tw, .tz-wtime { direction: ltr; }
/* Unix biçim satırları: Arapça tarih sağdan sola, sayı/ISO soldan sağa */
html[dir="rtl"] .ux-row code { unicode-bidi: plaintext; }
/* İki yönlü dönüştürücü okları (miladi⇄hicri, zaman damgası⇄tarih, tarih⇄hafta): sağdan sola akışta ters */
html[dir="rtl"] .hc-arrow svg, html[dir="rtl"] .ux-arrow svg, html[dir="rtl"] .wk-arrow svg { transform: scaleX(-1); }
html[dir="rtl"] .hc.is-src-h .hc-arrow svg, html[dir="rtl"] .ux.is-src-dt .ux-arrow svg, html[dir="rtl"] .wk.is-src-w .wk-arrow svg { transform: none; }
/* Kamera: çözünürlük (1280 × 720) ve canlı etiket soldan sağa */
html[dir="rtl"] #cam-s-res, html[dir="rtl"] #cam-live-text { direction: ltr; unicode-bidi: isolate; }
/* Mikrofon: desibel değerleri (−23 dB) soldan sağa */
html[dir="rtl"] #mic-db, html[dir="rtl"] #mic-s-level, html[dir="rtl"] #mic-s-peak { direction: ltr; unicode-bidi: isolate; }
/* Ekran testi: çözünürlükler (1920 × 1080) ve ölçek soldan sağa */
html[dir="rtl"] #scr-i-res, html[dir="rtl"] #scr-i-phys, html[dir="rtl"] #scr-i-view, html[dir="rtl"] #scr-i-dpr { direction: ltr; unicode-bidi: isolate; }
/* Hafta numarası: ISO kodu (2026-W44-6) soldan sağa */
html[dir="rtl"] #wk-value small { direction: ltr; unicode-bidi: isolate; }