/* =====================================================
   BLACK CLOUD RECORDS — neon animasyon teması
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Orbitron:wght@700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');

:root{
  --o:#ff8a00;          /* neon turuncu */
  --o2:#ffb347;
  --p:#b026ff;          /* neon mor */
  --p2:#7a1fff;
  --m:#ff2fd0;          /* magenta */
  --bg:#06040a;
  --bg2:#0d0714;
  --ink:#f6eeff;
  --mut:#a595b8;
  --line:rgba(255,138,0,.18);
  --glass:rgba(255,255,255,.035);
  --f-d:'Orbitron',sans-serif;
  --f-h:'Bebas Neue',sans-serif;
  --f-b:'Rajdhani',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-b);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  cursor:none;
}
@media (hover:none),(pointer:coarse){body{cursor:auto}}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--o);color:#000}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#0a0610}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--o),var(--p));border-radius:10px}

/* =====================================================
   ARKA PLAN KATMANLARI
   ===================================================== */
#bg-layers{position:fixed;inset:0;z-index:-3;overflow:hidden;contain:strict;background:
  radial-gradient(70vw 70vw at 12% -8%, rgba(255,138,0,.30), rgba(255,138,0,.10) 38%, transparent 68%),
  radial-gradient(64vw 64vw at 92% 108%, rgba(176,38,255,.30), rgba(176,38,255,.10) 38%, transparent 68%),
  radial-gradient(1100px 700px at 50% 40%, rgba(255,47,208,.10), transparent 65%),
  var(--bg)}
.blob{display:none}

#grid-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(rgba(255,138,0,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(176,38,255,.07) 1px,transparent 1px);
  background-size:70px 70px;inset:-70px;will-change:transform;
  opacity:.5}
@keyframes gridmove{to{transform:translate3d(70px,70px,0)}}

/* üç tam ekran efekt katmanı tek elemanda birleştirildi (compositor yükü 3'te 1) */
.noise{position:fixed;inset:0;z-index:9989;pointer-events:none;
  background-image:
    radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.75) 100%),
    repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 1px,transparent 1px 4px),
    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='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  background-size:cover,auto,180px 180px}
.scanlines,.vignette{display:none}

/* logo izi (mouse trail) */
#cloud-trail{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.trail-logo{position:absolute;width:120px;transform:translate(-50%,-50%) scale(.2) rotate(0deg);opacity:0;
  animation:trailpop 1.6s cubic-bezier(.2,.9,.25,1) forwards}
.trail-logo{will-change:transform,opacity}
@keyframes trailpop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-12deg)}
  18%{opacity:.85}
  100%{opacity:0;transform:translate(-50%,-90%) scale(1.5) rotate(10deg)}
}

/* =====================================================
   İMLEÇ
   ===================================================== */
#cursor{position:fixed;width:8px;height:8px;border-radius:50%;background:var(--o);z-index:99999;pointer-events:none;
  box-shadow:0 0 12px var(--o),0 0 28px var(--o);transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s}
#ring{position:fixed;width:44px;height:44px;border:1.5px solid var(--p);border-radius:50%;z-index:99998;pointer-events:none;
  transform:translate(-50%,-50%);box-shadow:0 0 18px rgba(176,38,255,.6) inset,0 0 18px rgba(176,38,255,.5);
  transition:width .25s,height .25s,border-color .25s,opacity .25s}
body.hovering #ring{width:78px;height:78px;border-color:var(--o);box-shadow:0 0 26px rgba(255,138,0,.7)}
body.hovering #cursor{width:4px;height:4px}
@media (hover:none),(pointer:coarse){#cursor,#ring{display:none}}

/* =====================================================
   PRELOADER
   ===================================================== */
#preloader{position:fixed;inset:0;z-index:100000;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;transition:opacity .7s,visibility .7s}
#preloader.done{opacity:0;visibility:hidden}
#preloader .pl-logo{width:150px;animation:plpulse 1.4s ease-in-out infinite}
#preloader .pl-logo svg{filter:drop-shadow(0 0 26px var(--o)) drop-shadow(0 0 50px var(--p))}
@keyframes plpulse{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.08) translateY(-8px)}}
.pl-word{font-family:var(--f-d);letter-spacing:.5em;font-size:14px;color:var(--o);text-shadow:0 0 14px var(--o)}
.pl-bar{width:220px;height:3px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden}
.pl-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--o),var(--p),var(--m));
  box-shadow:0 0 14px var(--o);transition:width .2s}
.pl-pct{font-family:var(--f-d);font-size:12px;color:var(--mut);letter-spacing:.3em}

/* sayfa geçiş perdesi */
#curtain{position:fixed;inset:0;z-index:99997;pointer-events:none;display:flex}
#curtain i{flex:1;background:linear-gradient(180deg,var(--o),var(--p));transform:scaleY(0);transform-origin:bottom;
  transition:transform .5s cubic-bezier(.7,0,.3,1)}
#curtain.on i{transform:scaleY(1);transform-origin:top}

/* scroll progress */
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9995;
  background:linear-gradient(90deg,var(--o),var(--m),var(--p));box-shadow:0 0 14px var(--o)}

/* =====================================================
   NAV
   ===================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:9000;display:flex;align-items:center;justify-content:space-between;
  padding:18px 5vw;transition:.35s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(6,4,10,.78);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:12px 5vw}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:46px;transition:.4s}
.brand .mark svg{filter:drop-shadow(0 0 10px var(--o))}
.brand:hover .mark{transform:rotate(-8deg) scale(1.12)}
.brand .txt{font-family:var(--f-d);font-weight:900;font-size:16px;letter-spacing:.16em;line-height:1}
.brand .txt small{display:block;font-family:var(--f-b);font-weight:600;font-size:10px;letter-spacing:.42em;color:var(--o);
  text-shadow:0 0 10px var(--o);margin-top:3px}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{position:relative;white-space:nowrap;padding:9px 12px;font-weight:600;font-size:13.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mut);transition:.3s;overflow:hidden}
.nav-links a::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;
  background:linear-gradient(90deg,var(--o),var(--p));transform:scaleX(0);transform-origin:right;transition:transform .35s;
  box-shadow:0 0 10px var(--o)}
.nav-links a:hover,.nav-links a.active{color:#fff;text-shadow:0 0 12px var(--o)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);transform-origin:left}
.burger{display:none;flex-direction:column;gap:5px;padding:10px;background:none;border:0;cursor:none}
.burger i{width:26px;height:2px;background:var(--o);box-shadow:0 0 8px var(--o);transition:.3s;display:block}
.burger.on i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1340px){.nav-links a{font-size:12.5px;padding:9px 9px;letter-spacing:.06em}
  .nav-links a::after{left:9px;right:9px}}
@media(max-width:1200px){
  .burger{display:flex}
  .nav-links{position:fixed;inset:0 0 0 auto;width:min(84vw,360px);flex-direction:column;justify-content:center;gap:14px;
    background:rgba(9,5,15,.97);backdrop-filter:blur(20px);border-left:1px solid var(--line);
    transform:translateX(100%);transition:transform .45s cubic-bezier(.7,0,.3,1)}
  .nav-links.open{transform:translateX(0)}
  .nav-links a{font-size:19px;padding:12px 26px;letter-spacing:.1em}
}

/* =====================================================
   TİPOGRAFİ / GENEL
   ===================================================== */
.wrap{width:min(1240px,92vw);margin-inline:auto}
section{position:relative;padding:110px 0}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-d);font-size:11px;letter-spacing:.4em;
  text-transform:uppercase;color:var(--o);text-shadow:0 0 12px var(--o);margin-bottom:18px}
.kicker::before{content:'';width:38px;height:1px;background:var(--o);box-shadow:0 0 10px var(--o)}
h1,h2,h3{font-family:var(--f-h);font-weight:400;letter-spacing:.02em;line-height:.95}
h1{font-size:clamp(48px,9vw,132px)}
h2{font-size:clamp(36px,6vw,78px)}
h3{font-size:clamp(24px,3vw,36px)}
p{color:var(--mut);max-width:65ch}
.neon{color:#fff;text-shadow:0 0 8px var(--o),0 0 22px var(--o),0 0 48px rgba(255,138,0,.6)}
.neon-p{color:#fff;text-shadow:0 0 8px var(--p),0 0 22px var(--p),0 0 48px rgba(176,38,255,.6)}
.grad{background:linear-gradient(100deg,var(--o),var(--m),var(--p),var(--o));background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:gradslide 6s linear infinite}
@keyframes gradslide{to{background-position:300% 0}}
.outline-txt{color:transparent;-webkit-text-stroke:1.5px rgba(255,138,0,.55)}

/* harf harf açılış */
.split span{display:inline-block;opacity:0;transform:translateY(90%) rotate(8deg);
  transition:opacity .6s,transform .6s cubic-bezier(.2,.9,.25,1)}
.split.in span{opacity:1;transform:none}

/* glitch */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;overflow:hidden}
.glitch::before{color:var(--m);animation:gl1 3s infinite steps(2);clip-path:inset(0 0 55% 0)}
.glitch::after{color:var(--p);animation:gl2 2.4s infinite steps(2);clip-path:inset(55% 0 0 0)}
@keyframes gl1{0%,88%,100%{transform:translate(0)}90%{transform:translate(-4px,-2px)}94%{transform:translate(4px,1px)}}
@keyframes gl2{0%,85%,100%{transform:translate(0)}88%{transform:translate(5px,2px)}92%{transform:translate(-5px,-1px)}}

/* =====================================================
   BUTONLAR
   ===================================================== */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:16px 34px;border:1.5px solid var(--o);
  border-radius:60px;font-family:var(--f-d);font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:#fff;overflow:hidden;transition:.35s;background:transparent;cursor:none;
  box-shadow:0 0 18px rgba(255,138,0,.35),inset 0 0 18px rgba(255,138,0,.12)}
.btn span{position:relative;z-index:2}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--o),var(--m),var(--p));
  transform:translateY(101%);transition:transform .4s cubic-bezier(.7,0,.3,1);z-index:1}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:#0a0410;box-shadow:0 0 34px var(--o),0 0 70px rgba(176,38,255,.5);transform:translateY(-3px)}
.btn.ghost{border-color:var(--p);box-shadow:0 0 18px rgba(176,38,255,.35),inset 0 0 18px rgba(176,38,255,.12)}
.btn.ghost:hover{box-shadow:0 0 34px var(--p),0 0 70px rgba(255,138,0,.4)}
.btn-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:34px}

/* =====================================================
   HERO
   ===================================================== */
.hero{min-height:100svh;display:flex;align-items:center;padding:120px 0 80px;overflow:hidden}
.hero-inner{position:relative;z-index:3}
.floor{position:absolute;left:-20%;right:-20%;bottom:-10%;height:60vh;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(255,138,0,.4) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(176,38,255,.35) 1px,transparent 1px);
  background-size:60px 60px;transform:perspective(320px) rotateX(70deg);transform-origin:bottom;
  mask-image:linear-gradient(to top,#000,transparent 80%);will-change:transform;
  animation:floormove 3.5s linear infinite}
@keyframes floormove{
  from{transform:perspective(320px) rotateX(70deg) translateY(0)}
  to{transform:perspective(320px) rotateX(70deg) translateY(60px)}}
.hero h1{position:relative}
.hero .sub{font-size:clamp(15px,2vw,21px);letter-spacing:.06em;margin-top:22px;min-height:2.6em}
.type-cursor{display:inline-block;width:10px;background:var(--o);box-shadow:0 0 12px var(--o);
  animation:blink .8s steps(2) infinite;margin-left:2px}
@keyframes blink{50%{opacity:0}}
.hero-logo{position:absolute;right:-2%;top:50%;transform:translate3d(0,-50%,0);width:min(46vw,560px);opacity:.16;z-index:2;
  will-change:transform;animation:heroFloat 9s ease-in-out infinite;pointer-events:none}
.hero-logo svg{opacity:.9}
@keyframes heroFloat{0%,100%{transform:translate3d(0,-50%,0)}50%{transform:translate3d(0,-56%,0)}}

/* equalizer */
.eq{display:flex;align-items:flex-end;gap:5px;height:70px;margin-top:44px;max-width:100%;overflow:hidden}
.eq i{display:block;width:6px;height:100%;border-radius:4px;transform-origin:bottom;transform:scaleY(.2);
  background:linear-gradient(180deg,var(--o),var(--m),var(--p));will-change:transform;
  animation:eqb 1s ease-in-out infinite alternate}
@keyframes eqb{from{transform:scaleY(.08)}to{transform:scaleY(1)}}

.scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;
  align-items:center;gap:10px;font-family:var(--f-d);font-size:10px;letter-spacing:.35em;color:var(--mut)}
.scroll-hint .line{width:1.5px;height:56px;background:linear-gradient(var(--o),transparent);position:relative;overflow:hidden}
.scroll-hint .line::after{content:'';position:absolute;top:-56px;left:0;width:100%;height:56px;background:var(--p);
  box-shadow:0 0 12px var(--p);animation:scrolldot 1.8s ease-in-out infinite}
@keyframes scrolldot{to{top:56px}}

/* =====================================================
   MARQUEE
   ===================================================== */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:20px 0;background:linear-gradient(90deg,rgba(255,138,0,.08),rgba(176,38,255,.08))}
.marquee .track{display:inline-flex;gap:44px;will-change:transform;animation:mq 26s linear infinite}
.marquee.rev .track{animation-direction:reverse}
.marquee span{font-family:var(--f-h);font-size:clamp(26px,4vw,52px);letter-spacing:.04em;color:transparent;
  -webkit-text-stroke:1.2px var(--o);transition:.3s}
.marquee span:nth-child(even){-webkit-text-stroke-color:var(--p)}
.marquee span:hover{color:#fff;text-shadow:0 0 22px var(--o)}
@keyframes mq{to{transform:translateX(-50%)}}

/* =====================================================
   REVEAL ANİMASYONLARI
   ===================================================== */
[data-rv]{opacity:0;transition:opacity .9s cubic-bezier(.2,.9,.25,1),transform .9s cubic-bezier(.2,.9,.25,1),filter .9s}
[data-rv="up"]{transform:translateY(70px)}
[data-rv="down"]{transform:translateY(-60px)}
[data-rv="left"]{transform:translateX(-90px)}
[data-rv="right"]{transform:translateX(90px)}
[data-rv="zoom"]{transform:scale(.82)}
[data-rv="blur"]{filter:blur(18px);transform:scale(1.04)}
[data-rv="flip"]{transform:perspective(900px) rotateX(-60deg);transform-origin:top}
[data-rv="skew"]{transform:translateY(60px) skewY(6deg)}
[data-rv].in{opacity:1;transform:none;filter:none}

/* =====================================================
   KARTLAR
   ===================================================== */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{position:relative;padding:34px 30px;border:1px solid var(--line);border-radius:20px;
  background:rgba(255,255,255,.045);overflow:hidden;transition:.4s;transform-style:preserve-3d}
.card::before{content:'';position:absolute;inset:0;opacity:0;transition:.4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,138,0,.18),transparent 45%)}
.card:hover::before{opacity:1}
.card::after{content:'';position:absolute;inset:-1px;border-radius:20px;padding:1px;opacity:0;transition:.4s;
  background:linear-gradient(130deg,var(--o),var(--m),var(--p));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card:hover::after{opacity:1}
.card:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(176,38,255,.22)}
.card .num{font-family:var(--f-d);font-size:12px;letter-spacing:.3em;color:var(--o);opacity:.7}
.card h3{margin:14px 0 12px}
.card .ico{width:54px;height:54px;display:grid;place-items:center;border-radius:14px;margin-bottom:18px;
  border:1px solid var(--line);background:rgba(255,138,0,.08);box-shadow:0 0 22px rgba(255,138,0,.18) inset;
  font-size:24px;transition:.4s}
.card:hover .ico{transform:rotate(-8deg) scale(1.1);box-shadow:0 0 30px rgba(255,138,0,.5)}

/* =====================================================
   SANATÇI KARTLARI (görselsiz)
   ===================================================== */
.artist{position:relative;display:block;border-radius:24px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(150deg,rgba(255,138,0,.07),rgba(176,38,255,.07));min-height:420px;padding:38px;
  display:flex;flex-direction:column;justify-content:flex-end;transition:.5s}
.artist .bigname{position:absolute;inset:auto 0 -14% 0;z-index:0;font-family:var(--f-h);font-size:clamp(60px,11vw,150px);
  text-align:center;color:transparent;-webkit-text-stroke:1.5px rgba(255,138,0,.2);transition:.6s;line-height:.8;pointer-events:none}
.artist:hover .bigname{-webkit-text-stroke-color:var(--m);transform:translateY(-8px) scale(1.04)}
.artist .rings{position:absolute;top:8%;left:50%;transform:translateX(-50%);width:230px;height:230px;pointer-events:none}
.artist .rings i{position:absolute;inset:0;border:1px solid rgba(176,38,255,.35);border-radius:50%;
  animation:ringpulse 3.4s ease-out infinite}
.artist .rings i:nth-child(2){animation-delay:1.1s}
.artist .rings i:nth-child(3){animation-delay:2.2s}
@keyframes ringpulse{0%{transform:scale(.4);opacity:0}30%{opacity:.9}100%{transform:scale(1.25);opacity:0}}
.artist .tag{position:relative;z-index:2;display:inline-block;font-family:var(--f-d);font-size:10px;letter-spacing:.3em;color:var(--o);
  border:1px solid var(--line);border-radius:40px;padding:6px 14px;margin-bottom:14px;width:max-content}
.artist h3{font-size:clamp(34px,5vw,58px);position:relative;z-index:2}
.artist p{position:relative;z-index:2;font-size:15px}
.artist .go{margin-top:18px;font-family:var(--f-d);font-size:11px;letter-spacing:.28em;color:var(--o);
  display:inline-flex;gap:10px;align-items:center;position:relative;z-index:2;transition:.35s}
.artist:hover .go{gap:20px;text-shadow:0 0 14px var(--o)}
.artist:hover{transform:translateY(-10px);box-shadow:0 30px 80px rgba(176,38,255,.3);border-color:var(--m)}

/* plak */
.vinyl{width:190px;height:190px;border-radius:50%;margin:0 auto;position:relative;
  background:repeating-radial-gradient(circle at center,#120a1c 0 3px,#1c1028 3px 6px);
  box-shadow:0 0 40px rgba(176,38,255,.4),inset 0 0 40px rgba(0,0,0,.9);animation:spin 6s linear infinite}
.vinyl::after{content:'';position:absolute;inset:38%;border-radius:50%;background:linear-gradient(135deg,var(--o),var(--p));
  box-shadow:0 0 24px var(--o)}
@keyframes spin{to{transform:rotate(360deg)}}

/* dalga formu */
.wave{display:flex;align-items:center;gap:3px;height:60px;justify-content:center;max-width:100%;overflow:hidden}
.wave i{width:4px;height:100%;background:linear-gradient(180deg,var(--o),var(--p));border-radius:3px;
  transform-origin:center;transform:scaleY(.2);will-change:transform;
  animation:wv 1.2s ease-in-out infinite alternate}
@keyframes wv{from{transform:scaleY(.1)}to{transform:scaleY(1)}}

/* sayaç */
.stat{text-align:center;padding:30px 16px;border:1px solid var(--line);border-radius:18px;background:var(--glass);transition:.4s}
.stat:hover{border-color:var(--o);box-shadow:0 0 40px rgba(255,138,0,.25);transform:translateY(-6px)}
.stat b{display:block;font-family:var(--f-d);font-weight:900;font-size:clamp(32px,5vw,54px);
  color:#fff;text-shadow:0 0 18px var(--o)}
.stat small{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--mut)}

/* timeline */
.tl{position:relative;padding-left:36px}
.tl::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;
  background:linear-gradient(var(--o),var(--m),var(--p));box-shadow:0 0 14px var(--o)}
.tl .item{position:relative;padding:0 0 42px 8px}
.tl .item::before{content:'';position:absolute;left:-34px;top:8px;width:14px;height:14px;border-radius:50%;
  background:var(--bg);border:2px solid var(--o);box-shadow:0 0 16px var(--o);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 10px var(--o)}50%{box-shadow:0 0 26px var(--o),0 0 44px var(--p)}}

/* akordiyon */
.acc{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--glass);margin-bottom:14px;transition:.35s}
.acc:hover{border-color:var(--o)}
.acc .q{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 26px;font-family:var(--f-d);
  font-size:14px;letter-spacing:.1em;cursor:none}
.acc .q i{color:var(--o);font-size:22px;transition:.35s;font-style:normal}
.acc.open .q i{transform:rotate(135deg)}
.acc .a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.9,.25,1)}
.acc .a p{padding:0 26px 24px;font-size:15px}

/* form */
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--f-d);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--o);margin-bottom:9px}
.field input,.field textarea,.field select{width:100%;padding:15px 18px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:12px;color:var(--ink);font-family:var(--f-b);font-size:16px;
  outline:none;transition:.3s;cursor:none}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--o);
  box-shadow:0 0 0 3px rgba(255,138,0,.12),0 0 26px rgba(255,138,0,.25);background:rgba(255,138,0,.05)}
.field select option{background:#120a1e}

/* iletişim satırı */
.crow{display:flex;align-items:center;gap:18px;padding:20px 24px;border:1px solid var(--line);border-radius:16px;
  background:var(--glass);transition:.35s;margin-bottom:14px}
.crow:hover{transform:translateX(10px);border-color:var(--o);box-shadow:0 0 32px rgba(255,138,0,.2)}
.crow .ico{margin:0;flex:0 0 auto}
.crow b{display:block;font-family:var(--f-d);font-size:12px;letter-spacing:.2em;color:var(--o)}
.crow span{color:var(--mut);font-size:15px}

/* fiyat kartı */
.price{position:relative;padding:36px 30px;border:1px solid var(--line);border-radius:22px;background:var(--glass);transition:.4s}
.price.pop{border-color:var(--o);box-shadow:0 0 50px rgba(255,138,0,.25)}
.price .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,var(--o),var(--p));
  color:#0a0410;font-family:var(--f-d);font-size:10px;letter-spacing:.2em;padding:6px 16px;border-radius:30px;white-space:nowrap}
.price h3{color:#fff}
.price .amt{font-family:var(--f-d);font-weight:900;font-size:40px;color:#fff;text-shadow:0 0 20px var(--o);margin:10px 0 4px}
.price ul{list-style:none;margin:22px 0 0}
.price li{padding:9px 0 9px 26px;position:relative;color:var(--mut);font-size:15px;border-bottom:1px dashed rgba(255,255,255,.07)}
.price li::before{content:'▹';position:absolute;left:0;color:var(--o);text-shadow:0 0 10px var(--o)}
.price:hover{transform:translateY(-10px);border-color:var(--m);box-shadow:0 30px 70px rgba(176,38,255,.28)}

/* CTA şeridi */
.cta{position:relative;text-align:center;padding:96px 30px;border-radius:28px;overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(130deg,rgba(255,138,0,.12),rgba(176,38,255,.12))}
.cta::before{content:'';position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent,var(--o),transparent 30%,var(--p),transparent 60%);
  animation:spin 14s linear infinite;opacity:.18;will-change:transform}
.cta>*{position:relative;z-index:2}

/* footer */
footer{position:relative;padding:80px 0 40px;border-top:1px solid var(--line);margin-top:60px;overflow:hidden}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
@media(max-width:820px){.f-grid{grid-template-columns:1fr;gap:28px}}
footer h4{font-family:var(--f-d);font-size:12px;letter-spacing:.28em;color:var(--o);margin-bottom:16px;text-transform:uppercase}
footer a{color:var(--mut);font-size:15px;display:block;padding:5px 0;transition:.3s}
footer a:hover{color:#fff;text-shadow:0 0 12px var(--o);transform:translateX(6px)}
.f-bottom{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:13px;color:var(--mut)}
.f-huge{overflow:hidden;font-family:var(--f-h);font-size:clamp(60px,17vw,240px);text-align:center;line-height:.8;color:transparent;
  -webkit-text-stroke:1.5px rgba(176,38,255,.3);margin-top:40px;user-select:none}
.socials{display:flex;gap:12px;margin-top:18px}
.socials a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;
  color:var(--o);transition:.35s;padding:0}
.socials a:hover{background:var(--o);color:#0a0410;box-shadow:0 0 28px var(--o);transform:translateY(-5px) rotate(-6deg)}

/* yukarı çık */
#top{position:fixed;right:22px;bottom:22px;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--o);background:rgba(6,4,10,.8);color:var(--o);z-index:9000;opacity:0;visibility:hidden;
  transition:.4s;box-shadow:0 0 22px rgba(255,138,0,.4);cursor:none}
#top.show{opacity:1;visibility:visible}
#top:hover{background:var(--o);color:#0a0410;box-shadow:0 0 34px var(--o)}

/* sayfa başlığı bandı */
.phead{position:relative;padding:190px 0 70px;text-align:center;overflow:hidden}
.phead .bgword{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);font-family:var(--f-h);
  font-size:clamp(90px,20vw,280px);color:transparent;-webkit-text-stroke:1.5px rgba(255,138,0,.14);
  white-space:nowrap;pointer-events:none;animation:drift 14s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-46%,-52%)}}
.crumb{font-family:var(--f-d);font-size:11px;letter-spacing:.3em;color:var(--mut);margin-top:16px}
.crumb b{color:var(--o)}

/* yardımcılar */
.center{text-align:center}
.mt{margin-top:26px}
.mt2{margin-top:52px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.chip{font-family:var(--f-d);font-size:10px;letter-spacing:.22em;padding:8px 16px;border-radius:40px;
  border:1px solid var(--line);color:var(--mut);transition:.3s}
.chip:hover{color:#fff;border-color:var(--o);box-shadow:0 0 20px rgba(255,138,0,.3);transform:translateY(-3px)}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--o),var(--p),transparent);margin:60px 0;opacity:.5}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:900px){.two{grid-template-columns:1fr;gap:34px}}
@media(max-width:700px){section{padding:74px 0}.hero-logo{opacity:.08}}

/* =====================================================
   VİDEOLAR
   ===================================================== */
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:24px}
.videos.one{grid-template-columns:1fr}
.vid{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#09050f;
  transition:.45s;box-shadow:0 0 0 rgba(255,138,0,0)}
.vid::after{content:'';position:absolute;inset:-1px;border-radius:18px;padding:1px;opacity:0;transition:.4s;
  background:linear-gradient(130deg,var(--o),var(--m),var(--p));pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.vid:hover::after{opacity:1}
.vid:hover{transform:translateY(-7px);border-color:var(--o);box-shadow:0 22px 55px rgba(176,38,255,.28),0 0 34px rgba(255,138,0,.2)}
.vid iframe{display:block;width:100%;aspect-ratio:16/9;border:0}

/* =====================================================
   MÜZİK ÇALAR
   ===================================================== */
#musicbar{position:fixed;left:22px;bottom:22px;z-index:9000;display:flex;align-items:center;gap:9px}
#music{display:flex;align-items:center;gap:10px;padding:11px 18px;border-radius:40px;border:1px solid var(--o);
  background:rgba(6,4,10,.85);backdrop-filter:blur(10px);color:var(--o);font-family:var(--f-d);font-size:10px;
  letter-spacing:.22em;cursor:none;transition:.35s;box-shadow:0 0 22px rgba(255,138,0,.32)}
#music:hover{background:var(--o);color:#0a0410;box-shadow:0 0 36px var(--o);transform:translateY(-3px)}
#music .bars{display:flex;align-items:flex-end;gap:2px;height:14px}
#music .bars i{display:block;width:3px;height:30%;background:currentColor;border-radius:2px;
  animation:mbar .7s ease-in-out infinite alternate;animation-play-state:paused}
#music .bars i:nth-child(2){animation-duration:.5s}
#music .bars i:nth-child(3){animation-duration:.9s}
#music .bars i:nth-child(4){animation-duration:.6s}
#music.on .bars i{animation-play-state:running}
#music.on{border-color:var(--m);color:var(--m);box-shadow:0 0 26px rgba(255,47,208,.45)}
#music.on:hover{background:var(--m);color:#0a0410}
@keyframes mbar{from{height:18%}to{height:100%}}

#vol{-webkit-appearance:none;appearance:none;width:104px;height:34px;padding:0 12px;border-radius:40px;
  border:1px solid var(--line);background:rgba(6,4,10,.85);backdrop-filter:blur(10px);cursor:none;outline:none;
  transition:.3s}
#vol:hover{border-color:var(--o);box-shadow:0 0 20px rgba(255,138,0,.25)}
#vol::-webkit-slider-runnable-track{height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--o) var(--fill,20%),rgba(255,255,255,.2) var(--fill,20%))}
#vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border-radius:50%;
  background:var(--o);box-shadow:0 0 10px var(--o);cursor:none}
#vol::-moz-range-track{height:3px;border-radius:3px;background:rgba(255,255,255,.2)}
#vol::-moz-range-progress{height:3px;border-radius:3px;background:var(--o)}
#vol::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--o);
  box-shadow:0 0 10px var(--o)}
@media(max-width:640px){#musicbar{left:14px;bottom:14px;gap:6px}
  #music{padding:9px 12px;font-size:9px}#music .lbl{display:none}
  #vol{width:74px;height:30px;padding:0 9px}}
#yt-host{position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none}


/* =====================================================
   SANATÇI FOTOĞRAFLARI (duotone)
   ===================================================== */
.apic{position:relative;overflow:hidden;aspect-ratio:1/1;background:#0a0610}
.apic img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.06);transition:filter .5s,transform .6s}
.apic::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(155deg,#ff8a00,#ff2fd0 55%,#b026ff);mix-blend-mode:multiply;
  opacity:.92;transition:opacity .5s}
.apic::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(6,4,10,.96) 2%,rgba(6,4,10,.35) 40%,transparent 70%)}
.artist:hover .apic img{transform:scale(1.06)}
.artist:hover .apic::after{opacity:.45}

.artist{padding:0;min-height:0;display:block;position:relative}
.ainfo{position:relative;z-index:3;padding:26px 30px 32px;margin-top:-90px}
.artist .tag{margin-bottom:12px}

/* sanatçı sayfası portresi */
.portrait{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 24px 70px rgba(176,38,255,.28);transition:.5s;max-width:460px;margin-inline:auto}
.portrait img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;filter:grayscale(1) contrast(1.06);transition:filter .5s,transform .6s}
.portrait::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(155deg,#ff8a00,#ff2fd0 55%,#b026ff);mix-blend-mode:multiply;opacity:.9;transition:opacity .5s}
.portrait:hover::after{opacity:.35}
.portrait:hover img{transform:scale(1.04)}
.portrait:hover{border-color:var(--o);box-shadow:0 26px 80px rgba(255,138,0,.32)}

/* =====================================================
   HAREKET AZALTMA TERCİHİ
   ===================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  #cloud-trail,.noise,.scanlines{display:none}
}

/* =====================================================
   SLUGZ FX — sarkan ağlar, örümcek, mavi şimşek, silüet
   ===================================================== */
#slugz-fx{display:contents}

/* --- şimşekte beliren SLUGZ silüeti --- */
/* silüet + şimşek parlaması tek katmanda */
#sl-ghost{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:none,radial-gradient(130% 95% at 50% 10%,rgba(255,32,44,.30),transparent 60%);
  background-position:50% 6%,0 0;background-size:auto 112%,cover;background-repeat:no-repeat,no-repeat;
  opacity:.07;will-change:opacity}
#sl-ghost.raw{filter:grayscale(1) contrast(1.3) brightness(.4) sepia(1) hue-rotate(178deg) saturate(2.4)}
#slugz-fx.flash #sl-ghost{animation:ghostlit .9s ease-out}
@keyframes ghostlit{
  0%{opacity:.62}12%{opacity:.14}22%{opacity:.56}38%{opacity:.22}55%{opacity:.34}100%{opacity:.07}}

/* --- şimşek katmanı --- */
#sl-bolt{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
body.slugz-page #grid-bg,body.slugz-page #cloud-trail{display:none}
body.slugz-page #bg-layers{background:
  radial-gradient(70vw 70vw at 10% -6%, rgba(255,25,35,.20), rgba(255,25,35,.06) 40%, transparent 68%),
  radial-gradient(64vw 64vw at 94% 106%, rgba(180,0,20,.20), rgba(180,0,20,.06) 40%, transparent 68%),
  #030203}

/* --- aşağı sarkan ipek iplikler --- */
.strandwrap{position:fixed;top:0;left:0;right:0;height:0;z-index:-1;pointer-events:none}
.strand{position:absolute;top:0;width:1px;display:block;transform-origin:top center;transform:scaleY(0);
  background:linear-gradient(to bottom,rgba(255,120,120,0),rgba(255,80,80,.6) 35%,rgba(255,140,138,.9));
  animation-name:strandgrow,strandsway;
  animation-timing-function:cubic-bezier(.2,.9,.25,1),ease-in-out;
  animation-fill-mode:forwards,none;
  animation-iteration-count:1,infinite;
  animation-direction:normal,alternate}
.strand b{position:absolute;left:50%;bottom:-3px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,rgba(255,120,120,.9) 55%,rgba(190,20,30,.3));
  box-shadow:0 0 8px rgba(255,80,80,.8);opacity:0;animation:dewin .8s ease-out forwards}
@keyframes strandgrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes strandsway{from{transform:rotate(-1.1deg)}to{transform:rotate(1.1deg)}}
#slugz-fx.zap .strand{background:linear-gradient(to bottom,rgba(255,210,210,0),rgba(255,225,222,.95) 35%,#fff)}

/* --- köşe ağları --- */
.webwrap{position:fixed;z-index:-1;pointer-events:none;will-change:transform}
.webwrap.tl{top:0;left:0}
.webwrap.tr{top:0;right:0}
.webwrap.br{bottom:0;right:0}
.webwrap.tr .wsag{transform-origin:100% 0}
.wsag{will-change:transform;animation:websag 7.5s ease-in-out infinite}
.webwrap.tr .wsag{animation-duration:9s;animation-direction:reverse}
.webwrap.bl .wsag{animation-duration:11s}
.webwrap.br .wsag{animation-duration:8.4s;animation-direction:reverse}
/* ağ yerçekimiyle hafifçe aşağı sarkıp geri toplanıyor */
@keyframes websag{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(0,10px,0) rotate(.8deg)}}
.webwrap.tr .webv{transform:scaleX(-1)}
.webwrap.bl .webv{transform:scaleY(-1)}
.webwrap.br .webv{transform:scale(-1,-1)}
.webv{overflow:visible;display:block}
.webv path{fill:none;stroke-linecap:round;stroke-dasharray:1800;stroke-dashoffset:1800;
  animation:webdraw 1.8s cubic-bezier(.2,.8,.3,1) forwards}
.webv .w-spoke{stroke:rgba(255,86,86,.55);stroke-width:.95}
.webv .w-ring{stroke:rgba(255,64,64,.4);stroke-width:.68}
.webv .w-loose{stroke:rgba(255,70,70,.32);stroke-width:.55}
@keyframes webdraw{to{stroke-dashoffset:0}}
.webv .w-dew{fill:rgba(255,150,150,.95);opacity:0;transform-box:fill-box;transform-origin:center;
  animation:dewin .7s ease-out forwards}
@keyframes dewin{from{opacity:0;transform:scale(0)}to{opacity:.85;transform:scale(1)}}
/* şimşek çakınca iplikler ışığı yakalar */
#slugz-fx.zap .webv .w-spoke{stroke:rgba(255,190,186,.95)}
#slugz-fx.zap .webv .w-ring{stroke:rgba(255,160,155,.85)}
#slugz-fx.zap .webv .w-loose{stroke:rgba(255,150,146,.8)}

/* --- örümcek --- */
.spiderwrap{position:fixed;top:-200px;right:12%;z-index:-1;pointer-events:none;
  animation:spdrop 3s cubic-bezier(.3,1.1,.45,1) .5s forwards}
@keyframes spdrop{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,235px,0)}}
.spider{overflow:visible;display:block;animation:spbob 5.5s ease-in-out 3.4s infinite}
@keyframes spbob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(20px) rotate(1.6deg)}}
.spider .silk{fill:none;stroke-width:1.1}
.spider .leg path{fill:none;stroke-linecap:round}
.spider .leg-thick{stroke:#07060b;stroke-width:7.5}
.spider .leg-thin{stroke:#2b2833;stroke-width:4}
.spider .leg-lit{stroke:rgba(255,105,105,.38);stroke-width:1.1}
.spider .leg{transform-box:fill-box;transform-origin:center;animation:legtw 2.8s ease-in-out infinite alternate}
.spider .leg-l0{animation-delay:0s}.spider .leg-r0{animation-delay:.4s}
.spider .leg-l1{animation-delay:.8s}.spider .leg-r1{animation-delay:1.2s}
.spider .leg-l2{animation-delay:1.6s}.spider .leg-r2{animation-delay:.25s}
.spider .leg-l3{animation-delay:1s}.spider .leg-r3{animation-delay:1.8s}
@keyframes legtw{from{transform:rotate(-1.7deg)}to{transform:rotate(1.7deg)}}
.spider .abd-mark{fill:rgba(255,55,55,.2)}
.spider .gloss{fill:rgba(255,205,200,.1)}
.spider .gloss2{fill:rgba(255,214,210,.18)}
.spider .eyes circle{fill:#ff5a52;animation:eyeglow 3.4s ease-in-out infinite}
@keyframes eyeglow{0%,100%{opacity:.7}50%{opacity:1}}
.spider .fang{fill:none;stroke:#14121a;stroke-width:3;stroke-linecap:round}
#slugz-fx.zap .spider .leg-lit{stroke:rgba(255,190,186,.95)}

@media(max-width:820px){
  .webwrap.bl,.webwrap.br{display:none}
  .webwrap.tl .wsag,.webwrap.tr .wsag{scale:.62}
  .spiderwrap{right:4%;scale:.68}
  #sl-ghost{background-size:auto 78%,cover;background-position:50% 12%,0 0}
}

/* --- portrede ayak bileği elektriği --- */
.portrait.electric{border-color:rgba(255,70,70,.5);
  box-shadow:0 24px 70px rgba(200,10,25,.4),0 0 34px rgba(255,50,50,.3)}
.portrait.electric::after{background:linear-gradient(155deg,#ff2b2b,#b0001c 58%,#3a0008);opacity:.88}
.sl-ankle{position:absolute;left:0;right:0;bottom:0;height:45%;width:100%;z-index:4;pointer-events:none}


/* =====================================================
   SAYFA TEMALARI
   ===================================================== */

/* ---------- JACBOI: kırık beyaz + siyah (monokrom) ---------- */
body.page-jacboi{
  --bg:#e6e1d7; --ink:#131316; --mut:#575249;
  --line:rgba(19,19,22,.22); --glass:rgba(250,247,240,.5);
  --o:#1b1b1e; --p:#6e685c; --m:#3b3934;
  background:var(--bg); color:var(--ink)}
body.page-jacboi #preloader{background:var(--bg)}
body.page-jacboi #preloader .pl-logo svg{filter:grayscale(1)}
body.page-jacboi .pl-word{color:#1b1b1e;text-shadow:none}
body.page-jacboi .pl-bar{background:rgba(19,19,22,.14)}
body.page-jacboi .pl-bar span{background:linear-gradient(90deg,#1b1b1e,#6e685c);box-shadow:none}
body.page-jacboi #bg-layers{background:
  radial-gradient(70vw 70vw at 8% -8%, rgba(19,19,22,.10), rgba(19,19,22,.03) 42%, transparent 70%),
  radial-gradient(60vw 60vw at 96% 104%, rgba(19,19,22,.09), rgba(19,19,22,.03) 42%, transparent 70%),
  #e6e1d7}
body.page-jacboi #grid-bg{opacity:.4;
  background-image:linear-gradient(rgba(19,19,22,.08) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(19,19,22,.08) 1px,transparent 1px)}
body.page-jacboi .noise{background-image:
  radial-gradient(ellipse at center,transparent 50%,rgba(19,19,22,.22) 100%),
  repeating-linear-gradient(to bottom,rgba(19,19,22,.05) 0 1px,transparent 1px 4px),
  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='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E")}
body.page-jacboi .neon,body.page-jacboi .neon-p{color:#101012;text-shadow:0 2px 20px rgba(19,19,22,.28)}
body.page-jacboi .grad{background:linear-gradient(100deg,#111,#6e685c,#111,#3b3934);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.page-jacboi .outline-txt{-webkit-text-stroke-color:rgba(19,19,22,.38)}
body.page-jacboi .kicker{color:#1b1b1e;text-shadow:none}
body.page-jacboi .kicker::before{background:#1b1b1e;box-shadow:none}
body.page-jacboi .nav.scrolled{background:rgba(233,229,221,.9);border-bottom-color:var(--line)}
body.page-jacboi .brand .txt{color:#131316}
body.page-jacboi .brand .txt small{color:#57534a;text-shadow:none}
body.page-jacboi .brand .mark svg{filter:grayscale(1)}
body.page-jacboi .nav-links a:hover,body.page-jacboi .nav-links a.active{color:#101012;text-shadow:none}
body.page-jacboi .card,body.page-jacboi .stat,body.page-jacboi .crow,body.page-jacboi .acc,body.page-jacboi .price{
  background:rgba(250,247,240,.55);box-shadow:0 6px 22px rgba(19,19,22,.06)}
body.page-jacboi .card::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(19,19,22,.09),transparent 45%)}
body.page-jacboi .card .ico{background:rgba(19,19,22,.05);box-shadow:none}
body.page-jacboi .card:hover .ico{box-shadow:0 0 20px rgba(19,19,22,.14)}
body.page-jacboi .btn{color:#131316;box-shadow:none}
body.page-jacboi .btn:hover{color:#f4f1ea;box-shadow:0 10px 26px rgba(19,19,22,.28)}
body.page-jacboi .field input,body.page-jacboi .field textarea,body.page-jacboi .field select{
  background:rgba(252,250,245,.7);color:var(--ink)}
body.page-jacboi .marquee{background:linear-gradient(90deg,rgba(19,19,22,.06),rgba(19,19,22,.1))}
body.page-jacboi .marquee span:hover{color:#101012;text-shadow:none}
body.page-jacboi .phead .bgword{-webkit-text-stroke-color:rgba(19,19,22,.13)}
body.page-jacboi .f-huge{-webkit-text-stroke-color:rgba(19,19,22,.24)}
body.page-jacboi footer a:hover{color:#101012;text-shadow:none}
body.page-jacboi .eq i,body.page-jacboi .wave i{background:linear-gradient(180deg,#1b1b1e,#4a463f,#8d8779);
  box-shadow:none}
body.page-jacboi .vinyl{background:repeating-radial-gradient(circle at center,#141416 0 3px,#232326 3px 6px);
  box-shadow:0 14px 40px rgba(19,19,22,.28),inset 0 0 40px rgba(0,0,0,.9)}
body.page-jacboi .vinyl::after{background:linear-gradient(135deg,#8d8779,#3b3934);box-shadow:none}
body.page-jacboi .cta{background:linear-gradient(130deg,rgba(19,19,22,.07),rgba(19,19,22,.12))}
body.page-jacboi .cta::before{opacity:.09}
body.page-jacboi .vid{background:#d9d4ca}
body.page-jacboi .portrait{box-shadow:0 24px 60px rgba(19,19,22,.22);border-color:rgba(19,19,22,.25)}
body.page-jacboi .portrait::after{opacity:0}
body.page-jacboi .portrait img{filter:grayscale(1) contrast(1.08)}
body.page-jacboi #musicbar #music,body.page-jacboi #top,body.page-jacboi #vol{
  background:rgba(250,247,240,.8);color:#1b1b1e;box-shadow:none}
body.page-jacboi #music:hover,body.page-jacboi #top:hover{background:#1b1b1e;color:#f2efe8}
body.page-jacboi #cursor{background:#131316;box-shadow:0 0 10px rgba(19,19,22,.45)}
body.page-jacboi #ring{border-color:rgba(19,19,22,.45);box-shadow:none}
body.page-jacboi .trail-logo{opacity:.4}
body.page-jacboi .trail-logo svg{filter:grayscale(1)}
body.page-jacboi ::selection{background:#1b1b1e;color:#f2efe8}
body.page-jacboi .divider{opacity:.3;background:linear-gradient(90deg,transparent,#1b1b1e,#8d8779,transparent)}
body.page-jacboi .chip:hover{color:#101012;box-shadow:none}
body.page-jacboi #progress{background:linear-gradient(90deg,#1b1b1e,#6e685c);box-shadow:none}
body.page-jacboi #curtain i{background:linear-gradient(180deg,#1b1b1e,#6e685c)}

/* ---------- JACBOI: mermi efekti ---------- */
#jacboi-fx{display:contents}
#jb-ghost{position:fixed;inset:0;z-index:-1;pointer-events:none;background-repeat:no-repeat;
  background-position:50% 6%;background-size:auto 112%;opacity:.05;will-change:opacity}
#jb-ghost.raw{filter:grayscale(1) contrast(1.45) invert(1) opacity(.35)}
#jacboi-fx.shot #jb-ghost{animation:jbshot .95s ease-out}
@keyframes jbshot{0%{opacity:.5}10%{opacity:.12}20%{opacity:.44}38%{opacity:.16}58%{opacity:.28}100%{opacity:.05}}
#jb-cracks{position:fixed;inset:0;width:100%;height:100%;z-index:9200;pointer-events:none}
@media(max-width:820px){#jb-ghost{background-size:auto 78%;background-position:50% 12%}}

/* ---------- SLUGZ: derin siyah ---------- */
body.page-slugz{--bg:#030203;--ink:#f3eef0;--mut:#9b8f95;
  --line:rgba(255,70,70,.18);--glass:rgba(255,255,255,.03);
  --o:#ff3b30;--m:#ff2d55;--p:#8e0018;background:var(--bg)}
body.page-slugz #grid-bg{opacity:.3;
  background-image:linear-gradient(rgba(255,60,60,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,60,60,.07) 1px,transparent 1px)}
body.page-slugz .noise{background-image:
  radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.88) 100%),
  repeating-linear-gradient(to bottom,rgba(0,0,0,.26) 0 1px,transparent 1px 4px),
  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='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")}
body.page-slugz .neon,body.page-slugz .neon-p{color:#fff;
  text-shadow:0 0 8px #ff3b30,0 0 24px rgba(255,59,48,.7),0 0 52px rgba(255,20,30,.5)}
body.page-slugz .eq i,body.page-slugz .wave i{background:linear-gradient(180deg,#ff6a4d,#ff2d55,#8e0018)}
body.page-slugz .vinyl{box-shadow:0 0 40px rgba(255,45,60,.35),inset 0 0 40px rgba(0,0,0,.95)}
body.page-slugz .vinyl::after{background:linear-gradient(135deg,#ff3b30,#8e0018);box-shadow:0 0 22px #ff3b30}
body.page-slugz .cta{background:linear-gradient(130deg,rgba(255,45,60,.12),rgba(60,0,10,.3))}
body.page-slugz .marquee{background:linear-gradient(90deg,rgba(255,45,60,.08),rgba(60,0,10,.25))}
body.page-slugz #cursor{background:#ff3b30;box-shadow:0 0 12px #ff3b30,0 0 28px #ff3b30}
body.page-slugz #ring{border-color:#ff2d55;box-shadow:0 0 18px rgba(255,45,85,.5)}
body.page-slugz .trail-logo{display:none}