/*
 * Part 277 (founder, 31 Oct 2026: "sitenin her yeri aynı vibe olsun — mouse ile hareketli, 3D, parlayan") — the site in the
 * lobby's, the result card's and the karne's look: every card a thick face on its edge, every button a key, every field
 * a well, and a light that follows the pointer (`pointer-light.ts`). The shared classes (`glass-card`, `gece-card`,
 * `bg-accent`, `rounded border`) are restyled here, so a page takes the look by standing inside `SiteSkin`.
 *
 * A PLAIN FILE IN public/, linked by `SiteSkin`, and never a CSS module: Turbopack merged the module into the chunk the
 * root layout loads, with Denemelerim's behind it, and every exam route's first-load CSS doubled to 199 KB (measured; the
 * cause Part 262 found). React's stylesheet link blocks paint exactly as a bundled one does, so no page flashes unstyled,
 * and no exam route links it: pinned by `lobby-stage.spec.ts`'s bytes and `pointer-light.spec.ts`.
 *
 * It is served as written: keep it small. `[data-site-skin]` three times out-ranks gece's global card rules; keep it so.
 *
 * Colour: the site's tokens only, classic and Gece alike. The verdict colours are nowhere here: a face is not a judgement.
 * The light is luminosity: dark, a bright core and a wide halo; light, the same shape as depth — a white sheen on the face
 * (it can only raise the contrast of the ink under it) and a dark rim (CLAUDE.md §1). The spot sits UNDER the content, and
 * at full strength keeps the muted ink ≥ 4.5:1 on a face and on a tile (measured in `pointer-light.spec.ts`).
 * Under prefers-reduced-motion the engine never starts and no key moves: the faces and their rest light stay.
 */

[data-site-skin],
[data-site-skin] [data-ui="gece"] {
  --sk-face: color-mix(in srgb, var(--accent) 4%, color-mix(in srgb, var(--foreground) 7%, var(--background)));
  --sk-edge: color-mix(in srgb, var(--sk-face) 55%, black);
  --sk-tile: color-mix(in srgb, var(--foreground) 8%, var(--sk-face));
  --sk-tile-edge: color-mix(in srgb, var(--sk-tile) 52%, black);
  --sk-well: color-mix(in srgb, var(--background) 45%, var(--sk-face));
  --sk-drop: rgb(0 0 0 / 0.55);
  --sk-halo: color-mix(in srgb, var(--accent) 26%, transparent);
  --sk-rim-rest: color-mix(in srgb, var(--foreground) 16%, transparent);
  --sk-rim: color-mix(in srgb, var(--accent) 70%, white);
  --sk-spot: color-mix(in srgb, var(--accent) 11%, transparent);
  --sk-spot-tile: color-mix(in srgb, var(--accent) 5%, transparent);
  --sk-orb: color-mix(in srgb, var(--accent) 11%, transparent);
  --sk-sheen-a: transparent;
  --sk-sheen-b: transparent;
  --sk-chart-a: var(--accent);
  --sk-chart-b: color-mix(in srgb, var(--accent) 50%, transparent);
  --sk-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Classic is black and white (founder, 31 Oct): its aurora is white light, no hue. */
  --sk-aurora-1: rgb(255 255 255 / 0.075);
  --sk-aurora-2: rgb(255 255 255 / 0.05);
  --sk-aurora-3: rgb(255 255 255 / 0.04);
}

[data-theme="light"] [data-site-skin],
[data-theme="light"] [data-site-skin] [data-ui="gece"] {
  --sk-face: color-mix(in srgb, var(--foreground) 3%, var(--background));
  --sk-tile: color-mix(in srgb, var(--foreground) 7%, var(--background));
  --sk-well: color-mix(in srgb, var(--foreground) 2%, var(--background));
  --sk-edge: color-mix(in srgb, var(--foreground) 26%, var(--background));
  --sk-tile-edge: color-mix(in srgb, var(--foreground) 28%, var(--background));
  --sk-drop: rgb(15 23 42 / 0.2);
  --sk-halo: transparent;
  --sk-rim-rest: rgb(0 0 0 / 0.08);
  --sk-rim: rgb(0 0 0 / 0.5);
  --sk-spot: rgb(255 255 255 / 0.85);
  --sk-spot-tile: rgb(255 255 255 / 0.85);
  --sk-orb: color-mix(in srgb, var(--accent) 6%, transparent);
  --sk-aurora-1: rgb(0 0 0 / 0.04);
  --sk-aurora-2: rgb(0 0 0 / 0.03);
  --sk-aurora-3: rgb(0 0 0 / 0.025);
}

/*
 * Gece: the faces are coloured glass, never grey. The token block must also stand ON the elements under `[data-ui]`:
 * a custom property is resolved where it is declared, so a block on the skin's root alone read classic's black and white
 * inside a gece page (the black cards and the white haze round the pointer, fixed in Part 279). `:has` is for the three
 * layers at the skin's root (the aurora, the glow, the ring), which stand outside the page's `[data-ui]`.
 */
[data-site-skin]:has([data-ui="gece"]),
[data-site-skin] [data-ui="gece"],
[data-ui="gece"] [data-site-skin] {
  --sk-v: #7c5cff;
  --sk-b: #3b82f6;
  --sk-c: #22d3ee;
  --sk-m: #d946ef;
  /* The muted ink on coloured glass: at Gece's own value it reads 3.2:1 on a lit tile. The glass keeps its colour; the ink moves. */
  --muted: color-mix(in srgb, var(--foreground) 45%, var(--gece-muted));
  --sk-face: color-mix(in srgb, var(--sk-v) 17%, color-mix(in srgb, var(--foreground) 5%, var(--background)));
  --sk-tile: color-mix(in srgb, var(--sk-b) 12%, color-mix(in srgb, var(--foreground) 9%, var(--sk-face)));
  --sk-edge: color-mix(in srgb, var(--sk-v) 42%, black);
  --sk-tile-edge: color-mix(in srgb, var(--sk-b) 34%, black);
  --sk-well: color-mix(in srgb, var(--background) 62%, var(--sk-face));
  --sk-halo: color-mix(in srgb, var(--sk-v) 42%, transparent);
  --sk-rim-rest: color-mix(in srgb, var(--sk-c) 26%, transparent);
  --sk-rim: color-mix(in srgb, var(--sk-c) 60%, white);
  --sk-spot: color-mix(in srgb, var(--sk-c) 12%, transparent);
  --sk-spot-tile: color-mix(in srgb, var(--sk-c) 6%, transparent);
  --sk-orb: color-mix(in srgb, var(--sk-v) 26%, transparent);
  --sk-sheen-a: color-mix(in srgb, var(--sk-v) 16%, transparent);
  --sk-sheen-b: color-mix(in srgb, var(--sk-c) 8%, transparent);
  --sk-chart-a: #a78bfa;
  --sk-chart-b: var(--sk-c);
  --sk-aurora-1: color-mix(in srgb, var(--sk-v) 34%, transparent);
  --sk-aurora-2: color-mix(in srgb, var(--sk-b) 26%, transparent);
  --sk-aurora-3: color-mix(in srgb, var(--sk-m) 16%, transparent);
}

[data-theme="light"] [data-site-skin]:has([data-ui="gece"]),
[data-theme="light"] [data-site-skin] [data-ui="gece"],
[data-theme="light"] [data-ui="gece"] [data-site-skin] {
  --muted: var(--gece-muted);
  --sk-face: color-mix(in srgb, var(--sk-v) 6%, var(--background));
  --sk-tile: color-mix(in srgb, var(--sk-b) 9%, var(--background));
  --sk-edge: color-mix(in srgb, var(--sk-v) 36%, var(--background));
  --sk-tile-edge: color-mix(in srgb, var(--sk-b) 34%, var(--background));
  --sk-well: color-mix(in srgb, var(--sk-v) 3%, var(--background));
  --sk-halo: transparent;
  --sk-rim-rest: color-mix(in srgb, var(--sk-v) 22%, transparent);
  --sk-rim: var(--sk-v);
  --sk-spot: rgb(255 255 255 / 0.85);
  --sk-spot-tile: rgb(255 255 255 / 0.85);
  --sk-orb: color-mix(in srgb, var(--sk-v) 12%, transparent);
  --sk-sheen-a: rgb(255 255 255 / 0.5);
  --sk-sheen-b: color-mix(in srgb, var(--sk-c) 7%, transparent);
  --sk-chart-a: var(--sk-v);
  --sk-aurora-1: color-mix(in srgb, var(--sk-v) 16%, transparent);
  --sk-aurora-2: color-mix(in srgb, var(--sk-c) 14%, transparent);
  --sk-aurora-3: color-mix(in srgb, var(--sk-m) 10%, transparent);
}

/* The aurora replaces the page's backdrop: it stands behind every page's own content. */
[data-site-skin] .gece-backdrop,
[data-site-skin] [data-ui="gece"],
[data-ui="gece"]:has([data-site-skin]) {
  background: transparent;
}

/* The wide glow that trails the pointer: between the page's backdrop and its cards. */
.sk-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.sk-aurora i {
  position: absolute;
  width: 80vmax;
  height: 80vmax;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c), transparent 66%);
  translate: calc(var(--sx, 0) * var(--p)) calc(var(--sy, 0) * var(--p));
}

.sk-aurora i:nth-child(1) { --c: var(--sk-aurora-1); --p: -70px; top: -38vmax; left: -22vmax; }
.sk-aurora i:nth-child(2) { --c: var(--sk-aurora-2); --p: 52px; top: 8vmax; right: -30vmax; }
.sk-aurora i:nth-child(3) { --c: var(--sk-aurora-3); --p: -34px; bottom: -48vmax; left: 12vmax; }

@media (prefers-reduced-motion: no-preference) {
  .sk-aurora i:nth-child(1) { animation: skDriftA 26s ease-in-out infinite alternate; }
  .sk-aurora i:nth-child(2) { animation: skDriftB 33s ease-in-out infinite alternate; }
  .sk-aurora i:nth-child(3) { animation: skDriftC 41s ease-in-out infinite alternate; }
  /* The karne stays a page of dense tables with one pulse (report-motion.spec): its aurora leans with the pointer and never drifts. */
  [data-site-skin]:has([data-karne]) .sk-aurora i { animation: none; }
}

/* A phone keeps two lights: the third costs a large texture for little. */
@media (pointer: coarse) {
  .sk-aurora i:nth-child(3) { display: none; }
}

@keyframes skDriftA { to { transform: translate(26vmax, 16vmax) scale(1.2); } }
@keyframes skDriftB { to { transform: translate(-30vmax, 14vmax) scale(0.85); } }
@keyframes skDriftC { to { transform: translate(18vmax, -24vmax) scale(1.25); } }

/* The ring on the cursor: it never replaces the cursor, opens over what can be pressed, steps aside over a text field. */
.sk-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.sk-cursor::before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--sk-rim);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--sk-halo), inset 0 0 8px var(--sk-halo);
  transition: transform 220ms var(--sk-spring);
}

.sk-cursor[data-on] { opacity: 0.85; }
.sk-cursor[data-field] { opacity: 0; }
.sk-cursor[data-hot]::before { transform: scale(1.55); }

@media (hover: none) {
  .sk-cursor { display: none; }
}

.sk-orb {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}

.sk-orb::before {
  content: "";
  position: absolute;
  top: -420px;
  left: -420px;
  width: 840px;
  height: 840px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sk-orb), transparent 68%);
}

.sk-orb[data-on] { opacity: 1; }

/* ── A face: a slab with an edge you can see, lit from the pointer ───────── */

[data-site-skin][data-site-skin][data-site-skin] :is(.glass-card, .glass-card-strong, .gece-card, [data-light], :is(div, section, article).rounded.border:not([class*="danger"], [class*="osym"]), :is(div, section, article).rounded-lg.border:not([class*="danger"], [class*="osym"])):not(button, a, [data-light="own"]) {
  position: relative;
  z-index: 0;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(150deg, var(--sk-sheen-a), transparent 52%), linear-gradient(330deg, var(--sk-sheen-b), transparent 58%), var(--sk-face);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    calc(var(--tx, 0) * -5px) calc(7px - var(--ty, 0) * 3px) 0 0 var(--sk-edge),
    calc(var(--tx, 0) * -14px) calc(26px - var(--ty, 0) * 8px) 44px -20px var(--sk-drop),
    0 0 70px -28px var(--sk-halo);
}

/* A card inside a card is a tile on the face. */
[data-site-skin][data-site-skin][data-site-skin] :is(.glass-card, .glass-card-strong, .gece-card, [data-light], :is(div, section, article).rounded.border:not([class*="danger"], [class*="osym"]), :is(div, section, article).rounded-lg.border:not([class*="danger"], [class*="osym"])):not(button, a) :is(.glass-card, .glass-card-strong, .gece-card, [data-light], :is(div, section, article).rounded.border:not([class*="danger"], [class*="osym"]), :is(div, section, article).rounded-lg.border:not([class*="danger"], [class*="osym"])):not(button, a),
[data-site-skin][data-site-skin][data-site-skin] [data-light="tile"] {
  --sk-spot: var(--sk-spot-tile);
  border-radius: 16px;
  background: linear-gradient(150deg, var(--sk-sheen-b), transparent 60%), var(--sk-tile);
  box-shadow:
    calc(var(--tx, 0) * -3px) calc(4px - var(--ty, 0) * 2px) 0 0 var(--sk-tile-edge),
    calc(var(--tx, 0) * -8px) 14px 22px -14px var(--sk-drop);
}

/* The rim: 1.5 px of light around the face, brightest where the pointer is, faint at rest. */
[data-site-skin][data-site-skin][data-site-skin] :is(.glass-card, .glass-card-strong, .gece-card, [data-light], :is(div, section, article).rounded.border:not([class*="danger"], [class*="osym"]), :is(div, section, article).rounded-lg.border:not([class*="danger"], [class*="osym"])):not(button, a, [data-light="own"])::before,
.sk-light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1.5px;
  border-radius: inherit;
  background:
    radial-gradient(calc(120px + var(--lit, 0) * 200px) circle at var(--lx, 50%) var(--ly, 0%), var(--sk-rim), transparent 72%),
    linear-gradient(var(--sk-rim-rest), var(--sk-rim-rest));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* The spot: the face itself lights up under the pointer, BEHIND the content. */
[data-site-skin][data-site-skin][data-site-skin] :is(.glass-card, .glass-card-strong, .gece-card, [data-light], :is(div, section, article).rounded.border:not([class*="danger"], [class*="osym"]), :is(div, section, article).rounded-lg.border:not([class*="danger"], [class*="osym"])):not(button, a, [data-light="own"])::after,
.sk-light::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--lx, 50%) var(--ly, 0%), var(--sk-spot), transparent 72%);
  opacity: var(--lit, 0);
  pointer-events: none;
  transition: opacity 220ms ease-out;
}

/* A face that draws its own pseudo-elements (the karne's hero) carries the light in a layer of its own. */
.sk-light {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

/* A figure held above its face: it slides against the tilt, so the depth is seen, not told. */
[data-site-skin] [data-depth] {
  transform: translate(calc(var(--tx, 0) * var(--depth, 6px)), calc(var(--ty, 0) * var(--depth, 6px)));
}
[data-site-skin] [data-depth="far"] { --depth: 14px; }

/* ── Keys ────────────────────────────────────────────────────────────────── */

[data-site-skin][data-site-skin] :is(a, button):is(.bg-accent, .gece-cta) {
  --sk-key-edge: color-mix(in srgb, var(--accent) 55%, black);
  border-radius: 12px;
  box-shadow:
    0 5px 0 0 var(--edge, var(--sk-key-edge)),
    0 14px 24px -12px var(--sk-drop),
    0 0 28px -8px var(--sk-halo);
  transition:
    transform 220ms var(--sk-spring),
    box-shadow 220ms var(--sk-spring);
}

[data-site-skin][data-site-skin] :is(a, button):is(.gece-ghost, .rounded.border, .rounded-lg.border) {
  --sk-key: color-mix(in srgb, var(--foreground) 11%, var(--sk-face));
  border-color: transparent;
  border-radius: 12px;
  background-color: var(--sk-key);
  background-image: none;
  box-shadow: 0 4px 0 0 color-mix(in srgb, var(--sk-key) 55%, black);
  transition:
    transform 220ms var(--sk-spring),
    box-shadow 220ms var(--sk-spring);
}

[data-theme="light"] [data-site-skin][data-site-skin] :is(a, button):is(.gece-ghost, .rounded.border, .rounded-lg.border) {
  --sk-key: color-mix(in srgb, var(--foreground) 7%, var(--background));
  box-shadow: 0 4px 0 0 color-mix(in srgb, var(--foreground) 28%, var(--background));
}

@media (hover: hover) {
  [data-site-skin][data-site-skin] :is(a, button):is(.bg-accent, .gece-cta, .gece-ghost, .rounded.border, .rounded-lg.border):not(:disabled):hover {
    transform: translateY(-2px);
  }
}

[data-site-skin][data-site-skin] :is(a, button):is(.bg-accent, .gece-cta, .gece-ghost, .rounded.border, .rounded-lg.border):not(:disabled):active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 0 var(--edge, var(--sk-key-edge, var(--sk-edge)));
}

/* A page's title carries the page, as on /analiz and the karne. */
[data-site-skin][data-site-skin] h1.text-2xl {
  font-size: clamp(28px, 4.4vw, 40px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

/* ── Fields: a well in the face ──────────────────────────────────────────── */

[data-site-skin][data-site-skin] :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), textarea, select) {
  border-radius: 12px;
  background-color: var(--sk-well);
  box-shadow: inset 0 2px 5px color-mix(in srgb, var(--sk-drop) 50%, transparent);
}

/* ── A figure in the hand (Part 280, `orbit.ts`) ─────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  [data-turn] {
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }
  [data-turn][data-grabbed] { cursor: grabbing; }
}

/* A solid (`Solid.tsx`): the rig is the only thing that moves, and only on a screen that wants motion. */
.sk-solid {
  display: inline-grid;
  flex-shrink: 0;
  perspective: 420px;
}

.sk-solid-rig {
  display: grid;
  transform-style: preserve-3d;
}

.sk-solid-rig > * { grid-area: 1 / 1; }

.sk-solid-layer {
  display: grid;
  color: color-mix(in srgb, currentColor 52%, black);
  transform: translateZ(calc(var(--n) * -1.5px));
}

/* Gece's cup and medals. A rule here, not a utility: Tailwind would put a new one on every route, exam routes included. */
.sk-solid-medal { width: 48px; height: 48px; }

/* The ring behind a donut: as wide as its stroke. Reported, not judged: neutral, whatever the donut's colours. */
.sk-solid-disc {
  border: 10px solid color-mix(in srgb, var(--foreground) 34%, var(--background));
  border-radius: 50%;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .sk-solid-rig {
    --turn: calc(-20deg + var(--ox, 0deg));
    --lean: calc(12deg + var(--oy, 0deg));
    transform: rotateX(var(--lean)) rotateY(var(--turn));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-orb,
  .sk-cursor { display: none; }
  .sk-aurora i { translate: none; }
  [data-site-skin][data-site-skin] :is(a, button):is(.bg-accent, .gece-cta, .gece-ghost, .rounded.border, .rounded-lg.border) {
    transition: none;
    transform: none !important;
  }
}