:root{
  --bg:#0b0d12;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.62);
  --muted2:rgba(255,255,255,.42);
  --accent:#7dd3fc;
  --radius:18px;
  --max:1160px;
  --shadow:0 18px 60px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(1000px 500px at 20% 10%, rgba(125,211,252,.10), transparent 55%),
    radial-gradient(800px 400px at 90% 30%, rgba(167,139,250,.10), transparent 55%),
    radial-gradient(900px 550px at 50% 100%, rgba(34,197,94,.06), transparent 55%),
    var(--bg);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:24px}
.small{font-size:13px; color:var(--muted)}
.muted{color:var(--muted)}
.hr{height:1px; background:rgba(255,255,255,.07); margin:18px 0}

/* NAV */
.nav{
  position:sticky; top:0; z-index:999;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(11,13,18,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex; gap:10px; align-items:center; font-weight:800; letter-spacing:.3px}
.dot{
  width:10px; height:10px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 6px rgba(125,211,252,.15);
}
.links{display:flex; gap:16px; align-items:center; color:var(--muted); font-weight:700; font-size:14px}
.links a:hover{color:var(--text)}
.burger{
  display:none;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  font-weight:800;
  cursor:pointer;
}
.mobile{display:none}
@media(max-width:820px){
  .links{display:none}
  .burger{display:inline-flex}
  .mobile{display:none; padding:12px 0 18px}
  .mobile.open{display:block}
  .mobile a{
    display:block; padding:10px 0;
    color:var(--muted); font-weight:800;
    border-top:1px solid rgba(255,255,255,.07);
  }
  .mobile a:hover{color:var(--text)}
}

/* HERO */
.hero{padding:54px 0 20px}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:22px;
  align-items:center;
}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.pill{
  display:inline-flex; gap:8px; align-items:center;
  background:var(--panel);
  border:1px solid var(--border);
  padding:8px 12px;
  border-radius:999px;
  color:var(--muted);
  font-size:13px;
  width:fit-content;
}
h1{
  font-size:clamp(32px,4.6vw,56px);
  line-height:1.05;
  margin:14px 0 10px;
  letter-spacing:-.8px;
}
.lead{color:var(--muted); font-size:16px; line-height:1.7; max-width:60ch}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.btn{
  border:1px solid rgba(255,255,255,.14);
  background:var(--panel);
  padding:12px 16px;
  border-radius:14px;
  font-weight:900;
  font-size:14px;
  display:inline-flex; gap:10px; align-items:center;
  transition: transform .12s ease, background .12s ease;
  box-shadow:0 12px 35px rgba(0,0,0,.25);
}
.btn:hover{transform:translateY(-1px); background:var(--panel2)}
.btn.primary{
  border-color: rgba(125,211,252,.35);
  background: rgba(125,211,252,.14);
}
.btn.primary:hover{background: rgba(125,211,252,.20)}

/* LAYOUT */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.section{padding:26px 0}
.section-title{display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-bottom:14px}
.section-title h2{margin:0; font-size:18px}
.section-title p{margin:0; color:var(--muted2); font-size:13px}

.grid12{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
.col4{grid-column:span 4}
.col6{grid-column:span 6}
.col12{grid-column:span 12}
@media(max-width:980px){.col4{grid-column:span 6}}
@media(max-width:640px){.col4,.col6{grid-column:span 12}}

.meta{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; color:var(--muted); font-size:12px; font-weight:800}
.tag{border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); padding:6px 10px; border-radius:999px}

/* THUMB */
.thumb{
  width:100%;
  aspect-ratio: 16/9;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  overflow:hidden;
}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}

/* GALLERY */
.gallery{
  display:grid;
  grid-template-columns: repeat(12,1fr);
  gap:12px;
}
.g-item{grid-column: span 4}
@media(max-width:980px){.g-item{grid-column: span 6}}
@media(max-width:640px){.g-item{grid-column: span 12}}
.g-img{
  width:100%;
  aspect-ratio: 4/3;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  overflow:hidden;
}
.g-img img{width:100%; height:100%; object-fit:cover; display:block}

/* EMBEDS (Drive / video) */
.embed-center{display:flex; justify-content:center; width:100%}
.embed{
  width:100%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:#000;
  box-shadow: 0 0 1px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.15);
}
.ratio-16x9{aspect-ratio:16/9; max-width: 980px}
.ratio-9x16{aspect-ratio:9/16; max-width: 420px}
.embed iframe{width:100%; height:100%; border:0; display:block}

/* SOCIAL PROOF: LOGOS */
/* ===== LOGO WALL (FINAL) ===== */
.logo-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  padding: 8px 6px;
}

.logo-card{
  display:flex;
  align-items:center;
  justify-content:center;

  width: 210px;
  height: 86px;
  padding: 10px 12px;

  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.logo-card img{
  display:block;
  max-height: 74px;
  max-width: 190px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:none !important;
  opacity:1 !important;
}

/* desktop: lebih besar */
@media (min-width: 900px){
  .logo-strip{ gap: 8px; }
  .logo-card{ width: 160px; height: 72px; padding: 8px 10px; }
  .logo-card img{ max-height: 56px; max-width: 140px; }
  .logo-card.boost-115 img{ transform: scale(1.15); }
  .logo-card.boost-120 img{ transform: scale(1.20); }
  .logo-card.boost-135 img{ transform: scale(1.35); }

  .logo-card.boost-115 img,
  .logo-card.boost-120 img,
  .logo-card.boost-135 img{
    transform-origin: center;
  }
}

/* mobile: sedikit kecil tapi tetap rapi */
@media (max-width: 560px){
  .logo-strip{ gap: 8px; }
  .logo-card{ width: 160px; height: 72px; padding: 8px 10px; }
  .logo-card img{ max-height: 56px; max-width: 140px; }
}



/* TESTIMONIALS */
.testi-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.testi{
  grid-column: span 4;
  padding: 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 50px rgba(0,0,0,.30);
}
@media(max-width:980px){ .testi{ grid-column: span 6; } }
@media(max-width:640px){ .testi{ grid-column: span 12; } }

.testi p{
  margin: 0 0 12px;
  color: var(--text);
  line-height: 1.7;
}
.testi .who{
  display:flex;
  gap: 10px;
  align-items:center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(125,211,252,.18);
  border: 1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: var(--text);
}

/* FOOTER */
.footer{padding:26px 0 50px; color:var(--muted2); font-size:13px}

.testi-shot{
  grid-column: span 4;
  padding: 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 50px rgba(0,0,0,.30);
}
@media(max-width:980px){ .testi-shot{ grid-column: span 6; } }
@media(max-width:640px){ .testi-shot{ grid-column: span 12; } }

.testi-shot .shot{
  width:100%;
  aspect-ratio: 9/16;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.testi-shot .shot img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.testi-shot figcaption{
  margin-top: 12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.testi-shot .who{
  display:flex;
  gap:10px;
  align-items:center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.testi-shot .meta2{
  color: var(--muted2);
  font-size: 12px;
  font-weight: 800;
}
/* category chips */
.catbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 12px 0 16px;
}
.cat{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.cat:hover{ transform: translateY(-1px); }
.cat.is-active{
  background: rgba(120,220,255,.12);
  border-color: rgba(120,220,255,.35);
}

/* hide items */
.g-item{
  transition: opacity .18s ease, transform .18s ease;
}
.g-item.is-hidden{
  display:none;
}
.g-item.is-hidden{ display:none !important; }
.video-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(12, 1fr);
}

.v-item{ grid-column: span 6; }

/* showreel full width */
.v-item[data-cat*="showreel"]{ grid-column: span 12; }

@media (min-width: 1000px){
  .v-item{ grid-column: span 4; }
  .v-item[data-cat*="showreel"]{ grid-column: span 12; }
}

@media (max-width: 820px){
  .v-item{ grid-column: span 12; }
}

.v-item.is-hidden{ display:none !important; }

.hero-showreel-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}

.hero-video-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
  justify-content:flex-start;
  flex-wrap:wrap;
}

/* tombol kecil */
.btn.sm{
  padding:10px 12px;
  font-size:14px;
  border-radius:14px;
}

/* Mobile: tombol rata tengah */
@media (max-width: 900px){
  .hero-video-actions{ justify-content:center; }
  .hero-showreel-head{ justify-content:center; text-align:center; flex-direction:column; }
}
.hero-video-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* posisi tombol di bawah video */
.hero-video-actions.under{
  margin-top:12px;
  justify-content:flex-start;
}

/* tombol lebih kecil */
.btn.mini{
  padding:8px 10px;
  font-size:12.5px;
  border-radius:12px;
  line-height:1;
}

/* kalau masih kebesaran, turunin lagi */
@media (max-width: 900px){
  .btn.mini{
    padding:7px 9px;
    font-size:12px;
    border-radius:11px;
  }
}
.hero-video{ width:100%; }
/* showreel layout: paksa 1 kolom */
.showreel-video{
  display:block; /* jangan grid 2 kolom */
}

/* tombol pasti di bawah */
.hero-video-actions.under{
  display:flex;
  gap:10px;
  margin-top:12px;
  justify-content:flex-start;
}

/* fix kalau ada style lama yang bikin tombol melebar */
.icon-btn{
  width:40px;
  height:40px;
  min-width:40px;     /* penting: lawan min-width .btn */
  padding:0;          /* penting: lawan padding .btn */
  border-radius:14px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);

  text-decoration:none;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;

  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.icon-btn:hover{
  transform: translateY(-1px);
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.18);
}

@media (max-width: 900px){
  .icon-btn{ width:36px; height:36px; min-width:36px; border-radius:12px; }
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand-logo{
  width:34px;      /* atur ukuran logo */
  height:34px;
  object-fit:contain;
  display:block;
}

/* kalau kamu mau teks MONONATA tetap ada, biarkan */
/* kalau mau logo saja, hapus <span>MONONATA</span> di HTML */

/* NAV BRAND LOGO — force bigger */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand-logo{
  height: 34px !important;     /* coba 34 dulu */
  width: auto !important;
  max-width: 260px !important;
  object-fit: contain !important;
  display:block;
}

/* Desktop lebih besar */
@media (min-width: 900px){
  .brand-logo{
    height: 44px !important;   /* coba 44–52 */
    max-width: 340px !important;
  }
}
/* ===== FORCE NAV LOGO SUPER BIG (override semua rule lain) ===== */
.nav .brand{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}

/* kalau brand kamu masih ada teks, ini biar teksnya nggak ikut ganggu */
.nav .brand span{ display:none !important; }

.nav .brand .brand-logo{
  height: 56px !important;     /* MOBILE: gedein */
  width: auto !important;
  max-width: 420px !important;
  object-fit: contain !important;
  display:block !important;
}

/* DESKTOP: lebih gede */
@media (min-width: 900px){
  .nav .brand .brand-logo{
    height: 72px !important;   /* DESKTOP: super besar */
    max-width: 520px !important;
  }
}

/* kalau nav kamu keteken jadi sempit, tambah tinggi nav */
.nav .nav-inner{
  padding: 14px 0 !important;
  min-height: 86px !important; /* biar logo muat */
  align-items: center !important;
}
/* brand logo: no background */
.brand-logo{
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  display: block;
}
.showreel-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:10px;
  flex-wrap:nowrap;
}

.icon-btn{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.open-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  text-decoration:none;
  color: var(--text);
  padding:8px 10px;
  border-radius:12px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.open-link:hover{
  background: rgba(255,255,255,.07);
}

.wa-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 980px){
  .wa-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .wa-grid{ grid-template-columns: 1fr; }
}

/* kotak testimonialnya tetap */
/* === TESTIMONIALS (WhatsApp screenshot) === */

/* === WA TESTIMONIAL GRID === */
.wa-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.wa-card{
  height: 260px;              /* ukuran kotak tetap */
  border-radius: 22px;
  overflow: hidden;
  display: block;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}

/* penting: paksa gambar mengikuti kotak, bukan ukuran file asli */
.wa-card img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;        /* FIT (tidak kepotong) */
  object-position: center;
}

/* responsive */
@media (max-width: 900px){
  .wa-grid{ grid-template-columns: 1fr; }
  .wa-card{ height: 240px; }
}



/* responsive */
@media (max-width: 900px){
  .testi-grid{ grid-template-columns: 1fr; }
  .wa-card{ height: 240px; }
}
/* ===== PHOTO GALLERY FINAL (mixed portrait + landscape) ===== */

.gallery{
  display:grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap:12px;
  grid-auto-flow: dense; /* penting: isi celah kosong */
}

.g-item{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
  background: var(--panel);
}

/* ukuran kartu */
.g-item.landscape{
  grid-column: span 4;
  aspect-ratio: 16 / 10;
}

.g-item.portrait{
  grid-column: span 3;
  aspect-ratio: 3 / 4;
}

.g-img,
.g-img img{
  width:100%;
  height:100%;
  display:block;
}

.g-img img{
  object-fit:cover;
  object-position:center;
}

/* portrait jangan kepotong */
.g-item.portrait .g-img img{
  object-fit:contain;
  background:#0f1117;
}

/* tablet */
@media (max-width: 1024px){
  .g-item.landscape{ grid-column: span 6; }
  .g-item.portrait{ grid-column: span 4; }
}

/* mobile */
@media (max-width: 640px){
  .gallery{
    grid-template-columns: repeat(2, 1fr);
  }
  .g-item.landscape,
  .g-item.portrait{
    grid-column: span 2;
    aspect-ratio: 4 / 3;
  }
  .g-item.portrait .g-img img{
    object-fit:contain;
  }
}