/* =========================================================================
   UYAN/dev — LÜKS / TEKNOLOJİK DETAYLAR (js/lux.js ile)
   gren dokusu · kaydırma çizgisi · bölüm başlığı HUD'u · kart kenar ışığı · mıknatıs buton
   Sonsuz süs animasyonu yok; hareketler kaydırma ya da imleçle tetiklenir.
   ========================================================================= */

/* ---- film greni (sabit) ---- */
.world-code::after {
  content: ""; position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- kaydırma ilerleme çizgisi ---- */
.lux-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 120; pointer-events: none; display: none; }
html[data-mode="code"] .lux-progress { display: block; }
.lux-progress i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, #00ff9c, #00e5ff 60%, #ff2bd6); box-shadow: 0 0 12px rgba(0,255,156,.6); }

/* ---- bölüm başlığı: dev numara + HUD köşeleri + teknik çizgi ---- */
.world-code .c-sec-head { position: relative; isolation: isolate; }
.lux-num {
  position: absolute; right: 0; top: 50%; z-index: -1; pointer-events: none; user-select: none;
  font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; font-size: clamp(110px, 17vw, 260px); line-height: .8; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1px rgba(0,255,156,.13);
  transform: translate3d(0, calc(-50% + var(--ly, 0px)), 0);
}
.lux-meta {
  position: absolute; left: 0; right: 0; top: -38px; display: flex; align-items: center; gap: 14px; pointer-events: none;
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .22em; color: rgba(230,255,244,.58); text-transform: uppercase;
}
.lux-meta b { color: var(--g); font-weight: 500; }
.lux-meta i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(0,255,156,.5), rgba(0,229,255,.25) 60%, transparent); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s cubic-bezier(.2,.7,.2,1) .2s; }
.c-sec-head.in .lux-meta i { transform: scaleX(1); }
.lux-meta em { font-style: normal; }
/* HUD köşe işaretleri */
.lux-corners { position: absolute; inset: -14px -16px; pointer-events: none; opacity: 0; transition: opacity .8s ease .3s; }
.c-sec-head.in .lux-corners { opacity: 1; }
.lux-corners::before, .lux-corners::after { content: ""; position: absolute; width: 12px; height: 12px; border: 1px solid rgba(0,255,156,.55); }
.lux-corners::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.lux-corners::after { left: 0; bottom: 0; border-right: 0; border-top: 0; }

/* ---- kart kenar ışığı: imleci izleyen ince parlama (yalnızca kenar) ---- */
.world-code .term { position: relative; }
.svc::after, .pkg::after, .prod::after, .proj::after, .chan::after, .est-out::after, .term::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; padding: 1px; border-radius: inherit;
  background: radial-gradient(220px circle at var(--lx, 50%) var(--ly, 50%), rgba(0,255,156,.95), rgba(0,229,255,.45) 35%, transparent 65%);
  -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);
  opacity: 0; transition: opacity .3s ease;
}
.lux-lit::after { opacity: 1; }

/* ---- mıknatıs buton (translate ayrı özellik: mevcut hover transform'uyla çakışmaz) ---- */
.world-code .btn-neon { transition: .25s, translate .2s ease-out; }

@media (hover: none) { .lux-lit::after { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lux-meta i { transform: scaleX(1); transition: none; }
  .lux-corners { opacity: 1; transition: none; }
  .lux-num { transform: translate3d(0, -50%, 0); }
}
@media (max-width: 640px) {
  .lux-num { font-size: 120px; opacity: .8; }
  .lux-meta { top: -30px; font-size: 9px; }
  .lux-corners { inset: -10px -8px; }
}