/* =========================
           HERO BG FADE (crossfade)
        ========================= */
        #section-hero{
          position: relative;
          overflow: hidden;
        }

        #section-hero::before,
        #section-hero::after{
          content:"";
          position:absolute;
          inset:0;
          background-size:cover;
          background-repeat:no-repeat;
          background-position:center bottom;
          z-index:0;
          transition: opacity 1.3s ease-in-out;
        }

        #section-hero::before{
          opacity: 1;
          background-image: var(--hero-bg-1);
        }

        #section-hero::after{
          opacity: 0;
          background-image: var(--hero-bg-2);
        }

        #section-hero.is-fading::after{ opacity: 1; }
        #section-hero.is-fading::before{ opacity: 0; }

        /* overlay tipis biar kebaca (bukan box) */
        #section-hero .hero-overlay{
          position:absolute;
          inset:0;
          background: rgba(0,0,0,.25);
          z-index:2;
          pointer-events:none;
        }

        /* particles layering */
        #particles-js{
          position:absolute;
          inset:0;
          z-index:1;
          pointer-events:none;
        }

        /* konten selalu di atas */
        #section-hero .v-center,
        #section-hero .v-center *{
          position: relative;
          z-index: 5;
        }

        /* FIX WOW biar gak hidden */
        #section-hero .wow{
          visibility: visible !important;
          opacity: 1 !important;
          animation: none !important;
          transform: none !important;
        }

        /* =========================
           HERO LAYOUT (NO BIG BOX)
        ========================= */

        /* center tapi lebar */
        #section-hero .row.align-items-center{
          justify-content: center;
          text-align: center;
        }

        /* HAPUS box besar (yang tadi bikin kotak blur) */
        #section-hero .col-md-6 > .row > .row{
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin: 0 !important;
}

/* tiap kolom counter dipaksa jadi 3 kolom (desktop) */
@media (min-width: 992px){
  #section-hero .col-md-6 > .row > .row > [class*="col-"]{
    flex: 0 0 calc(33.333% - 12px) !important;
    max-width: calc(33.333% - 12px) !important;
  }
}

/* tablet: 2 kolom */
@media (min-width: 576px) and (max-width: 991px){
  #section-hero .col-md-6 > .row > .row > [class*="col-"]{
    flex: 0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
  }
}

/* hp: 1 kolom */
@media (max-width: 575px){
  #section-hero .col-md-6 > .row > .row > [class*="col-"]{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* box counter kecil (kartu) — bukan bar panjang */
#section-hero .de_count{
  width: 100%;
  min-height: 110px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 18px 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.30);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

        /* angka lebih tegas */
        #section-hero .de_count h3{
          color: #fff;
          font-weight: 900;
          text-shadow: 0 2px 10px rgba(0,0,0,.7);
          margin-bottom: 6px;
        }

        #section-hero .de_count h5{
          color: rgba(255,255,255,.85);
          margin: 0;
          text-shadow: 0 2px 10px rgba(0,0,0,.6);
        }

        /* =========================
   HERO TITLE: GEDE + LEBAR
========================= */

/* lebarin area konten hero */
@media (min-width: 992px){
  #section-hero .col-md-6{
    width: 100% !important;
    max-width: 1200px !important;   /* tambah lebar */
    flex: 0 0 1200px !important;
  }
}

/* bikin H1 super gede & enak dibaca */
#section-hero h1{
  font-weight: 900;
  font-size: clamp(56px, 6vw, 96px);  /* gedein */
  line-height: 1.02;
  letter-spacing: -0.5px;
  max-width: 1200px;                  /* lebar */
  margin: 0 auto 14px auto;
  text-shadow:
    0 3px 12px rgba(0,0,0,.85),
    0 12px 40px rgba(0,0,0,.55);
}

/* paragraf ikut lebar dikit tapi jangan kepanjangan */
#section-hero p{
  max-width: 900px;
  margin: 0 auto;
}

/* Logo: icon + text */
#logo .brand-logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* icon logo */
#logo .brand-icon{
  width: 44px;      /* atur sesuai selera */
  height: 44px;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 8px 25px rgba(0,0,0,.35);
}

/* text DARKHORSE */
#logo .brand-text{
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 22px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.75);
}

/* kalau header kecil pas scroll */
header.smaller #logo .brand-text{
  font-size: 20px;
}
header.smaller #logo .brand-icon{
  width: 40px;
  height: 40px;
}
/* ======================
   FUTURISTIC MOUSE GLOW
====================== */

.mouse-glow{
  position: fixed;
  width: 400px;
  height: 400px;
  pointer-events: none;
  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(124,246,255,.18) 0%,
    rgba(199,182,255,.10) 30%,
    transparent 70%
  );

  transform: translate(-50%, -50%);
  z-index: 9999;

  transition: opacity .3s ease;
  mix-blend-mode: screen;
}


/* ========= CNY CARD ========= */
/* === wrapper gambar (background jelas, ga diblur) === */
.cny-banner{
  position: relative;
  overflow: hidden;

  /* tinggi banner biar mirip contoh */
  min-height: 320px;

  /* background image */
  background: url("../images/bg-c.jpg") center/cover no-repeat;

  /* biar kebaca di dark scheme */
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  background-position: center 30%;
  /* padding dalam banner */
  padding: 26px 18px;
}

/* overlay tipis biar teks kebaca (bukan blur) */
.cny-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.15);

  pointer-events:none;
}
.cny-banner:hover{
    transform: scale(1.01);
    transition:.4s ease;
}

/* title nempel di atas gambar */
.cny-title{
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  font-weight: 800;
  font-size: clamp(22px, 2.8vw, 44px);
  margin-top: 40px;
  margin-bottom: 20px;
  text-shadow:
        0 2px 6px rgba(0,0,0,0.6),
        0 4px 12px rgba(0,0,0,0.4),
        0 0 20px rgba(0,0,0,0.25);

        transform: translateY(6px);
}

/* panel countdown di tengah, kayak contoh */
.cny-panel{
  position: relative;
  z-index: 2;
  width: min(760px, 92%);
  margin: 0 auto;
  padding: 14px 10px;

  display: flex;
  justify-content: space-between;
  gap: 0px;

  background: rgba(20, 22, 30, .68);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  box-shadow:
        0 10px 30px rgba(0,0,0,.45),
        inset 0 0 20px rgba(255,255,255,.05);
}

/* tiap item */
.cny-item{
  flex: 1;
  text-align: center;
  padding :0 5px;
}

.cny-num{
  font-size: clamp(38px, 5vw, 78px);
  font-weight: 300;
  line-height: 1;
  color: rgba(255,255,255,.95);
}

.cny-label{
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 2px;
  opacity: .75;
  color: rgba(255,255,255,.9);
}

.cny-accent .cny-num{
  color:#ff4d8d;
  font-weight: 400;
  text-shadow:
        0 0 10px rgba(255,80,140,.4),
        0 0 20px rgba(255,80,140,.25);
}

/* note bawah */
.cny-note{
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255,255,255,.75);
  letter-spacing: .4px;
}

.cny-bottom{
    margin-top:12px;
    display:flex;
    justify-content:center;
}

.cny-note{
    background: rgba(20,22,30,.7);
    padding:6px 14px;
    border-radius:8px;
    font-size:12px;
    backdrop-filter: blur(6px);
}

/* responsive */
@media (max-width: 640px){
  .cny-panel{
    flex-wrap: wrap;
    justify-content: center;
  }
  .cny-item{
    flex: 0 0 45%;
  }
}


/* ===== Zodiac Cinematic Section ===== */
.zod-wrap{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  min-height: 420px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.38);
  transform: translateZ(0);
}

/* background image layer */
.zod-bg{
  position: absolute;
  inset: -10%;
  background-size: cover;
  background-position: center;
  filter: saturate(1.08) contrast(1.06);
  transform: scale(1.08);
  will-change: transform;
}

/* dark overlay */
.zod-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.55) 55%, rgba(0,0,0,.72));
}

/* dotted vignette like contoh */
.zod-dots{
  position: absolute;
  inset: 0;
  opacity: .35;
  background-image: radial-gradient(rgba(255,255,255,.25) 1px, transparent 1px);
  background-size: 8px 8px;
  mask-image: radial-gradient(circle at 20% 55%, rgba(0,0,0,1) 20%, transparent 62%);
  pointer-events: none;
}

/* inner content */
.zod-inner{
  position: relative;
  z-index: 2;
  padding: 56px 44px;
}

@media (max-width: 768px){
  .zod-inner{ padding: 46px 18px; }
  .zod-wrap{ min-height: 520px; }
}

/* title/script style */
.zod-kicker{
    font-weight:900;
    
    /* BESARIN */
    font-size: clamp(38px, 4vw, 72px);

    color:#ff3b2f;

    letter-spacing:1px;

    margin-bottom:18px;

    /* CINEMATIC SHADOW */
    text-shadow:
        0 4px 12px rgba(0,0,0,.65),
        0 8px 30px rgba(0,0,0,.5),
        0 0 40px rgba(255,59,47,.25);
}


/* paragraphs */
.zod-p{
  color: rgba(255,255,255,.92);
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 16px 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* highlights */
.zod-hl{
    color:#ffb347;
    font-weight:800;

    text-shadow:
        0 0 8px rgba(255,179,71,.3),
        0 2px 12px rgba(0,0,0,.6);
}


/* big kanji */
.zod-kanji{
  font-size: clamp(92px, 10vw, 160px);
  font-weight: 900;
  color: #ff3b2f;
  line-height: 1;
  text-shadow:
    0 8px 24px rgba(0,0,0,.55),
    0 0 30px rgba(255,59,47,.22);
  transform-origin: center;
}

/* ===== Cinematic reveal (scroll) ===== */
.zod-el{
  opacity: 0;
  transform: translateY(22px);
  filter: blur(4px);
  transition: opacity .8s ease, transform .85s ease, filter .85s ease;
}

.zod-reveal.is-in .zod-el{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* stagger */
.zod-reveal.is-in .zod-kicker{ transition-delay: .05s; }
.zod-reveal.is-in .zod-p:nth-of-type(1){ transition-delay: .15s; }
.zod-reveal.is-in .zod-p:nth-of-type(2){ transition-delay: .28s; }
.zod-reveal.is-in .zod-kanji{ transition-delay: .20s; transform: translateY(0) scale(1); }

/* extra cinematic pop for kanji */
.zod-kanji{
  transform: translateY(18px) scale(.98);
}
.zod-reveal.is-in .zod-kanji{
  transform: translateY(0) scale(1);
}

/* subtle hover depth (optional) */
.zod-wrap:hover .zod-overlay{
  background: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.52) 55%, rgba(0,0,0,.70));
}


.social-card{
    border-radius:14px;
    overflow:hidden;
    background:#111;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
    transition:.3s;
}

.social-card:hover{
    transform:translateY(-5px);
}

.social-caption{
    padding:15px;
    font-size:18px;
    font-weight:600;
}

/* Biar 3D kerasa */
.cny-banner, .zod-wrap{
  position: relative;
  perspective: 900px;
}
/* ===== DRAGON LAYER (FINAL) ===== */
.zod-wrap{
  position:relative;
  overflow:hidden;         /* biar clip rapi */
  border-radius:14px;
  perspective: 900px;      /* 3D feel */
}

/* layer naga */
.dragon-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;               /* di atas bg, di bawah konten */
}

/* naga */
.dragon{
  position:absolute;

  /* Desktop position */
  right:-18%;
  top:auto;

  width:min(760px, 70vw);
  max-width: 820px;
  height:auto;

  opacity:0;

  transform:
    translate3d(240px, 30px, 0px)
    rotateY(-26deg)
    rotateZ(6deg)
    scale(.98);

  /* blend + glow */
  mix-blend-mode: screen;
  filter:
    saturate(1.15)
    contrast(1.06)
    drop-shadow(0 0 18px rgba(255,80,140,.32))
    drop-shadow(0 0 46px rgba(255,160,60,.18));

  transition:
    opacity .9s ease,
    transform 1.05s cubic-bezier(.2,.9,.2,1),
    filter .9s ease;
}

/* reveal */
.dragon-layer.is-in .dragon{
  opacity:.55;
  transform:
    translate3d(0px, 0px, 0px)
    rotateY(-12deg)
    rotateZ(2deg)
    scale(1);
}

/* konten di atas naga */
.zod-inner{ position:relative; z-index:5; }

/* kanji paling atas */
.zod-kanji{
  position:relative;
  z-index:6;
  text-shadow:
    0 8px 24px rgba(0,0,0,.55),
    0 0 30px rgba(255,59,47,.25);
}

/* vignette kanan biar naga nyatu & teks aman */
.zod-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 85% 60%,
    rgba(0,0,0,.10),
    rgba(0,0,0,.52) 55%,
    rgba(0,0,0,.72)
  );
  pointer-events:none;
  z-index:3;
}

/* ===== RESPONSIVE TUNING ===== */

/* SEMUA ukuran di bawah laptop → naga disembunyikan */
@media (max-width:1024px){

  .dragon-layer{
    display:none !important;
  }

}

/* =========================
   AI IMAGE GENERATOR (FIXED)
   ========================= */

/* Card */
#section-ai .ai-card{
  background: rgba(20,20,28,.55);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  height: 100%;
}

#section-ai .ai-title{
  margin: 0 0 14px;
  font-weight: 800;
}

/* Dropzone */
#section-ai .ai-drop{
  display:block;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  padding: 18px;
  cursor:pointer;
  transition: .25s ease;
}

#section-ai .ai-drop:hover{
  border-color: rgba(255,255,255,.35);
  transform: translateY(-1px);
}

#section-ai .ai-drop-inner{
  display:flex;
  align-items:center;
  gap:14px;
}

#section-ai .ai-drop-icon{
  width:44px;
  height:44px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 18px;
  flex: 0 0 auto;
}

#section-ai .ai-drop-text{
  line-height:1.35;
  color: rgba(255,255,255,.92);
}

#section-ai .ai-drop-sub{
  font-size: 12px;
  opacity: .65;
  margin-top: 2px;
}

/* SAME SIZE WRAPPER (Preview & Result) */
#section-ai .ai-preview-wrap,
#section-ai .ai-result-wrap{
  width: 100%;
  height: 520px;              /* <-- atur ini kalau mau lebih tinggi/rendah */
  margin-top: 14px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: #000;
  border: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* HANYA gambar preview/result yang dibuat absolute full */
#section-ai .ai-preview,
#section-ai .ai-result{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;          /* <-- FULL sampai bawah (crop cinematic) */
  display:none;               /* show via JS */
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* Empty states (tetap center) */
#section-ai .ai-preview-empty,
#section-ai .ai-result-empty{
  position:relative;
  z-index:2;
  font-size: 13px;
  opacity: .6;
  padding: 12px;
  text-align:center;
}

/* Actions */
#section-ai .ai-actions{
  display:flex;
  gap:10px;
  margin-top: 14px;
}

#section-ai .ai-hint{
  margin-top: 10px;
  font-size: 12px;
  opacity: .55;
}

/* Loader */
#section-ai .ai-loader{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  z-index:5;
}

#section-ai .ai-spinner{
  width:44px;
  height:44px;
  border-radius:50%;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: rgba(255,255,255,.85);
  animation: aiSpin 1s linear infinite;
}

@keyframes aiSpin{ to{ transform: rotate(360deg);} }

#section-ai .ai-loader-text{
  font-size: 13px;
  opacity: .85;
}

#section-ai .ai-result-actions{
  margin-top: 14px;
}

/* =========================
   LOADER
========================= */

#section-ai .ai-loader{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

#section-ai .ai-spinner{
  width:44px;
  height:44px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.2);
  border-top-color: rgba(255,255,255,.85);
  animation: aiSpin 1s linear infinite;
}

@keyframes aiSpin{
  to{ transform: rotate(360deg); }
}

#section-ai .ai-loader-text{
  font-size:13px;
  opacity:.85;
}

#section-ai .ai-result-actions{
  margin-top:14px;
}

/* =========================
   CINEMATIC OVERLAY (BONUS)
========================= */

#section-ai .ai-preview-wrap::after,
#section-ai .ai-result-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.35), transparent 60%);
  pointer-events:none;
}

/* =========================
   COPY TOKEN ADDRESS (UI)
   ========================= */
#section-contract .contract-card{
  position: relative;
  background: rgba(20,20,28,.55);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

#section-contract .contract-sub{
  opacity: .7;
  margin-top: 6px;
  font-size: 13px;
}

#section-contract .contract-box{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px 14px;
  overflow:hidden;
}

#section-contract .contract-left{
  min-width: 0;
}

#section-contract .contract-label{
  font-size: 12px;
  opacity: .65;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

#section-contract .contract-value{
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .3px;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#section-contract .contract-btn{
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: 12px;
}

#section-contract .contract-note{
  margin-top: 10px;
  font-size: 12px;
  opacity: .55;
}

/* Toast */
#section-contract .contract-toast{
  position:absolute;
  right: 18px;
  top: 18px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  font-size: 12px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events:none;
  transition: .25s ease;
}

#section-contract .contract-toast.show{
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px){
  #section-contract .contract-box{
    flex-direction: column;
    align-items: stretch;
  }
  #section-contract .contract-btn{
    width: 100%;
  }
  #section-contract .contract-value{
    white-space: normal;
    word-break: break-all;
  }
}

.gallery-card {
    overflow: hidden;
    border-radius: 12px;
}

.gallery-card img {
    width: 100%;
    height: 100%; /* bisa ubah sesuai selera */
    object-fit: cover;
    transition: 0.4s ease;
}

.gallery-card:hover img {
    transform: scale(1.05);
}