/* ============================================================
   main.css — Fondasi Tema & Background Dinamis
   zidCreative v4.0 "Immersive Tech"
   ============================================================ */

/* ============================================================
   1) CSS VARIABLES — GLOBAL
   ============================================================ */
:root {
  --theme-primary: #0ea5e9;
  --theme-accent:  #38bdf8;
  --theme-deep:    #0284c7;
  --theme-glow:    rgba(14, 165, 233, 0.45);
  --theme-glow-2:  rgba(14, 165, 233, 0.18);
  --theme-surface: rgba(14, 165, 233, 0.06);

  --bg-base:    #070b14;
  --bg-surface: #0d1424;
  --bg-elev:    #111a2e;
  --border-soft: rgba(255,255,255,0.06);
  --border-med:  rgba(255,255,255,0.10);
}

/* ============================================================
   2) BACKGROUND LAYERS
   ============================================================ */
.bg-mesh{
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 15% 8%,  rgba(14,165,233,.22), transparent 65%),
    radial-gradient(ellipse 45% 40% at 85% 15%, rgba(168,85,247,.18), transparent 65%),
    radial-gradient(ellipse 50% 45% at 50% 95%, rgba(16,185,129,.12), transparent 65%),
    radial-gradient(ellipse 35% 35% at 95% 75%, rgba(245,158,11,.10), transparent 65%),
    var(--bg-base);
  background-size:200% 200%;
  animation:meshShift 28s ease-in-out infinite alternate;
}
@keyframes meshShift{
  0%   {background-position:0% 0%, 100% 0%, 50% 100%, 100% 100%}
  100% {background-position:100% 100%, 0% 100%, 50% 0%, 0% 0%}
}

.bg-noise{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.bg-grid{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.35;
  background-image:
    linear-gradient(rgba(56,189,248,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.055) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 85%);
}

/* ============================================================
   3) FLOATING SHAPES
   ============================================================ */
.shapes-layer{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.shape{
  position:absolute;
  opacity:.4;
  will-change:transform;
  transform:translate3d(0,0,0);
}
.shape-grid{
  top:12%;right:6%;
  width:200px;height:200px;
  background-image:
    linear-gradient(rgba(56,189,248,.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.20) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:radial-gradient(circle, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(circle, #000 30%, transparent 75%);
  animation:floatSlow 20s ease-in-out infinite;
}
.shape-ring{
  bottom:14%;left:5%;
  width:240px;height:240px;
  border-radius:50%;
  border:1px solid rgba(168,85,247,.28);
  box-shadow:0 0 80px rgba(168,85,247,.15) inset;
  animation:floatSlow 24s ease-in-out infinite reverse;
}
.shape-dot{
  top:58%;right:12%;
  width:8px;height:8px;
  border-radius:50%;
  background:#38bdf8;
  box-shadow:0 0 24px 5px rgba(56,189,248,.6);
  animation:pulseDot 4.5s ease-in-out infinite;
}
.shape-tri{
  bottom:22%;right:20%;
  width:0;height:0;
  border-left:44px solid transparent;
  border-right:44px solid transparent;
  border-bottom:66px solid rgba(14,165,233,.10);
  animation:floatSlow 22s ease-in-out infinite;
}
@keyframes floatSlow{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  50%    {transform:translate(-24px,-34px) rotate(7deg)}
}
@keyframes pulseDot{
  0%,100%{transform:scale(1);opacity:.55}
  50%    {transform:scale(1.7);opacity:1}
}

/* ============================================================
   4) TEXT GRADIENTS
   ============================================================ */
.gradient-text{
  background:linear-gradient(120deg,#38bdf8 0%,#0ea5e9 45%,#67e8f9 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:gradientFlow 8s ease infinite;
}
@keyframes gradientFlow{
  0%,100%{background-position:0% 50%}
  50%    {background-position:100% 50%}
}

/* ============================================================
   5) BUTTONS
   ============================================================ */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.85rem 1.65rem;
  border-radius:9999px;
  background:linear-gradient(120deg,
    var(--theme-deep, #0284c7),
    var(--theme-primary, #0ea5e9));
  color:#fff;
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.01em;
  box-shadow:
    0 10px 30px -10px var(--theme-glow, rgba(14,165,233,.6)),
    0 0 0 1px rgba(255,255,255,.06) inset;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),
             box-shadow .3s ease,
             background .3s ease;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn-primary::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,
    transparent 30%,
    rgba(255,255,255,.18) 50%,
    transparent 70%);
  transform:translateX(-100%);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
  z-index:-1;
}
.btn-primary:hover::before{transform:translateX(100%)}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:
    0 18px 45px -12px var(--theme-glow, rgba(14,165,233,.85)),
    0 0 0 1px rgba(255,255,255,.10) inset;
}
.btn-primary .arrow{transition:transform .3s ease}
.btn-primary:hover .arrow{transform:translateX(5px)}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.85rem 1.65rem;
  border-radius:9999px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.12);
  color:#e5e7eb;
  font-weight:500;
  font-size:.9rem;
  transition:all .3s ease;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.btn-ghost:hover{
  background:rgba(255,255,255,.07);
  border-color:var(--theme-primary, rgba(56,189,248,.5));
  transform:translateY(-2px);
  box-shadow:0 12px 28px -14px var(--theme-glow, rgba(14,165,233,.4));
}

/* ============================================================
   6) SCROLLBAR (book container)
   ============================================================ */
.books-scroll-container{
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--theme-primary, #0ea5e9) rgba(30,41,59,.5);
  padding-bottom:.75rem;
  scroll-snap-type:x proximity;
}
.books-scroll-container::-webkit-scrollbar{height:8px}
.books-scroll-container::-webkit-scrollbar-track{
  background:rgba(30,41,59,.5);
  border-radius:10px;
}
.books-scroll-container::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg, var(--theme-deep, #0ea5e9), var(--theme-primary, #38bdf8));
  border-radius:10px;
}
.books-scroll-container::-webkit-scrollbar-thumb:hover{
  background:var(--theme-accent, #38bdf8);
}
.books-scroll-container > div > *{scroll-snap-align:start}

/* ============================================================
   7) SECTION SPACING
   ============================================================ */
.section{
  padding:5rem 0;
  position:relative;
}
@media(min-width:768px){
  .section{padding:7rem 0}
}

/* ============================================================
   8) LINE CLAMP
   ============================================================ */
.line-clamp-1,.line-clamp-2,.line-clamp-3,.line-clamp-4{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.line-clamp-1{-webkit-line-clamp:1}
.line-clamp-2{-webkit-line-clamp:2}
.line-clamp-3{-webkit-line-clamp:3}
.line-clamp-4{-webkit-line-clamp:4}

/* ============================================================
   9) LOGO GLOW (hero)
   ============================================================ */
.logo-glow{
  position:relative;
  background:radial-gradient(circle at 50% 50%,
    rgba(14,165,233,.18),
    rgba(99,102,241,.08) 45%,
    transparent 72%);
  border:1px solid rgba(56,189,248,.25);
  box-shadow:
    0 0 80px rgba(14,165,233,.20),
    0 0 120px rgba(99,102,241,.12),
    inset 0 0 60px rgba(14,165,233,.08);
}

/* ============================================================
   10) TYPEWRITER CURSOR
   ============================================================ */
.cursor-blink::after{
  content:'|';
  margin-left:3px;
  color:var(--theme-accent, #38bdf8);
  animation:blink 1s steps(2,start) infinite;
  font-weight:300;
}
@keyframes blink{50%{opacity:0}}

/* ============================================================
   11) MOBILE MENU
   ============================================================ */
#mobile-menu{
  transition:transform .35s cubic-bezier(.2,.8,.2,1),
             opacity .35s ease;
}
#mobile-menu.mobile-active{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.mobile-dropdown-content{
  transition:max-height .35s ease;
}

/* ============================================================
   12) FOOTER LINKS
   ============================================================ */
.footer-link{
  color:#9ca3af;
  font-size:.875rem;
  transition:color .25s ease, transform .25s ease;
  display:inline-block;
}
.footer-link:hover{
  color:var(--theme-accent, #38bdf8);
  transform:translateX(3px);
}
.social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#9ca3af;
  transition:all .3s cubic-bezier(.2,.8,.2,1);
}
.social-icon:hover{
  background:linear-gradient(135deg,
    var(--theme-primary, #0ea5e9),
    var(--theme-deep, #0284c7));
  color:#fff;
  transform:translateY(-3px) scale(1.05);
  border-color:transparent;
  box-shadow:0 8px 20px -8px var(--theme-glow, rgba(14,165,233,.6));
}