/* =========================================================
   LANGKAH KUDA — ABOUT, LOGOS & SUPPORT 2E-C3G
   ========================================================= */

.lk-about-page,
.lk-support-page {
  --as-espresso: var(--lk-brand-espresso);
  --as-brown: var(--lk-brand-brown);
  --as-soft: var(--lk-brand-muted);
  --as-red: var(--lk-brand-burgundy);
  --as-red-dark: var(--lk-brand-burgundy-deep);
  --as-gold: var(--lk-brand-gold);
  --as-paper: var(--lk-brand-paper);
  --as-ivory: var(--lk-brand-ivory);
  --as-sand: #eadfce;
  --as-line: var(--lk-brand-line);

  width: 100%;
  max-width: 1180px;
  margin: 27px auto 96px;
  color: var(--as-brown);
}

.lk-about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--as-red);
  font-family: var(--font-mono), monospace;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.lk-about-eyebrow::before {
  width: 22px;
  height: 2px;
  content: "";
  background: currentColor;
}


/* HERO */

.lk-about-hero,
.lk-support-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 36px;
  overflow: hidden;
  padding:
    clamp(38px, 6vw, 68px)
    clamp(28px, 6vw, 70px);
  color: #fffaf0;
  border: 1px solid rgba(255, 250, 240, .12);
  border-top: 5px solid var(--as-red);
  border-radius: 26px;
  background:
    radial-gradient(
      circle at 91% 9%,
      rgba(196, 147, 70, .24),
      transparent 29%
    ),
    linear-gradient(
      135deg,
      var(--as-espresso),
      var(--as-brown) 63%,
      #70483c
    );
  box-shadow:
    0 26px 64px rgba(43, 26, 22, .18);
}

.lk-about-hero::before,
.lk-support-hero::before {
  position: absolute;
  z-index: -1;
  top: -140px;
  right: -96px;
  width: 380px;
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(255, 250, 240, .08);
  border-radius: 42%;
  background:
    linear-gradient(
      145deg,
      rgba(183, 53, 47, .4),
      transparent 68%
    );
  transform: rotate(25deg);
}

.lk-about-hero .lk-about-eyebrow,
.lk-support-hero .lk-about-eyebrow {
  color: #e7bd72;
}

.lk-about-hero h1,
.lk-support-hero h1 {
  max-width: 820px;
  margin: 12px 0 17px;
  color: #fffaf0;
  font-family:
    var(--font-display),
    Georgia,
    serif;
  font-size: clamp(45px, 7vw, 77px);
  font-weight: 760;
  line-height: .94;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.lk-about-hero p,
.lk-support-hero p {
  max-width: 710px;
  margin: 0;
  color: rgba(255, 250, 240, .75);
  font-size: 16px;
  line-height: 1.65;
}

.lk-about-knight,
.lk-support-heart {
  position: relative;
  display: grid;
  width: 150px;
  height: 150px;
  place-content: center;
  color: #e7bd72;
  border: 1px solid rgba(255, 250, 240, .18);
  border-radius: 22px;
  background: rgba(255, 250, 240, .07);
  font-family: Georgia, serif;
  font-size: 76px;
  backdrop-filter: blur(10px);
}

.lk-support-heart {
  color: #fffaf0;
  font-size: 54px;
}


/* PROSE */

.lk-about-opening {
  padding:
    clamp(48px, 7vw, 82px)
    clamp(5px, 4vw, 45px);
  border-bottom: 1px solid var(--as-line);
}

.lk-about-lead {
  max-width: 850px;
  margin: 0 0 31px;
  color: var(--as-espresso);
  font-family: var(--font-display), Georgia, serif;
  font-size: clamp(31px, 5vw, 52px);
  font-weight: 650;
  line-height: 1.07;
  letter-spacing: -.035em;
}

.lk-about-opening-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 35px;
}

.lk-about-opening-grid p,
.lk-about-prose p,
.lk-logos-section p {
  margin: 0;
  color: var(--as-soft);
  font-size: 16px;
  line-height: 1.8;
}

.lk-about-opening-grid p + p,
.lk-about-prose p + p,
.lk-logos-section p + p {
  margin-top: 20px;
}

.lk-about-manifesto,
.lk-about-fields {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(30px, 6vw, 82px);
  padding:
    clamp(55px, 8vw, 94px)
    clamp(5px, 4vw, 45px);
  border-bottom: 1px solid var(--as-line);
}

.lk-about-section-label {
  color: var(--as-red);
  font-family: var(--font-display), Georgia, serif;
  font-size: 43px;
  font-weight: 750;
}

.lk-about-section-label span {
  display: block;
  margin-top: 9px;
  color: var(--as-soft);
  font-family: var(--font-mono), monospace;
  font-size: 8px;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.lk-about-prose {
  max-width: 790px;
}

.lk-about-prose h2,
.lk-logos-section h2,
.lk-about-principles h2,
.lk-about-support h2 {
  margin: 0 0 25px;
  color: var(--as-espresso);
  font-family: var(--font-display), Georgia, serif;
  font-size: clamp(34px, 5vw, 55px);
  font-weight: 720;
  line-height: 1;
  letter-spacing: -.04em;
}

.lk-about-prose blockquote {
  margin: 35px 0 0;
  padding: 24px 28px;
  color: var(--as-brown);
  border-left: 4px solid var(--as-red);
  background: rgba(234, 223, 206, .62);
  font-family: var(--font-display), Georgia, serif;
  font-size: 21px;
  font-style: italic;
  line-height: 1.55;
}


/* LOGOS */

.lk-logos-section {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  margin: 0;
  padding:
    clamp(50px, 8vw, 90px)
    clamp(35px, 6vw, 72px);
  color: #fffaf0;
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 14% 20%,
      rgba(196, 147, 70, .18),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      var(--as-espresso),
      var(--as-brown)
    );
  box-shadow:
    0 22px 56px rgba(43, 26, 22, .16);
}

.lk-logos-mark {
  display: grid;
  width: 180px;
  height: 180px;
  place-content: center;
  color: #e7bd72;
  border: 1px solid rgba(255, 250, 240, .17);
  border-radius: 25px;
  background: rgba(255, 250, 240, .055);
  font-family: Georgia, serif;
  font-size: 92px;
}

.lk-logos-section h2 {
  color: #fffaf0;
}

.lk-logos-section p {
  color: rgba(255, 250, 240, .74);
}


/* PRINCIPLES */

.lk-about-principles {
  padding:
    clamp(58px, 8vw, 94px)
    0;
}

.lk-about-principles > header {
  max-width: 760px;
  margin-bottom: 33px;
}

.lk-principle-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--as-line);
  border-left: 1px solid var(--as-line);
}

.lk-principle-grid article {
  min-height: 245px;
  padding: 24px;
  border-right: 1px solid var(--as-line);
  border-bottom: 1px solid var(--as-line);
  background: rgba(255, 253, 248, .55);
}

.lk-principle-grid strong {
  color: var(--as-red);
  font-family: var(--font-mono), monospace;
  font-size: 10px;
}

.lk-principle-grid h3 {
  margin: 42px 0 13px;
  color: var(--as-espresso);
  font-family: var(--font-display), Georgia, serif;
  font-size: 25px;
}

.lk-principle-grid p {
  margin: 0;
  color: var(--as-soft);
  font-size: 13px;
  line-height: 1.65;
}


/* CLOSING */

.lk-about-closing {
  margin-top: 5px;
  padding:
    clamp(50px, 7vw, 76px)
    clamp(28px, 6vw, 68px);
  text-align: center;
  border: 1px solid var(--as-line);
  border-top: 4px solid var(--as-red);
  border-radius: 22px;
  background: var(--as-paper);
}

.lk-about-closing p {
  max-width: 820px;
  margin: 22px auto;
  color: var(--as-soft);
  font-size: 17px;
  line-height: 1.75;
}

.lk-about-closing strong {
  display: block;
  max-width: 920px;
  margin: 0 auto;
  color: var(--as-espresso);
  font-family: var(--font-display), Georgia, serif;
  font-size: clamp(28px, 4vw, 45px);
  line-height: 1.15;
}


/* ABOUT SUPPORT */

.lk-about-support {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(270px, 350px);
  gap: 32px;
  align-items: center;
  margin-top: 38px;
  padding:
    clamp(33px, 5vw, 52px);
  color: #fffaf0;
  border-radius: 22px;
  background:
    linear-gradient(
      135deg,
      var(--as-brown),
      var(--as-espresso)
    );
}

.lk-about-support h2 {
  color: #fffaf0;
}

.lk-about-support-copy p {
  max-width: 660px;
  color: rgba(255, 250, 240, .72);
  line-height: 1.7;
}

.lk-about-bank {
  padding: 24px;
  border: 1px solid rgba(255, 250, 240, .18);
  border-radius: 17px;
  background: rgba(255, 250, 240, .07);
}

.lk-about-bank span,
.lk-about-bank strong,
.lk-about-bank b,
.lk-about-bank small {
  display: block;
}

.lk-about-bank span {
  color: #e7bd72;
  font-family: var(--font-mono), monospace;
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lk-about-bank strong {
  margin-top: 13px;
  font-size: 17px;
}

.lk-about-bank b {
  margin: 8px 0;
  font-family: var(--font-display), Georgia, serif;
  font-size: 29px;
  letter-spacing: .04em;
}

.lk-about-bank small {
  color: rgba(255, 250, 240, .67);
}


/* SUPPORT PAGE */

.lk-support-intro {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 35px;
  padding: 42px 5px;
  border-bottom: 1px solid var(--as-line);
}

.lk-support-intro span {
  color: var(--as-red);
  font-family: var(--font-mono), monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lk-support-intro p {
  max-width: 760px;
  margin: 0;
  color: var(--as-soft);
  font-family: var(--font-display), Georgia, serif;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.35;
}

.lk-support-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 38px;
}

.lk-support-card {
  position: relative;
  display: flex;
  min-height: 340px;
  flex-direction: column;
  padding: 29px;
  overflow: hidden;
  border: 1px solid var(--as-line);
  border-top: 4px solid var(--as-red);
  border-radius: 19px;
  background: var(--as-paper);
  box-shadow:
    0 16px 40px rgba(73, 48, 40, .08);
}

.lk-bank-card {
  grid-row: span 2;
  color: #fffaf0;
  border-color: rgba(255, 250, 240, .1);
  background:
    radial-gradient(
      circle at 89% 10%,
      rgba(196, 147, 70, .19),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      var(--as-espresso),
      var(--as-brown)
    );
}

.lk-premium-card {
  background:
    linear-gradient(
      145deg,
      rgba(234, 223, 206, .86),
      rgba(255, 253, 248, .98)
    );
}

.lk-support-card-number {
  color: var(--as-red);
  font-family: var(--font-display), Georgia, serif;
  font-size: 42px;
  font-weight: 750;
}

.lk-bank-card .lk-support-card-number {
  color: #e7bd72;
}

.lk-support-status {
  position: absolute;
  top: 25px;
  right: 25px;
  padding: 6px 9px;
  color: var(--as-soft);
  border: 1px solid var(--as-line);
  border-radius: 999px;
  font-family: var(--font-mono), monospace;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lk-support-status.is-ready {
  color: #fffaf0;
  border-color: var(--as-red);
  background: var(--as-red);
}

.lk-support-card h2 {
  margin: 40px 0 12px;
  color: var(--as-espresso);
  font-family: var(--font-display), Georgia, serif;
  font-size: 35px;
  letter-spacing: -.03em;
}

.lk-bank-card h2 {
  color: #fffaf0;
}

.lk-support-card > p {
  margin: 0 0 25px;
  color: var(--as-soft);
  line-height: 1.65;
}

.lk-bank-card > p {
  color: rgba(255, 250, 240, .7);
}

.lk-bank-account {
  margin: auto 0 22px;
  padding: 20px;
  border: 1px solid rgba(255, 250, 240, .16);
  border-radius: 14px;
  background: rgba(255, 250, 240, .065);
}

.lk-bank-account span,
.lk-bank-account strong,
.lk-bank-account small {
  display: block;
}

.lk-bank-account span {
  color: #e7bd72;
  font-family: var(--font-mono), monospace;
  font-size: 9px;
  text-transform: uppercase;
}

.lk-bank-account strong {
  margin: 10px 0 6px;
  font-family: var(--font-display), Georgia, serif;
  font-size: clamp(28px, 4vw, 39px);
  letter-spacing: .045em;
}

.lk-bank-account small {
  color: rgba(255, 250, 240, .7);
}

.lk-support-primary {
  display: inline-flex;
  width: fit-content;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 10px 15px;
  color: #fffaf0;
  border: 1px solid var(--as-red-dark);
  border-radius: 9px;
  background:
    linear-gradient(
      180deg,
      #c44139,
      var(--as-red)
    );
  cursor: pointer;
  font-family: var(--font-mono), monospace;
  font-size: 9px;
  font-weight: 800;
  text-decoration: none;
  transition:
    background .18s ease,
    transform .18s ease;
}

.lk-support-primary:hover,
.lk-support-primary:focus-visible {
  color: #fffaf0;
  background: var(--as-espresso);
  transform: translateY(-2px);
}

.lk-about-support .lk-support-primary:hover {
  border-color: #fffaf0;
  background: transparent;
}

.lk-copy-account {
  font: inherit;
}

.lk-copy-status {
  min-height: 17px;
  margin: 9px 0 0;
  color: #e7bd72;
  font-family: var(--font-mono), monospace;
  font-size: 8px;
}

.lk-support-disabled {
  display: inline-flex;
  width: fit-content;
  margin-top: auto;
  padding: 9px 13px;
  color: var(--as-soft);
  border: 1px dashed var(--as-line);
  border-radius: 9px;
  font-family: var(--font-mono), monospace;
  font-size: 8px;
  text-transform: uppercase;
}

.lk-support-note {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 30px;
  margin-top: 38px;
  padding: 27px;
  border-left: 4px solid var(--as-red);
  background: rgba(234, 223, 206, .55);
}

.lk-support-note strong {
  color: var(--as-red);
  font-family: var(--font-mono), monospace;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lk-support-note p {
  margin: 0;
  color: var(--as-soft);
  line-height: 1.65;
}


/* DARK MODE */

html[data-theme="malam"] .lk-about-page,
html[data-theme="malam"] .lk-support-page {
  --as-espresso: #f3e8d9;
  --as-brown: #dfd0c1;
  --as-soft: #b7a698;
  --as-red: #df6259;
  --as-red-dark: #bd443d;
  --as-paper: #1e242b;
  --as-ivory: #191e24;
  --as-sand: #302a27;
  --as-line: rgba(255, 245, 232, .13);
}

html[data-theme="malam"] .lk-about-hero,
html[data-theme="malam"] .lk-support-hero {
  background:
    radial-gradient(
      circle at 91% 9%,
      rgba(223, 182, 105, .16),
      transparent 29%
    ),
    linear-gradient(
      135deg,
      #211713,
      #38251f 63%,
      #55362e
    );
}

html[data-theme="malam"] .lk-about-prose blockquote,
html[data-theme="malam"] .lk-principle-grid article,
html[data-theme="malam"] .lk-about-closing,
html[data-theme="malam"] .lk-support-card,
html[data-theme="malam"] .lk-support-note {
  background: var(--as-paper);
}

html[data-theme="malam"] .lk-logos-section,
html[data-theme="malam"] .lk-about-support,
html[data-theme="malam"] .lk-bank-card {
  background:
    linear-gradient(
      145deg,
      #211713,
      #38251f
    );
}


/* RESPONSIVE */

@media (max-width: 900px) {
  .lk-principle-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .lk-support-grid {
    grid-template-columns: 1fr;
  }

  .lk-bank-card {
    grid-row: auto;
  }
}

@media (max-width: 700px) {
  .lk-about-hero,
  .lk-support-hero {
    grid-template-columns: 1fr;
    padding: 34px 24px;
    border-radius: 22px;
  }

  .lk-about-knight,
  .lk-support-heart {
    width: 100%;
    height: 90px;
    font-size: 48px;
  }

  .lk-about-opening-grid,
  .lk-about-manifesto,
  .lk-about-fields,
  .lk-logos-section,
  .lk-about-support,
  .lk-support-intro,
  .lk-support-note {
    grid-template-columns: 1fr;
  }

  .lk-about-section-label {
    font-size: 32px;
  }

  .lk-logos-mark {
    width: 100%;
    height: 100px;
    font-size: 56px;
  }

  .lk-principle-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .lk-about-page,
  .lk-support-page {
    margin-top: 18px;
  }

  .lk-about-hero h1,
  .lk-support-hero h1 {
    font-size: 42px;
  }

  .lk-about-hero,
  .lk-support-hero {
    padding: 30px 19px;
  }

  .lk-about-manifesto,
  .lk-about-fields {
    padding-inline: 0;
  }

  .lk-support-card {
    padding: 23px 19px;
  }

  .lk-bank-account strong {
    font-size: 28px;
  }

  .lk-support-primary {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lk-support-primary {
    transition: none !important;
  }
}


/* =========================================================
   LANGKAH KUDA
   SIGNATURE MANIFESTO AND MODERN SUPPORT 2E-C3G-1
   ========================================================= */


/* =========================================================
   MOMEN KELAHIRAN NAMA LANGKAH KUDA
   ========================================================= */

.lk-about-opening {
  position: relative;
  isolation: isolate;

  overflow: hidden;

  margin-top: 34px;

  padding:
    clamp(40px, 7vw, 78px)
    clamp(25px, 6vw, 68px);

  border:
    1px solid
    var(--as-line);
  border-top:
    4px solid
    var(--as-red);
  border-radius: 24px;

  background:
    radial-gradient(
      circle at 97% 4%,
      rgba(183, 53, 47, .08),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      rgba(255, 253, 248, .96),
      rgba(247, 239, 226, .86)
    );

  box-shadow:
    0 21px 52px
    rgba(73, 48, 40, .09);
}

.lk-about-opening::before {
  position: absolute;
  z-index: -1;
  top: -115px;
  right: -105px;

  width: 320px;
  aspect-ratio: 1;

  content: "";

  border:
    1px solid
    rgba(183, 53, 47, .1);
  border-radius: 45%;

  transform: rotate(25deg);
}

.lk-about-opening-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom:
    clamp(25px, 4vw, 43px);
}

.lk-about-opening-kicker span {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  color: var(--as-red);

  font-family:
    var(--font-mono),
    monospace;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.lk-about-opening-kicker span::before {
  width: 24px;
  height: 2px;

  content: "";

  background: currentColor;
}

.lk-about-opening-kicker b {
  color:
    rgba(73, 48, 40, .18);

  font-family:
    var(--font-display),
    Georgia,
    serif;
  font-size: 42px;
  line-height: 1;
}

.lk-about-opening
.lk-about-lead {
  max-width: 960px;

  margin-bottom:
    clamp(35px, 6vw, 64px);

  font-size:
    clamp(36px, 5.8vw, 65px);
  line-height: 1.01;
  letter-spacing: -.048em;
  text-wrap: balance;
}

.lk-about-opening
.lk-about-opening-grid {
  grid-template-columns:
    minmax(0, .92fr)
    minmax(0, 1.08fr);

  align-items: start;

  gap:
    clamp(36px, 7vw, 88px);
}

.lk-about-move-copy {
  min-width: 0;
}

.lk-about-move-copy > p {
  color: var(--as-soft);

  font-size: 16px;
  line-height: 1.85;
}

.lk-move-rule-card {
  display: grid;
  grid-template-columns:
    48px
    minmax(0, 1fr);
  align-items: center;
  gap: 15px;

  margin-top: 28px;
  padding: 17px 18px;

  border:
    1px solid
    var(--as-line);
  border-radius: 13px;

  background:
    rgba(234, 223, 206, .48);
}

.lk-move-rule-card > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-content: center;

  color: #fffaf0;

  border-radius: 11px;

  background:
    linear-gradient(
      145deg,
      var(--as-brown),
      var(--as-espresso)
    );

  font-family: Georgia, serif;
  font-size: 27px;
}

.lk-move-rule-card p {
  margin: 0;

  color: var(--as-brown);

  font-family:
    var(--font-display),
    Georgia,
    serif;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.4;
}


/* Highlight utama sengaja turun satu tingkat */

.lk-about-name-reveal {
  position: relative;

  margin-top:
    clamp(32px, 5vw, 66px);

  padding:
    clamp(27px, 4vw, 41px);

  overflow: hidden;

  color: #fffaf0;

  border:
    1px solid
    rgba(255, 250, 240, .12);
  border-top:
    4px solid
    var(--as-red);
  border-radius: 20px;

  background:
    radial-gradient(
      circle at 94% 8%,
      rgba(196, 147, 70, .19),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      var(--as-espresso),
      var(--as-brown)
    );

  box-shadow:
    10px 12px 0
    rgba(183, 53, 47, .1),
    0 22px 48px
    rgba(43, 26, 22, .16);
}

.lk-about-name-reveal::after {
  position: absolute;
  right: -21px;
  bottom: -47px;

  content: none !important;
  display: none !important;

  color:
    rgba(255, 250, 240, .05);

  font-family: Georgia, serif;
  font-size: 155px;
  line-height: 1;
}

.lk-name-reveal-label {
  position: relative;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: #e7bd72;

  font-family:
    var(--font-mono),
    monospace;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.lk-name-reveal-label::before {
  width: 19px;
  height: 2px;

  content: "";

  background: currentColor;
}

.lk-about-name-reveal blockquote {
  position: relative;
  z-index: 1;

  margin:
    23px
    0
    17px;

  color: #fffaf0;

  font-family:
    var(--font-display),
    Georgia,
    serif;
  font-size:
    clamp(29px, 4vw, 47px);
  font-style: normal;
  font-weight: 620;
  line-height: 1.07;
  letter-spacing: -.035em;
}

.lk-about-name-reveal
blockquote strong {
  display: inline;

  color: #e7bd72;
  font-weight: 780;
}

.lk-about-name-reveal > p {
  position: relative;
  z-index: 1;

  max-width: 630px;
  margin: 0;

  color:
    rgba(255, 250, 240, .72);

  font-size: 14px;
  line-height: 1.75;
}

.lk-name-reveal-points {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;

  margin-top: 25px;
  padding-top: 18px;

  border-top:
    1px solid
    rgba(255, 250, 240, .13);
}

.lk-name-reveal-points span {
  display: flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;

  padding: 8px 10px;

  color:
    rgba(255, 250, 240, .8);

  border:
    1px solid
    rgba(255, 250, 240, .13);
  border-radius: 9px;

  background:
    rgba(255, 250, 240, .055);

  font-family:
    var(--font-mono),
    monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .055em;
  text-align: center;
  text-transform: uppercase;
}


/* =========================================================
   MODERN BANK CARD
   ========================================================= */

.lk-bank-modern-card,
.lk-bank-card {
  position: relative;
  isolation: isolate;

  overflow: hidden;
}

.lk-bank-modern-card::before {
  position: absolute;
  z-index: -1;
  top: -78px;
  right: -72px;

  width: 190px;
  aspect-ratio: 1;

  content: "";

  border:
    1px solid
    rgba(255, 250, 240, .1);
  border-radius: 44%;

  transform: rotate(24deg);
}

.lk-bank-modern-head,
.lk-bank-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 17px;
}

.lk-bank-modern-head > div span,
.lk-bank-brand span {
  display: block;

  color: #e7bd72;

  font-family:
    var(--font-mono),
    monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lk-bank-modern-head > div strong {
  display: block;

  margin-top: 7px;

  color: #fffaf0;

  font-family:
    var(--font-display),
    Georgia,
    serif;
  font-size: 24px;
}

.lk-bank-modern-head em,
.lk-bank-live-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 6px 9px;

  color:
    rgba(255, 250, 240, .75);

  border:
    1px solid
    rgba(255, 250, 240, .15);
  border-radius: 999px;

  background:
    rgba(255, 250, 240, .06);

  font-family:
    var(--font-mono),
    monospace;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.lk-bank-modern-head em i,
.lk-bank-live-status i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #65c985;

  box-shadow:
    0 0 0 4px
    rgba(101, 201, 133, .12);

  animation:
    lk-bank-status-pulse
    2.2s
    ease-out
    infinite;
}

@keyframes lk-bank-status-pulse {
  0% {
    box-shadow:
      0 0 0 0
      rgba(101, 201, 133, .3);
  }

  70% {
    box-shadow:
      0 0 0 8px
      rgba(101, 201, 133, 0);
  }

  100% {
    box-shadow:
      0 0 0 0
      rgba(101, 201, 133, 0);
  }
}

.lk-bank-modern-account {
  margin-top: 25px;
  padding: 18px;

  border:
    1px solid
    rgba(255, 250, 240, .15);
  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 250, 240, .095),
      rgba(255, 250, 240, .035)
    );
}

.lk-bank-modern-account small {
  display: block;

  color:
    rgba(255, 250, 240, .58);

  font-family:
    var(--font-mono),
    monospace;
  font-size: 7px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.lk-bank-modern-account b {
  display: block;

  margin-top: 8px;

  color: #fffaf0;

  font-family:
    var(--font-display),
    Georgia,
    serif;
  font-size:
    clamp(27px, 3vw, 35px);
  font-weight: 730;
  line-height: 1;
  letter-spacing: .065em;
}

.lk-bank-modern-holder {
  display: grid;
  gap: 4px;

  margin:
    15px
    0
    19px;
}

.lk-bank-modern-holder span {
  color:
    rgba(255, 250, 240, .55);

  font-family:
    var(--font-mono),
    monospace;
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lk-bank-modern-holder strong {
  color:
    rgba(255, 250, 240, .86);

  font-size: 12px;
}

.lk-copy-account-modern {
  position: relative;

  width: 100%;
  min-height: 47px;

  padding-left: 40px;

  border:
    1px solid
    var(--as-red-dark);
  border-radius: 10px;

  background:
    linear-gradient(
      180deg,
      #c44139,
      var(--as-red)
    );

  color: #fffaf0;

  cursor: pointer;

  font-family:
    var(--font-mono),
    monospace;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .02em;
}

.lk-copy-account-modern::before {
  position: absolute;
  top: 50%;
  left: 17px;

  content: "⧉";

  font-size: 16px;

  transform:
    translateY(-52%);
}

.lk-copy-account-modern:hover,
.lk-copy-account-modern:focus-visible {
  border-color: #fffaf0;
  background: transparent;
}


/* Extra modern pada halaman Support Us */

.lk-support-card.lk-bank-card {
  min-height: 540px;

  padding:
    clamp(28px, 4vw, 39px);

  border-top-color: #e7bd72;

  box-shadow:
    0 27px 65px
    rgba(43, 26, 22, .22);
}

.lk-bank-orbit {
  position: absolute;
  z-index: -1;
  top: -130px;
  right: -118px;

  width: 340px;
  aspect-ratio: 1;

  border:
    1px solid
    rgba(255, 250, 240, .08);
  border-radius: 44%;

  transform: rotate(27deg);
}

.lk-bank-orbit::after {
  position: absolute;
  inset: 45px;

  content: "";

  border:
    1px solid
    rgba(255, 250, 240, .055);
  border-radius: inherit;
}

.lk-bank-brand {
  margin-top: 37px;
}

.lk-bank-brand strong {
  display: block;

  margin-top: 8px;

  color: #fffaf0;

  font-family:
    var(--font-display),
    Georgia,
    serif;
  font-size: 31px;
}

.lk-bank-card h2 {
  max-width: 590px;

  margin:
    27px
    0
    14px;

  font-size:
    clamp(34px, 4vw, 49px);
  line-height: 1;
}

.lk-bank-card > p {
  max-width: 600px;
}

.lk-bank-account-premium {
  position: relative;

  margin:
    auto
    0
    22px;

  padding:
    clamp(21px, 4vw, 31px);

  overflow: hidden;

  border:
    1px solid
    rgba(255, 250, 240, .16);
  border-radius: 17px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 250, 240, .1),
      rgba(255, 250, 240, .035)
    );

  box-shadow:
    inset
    0
    1px
    rgba(255, 255, 255, .08);
}

.lk-bank-account-premium::after {
  position: absolute;
  top: -38px;
  right: -25px;

  content: none !important;
  display: none !important;

  color:
    rgba(255, 250, 240, .045);

  font-family: Georgia, serif;
  font-size: 130px;
}

.lk-bank-account-premium > span {
  position: relative;
  z-index: 1;
}

.lk-bank-account-premium > strong {
  position: relative;
  z-index: 1;

  margin:
    14px
    0
    21px;

  color: #fffaf0;

  font-size:
    clamp(35px, 5vw, 53px);
  line-height: 1;
  letter-spacing: .065em;
}

.lk-bank-account-premium > div {
  position: relative;
  z-index: 1;

  display: grid;
  gap: 4px;

  padding-top: 16px;

  border-top:
    1px solid
    rgba(255, 250, 240, .12);
}

.lk-bank-account-premium
> div small {
  color:
    rgba(255, 250, 240, .52);

  font-family:
    var(--font-mono),
    monospace;
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lk-bank-account-premium
> div b {
  color:
    rgba(255, 250, 240, .86);

  font-size: 13px;
}

.lk-bank-security-note {
  display: grid;
  grid-template-columns:
    28px
    minmax(0, 1fr);
  align-items: start;
  gap: 11px;

  margin-top: 19px;
  padding-top: 17px;

  border-top:
    1px solid
    rgba(255, 250, 240, .12);
}

.lk-bank-security-note > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-content: center;

  color: #8dde9f;

  border:
    1px solid
    rgba(141, 222, 159, .24);
  border-radius: 50%;

  background:
    rgba(141, 222, 159, .08);

  font-size: 11px;
}

.lk-bank-security-note p {
  margin: 1px 0 0;

  color:
    rgba(255, 250, 240, .58);

  font-size: 10px;
  line-height: 1.55;
}

.lk-bank-security-note strong {
  color:
    rgba(255, 250, 240, .82);
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="malam"]
.lk-about-opening {
  background:
    linear-gradient(
      145deg,
      #1e242b,
      #191e24
    );
}

html[data-theme="malam"]
.lk-move-rule-card {
  background:
    rgba(223, 98, 89, .055);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {
  .lk-about-opening
  .lk-about-opening-grid {
    grid-template-columns: 1fr;
  }

  .lk-about-name-reveal {
    margin-top: 15px;
  }
}

@media (max-width: 520px) {
  .lk-about-opening {
    padding:
      31px
      19px;

    border-radius: 19px;
  }

  .lk-about-opening
  .lk-about-lead {
    font-size: 39px;
  }

  .lk-move-rule-card {
    grid-template-columns:
      42px
      minmax(0, 1fr);
  }

  .lk-move-rule-card > span {
    width: 42px;
    height: 42px;
  }

  .lk-about-name-reveal {
    padding:
      25px
      20px;
  }

  .lk-about-name-reveal
  blockquote {
    font-size: 32px;
  }

  .lk-name-reveal-points {
    grid-template-columns: 1fr;
  }

  .lk-bank-modern-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .lk-bank-modern-account b {
    font-size: 27px;
  }

  .lk-bank-account-premium
  > strong {
    font-size: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lk-bank-modern-head em i,
  .lk-bank-live-status i {
    animation: none !important;
  }
}


/* =========================================================
   LANGKAH KUDA
   DARK MODE CONTRAST FIX 2E-C3G-2
   ========================================================= */

/*
 * Variabel --as-espresso dan --as-brown berubah menjadi
 * warna teks terang pada mode malam. Komponen gelap tidak
 * boleh menggunakan variabel tersebut sebagai background.
 */

html[data-theme="malam"]
.lk-about-name-reveal {
  color: #fffaf0;

  border-color:
    rgba(255, 245, 232, .13);
  border-top-color: #df6259;

  background:
    radial-gradient(
      circle at 94% 8%,
      rgba(223, 182, 105, .16),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #211713 0%,
      #38251f 66%,
      #51342d 100%
    );

  box-shadow:
    10px 12px 0
    rgba(223, 98, 89, .09),
    0 22px 48px
    rgba(0, 0, 0, .28);
}

html[data-theme="malam"]
.lk-about-name-reveal
.lk-name-reveal-label {
  color: #e7bd72;
}

html[data-theme="malam"]
.lk-about-name-reveal blockquote {
  color: #fffaf0;
}

html[data-theme="malam"]
.lk-about-name-reveal
blockquote strong {
  color: #f0bf62;
}

html[data-theme="malam"]
.lk-about-name-reveal > p {
  color:
    rgba(255, 250, 240, .76);
}

html[data-theme="malam"]
.lk-about-name-reveal::after {
  color:
    rgba(255, 250, 240, .045);
}

html[data-theme="malam"]
.lk-name-reveal-points {
  border-top-color:
    rgba(255, 250, 240, .14);
}

html[data-theme="malam"]
.lk-name-reveal-points span {
  color:
    rgba(255, 250, 240, .84);

  border-color:
    rgba(255, 250, 240, .15);

  background:
    rgba(255, 250, 240, .06);
}


/* Kartu gerakan di sisi kiri */

html[data-theme="malam"]
.lk-move-rule-card {
  border-color:
    rgba(255, 245, 232, .13);

  background:
    linear-gradient(
      135deg,
      rgba(223, 98, 89, .07),
      rgba(255, 245, 232, .025)
    );
}

html[data-theme="malam"]
.lk-move-rule-card > span {
  color: #fffaf0;

  background:
    linear-gradient(
      145deg,
      #38251f,
      #211713
    );
}

html[data-theme="malam"]
.lk-move-rule-card p {
  color: #eee2d4;
}


/* Rekening modern pada Tentang Kami */

html[data-theme="malam"]
.lk-about-bank.lk-bank-modern-card {
  color: #fffaf0;

  border-color:
    rgba(255, 250, 240, .16);

  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(223, 182, 105, .14),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #211713,
      #38251f
    );
}

html[data-theme="malam"]
.lk-bank-modern-head > div strong,
html[data-theme="malam"]
.lk-bank-modern-account b,
html[data-theme="malam"]
.lk-bank-modern-holder strong {
  color: #fffaf0;
}

html[data-theme="malam"]
.lk-bank-modern-account {
  border-color:
    rgba(255, 250, 240, .15);

  background:
    rgba(255, 250, 240, .06);
}


/* Rekening utama pada halaman Dukungan */

html[data-theme="malam"]
.lk-support-card.lk-bank-card {
  color: #fffaf0;

  border-color:
    rgba(255, 250, 240, .12);
  border-top-color: #e7bd72;

  background:
    radial-gradient(
      circle at 89% 10%,
      rgba(223, 182, 105, .16),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      #211713,
      #38251f 72%,
      #4c3029
    );
}

html[data-theme="malam"]
.lk-bank-card h2,
html[data-theme="malam"]
.lk-bank-brand strong,
html[data-theme="malam"]
.lk-bank-account-premium > strong,
html[data-theme="malam"]
.lk-bank-account-premium > div b {
  color: #fffaf0;
}

html[data-theme="malam"]
.lk-bank-card > p {
  color:
    rgba(255, 250, 240, .72);
}

html[data-theme="malam"]
.lk-bank-account-premium {
  border-color:
    rgba(255, 250, 240, .16);

  background:
    linear-gradient(
      135deg,
      rgba(255, 250, 240, .095),
      rgba(255, 250, 240, .035)
    );
}


/* Fokus keyboard tetap jelas */

html[data-theme="malam"]
.lk-copy-account-modern:focus-visible {
  outline:
    3px solid
    rgba(240, 191, 98, .42);
  outline-offset: 3px;
}

@media (prefers-contrast: more) {
  html[data-theme="malam"]
  .lk-about-name-reveal > p,
  html[data-theme="malam"]
  .lk-bank-card > p {
    color: #fffaf0;
  }

  html[data-theme="malam"]
  .lk-name-reveal-points span {
    border-color:
      rgba(255, 250, 240, .34);
  }
}

/* SUPPORT BANK IDENTITY 3A-2B-B1A */

.lk-bank-name-line {
  display: flex;
  align-items: center;
  gap: 13px;

  margin-top: 10px;
}

.lk-bank-symbol {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  color: #2a1814;

  border:
    1px solid
    rgba(231, 189, 114, .68);
  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      #f1ce86,
      #dca94f
    );

  box-shadow:
    0 10px 25px
    rgba(19, 10, 8, .18);
}

.lk-bank-symbol svg {
  width: 22px;
  height: 22px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lk-bank-name-line strong {
  margin: 0 !important;

  font-size:
    clamp(28px, 4vw, 38px)
    !important;

  line-height: 1;
}

.lk-bank-account-head {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  margin-bottom: 12px;
}

.lk-bank-account-head > span {
  margin: 0 !important;
}

.lk-bank-account-bank {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  max-width: 58%;

  padding: 7px 10px;

  overflow: hidden;

  color: #f3cb7c;

  border:
    1px solid
    rgba(231, 189, 114, .3);
  border-radius: 999px;

  background:
    rgba(231, 189, 114, .08);

  font-family:
    var(--font-mono),
    monospace;

  font-size: 8px;
  font-weight: 850;
  letter-spacing: .075em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.lk-bank-account-bank svg {
  flex: 0 0 auto;

  width: 14px;
  height: 14px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


@media (max-width: 520px) {
  .lk-bank-name-line {
    gap: 11px;
  }

  .lk-bank-symbol {
    width: 38px;
    height: 38px;
  }

  .lk-bank-name-line strong {
    font-size: 29px !important;
  }

  .lk-bank-account-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .lk-bank-account-bank {
    max-width: 100%;
  }
}

/* SUPPORT BANK BADGE CLIP FIX 3A-2B-B1B */

.lk-bank-account-head {
  flex-wrap: wrap;
}

.lk-bank-account-bank {
  flex: 0 0 auto;

  width: auto;
  min-width: max-content;
  max-width: none;

  overflow: visible;
  text-overflow: clip;

  padding:
    8px
    13px;

  white-space: nowrap;
}

.lk-bank-account-bank svg {
  display: block;
  flex:
    0
    0
    15px;

  width: 15px;
  min-width: 15px;
  height: 15px;

  overflow: visible;
}

.lk-bank-symbol {
  overflow: visible;
}

.lk-bank-symbol svg {
  display: block;

  flex:
    0
    0
    22px;

  min-width: 22px;

  stroke-width: 2;
  overflow: visible;
}


@media (max-width: 520px) {
  .lk-bank-account-head {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr);

    align-items: start;
    justify-items: start;

    width: 100%;
    gap: 10px;
  }

  .lk-bank-account-bank {
    display: inline-flex;

    width: auto;
    min-width: 0;
    max-width: 100%;

    padding:
      8px
      12px;

    overflow: visible;

    font-size: 9px;
    line-height: 1.25;

    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .lk-bank-account-bank svg {
    align-self: flex-start;
    margin-top: 1px;
  }
}

/* FINAL THREE PANEL VISIBILITY 3A-2C-2C START */

/* Dukungan: tahan logo di dalam plakat proporsional. */
.lk-support-hero :has(> .lk-support-official-logo) {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  place-items: center !important;
  width: 138px !important;
  min-width: 138px !important;
  max-width: 138px !important;
  height: 148px !important;
  min-height: 148px !important;
  max-height: 148px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border: 1px solid rgba(231, 193, 121, .64) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(145deg, #fffef9 0%, #f7efe2 58%, #e7d2b2 100%)
    !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 20px 42px rgba(17, 7, 5, .24) !important;
  transform: none !important;
}

.lk-support-hero .lk-support-official-logo {
  position: static !important;
  inset: auto !important;
  display: block !important;
  visibility: visible !important;
  box-sizing: border-box !important;
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  height: 104px !important;
  min-height: 104px !important;
  max-height: 104px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter:
    drop-shadow(0 8px 14px rgba(58, 34, 27, .2))
    brightness(1.06)
    contrast(1.12)
    saturate(1.06) !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transition:
    transform 420ms cubic-bezier(.22, 1, .36, 1),
    filter 320ms ease !important;
}

/* Logos: SVG Lambda terlihat walau pseudo-element lama dimatikan. */
.lk-logos-section .lk-logos-mark {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
  width: 176px !important;
  min-width: 176px !important;
  max-width: 176px !important;
  height: 176px !important;
  min-height: 176px !important;
  max-height: 176px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border: 1px solid rgba(232, 193, 119, .72) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(
      circle at 31% 23%,
      rgba(255, 255, 255, .99) 0%,
      rgba(249, 239, 219, .97) 34%,
      rgba(221, 184, 119, .92) 72%,
      rgba(132, 73, 53, .94) 100%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -20px 44px rgba(87, 42, 34, .12),
    0 24px 48px rgba(17, 7, 5, .28) !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition:
    transform 480ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 360ms ease,
    border-color 360ms ease !important;
}

.lk-logos-section .lk-logos-mark::before,
.lk-logos-section .lk-logos-mark::after {
  display: block !important;
  content: "" !important;
}

.lk-logos-section .lk-logos-lambda-svg {
  position: relative !important;
  z-index: 5 !important;
  display: block !important;
  visibility: visible !important;
  width: 124px !important;
  min-width: 124px !important;
  max-width: 124px !important;
  height: 124px !important;
  min-height: 124px !important;
  max-height: 124px !important;
  margin: 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 12px 18px rgba(63, 28, 23, .22)) !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transition:
    transform 520ms cubic-bezier(.22, 1, .36, 1),
    filter 360ms ease !important;
}

.lk-logos-section .lk-logos-lambda-ring,
.lk-logos-section .lk-logos-lambda-path {
  transform-origin: center !important;
  transition:
    transform 600ms cubic-bezier(.22, 1, .36, 1),
    opacity 360ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .lk-support-hero :has(> .lk-support-official-logo):hover
  .lk-support-official-logo {
    transform: translate3d(0, -4px, 0) scale(1.035) !important;
  }

  .lk-logos-section .lk-logos-mark:hover {
    border-color: rgba(238, 199, 124, .94) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .98),
      inset 0 -20px 44px rgba(87, 42, 34, .1),
      0 32px 66px rgba(17, 7, 5, .35) !important;
    transform:
      translate3d(0, -6px, 0)
      rotate(-1deg)
      scale(1.025) !important;
  }

  .lk-logos-section .lk-logos-mark:hover .lk-logos-lambda-svg {
    filter: drop-shadow(0 17px 25px rgba(63, 28, 23, .28)) !important;
    transform: translate3d(0, -4px, 0) scale(1.065) !important;
  }

  .lk-logos-section .lk-logos-mark:hover .lk-logos-lambda-ring {
    transform: rotate(18deg) scale(1.04) !important;
  }

  .lk-logos-section .lk-logos-mark:hover .lk-logos-lambda-path {
    transform: scale(1.035) !important;
  }
}

@media (max-width: 760px) {
  .lk-support-hero :has(> .lk-support-official-logo) {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    border-radius: 22px !important;
  }

  .lk-support-hero .lk-support-official-logo {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
  }

  .lk-logos-section .lk-logos-mark {
    width: 144px !important;
    min-width: 144px !important;
    max-width: 144px !important;
    height: 144px !important;
    min-height: 144px !important;
    max-height: 144px !important;
    border-radius: 24px !important;
  }

  .lk-logos-section .lk-logos-lambda-svg {
    width: 102px !important;
    min-width: 102px !important;
    max-width: 102px !important;
    height: 102px !important;
    min-height: 102px !important;
    max-height: 102px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lk-support-hero .lk-support-official-logo,
  .lk-logos-section .lk-logos-mark,
  .lk-logos-section .lk-logos-lambda-svg,
  .lk-logos-section .lk-logos-lambda-ring,
  .lk-logos-section .lk-logos-lambda-path {
    transition-duration: .01ms !important;
  }

  .lk-support-hero :has(> .lk-support-official-logo):hover
  .lk-support-official-logo,
  .lk-logos-section .lk-logos-mark:hover,
  .lk-logos-section .lk-logos-mark:hover .lk-logos-lambda-svg,
  .lk-logos-section .lk-logos-mark:hover .lk-logos-lambda-ring,
  .lk-logos-section .lk-logos-mark:hover .lk-logos-lambda-path {
    transform: none !important;
  }
}

/* FINAL THREE PANEL VISIBILITY 3A-2C-2C END */

/* PRINCIPLE CARDS MOTION 3A-2C-2E START */

/*
 * Empat kartu prinsip pada halaman Tentang.
 * Selector dibuat berlapis agar tetap bekerja pada struktur
 * grid lama maupun struktur class yang lebih spesifik.
 */
.lk-about-principles
:is(
  .lk-about-principles-grid,
  .lk-principles-grid,
  .lk-about-principles-list,
  .lk-principles-list
)
> *,

.lk-about-principles
> :is(
  div,
  ol,
  ul
)
> :is(
  article,
  li,
  .lk-about-principle,
  .lk-principle-card
) {
  position: relative !important;
  isolation: isolate !important;

  overflow: hidden !important;

  transform:
    translate3d(0, 0, 0)
    scale(1) !important;

  transform-origin:
    center bottom !important;

  transition:
    transform 430ms
      cubic-bezier(.22, 1, .36, 1),
    box-shadow 360ms ease,
    border-color 320ms ease,
    background-color 320ms ease !important;

  will-change:
    transform !important;
}

.lk-about-principles
:is(
  .lk-about-principles-grid,
  .lk-principles-grid,
  .lk-about-principles-list,
  .lk-principles-list
)
> *::before,

.lk-about-principles
> :is(
  div,
  ol,
  ul
)
> :is(
  article,
  li,
  .lk-about-principle,
  .lk-principle-card
)::before {
  position: absolute !important;
  z-index: -1 !important;

  inset: auto -34% -52% auto !important;

  width: 150px !important;
  height: 150px !important;

  content: "" !important;
  pointer-events: none !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      rgba(126, 39, 53, .16) 0%,
      rgba(184, 137, 63, .08) 46%,
      transparent 72%
    ) !important;

  opacity: 0 !important;

  transform:
    translate3d(18px, 18px, 0)
    scale(.82) !important;

  transition:
    opacity 320ms ease,
    transform 520ms
      cubic-bezier(.22, 1, .36, 1) !important;
}

.lk-about-principles
:is(
  .lk-about-principles-grid,
  .lk-principles-grid,
  .lk-about-principles-list,
  .lk-principles-list
)
> * > :first-child,

.lk-about-principles
> :is(
  div,
  ol,
  ul
)
> :is(
  article,
  li,
  .lk-about-principle,
  .lk-principle-card
)
> :first-child {
  transition:
    transform 420ms
      cubic-bezier(.22, 1, .36, 1),
    color 280ms ease !important;
}

.lk-about-principles
:is(
  .lk-about-principles-grid,
  .lk-principles-grid,
  .lk-about-principles-list,
  .lk-principles-list
)
> *:nth-child(1),

.lk-about-principles
> :is(div, ol, ul)
> :is(article, li, .lk-about-principle, .lk-principle-card):nth-child(1) {
  --lk-card-rotate: -0.65deg;
}

.lk-about-principles
:is(
  .lk-about-principles-grid,
  .lk-principles-grid,
  .lk-about-principles-list,
  .lk-principles-list
)
> *:nth-child(2),

.lk-about-principles
> :is(div, ol, ul)
> :is(article, li, .lk-about-principle, .lk-principle-card):nth-child(2) {
  --lk-card-rotate: 0.45deg;
}

.lk-about-principles
:is(
  .lk-about-principles-grid,
  .lk-principles-grid,
  .lk-about-principles-list,
  .lk-principles-list
)
> *:nth-child(3),

.lk-about-principles
> :is(div, ol, ul)
> :is(article, li, .lk-about-principle, .lk-principle-card):nth-child(3) {
  --lk-card-rotate: -0.35deg;
}

.lk-about-principles
:is(
  .lk-about-principles-grid,
  .lk-principles-grid,
  .lk-about-principles-list,
  .lk-principles-list
)
> *:nth-child(4),

.lk-about-principles
> :is(div, ol, ul)
> :is(article, li, .lk-about-principle, .lk-principle-card):nth-child(4) {
  --lk-card-rotate: 0.65deg;
}

@media (hover: hover) and (pointer: fine) {
  .lk-about-principles
  :is(
    .lk-about-principles-grid,
    .lk-principles-grid,
    .lk-about-principles-list,
    .lk-principles-list
  )
  > *:hover,

  .lk-about-principles
  > :is(
    div,
    ol,
    ul
  )
  > :is(
    article,
    li,
    .lk-about-principle,
    .lk-principle-card
  ):hover {
    z-index: 4 !important;

    border-color:
      rgba(171, 82, 55, .44) !important;

    box-shadow:
      0 22px 42px
      rgba(54, 31, 23, .15),
      inset 0 1px 0
      rgba(255, 255, 255, .58) !important;

    transform:
      translate3d(0, -9px, 0)
      rotate(var(--lk-card-rotate, 0deg))
      scale(1.025) !important;
  }

  .lk-about-principles
  :is(
    .lk-about-principles-grid,
    .lk-principles-grid,
    .lk-about-principles-list,
    .lk-principles-list
  )
  > *:hover::before,

  .lk-about-principles
  > :is(
    div,
    ol,
    ul
  )
  > :is(
    article,
    li,
    .lk-about-principle,
    .lk-principle-card
  ):hover::before {
    opacity: 1 !important;

    transform:
      translate3d(0, 0, 0)
      scale(1.08) !important;
  }

  .lk-about-principles
  :is(
    .lk-about-principles-grid,
    .lk-principles-grid,
    .lk-about-principles-list,
    .lk-principles-list
  )
  > *:hover
  > :first-child,

  .lk-about-principles
  > :is(
    div,
    ol,
    ul
  )
  > :is(
    article,
    li,
    .lk-about-principle,
    .lk-principle-card
  ):hover
  > :first-child {
    color:
      #a52f37 !important;

    transform:
      translate3d(4px, -2px, 0)
      scale(1.04) !important;
  }
}

.lk-about-principles
:is(
  .lk-about-principles-grid,
  .lk-principles-grid,
  .lk-about-principles-list,
  .lk-principles-list
)
> *:focus-within,

.lk-about-principles
> :is(
  div,
  ol,
  ul
)
> :is(
  article,
  li,
  .lk-about-principle,
  .lk-principle-card
):focus-within {
  outline:
    2px solid
    rgba(165, 47, 55, .46) !important;

  outline-offset:
    -2px !important;

  transform:
    translate3d(0, -7px, 0)
    scale(1.018) !important;
}

@media (max-width: 760px) {
  .lk-about-principles
  :is(
    .lk-about-principles-grid,
    .lk-principles-grid,
    .lk-about-principles-list,
    .lk-principles-list
  )
  > *,

  .lk-about-principles
  > :is(
    div,
    ol,
    ul
  )
  > :is(
    article,
    li,
    .lk-about-principle,
    .lk-principle-card
  ) {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lk-about-principles
  :is(
    .lk-about-principles-grid,
    .lk-principles-grid,
    .lk-about-principles-list,
    .lk-principles-list
  )
  > *,

  .lk-about-principles
  > :is(
    div,
    ol,
    ul
  )
  > :is(
    article,
    li,
    .lk-about-principle,
    .lk-principle-card
  ),

  .lk-about-principles
  :is(
    .lk-about-principles-grid,
    .lk-principles-grid,
    .lk-about-principles-list,
    .lk-principles-list
  )
  > *::before,

  .lk-about-principles
  > :is(
    div,
    ol,
    ul
  )
  > :is(
    article,
    li,
    .lk-about-principle,
    .lk-principle-card
  )::before {
    transition-duration:
      .01ms !important;
  }

  .lk-about-principles
  :is(
    .lk-about-principles-grid,
    .lk-principles-grid,
    .lk-about-principles-list,
    .lk-principles-list
  )
  > *:hover,

  .lk-about-principles
  > :is(
    div,
    ol,
    ul
  )
  > :is(
    article,
    li,
    .lk-about-principle,
    .lk-principle-card
  ):hover {
    transform: none !important;
  }
}

/* PRINCIPLE CARDS MOTION 3A-2C-2E END */

/* =========================================================
   LANGKAH KUDA — COMPACT INSTITUTIONAL HERO 3X-B5-B2
   ========================================================= */

.lk-about-page,
.lk-support-page {
    margin-top:
        clamp(18px, 2.4vw, 26px);

    margin-bottom:
        clamp(54px, 7vw, 82px);
}


.lk-about-hero,
.lk-support-hero {
    gap:
        var(--lk-hero-gap);

    padding:
        var(--lk-hero-pad-block)
        var(--lk-hero-pad-inline);

    border:
        1px solid
        rgba(216, 195, 165, .22);

    border-top:
        4px solid
        var(--lk-brand-burgundy);

    border-radius:
        var(--lk-hero-radius);

    background:
        radial-gradient(
            circle at 91% 8%,
            rgba(184, 146, 95, .20),
            transparent 30%
        ),
        linear-gradient(
            137deg,
            var(--lk-brand-espresso),
            var(--lk-brand-brown-deep) 58%,
            var(--lk-brand-brown)
        );

    box-shadow:
        0 20px 48px
        rgba(47, 33, 28, .14);
}


.lk-about-hero::before,
.lk-support-hero::before {
    top:
        -118px;

    right:
        -76px;

    width:
        310px;

    background:
        linear-gradient(
            145deg,
            rgba(111, 38, 61, .34),
            transparent 68%
        );
}


.lk-about-hero h1,
.lk-support-hero h1 {
    max-width:
        760px;

    margin:
        9px 0 14px;

    color:
        var(--lk-brand-ivory);

    font-size:
        var(--lk-hero-title);

    font-weight:
        750;

    line-height:
        .98;

    letter-spacing:
        -.045em;
}


.lk-about-hero p,
.lk-support-hero p {
    max-width:
        680px;

    color:
        rgba(248, 243, 235, .78);

    font-size:
        clamp(14px, 1.3vw, 16px);

    line-height:
        1.6;
}


.lk-about-hero .lk-about-eyebrow,
.lk-support-hero .lk-about-eyebrow {
    color:
        var(--lk-brand-gold-soft);
}


.lk-about-knight,
.lk-support-heart {
    width:
        var(--lk-hero-symbol);

    height:
        var(--lk-hero-symbol);

    border:
        1px solid
        rgba(216, 195, 165, .24);

    border-radius:
        20px;

    color:
        var(--lk-brand-gold-soft);

    background:
        rgba(248, 243, 235, .055);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .08);

    backdrop-filter:
        blur(9px);
}


.lk-about-knight {
    font-size:
        clamp(52px, 6vw, 66px);
}


.lk-support-heart {
    color:
        var(--lk-brand-ivory);

    font-size:
        clamp(38px, 5vw, 48px);
}


/*
 * Reduce large prose transition after hero.
 */
.lk-about-opening {
    padding:
        clamp(36px, 5vw, 58px)
        clamp(8px, 4vw, 42px);
}


.lk-about-lead {
    max-width:
        800px;

    margin-bottom:
        26px;

    font-size:
        clamp(28px, 4vw, 44px);

    line-height:
        1.09;
}


/*
 * Institutional buttons.
 */
.lk-support-primary {
    min-height:
        44px;

    padding:
        11px 17px;

    border-radius:
        var(--lk-button-radius);

    border-color:
        var(--lk-brand-burgundy);

    background:
        var(--lk-brand-burgundy);

    color:
        var(--lk-brand-paper);

    box-shadow:
        0 9px 22px
        rgba(77, 23, 40, .13);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}


.lk-support-primary:hover,
.lk-support-primary:focus-visible {
    background:
        var(--lk-brand-burgundy-deep);

    border-color:
        var(--lk-brand-burgundy-deep);

    box-shadow:
        0 12px 28px
        rgba(77, 23, 40, .19);

    transform:
        translateY(-1px);
}


/*
 * Banking surfaces:
 * institutional, restrained, clearly readable.
 */
.lk-bank-modern-card,
.lk-about-bank.lk-bank-modern-card {
    border-color:
        var(--lk-brand-line);

    border-radius:
        var(--lk-card-radius);

    background:
        linear-gradient(
            150deg,
            var(--lk-brand-paper),
            var(--lk-brand-ivory)
        );

    box-shadow:
        0 16px 38px
        rgba(47, 33, 28, .08);
}


.lk-bank-brand strong {
    color:
        var(--lk-brand-burgundy-deep);
}


/*
 * Compact mobile hero:
 * logo/symbol remains visible but never dominates.
 */
@media (max-width: 760px) {

    .lk-about-page,
    .lk-support-page {
        margin-top:
            14px;
    }


    .lk-about-hero,
    .lk-support-hero {
        grid-template-columns:
            1fr;

        gap:
            20px;

        padding:
            28px
            22px;

        border-radius:
            18px;
    }


    .lk-about-hero h1,
    .lk-support-hero h1 {
        font-size:
            clamp(35px, 11vw, 48px);
    }


    .lk-about-knight,
    .lk-support-heart {
        width:
            92px;

        height:
            92px;

        border-radius:
            16px;
    }


    .lk-about-opening {
        padding:
            34px
            4px;
    }


    .lk-about-lead {
        font-size:
            clamp(27px, 8vw, 36px);
    }
}


@media (
    prefers-reduced-motion:
    reduce
) {

    .lk-support-primary {
        transition:
            none;
    }


    .lk-support-primary:hover,
    .lk-support-primary:focus-visible {
        transform:
            none;
    }
}

/* =========================================================
   LANGKAH KUDA — INSTITUTIONAL POLISH 3X-B5-B3
   About + Support
   ========================================================= */

.lk-about-page,
.lk-support-page {
    --lk-institutional-section-gap:
        clamp(34px, 5vw, 56px);

    --lk-institutional-card-gap:
        clamp(16px, 2.2vw, 24px);
}


/* HERO REFINEMENT */

.lk-about-hero,
.lk-support-hero {
    min-height:
        0;
}

.lk-about-hero > *,
.lk-support-hero > * {
    min-width:
        0;
}


/* SUPPORT BANKING */

.lk-support-bank-grid,
.lk-about-bank-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(240px, 1fr)
        );

    gap:
        var(--lk-institutional-card-gap);
}

.lk-bank-modern-card,
.lk-about-bank.lk-bank-modern-card {
    position:
        relative;

    overflow:
        hidden;

    padding:
        clamp(18px, 2.5vw, 26px);
}

.lk-bank-modern-card::before,
.lk-about-bank.lk-bank-modern-card::before {
    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        3px;

    content:
        "";

    background:
        linear-gradient(
            90deg,
            var(--lk-brand-burgundy),
            var(--lk-brand-gold)
        );
}

.lk-bank-brand {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        18px;
}

.lk-bank-brand strong {
    font-family:
        var(--font-display),
        Georgia,
        serif;

    font-size:
        clamp(18px, 2vw, 23px);
}

.lk-bank-account-number {
    display:
        block;

    margin:
        8px 0 4px;

    color:
        var(--lk-brand-ink);

    font-family:
        var(--font-mono),
        monospace;

    font-size:
        clamp(18px, 2.4vw, 26px);

    font-weight:
        800;

    letter-spacing:
        .025em;

    word-break:
        break-word;
}

.lk-bank-holder {
    color:
        var(--lk-brand-muted);

    font-size:
        14px;

    line-height:
        1.55;
}

.lk-bank-copy {
    min-height:
        40px;

    padding:
        9px 13px;

    border:
        1px solid
        var(--lk-brand-line-strong);

    border-radius:
        var(--lk-button-radius);

    background:
        var(--lk-brand-paper);

    color:
        var(--lk-brand-burgundy-deep);

    font-weight:
        750;

    cursor:
        pointer;

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

.lk-bank-copy:hover,
.lk-bank-copy:focus-visible {
    border-color:
        var(--lk-brand-burgundy-soft);

    background:
        var(--lk-brand-ivory);

    transform:
        translateY(-1px);
}


/* TRUST / NOTE */

.lk-support-note,
.lk-about-note {
    padding:
        16px 18px;

    border:
        1px solid
        var(--lk-brand-line);

    border-radius:
        14px;

    background:
        rgba(248, 243, 235, .72);

    box-shadow:
        0 8px 22px
        rgba(47, 33, 28, .04);
}


/* ABOUT PHILOSOPHY */

.lk-logos-section,
.lk-about-principles,
.lk-about-opening,
.lk-support-content {
    margin-top:
        var(--lk-institutional-section-gap);
}

.lk-logos-section {
    padding:
        clamp(26px, 4vw, 42px);

    border:
        1px solid
        var(--lk-brand-line);

    border-radius:
        var(--lk-card-radius);

    background:
        linear-gradient(
            145deg,
            var(--lk-brand-paper),
            var(--lk-brand-ivory)
        );
}

.lk-logos-section h2 {
    max-width:
        760px;

    color:
        var(--lk-brand-burgundy-deep);

    font-size:
        clamp(28px, 4vw, 44px);

    line-height:
        1.08;

    letter-spacing:
        -.035em;
}

.lk-logos-section p {
    max-width:
        760px;

    color:
        var(--lk-brand-muted);

    line-height:
        1.72;
}


/* PRINCIPLE CARDS */

.lk-about-principles-grid,
.lk-about-principles-list {
    gap:
        var(--lk-institutional-card-gap);
}

.lk-about-principle,
.lk-principle-card {
    padding:
        clamp(18px, 2.4vw, 25px);

    border:
        1px solid
        var(--lk-brand-line);

    border-radius:
        var(--lk-card-radius);

    background:
        var(--lk-brand-paper);

    box-shadow:
        0 12px 30px
        rgba(47, 33, 28, .055);
}


/* CTA */

.lk-support-actions,
.lk-about-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    align-items:
        center;
}

.lk-support-primary,
.lk-about-primary {
    min-height:
        44px;

    padding:
        11px 17px;

    border-radius:
        var(--lk-button-radius);
}


/* LOGO CONTAINMENT */

.lk-support-official-logo,
.lk-about-official-logo {
    display:
        block;

    width:
        auto;

    max-width:
        118px;

    max-height:
        128px;

    object-fit:
        contain;
}


/* RESPONSIVE */

@media (max-width: 760px) {

    .lk-support-bank-grid,
    .lk-about-bank-grid {
        grid-template-columns:
            1fr;
    }

    .lk-logos-section {
        padding:
            24px
            20px;
    }

    .lk-support-actions,
    .lk-about-actions {
        align-items:
            stretch;
    }

    .lk-support-actions > *,
    .lk-about-actions > * {
        width:
            100%;
    }

    .lk-support-official-logo,
    .lk-about-official-logo {
        max-width:
            92px;

        max-height:
            100px;
    }
}


@media (
    prefers-reduced-motion:
    reduce
) {

    .lk-bank-copy {
        transition:
            none;
    }

    .lk-bank-copy:hover,
    .lk-bank-copy:focus-visible {
        transform:
            none;
    }
}


/* =========================================================
   3X-B5-B4-C-FIX1
   SUPPORT / ABOUT CONTRAST HARDENING
   ========================================================= */


/*
Teks pada hero gelap.
*/
.lk-support-hero,
.lk-about-support-hero {
    color:
        #fff8ed;
}


.lk-support-hero h1,
.lk-support-hero h2,
.lk-support-hero h3,
.lk-about-support-hero h1,
.lk-about-support-hero h2,
.lk-about-support-hero h3 {
    color:
        #fffaf2;
}


.lk-support-hero p,
.lk-about-support-hero p {
    color:
        rgba(255, 248, 237, .82);
}


/*
Card rekening berwarna terang di dalam hero
sebelumnya mewarisi foreground terang sehingga
nomor rekening hampir tidak terlihat.
*/
.lk-support-hero
.lk-bank-modern-card,

.lk-support-hero
.lk-support-bank-card,

.lk-support-hero
.lk-support-hero-card,

.lk-support-page
.lk-bank-modern-card {

    color:
        #2f211c;
}


.lk-support-hero
.lk-bank-modern-card h1,

.lk-support-hero
.lk-bank-modern-card h2,

.lk-support-hero
.lk-bank-modern-card h3,

.lk-support-hero
.lk-support-bank-card h1,

.lk-support-hero
.lk-support-bank-card h2,

.lk-support-hero
.lk-support-bank-card h3 {

    color:
        #4d1728;
}


.lk-support-hero
.lk-bank-modern-card p,

.lk-support-hero
.lk-support-bank-card p {

    color:
        #6b4a37;
}


.lk-support-hero
.lk-bank-account-number,

.lk-support-page
.lk-bank-account-number {

    color:
        #4d1728 !important;

    opacity:
        1 !important;
}


.lk-support-hero
.lk-bank-holder,

.lk-support-page
.lk-bank-holder {

    color:
        #6b4a37 !important;

    opacity:
        1 !important;
}


/*
Brand BCA atau label kecil tidak boleh
hilang di card terang.
*/
.lk-support-page
.lk-bank-brand,

.lk-support-page
.lk-bank-brand * {

    opacity:
        1;
}


.lk-support-page
.lk-bank-brand strong {

    color:
        #6f263d;
}


/*
CTA eksternal Saweria / Trakteer.
*/
.lk-support-external-link {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        38px;

    margin-top:
        15px;

    padding:
        9px 14px;

    border:
        1px solid
        rgba(111, 38, 61, .28);

    border-radius:
        8px;

    background:
        #6f263d;

    color:
        #fffaf2 !important;

    font-size:
        11px;

    font-weight:
        800;

    text-decoration:
        none;
}


.lk-support-external-link:hover,
.lk-support-external-link:focus-visible {

    border-color:
        #4d1728;

    background:
        #4d1728;

    color:
        #ffffff !important;
}


/* =========================================================
   3X-B5-B4-C-FIX2
   BANK / SUPPORT CONTRAST HARDENING
   ========================================================= */

/*
Semua elemen di dalam kartu transfer terang
harus kembali memakai foreground gelap.
Selector dibuat sengaja lebih luas karena
markup support memiliki beberapa generasi class.
*/

.lk-support-page
:is(
    .lk-bank-modern-card,
    .lk-support-bank-card,
    .lk-support-account-card,
    .lk-support-transfer-card,
    .bank-card,
    .support-bank-card
) {
    color: #2f211c !important;
}


.lk-support-page
:is(
    .lk-bank-modern-card,
    .lk-support-bank-card,
    .lk-support-account-card,
    .lk-support-transfer-card,
    .bank-card,
    .support-bank-card
)
:is(
    p,
    span,
    small,
    label,
    dt,
    dd
) {
    color: #6b4a37 !important;
    opacity: 1 !important;
}


.lk-support-page
:is(
    .lk-bank-modern-card,
    .lk-support-bank-card,
    .lk-support-account-card,
    .lk-support-transfer-card,
    .bank-card,
    .support-bank-card
)
:is(
    h1,
    h2,
    h3,
    h4,
    strong,
    b
) {
    color: #4d1728 !important;
    opacity: 1 !important;
}


/*
Nomor rekening harus sangat terbaca.
Menjangkau class lama maupun markup generic.
*/

.lk-support-page
:is(
    .lk-bank-account-number,
    .lk-account-number,
    .bank-account-number,
    .account-number,
    [data-bank-account],
    [data-account-number]
) {
    color: #4d1728 !important;
    -webkit-text-fill-color: #4d1728 !important;

    opacity: 1 !important;

    text-shadow: none !important;

    font-weight: 800 !important;
}


/*
Nama pemilik rekening.
*/

.lk-support-page
:is(
    .lk-bank-holder,
    .lk-account-holder,
    .bank-holder,
    .account-holder,
    [data-account-holder]
) {
    color: #2f211c !important;
    -webkit-text-fill-color: #2f211c !important;

    opacity: 1 !important;
}


/*
Card putih di hero tidak boleh mewarisi
foreground putih dari parent hero.
*/

.lk-support-hero
:is(
    article,
    .lk-bank-modern-card,
    .lk-support-bank-card,
    .lk-support-account-card,
    .lk-support-transfer-card
) {
    --as-espresso: #2f211c;
    --as-brown: #6b4a37;
    --as-soft: #76675d;
}


/*
Button tetap burgundy.
*/

.lk-support-page
:is(
    .lk-bank-modern-card,
    .lk-support-bank-card,
    .lk-support-account-card,
    .lk-support-transfer-card
)
:is(
    button,
    .button,
    a[class*="copy"]
) {
    color: #fffaf2 !important;
    -webkit-text-fill-color: #fffaf2 !important;
}



/* =========================================================
   3X-B5-B4-C-FIX2B
   EXACT SUPPORT BANK ACCOUNT CONTRAST
   ========================================================= */

/*
Markup aktual memakai .lk-bank-account-premium.
Override ini sengaja exact agar nomor rekening dan
nama pemilik selalu terbaca di kartu terang.
*/

.lk-support-page
.lk-bank-card
.lk-bank-account-premium {
    color: #2f211c !important;
}


.lk-support-page
.lk-bank-card
.lk-bank-account-premium > span {

    color: #6b4a37 !important;
    -webkit-text-fill-color: #6b4a37 !important;

    opacity: 1 !important;
}


.lk-support-page
.lk-bank-card
.lk-bank-account-premium > strong {

    color: #4d1728 !important;
    -webkit-text-fill-color: #4d1728 !important;

    opacity: 1 !important;

    text-shadow: none !important;

    font-weight: 850 !important;
}


.lk-support-page
.lk-bank-card
.lk-bank-account-premium > div {

    color: #2f211c !important;
    opacity: 1 !important;
}


.lk-support-page
.lk-bank-card
.lk-bank-account-premium > div small {

    color: #76675d !important;
    -webkit-text-fill-color: #76675d !important;

    opacity: 1 !important;
}


.lk-support-page
.lk-bank-card
.lk-bank-account-premium > div b {

    color: #2f211c !important;
    -webkit-text-fill-color: #2f211c !important;

    opacity: 1 !important;
}


.lk-support-page
.lk-bank-card
.lk-bank-brand strong {

    color: #6f263d !important;
    -webkit-text-fill-color: #6f263d !important;

    opacity: 1 !important;
}


.lk-support-page
.lk-bank-card
.lk-bank-security-note p {

    color: #6b4a37 !important;
    -webkit-text-fill-color: #6b4a37 !important;

    opacity: 1 !important;
}

/* B5-FIX3 OFFICIAL ABOUT SUPPORT PALETTE START */

/*
 * =========================================================
 * LANGKAH KUDA
 * Institutional palette lock
 *
 * Burgundy / Brown / Gold / Paper
 * Tidak ada decorative generic accent di luar palet resmi.
 * =========================================================
 */

.lk-about-page,
.lk-support-page {
    --as-espresso:
        var(--lk-brand-espresso, #2b1a16);

    --as-brown:
        var(--lk-brand-brown, #6b4a37);

    --as-soft:
        var(--lk-brand-muted, #76584c);

    --as-red:
        var(--lk-brand-burgundy, #6f263d);

    --as-red-dark:
        var(--lk-brand-burgundy-deep, #4d1728);

    --as-gold:
        var(--lk-brand-gold, #b8925f);

    --as-paper:
        var(--lk-brand-paper, #fffdf8);

    --as-ivory:
        var(--lk-brand-ivory, #f7efe2);

    --as-line:
        var(
            --lk-brand-line,
            rgba(73, 49, 38, .18)
        );
}


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

.lk-about-hero,
.lk-support-hero {
    border-color:
        rgba(184, 146, 95, .32) !important;

    border-top-color:
        var(
            --lk-brand-burgundy,
            #6f263d
        ) !important;

    background:
        radial-gradient(
            circle at 86% 12%,
            rgba(184, 146, 95, .18),
            transparent 32%
        ),
        radial-gradient(
            circle at 8% 100%,
            rgba(111, 38, 61, .30),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            var(
                --lk-brand-burgundy-deep,
                #4d1728
            ) 0%,
            var(
                --lk-brand-brown-deep,
                #493126
            ) 58%,
            var(
                --lk-brand-burgundy,
                #6f263d
            ) 100%
        ) !important;
}


.lk-about-hero .lk-about-eyebrow,
.lk-support-hero .lk-about-eyebrow {
    color:
        var(
            --lk-brand-gold-soft,
            #d8c3a5
        ) !important;
}


.lk-about-hero h1,
.lk-support-hero h1 {
    color:
        var(
            --lk-brand-paper,
            #fffdf8
        ) !important;

    -webkit-text-fill-color:
        var(
            --lk-brand-paper,
            #fffdf8
        ) !important;
}


.lk-about-hero p,
.lk-support-hero p {
    color:
        rgba(
            255,
            253,
            248,
            .82
        ) !important;
}


/* =========================================================
   EYEBROWS / INTRO / EMPHASIS
   ========================================================= */

.lk-about-page .lk-about-eyebrow,
.lk-support-page .lk-about-eyebrow,
.lk-support-intro > span {
    color:
        var(
            --lk-brand-burgundy,
            #6f263d
        );
}


.lk-about-page a:not(.lk-official-brand),
.lk-support-page a:not(.lk-official-brand) {
    accent-color:
        var(
            --lk-brand-burgundy,
            #6f263d
        );
}


/* =========================================================
   PRIMARY CTA
   ========================================================= */

.lk-about-page .lk-support-primary,
.lk-support-page .lk-support-primary {
    border-color:
        var(
            --lk-brand-burgundy,
            #6f263d
        ) !important;

    background:
        var(
            --lk-brand-burgundy,
            #6f263d
        ) !important;

    color:
        var(
            --lk-brand-paper,
            #fffdf8
        ) !important;

    -webkit-text-fill-color:
        var(
            --lk-brand-paper,
            #fffdf8
        ) !important;
}


.lk-about-page .lk-support-primary:hover,
.lk-about-page .lk-support-primary:focus-visible,
.lk-support-page .lk-support-primary:hover,
.lk-support-page .lk-support-primary:focus-visible {
    border-color:
        var(
            --lk-brand-burgundy-deep,
            #4d1728
        ) !important;

    background:
        var(
            --lk-brand-burgundy-deep,
            #4d1728
        ) !important;

    color:
        var(
            --lk-brand-paper,
            #fffdf8
        ) !important;
}


/* =========================================================
   SUPPORT CARDS
   ========================================================= */

.lk-support-page .lk-support-card {
    border-color:
        rgba(
            184,
            146,
            95,
            .28
        );

    background:
        var(
            --lk-brand-paper,
            #fffdf8
        );
}


.lk-support-page .lk-support-card-number {
    color:
        var(
            --lk-brand-burgundy,
            #6f263d
        ) !important;
}


.lk-support-page .lk-support-status {
    border-color:
        rgba(
            184,
            146,
            95,
            .38
        ) !important;

    background:
        rgba(
            216,
            195,
            165,
            .18
        ) !important;

    color:
        var(
            --lk-brand-brown-deep,
            #493126
        ) !important;
}


.lk-support-page .lk-support-status.is-ready {
    border-color:
        var(
            --lk-brand-gold,
            #b8925f
        ) !important;

    background:
        rgba(
            184,
            146,
            95,
            .16
        ) !important;

    color:
        var(
            --lk-brand-burgundy-deep,
            #4d1728
        ) !important;
}


/* =========================================================
   SUPPORT — BANK CARD
   Kunci contrast supaya rekening tidak putih di atas putih.
   ========================================================= */

.lk-support-page
.lk-support-card.lk-bank-card {
    border:
        1px solid
        rgba(
            184,
            146,
            95,
            .44
        ) !important;

    background:
        linear-gradient(
            145deg,
            #fffdf8 0%,
            #f8f0e4 100%
        ) !important;

    color:
        var(
            --lk-brand-brown-deep,
            #493126
        ) !important;
}


.lk-support-page
.lk-bank-card h2,

.lk-support-page
.lk-bank-card > p,

.lk-support-page
.lk-bank-brand,

.lk-support-page
.lk-bank-brand *,

.lk-support-page
.lk-bank-account-premium,

.lk-support-page
.lk-bank-account-premium * {
    opacity:
        1 !important;

    mix-blend-mode:
        normal !important;
}


.lk-support-page
.lk-bank-brand > span,

.lk-support-page
.lk-bank-account-premium small,

.lk-support-page
.lk-bank-account-premium
.lk-bank-account-head > span {
    color:
        var(
            --lk-brand-muted,
            #76584c
        ) !important;

    -webkit-text-fill-color:
        var(
            --lk-brand-muted,
            #76584c
        ) !important;
}


.lk-support-page
.lk-bank-brand strong,

.lk-support-page
.lk-bank-account-bank {
    color:
        var(
            --lk-brand-burgundy,
            #6f263d
        ) !important;

    -webkit-text-fill-color:
        var(
            --lk-brand-burgundy,
            #6f263d
        ) !important;
}


/*
 * NOMOR REKENING — SUPPORT
 *
 * Selector ini sengaja sangat spesifik dan memakai !important
 * karena file lama mempunyai beberapa generasi styling.
 */
.lk-support-page
.lk-bank-account-premium > strong {
    display:
        block !important;

    position:
        relative !important;

    z-index:
        5 !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    color:
        var(
            --lk-brand-burgundy-deep,
            #4d1728
        ) !important;

    -webkit-text-fill-color:
        var(
            --lk-brand-burgundy-deep,
            #4d1728
        ) !important;

    background:
        transparent !important;

    background-image:
        none !important;

    -webkit-background-clip:
        border-box !important;

    background-clip:
        border-box !important;

    filter:
        none !important;

    text-shadow:
        none !important;

    font-variant-numeric:
        tabular-nums;

    letter-spacing:
        .045em;
}


.lk-support-page
.lk-bank-account-premium > div b {
    color:
        var(
            --lk-brand-brown-deep,
            #493126
        ) !important;

    -webkit-text-fill-color:
        var(
            --lk-brand-brown-deep,
            #493126
        ) !important;
}


/* =========================================================
   TENTANG KAMI — SUPPORT / BANK PANEL
   ========================================================= */

.lk-about-page
.lk-about-support {
    border-color:
        rgba(
            184,
            146,
            95,
            .30
        ) !important;
}


.lk-about-page
.lk-about-support-copy
.lk-about-eyebrow {
    color:
        var(
            --lk-brand-burgundy,
            #6f263d
        ) !important;
}


.lk-about-page
.lk-about-bank.lk-bank-modern-card {
    border:
        1px solid
        rgba(
            184,
            146,
            95,
            .44
        ) !important;

    background:
        linear-gradient(
            145deg,
            #fffdf8 0%,
            #f8f0e4 100%
        ) !important;

    color:
        var(
            --lk-brand-brown-deep,
            #493126
        ) !important;
}


.lk-about-page
.lk-bank-modern-head span,

.lk-about-page
.lk-bank-modern-account small,

.lk-about-page
.lk-bank-modern-holder span {
    color:
        var(
            --lk-brand-muted,
            #76584c
        ) !important;

    -webkit-text-fill-color:
        var(
            --lk-brand-muted,
            #76584c
        ) !important;
}


.lk-about-page
.lk-bank-modern-head strong,

.lk-about-page
.lk-bank-modern-holder strong {
    color:
        var(
            --lk-brand-brown-deep,
            #493126
        ) !important;

    -webkit-text-fill-color:
        var(
            --lk-brand-brown-deep,
            #493126
        ) !important;
}


/*
 * NOMOR REKENING — TENTANG
 */
.lk-about-page
.lk-bank-modern-account b {
    display:
        block !important;

    position:
        relative !important;

    z-index:
        5 !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    color:
        var(
            --lk-brand-burgundy-deep,
            #4d1728
        ) !important;

    -webkit-text-fill-color:
        var(
            --lk-brand-burgundy-deep,
            #4d1728
        ) !important;

    background:
        transparent !important;

    background-image:
        none !important;

    -webkit-background-clip:
        border-box !important;

    background-clip:
        border-box !important;

    filter:
        none !important;

    text-shadow:
        none !important;

    font-variant-numeric:
        tabular-nums;

    letter-spacing:
        .045em;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="malam"]
.lk-support-page
.lk-support-card.lk-bank-card,

html[data-theme="malam"]
.lk-about-page
.lk-about-bank.lk-bank-modern-card {
    border-color:
        rgba(
            184,
            146,
            95,
            .42
        ) !important;

    background:
        linear-gradient(
            145deg,
            #2b1a16 0%,
            #38241e 100%
        ) !important;

    color:
        var(
            --lk-brand-gold-soft,
            #d8c3a5
        ) !important;
}


html[data-theme="malam"]
.lk-support-page
.lk-bank-account-premium > strong,

html[data-theme="malam"]
.lk-about-page
.lk-bank-modern-account b {
    color:
        var(
            --lk-brand-gold-soft,
            #d8c3a5
        ) !important;

    -webkit-text-fill-color:
        var(
            --lk-brand-gold-soft,
            #d8c3a5
        ) !important;
}


html[data-theme="malam"]
.lk-support-page
.lk-bank-brand strong,

html[data-theme="malam"]
.lk-support-page
.lk-bank-account-premium > div b,

html[data-theme="malam"]
.lk-about-page
.lk-bank-modern-head strong,

html[data-theme="malam"]
.lk-about-page
.lk-bank-modern-holder strong {
    color:
        var(
            --lk-brand-paper,
            #fffdf8
        ) !important;

    -webkit-text-fill-color:
        var(
            --lk-brand-paper,
            #fffdf8
        ) !important;
}


/* B5-FIX3 OFFICIAL ABOUT SUPPORT PALETTE END */

/* LANGKAH KUDA SUPPORT B6-A4-FIX1 PREMIUM HERO START */

/*
 * Premium editorial hero.
 * Tidak menggunakan warna generik/startup:
 * burgundy, brown, warm gold.
 */

.lk-support-page {
  --lk-support-burgundy:
    #6f263d;

  --lk-support-burgundy-deep:
    #4d1728;

  --lk-support-burgundy-soft:
    #8a4057;

  --lk-support-brown:
    #6b4a37;

  --lk-support-gold:
    #b8925f;

  --lk-support-gold-soft:
    #d8c3a5;
}


/* ---------------------------------------------------------
   HERO SHELL
   --------------------------------------------------------- */

.lk-support-page .lk-support-hero {
  position: relative;
  isolation: isolate;

  display: grid;
  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(240px, .65fr);

  align-items: center;

  gap:
    clamp(
      28px,
      5vw,
      80px
    );

  min-height:
    clamp(
      390px,
      44vw,
      520px
    );

  margin:
    24px
    auto
    48px;

  padding:
    clamp(
      40px,
      6vw,
      82px
    );

  overflow: hidden;

  border:
    1px solid
    rgba(
      216,
      195,
      165,
      .42
    );

  border-radius: 32px;

  background:
    radial-gradient(
      circle at 82% 16%,
      rgba(216,195,165,.22),
      transparent 23%
    ),
    radial-gradient(
      circle at 72% 84%,
      rgba(184,146,95,.18),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #3a111f 0%,
      #4d1728 28%,
      #6f263d 66%,
      #493126 116%
    );

  box-shadow:
    0 28px 80px
    rgba(54,18,30,.19),
    inset 0 1px 0
    rgba(255,255,255,.10);

  color: #fffaf3;

  transform:
    translateZ(0);

  transition:
    transform .45s
      cubic-bezier(.2,.7,.2,1),
    box-shadow .45s ease,
    border-color .45s ease;
}


/* Motif garis/orbit besar */
.lk-support-page
.lk-support-hero::before {
  content: "";

  position: absolute;
  z-index: -2;

  width: 520px;
  height: 520px;

  top: -205px;
  right: -105px;

  border:
    1px solid
    rgba(216,195,165,.24);

  border-radius: 50%;

  box-shadow:
    0 0 0 48px
      rgba(216,195,165,.035),
    0 0 0 104px
      rgba(216,195,165,.025),
    0 0 0 170px
      rgba(216,195,165,.016);

  transition:
    transform .8s
      cubic-bezier(.2,.8,.2,1);
}


/*
 * Motif kisi / garis intelektual.
 */
.lk-support-page
.lk-support-hero::after {
  content: "";

  position: absolute;
  z-index: -3;
  inset: 0;

  pointer-events: none;

  opacity: .32;

  background-image:
    linear-gradient(
      rgba(255,255,255,.055)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.045)
      1px,
      transparent 1px
    );

  background-size:
    72px 72px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 28%,
      #000
    );
}


/* ---------------------------------------------------------
   HERO COPY
   --------------------------------------------------------- */

.lk-support-page
.lk-support-hero > div:first-child {
  position: relative;
  z-index: 3;

  max-width: 760px;
}


.lk-support-page
.lk-support-hero
.lk-about-eyebrow {
  display: inline-flex;

  margin-bottom: 22px;

  color:
    var(
      --lk-support-gold-soft
    );

  font-size:
    clamp(
      .72rem,
      .9vw,
      .84rem
    );

  font-weight: 700;

  letter-spacing: .16em;

  text-transform: uppercase;
}


.lk-support-page
.lk-support-hero h1 {
  max-width: 780px;

  margin:
    0
    0
    24px;

  color: #fffaf3;

  font-size:
    clamp(
      2.55rem,
      5.5vw,
      5.4rem
    );

  line-height: .96;

  letter-spacing: -.045em;

  text-wrap: balance;

  text-shadow:
    0 8px 28px
    rgba(0,0,0,.16);
}


.lk-support-page
.lk-support-hero p {
  max-width: 670px;

  margin: 0;

  color:
    rgba(
      255,
      250,
      243,
      .82
    );

  font-size:
    clamp(
      1rem,
      1.45vw,
      1.23rem
    );

  line-height: 1.75;
}


/* ---------------------------------------------------------
   LOGO PLAQUE
   --------------------------------------------------------- */

.lk-support-page
.lk-support-heart {
  position: relative;
  z-index: 3;

  display: grid;
  place-items: center;

  width:
    min(
      100%,
      330px
    );

  aspect-ratio: 1 / 1;

  justify-self: end;

  border:
    1px solid
    rgba(216,195,165,.34);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 30% 24%,
      rgba(255,255,255,.16),
      rgba(255,255,255,.045) 42%,
      rgba(0,0,0,.08)
    );

  box-shadow:
    0 22px 60px
      rgba(23,5,12,.24),
    inset 0 1px 0
      rgba(255,255,255,.15);

  backdrop-filter:
    blur(12px);

  transition:
    transform .55s
      cubic-bezier(.2,.8,.2,1),
    box-shadow .55s ease,
    border-color .55s ease;
}


.lk-support-page
.lk-support-heart::before {
  content: "";

  position: absolute;

  inset: 18px;

  border:
    1px solid
    rgba(216,195,165,.22);

  border-radius: inherit;

  pointer-events: none;
}


.lk-support-page
.lk-support-heart::after {
  content: "";

  position: absolute;

  width: 9px;
  height: 9px;

  top: 18%;
  right: 12%;

  border-radius: 50%;

  background:
    var(
      --lk-support-gold-soft
    );

  box-shadow:
    0 0 0 7px
      rgba(216,195,165,.08),
    0 0 28px
      rgba(216,195,165,.70);

  animation:
    lk-support-star-pulse
    3.2s ease-in-out infinite;
}


.lk-support-page
.lk-support-hero
.lk-support-official-logo {
  display: block !important;

  width:
    clamp(
      112px,
      12vw,
      172px
    ) !important;

  height: auto !important;

  max-width: 58%;

  opacity: .96;

  filter:
    brightness(0)
    invert(1)
    sepia(.12)
    saturate(.65)
    drop-shadow(
      0 14px 24px
      rgba(0,0,0,.22)
    );

  transform:
    translateY(0)
    scale(1);

  transition:
    transform .65s
      cubic-bezier(.18,.8,.2,1),
    filter .65s ease;
}


/* ---------------------------------------------------------
   HOVER / MOTION
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

  .lk-support-page
  .lk-support-hero:hover {
    transform:
      translateY(-4px);

    border-color:
      rgba(
        216,
        195,
        165,
        .62
      );

    box-shadow:
      0 38px 100px
      rgba(54,18,30,.26),
      inset 0 1px 0
      rgba(255,255,255,.12);
  }


  .lk-support-page
  .lk-support-hero:hover::before {
    transform:
      translate(-24px, 28px)
      rotate(10deg)
      scale(1.04);
  }


  .lk-support-page
  .lk-support-hero:hover
  .lk-support-heart {
    transform:
      translateY(-8px)
      rotate(2.5deg)
      scale(1.035);

    border-color:
      rgba(
        216,
        195,
        165,
        .64
      );

    box-shadow:
      0 34px 72px
      rgba(23,5,12,.30),
      0 0 50px
      rgba(184,146,95,.12),
      inset 0 1px 0
      rgba(255,255,255,.18);
  }


  .lk-support-page
  .lk-support-hero:hover
  .lk-support-official-logo {
    transform:
      translateY(-6px)
      scale(1.075);

    filter:
      brightness(0)
      invert(1)
      sepia(.18)
      saturate(.78)
      drop-shadow(
        0 22px 30px
        rgba(0,0,0,.30)
      );
  }
}


/* ---------------------------------------------------------
   SUPPORT CARDS — subtle premium hover
   --------------------------------------------------------- */

.lk-support-page
.lk-support-card {
  transition:
    transform .32s ease,
    box-shadow .32s ease,
    border-color .32s ease;
}


@media (hover: hover) and (pointer: fine) {

  .lk-support-page
  .lk-support-card:hover {
    transform:
      translateY(-6px);

    border-color:
      rgba(
        184,
        146,
        95,
        .52
      );

    box-shadow:
      0 24px 54px
      rgba(73,49,38,.13);
  }
}


/* ---------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------- */

@keyframes lk-support-star-pulse {

  0%,
  100% {
    opacity: .55;

    transform:
      scale(.84);
  }

  50% {
    opacity: 1;

    transform:
      scale(1.18);
  }
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {

  .lk-support-page
  .lk-support-hero {
    grid-template-columns: 1fr;

    min-height: 0;

    padding:
      clamp(
        34px,
        7vw,
        58px
      );
  }


  .lk-support-page
  .lk-support-heart {
    width:
      min(
        240px,
        64vw
      );

    justify-self: start;
  }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 560px) {

  .lk-support-page
  .lk-support-hero {
    margin-top: 14px;

    padding:
      32px
      24px;

    border-radius: 24px;
  }


  .lk-support-page
  .lk-support-hero h1 {
    font-size:
      clamp(
        2.2rem,
        13vw,
        3.5rem
      );
  }


  .lk-support-page
  .lk-support-heart {
    width:
      min(
        190px,
        58vw
      );
  }
}


/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .lk-support-page
  .lk-support-hero,

  .lk-support-page
  .lk-support-hero::before,

  .lk-support-page
  .lk-support-heart,

  .lk-support-page
  .lk-support-official-logo,

  .lk-support-page
  .lk-support-card {
    transition: none !important;
  }


  .lk-support-page
  .lk-support-heart::after {
    animation: none !important;
  }
}


/* Dark mode tetap premium */
html[data-theme="malam"]
.lk-support-page
.lk-support-hero {
  border-color:
    rgba(
      216,
      195,
      165,
      .30
    );

  background:
    radial-gradient(
      circle at 82% 16%,
      rgba(216,195,165,.15),
      transparent 23%
    ),
    linear-gradient(
      135deg,
      #210b13,
      #35101d 40%,
      #4d1728 100%
    );
}

/* LANGKAH KUDA SUPPORT B6-A4-FIX1 PREMIUM HERO END */

/* LANGKAH KUDA SUPPORT B6-A4-FIX2 HERO REFINE START */

/*
 * Refine hero agar tidak terlalu besar,
 * lebih proporsional, lebih elegan,
 * tetap kaya visual, dan teks terbaca jelas.
 */

.lk-support-page .lk-support-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  min-height: clamp(300px, 34vw, 420px);
  padding:
    clamp(28px, 3.4vw, 44px)
    clamp(28px, 4vw, 46px);

  border-radius: 26px;

  background:
    radial-gradient(
      circle at 82% 24%,
      rgba(216, 195, 165, 0.16) 0,
      rgba(216, 195, 165, 0.08) 18%,
      rgba(216, 195, 165, 0.00) 42%
    ),
    radial-gradient(
      circle at 14% 88%,
      rgba(184, 146, 95, 0.18) 0,
      rgba(184, 146, 95, 0.05) 24%,
      rgba(184, 146, 95, 0.00) 46%
    ),
    linear-gradient(
      132deg,
      #5a1d34 0%,
      #6f263d 32%,
      #6a362f 68%,
      #8a4057 100%
    );

  border:
    1px solid
    rgba(216, 195, 165, 0.20);

  box-shadow:
    0 22px 58px rgba(59, 20, 33, 0.18),
    inset 0 1px 0 rgba(255, 244, 232, 0.12);
}

.lk-support-page .lk-support-hero::before,
.lk-support-page .lk-support-hero::after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
  z-index: 0;
}

.lk-support-page .lk-support-hero::before {
  top: -12%;
  right: -4%;
  width: clamp(220px, 34vw, 420px);
  aspect-ratio: 1;

  border-radius: 999px;
  border:
    1px solid
    rgba(231, 214, 189, 0.18);

  box-shadow:
    0 0 0 28px rgba(231, 214, 189, 0.06),
    0 0 0 74px rgba(231, 214, 189, 0.03);
}

.lk-support-page .lk-support-hero::after {
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );

  background-size: 36px 36px;
  mask-image:
    linear-gradient(
      120deg,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.28) 58%,
      transparent 100%
    );

  opacity: 0.34;
}

.lk-support-page .lk-support-hero > * {
  position: relative;
  z-index: 1;
}

.lk-support-page .lk-support-hero :is(
  .lk-support-hero-grid,
  .lk-support-hero-layout,
  .lk-support-hero-inner,
  .lk-support-hero-shell
) {
  display: grid;
  grid-template-columns:
    minmax(0, 1.18fr)
    minmax(220px, 0.82fr);

  gap: clamp(26px, 4vw, 54px);
  align-items: center;
}

.lk-support-page .lk-support-hero :is(
  .lk-support-hero-copy,
  .lk-support-hero-content,
  .lk-support-hero-text
) {
  max-width: 760px;
}

.lk-support-page .lk-support-hero :is(
  .lk-support-hero-kicker,
  .lk-support-hero-eyebrow,
  .lk-support-eyebrow,
  .lk-section-eyebrow
) {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: rgba(255, 241, 228, 0.82);
}

.lk-support-page .lk-support-hero :is(
  .lk-support-hero-kicker,
  .lk-support-hero-eyebrow,
  .lk-support-eyebrow,
  .lk-section-eyebrow
)::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 245, 234, 0.85),
      rgba(255, 245, 234, 0.16)
    );
}

.lk-support-page .lk-support-hero :is(
  h1,
  .lk-support-hero-title,
  .lk-support-title
) {
  margin: 0 0 16px;
  max-width: 11ch;

  font-size: clamp(40px, 5.2vw, 78px);
  line-height: 0.94;
  letter-spacing: -0.055em;
  font-weight: 800;

  color: #fff8f2;
  text-wrap: balance;
}

.lk-support-page .lk-support-hero :is(
  p,
  .lk-support-hero-body,
  .lk-support-hero-summary,
  .lk-support-hero-lead,
  .lk-support-hero-description
) {
  max-width: 38ch;
  margin: 0;

  font-size: clamp(15px, 1.45vw, 18px);
  line-height: 1.72;

  color: rgba(255, 245, 235, 0.90);
  text-wrap: pretty;
}

.lk-support-page .lk-support-hero :is(
  .lk-support-hero-media,
  .lk-support-hero-aside,
  .lk-support-hero-brand,
  .lk-support-hero-mark-wrap
) {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: clamp(180px, 24vw, 240px);
}

.lk-support-page .lk-support-hero :is(
  .lk-support-hero-logo,
  .lk-support-hero-mark,
  .lk-support-brand-tile,
  .lk-support-hero-emblem
) {
  display: grid;
  place-items: center;

  width: clamp(122px, 16vw, 176px);
  aspect-ratio: 1;

  border-radius: 26px;
  padding: 18px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 249, 242, 0.98),
      rgba(243, 229, 211, 0.94)
    );

  border:
    1px solid
    rgba(128, 78, 56, 0.10);

  box-shadow:
    0 18px 42px rgba(46, 16, 26, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.18) inset;

  animation:
    lk-support-mark-float 7.2s ease-in-out infinite,
    lk-support-mark-glow 5.4s ease-in-out infinite;
}

.lk-support-page .lk-support-hero :is(
  .lk-support-hero-logo,
  .lk-support-hero-mark,
  .lk-support-brand-tile,
  .lk-support-hero-emblem
) img {
  display: block;
  width: min(72%, 124px);
  height: auto;

  filter:
    drop-shadow(0 8px 18px rgba(72, 33, 26, 0.18));
}

.lk-support-page .lk-support-hero:hover {
  transform: translateY(-2px);
  box-shadow:
    0 28px 72px rgba(59, 20, 33, 0.22),
    inset 0 1px 0 rgba(255, 244, 232, 0.14);
}

.lk-support-page :is(
  .lk-support-intro,
  .lk-support-lead,
  .lk-support-summary
) {
  max-width: 940px;
  margin-top: 26px;
}

.lk-support-page :is(
  .lk-support-intro p,
  .lk-support-lead p,
  .lk-support-summary p
) {
  max-width: 900px;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.52;
  color: #6b4a37;
}

@keyframes lk-support-mark-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

@keyframes lk-support-mark-glow {
  0%,
  100% {
    box-shadow:
      0 18px 42px rgba(46, 16, 26, 0.24),
      0 0 0 1px rgba(255, 255, 255, 0.18) inset;
  }

  50% {
    box-shadow:
      0 24px 56px rgba(46, 16, 26, 0.30),
      0 0 0 1px rgba(255, 255, 255, 0.24) inset,
      0 0 26px rgba(216, 195, 165, 0.22);
  }
}

@media (max-width: 1100px) {
  .lk-support-page .lk-support-hero {
    min-height: auto;
  }

  .lk-support-page .lk-support-hero :is(
    .lk-support-hero-grid,
    .lk-support-hero-layout,
    .lk-support-hero-inner,
    .lk-support-hero-shell
  ) {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .lk-support-page .lk-support-hero :is(
    h1,
    .lk-support-hero-title,
    .lk-support-title
  ) {
    max-width: 12ch;
  }

  .lk-support-page .lk-support-hero :is(
    p,
    .lk-support-hero-body,
    .lk-support-hero-summary,
    .lk-support-hero-lead,
    .lk-support-hero-description
  ) {
    max-width: 46ch;
  }
}

@media (max-width: 720px) {
  .lk-support-page .lk-support-hero {
    padding: 24px 20px;
    border-radius: 22px;
  }

  .lk-support-page .lk-support-hero::before {
    right: -18%;
    width: 240px;
  }

  .lk-support-page .lk-support-hero :is(
    h1,
    .lk-support-hero-title,
    .lk-support-title
  ) {
    font-size: clamp(34px, 11vw, 52px);
    line-height: 0.96;
  }

  .lk-support-page .lk-support-hero :is(
    .lk-support-hero-logo,
    .lk-support-hero-mark,
    .lk-support-brand-tile,
    .lk-support-hero-emblem
  ) {
    width: 132px;
    border-radius: 22px;
  }

  .lk-support-page :is(
    .lk-support-intro p,
    .lk-support-lead p,
    .lk-support-summary p
  ) {
    font-size: 17px;
    line-height: 1.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lk-support-page .lk-support-hero,
  .lk-support-page .lk-support-hero :is(
    .lk-support-hero-logo,
    .lk-support-hero-mark,
    .lk-support-brand-tile,
    .lk-support-hero-emblem
  ) {
    animation: none !important;
    transition: none !important;
  }
}

/* LANGKAH KUDA SUPPORT B6-A4-FIX2 HERO REFINE END */

/* LANGKAH KUDA SUPPORT B6-A4-FINAL3 START */

/*
 * Exact markup:
 *
 * header.lk-support-hero
 *   > div:first-child
 *       .lk-about-eyebrow
 *       h1
 *       p
 *   > .lk-support-heart
 *       img.lk-support-official-logo
 */


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

.lk-support-page .lk-support-hero {
  position: relative !important;
  isolation: isolate !important;

  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    160px !important;

  align-items: center !important;

  gap:
    clamp(
      26px,
      4vw,
      52px
    ) !important;

  min-height: 0 !important;
  max-height: none !important;

  padding:
    clamp(28px, 3vw, 38px)
    clamp(30px, 4vw, 48px)
    !important;

  margin-bottom:
    34px !important;

  overflow: hidden !important;

  border:
    1px solid
    rgba(216, 195, 165, .32)
    !important;

  border-radius:
    24px !important;

  background:
    radial-gradient(
      circle at 86% 20%,
      rgba(226, 202, 164, .20),
      transparent 29%
    ),
    radial-gradient(
      circle at 16% 112%,
      rgba(188, 135, 88, .18),
      transparent 39%
    ),
    linear-gradient(
      125deg,
      #4d1728 0%,
      #642039 36%,
      #713443 68%,
      #6b4a37 118%
    )
    !important;

  color:
    #fff8ef !important;

  box-shadow:
    0 22px 55px
      rgba(67, 25, 38, .18),
    inset 0 1px 0
      rgba(255, 255, 255, .10)
    !important;

  transition:
    transform .34s ease,
    box-shadow .34s ease
    !important;
}


/* ==========================================================
   DECORATIVE MOTIF
   ========================================================== */

.lk-support-page
.lk-support-hero::before {
  content: "" !important;

  position: absolute !important;
  z-index: 0 !important;

  top: -145px !important;
  right: -90px !important;

  width: 390px !important;
  height: 390px !important;

  border:
    1px solid
    rgba(232, 211, 180, .22)
    !important;

  border-radius:
    50% !important;

  background:
    transparent !important;

  box-shadow:
    0 0 0 46px
      rgba(232, 211, 180, .045),
    0 0 0 98px
      rgba(232, 211, 180, .026)
    !important;

  pointer-events:
    none !important;

  transition:
    transform .65s ease
    !important;
}


.lk-support-page
.lk-support-hero::after {
  content: "" !important;

  position: absolute !important;
  z-index: 0 !important;

  inset: 0 !important;

  background-image:
    linear-gradient(
      90deg,
      rgba(255,255,255,.035)
      1px,
      transparent 1px
    ),
    linear-gradient(
      rgba(255,255,255,.03)
      1px,
      transparent 1px
    )
    !important;

  background-size:
    42px 42px !important;

  mask-image:
    linear-gradient(
      110deg,
      #000 0%,
      rgba(0,0,0,.42) 58%,
      transparent 94%
    );

  opacity:
    .48 !important;

  pointer-events:
    none !important;
}


.lk-support-page
.lk-support-hero > * {
  position: relative !important;
  z-index: 2 !important;
}


/* ==========================================================
   COPY
   ========================================================== */

.lk-support-page
.lk-support-hero
> div:first-child {
  min-width: 0 !important;

  max-width:
    720px !important;
}


.lk-support-page
.lk-support-hero
.lk-about-eyebrow {
  display: inline-flex !important;

  align-items: center !important;

  gap: 10px !important;

  margin:
    0
    0
    14px
    !important;

  color:
    #d8c3a5 !important;

  font-size:
    11px !important;

  font-weight:
    800 !important;

  letter-spacing:
    .16em !important;

  line-height:
    1.2 !important;

  text-transform:
    uppercase !important;
}


.lk-support-page
.lk-support-hero
.lk-about-eyebrow::before {
  content: "" !important;

  display: block !important;

  width: 25px !important;
  height: 1px !important;

  background:
    #d8c3a5 !important;
}


/*
 * Sengaja jauh lebih kecil daripada
 * hero sebelumnya.
 */
.lk-support-page
.lk-support-hero h1 {
  width: auto !important;
  max-width: 12ch !important;

  margin:
    0
    0
    16px
    !important;

  color:
    #fff8ef !important;

  font-size:
    clamp(
      36px,
      4.1vw,
      56px
    ) !important;

  font-weight:
    750 !important;

  line-height:
    .98 !important;

  letter-spacing:
    -.045em !important;

  text-wrap:
    balance;
}


.lk-support-page
.lk-support-hero p {
  width: auto !important;

  max-width:
    55ch !important;

  margin: 0 !important;

  color:
    rgba(
      255,
      247,
      236,
      .86
    ) !important;

  font-size:
    clamp(
      15px,
      1.25vw,
      17px
    ) !important;

  line-height:
    1.68 !important;

  text-wrap:
    pretty;
}


/* ==========================================================
   LOGO PANEL
   ========================================================== */

.lk-support-page
.lk-support-hero
.lk-support-heart {
  box-sizing: border-box !important;

  display: grid !important;
  place-items: center !important;

  justify-self: end !important;

  width:
    148px !important;

  height:
    148px !important;

  min-width:
    148px !important;

  max-width:
    148px !important;

  min-height:
    148px !important;

  max-height:
    148px !important;

  margin: 0 !important;

  padding:
    20px !important;

  overflow:
    hidden !important;

  color:
    transparent !important;

  font-size:
    0 !important;

  background:
    linear-gradient(
      145deg,
      #fffaf2,
      #eadbc5
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.54)
    !important;

  border-radius:
    28px !important;

  box-shadow:
    0 22px 44px
      rgba(42, 13, 23, .25),
    inset 0 1px 0
      rgba(255,255,255,.9)
    !important;

  transform:
    rotate(0deg)
    translateY(0)
    !important;

  transition:
    transform .38s ease,
    box-shadow .38s ease
    !important;
}


.lk-support-page
.lk-support-hero
.lk-support-official-logo {
  display: block !important;

  width:
    92px !important;

  height:
    auto !important;

  min-width:
    0 !important;

  max-width:
    92px !important;

  min-height:
    0 !important;

  max-height:
    none !important;

  margin: 0 !important;

  object-fit:
    contain !important;

  opacity:
    1 !important;

  filter:
    drop-shadow(
      0 8px 14px
      rgba(88, 42, 31, .16)
    )
    !important;

  transform:
    none !important;

  transition:
    transform .38s ease
    !important;
}


/* ==========================================================
   HOVER
   ========================================================== */

@media (hover: hover) and (pointer: fine) {

  .lk-support-page
  .lk-support-hero:hover {
    transform:
      translateY(-3px)
      !important;

    box-shadow:
      0 30px 70px
        rgba(67, 25, 38, .24),
      inset 0 1px 0
        rgba(255,255,255,.12)
      !important;
  }


  .lk-support-page
  .lk-support-hero:hover::before {
    transform:
      translate(
        -16px,
        18px
      )
      rotate(8deg)
      !important;
  }


  .lk-support-page
  .lk-support-hero:hover
  .lk-support-heart {
    transform:
      translateY(-6px)
      rotate(2deg)
      scale(1.025)
      !important;

    box-shadow:
      0 28px 58px
        rgba(42, 13, 23, .32),
      0 0 28px
        rgba(216, 195, 165, .16)
      !important;
  }


  .lk-support-page
  .lk-support-hero:hover
  .lk-support-official-logo {
    transform:
      scale(1.06)
      !important;
  }
}


/* ==========================================================
   INTRO SESUDAH HERO
   ========================================================== */

.lk-support-page
.lk-support-intro {
  margin-top:
    0 !important;

  margin-bottom:
    30px !important;
}


.lk-support-page
.lk-support-intro p {
  max-width:
    850px !important;

  font-size:
    clamp(
      17px,
      1.65vw,
      21px
    ) !important;

  line-height:
    1.55 !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 820px) {

  .lk-support-page
  .lk-support-hero {
    grid-template-columns:
      minmax(0, 1fr)
      118px
      !important;

    gap:
      20px !important;

    padding:
      27px 28px
      !important;
  }


  .lk-support-page
  .lk-support-hero h1 {
    font-size:
      clamp(
        34px,
        6vw,
        46px
      ) !important;
  }


  .lk-support-page
  .lk-support-hero
  .lk-support-heart {
    width:
      110px !important;

    height:
      110px !important;

    min-width:
      110px !important;

    max-width:
      110px !important;

    min-height:
      110px !important;

    max-height:
      110px !important;

    padding:
      15px !important;

    border-radius:
      22px !important;
  }


  .lk-support-page
  .lk-support-hero
  .lk-support-official-logo {
    width:
      68px !important;

    max-width:
      68px !important;
  }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 580px) {

  .lk-support-page
  .lk-support-hero {
    grid-template-columns:
      1fr !important;

    gap:
      22px !important;

    padding:
      26px 22px
      !important;

    border-radius:
      20px !important;
  }


  .lk-support-page
  .lk-support-hero h1 {
    max-width:
      12ch !important;

    font-size:
      clamp(
        33px,
        10vw,
        43px
      ) !important;

    line-height:
      1 !important;
  }


  .lk-support-page
  .lk-support-hero p {
    max-width:
      100% !important;

    font-size:
      15px !important;
  }


  .lk-support-page
  .lk-support-hero
  .lk-support-heart {
    justify-self:
      end !important;

    width:
      92px !important;

    height:
      92px !important;

    min-width:
      92px !important;

    max-width:
      92px !important;

    min-height:
      92px !important;

    max-height:
      92px !important;

    padding:
      12px !important;

    border-radius:
      19px !important;
  }


  .lk-support-page
  .lk-support-hero
  .lk-support-official-logo {
    width:
      58px !important;

    max-width:
      58px !important;
  }
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .lk-support-page
  .lk-support-hero,

  .lk-support-page
  .lk-support-heart,

  .lk-support-page
  .lk-support-official-logo,

  .lk-support-page
  .lk-support-hero::before {
    transition:
      none !important;
  }
}

/* LANGKAH KUDA SUPPORT B6-A4-FINAL3 END */