/* ═══════════════════════════════════════════════════════════════════
   Halloween teması — yalnızca <html class="tema-halloween"> iken.
   Sınıfı assets/halloween.js tarihte (yalnız 31 Ekim) ya da
   önizleme için `?tema=halloween` ile ekler. Tema yokken bu dosyanın
   hiçbir kuralı eşleşmez.
   ═══════════════════════════════════════════════════════════════════ */
.tema-halloween{
  --amber:#FF8A1F;
  --kick:#FF7A00;
  --mint:#B07CFF;
  --hw-orange:255,122,0;
  --hw-purple:150,80,255;
}

/* Vurgu rengi kullanan kart/şeritler turuncuya döner. */
.tema-halloween .extcard,
.tema-halloween .extbar,
.tema-halloween .arackart{--ac:var(--hw-orange)}

/* Arka plana mor-turuncu sis. */
.tema-halloween body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 45% at 15% 0%,rgba(var(--hw-purple),.30),transparent 70%),
    radial-gradient(55% 40% at 90% 8%,rgba(var(--hw-orange),.26),transparent 70%),
    radial-gradient(120% 35% at 50% 100%,rgba(var(--hw-orange),.22),transparent 70%);
}

/* ── Süs katmanı (halloween.js oluşturur) ── */
.hw-layer{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}

/* Uçan yarasalar */
.hw-bat{position:absolute;width:calc(var(--s,34px) * 1.6);opacity:1;
  animation:hw-fly var(--d,18s) linear var(--delay,0s) infinite;
  filter:drop-shadow(0 0 10px rgba(var(--hw-orange),.85)) drop-shadow(0 0 2px rgba(255,180,90,.9))}
.hw-bat svg{width:100%;height:auto;display:block;fill:#3a2257}
.hw-bat .kanat{transform-origin:50% 40%;animation:hw-flap .32s ease-in-out infinite alternate}
@keyframes hw-flap{from{transform:scaleY(1)}to{transform:scaleY(.45)}}
@keyframes hw-fly{
  0%  {transform:translate(-12vw,var(--y0,20vh)) rotate(-4deg)}
  25% {transform:translate(25vw,calc(var(--y0,20vh) - 6vh)) rotate(5deg)}
  50% {transform:translate(55vw,calc(var(--y0,20vh) + 4vh)) rotate(-3deg)}
  75% {transform:translate(85vw,calc(var(--y0,20vh) - 5vh)) rotate(4deg)}
  100%{transform:translate(112vw,var(--y0,20vh)) rotate(-2deg)}
}

/* Köşe örümcek ağları */
.hw-web{position:absolute;top:0;width:clamp(150px,18vw,280px);opacity:.75}
.hw-web.sol{left:0}
.hw-web.sag{right:0;transform:scaleX(-1)}
.hw-web svg{width:100%;height:auto;display:block;stroke:rgba(236,230,248,.8);fill:none;
  stroke-width:.9;stroke-linecap:round;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.4));
  /* Köşeden uzaklaştıkça silikleşsin. */
  -webkit-mask-image:radial-gradient(circle at 0 0,#000 55%,transparent 100%);
          mask-image:radial-gradient(circle at 0 0,#000 55%,transparent 100%)}

/* Sarkan örümcek */
.hw-spider{position:absolute;top:0;right:clamp(90px,11vw,170px);width:2px;
  height:var(--h,120px);background:linear-gradient(#cfc6dd88,#cfc6dd33);
  animation:hw-drop 6s ease-in-out infinite alternate}
.hw-spider svg{position:absolute;bottom:-18px;left:-11px;width:24px;fill:#0d0910;
  filter:drop-shadow(0 0 4px rgba(var(--hw-orange),.6))}
@keyframes hw-drop{from{height:90px}to{height:210px}}

/* Alt kenarda balkabakları */
.hw-pumpkins{position:absolute;bottom:-6px;left:0;right:0;display:flex;
  justify-content:space-between;padding:0 clamp(8px,3vw,40px)}
.hw-pumpkin{width:clamp(56px,6vw,96px);animation:hw-glow 2.6s ease-in-out infinite alternate}
.hw-pumpkin:nth-child(even){animation-delay:.8s;width:clamp(40px,4.4vw,70px)}
.hw-pumpkin svg{width:100%;height:auto;display:block}
@keyframes hw-glow{
  from{filter:drop-shadow(0 0 6px rgba(var(--hw-orange),.45))}
  to  {filter:drop-shadow(0 0 16px rgba(var(--hw-orange),.9))}
}

/* Hero başlığına turuncu-mor parıltı */
.tema-halloween h1 em,
.tema-halloween .hero h1 em{
  background:linear-gradient(90deg,#FF8A1F,#FFB347 45%,#B07CFF);
  -webkit-background-clip:text;background-clip:text;color:transparent}


/* Mobilde süsler sade; hareket azaltma tercihine saygı. */
@media(max-width:640px){
  .hw-web{width:96px}
  .hw-spider,.hw-bat:nth-child(n+4){display:none}
}
@media(prefers-reduced-motion:reduce){
  .hw-bat,.hw-bat .kanat,.hw-spider,.hw-pumpkin{animation:none}
  .hw-bat{display:none}
}

/* Dolunay — hero'nun sağ üstü (sayfayla birlikte kayar). */
.hw-moon{position:absolute;top:clamp(70px,10vh,120px);right:clamp(40px,12vw,220px);
  width:clamp(110px,12vw,190px);aspect-ratio:1;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 35% 35%,#fff6dc,#ffd98a 45%,#f0a43a 80%);
  box-shadow:0 0 60px 20px rgba(255,170,60,.35),0 0 160px 60px rgba(255,120,0,.18);
  opacity:.92}
.hw-moon::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 62% 58%,rgba(170,110,40,.35) 0 9%,transparent 10%),
             radial-gradient(circle at 40% 70%,rgba(170,110,40,.28) 0 6%,transparent 7%),
             radial-gradient(circle at 70% 30%,rgba(170,110,40,.25) 0 5%,transparent 6%)}

/* Süzülen hayaletler */
.hw-ghost{position:absolute;width:clamp(38px,4vw,62px);opacity:.8;
  animation:hw-ghost var(--d,14s) ease-in-out var(--delay,0s) infinite;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.45))}
.hw-ghost svg{width:100%;height:auto;display:block}
@keyframes hw-ghost{
  0%  {transform:translate(var(--x0,8vw),105vh) rotate(-6deg);opacity:0}
  15% {opacity:.8}
  50% {transform:translate(calc(var(--x0,8vw) + 6vw),50vh) rotate(6deg)}
  85% {opacity:.8}
  100%{transform:translate(var(--x0,8vw),-15vh) rotate(-4deg);opacity:0}
}


/* Butonlar turuncu */
.tema-halloween .btn-primary,
.tema-halloween a.cta,
.tema-halloween .nav .cta{border-color:rgba(var(--hw-orange),.6)}
@media(max-width:640px){.hw-moon{display:none}.hw-ghost:nth-child(n+2){display:none}}
@media(prefers-reduced-motion:reduce){.hw-ghost{display:none}}

/* ── Giriş sahnesi (oturum başına bir kez) ───────────────────────────── */
.hw-intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:radial-gradient(70% 60% at 50% 45%,#2a0f02 0%,#0a0408 60%,#000 100%);
  transition:opacity .9s ease,visibility .9s;cursor:pointer}
.hw-intro.gidiyor{opacity:0;visibility:hidden}
.hw-intro-ic{text-align:center;padding:0 20px;animation:hw-intro-in 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes hw-intro-in{from{opacity:0;transform:scale(.86) translateY(20px)}to{opacity:1;transform:none}}
.hw-intro-kabak{width:clamp(120px,18vw,190px);margin:0 auto 1.2rem;
  animation:hw-kabak 1.8s ease-in-out infinite alternate}
.hw-intro-kabak svg{width:100%;height:auto;display:block}
@keyframes hw-kabak{
  from{filter:drop-shadow(0 0 18px rgba(255,122,0,.55))}
  to  {filter:drop-shadow(0 0 48px rgba(255,140,20,1))}
}
.hw-intro h2,.hw-hero-tag{font-family:"Creepster","Nosifer",var(--sans);font-weight:400;
  letter-spacing:.04em;color:#FF7A00;
  text-shadow:0 0 18px rgba(255,122,0,.7),0 4px 0 #3a1300}
.hw-intro h2{font-size:clamp(2.6rem,8vw,6rem);line-height:1;margin:0}
.hw-intro p{margin:.9rem 0 0;color:#e9d8c6;font-size:clamp(.95rem,1.6vw,1.15rem);opacity:.85}
.hw-intro small{display:block;margin-top:1.6rem;font:500 10.5px/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;color:#a58a73}

/* ── Hero'daki Halloween başlığı ─────────────────────────────────────── */
.hw-hero-tag{display:block;font-size:clamp(1.9rem,5vw,3.4rem);line-height:1.05;
  margin:1.1rem 0 .7rem;animation:hw-titrek 3.5s ease-in-out infinite}
@keyframes hw-titrek{
  0%,92%,100%{opacity:1}
  93%{opacity:.4}94%{opacity:1}96%{opacity:.6}97%{opacity:1}
}
.tema-halloween .hero h1 .soft{color:#ffb35c}
.tema-halloween .hero .eyebrow{color:#ffb35c}

/* Ses aç/kapa — üst menüde dil düğmesinin (#langBtn) yanında, aynı ölçüde. */
#hwSesWrap{position:relative;z-index:1;flex:none;margin-right:.5rem}
#hwSesBtn{display:inline-flex;align-items:center;gap:.4rem;flex:none;position:relative;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;padding:.55rem .8rem;
  border-radius:999px;border:1px solid rgba(var(--hw-orange),.45);color:#ffb35c;
  background:transparent;cursor:pointer;transition:.2s}
#hwSesBtn:hover{color:#ffd08a;border-color:rgb(var(--hw-orange))}
#hwSesBtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
#hwSesBtn .carpi{display:none}
#hwSesBtn:not(.acik) .dalga{display:none}
#hwSesBtn:not(.acik) .carpi{display:inline}
#hwSesBtn:not(.acik){color:var(--muted);border-color:var(--line-2)}
#hwSesBtn.acik{box-shadow:0 0 14px rgba(var(--hw-orange),.35)}
#hwSesWrap.yuzer{position:fixed;top:14px;right:14px;z-index:20;margin:0}
#hwSesWrap.yuzer #hwSesBtn{background:rgba(12,12,16,.85)}

/* Ses menüsü — dil menüsüyle (#langMenu) aynı yüzey. */
#hwSesMenu{display:none;position:absolute;top:calc(100% + 10px);right:0;width:230px;
  padding:.75rem;border:1px solid var(--line-2);border-radius:12px;
  background:rgba(12,12,16,.97);backdrop-filter:blur(16px);
  box-shadow:0 18px 40px rgba(0,0,0,.55)}
#hwSesWrap.open #hwSesMenu{display:block}
.hw-ses-ac{display:flex;align-items:center;gap:.6rem;width:100%;padding:.45rem .4rem;
  border:0;border-radius:8px;background:transparent;color:var(--bone);cursor:pointer;
  font:500 13px/1 var(--sans);text-align:left}
.hw-ses-ac:hover{background:rgba(255,255,255,.05)}
.hw-ses-ac i{position:relative;flex:none;width:32px;height:18px;border-radius:999px;
  background:var(--line-2);transition:background .2s}
.hw-ses-ac i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;
  border-radius:50%;background:#fff;transition:transform .2s}
.hw-ses-ac.acik i{background:rgb(var(--hw-orange))}
.hw-ses-ac.acik i::after{transform:translateX(14px)}
.hw-ses-sev{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.45rem .6rem;
  margin-top:.65rem;padding:0 .4rem}
.hw-ses-et{grid-column:1/-1;font:500 10.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.hw-ses-sev em{font:500 11px/1 var(--mono);font-style:normal;color:#ffb35c;min-width:3.2em;text-align:right}
.hw-ses-sev input{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;
  background:linear-gradient(90deg,rgb(var(--hw-orange)) var(--dolu,70%),var(--line-2) var(--dolu,70%));
  cursor:pointer;outline:none}
.hw-ses-sev input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:#ffd08a;box-shadow:0 0 8px rgba(var(--hw-orange),.8);border:0}
.hw-ses-sev input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#ffd08a;border:0}
@media(max-width:640px){#hwSesBtn span{display:none}#hwSesBtn{padding:.55rem}}

/* ── Fare: balkabağı imleç, tıklanabilir yerlerde hayalet ────────────── */
.tema-halloween,
.tema-halloween body{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 64 64'><path d='M30 12c0-5 2-8 6-9-1 3-1 6 0 9' fill='%233b5d1d'/><ellipse cx='32' cy='38' rx='27' ry='21' fill='%23FF7A00' stroke='%232a1200' stroke-width='3'/><path d='M19 32l6 5h-8zM45 32l-6 5h8zM21 45q11 7 22 0l-4 1-2 3-3-3-3 3-3-3-3 3-2-3z' fill='%232a1200'/></svg>") 6 6, auto}
.tema-halloween a,.tema-halloween button,.tema-halloween [role=button],
.tema-halloween label,.tema-halloween summary{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='36' viewBox='0 0 40 48'><path d='M20 2C10 2 4 10 4 20v24l6-5 5 5 5-5 5 5 5-5 6 5V20C36 10 30 2 20 2Z' fill='%23f4f0fb' stroke='%231a1024' stroke-width='2'/><ellipse cx='14' cy='20' rx='3' ry='4' fill='%231a1024'/><ellipse cx='26' cy='20' rx='3' ry='4' fill='%231a1024'/><ellipse cx='20' cy='30' rx='3' ry='2.5' fill='%231a1024'/></svg>") 16 4, pointer}
.tema-halloween input,.tema-halloween textarea{cursor:text}

/* Fare izi — kıvılcım ve küçük yarasalar (halloween.js oluşturur). */
.hw-iz{position:fixed;left:0;top:0;z-index:9998;pointer-events:none;
  width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle,#ffd08a,#ff7a00 60%,transparent 70%);
  box-shadow:0 0 10px 2px rgba(255,122,0,.7);
  animation:hw-iz .9s ease-out forwards}
.hw-iz.mor{background:radial-gradient(circle,#e3c8ff,#9b5cff 60%,transparent 70%);
  box-shadow:0 0 10px 2px rgba(150,80,255,.7)}
@keyframes hw-iz{
  from{opacity:1;transform:translate(var(--x),var(--y)) scale(1)}
  to  {opacity:0;transform:translate(calc(var(--x) + var(--dx)),calc(var(--y) + var(--dy))) scale(.2)}
}
@media(pointer:coarse),(prefers-reduced-motion:reduce){.hw-iz{display:none}}