/* ============================================================
   TG Dashboard — Design System v2
   ------------------------------------------------------------
   A redesign that ships beside the original rather than on top
   of it: style.css is untouched and still served by the
   "Klasik" theme, so going back is one click, not a deploy.

   Everything below is tokens first. The 29 page templates write
   their own <style> blocks against token names like var(--card)
   and var(--muted); this file redefines those names, so the
   whole panel re-themes without a single template being
   restructured.

   Two palettes, one system: :root is light, [data-theme="dark"]
   swaps only the semantic layer. No primitive is used directly
   by a component — components only ever reference semantics.
   ============================================================ */

/* ============================================================
   1. PRIMITIVES — the raw ramps. Never used by a component.
   ============================================================ */

:root {
  /* Cool neutral ramp. */
  --n-0:   #FFFFFF;
  --n-25:  #FCFCFD;
  --n-50:  #F9FAFB;
  --n-100: #F2F4F7;
  --n-200: #EAECF0;
  --n-300: #D0D5DD;
  --n-400: #98A2B3;
  --n-500: #667085;
  --n-600: #475467;
  --n-700: #344054;
  --n-800: #1D2939;
  --n-900: #101828;
  --n-950: #0C111D;
  --n-1000:#060A13;

  /* Brand: one accent, indigo. Change these six values and the
     entire panel changes colour — nothing else references them. */
  --brand-50:  #EEF2FF;
  --brand-100: #E0E7FF;
  --brand-200: #C7D2FE;
  --brand-300: #A5B4FC;
  --brand-400: #818CF8;
  --brand-500: #6366F1;
  --brand-600: #4F46E5;
  --brand-700: #4338CA;

  /* Status hues, each with a light tint and a dark ink. */
  --green-50:  #ECFDF3;  --green-400: #47CD89;
  --green-600: #079455;  --green-700: #067647;  --green-300: #75E0A7;
  --amber-50:  #FFFAEB;  --amber-400: #FDB022;
  --amber-600: #DC6803;  --amber-700: #B54708;  --amber-300: #FEC84B;
  --red-50:    #FEF3F2;  --red-400:   #F97066;
  --red-600:   #D92D20;  --red-700:   #B42318;  --red-300:   #FDA29B;
  --blue-50:   #EFF8FF;  --blue-400:  #53B1FD;
  --blue-600:  #1570EF;  --blue-700:  #175CD3;  --blue-300:  #84CAFF;
}


/* ============================================================
   2. SCALES — type, space, radius, motion. Palette-independent,
      so they are declared once and never overridden by a theme.
   ============================================================ */

:root {
  /* --- typography ---------------------------------------- */
  --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", sans-serif;
  --display: var(--sans);           /* one family: this is a tool, not a brand page */
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: 1.75rem;   /* 28px — page title */
  --fs-h1:      1.5rem;    /* 24px */
  --fs-h2:      1.0625rem; /* 17px — card title */
  --fs-h3:      0.9375rem; /* 15px */
  --fs-body:    0.875rem;  /* 14px */
  --fs-sm:      0.8125rem; /* 13px */
  --fs-xs:      0.75rem;   /* 12px */
  --fs-2xs:     0.6875rem; /* 11px — uppercase micro-labels */
  --fs-stat:    2rem;      /* 32px — KPI value */

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.55;
  --lh-relaxed: 1.65;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --ls-tight: -0.018em;
  --ls-flat:   0;
  --ls-wide:   0.055em;   /* uppercase micro-labels only */

  /* --- spacing: 4px base, no value outside this scale ----- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* --- radius: one family, four steps -------------------- */
  --r-xs:   4px;
  --r-sm:   6px;    /* inputs, small buttons, chips */
  --r-md:   8px;    /* buttons, inputs */
  --r-lg:   10px;   /* cards, table shells */
  --r-xl:   12px;   /* page-level containers */
  --r-full: 9999px;

  /* --- motion -------------------------------------------- */
  --ease:    cubic-bezier(.4, 0, .2, 1);
  --t-fast:  150ms var(--ease);
  --t-base:  200ms var(--ease);

  /* --- layout -------------------------------------------- */
  --nav-w:  256px;
  --header-h: 60px;
  --content-max: 1440px;

  /* Aliases the existing templates already write against. */
  --pad: var(--sp-5);
  --gap: var(--sp-4);
  --radius:    var(--r-lg);
  --radius-sm: var(--r-md);
  --radius-lg: var(--r-xl);
  --quick: var(--t-fast);
  --calm:  var(--t-base);
  --snap:  var(--t-fast);
  --flip:  var(--t-base);
}


/* ============================================================
   3. SEMANTIC LAYER — light. The only thing a theme swaps.
   ============================================================ */

:root {
  color-scheme: light;

  --bg:         var(--n-50);
  --bg-soft:    var(--n-100);
  --surface:    var(--n-0);
  --surface-2:  var(--n-50);
  --surface-3:  var(--n-100);
  --surface-sunken: var(--n-100);

  --line:        var(--n-200);
  --line-soft:   var(--n-100);
  --line-strong: var(--n-300);

  --text:   var(--n-900);
  --text-2: var(--n-700);
  --muted:  var(--n-600);   /* 7.6:1 on surface */
  --faint:  var(--n-500);   /* 5.0:1 on surface — micro-labels, still AA */

  --accent:      var(--brand-600);
  --accent-hover:var(--brand-700);
  --accent-ink:  var(--n-0);
  --accent-soft: var(--brand-50);
  --accent-dim:  rgba(79, 70, 229, .38);
  --accent-text: var(--brand-700);

  --ok:        var(--green-700);
  --ok-ink:    var(--n-0);
  --ok-soft:   var(--green-50);
  --ok-border: rgba(6, 118, 71, .28);

  --warn:        var(--amber-700);
  --warn-ink:    var(--n-0);
  --warn-soft:   var(--amber-50);
  --warn-border: rgba(181, 71, 8, .28);

  --danger:        var(--red-700);
  --danger-ink:    var(--n-0);
  --danger-soft:   var(--red-50);
  --danger-border: rgba(180, 35, 24, .28);

  --info:        var(--blue-700);
  --info-ink:    var(--n-0);
  --info-soft:   var(--blue-50);
  --info-border: rgba(23, 92, 211, .28);

  /* Elevation: tight, downward, low-opacity. Four steps, no glow. */
  --sh-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-sm: 0 1px 3px rgba(16, 24, 40, .09), 0 1px 2px -1px rgba(16, 24, 40, .06);
  --sh-md: 0 4px 8px -2px rgba(16, 24, 40, .09), 0 2px 4px -2px rgba(16, 24, 40, .05);
  --sh-lg: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);
  --focus-ring: rgba(79, 70, 229, .22);
  --sh-focus: 0 0 0 3px var(--focus-ring);

  /* Categorical series, for anything that needs to colour-code. */
  --chart-1: var(--brand-600);
  --chart-2: #0BA5EC;
  --chart-3: var(--green-600);
  --chart-4: var(--amber-600);
  --chart-5: #DD2590;
  --chart-6: #7A5AF8;
  --chart-7: #15B79E;
  --chart-8: var(--red-600);

  /* Legacy names still written by the page templates. */
  --panel:       var(--bg-soft);
  --card:        var(--surface);
  --border:      var(--line);
  --border-soft: var(--line-strong);
  --link:        var(--accent-text);
  --primary:     var(--accent);
  --secondary:   var(--surface-2);
  --bg2:         var(--surface-3);

  --lift-1: var(--sh-sm);
  --lift-2: var(--sh-md);
  --glow-sm: none;
  --glow-md: none;
}


/* ============================================================
   4. SEMANTIC LAYER — dark. Same names, different values.
      Not an inversion: the ramp is re-picked so text keeps its
      contrast and the accent stays legible on a dark ground.
   ============================================================ */

[data-theme="dark"] {
  color-scheme: dark;

  --bg:         var(--n-1000);
  --bg-soft:    var(--n-950);
  --surface:    #111726;
  --surface-2:  #18202F;
  --surface-3:  #1F2839;
  --surface-sunken: var(--n-1000);

  --line:        rgba(255, 255, 255, .09);
  --line-soft:   rgba(255, 255, 255, .06);
  --line-strong: rgba(255, 255, 255, .18);

  --text:   #F5F7FA;
  --text-2: #CDD5E0;
  --muted:  #98A2B3;   /* 6.4:1 on surface */
  --faint:  #7D8799;   /* 4.6:1 on surface */

  --accent:      var(--brand-500);
  --accent-hover:var(--brand-400);
  --accent-ink:  #0B1020;
  --accent-soft: rgba(129, 140, 248, .16);
  --accent-dim:  rgba(129, 140, 248, .45);
  --accent-text: var(--brand-300);

  --ok:        var(--green-300);
  --ok-ink:    #04231A;
  --ok-soft:   rgba(117, 224, 167, .14);
  --ok-border: rgba(117, 224, 167, .32);

  --warn:        var(--amber-300);
  --warn-ink:    #2A1B02;
  --warn-soft:   rgba(254, 200, 75, .14);
  --warn-border: rgba(254, 200, 75, .32);

  --danger:        var(--red-300);
  --danger-ink:    #2B0D0A;
  --danger-soft:   rgba(253, 162, 155, .14);
  --danger-border: rgba(253, 162, 155, .32);

  --info:        var(--blue-300);
  --info-ink:    #06203D;
  --info-soft:   rgba(132, 202, 255, .14);
  --info-border: rgba(132, 202, 255, .32);

  /* On a dark ground a shadow reads as depth only if it is nearly
     opaque; a border carries most of the separation instead. */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-sm: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px -1px rgba(0, 0, 0, .4);
  --sh-md: 0 4px 8px -2px rgba(0, 0, 0, .5), 0 2px 4px -2px rgba(0, 0, 0, .4);
  --sh-lg: 0 12px 20px -6px rgba(0, 0, 0, .6), 0 4px 8px -3px rgba(0, 0, 0, .4);
  --focus-ring: rgba(129, 140, 248, .30);
  --sh-focus: 0 0 0 3px var(--focus-ring);

  --chart-2: #36BFFA;
  --chart-3: var(--green-400);
  --chart-4: var(--amber-400);
  --chart-5: #EE46BC;
  --chart-6: #9B8AFB;
  --chart-7: #2ED3B7;
  --chart-8: var(--red-400);
}


/* ============================================================
   5. BASE
   ============================================================ */

/* A class like `.adsopt { display: flex }` outranks the browser's own
   [hidden] { display: none } rule, so anything toggled with el.hidden stayed
   on screen. Forced here once rather than per component. */
[hidden] { display: none !important; }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "cv08" 1, "tnum" 0;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* One focus ring for the whole panel, on every focusable thing. */
:where(a, button, .btn, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.skip {
  position: absolute;
  left: -9999px;
  top: var(--sp-2);
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}
.skip:focus { left: var(--sp-4); }

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


/* ============================================================
   6. LAYOUT — sidebar + header + content
   ============================================================ */

.layout {
  display: flex;
  min-height: 100vh;
  align-items: flex-start;
}

/* ---------- sidebar ---------- */

.sidebar {
  width: var(--nav-w);
  flex: 0 0 var(--nav-w);
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-5) var(--sp-3) var(--sp-8);
  background: var(--surface);
  border-right: 1px solid var(--line);
  scrollbar-width: thin;
}

.sidebar h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-6);
  padding: 0 var(--sp-3);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
/* The mark: a small rounded square in the accent, not a glyph. */
.sidebar h2::before {
  content: "";
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: var(--r-sm);
  background: linear-gradient(140deg, var(--brand-500), var(--brand-700));
  box-shadow: var(--sh-xs);
}

.sidebar details { margin-bottom: var(--sp-1); }

.sidebar summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-2) var(--sp-3);
  color: var(--faint);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--r-sm);
  transition: color var(--t-fast);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.sidebar summary::-webkit-details-marker { display: none; }
.sidebar summary:hover { color: var(--muted); }
/* Disclosure caret, rotating. */
.sidebar summary::after {
  content: "";
  margin-left: auto;
  width: 14px;
  height: 14px;
  background: currentColor;
  opacity: .7;
  -webkit-mask: var(--icon-chevron) center / 14px no-repeat;
          mask: var(--icon-chevron) center / 14px no-repeat;
  transform: rotate(-90deg);
  transition: transform var(--t-fast);
}
.sidebar details[open] > summary::after { transform: rotate(0deg); }

.sidebar a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: 1px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.sidebar a:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}
.sidebar a.active {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: var(--fw-semibold);
}
.sidebar a .nav-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  opacity: .75;
}
.sidebar a.active .nav-ico { opacity: 1; }

/* ---------- content column ---------- */

/* Wraps the header and the page so the header can stick to the top of the
   content area rather than to the viewport across the sidebar. */
.col {
  flex: 1 1 auto;
  /* min-width for the row layout, max-width for the stacked one: a column
     flex item is stretched to the container but is never shrunk below its
     own min-content, so a wide table inside would push the whole page
     sideways without the cap. */
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- app header ---------- */

.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
  padding: var(--sp-2) clamp(var(--sp-4), 3vw, var(--sp-10));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.appbar .pagename {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.appbar .pagename b {
  color: var(--text);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appbar .spacer { flex: 1 1 auto; }
.appbar .toolbar { display: flex; align-items: center; gap: var(--sp-2); }

/* Segmented control — used by both the theme and the language switch. */
.segctl {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.segctl > a, .segctl > button {
  min-height: 0;
  padding: var(--sp-1) var(--sp-3);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.7;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.segctl > a:hover, .segctl > button:hover {
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  filter: none;
  box-shadow: none;
}
.segctl > .on, .segctl > [aria-current="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sh-xs);
}
[data-theme="dark"] .segctl > .on { background: var(--surface-2); }

/* The old language bar is now a segmented control in the header. */
.langbar { display: contents; }
/* Sunucu saati (4 Kas 2026): üst çubukta Türkiye saati, tarayıcının saatinden bağımsız. */
.appbar .saat { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: var(--fs-xs); color: var(--muted);
  font-variant-numeric: tabular-nums; padding: 0 var(--sp-2); white-space: nowrap; }
.langopt {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.langopt:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.langopt.on { background: var(--surface); color: var(--text); box-shadow: var(--sh-xs); }
[data-theme="dark"] .langopt.on { background: var(--surface-2); }

.main {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: var(--sp-8) clamp(var(--sp-4), 3vw, var(--sp-10)) var(--sp-16);
  max-width: var(--content-max);
}


/* ============================================================
   7. TYPOGRAPHY
   ============================================================ */

h1 {
  margin: 0 0 var(--sp-2);
  font-family: var(--display);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}

h2 {
  margin: 0 0 var(--sp-4);
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}

h3 {
  margin: 0 0 var(--sp-2);
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text);
}

p { margin: 0 0 var(--sp-3); }

.small, .meta { color: var(--muted); font-size: var(--fs-xs); line-height: var(--lh-normal); }
.hint { color: var(--muted); font-size: var(--fs-sm); margin: var(--sp-2) 0 var(--sp-4); }

.ok  { color: var(--ok); }
.bad { color: var(--danger); }

.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: var(--sp-10) 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.section-head h2 { margin: 0; }


/* ============================================================
   8. CARD
   ============================================================ */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  box-shadow: var(--sh-xs);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.card.flat { background: var(--surface-2); box-shadow: none; }

/* ---------- katlanabilir kartlar ----------
   The toggle is added by app.js, so a template that knows nothing about it
   still gets the behaviour. A folded card keeps its heading and hides the
   rest, which is what makes a long page scannable. */
.card > h2 { display: flex; align-items: center; gap: 8px; }
.foldbtn {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  min-height: 0;
  margin: 0; padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--muted);
  cursor: pointer;
  position: relative;
}
.foldbtn:hover { background: none; box-shadow: none; color: var(--text); }
.foldbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 150ms ease;
}
/* The header row, not the heading: on a brand card the summary badges are
   siblings of the h2 inside a wrapper, and folding must keep them on screen.
   app.js marks whichever element actually holds the title. */
.card.folded > .cardhead { margin-bottom: 0; }
.card.folded > .cardhead ~ * { display: none !important; }
.card.folded .foldbtn::before { transform: translateX(-2px) rotate(-45deg); }
.card.folded { padding-bottom: var(--sp-4, 16px); }
.cardhead { border-radius: var(--r-sm, 6px); }
.foldable > .cardhead:hover .foldbtn { color: var(--text); }

/* "Hepsini aç / kapat" — app.js drops this into the header bar on any page
   with more than one foldable card. */
.foldall { font-size: var(--fs-xs, 12px); white-space: nowrap; }

/* ---------- stat tiles ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.grid > .card {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  transition: border-color var(--t-base), box-shadow var(--t-base),
              transform var(--t-base);
}
.grid > .card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}
/* The tile's caption. */
.grid > .card > div:first-child {
  color: var(--faint);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.number {
  font-family: var(--display);
  font-size: var(--fs-stat);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* Trend indicator: <span class="trend up|down|flat">12%</span> */
.trend {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  background: var(--surface-3);
  color: var(--muted);
}
.trend::before { font-size: 10px; line-height: 1; }
.trend.up   { background: var(--ok-soft);     color: var(--ok); }
.trend.up::before   { content: "▲"; }
.trend.down { background: var(--danger-soft); color: var(--danger); }
.trend.down::before { content: "▼"; }
.trend.flat::before { content: "–"; }

/* Sparkline slot: an inline <svg class="spark"> keeps its own aspect. */
.spark { display: block; width: 100%; height: 32px; overflow: visible; }
.spark path { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.spark .area { fill: var(--accent-soft); stroke: none; }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: var(--sp-4); }
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
.form-grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--sp-4); }
.full { grid-column: 1 / -1; }

.button-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--sp-2); }
.checks { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.checks label { display: flex; gap: var(--sp-2); align-items: center; margin: 0; }
.checks input { width: auto; margin: 0; }


/* ============================================================
   9. FORM CONTROLS
   ============================================================ */

label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  margin-bottom: var(--sp-2);
}

input, select, textarea {
  width: 100%;
  padding: 9px var(--sp-3);
  margin: 0 0 var(--sp-4);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.45;
  box-shadow: var(--sh-xs);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, textarea:hover { border-color: var(--n-400); }
[data-theme="dark"] input:hover,
[data-theme="dark"] select:hover,
[data-theme="dark"] textarea:hover { border-color: rgba(255,255,255,.28); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--sh-focus);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-3);
  color: var(--muted);
  cursor: not-allowed;
}

textarea { height: 136px; resize: vertical; line-height: var(--lh-normal); }
input[type="file"] { padding: 7px var(--sp-3); color: var(--muted); box-shadow: none; }
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; margin: 0;
  box-shadow: none;
  accent-color: var(--accent);
}

select {
  appearance: none;
  background-image: var(--icon-chevron-url);
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  padding-right: var(--sp-8);
}

.search {
  width: 100%;
  padding: 10px var(--sp-4) 10px var(--sp-10);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-body);
  background: var(--surface) var(--icon-search-url) no-repeat left var(--sp-4) center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
}
.search::placeholder { color: var(--faint); }

.filters { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.filters label {
  display: flex; gap: var(--sp-2); align-items: center; margin: 0;
  font-size: var(--fs-sm); color: var(--muted); cursor: pointer;
  transition: color var(--t-fast);
}
.filters label:hover { color: var(--text); }


/* ============================================================
   10. BUTTONS — three levels of emphasis, one geometry
   ============================================================ */

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: auto;
  margin: 0;
  min-height: 36px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--sh-xs);
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast),
              transform var(--t-fast);
}
button:hover, .btn:hover {
  background: var(--accent-hover);
  color: var(--accent-ink);
  box-shadow: var(--sh-sm);
  text-decoration: none;
}
button:active, .btn:active { transform: translateY(1px); box-shadow: none; }
button:disabled, .btn:disabled {
  opacity: .5;
  pointer-events: none;
  box-shadow: none;
}

/* Secondary: outline on the surface. */
button.secondary, .btn.secondary {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text);
}
button.secondary:hover, .btn.secondary:hover {
  background: var(--surface-2);
  border-color: var(--n-400);
  color: var(--text);
}
[data-theme="dark"] button.secondary:hover,
[data-theme="dark"] .btn.secondary:hover { border-color: rgba(255,255,255,.28); }

/* Tertiary: text only until touched. */
button.ghost, .btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  box-shadow: none;
}
button.ghost:hover, .btn.ghost:hover {
  background: var(--surface-3);
  color: var(--text);
  box-shadow: none;
}

/* Semantic actions: filled, because each one is a commitment. */
button.success, .btn.success { background: var(--ok);     color: var(--ok-ink); }
button.toggle,  .btn.toggle  { background: var(--warn);   color: var(--warn-ink); }
button.danger,  .btn.danger  { background: var(--danger); color: var(--danger-ink); }
button.success:hover, .btn.success:hover,
button.toggle:hover,  .btn.toggle:hover,
button.danger:hover,  .btn.danger:hover {
  filter: brightness(1.08);
  box-shadow: var(--sh-sm);
}
[data-theme="dark"] button.success:hover, [data-theme="dark"] .btn.success:hover,
[data-theme="dark"] button.toggle:hover,  [data-theme="dark"] .btn.toggle:hover,
[data-theme="dark"] button.danger:hover,  [data-theme="dark"] .btn.danger:hover {
  filter: brightness(.94);
}

/* Busy: the press registered and the request is out. A ring rather than a
   disabled state, because the control still has to submit its own value. */
button.is-busy, .btn.is-busy {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
button.is-busy::after, .btn.is-busy::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--accent-ink);
  animation: spin .6s linear infinite;
}
button.secondary.is-busy::after,
button.ghost.is-busy::after,
.wrap td button.is-busy::after { color: var(--muted); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Sorted column: the arrow is the answer to the click. */
th[aria-sort] { color: var(--text-2); }
th[aria-sort]::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-left: var(--sp-2);
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
th[aria-sort="ascending"]::after  { border-bottom: 5px solid currentColor; }
th[aria-sort="descending"]::after { border-top: 5px solid currentColor; }

/* Row actions repeat once per record. Filled accent there turns 300 rows
   into a wall of colour and the emphasis stops meaning anything, so inside
   a table every button drops to an outline and keeps only its hue. */
.wrap td button,
.wrap td .btn {
  min-height: 28px;
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text-2);
  box-shadow: none;
}
.wrap td button:hover,
.wrap td .btn:hover {
  background: var(--surface-2);
  border-color: var(--n-400);
  color: var(--text);
  box-shadow: none;
}
[data-theme="dark"] .wrap td button:hover,
[data-theme="dark"] .wrap td .btn:hover { border-color: rgba(255,255,255,.28); }

.wrap td button.success, .wrap td .btn.success { color: var(--ok);     border-color: var(--ok-border); }
.wrap td button.toggle,  .wrap td .btn.toggle  { color: var(--warn);   border-color: var(--warn-border); }
.wrap td button.danger,  .wrap td .btn.danger  { color: var(--danger); border-color: var(--danger-border); }

.wrap td button.success:hover, .wrap td .btn.success:hover { background: var(--ok-soft);     color: var(--ok);     border-color: var(--ok-border); }
.wrap td button.toggle:hover,  .wrap td .btn.toggle:hover  { background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn-border); }
.wrap td button.danger:hover,  .wrap td .btn.danger:hover  { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }


/* ============================================================
   11. TABLES
   ============================================================ */

/* The shell scrolls, and a fade on the right edge says so. The fade is
   painted on the shell's own background so it disappears at the end of
   the scroll — `background-attachment: local` does the detection. */
.wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left / 40px 100% no-repeat local,
    linear-gradient(to left,  var(--surface) 30%, transparent) right / 40px 100% no-repeat local,
    linear-gradient(to right, rgba(16,24,40,.10), transparent) left / 14px 100% no-repeat scroll,
    linear-gradient(to left,  rgba(16,24,40,.10), transparent) right / 14px 100% no-repeat scroll,
    var(--surface);
  box-shadow: var(--sh-xs);
  scrollbar-width: thin;
}

table { width: 100%; border-collapse: collapse; background: transparent; }

th, td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-size: var(--fs-sm);
  white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--faint);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--line);
  transition: color var(--t-fast), background var(--t-fast);
}
th:hover { color: var(--text-2); background: var(--surface-3); }

/* No zebra: a hairline per row and a hover tint carry the scan instead. */
tbody tr { transition: background var(--t-fast); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }

/* First column is the record's identity — give it the weight. */
tbody td:first-child { color: var(--text); font-weight: var(--fw-medium); }

.token, .mono { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); }
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  color: var(--text);
}


/* ============================================================
   12. BADGES, CHIPS, MESSAGES
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  white-space: nowrap;
}
.badge.active {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-text);
}
.badge.ok     { background: var(--ok-soft);     border-color: transparent; color: var(--ok); }
.badge.warn   { background: var(--warn-soft);   border-color: transparent; color: var(--warn); }
.badge.danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.badge.info   { background: var(--info-soft);   border-color: transparent; color: var(--info); }

/* Flash messages. Accent by default; the modifier classes are there for
   templates that want to state the tone explicitly. */
.msg {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.msg.ok     { background: var(--ok-soft);     border-left-color: var(--ok);     color: var(--text-2); }
.msg.warn   { background: var(--warn-soft);   border-left-color: var(--warn);   color: var(--text-2); }
.msg.bad,
.msg.danger { background: var(--danger-soft); border-left-color: var(--danger); color: var(--text-2); }

code {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 1px var(--sp-1);
}

pre {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  overflow-x: auto;
  margin: 0 0 var(--sp-3);
}

img {
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid var(--line);
}

.path { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--muted); word-break: break-all; margin: var(--sp-2) 0 var(--sp-1); }
.date { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--faint); margin-bottom: var(--sp-2); }

/* ---------- brand chips ----------
   Deliberately outside the single-accent rule: these encode which brand a
   row belongs to, and flattening them would delete information the
   operator reads at a glance. Tinted outlines, so they sit inside the
   palette rather than fighting it. */

/* Sahip süzgeci (TGOwner): gizlenen satır sayfanın kendi aramasından bağımsız. */
.sahip-gizli { display: none !important; }
.sahipsuzgec { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; }
.sahipsuzgec .bchip.on { border-color: var(--accent); color: var(--accent); }
.bchip {
  display: inline-flex;
  align-items: center;
  margin: 2px var(--sp-1) 2px 0;
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.b-bahsegel   { border-color: color-mix(in srgb, var(--chart-4) 40%, transparent); color: var(--chart-4); }
.b-bettilt    { border-color: color-mix(in srgb, var(--chart-2) 40%, transparent); color: var(--chart-2); }
.b-casinomhub { border-color: color-mix(in srgb, var(--chart-6) 40%, transparent); color: var(--chart-6); }
.b-paribahis  { border-color: color-mix(in srgb, var(--chart-7) 40%, transparent); color: var(--chart-7); }
.b-rokubet    { border-color: color-mix(in srgb, var(--chart-5) 40%, transparent); color: var(--chart-5); }
.b-betmatik   { border-color: color-mix(in srgb, var(--chart-1) 40%, transparent); color: var(--chart-1); }
.b-oyunlar    { border-color: color-mix(in srgb, var(--chart-3) 40%, transparent); color: var(--chart-3); }
.b-tgads      { border-color: var(--line-strong); color: var(--muted); }
.bchip.solo   { box-shadow: inset 0 0 0 1px currentColor; }


/* ============================================================
   13. EMPTY & LOADING STATES
   ============================================================ */

.emptybox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-12) var(--sp-6);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
}
/* A quiet mark rather than an illustration: three stacked bars fading out,
   drawn in CSS so there is no asset to load or theme. */
.emptybox::before {
  content: "";
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) 10px 14px / 24px 3px no-repeat,
    linear-gradient(var(--line), var(--line))               10px 22px / 18px 3px no-repeat,
    linear-gradient(var(--line-soft), var(--line-soft))     10px 30px / 12px 3px no-repeat,
    var(--surface-2);
}
.emptybox b { color: var(--text); font-weight: var(--fw-semibold); font-size: var(--fs-body); }

/* Skeletons: add class="skel" to a block with a width/height. */
.skel {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg,
              var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
  background-size: 400% 100%;
  animation: skel 1.4s var(--ease) infinite;
}
.skel-text { height: 12px; margin-bottom: var(--sp-2); }
.skel-text:nth-child(3n) { width: 72%; }
@keyframes skel { from { background-position: 100% 50%; } to { background-position: 0 50%; } }


/* ============================================================
   14. ICONS — one set (Lucide geometry), inlined as data URIs so
       nothing is fetched and both themes tint via currentColor.
   ============================================================ */

:root {
  --icon-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  --icon-chevron-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  --icon-search-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
}
[data-theme="dark"] {
  --icon-chevron-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237D8799' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  --icon-search-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237D8799' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
}


/* ============================================================
   15. RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  :root { --nav-w: 220px; }
}

@media (max-width: 860px) {
  .layout { flex-direction: column; }

  /* Stacked, the 25-link nav filled the whole first screen before any
     content appeared. Capped to a scrollable strip, laid out two-up. */
  .sidebar {
    width: 100%;
    flex: none;
    height: auto;
    max-height: 40vh;
    position: static;
    padding: var(--sp-4) var(--sp-3);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .sidebar h2 { margin-bottom: var(--sp-4); }
  .sidebar details > a {
    display: inline-flex;
    width: calc(50% - 3px);
    vertical-align: top;
  }

  .appbar {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
    /* The toolbar gained a fold-all control and stopped fitting on a phone,
       pushing the whole page 40px wide. It wraps to a second row instead. */
    flex-wrap: wrap;
    row-gap: var(--sp-2);
  }
  .appbar .pagename { display: none; }
  .appbar .toolbar { flex-wrap: wrap; row-gap: var(--sp-2); }
  .foldall { padding-left: var(--sp-2); padding-right: var(--sp-2); }

  .main { padding: var(--sp-5) var(--sp-4) var(--sp-12); }
  .grid { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
  .button-row { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}

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

@media print {
  .sidebar, .appbar, .skip { display: none !important; }
  .main { padding: 0; max-width: none; }
  .card, .wrap { box-shadow: none; border-color: var(--n-300); }
}

/* ---------- kart ici kaydetme durumu ----------
   The answer to a save appears on the card that was saved, not as a banner
   at the top of a page the operator may have scrolled away from. */
.savestate {
  margin: 0 0 var(--sp-3, 12px);
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  border-radius: var(--r-md, 8px);
  border-left: 3px solid var(--ok, green);
  background: var(--ok-soft, rgba(0,128,0,.1));
  color: var(--text);
  font-size: var(--fs-sm, 13px);
  line-height: 1.45;
  animation: savein 150ms ease;
}
.savestate.bad {
  border-left-color: var(--danger, red);
  background: var(--danger-soft, rgba(255,0,0,.1));
}
.card.folded > .savestate { display: none !important; }
@keyframes savein { from { opacity: 0; transform: translateY(-3px); } }

/* ---------- kayitli link secici ---------- */
.linkwrap { position: relative; display: flex; align-items: stretch; gap: 0; }
.linkwrap > input { flex: 1; min-width: 0; padding-right: 5.2rem; }
details.linkpick { position: absolute; right: 6px; top: 50%;
                   transform: translateY(-50%); }
/* The URL input carries its own bottom margin; the picker must sit against
   the field, not the gap under it. */
.linkwrap > input[style*="margin"] ~ details.linkpick { top: 1.15rem; }
details.linkpick > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 2px 8px; border-radius: var(--r-sm, 6px);
  border: 1px solid var(--line-strong, var(--line));
  background: var(--surface-2, transparent);
  color: var(--muted); font-size: var(--fs-2xs, 11px); white-space: nowrap;
}
details.linkpick > summary::-webkit-details-marker { display: none; }
details.linkpick > summary:hover { color: var(--text); }
details.linkpick[open] > summary { color: var(--text); }
.linkpanel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  width: 22rem; max-width: 78vw;
  background: var(--surface); border: 1px solid var(--line-strong, var(--line));
  border-radius: var(--r-md, 8px); box-shadow: var(--sh-lg, 0 8px 24px rgba(0,0,0,.3));
  padding: 6px;
}
.linktabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 6px; }
.linktabs button { flex: 1 0 auto; white-space: nowrap; }
.linktabs button {
  flex: 1; min-height: 0; padding: 4px 6px; border: 0; box-shadow: none;
  border-radius: var(--r-sm, 6px); background: none; color: var(--muted);
  font-size: var(--fs-2xs, 11px);
}
.linktabs button.on { background: var(--surface-3, rgba(0,0,0,.06)); color: var(--text); }
.linktabs button:hover { background: var(--surface-3, rgba(0,0,0,.06)); box-shadow: none; }
.linklist { max-height: 15rem; overflow-y: auto; }
button.linkitem {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; min-height: 0; margin: 0 0 2px; padding: 5px 7px;
  border: 0; border-radius: var(--r-sm, 6px); background: none;
  box-shadow: none; text-align: left; color: var(--text);
}
button.linkitem:hover { background: var(--surface-2, rgba(0,0,0,.05));
                        box-shadow: none; }
button.linkitem b { font-size: 12.5px; font-weight: 600; }
button.linkitem span { font-family: var(--mono); font-size: 10.5px;
                       color: var(--muted); max-width: 100%;
                       overflow: hidden; text-overflow: ellipsis;
                       white-space: nowrap; }
@media (max-width: 620px) { .linkpanel { width: 17rem; } }


/* Oturumu kapatma: arac cubugunun sagindaki hesap adi + cikis dugmesi. */
.appbar .signout { display: flex; align-items: center; gap: 8px; margin: 0; }
.appbar .signout button { margin: 0; padding: 4px 10px; font-size: 12px; }

/* ---------- telegram preview (funnel, channels) ----------
   A message as Telegram draws it: picture on top, text under it, buttons
   in their own rows below. Kept close to the real thing on purpose — the
   whole value of the preview is that it is not a panel's idea of the post. */

.tgprev {
  max-width: 26rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  overflow: hidden;
}
.tgprev .tgimg img {
  display: block;
  width: 100%;
  max-height: 15rem;
  object-fit: cover;
}
.tgprev .tgtext {
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
}
.tgprev .tgtext .tgempty { color: var(--faint); }
.tgprev .tgtext a { color: var(--accent); }
.tgprev .tgtext pre,
.tgprev .tgtext code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: rgba(255,255,255,.06);
  border-radius: 4px;
  padding: 0 4px;
}
.tgprev .tgkeys { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 4px; }
.tgprev .tgrow { display: flex; gap: 4px; }
.tgprev .tgkey {
  flex: 1;
  text-align: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  font-size: 12.5px;
}
.tgprev .tgkey.s-primary { border-color: var(--accent); color: var(--accent); }
.tgprev .tgkey.s-success { border-color: rgba(52,211,153,.4); color: var(--ok); }
.tgprev .tgkey.s-danger  { border-color: rgba(248,113,113,.4); color: var(--danger); }

/* ---------- toasts ----------
   The answer to "did that work?" used to live either at the top of the page
   or inside the card that was saved. Both are places you can be scrolled
   away from, so a save two screens down looked like nothing had happened.
   This says it where the eye already is, and stays put while the page
   underneath is used. */

.toastwrap {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 200;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  max-width: min(27rem, calc(100vw - 36px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--line-strong, #444);
  border-left-width: 3px;
  background: var(--surface, #1b1b24);
  color: var(--text, #eee);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  animation: toastin 160ms ease;
}
.toast.ok   { border-left-color: var(--ok, green); }
.toast.bad  { border-left-color: var(--danger, red); }
.toast.warn { border-left-color: var(--warn, orange); }
.toast .tmark { flex: none; font-size: 13px; line-height: 1.45; }
.toast.ok   .tmark { color: var(--ok, green); }
.toast.bad  .tmark { color: var(--danger, red); }
.toast.warn .tmark { color: var(--warn, orange); }
.toast .tbody { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* A long report — "nine sources returned nothing: …" — is worth reading,
   but not worth a toast the height of the screen. */
.toast .tbody { max-height: 9rem; overflow-y: auto; }
.toast .tshut {
  flex: none;
  min-height: 0;
  padding: 0 4px;
  margin: -2px -4px 0 0;
  background: none;
  border: 0;
  color: var(--faint, #888);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.toast .tshut:hover { color: var(--text, #eee); background: none; box-shadow: none; }
.toast.going { opacity: 0; transform: translateY(6px); transition: opacity 160ms, transform 160ms; }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 640px) {
  .toastwrap { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast.going { transition: none; }
}


/* Açılır düğme (30 Eki 2026 temizliği): bir düğmede birkaç seçenek; details ile, betik gerekmez. */
.acilir { position: relative; display: inline-block; }
.acilir > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.acilir > summary::-webkit-details-marker { display: none; }
.acilir .acilir-liste { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 220px;
  display: grid; gap: 4px; padding: 6px; background: var(--card, var(--bg)); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.acilir .acilir-liste button { justify-content: flex-start; width: 100%; }
/* "Değişenleri göster": adrese ?yeni=1 eklenince data-yeni taşıyan denetimler çerçevelenir ve
   üzerine gelince ne değiştiği yazılır (operatör: "nelerin değiştiğini highlight ederek göster"). */
html[data-yeni] [data-yeni] { outline: 2px dashed var(--accent, #3565d9); outline-offset: 3px; border-radius: 8px; position: relative; }
html[data-yeni] [data-yeni]::after { content: "YENİ"; position: absolute; right: -8px; top: -11px;
  font-size: 10px; line-height: 1.2; padding: 1px 5px; border-radius: 6px; background: var(--accent, #3565d9); color: #fff;
  white-space: nowrap; z-index: 20; pointer-events: none; }
html[data-yeni] [data-yeni]:hover::after { content: "YENİ · " attr(data-yeni); right: auto; left: 0; top: auto; bottom: calc(100% + 6px);
  font-size: 11px; padding: 2px 6px; z-index: 40; }

/* Yapay zekâ ajanı (4 Kas 2026): ✨ düğmesi alanı doldurur, kayıt operatörde; altındaki şerit 👍/👎 alır. */
button.ajan { flex: 0 0 auto; width: auto; padding: 2px 9px; font-size: 13px; margin-left: 6px; vertical-align: middle; }
button.ajan.is-busy { opacity: .6; }
.ajanson { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 2px 0 6px; }
.ajanson input { width: auto; flex: 1 1 10rem; font-size: 12px; margin: 0; }
.ajanson button { padding: 1px 7px; font-size: 12px; }

/* Ajan Masası (11 Kas 2026): panelden konuşulan ajanın sohbet kutusu — /ajan sayfasında ve üst çubuktaki
   "Ajan" düğmesinin açtığı sağ panelde aynı parça (templates/_ajan_masa.html, static/ajanmasa.js). */
.ajm { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ajm-bas { display: flex; gap: 8px; align-items: center; }
.ajm-bas .ajm-sec { flex: 1 1 auto; min-width: 0; width: auto; margin: 0; font-size: 13px; }
.ajm-bas button { flex: 0 0 auto; width: auto; margin: 0; white-space: nowrap; }
.ajm-akis { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 220px; max-height: 56vh;
  padding: 10px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface-sunken, var(--bg-soft)); }
.ajm-cekmece .ajm-akis { max-height: none; flex: 1 1 auto; }
.ajm-govde { display: flex; flex-direction: column; min-height: 0; height: calc(100vh - 64px); }
.ajm-govde > .ajm { flex: 1 1 auto; }
.ajm-bos { margin: auto; max-width: 30rem; text-align: center; color: var(--muted); font-size: 13px; display: grid; gap: 6px; }
.ajm-bos b { color: var(--text); font-size: 14px; }
.ajm-ileti { display: flex; flex-direction: column; max-width: 92%; }
.ajm-ileti.ben { align-self: flex-end; align-items: flex-end; }
.ajm-ileti.ajan { align-self: flex-start; }
.ajm-balon { padding: 8px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.ajm-ileti.ben .ajm-balon { background: var(--accent-soft); color: var(--text); border-bottom-right-radius: 4px; }
.ajm-ileti.ajan .ajm-balon, .ajm-canli-metin { background: var(--surface, var(--card)); border: 1px solid var(--line-soft); border-bottom-left-radius: 4px; }
.ajm-balon p, .ajm-canli-metin p { margin: 0 0 6px; }
.ajm-balon p:last-child, .ajm-canli-metin p:last-child { margin-bottom: 0; }
.ajm-balon ul, .ajm-canli-metin ul { margin: 2px 0 6px; padding-left: 18px; }
.ajm-balon code, .ajm-canli-metin code { font-size: 12px; padding: 0 4px; border-radius: 4px; background: var(--surface-2); }
.ajm-oy { display: flex; gap: 4px; align-items: center; margin-top: 2px; }
.ajm-oy button { width: auto; padding: 0 6px; font-size: 12px; margin: 0; border: 0; background: none; opacity: .55; }
.ajm-oy button:hover { opacity: 1; }
.ajm-ret { display: inline-flex; gap: 4px; align-items: center; }
.ajm-ret input { width: 12rem; font-size: 12px; margin: 0; padding: 3px 6px; }
.ajm-adim-satir { align-self: flex-start; font-size: 12px; color: var(--muted); padding-left: 4px; }
.ajm-adim-satir.bad, .ajm-not.bad { color: var(--danger); }
.ajm-not { align-self: center; font-size: 12px; color: var(--muted); text-align: center; max-width: 90%; }
.ajm-oneri { align-self: stretch; border: 1px solid var(--accent-dim, var(--line)); border-left: 3px solid var(--accent); border-radius: 10px;
  padding: 9px 11px; background: var(--surface, var(--card)); display: grid; gap: 5px; font-size: 13px; }
.ajm-oneri[data-durum="yapildi"] { border-left-color: var(--ok); }
.ajm-oneri[data-durum="olmadi"] { border-left-color: var(--danger); }
.ajm-oneri[data-durum="reddedildi"], .ajm-oneri[data-durum="suresi_gecti"], .ajm-oneri[data-durum="yok"] { border-left-color: var(--line-strong); opacity: .8; }
.ajm-oneri-bas { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.ajm-oneri-bas .chip { flex: 0 0 auto; font-size: 11px; }
.ajm-oneri-neden { color: var(--text-2, var(--muted)); }
.ajm-oneri-par { display: flex; gap: 4px 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.ajm-oneri-par i { font-style: normal; color: var(--faint, var(--muted)); }
.ajm-oneri-havuz { display: flex; gap: 10px; align-items: flex-start; }
.ajm-oneri-havuz img { width: 128px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); flex: 0 0 auto; }
.ajm-oneri-havuz .chip { font-size: 11px; }
.ajm-oneri-metin { margin-top: 4px; font-size: 12.5px; }
.ajm-oneri-alt { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* İlan havuzu (Yapay zekâ ajanı › Havuz): görsel ızgarası ve metin tablosu */
.hvgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 8px 0; }
.hvkart { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface-2, transparent); display: flex; flex-direction: column; }
.hvkart img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--line-soft, var(--line)); }
.hvkart .hvalt { padding: 6px 8px; display: flex; gap: 4px 8px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); }
.hvkart .hvkod, .hvt .hvkod { font-weight: 600; color: var(--text); font-family: var(--mono, ui-monospace, monospace); font-size: 13px; }
.hvkart form { margin: 0 0 0 auto; }
.hvkart .hvuyari { flex-basis: 100%; color: var(--warn); }
table.hvt { width: 100%; border-collapse: collapse; font-size: 13px; }
table.hvt th, table.hvt td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft, var(--line)); text-align: left; vertical-align: top; }
table.hvt td.w { white-space: nowrap; }
table.hvt form { margin: 0; }
.hvt .hvuyari { color: var(--warn); font-size: 12px; }
/* Conversion sekmesi */
ol.convsira { margin: 4px 0 6px; padding-left: 22px; font-size: 13px; }
ol.convsira li { padding: 3px 0; }
ol.convsira li span { display: block; }
table.convt th { white-space: nowrap; font-size: 11.5px; color: var(--muted); }
table.convt th.num, table.convt td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.convt th button { all: unset; cursor: pointer; color: inherit; font: inherit; }
table.convt th button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
table.convt th[aria-sort="ascending"] button::after { content: " ↑"; }
table.convt th[aria-sort="descending"] button::after { content: " ↓"; }
.hvform { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 8px; }
.hvform label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.hvform input[type=text], .hvform input:not([type]) { width: 9rem; }
.hvform .hvmetin { flex: 1 1 22rem; }
.hvform .hvmetin input { width: 100%; }
.hvform button { width: auto; margin: 0; }
.ajm-oneri-alt button { width: auto; margin: 0; padding: 4px 12px; font-size: 12.5px; }
.ajm-oneri-not.ok { color: var(--ok); }
.ajm-oneri-not.bad { color: var(--danger); }
.ajm-oneri-not.idle { color: var(--muted); }
.ajm-canli { display: grid; gap: 4px; }
.ajm-canli-metin { padding: 8px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; max-height: 30vh; overflow-y: auto; }
.ajm-adim { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); }
.ajm-adim button { width: auto; margin: 0 0 0 auto; padding: 2px 10px; font-size: 12px; }
.ajm-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: .9; transition: opacity .2s; }
.ajm-hizli { display: flex; gap: 6px; flex-wrap: wrap; }
.ajm-hizli .chip { width: auto; margin: 0; cursor: pointer; font-size: 12px; }
.ajm-yaz { display: flex; gap: 8px; align-items: flex-end; }
.ajm-yaz textarea { flex: 1 1 auto; margin: 0; resize: none; min-height: 46px; height: 46px; max-height: 180px; }
.ajm-yaz button { flex: 0 0 auto; width: auto; margin: 0; }
.ajm-uyari { color: var(--danger); }
#ajanMasaAc.calisiyor .ic { color: var(--accent); }
#ajanMasaAc.calisiyor::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 4px; }