/* HADİ devs — ortak tasarım sistemi (Starlight sayfaları + playground). Renkler lib/theme/hadi_colors.dart ile aynı:
   dört kurdele H·A·D·İ (heyecan, aktivite, dostluk, iletişim), lacivert ve gece tonları. Yazı tipi yerel (Bricolage
   Grotesque, OFL); üçüncü taraf kaynak yok. Koyu tema varsayılan; açık tema [data-theme="light"] ya da sistem tercihi. */

@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/BricolageGrotesque-Regular.ttf") format("truetype"); font-weight: 200 600; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/BricolageGrotesque-Bold.ttf") format("truetype"); font-weight: 700 900; font-display: swap; }

:root {
  --h: #F2801F; --a: #1D9AD6; --d: #78BE3A; --i: #A3338C; --pink: #D33C73; --navy: #17344F; --gold: #D9A93A;
  --night: #0D2033; --night-2: #0A1929; --night-card: #152D45; --night-line: #244460; --night-text: #E8EFF5; --night-muted: #9DB0C2;
  --hx-bg: var(--night-2); --hx-bg-2: var(--night); --hx-card: var(--night-card); --hx-line: var(--night-line);
  --hx-text: var(--night-text); --hx-muted: var(--night-muted); --hx-strong: #ffffff;
  --hx-code-bg: #07131f; --hx-code-text: #d7e3ee;
  --hx-h: #ff9a45; --hx-a: #45b6ea; --hx-d: #95d65a; --hx-i: #d164bd; /* koyu zeminde 4.5:1 metin tonları */
  --hx-ok: #95d65a; --hx-warn: #f5b041; --hx-err: #ff7b7b;
  --hx-font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hx-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --hx-radius: 18px; --hx-radius-sm: 10px;
  --hx-ribbon: linear-gradient(90deg, var(--h) 0 25%, var(--a) 25% 50%, var(--d) 50% 75%, var(--i) 75% 100%);
  --hx-glow: radial-gradient(60% 60% at 15% 10%, rgba(242,128,31,.18), transparent 70%), radial-gradient(50% 60% at 90% 0%, rgba(29,154,214,.20), transparent 70%), radial-gradient(60% 60% at 80% 100%, rgba(163,51,140,.16), transparent 70%), radial-gradient(40% 50% at 10% 100%, rgba(120,190,58,.14), transparent 70%);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --hx-bg: #ffffff; --hx-bg-2: #f6f8fb; --hx-card: #ffffff; --hx-line: #e3e9f0;
  --hx-text: #24384c; --hx-muted: #5b6f82; --hx-strong: var(--navy);
  --hx-code-bg: #0d2033; --hx-code-text: #e8eff5;
  --hx-h: #b4560a; --hx-a: #0f6d9c; --hx-d: #3f7a14; --hx-i: #8f2a7a;
  --hx-ok: #2f6f0f; --hx-warn: #8a5a00; --hx-err: #b42318;
  --hx-glow: radial-gradient(60% 60% at 15% 10%, rgba(242,128,31,.12), transparent 70%), radial-gradient(50% 60% at 90% 0%, rgba(29,154,214,.12), transparent 70%), radial-gradient(60% 60% at 80% 100%, rgba(163,51,140,.08), transparent 70%), radial-gradient(40% 50% at 10% 100%, rgba(120,190,58,.10), transparent 70%);
  color-scheme: light;
}

[hidden] { display: none !important; }

/* ---------- rozetler */
.hx-badge { display: inline-flex; align-items: center; gap: .35em; font: 600 .74rem/1 var(--hx-font); letter-spacing: .02em; padding: .38em .62em; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.risk-R0, .risk-R1 { color: var(--hx-d); }
.risk-R2 { color: var(--hx-a); }
.risk-R3 { color: var(--hx-h); }
.risk-R4 { color: var(--hx-i); }
.gate-open { color: var(--hx-d); } .gate-write, .gate-read { color: var(--hx-a); } .gate-tier { color: var(--hx-h); } .gate-closed { color: var(--hx-i); }
.hx-method { display: inline-block; min-width: 3.9em; text-align: center; font: 700 .72rem/1 var(--hx-mono); padding: .42em .5em; border-radius: 7px; color: #fff; letter-spacing: .03em; }
.m-get { background: #1a7fb3; } .m-post { background: #4f8a22; } .m-delete { background: #b23a3a; } .m-patch { background: #9a4f0f; } .m-put { background: #7a2a6a; }
.hx-scope { font: 500 .78rem/1 var(--hx-mono); padding: .3em .5em; border-radius: 6px; background: color-mix(in srgb, var(--hx-a) 14%, transparent); color: var(--hx-a); }

/* ---------- kod sekmeleri */
.hx-code { border: 1px solid var(--hx-line); border-radius: var(--hx-radius); overflow: hidden; background: var(--hx-code-bg); margin: 1rem 0; }
.hx-code-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 6px; background: color-mix(in srgb, var(--hx-code-bg) 80%, #000); scrollbar-width: thin; }
.hx-code-tabs button { flex: none; border: 0; background: transparent; color: #9db0c2; font: 600 .78rem/1 var(--hx-font); padding: .55em .8em; border-radius: 8px; cursor: pointer; }
.hx-code-tabs button[aria-selected="true"] { background: #1b3550; color: #fff; box-shadow: inset 0 -2px 0 var(--h); }
.hx-code-tabs button:hover { color: #fff; }
.hx-code-body { position: relative; }
.hx-code pre { margin: 0 !important; padding: 1rem 6.2rem 1rem 1.1rem !important; background: transparent !important; color: var(--hx-code-text); font: .82rem/1.6 var(--hx-mono); overflow-x: auto; border: 0 !important; white-space: pre; }
.hx-copy { position: absolute; top: 8px; right: 8px; border: 1px solid #2a4a68; background: #11263b; color: #d7e3ee; font: 600 .72rem/1 var(--hx-font); padding: .5em .7em; border-radius: 8px; cursor: pointer; }
.hx-copy:hover { border-color: var(--h); }
.hx-copy[data-done] { color: var(--hx-ok); border-color: var(--hx-ok); }

/* ---------- butonlar */
.hx-btn { display: inline-flex; align-items: center; gap: .5em; font: 700 .95rem/1 var(--hx-font); padding: .9em 1.25em; border-radius: 14px; border: 1px solid transparent; text-decoration: none !important; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease; }
.hx-btn-primary { background: var(--h); color: #1d1206 !important; box-shadow: 0 10px 30px -10px rgba(242,128,31,.7); }
.hx-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -10px rgba(242,128,31,.85); }
.hx-btn-ghost { background: transparent; color: var(--hx-strong) !important; border-color: var(--hx-line); }
.hx-btn-ghost:hover { border-color: var(--hx-a); }
.hx-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
:where(.hx-btn, .hx-code-tabs button, .hx-copy, .hadi-palette li, .hx-card):focus-visible { outline: 3px solid var(--hx-a); outline-offset: 2px; }

/* ---------- komut paleti */
.hadi-palette { border: 0; padding: 0; background: transparent; width: min(680px, calc(100vw - 32px)); margin-top: 12vh; color: var(--hx-text); }
.hadi-palette::backdrop { background: rgba(5, 14, 24, .62); backdrop-filter: blur(6px); }
.hp-box { background: var(--hx-card); border: 1px solid var(--hx-line); border-radius: 20px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); overflow: hidden; }
.hp-box::before { content: ""; display: block; height: 4px; background: var(--hx-ribbon); }
.hadi-palette input { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--hx-line); background: transparent; color: var(--hx-strong); font: 500 1.1rem/1.4 var(--hx-font); padding: 1rem 1.2rem; outline: none; }
.hadi-palette ul { list-style: none; margin: 0; padding: 6px; max-height: min(52vh, 460px); overflow-y: auto; }
.hadi-palette li { display: grid; grid-template-columns: 4.2em 1fr auto auto; align-items: center; gap: .7em; padding: .62em .75em; border-radius: 12px; cursor: pointer; margin: 0; }
.hadi-palette li[aria-selected="true"] { background: color-mix(in srgb, var(--hx-a) 16%, transparent); }
.hp-kind { font: 600 .68rem/1 var(--hx-font); text-transform: uppercase; letter-spacing: .06em; color: var(--hx-muted); }
.hadi-palette li[data-kind="op"] .hp-kind { color: var(--hx-a); } .hadi-palette li[data-kind="cmd"] .hp-kind { color: var(--hx-h); } .hadi-palette li[data-kind="page"] .hp-kind { color: var(--hx-d); }
.hp-label { color: var(--hx-strong); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-hint { color: var(--hx-muted); font: .78rem var(--hx-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.hp-badge { font: 700 .66rem/1 var(--hx-mono); border: 1px solid currentColor; border-radius: 6px; padding: .25em .4em; }
.hp-empty { color: var(--hx-muted); display: block !important; text-align: center; padding: 1.2rem !important; }
.hp-foot { margin: 0; padding: .6rem 1.2rem; border-top: 1px solid var(--hx-line); color: var(--hx-muted); font-size: .75rem; }

/* ---------- JSON ağacı */
.j-tree { font: .82rem/1.65 var(--hx-mono); color: var(--hx-code-text); }
.j-tree details > summary { cursor: pointer; list-style: none; }
.j-tree details > summary::-webkit-details-marker { display: none; }
.j-tree details > summary::before { content: "▸"; display: inline-block; width: 1em; color: #6c8aa6; transition: transform .15s; }
.j-tree details[open] > summary::before { transform: rotate(90deg); }
.j-kids { padding-left: 1.2em; border-left: 1px dashed #1f3a55; margin-left: .35em; }
.j-key { color: #7cc4ff; } .j-string { color: #b5e48c; } .j-number { color: #ffb86b; } .j-boolean, .j-null { color: #e39be0; } .j-meta { color: #6c8aa6; }

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