/* ============================================================
   TEMA DUVARI — hazır temalar sayfası girişi (assets/js/tema-duvar.js)
   Tokenlar style.css'ten. Bölüm tam ekran; kanvas bölümün içinde,
   sayfa normal kayar. Kenar karartması kolajın bittiği hissini siler.
   ============================================================ */
.tema-duvar{
  position:relative;height:100svh;min-height:560px;overflow:hidden;
  padding:0;background:var(--bg);border-bottom:1px solid var(--line);
}
.tema-duvar canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
.tema-duvar canvas.tutuyor{cursor:grabbing}
.tema-duvar canvas.uzerinde{cursor:pointer}
.tema-duvar .td-vinyet{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(14,14,12,.55) 100%)}

/* başlık: sayfanın h1'i, sol üstte, menünün altında */
.td-baslik{
  position:absolute;left:clamp(1rem,3vw,2.4rem);top:calc(78px + 1.4rem);z-index:3;
  max-width:min(88vw,560px);
  padding:.9rem 1.1rem;background:rgba(14,14,12,.72);border:1px solid var(--line-2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.td-baslik .crumb{margin-bottom:.5rem}
.td-baslik h1{font-size:clamp(1.25rem,2.6vw,1.9rem);letter-spacing:-.03em;text-transform:uppercase;line-height:1;margin:0}
.td-baslik h1 em{font-style:normal;color:var(--acid)}
.td-baslik p{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:.55rem 0 0}

/* sol alt: öne gelen tema */
.td-etiket{
  position:absolute;left:clamp(1rem,3vw,2.4rem);bottom:clamp(1rem,3vw,2rem);z-index:3;
  display:flex;align-items:center;gap:1rem;
  padding:.7rem .9rem .7rem 1.1rem;max-width:min(80vw,560px);
  background:rgba(14,14,12,.72);border:1px solid var(--line-2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.td-etiket .no{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;color:var(--acid)}
.td-etiket .ad{display:flex;flex-direction:column;min-width:0}
.td-etiket .tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.td-etiket .ad-metin{font-family:var(--font-head);font-weight:800;color:var(--ink);font-size:clamp(.95rem,1.6vw,1.2rem);letter-spacing:-.02em;text-transform:uppercase;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-etiket .ac{white-space:nowrap}

/* sağ alt: listeye in */
/* WhatsApp yüzen düğmesi sağ altta: onun soluna al. */
.td-araclar{position:absolute;right:calc(clamp(1rem,3vw,2.4rem) + 76px);bottom:clamp(1rem,3vw,2rem);z-index:3;display:flex;flex-direction:column;gap:.6rem;align-items:flex-end}
.td-arac{
  display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1rem;
  background:rgba(14,14,12,.72);border:1px solid var(--line-2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  transition:border-color .25s ease,color .25s ease;
}
.td-arac:hover{border-color:var(--acid);color:var(--acid)}
.td-arac svg{width:14px;height:14px;flex:none}
.td-arac.zipla svg{animation:td-zipla 1.6s ease-in-out infinite}
@keyframes td-zipla{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ipucu: ilk sürüklemede kaybolur */
.td-ipucu{
  position:absolute;left:50%;top:calc(78px + 1.6rem);transform:translateX(-50%);z-index:3;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  padding:.55rem .9rem;background:rgba(14,14,12,.6);border:1px solid var(--line);
  transition:opacity .6s ease;white-space:nowrap;
}
.td-ipucu.gizli{opacity:0;pointer-events:none}

@media (max-width:900px){.td-ipucu{display:none}}
@media (max-width:640px){
  .td-baslik{max-width:calc(100vw - 2rem)}
  .td-baslik p:not(.crumb){display:none}
  .td-etiket{max-width:calc(100vw - 2rem - 70px)}
  .td-etiket .no,.td-etiket .ac{display:none}
  .td-arac span{display:none}
  .td-arac{padding:.75rem}
}

/* WebGL yoksa: sade başlık, liste zaten altta */
.tema-duvar.webgl-yok{height:auto;min-height:0;padding:calc(78px + 3rem) 0 3rem}
.tema-duvar.webgl-yok canvas,.tema-duvar.webgl-yok .td-etiket,.tema-duvar.webgl-yok .td-araclar,.tema-duvar.webgl-yok .td-ipucu,.tema-duvar.webgl-yok .td-vinyet{display:none}
.tema-duvar.webgl-yok .td-baslik{position:static;max-width:none;background:none;border:0;backdrop-filter:none;padding:0 clamp(1rem,3vw,2.4rem)}

/* duvar modu: sayfa kaymaz (Lenis de durdurulur, tema-duvar.js) */
html.duvar-kilit,html.duvar-kilit body{overflow:hidden}
.td-arac.td-liste{background:var(--acid);color:#000;border-color:var(--acid);font-weight:700}
.td-arac.td-liste:hover{background:var(--ink);border-color:var(--ink);color:#000}