/* ============================================================
   NEKO — Component System
   Surfaces (L1/L2/L3), buttons, badges, chips, navbar, cards.
   Requires tokens.css.
   ============================================================ */

/* ------------------------------------------------------------
   SURFACE LEVEL 1 — Strong Liquid Glass
   Navbar, login card, modals, hero status strip.
   ------------------------------------------------------------ */
.glass-1 {
  position: relative;
  background:
    linear-gradient(180deg, rgba(var(--c-accent-rgb), 0.10), rgba(var(--c-accent-rgb), 0) 38%),
    var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass-panel);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
/* hairline inner top highlight — the liquid-glass "wet" edge */
.glass-1::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(var(--c-text-rgb), 0.16),
              inset 0 0 0 1px rgba(var(--c-accent-rgb), 0.06);
}
.glass-1.pill { border-radius: var(--radius-glass); }

/* Secondary glass — lilac / purple tinted (magical surfaces) */
.glass-2 {
  position: relative;
  background:
    linear-gradient(180deg, rgba(var(--c-magic-rgb), 0.12), rgba(var(--c-magic-rgb), 0) 42%),
    var(--glass-bg-2);
  border: 1px solid rgba(var(--c-magic-rgb), 0.22);
  border-radius: var(--radius-glass-panel);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.glass-2.pill { border-radius: var(--radius-glass); }

/* Wumpus / piksel glyph — keskin kalmalı; hiçbir transform/scale uygulanmaz */
.wumpus-glyph { image-rendering: pixelated; transform: none !important; flex: none; }
.btn-discord:hover .wumpus-glyph, .btn-discord:active .wumpus-glyph { transform: none !important; }

/* ------------------------------------------------------------
   LIQUID GLASS — DÜŞÜK BULANIKLIK FALLBACK (glassBlur < 6)
   Varsayılan artık blur 18 — bu blok yalnız kullanıcı bulanıklığı elle
   düşürürse devreye girer; opaklık + kenar parlama ile okunabilirliği korur.
   ------------------------------------------------------------ */
body.glass-flat.theme-sunlight { --glass-bg: rgba(var(--c-card-rgb), .90); --frost-bg: rgba(var(--c-card-rgb), .94); }
body.glass-flat.theme-midnight { --glass-bg: rgba(var(--c-card-2-rgb), .92); --frost-bg: rgba(var(--c-card-2-rgb), .90); }
body.glass-flat .glass-1 {
  background:
    linear-gradient(180deg, rgba(247,249,253,.12), rgba(247,249,253,0) 42%),
    var(--glass-bg);
  box-shadow: var(--glass-shadow),
              inset 0 0 0 1px var(--glass-border),
              inset 0 1px 0 var(--glass-shine);
}
body.glass-flat.theme-midnight .glass-1 {
  background:
    linear-gradient(180deg, rgba(118,197,255,.09), rgba(118,197,255,0) 44%),
    var(--glass-bg);
}
body.glass-flat .frost-2 {
  box-shadow: inset 0 0 0 2px var(--frost-border),
              inset 0 2px 0 rgba(247,249,253,.22),
              inset 0 -3px 0 rgba(8,8,18,.10);
}
body.glass-flat.theme-midnight .frost-2 {
  box-shadow: inset 0 0 0 2px var(--frost-border),
              inset 0 2px 0 rgba(118,197,255,.10),
              inset 0 -3px 0 rgba(8,8,18,.30);
}

/* ------------------------------------------------------------
   SURFACE LEVEL 2 — Frosted Pixel Panel
   Mode cards, news cards, FAQ. Stepped corners + pixel border.
   Wrap in .px-shadow for the blocky drop shadow.
   ------------------------------------------------------------ */
/* Blocky drop shadow drawn geometrically (no `filter` — an ancestor
   filter breaks/glitches descendant backdrop-filter during canvas pan) */
.px-shadow, .px-shadow-sm { position: relative; }
.px-shadow::before, .px-shadow-sm::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--block-shadow);
  pointer-events: none;
}
.px-shadow::before { transform: translate(5px, 6px); clip-path: var(--clip-step); }
.px-shadow-sm::before { transform: translate(3px, 4px); clip-path: var(--clip-step-sm); }
.px-shadow > *, .px-shadow-sm > * { position: relative; }

.frost-2 {
  background: var(--frost-bg);
  -webkit-backdrop-filter: var(--frost-blur);
  backdrop-filter: var(--frost-blur);
  clip-path: var(--clip-step);
  /* own compositing layer — prevents backdrop smearing while the canvas pans */
  transform: translateZ(0);
  will-change: backdrop-filter;
  box-shadow: inset 0 0 0 2px var(--frost-border),
              inset 0 2px 0 rgba(247, 249, 253, 0.18);
}
.theme-midnight .frost-2 {
  box-shadow: inset 0 0 0 2px var(--frost-border),
              inset 0 2px 0 rgba(118, 197, 255, 0.07);
}

/* ------------------------------------------------------------
   SURFACE LEVEL 3 — Solid Pixel/Block
   Product cards, footer, readable zones.
   ------------------------------------------------------------ */
.block-3 {
  background: var(--block-bg);
  clip-path: var(--clip-step);
  box-shadow: inset 0 0 0 2px var(--block-border),
              inset 0 3px 0 rgba(247, 249, 253, 0.25),
              inset 0 -4px 0 rgba(var(--c-text-rgb), 0.08);
}
.theme-midnight .block-3 {
  box-shadow: inset 0 0 0 2px var(--block-border),
              inset 0 3px 0 rgba(118, 197, 255, 0.06),
              inset 0 -4px 0 rgba(8, 8, 18, 0.4);
}

/* ------------------------------------------------------------
   BUTTONS — Minecraft-inspired, modern
   Block bevel: darker bottom edge. Pressed = sink.
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px 15px;
  border: none;
  border-radius: var(--radius-crisp);
  font-family: var(--font-pixel);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-on-btn);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  position: relative;
  transition: transform var(--dur-fast) var(--ease-snap),
              box-shadow var(--dur-fast) var(--ease-snap),
              background-color var(--dur-fast) ease;
}
.btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Primary */
.btn-primary {
  background: var(--c-btn);
  box-shadow: 0 4px 0 var(--c-btn-edge),
              inset 0 2px 0 rgba(247, 249, 253, 0.28),
              inset -2px -2px 0 rgba(8, 8, 18, 0.14),
              inset 2px 0 0 rgba(247, 249, 253, 0.1);
}
.btn-primary:hover {
  background: var(--c-btn);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 0 var(--c-btn-edge),
              0 0 20px rgba(var(--c-accent-rgb), 0.45),
              inset 0 2px 0 rgba(247, 249, 253, 0.28),
              inset 0 0 0 2px rgba(var(--c-accent-rgb), 0.55),
              inset -2px -2px 0 rgba(8, 8, 18, 0.14);
}
.btn-primary:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--c-btn-edge), inset 0 2px 0 rgba(8, 8, 18, 0.12);
}

/* Secondary — card-toned block */
.btn-secondary {
  background: var(--c-card-2);
  color: var(--c-text);
  box-shadow: 0 4px 0 rgba(var(--c-text-rgb), 0.35),
              inset 0 2px 0 rgba(247, 249, 253, 0.35),
              inset -2px -2px 0 rgba(var(--c-text-rgb), 0.08);
}
.theme-midnight .btn-secondary {
  background: var(--c-card-2);
  box-shadow: 0 4px 0 rgba(8, 8, 18, 0.6),
              inset 0 2px 0 rgba(118, 197, 255, 0.08),
              inset -2px -2px 0 rgba(8, 8, 18, 0.3);
}
.btn-secondary:hover { transform: translateY(-2px) scale(1.03); }
.btn-secondary:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(var(--c-text-rgb), 0.35); }

/* Ghost / glass — small block corner + glass body */
.btn-ghost {
  background: rgba(var(--c-card-rgb), 0.3);
  color: var(--c-text);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 1px var(--glass-shine), 0 3px 0 rgba(var(--c-text-rgb), .18);
}
.theme-midnight .btn-ghost { box-shadow: inset 0 1px 1px var(--glass-shine), 0 3px 0 rgba(8, 8, 18, .5); }
.btn-ghost:hover {
  background: rgba(var(--c-card-rgb), 0.55);
  transform: translateY(-1px) scale(1.03);
}
.btn-ghost:active { transform: translateY(2px) scale(0.99); box-shadow: inset 0 1px 1px var(--glass-shine), 0 1px 0 rgba(var(--c-text-rgb), .18); }

/* Pixel outline */
.btn-outline {
  background: transparent;
  color: var(--c-text);
  box-shadow: inset 0 0 0 2px var(--c-border);
  clip-path: var(--clip-step-sm);
}
.btn-outline:hover {
  box-shadow: inset 0 0 0 2px var(--c-accent);
  color: var(--c-accent);
  transform: scale(1.03);
}
.btn-outline:active { transform: scale(0.97); }

/* Discord / community button — glass + pixel hybrid, theme accent */
.btn-discord {
  background: rgba(var(--c-btn-rgb), .16);
  color: var(--c-text);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border-radius: var(--radius-crisp);
  box-shadow: inset 0 0 0 2px rgba(var(--c-accent-rgb), .75), 0 4px 0 rgba(var(--c-accent-rgb), .4);
}
.btn-discord:hover {
  /* Sadece dikey kaldırma — scale KALDIRILDI: piksel maskotu (box-shadow ile
     çizilen Wumpus) ölçeklendiğinde alt-piksel bulanıklığı/bozulma oluşuyordu. */
  transform: translateY(-2px);
  background: rgba(var(--c-accent-rgb), .2);
  box-shadow: inset 0 0 0 2px var(--c-accent), 0 6px 0 rgba(var(--c-accent-rgb), .4);
}
.btn-discord:active {
  transform: translateY(3px);
  box-shadow: inset 0 0 0 2px var(--c-accent), 0 1px 0 rgba(var(--c-accent-rgb), .4);
}

/* Danger */
.btn-danger {
  background: var(--c-danger);
  box-shadow: 0 4px 0 var(--c-danger-edge), inset 0 2px 0 rgba(247, 249, 253, 0.22);
}
.btn-danger:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 6px 0 var(--c-danger-edge); }
.btn-danger:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--c-danger-edge); }

/* Disabled */
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--c-muted-2);
  transform: none !important;
  box-shadow: 0 2px 0 rgba(var(--c-line-rgb), 0.9);
}

/* Sizes */
.btn-sm { padding: 8px 16px 10px; font-size: 14px; }
.btn-lg { padding: 16px 34px 19px; font-size: 20px; }

/* Copy-IP button (mono, with copied state) */
.btn-copy {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
}
.btn-copy .ip { opacity: 0.85; font-weight: 500; }
.btn-copy.copied {
  background: var(--c-success);
  color: var(--c-on-light);
  box-shadow: 0 4px 0 rgba(var(--c-card-rgb), 0.7),
              0 0 18px rgba(var(--c-success-rgb), 0.4);
}

/* ------------------------------------------------------------
   BADGES & CHIPS
   ------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 5px;
  font-family: var(--font-pixel);
  font-size: 13px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  clip-path: var(--clip-step-sm);
  --px-step-sm: 3px;
  background: var(--c-detail);
  color: #0C1730;
}
.badge-cosmetic { background: var(--c-magic); color: var(--c-on-light); }
.badge-supporter { background: var(--c-gold); color: var(--c-on-light); }
.badge-new { background: var(--c-accent); color: var(--c-on-light); }

/* Status chip (online dot) — stepped glass block */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 7px;
  --px-step-sm: 4px;
  clip-path: var(--clip-step-sm);
  background: rgba(var(--c-card-rgb), 0.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-family: var(--font-body);
  font-size: 13px;
  white-space: nowrap;
  color: var(--c-text);
  box-shadow: inset 0 0 0 1px var(--glass-border), inset 0 1px 1px var(--glass-shine);
}
.status-dot {
  width: 8px; height: 8px;
  background: var(--c-success);
  box-shadow: 0 0 0 2px rgba(var(--c-success-rgb), 0.3), 0 0 8px rgba(var(--c-success-rgb), 0.55);
  image-rendering: pixelated;
}

/* ------------------------------------------------------------
   THEME TOGGLE — pixel sun / moon, stepped glass block
   ------------------------------------------------------------ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  --px-step-sm: 4px;
  clip-path: var(--clip-step-sm);
  background: rgba(var(--c-card-rgb), 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--glass-border), inset 0 1px 1px var(--glass-shine);
  cursor: pointer;
}
.theme-toggle .opt {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 4px;
  border: none; background: transparent; cursor: pointer;
  color: var(--c-text-2);
  transition: background var(--dur-fast) ease;
}
.theme-toggle .opt[aria-pressed="true"] {
  background: var(--c-btn);
  color: var(--c-on-btn);
}
.theme-toggle .opt:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Pixel sun: center square + 4 ray squares via box-shadow
   (scoped to the toggle so admin-modules.css's full-size .px-sun cannot clobber it) */
.theme-toggle .px-sun {
  width: 8px; height: 8px; background: currentColor; position: static; top: auto; left: auto; transform: none; clip-path: none;
  box-shadow: 0 -7px 0 -2px currentColor, 0 7px 0 -2px currentColor,
              -7px 0 0 -2px currentColor, 7px 0 0 -2px currentColor;
}
/* Pixel moon: offset square pair */
.theme-toggle .px-moon {
  width: 10px; height: 10px; background: currentColor; position: static; top: auto; right: auto; transform: none;
  clip-path: polygon(0 0, 60% 0, 60% 40%, 100% 40%, 100% 100%, 0 100%);
}

/* ------------------------------------------------------------
   CANONICAL THEME TOGGLE — sliding pixel sun / moon (recovered).
   Shares the celestial-art language of the Quick Actions cards.
   Used site-wide via the ThemeToggle component (site-core.jsx).
   ------------------------------------------------------------ */
.neko-sw { position: relative; width: 76px; height: 36px; padding: 0; border: 0; background: transparent; cursor: pointer; display: inline-block; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
.neko-sw-small { width: 64px; height: 34px; }
.neko-sw-track { position: absolute; inset: 0; overflow: hidden; --px-step-sm: 4px; clip-path: var(--clip-step-sm); box-shadow: inset 0 0 0 2px rgba(8,8,18,.30), inset 0 2px 4px rgba(8,8,18,.22); transition: background .4s ease; }
.neko-sw[data-theme="sunlight"] .neko-sw-track { background: linear-gradient(180deg, #76C5FF 0%, #F8D44E 78%, #F5C53C 100%); }
.neko-sw[data-theme="midnight"] .neko-sw-track { background: linear-gradient(180deg, #0A1C4A 0%, #20227A 100%); }
.neko-sw-ghost { position: absolute; top: 50%; transform: translateY(-50%); transition: opacity .3s ease; }
.neko-sw-ghost-l { left: 10px; width: 9px; height: 9px; background: #FBE77E; clip-path: polygon(28% 0,72% 0,100% 28%,100% 72%,72% 100%,28% 100%,0 72%,0 28%); opacity: .5; }
.neko-sw-ghost-r { right: 10px; width: 9px; height: 9px; background: #C7D0DA; clip-path: polygon(0 0,60% 0,60% 40%,100% 40%,100% 100%,0 100%); opacity: .5; }
.neko-sw[data-theme="sunlight"] .neko-sw-ghost-l { opacity: 0; }
.neko-sw[data-theme="midnight"] .neko-sw-ghost-r { opacity: 0; }
.neko-sw-star { position: absolute; width: 2px; height: 2px; background: #F7F9FD; opacity: 0; transition: opacity .4s ease; }
.neko-sw[data-theme="midnight"] .neko-sw-star { opacity: .9; }
.neko-sw-star.a { left: 15px; top: 9px; } .neko-sw-star.b { left: 25px; top: 19px; } .neko-sw-star.c { left: 19px; top: 25px; }
.neko-sw-knob { position: absolute; top: 5px; left: 5px; width: 26px; height: 26px; display: grid; place-items: center; background: #F7F9FD; --px-step-sm: 4px; clip-path: var(--clip-step-sm); box-shadow: inset 0 0 0 2px rgba(8,8,18,.22), 0 2px 0 rgba(8,8,18,.30); transition: transform .22s var(--ease-snap, cubic-bezier(.2,.9,.3,1.2)), background .3s ease, box-shadow .14s ease; }
.neko-sw[data-theme="midnight"] .neko-sw-knob { transform: translateX(40px); background: #0C1730; }
.neko-sw-small .neko-sw-knob { width: 24px; height: 24px; }
.neko-sw-small[data-theme="midnight"] .neko-sw-knob { transform: translateX(30px); }
.neko-sw-sun, .neko-sw-moon { position: absolute; transition: opacity .3s ease; }
.neko-sw-sun { width: 9px; height: 9px; background: #F5C53C; clip-path: polygon(28% 0,72% 0,100% 28%,100% 72%,72% 100%,28% 100%,0 72%,0 28%); box-shadow: 0 -8px 0 -3px #F8D44E, 0 8px 0 -3px #F8D44E, -8px 0 0 -3px #F8D44E, 8px 0 0 -3px #F8D44E, -6px -6px 0 -3px #F8D44E, 6px -6px 0 -3px #F8D44E, -6px 6px 0 -3px #F8D44E, 6px 6px 0 -3px #F8D44E; }
.neko-sw-moon { width: 13px; height: 13px; background: #E8ECF3; clip-path: polygon(28% 0,72% 0,100% 28%,100% 72%,72% 100%,28% 100%,0 72%,0 28%); box-shadow: inset -4px -1px 0 0 #20227A; opacity: 0; }
.neko-sw[data-theme="midnight"] .neko-sw-sun { opacity: 0; }
.neko-sw[data-theme="midnight"] .neko-sw-moon { opacity: 1; }
.neko-sw:hover { transform: translateY(-1px); }
.neko-sw:hover .neko-sw-knob { box-shadow: inset 0 0 0 2px rgba(8,8,18,.22), 0 3px 0 rgba(8,8,18,.30), 0 0 0 3px rgba(var(--c-accent-rgb), .32); }
.neko-sw:hover[data-theme="midnight"] .neko-sw-knob { transform: translateX(40px); }
.neko-sw:hover[data-theme="midnight"].neko-sw-small .neko-sw-knob { transform: translateX(30px); }
.neko-sw:focus-visible { outline: none; }
.neko-sw:focus-visible .neko-sw-track { box-shadow: inset 0 0 0 2px rgba(8,8,18,.30), 0 0 0 3px var(--focus-ring); }
.neko-sw:active .neko-sw-knob { box-shadow: inset 0 0 0 2px rgba(8,8,18,.22), 0 1px 0 rgba(8,8,18,.30); }
@media (prefers-reduced-motion: reduce) {
  .neko-sw-knob, .neko-sw-track, .neko-sw-star, .neko-sw-sun, .neko-sw-moon, .neko-sw-ghost { transition: none; }
}
/* Navbar: tighter toggle on mobile to protect against narrow-width crowding */
@media (max-width: 1023px) {
  .nav-actions .neko-sw { width: 64px; height: 34px; }
  .nav-actions .neko-sw .neko-sw-knob { width: 24px; height: 24px; }
  .nav-actions .neko-sw[data-theme="midnight"] .neko-sw-knob,
  .nav-actions .neko-sw:hover[data-theme="midnight"] .neko-sw-knob { transform: translateX(30px); }
}

/* ------------------------------------------------------------
   PIXEL DECORATIONS — vines (sunlight) / shards (midnight)
   Simple squares only; subtle.
   ------------------------------------------------------------ */
.px-vine {
  width: 6px; height: 6px;
  background: var(--c-vine);
  opacity: 0.7;
  box-shadow: 6px 6px 0 var(--c-vine), 0 12px 0 var(--c-vine),
              6px 18px 0 0 var(--c-vine), 0 24px 0 var(--c-vine);
}
.px-spark {
  width: 4px; height: 4px;
  background: var(--c-detail);
  opacity: 0.8;
  box-shadow: 10px -6px 0 var(--c-magic), -8px 8px 0 var(--c-detail),
              16px 10px 0 rgba(var(--c-detail-rgb), 0.5);
}

/* ------------------------------------------------------------
   FORM ELEMENTS (preview)
   ------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  color: var(--c-text-2);
}
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--c-soft);
  background: rgba(var(--c-bg-rgb), 0.6);
  border: 2px solid var(--c-border);
  border-radius: 0;
  padding: 11px 14px;
  box-shadow: inset 0 2px 0 rgba(var(--c-text-rgb), 0.08),
              inset 2px 0 0 rgba(var(--c-text-rgb), 0.04);
}
.theme-midnight .field input, .theme-midnight .field select, .theme-midnight .field textarea {
  background: rgba(var(--c-bg-rgb), 0.5);
  box-shadow: inset 0 2px 0 rgba(8, 8, 18, 0.35);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--c-accent);
}

/* ------------------------------------------------------------
   IMAGE PLACEHOLDER — striped, labeled
   ------------------------------------------------------------ */
.img-ph {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(
    45deg,
    rgba(var(--c-text-rgb), 0.05) 0 10px,
    rgba(var(--c-text-rgb), 0.1) 10px 20px
  );
  border: 2px dashed rgba(var(--c-text-rgb), 0.25);
  color: var(--c-text-2);
  font-family: var(--font-body);
  font-size: 12px;
  text-align: center;
  padding: 8px;
}