/* =====================================================================
   CZsLazy — Bundling Pricelist (phone layout)
   Same locked-frame system as the links page: portrait, logo, title and
   the contact banner stay put; only the list of cards scrolls, behind the
   banner, fading out. On desktop it stays a phone-width column over a
   blurred hero backdrop. Each bundle is an expandable card.
   ===================================================================== */

@font-face{
  font-family: "Afacad";
  src: url("../assets/fonts/afacad-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg: #050606;
  --fg: #fff;
  --muted: #a0a0a0;
  --label: #6e6e6e;

  --head: #1a1b1b;                 /* card header */
  --head-hover: #202121;
  --body: #0c0c0c;                 /* expanded part of a card */
  --ring: #4d4d4d;                 /* card borders */

  --amber: #d99b4a;
  --amber-bg: #312d17;
  --amber-text: #ac9575;
  --amber-strong: #dcc8ae;

  /* Widest the frame gets. Phones fill the screen; desktop keeps this width. */
  --frame-max: 430px;
  --frame-w: min(100vw, var(--frame-max));
  --banner-h: calc(var(--frame-w) / 4);       /* banner image is 4:1 */
  --card-gap: 8px;                             /* space between the plan cards */
  --note-gap: 24px;                            /* space between the note and the first card */
  --card-pad-x: 24px;                          /* inner left/right padding of the cards */
  --head-pad-y: 18px;                          /* inner top/bottom padding of a card header (the collapsed state) */
  --sticky-h: 111.3px;                         /* height of the pinned headline */

  --ease: cubic-bezier(.45, .05, .2, 1);       /* gentle start, soft landing */
  --dur: .7s;                                  /* expand / collapse and hover speed */

  /* Desktop backdrop: the hero still, blurred, with a 4% white wash */
  --backdrop-blur: 10px;
  --backdrop-wash: rgba(255, 255, 255, .04);
}

*{ box-sizing: border-box; }

html,
body{
  height: 100%;
  margin: 0;
  background: var(--bg);
  overflow: hidden;                            /* the page itself never scrolls */
  overscroll-behavior: none;
}

body{
  font-family: "Afacad", system-ui, sans-serif;
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Desktop backdrop ---------- */
.backdrop{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg);
  pointer-events: none;
}

.backdrop::before{
  content: "";
  position: absolute;
  inset: -120px;
  background: url("../assets/images/links-bg.webp") center / cover no-repeat;
  filter: blur(var(--backdrop-blur));
}

.backdrop::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--backdrop-wash);
}

@media (min-width: 480px){
  .backdrop{ display: block; }
}

/* ---------- Locked frame ---------- */
.frame{
  position: fixed;
  inset: 0;
  margin-inline: auto;
  width: var(--frame-w);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}

.portrait{
  position: absolute;
  top: 0;
  left: 50%;
  height: 328px;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
}

/* ---------- Logo + title ---------- */
.top-space{                         /* logo area; scrolls away */
  position: relative;
  flex: none;
  height: 159.2px;
}

.headline{                          /* pinned to the top while the cards scroll underneath */
  position: sticky;
  top: 0;
  z-index: 4;
  flex: none;
  padding: 12px 0 16.4px;
  text-align: center;
}

.headline::before{                  /* soft dark backing, shown only once the headline is pinned */
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: -14.5px;
  right: -14.5px;
  bottom: -22px;
  background: linear-gradient(180deg, rgba(5,6,6,.97) 0, rgba(5,6,6,.94) 70%, rgba(5,6,6,.9) 100%);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);          /* blurs the cards passing underneath */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 74%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 74%, transparent 100%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.headline.is-stuck::before{ opacity: 1; }

.mark{
  position: absolute;
  top: 12px;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  fill: #fff;
}

.eyebrow{
  margin: 0;
  text-align: center;
  font-size: 20px;
  line-height: 24.4px;
  font-weight: 400;
  letter-spacing: .01em;
}

.title{
  margin: 7.3px 0 0;
  text-align: center;
  font-size: 42px;
  line-height: 51.2px;
  font-weight: 470;
  letter-spacing: -.043em;
  padding-right: .043em;
}

/* ---------- Scrolling list ---------- */
.scroll{
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding: calc(var(--sticky-h) + 8px) 0 calc(var(--banner-h) + 24px);

  /* the whole column (headline included) scrolls; it dissolves before it reaches the banner */
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0,
    #000 calc(100% - var(--banner-h) - 40px),
    transparent calc(100% - var(--banner-h) + 4px));
          mask-image: linear-gradient(to bottom,
    #000 0,
    #000 calc(100% - var(--banner-h) - 40px),
    transparent calc(100% - var(--banner-h) + 4px));
}

.scroll::-webkit-scrollbar{ display: none; }

.stack{
  display: flex;
  flex-direction: column;
  padding: 0 14.5px calc(var(--banner-h) + 54px);
}

/* ---------- Shared button reset for the expandable headers ---------- */
.acc-trigger{
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.acc-trigger:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Expand / collapse: the panel animates its height from 0 to its content.
   Without JavaScript nothing is collapsed, so everything stays readable. */
.acc-panel{
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur) var(--ease);
}

.acc-panel-inner{
  min-height: 0;
  overflow: hidden;
  transition: visibility 0s;
}

.js .acc:not(.is-open) .acc-panel{ grid-template-rows: 0fr; }

.js .acc:not(.is-open) .acc-panel-inner{
  visibility: hidden;
  transition: visibility 0s var(--dur);       /* hide from keyboard/screen readers only once closed */
}

.acc-chevron{
  flex: none;
  fill: var(--muted);
  transition: transform var(--dur) var(--ease);
}

.js .acc:not(.is-open) .acc-chevron{ transform: rotate(180deg); }

/* ---------- Important-info note ---------- */
.note{
  margin-bottom: var(--note-gap);
  border-radius: 12px;
  background: var(--amber-bg);
}

.note-heading{ margin: 0; font: inherit; }

.note-head{
  display: flex;
  align-items: center;
  gap: 12.9px;
  width: 100%;
  padding: 18px 23px 0 21px;
  color: var(--amber);
  transition: padding-bottom var(--dur) var(--ease);
}

.js .note:not(.is-open) .note-head{ padding-bottom: 17.9px; }

.note-icon{
  flex: none;
  width: 12.25px;
  height: 12.25px;
  fill: var(--amber);
}

.note-title{
  flex: 1;
  font-size: 14px;
  line-height: 17.1px;
  font-weight: 420;
}

.note-chevron{
  width: 7.77px;
  height: 4.47px;
  fill: var(--amber);
}

.note-text{
  margin: 0;
  padding: 11.4px 20px 19.5px 20px;
  font-size: 12px;
  line-height: 12px;
  color: var(--amber-text);
}

.note-text strong{
  color: var(--amber-strong);
  font-weight: 600;
}

/* ---------- Plan cards ---------- */
.plan{ position: relative; }

.plan + .plan{ margin-top: var(--card-gap); }

.plan-heading{ margin: 0; font: inherit; }   /* h2 would otherwise make the header text bold */

.plan-head{
  position: relative;
  z-index: 2;
  display: grid;
  row-gap: 4.2px;
  width: 100%;
  padding: var(--head-pad-y) calc(var(--card-pad-x) + 24px) calc(var(--head-pad-y) - .6px) calc(var(--card-pad-x) - 1px);
  border: 1px solid var(--ring);
  border-radius: 12px;
  background: var(--head);
  transition: background-color var(--dur) var(--ease), margin-bottom var(--dur) var(--ease);
}

.plan.is-open .plan-head{ margin-bottom: -11px; }   /* the body tucks in behind the header */

.plan-line{
  display: flex;
  align-items: center;
  gap: 12.4px;
}

.plan-name{
  font-size: 14px;
  line-height: 17.1px;
  font-weight: 400;
}

.plan-price{
  font-size: 24px;
  line-height: 29.3px;
  font-weight: 500;
}

.plan-renew{
  font-size: 14px;
  line-height: 17.1px;
  color: var(--muted);
}

.plan-head .acc-chevron{
  position: absolute;
  right: calc(var(--card-pad-x) + .5px);
  top: calc(50% + var(--tab-offset, 0px));
  width: 11.1px;
  height: 6.39px;
  margin-top: -3.2px;
}

@media (hover: hover){
  .plan-head:hover{ background: var(--head-hover); }
}

/* the Recommended tab hangs from the top edge of the Perfect card */
.plan--perfect{ --tab-offset: 10.15px; }

.plan--perfect .plan-head{ padding-top: calc(var(--head-pad-y) + 20.6px); }

.plan-tab{
  position: absolute;
  z-index: 3;
  top: -1px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 266px;
  height: 20px;
  margin-left: -133px;
  padding-bottom: 1px;
  background: linear-gradient(180deg, #a7a7a7, #dedede);
  clip-path: path("M0 0 H266 L256.7 17.9 Q255.6 19.7 253.4 19.7 H12.6 Q10.4 19.7 9.3 17.9 Z");
  color: #0b0c0b;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.03em;
}

.plan-tab-inner{
  display: flex;
  align-items: center;
  gap: 5.6px;
}

.tab-star{
  width: 7.61px;
  height: 7.24px;
  flex: none;
  fill: #0b0c0b;
}

/* ---------- Expanded part ---------- */
.plan-body{
  padding: 23.9px calc(var(--card-pad-x) - 1px) 21.4px;
  border: 1px solid var(--ring);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: var(--body);
}

.plan-label{
  margin: 0;
  font-size: 15.1px;
  line-height: 18.4px;
  color: var(--label);
}

.features{
  display: flex;
  flex-direction: column;
  gap: 6.7px;
  margin: 13.1px 0 0;
  padding: 0;
  list-style: none;
}

.features li{
  display: flex;
  align-items: center;
  gap: 13.4px;
  font-size: 13px;
  line-height: 15.8px;
}

.tick{
  width: 16px;
  height: 16px;
  flex: none;
}

/* ---------- WhatsApp button ---------- */
.cta{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  margin-top: 22px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--fg);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.cta::before{                       /* white fill that sweeps in on hover and leaves out the other side */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform calc(var(--dur) + .2s) var(--ease);
}

.cta-arrow{
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform calc(var(--dur) + .2s) var(--ease);
}

.plan--perfect .cta{
  border-color: transparent;
  background: linear-gradient(180deg, #e2e2e2, #ababab);
  color: #0b0c0b;
}

@media (hover: hover){
  .cta:hover{
    color: #0b0c0b;
    border-color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 34px rgba(255, 255, 255, .14);
  }

  .plan--perfect .cta:hover{ box-shadow: 0 0 40px rgba(255, 255, 255, .32); }

  .cta:hover::before{
    transform: scaleX(1);
    transform-origin: left;
  }

  .cta:hover .cta-arrow{ transform: translateX(6px); }
}

.cta:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.cta:active{
  transform: translateY(0) scale(.985);
  transition-duration: .2s;
}

/* ---------- "Lihat Website" link ---------- */
.site-link{
  align-self: center;
  display: flex;
  align-items: center;
  gap: 19.6px;
  margin-top: 26.5px;
  padding: 8px 12px;
  color: var(--fg);
  font-size: 14px;
  line-height: 17.1px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.site-arrow{
  width: 14.41px;
  height: 12.6px;
  flex: none;
  fill: currentColor;
  transition: transform calc(var(--dur) + .2s) var(--ease);
}

@media (hover: hover){
  .site-link:hover .site-arrow{ transform: translateX(8px); }
}

.site-link:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Locked banner ---------- */
.banner{
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 1;
  user-select: none;
}

@media (prefers-reduced-motion: reduce){
  .acc-panel,
  .acc-chevron,
  .plan-head,
  .note-head,
  .cta,
  .cta::before,
  .cta-arrow,
  .site-arrow{ transition-duration: .01s; }
  .cta:hover{ transform: none; }
}

/* ---------- Language link (EN / ID) ---------- */
.lang-link{
  position: absolute;
  z-index: 6;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  pointer-events: auto;
}

.lang-link a{
  color: rgba(255, 255, 255, .55);
  text-decoration: none;
  transition: color .5s cubic-bezier(.45, .05, .2, 1);
}

.lang-link a[aria-current]{ color: #fff; }
.lang-link span{ color: rgba(255, 255, 255, .3); }

@media (hover: hover){
  .lang-link a:hover{ color: #fff; }
}

.lang-link a:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 4px;
}

/* text for screen readers and search engines only */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}