/* ============================================================
   Mierakigai — Creative ADS Landing Page
   Layout & typography live as inline styles in index.html
   (mirrors the design source 1:1). This file holds resets,
   interaction states, and the video-reel component.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: #050505;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--mkg-purple); color: #fff; }
a { color: var(--mkg-orange-bright); text-decoration: none; }
a:hover { color: var(--mkg-yellow); }
img { display: block; max-width: 100%; }
strong, b { font-weight: 700; }

/* ---- Shell ---- */
.page { background-attachment: fixed; }
.shell,
.shell > section,
.shell > header,
.shell > footer { max-width: 100%; }
.shell > section { min-width: 0; }
.shell p,
.shell h1,
.shell h2,
.shell h3 { overflow-wrap: break-word; }

/* ---- Interaction states ---- */
button { font-family: inherit; }
[data-scroll="kontak"] { transition: filter 160ms ease, background 160ms ease, transform 120ms ease; }
[data-scroll="kontak"]:hover { filter: brightness(1.08); }
[data-scroll="kontak"]:active { transform: scale(0.98); }
a[href*="wa.link"], a[href*="wa.me"] { transition: filter 160ms ease; }
a[href*="wa.link"]:hover, a[href*="wa.me"]:hover { filter: brightness(1.08); color: #fff; }

/* ---- Video reel (portfolio) ---- */
.reel { position: absolute; inset: 0; }
.media-slot {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 12px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 12px, transparent 12px 24px),
    var(--mkg-ink-2);
  color: rgba(255,255,255,0.55);
  font-weight: 600; font-size: 11px; line-height: 1.4;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.reel__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: var(--mkg-ink-2);
  opacity: 0; transition: opacity 200ms ease;
}
.reel__video.ready { opacity: 1; }
.reel__btn {
  position: absolute; top: 8px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid rgba(255,255,255,0.35); border-radius: 999px;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(6px);
  color: #fff; cursor: pointer;
}
.reel__btn:hover { background: rgba(0,0,0,0.72); }
.reel__btn--pp  { left: 8px; }
.reel__btn--snd { right: 8px; }

/* ---- Fluid mobile layout ----
   The source design uses a 468px artboard and several absolute,
   fixed-width elements. Keep that composition while making it fit
   narrower phones (320px–467px) without clipping horizontally. */
@media (max-width: 467px) {
  .page,
  .shell { width: 100% !important; max-width: 100% !important; }

  .shell > header,
  .shell > section,
  .shell > footer {
    width: 100% !important;
    padding-left: clamp(16px, 5.6vw, 22px) !important;
    padding-right: clamp(16px, 5.6vw, 22px) !important;
  }

  /* Hero copy and CTA */
  .shell > section:nth-of-type(1) > p {
    left: clamp(18px, 6.4vw, 30px) !important;
    width: calc(100% - clamp(36px, 12.8vw, 60px)) !important;
    height: auto !important;
  }
  .shell > section:nth-of-type(1) > h1 {
    font-size: clamp(31px, 8.1vw, 38px) !important;
  }
  .shell > section:nth-of-type(1) > button {
    left: clamp(18px, 5.6vw, 26px) !important;
    width: calc(100% - clamp(36px, 11.2vw, 52px)) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* "Gampang?!" section */
  .shell > section:nth-of-type(2) > h2 {
    left: 16px !important;
    width: calc(100% - 32px) !important;
    font-size: clamp(24px, 7.4vw, 29px) !important;
  }
  .shell > section:nth-of-type(2) > span {
    left: 16px !important;
    width: calc(100% - 32px) !important;
    font-size: clamp(50px, 15vw, 70px) !important;
  }
  .shell > section:nth-of-type(2) > div:nth-of-type(1) {
    left: clamp(14px, 4.7vw, 22px) !important;
    width: calc(100% - clamp(28px, 9.4vw, 44px)) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .shell > section:nth-of-type(2) > div:nth-of-type(1) > p {
    left: 96px !important;
    right: 14px !important;
    width: auto !important;
    height: auto !important;
    font-size: clamp(13px, 3.7vw, 16px) !important;
  }
  .shell > section:nth-of-type(2) > div:nth-of-type(2) {
    left: clamp(14px, 4.1vw, 19px) !important;
    width: calc(100% - clamp(28px, 8.2vw, 38px)) !important;
    height: auto !important;
  }
  .shell > section:nth-of-type(2) > div:nth-of-type(2) > div {
    padding: 16px !important;
    gap: 12px !important;
  }
  .shell > section:nth-of-type(2) > button {
    left: clamp(16px, 5.6vw, 26px) !important;
    width: calc(100% - clamp(32px, 11.2vw, 52px)) !important;
  }
}

/* ---- Desktop: center the mobile column on a dark canvas ---- */
@media (min-width: 560px) {
  .shell {
    margin: 32px auto !important;
    border-radius: 28px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
  }
}