/* =========================================================
   Zaimi — Final CSS (Desktop intact, Mobile refined)
   - Desktop: same visual design
   - Mobile (≤640px):
       • Desktop-style pill navbar fixed at the BOTTOM and SCROLLABLE (slide)
       • Content gap fix: left/right padding for sections
       • Projects header inline (“Projects” + “See all”)
       • Projects = compact horizontal slider (portrait 3:4 cards)
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --bg:#FFFFFF; --text:#0F1115; --muted:#D1D5DB; --chip:#3A3A3A; --surface:#EFEFEF;
  --accent:#FFE500; --accent-ink:#0F1115; --border:#E6E6E6;
  --radius:18px; --radius-lg:24px;
  --shadow-sm:0 2px 6px rgba(0,0,0,.08);
  --shadow-md:0 8px 18px rgba(0,0,0,.14);
  --shadow-lg:0 20px 40px rgba(0,0,0,.18);
  --container:1120px; --gutter:24px;
}

/* ---------- Resets ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  color:var(--text); background:var(--bg);
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}

/* ---------- Hero ---------- */
.hero{
  position:relative; z-index:0;
  min-height:70vh; display:flex; align-items:flex-end;
  overflow:hidden; border-bottom-left-radius:28px; border-bottom-right-radius:28px;
  box-shadow:0 14px 40px rgba(0,0,0,.18);
}
.hero::before{content:"";position:absolute;inset:0;background:url('hero.jpg') center/cover no-repeat;z-index:0}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.1) 100%),
  linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.55) 100%);z-index:1}
.hero-inner{position:relative;z-index:2;padding:120px var(--gutter) 72px;color:#fff;max-width:700px}
.h-eyebrow{font-weight:800;font-size:clamp(2.8rem,6vw,4.2rem);letter-spacing:.2px;margin-bottom:12px}
.h-sub{max-width:640px;color:var(--muted);font-weight:400;line-height:1.6;font-size:clamp(1rem,1.4vw,1.125rem)}

/* ---------- Pill Navbar (desktop/top) ---------- */
.pillbar-out{
  position:relative;
  margin-top:-56px;                 /* overlap hero’s bottom edge */
  display:flex; justify-content:center;
  z-index:10;
}
.bar.nav-bar{
  display:inline-flex; gap:18px; padding:14px 22px;
  background:rgba(40,40,40,.9); color:#fff; border-radius:32px;
  box-shadow:0 18px 36px rgba(0,0,0,.28);
  backdrop-filter:blur(18px) saturate(180%);
}
.pill{
  display:inline-flex; align-items:center;
  padding:12px 20px; border-radius:999px;
  background:rgba(255,255,255,.16);
  color:#fff; font-weight:700; letter-spacing:.2px;
  transition:.2s ease;
  white-space:nowrap;
}
.pill:hover{background:rgba(255,255,255,.25);transform:translateY(-1px)}
.pill.active{background:var(--accent); color:var(--accent-ink)}

/* Optional desktop floating copy on scroll */
.nav-bar.floating{
  position:fixed;
  top:max(12px, env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  z-index:10000;
}

/* ---------- Quote ---------- */
.quote{padding:80px 0;text-align:center}
.quote h3{
  font-size:clamp(2.2rem,7vw,3.8rem);
  font-weight:900; font-style:italic; line-height:1.15; margin-bottom:28px;
}

/* ---------- Language switch (shares pill style) ---------- */
.lang-switch{display:flex;justify-content:center}
.lang-switch .bar{
  display:inline-flex; gap:18px; padding:14px 22px;
  background:rgba(40,40,40,.9); color:#fff; border-radius:32px;
  box-shadow:0 18px 36px rgba(0,0,0,.28);
  backdrop-filter:blur(18px) saturate(180%);
}
.lang-switch .pill{
  display:inline-flex; align-items:center; padding:12px 20px; border-radius:999px;
  background:rgba(255,255,255,.16); color:#fff; font-weight:700; letter-spacing:.2px; transition:.2s ease;
}
.lang-switch .pill:hover{background:rgba(255,255,255,.25);transform:translateY(-1px)}
.lang-switch .pill.active{background:var(--accent); color:var(--accent-ink)}

/* ---------- What’s happening ---------- */
.section{padding:80px 0}
.section h2{font-size:clamp(2.6rem,6.5vw,3.6rem);margin-bottom:36px;font-weight:900;letter-spacing:-.3px}
.wh-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch}
.banner{position:relative;border-radius:20px;min-height:420px;overflow:hidden;box-shadow:var(--shadow-sm);background:#f3f3f3}
.banner .cover{width:100%;height:100%;object-fit:cover}
.now-badge{position:absolute;left:14px;top:14px;background:var(--accent);color:#111;font-weight:900;font-size:.82rem;padding:6px 12px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.wh-copy{display:flex;flex-direction:column;justify-content:center;padding:8px 6px;gap:12px}
.wh-copy .wh-title{font-size:clamp(2rem,3.4vw,2.4rem);font-weight:900;margin:0}
.wh-copy p{color:#3b3f46;line-height:1.75}

/* ---------- CTA ---------- */
.cta-right{
  margin-top:18px;background:#fff;color:#0F1115;border-radius:16px;padding:10px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);border:1px solid #E6E6E6;max-width:540px
}
.cta-right .left{display:flex;align-items:center;gap:12px;min-width:0}
.cta-right .thumb{width:44px;height:44px;border-radius:12px;object-fit:cover;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.cta-right .meta{display:flex;flex-direction:column;line-height:1.2}
.cta-right .meta strong{font-weight:800;font-size:1rem}
.cta-right .meta .sub{color:#6B7280;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.play-btn{
  background:linear-gradient(#FFF,#F7F7F7);color:#0F1115;font-weight:800;border-radius:999px;
  padding:10px 18px;border:1px solid #D1D5DB;box-shadow:0 1px 0 #FFF inset, 0 8px 16px rgba(0,0,0,.08)
}
.play-btn:hover{transform:translateY(-1px)}

.divider{height:1px;background:#D8D8D8;margin:40px 0;border-radius:1px}

/* ---------- Projects ---------- */
.projects-head{
  display:flex;
  justify-content:space-between;
  align-items:center;            /* inline like your screenshot */
  gap:12px;
  margin-bottom:20px;
}
.projects-head h2{
  margin:0;
  font-size:clamp(1.6rem,4.5vw,2rem);
  font-weight:900;
  letter-spacing:-.3px;
}
.seeall{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:8px 14px;
  background:var(--accent);
  color:#111;
  border:none;
  border-radius:999px;
  font-weight:900;
  font-size:.95rem;
  white-space:nowrap;
}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#1E1E1E;color:#fff;border-radius:16px;height:280px;padding:16px;display:flex;align-items:flex-end}
.card .label{font-size:1.2rem;font-weight:700;opacity:.95}

/* ---------- Tablet ---------- */
@media (max-width:980px){
  .pillbar-out{ margin-top:-44px; }
  .wh-grid{grid-template-columns:1fr}
  .cta-right{max-width:100%}
}

/* =========================================================
   MOBILE (≤640px)
   - Bottom navbar (SCROLLABLE)
   - Section content left/right padding
   - Projects compact slider + header inline
   ========================================================= */
@media (max-width:640px){

  /* ===== Content left/right gap fix ===== */
  .section,
  .wh-grid,
  .projects-head,
  .cards{
    padding-left:16px;
    padding-right:16px;
  }
  .section{ padding-top:56px; padding-bottom:56px; }
  .wh-grid{ gap:16px; }

  /* ===== Navbar: same look, fixed at bottom, SCROLLABLE ===== */
  .nav-bar.floating{ display:none !important; }
  .pillbar-out{ margin-top:0 !important; height:0; pointer-events:none; }

  .pillbar-out .bar.nav-bar{
    position:fixed;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    left:50%;
    transform:translateX(-50%);
    width:calc(100% - 40px);  /* side gap preserved */
    max-width:440px;
    z-index:9999;

    display:inline-flex; gap:18px; padding:14px 22px;
    border-radius:32px;
    background:rgba(40,40,40,.9); color:#fff;
    box-shadow:0 18px 36px rgba(0,0,0,.28);
    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px);

    overflow-x:auto;                  /* ✅ enable slide */
    -webkit-overflow-scrolling:touch; /* iOS momentum */
  scrollbar-width:none; /* Firefox */
    pointer-events:auto;
    touch-action:pan-x;
  }
  .pillbar-out .bar.nav-bar::-webkit-scrollbar{ display:none; }
  .bar.nav-bar::-webkit-scrollbar{ display:none; }

  .pillbar-out .bar.nav-bar .pill{
    display:inline-flex; align-items:center;
    padding:12px 20px; border-radius:999px;
    background:rgba(255,255,255,.16);
    color:#fff; font-weight:700; letter-spacing:.2px;
    transition:.2s ease; white-space:nowrap;
    flex:0 0 auto;                     /* don’t stretch */
  }
  .pillbar-out .bar.nav-bar .pill:hover{background:rgba(255,255,255,.25);transform:translateY(-1px)}
  .pillbar-out .bar.nav-bar .pill.active{background:var(--accent); color:var(--accent-ink)}
  body{ padding-bottom:96px; }          /* keep content above nav */

  /* ===== Projects → compact horizontal slider (portrait cards) ===== */
  .cards{
    display:flex;                 /* from grid → row */
    gap:8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scroll-padding-left:16px;
    padding-bottom:12px;
    margin:0;                     /* keep side gap from padding */
    touch-action:pan-x;
    scrollbar-width:none;
  }
  .cards::-webkit-scrollbar{display:none;}
  .cards::-webkit-scrollbar{display:none;}
  .cards { scrollbar-width: none; }
  .card{
    flex:0 0 46%;                 /* ~2 cards visible */
    max-width:220px;
    aspect-ratio:3 / 4;
    height:auto;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    border-radius:14px;
  }

  /* Projects header tight */
  .projects-head{ margin-bottom:14px; }
  .seeall{ padding:8px 14px; font-size:.9rem; }
}

/* ---------- Extra-small phones (≤480px) ---------- */
@media (max-width:480px){
  .pillbar-out .bar.nav-bar{ width:calc(100% - 32px); } /* keep side gap */
  .card{ flex-basis:52%; max-width:200px; aspect-ratio:3 / 4; }
}

/* =========================================
   FIX GAP BETWEEN SECTIONS
   ========================================= */
@media (max-width:640px){
  /* Kurangkan padding section di mobile */
  .section{ padding-top:56px; padding-bottom:40px; }

  /* H2 margin bawah lebih kecil */
  .section h2{ margin-bottom:20px; }

  /* Projects header lebih rapat */
  .projects-head{ margin-bottom:12px; }
}

/* =========================================
   FIX: Jarak besar antara sections (web & mobile)
   ========================================= */

/* 1) Standardize spacing untuk semua skrin */
.section{ 
  padding-top: 64px; 
  padding-bottom: 48px; 
}

/* 2) Bila ada .section berturut-turut, kecilkan padding-top section kedua */
.section + .section{
  padding-top: 16px;   /* <-- KUNCI: kecilkan ruang di atas section kedua */
}

/* 3) Ketatkan heading dan elemen dalam section supaya tak tambah jurang */
.section h2{ 
  margin-bottom: 16px; 
}
.wh-grid{ 
  margin-bottom: 0; 
}

/* 4) Projects header — pastikan tak tolak ke bawah */
.projects-head{
  margin-top: 0;
  margin-bottom: 14px;
}

/* 5) Jika ada .divider digunakan di antara sections, kecilkan juga */
.divider{ 
  margin: 24px 0; 
}
.section .divider:last-child{ 
  margin-bottom: 0; 
}

/* =========================================
   FOOTER — Premium Glassy Style
   ========================================= */
.footer{
  position: relative;
  isolation: isolate;                    /* allow overlay */
  background: #0E0F13;
  color: #E8EAED;
  margin-top: 72px;
  padding: 56px 24px 36px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 400px at 20% -10%, rgba(255,229,0,0.10), transparent 60%),
    radial-gradient(900px 300px at 90% -10%, rgba(255,255,255,0.06), transparent 55%);
  pointer-events:none;
  z-index:0;
}
.footer-inner{
  position: relative; z-index:1;
  max-width: 1120px; margin:0 auto;
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr 1.2fr;  /* brand | links | links | newsletter */
  gap: 28px;
}

/* Brand / blurb */
.footer-brand{
  display:flex; flex-direction:column; gap:12px;
}
.footer-logo{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:900; letter-spacing:.2px; font-size:1.1rem;
  color:#fff;
}
.footer-logo .dot{ width:10px; height:10px; border-radius:999px; background: var(--accent); box-shadow:0 0 12px rgba(255,229,0,.6); }
.footer-blurb{ color:#AEB3BC; line-height:1.7; font-size:.95rem; }

/* Columns */
.footer-col h4{
  font-size:.95rem; font-weight:800; color:#fff; margin-bottom:12px;
  letter-spacing:.2px;
}
.footer-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.footer-col a{
  color:#C9CED6; font-size:.95rem; text-decoration:none; transition:color .2s ease;
}
.footer-col a:hover{ color: var(--accent); }

/* Newsletter */
.footer-news{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.16) inset;
}
.footer-news h5{
  margin:0; font-size:.95rem; font-weight:800; color:#fff;
}
.footer-news p{
  margin:0; color:#AEB3BC; font-size:.9rem; line-height:1.5;
}
.footer-form{
  display:flex; gap:8px; margin-top:4px;
}
.footer-input{
  flex:1; height:42px; padding:0 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff; outline:none;
}
.footer-input::placeholder{ color:#9BA1AA; }
.footer-btn{
  flex:0 0 auto; height:42px; padding:0 14px; border-radius:999px;
  background: var(--accent); color: var(--accent-ink);
  border:none; font-weight:800; cursor:pointer;
  box-shadow: 0 6px 18px rgba(255,229,0,.25);
  transition: transform .15s ease;
}
.footer-btn:active{ transform: translateY(1px); }

/* Socials */
.footer-social{
  display:flex; gap:10px; margin-top:8px;
}
.footer-social a{
  width:36px; height:36px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#111; background:#fff;
  border:1px solid #E6E6E6;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.footer-social a:hover{ background: var(--accent); color: var(--accent-ink); transform: translateY(-1px); }

/* Bottom strip */
.footer-bottom{
  position: relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; max-width:1120px; margin: 24px auto 0;
  padding-top: 16px;
  border-top:1px solid rgba(255,255,255,.06);
  color:#AEB3BC; font-size:.9rem;
}
.footer-legal{
  display:flex; gap:14px; flex-wrap:wrap;
}
.footer-legal a{ color:#C9CED6; text-decoration:none; }
.footer-legal a:hover{ color: var(--accent); }

/* Mobile & small tablets */
@media (max-width:980px){
  .footer-inner{
    grid-template-columns: 1fr 1fr;   /* 2 kolum */
  }
  .footer-news{ grid-column: 1 / -1; } /* newsletter penuh lebar */
}
@media (max-width:640px){
  .footer{ padding: 44px 16px 28px; margin-top: 56px; }
  .footer-inner{
    grid-template-columns: 1fr;       /* stack */
    gap: 20px;
  }
  .footer-news{ padding: 12px; }
  .footer-form{ flex-direction:row; } /* kekal row, muat phone */
  .footer-input{ height:40px; }
  .footer-btn{ height:40px; padding:0 12px; }
  .footer-bottom{
    flex-direction:column; gap:8px; text-align:center;
  }
}