:root{
  --wrap: 1160px;
  --pad: clamp(16px, 4vw, 40px);
  --safeTop: clamp(48px, 8vw, 84px);   /* jarak dari atas agar logo gak nabrak */
  --gap: clamp(12px, 2.4vw, 24px);
  --ff-display: 'Darling Coffee', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  --ff-body:    system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';

}

@font-face{
  font-family: 'Darling Coffee';
  src:
    url(assets/fonts/Darling-Coffee.woff2) format('woff2'),           /* optional */
    url(../font/Darling\ Coffee.ttf) format('truetype');        /* current file */
  font-weight: 400;            /* sesuaikan jika punya variasi weight */
  font-style: normal;          /* sesuaikan jika ada italic */
  font-display: swap;          /* render cepat pakai fallback lalu ganti */
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: var(--ff-body);
}
.wrap{ max-width: var(--wrap); margin-inline:auto; padding-inline: var(--pad); }

/* ===================== HERO ===================== */


.hero { padding: clamp(24px,5vw,40px) 0; }
.hero-stage{
  max-width: 1160px;
  margin-inline:auto;
  padding-inline: clamp(16px,4vw,40px);
  min-height: clamp(680px, 80vh, 900px);
  position: relative;
}

/* --- LAYER & Z-INDEX PLAN --- */
/* z1: logo bg, z2: dekor kecil, z3: konten pusat */
.hero-logo{
  position:absolute; z-index:1; left:50%; transform:translateX(-50%);
  top: clamp(48px, 7vw, 84px);
  width:min(1100px,95%); height:auto; pointer-events:none;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.15));
}

/* DEKOR kecil (absolute) */
.hero-decos{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.hero-deco{
  position:absolute;
  /* posisi manual: left/top dari CSS variables */
  left: var(--x, 0);
  top:  var(--y, 0);
  width: var(--w, 160px);
  height: auto;
}

/* KONTEN PUSAT (flow—tidak absolute supaya tidak bertabrakan) */
.hero-center{
  position:relative; z-index:3;
  max-width: 820px; margin: 0 auto;
  padding-top: clamp(160px, 22vw, 240px);
  padding-bottom: clamp(140px, 18vw, 220px);
  display:flex; flex-direction:column; align-items:center; gap: clamp(12px,2.4vw,24px);
  text-align:center;
}
.hero-main{ 
    width:min(620px,100%); 
    height:auto; 
    position: relative;
    right:30px ;
    bottom: 150px;
    filter:drop-shadow(0 24px 50px rgba(0,0,0,.18)); 
}
.hero-title{ width:min(700px,92%); height:auto; }
.cta-img{ height:48px; width:auto; }
.hero-desc,
.gallery .section-title,
.join .section-title {
  font-family: var(--ff-display);
}
.hero-cta{
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;            
}



/* Force the 2nd item (JOIN) to move to the bottom row and keep it centered */
.hero-cta > *:nth-child(2){
  flex-basis: 100%;           
  display: flex;
  justify-content: center;
  margin-top: 6px;            
}

/* CTA image size (optional, customize) */
.cta-img{
  height:auto;
  width: auto;
}

@media (max-width: 480px){
  .cta-img{ height: 44px; }
}

/* micro-animasi */
@keyframes bob { 0%{transform:translateY(0)} 50%{transform:translateY(-8px)} 100%{transform:translateY(0)} }
.floaty{ animation: bob 5s ease-in-out infinite; }
@keyframes wiggleK { 0%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-6px) rotate(-2deg)} 100%{transform:translateY(0) rotate(0)} }
.wiggle{ animation: wiggleK 4.5s ease-in-out infinite; }
.wiggle-slow{ animation: wiggleK 6.5s ease-in-out infinite; }

/* ===================== GALLERY ===================== */
.gallery{ padding-block: 60px; background: linear-gradient(#69e687, #bff4b6); }
.title-inline{ width: min(460px, 86%); height:auto; }
.gallery-frame{
  background: rgba(0,0,0,.12);
  border-radius: 18px;
  padding: clamp(14px, 2vw, 22px);
  max-width: var(--wrap);
  margin-inline: auto;
}
.meme{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 14px;
  background: #1f7a45;
}
.ph{ background: repeating-linear-gradient(45deg,#e9ecef,#e9ecef 12px,#dde3ea 12px,#dde3ea 24px); }

/* ===================== JOIN ===================== */
.join{ padding-block: 48px; background: linear-gradient(#bff4b6, #dff8d9); }
.social-img{ width: 56px; margin: 0 14px; display:inline-block; position: relative; top: 30px; }

/* ===================== BREAKPOINTS ===================== */
@media (max-width: 992px){
  .hero-stage{ min-height: 780px; }
}
@media (max-width: 768px){
  :root{ --safeTop: clamp(40px, 7vw, 72px); }
  .hero-center{ max-width: 680px; }
  .hero-main{ width: min(520px, 86%); }
}
@media (max-width: 480px){
  .hero-stage{ min-height: 740px; }
  .hero-cta .cta-img{ height: 44px; }
}

/* micro animations (opsional) */
@keyframes bob { 0%{transform:translateY(0)} 50%{transform:translateY(-8px)} 100%{transform:translateY(0)} }
.floaty{ animation:bob 5s ease-in-out infinite; }
@keyframes wiggleK { 0%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-6px) rotate(-2deg)} 100%{transform:translateY(0) rotate(0)} }
.wiggle{ animation: wiggleK 4.5s ease-in-out infinite; }
.wiggle-slow{ animation: wiggleK 6.5s ease-in-out infinite; }

/* ===== Responsive overrides for manual positions ===== */
@media (max-width: 768px){
  /* tinggal override variable-nya per element pakai :nth-child atau id/kelas khusus */
  .hero-deco:nth-child(1){ --x: 3%;  --y: 120px; --w: 120px; width: 50px; }
  .hero-deco:nth-child(2){ --x: 78%; --y: 130px; --w: 150px; width: 50px; }
  .hero-deco:nth-child(3){ --x: 6%;  --y: 66vh;  --w: 180px; width: 50px; }
  .hero-deco:nth-child(4){ --x: 74%; --y: 72vh;  --w: 220px; width: 50px;}
}
@media (max-width: 480px){
  .cta-img{ height:44px; }
}

/* image button (reset) */
.cta-btn{
  border: 0;
  background: transparent;
  padding: 0;
  line-height: 0;
  cursor: pointer;
}
.cta-btn:focus-visible{
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  border-radius: 10px;
}

.copy-toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(8px);
  background:rgba(0,0,0,.78); color:#fff; padding:10px 14px; border-radius:10px; font-size:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.22); opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease; z-index:9999;
}
.copy-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* 🔁 Fade kecil saat swap asset img via data-src-{mode} */
img[data-swap-active]{ opacity: 0; transition: opacity .25s ease; }
img[data-swap-loaded]{ opacity: 1; }

/* WHITE/PURPLE MODE */
html[data-bloo="white"] body{
  background: url(../img/background-white.png);
}
html[data-bloo="white"] .gallery{
  background: transparent;
}
html[data-bloo="white"] .join{
  background: transparent;
}
/* Kontras teks hero agar tetep kebaca di ungu → biru muda */
html[data-bloo="white"] .hero,
html[data-bloo="white"] .hero-desc{ color: #ffffff; font-size: 20px; }

/* RED/ORANGE MODE */
html[data-bloo="red"] body{
  background: url(../img/background-red.png);
}
html[data-bloo="red"] .gallery{
  background: transparent;
}
html[data-bloo="red"] .join{
  background: transparent;
}
/* Hero text contrast for orange/peach */
html[data-bloo="red"] .hero,
html[data-bloo="red"] .hero-desc{ color: #3c130a; font-size: 20px; }

/* GREEN MODE */
html[data-bloo="green"] body{
  background: url(../img/background-green.png);
}
html[data-bloo="green"] .gallery{
  background: transparent;
}
html[data-bloo="green"] .join{
  background: transparent;
}
/* Green hero text contrast */
html[data-bloo="green"] .hero,
html[data-bloo="green"] .hero-desc{ color: #0d3a1f; font-size: 20px; }

/* ———————————————————————————————————————————————
OPTIONAL (if you use floating mode buttons):
light styling to keep it consistent with your style
——————————————————————————————————————————————— */
.mode-switcher{
  position: fixed; 
  right: 16px; 
  bottom: 16px; 
  z-index: 1000;
  display: flex; 
  gap: 0px;
}

.mode-switcher .mode-btn:hover{ transform: translateY(-2px); }
.mode-switcher .mode-btn.active{ outline: 3px solid transparent; }

.mode-btn {
  width: 86px;
  height: 86px;
  border: none;
  border-radius: 14px;
  background: transparent;
  box-shadow: transparent;
  padding: 6px;
  cursor: pointer;
  transition: transform .15s ease, background .25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* efek hover dan active */
.mode-btn:hover { transform: translateY(-3px); }
.mode-btn.active { outline: 3px solid rgba(255,255,255,.35); }

/* gambar di dalam tombol */
.mode-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.2));
}

/* Sesuaikan warna border per mode aktif biar nyatu */
html[data-bloo="white"] .mode-btn.active { outline-color: rgba(180,210,255,.6); }
html[data-bloo="green"] .mode-btn.active { outline-color: rgba(60,255,150,.5); }
html[data-bloo="red"]   .mode-btn.active { outline-color: rgba(255,120,90,.5); }

.bloo-row{ display:none; }
html[data-bloo="white"] .bloo-row[data-bloo-show="white"]{ display:flex; }
html[data-bloo="green"] .bloo-row[data-bloo-show="green"]{ display:flex; }
html[data-bloo="red"]   .bloo-row[data-bloo-show="red"]  { display:flex; }

/* ===== BLOOVERSE LOADER (VIDEO) ===== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  display: grid;
  place-items: center;
  transition: opacity 1s ease, visibility 1s ease;
}
.loader.hide {
  opacity: 0;
  visibility: hidden;
}

.loader-video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

.loader-skip {
  font-family: 'Darling Coffee';
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 8px 14px;
  font-size: 18px;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(0, 0, 0, 0);
  border-radius: 8px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform .15s ease, background .2s ease, box-shadow .3s ease;
  
  /* ======== TEXT GRADIENT ======== */
  background-image: linear-gradient(90deg, #28ee81 0%, #6bff9f 50%, #28ee81 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}

/* hover efek: teks makin terang + glow lembut */
.loader-skip:hover {
  transform: translateY(-2px);
  background-image: linear-gradient(90deg, #5bffa8 0%, #aaffcc 50%, #5bffa8 100%);
  box-shadow: 0 0 14px rgba(40, 238, 129, 0.35);
}

/* ========== CONTRACT ADDRESS BOX ========== */
.ca-box {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  background: rgba(255, 255, 255, 0);
  border: 5px solid rgba(255, 255, 255, 0.233);
  color: #fff;
  align-self: center;
  border-radius: 10px;
  padding: 8px 12px;
  margin-top: 10px;
  font-family: 'Darling Coffee', sans-serif;
  font-size: 15px;
  opacity: 1; 
}

.hero-cta > *:nth-child(2).ca-box{
  flex-basis: auto;
  display: inline-flex;
  justify-content: initial;
}

.ca-box.show {
  opacity: 1;
  transform: translateY(0);
}

.ca-display {
  font-weight: 500;
  letter-spacing: .5px;
  color: #ffffff;
  font-family: 'Darling Coffee';
}

.ca-copy {
  font-size: 13px;
  padding: 4px 8px;
  background: linear-gradient(90deg, #ffffff, #ffffff);
  border: none;
  border-radius: 6px;
  color: #0000007c;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}
.ca-copy:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(40,238,129,.4);
}

.hero-cta > .cta-join{
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

/* =========================================================
   RESPONSIVE ENHANCEMENTS (append-only, safe overrides)
   ========================================================= */

/* === ≤ 1200px (laptop kecil) === */
@media (max-width: 1200px){
  .hero-stage{
    min-height: 760px;
  }
  .hero-main{
    width: min(560px, 90%);
    right: 0;                 /* jangan lari ke kanan */
    bottom: 120px;            /* kurangi offset biar gak kepotong */
  }
  .hero-title{ width: min(640px, 10%); }
}

/* === ≤ 992px (tablet landscape/portrait) === */
@media (max-width: 992px){
  .hero-stage{ min-height: 720px; }
  .hero-logo{
    width: min(920px, 92vw);
    top: clamp(36px, 6vw, 64px);
  }
  .hero-center{
    max-width: 720px;
    padding-top: clamp(120px, 20vw, 200px);
    padding-bottom: clamp(120px, 16vw, 200px);
    gap: clamp(10px, 2vw, 18px);
  }
  .hero-main{
    width: min(520px, 88%);
    right: 0;
    bottom: 100px;
  }
  .hero-desc{ font-size: clamp(14px, 1.9vw, 16px); }
  .cta-img{ height: auto; max-width: clamp(130px, 26vw, 200px); }
  .social-img{ width: 52px; top: 20px; margin: 0 12px; }
  .mode-btn{ width: 72px; height: 72px; }
  .gallery{ padding-block: 48px; }
  .gallery-frame{ padding: clamp(12px, 2.2vw, 20px); }
}

/* === ≤ 768px (tablet kecil / hp besar) === */
@media (max-width: 768px){
  :root{ --safeTop: clamp(32px, 6vw, 56px); }

  .hero-stage{ min-height: 680px; }
  .hero-logo{
    width: min(780px, 94vw);
    top: clamp(24px, 5.5vw, 48px);
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.12));
  }
  .hero-center{
    max-width: 640px;
    padding-top: clamp(100px, 18vw, 160px);
    padding-bottom: clamp(100px, 16vw, 160px);
  }
  .hero-main{
    width: min(480px, 86%);
    bottom: 72px;            /* naikkan supaya tidak menutupi CTA */
  }
  .hero-title{ width: min(560px, 88%); }
  .hero-desc{ padding-inline: 8px; }

  /* Dekor manual: lebih kecil dan lebih dekat */
  .hero-deco{ width: calc(var(--w,160px) * .75); }
  .hero-deco:nth-child(1){ --x: 4%;  --y: 110px; }
  .hero-deco:nth-child(2){ --x: 78%; --y: 120px; }
  .hero-deco:nth-child(3){ --x: 6%;  --y: 64vh;  }
  .hero-deco:nth-child(4){ --x: 74%; --y: 70vh;  }

  .cta-img{ max-width: clamp(120px, 30vw, 180px); }
  .ca-box{ font-size: 14px; padding: 6px 10px; border-width: 3px; }
  .ca-display{ padding: 4px 8px; border-width: 2px; }

  .social-img{ width: 48px; top: 16px; margin: 0 10px; }
  .mode-btn{ width: 64px; height: 64px; }

  .meme{ border-radius: 12px; }
  .title-inline{ width: min(380px, 78%); }
}

/* === ≤ 576px (hp umum) === */
@media (max-width: 576px){
  .hero-stage{ min-height: 640px; }
  .hero-logo{
    width: 92vw;
    top: clamp(18px, 5vw, 36px);
  }
  .hero-center{
    max-width: 520px;
    padding-top: clamp(84px, 18vw, 140px);
    padding-bottom: clamp(84px, 15vw, 140px);
    gap: 10px;
  }
  .hero-main{
    width: 82vw;
    bottom: 56px;
  }
  .hero-title{ width: 86vw; }
  .hero-desc{ font-size: 14px; }

  .hero-cta{ gap: 10px; }
  .cta-img{ max-width: clamp(120px, 46vw, 160px); }
  .cta-join .cta-img{ max-width: clamp(140px, 50vw, 200px); }

  .ca-box{ gap: 6px; border-width: 3px; }
  .ca-copy{ padding: 4px 8px; font-size: 12px; }

  .gallery{ padding-block: 44px; }
  .gallery-frame{ padding: clamp(10px, 3vw, 16px); border-radius: 16px; }
  .meme{ aspect-ratio: 4/5; } /* sedikit portrait biar gak terlalu kotak di hp */

  .join{ padding-block: 40px; }
  .social-img{ width: 42px; top: 12px; margin: 0 8px; }

  .mode-switcher{ right: 10px; bottom: 12px; gap: 6px; }
  .mode-btn{ width: 56px; height: 56px; }
  .loader-skip{ right: 12px; bottom: 12px; font-size: 16px; padding: 6px 10px; }
}

/* === ≤ 420px (hp kecil) === */
@media (max-width: 420px){
  .hero-stage{ min-height: 600px; }
  .hero-main{ width: 86vw; bottom: 46px; }
  .hero-title{ width: 90vw; }
  .hero-desc{ font-size: 13px; }

  .cta-img{ max-width: 52vw; }
  .ca-box{ font-size: 13px; padding: 6px 8px; }
  .ca-display{ padding: 4px 6px; border-radius: 6px; }
  .ca-copy{ padding: 3px 7px; font-size: 12px; }

  .title-inline{ width: 82vw; }
  .gallery-frame{ padding: 12px; border-radius: 14px; }
  .meme{ border-radius: 12px; }

  .social-img{ width: 38px; top: 8px; margin: 0 6px; }
  .mode-btn{ width: 50px; height: 50px; }
}

/* === Height-based (layar pendek, misal landscape) === */
@media (max-height: 680px){
  .hero-center{ padding-top: 96px; padding-bottom: 96px; }
  .hero-main{ bottom: 36px; }
}