/* @import 'tailwindcss';
@import 'tw-animate-css'; */
/* @import 'shadcn/tailwind.css'; */

@custom-variant dark (&:is(.dark *));

:root { --navy: #071a2e; --navy-2: #0b2742; --ink: #10243a; --muted: #6c7e8e; --line: #dce6ec; --green: #1769d1; --mint: #e1efff; --pale: #f3f8ff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }

.site-shell { overflow: visible; }

/* PEMBUNGKUS UTAMA NAVBAR: Full-width menempel di atas layar */
.navbar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

/* KONTAINER DALAM NAVBAR: Membatasi isi menu agar sejajar di tengah (max 1240px) */
.navbar { 
  height: 82px; 
  max-width: 1240px; 
  margin: auto; 
  padding: 0 32px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  width: 100%;
}

.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800; letter-spacing: -.06em; color: var(--navy); }
.brand img { width: 36px; height: 36px; object-fit: contain; }
.brand span span { color: var(--green); }
.nav-links { display: flex; align-items: center; gap: 30px; color: #516779; font-size: 13px; font-weight: 700;margin-top: 1rem; }
.nav-links a:not(.nav-cta):hover { color: var(--green); }
.nav-cta { color: white; background: var(--navy); padding: 12px 17px; border-radius: 9px; display: flex; align-items: center; gap: 8px; }
.menu-button { display: none; border: 0; background: transparent; color: var(--navy); }
.section-wrap { max-width: 1240px; margin: auto; padding-left: 32px; padding-right: 32px; }

.hero { 
  min-height: 630px; 
  display: grid; 
  grid-template-columns: 1fr 1.02fr; 
  align-items: center; 
  gap: 35px; 
  padding-top: calc(58px + 82px); /* Menyesuaikan agar tidak tertutup navbar fixed */
  padding-bottom: 74px; 
}

.eyebrow { color: var(--green); font-size: 11px; text-transform: uppercase; font-weight: 800; letter-spacing: .17em; display: flex; align-items: center; gap: 9px; }
.pulse-dot, .online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; box-shadow: 0 0 0 5px #e1efff; }
h1 { font-size: clamp(32px, 4vw, 52px); line-height: 1.12;  letter-spacing: -.05em; margin: 20px 0; color: var(--navy); font-weight: 800; }
h1 em, h2 span { color: var(--green); font-style: normal; }
.hero-lead { color: var(--muted); line-height: 1.75; max-width: 490px; font-size: 16px; }
.hero-actions { display: flex; gap: 12px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 19px; font-weight: 800; font-size: 13px; border-radius: 9px; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 9px 20px #06223a1a; }
.button-primary { color: white; background: var(--green); }
.button-ghost { color: var(--navy); border: 1px solid var(--line); }
.play-dot { font-size: 10px; color: var(--green); border: 1px solid #bdebd9; border-radius: 100%; width: 23px; height: 23px; display: grid; place-items: center; }
.trust-row { display: flex; align-items: center; gap: 12px; color: #91a0ab; font-size: 11px; margin-top: 48px; }
.avatar-stack { display: flex; }
.avatar-stack span { width: 24px; height: 24px; border-radius: 50%; background: #cfe5ff; color: #1558ad; display: grid; place-items: center; font-size: 9px; font-weight: 800; border: 2px solid white; margin-left: -5px; }
.avatar-stack span:first-child { margin-left: 0; background: #0b2742; color: white; }
.avatar-stack span:nth-child(2) { background: #b4e5ed; color: #267c91; }.avatar-stack span:nth-child(3) { background: #f6dfb3; color: #987020; }.avatar-stack span:nth-child(4) { background: #e5edf0; color: #6c7e8e; }
.hero-visual { position: relative; min-height: 450px; display: grid; place-items: center; }.hero-visual img { width: min(100%, 620px); position: relative; z-index: 1; filter: drop-shadow(0 25px 30px #0b27422b); }.visual-glow { position: absolute; width: 410px; height: 410px; border-radius: 50%; background: #cfe5ff; filter: blur(1px); opacity: .72; }
.float-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-radius: 12px; background: #fff; box-shadow: 0 15px 35px #0b274226; font-size: 11px; }.float-card strong, .float-card small { display: block; }.float-card strong { font-size: 12px; color: var(--navy); margin-bottom: 4px; }.float-card small { color: #80909a; }.float-card-top { right: 2%; top: 16%; }.float-card-bottom { left: 4%; bottom: 13%; }.status-icon, .metric-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: var(--mint); color: var(--green); }.metric-icon { background: #fff1cb; color: #d99a16; }
.proof-strip { 
    background: var(--navy); color: white; display: grid; grid-template-columns: repeat(4, 1fr); padding: 28px max(32px, calc((100vw - 1176px)/2)); gap: 20px; 
}

.proof-strip div { display: flex; flex-direction: column; gap: 6px; border-left: 1px solid #ffffff1c; }
  
.proof-strip div:first-child { border: 0; }

.proof-strip strong { font-size: 25px; letter-spacing: -.05em; }.proof-strip span { color: #95afbf; font-size: 11px; }

.features-section, .pricing-section, .faq-section { padding-top: 105px; padding-bottom: 105px; }.section-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 45px; }.section-heading h2, .workflow-copy h2, .final-cta h2 { color: var(--navy); font-size: clamp(36px, 4vw, 53px); line-height: 1.03; letter-spacing: -.065em; margin: 16px 0 0; }.section-heading > p { color: var(--muted); line-height: 1.75; font-size: 14px; max-width: 340px; margin: 0 0 4px; }.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }.feature-card { border: 1px solid var(--line); border-radius: 14px; padding: 25px 23px; min-height: 270px; position: relative; transition: border .2s, transform .2s; }.feature-card:hover { border-color: #8ce5c6; transform: translateY(-4px); }.feature-number { color: #afbdc6; font-size: 10px; font-weight: bold; position: absolute; right: 20px; top: 24px; }.feature-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: var(--green); background: var(--mint); margin-bottom: 28px; }.feature-card:nth-child(2) .feature-icon { color: #6181e5; background: #e8ecff; }.feature-card:nth-child(3) .feature-icon { color: #ed9e32; background: #fff1d9; }.feature-card:nth-child(4) .feature-icon { color: #aa67db; background: #f2e7fa; }.feature-card h3 { margin: 0 0 10px; font-size: 18px; color: var(--navy); }.feature-card p { color: var(--muted); line-height: 1.65; font-size: 12px; min-height: 60px; }.feature-card a { color: var(--navy); font-size: 11px; font-weight: 800; display: flex; gap: 7px; align-items: center; }
.workflow-section { background: var(--pale); padding: 105px 0; }.workflow-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 100px; }.workflow-copy > p { color: var(--muted); line-height: 1.75; font-size: 14px; max-width: 400px; margin: 24px 0 35px; }.steps { display: grid; gap: 22px; }.steps > div { display: flex; gap: 18px; align-items: flex-start; }.steps b { color: var(--green); font-size: 11px; padding-top: 2px; }.steps span { display: flex; flex-direction: column; gap: 5px; }.steps strong { color: var(--navy); font-size: 13px; }.steps small { color: var(--muted); font-size: 11px; }.chat-card { max-width: 390px; width: 100%; justify-self: center; background: white; border-radius: 16px; box-shadow: 0 22px 50px #0b274215; overflow: hidden; transform: rotate(2deg); }.chat-header { color: white; background: var(--navy); padding: 17px 20px; font-size: 13px; display: flex; align-items: center; gap: 9px; }.chat-header .online-dot { width: 7px; height: 7px; box-shadow: none; }.chat-header small { margin-left: auto; color: #8fa7b6; font-size: 10px; }.chat-body { padding: 30px 20px 20px; display: grid; gap: 13px; background: linear-gradient(#f6fafb, #fff); min-height: 260px; }.chat-bubble { max-width: 78%; border-radius: 12px; padding: 11px 13px; font-size: 11px; line-height: 1.5; }.incoming { background: white; color: #516779; box-shadow: 0 3px 12px #0b27420b; }.outgoing { justify-self: end; background: var(--green); color: white; }.typing { display: flex; gap: 4px; padding: 11px 13px; background: white; width: 48px; border-radius: 12px; }.typing span { width: 4px; height: 4px; background: #aac2c0; border-radius: 50%; }.chat-input { border-top: 1px solid #edf2f3; color: #a4b1b7; padding: 15px 20px; font-size: 11px; display: flex; justify-content: space-between; }
.pricing-section { background: white; }.centered { display: block; text-align: center; }.centered .eyebrow { justify-content: center; }.centered > p { margin: 20px auto 0; }.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 410px)); justify-content: center; gap: 17px; }.price-card { padding: 32px; border: 1px solid var(--line); border-radius: 16px; position: relative; }.price-card.featured { border: 2px solid var(--green); box-shadow: 0 15px 30px #27c28112; }.popular, .future-label { color: var(--green); letter-spacing: .1em; font-size: 9px; font-weight: 900; margin-bottom: 25px; }.future-label { color: #8ea0aa; }.price-card h3 { color: var(--navy); font-size: 21px; margin: 0 0 9px; }.price-card p { color: var(--muted); font-size: 12px; line-height: 1.6; max-width: 270px; min-height: 40px; }.price { color: var(--navy); font-size: 34px; font-weight: 800; letter-spacing: -.06em; margin: 22px 0 17px; }.price small { font-size: 11px; letter-spacing: 0; color: #8c9aa3; font-weight: 500; }.annual { color: var(--green); font-size: 11px; margin: -8px 0 17px; }.price-card .button { width: 100%; }.button-dark { background: var(--navy); color: white; }.price-card ul { list-style: none; margin: 25px 0 0; padding: 0; display: grid; gap: 13px; color: #526978; font-size: 12px; }.price-card li { display: flex; gap: 9px; align-items: center; }.price-card li svg { color: var(--green); }.price-note { color: #9eabb3; font-size: 10px; text-align: center; margin-top: 25px; }
.faq-section { background: var(--pale); display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }.faq-section .section-heading { display: block; margin: 0; }.faq-section .section-heading > p { margin-top: 25px; }.faq-list { border-top: 1px solid var(--line); }.faq-item { border-bottom: 1px solid var(--line); }.faq-item button { width: 100%; background: transparent; border: 0; padding: 21px 0; display: flex; justify-content: space-between; align-items: center; color: var(--navy); text-align: left; font-weight: 800; font-size: 14px; cursor: pointer; }.faq-item button svg { color: var(--green); transition: transform .2s; }.faq-item.open button svg { transform: rotate(180deg); }.faq-item p { color: var(--muted); font-size: 13px; line-height: 1.7; margin: -5px 35px 20px 0; }
.final-cta { margin-top: 0; margin-bottom: 90px; min-height: 330px; background: var(--navy); color: white; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; }.final-cta > *:not(.cta-orb) { position: relative; z-index: 1; }.final-cta > svg { color: var(--green); }.final-cta h2 { color: white; margin-top: 17px; }.final-cta p { color: #9cb1bf; font-size: 13px; margin: 17px 0 26px; }.final-cta em { color: var(--green); font-style: normal; }.button-white { background: white; color: var(--navy); }.cta-orb { position: absolute; width: 420px; height: 420px; border: 1px solid #ffffff13; border-radius: 50%; top: -250px; left: 50%; transform: translateX(-50%); box-shadow: 0 0 0 75px #ffffff06, 0 0 0 150px #ffffff03; }
footer { max-width: 1240px; padding: 0 32px 25px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 45px; }.footer-brand p { color: #8a9ba5; font-size: 12px; line-height: 1.6; margin-top: 18px; }.footer-links { display: flex; gap: 100px; }.footer-links div { display: flex; flex-direction: column; gap: 11px; font-size: 12px; color: #71838e; }.footer-links strong { color: var(--navy); margin-bottom: 5px; }.footer-bottom { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px; display: flex; justify-content: space-between; color: #9aa8b0; font-size: 10px; }.footer-bottom span:last-child { display: flex; gap: 5px; align-items: center; }

@media (max-width: 800px) { 
  .navbar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  .navbar { 
    height: 70px; 
    padding: 0 20px; 
  }
  .menu-button { 
    display: block; 
    z-index: 1001;
    cursor: pointer;
  }
  .nav-links { 
    display: none; 
    position: absolute; 
    top: 70px; 
    left: 20px; 
    right: 20px; 
    background: white; 
    box-shadow: 0 15px 30px #0b27421c; 
    border-radius: 12px; 
    padding: 20px; 
    flex-direction: column; 
    align-items: stretch; 
    gap: 18px; 
    z-index: 1000;
  }
  .nav-links.is-open { 
    display: flex !important; 
  }
  .nav-cta { 
    justify-content: center; 
  }
  .section-wrap { 
    padding-left: 20px; 
    padding-right: 20px; 
  }
  .hero { 
    grid-template-columns: 1fr; 
    padding-top: calc(48px + 70px); 
    text-align: center; 
  }
  .hero .eyebrow, .trust-row { 
    justify-content: center; 
  }
  .hero-lead { 
    margin: auto; 
  }
  .hero-actions { 
    justify-content: center; 
    flex-wrap: wrap; 
  }
  .hero-visual { 
    min-height: 310px; 
  }
  .float-card-top { 
    right: 0; 
    top: 7%; 
  }
  .float-card-bottom { 
    left: 0; 
    bottom: 7%; 
  }
  .proof-strip { 
    grid-template-columns: repeat(2, 1fr); 
    padding: 28px 20px; 
  }
  .proof-strip div:nth-child(3) { 
    border-left: 0; 
    padding-left: 0; 
  }
  .feature-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
  .workflow-inner, .faq-section { 
    grid-template-columns: 1fr; 
    gap: 45px; 
  }
  .workflow-section { 
    padding: 75px 0; 
  }
  .chat-card { 
    transform: none; 
  }
  .pricing-grid { 
    grid-template-columns: 1fr; 
  }
  .section-heading { 
    display: block; 
  }
  .section-heading > p { 
    margin-top: 22px; 
  }
  .faq-section { 
    gap: 40px; 
  }
  .final-cta { 
    border-radius: 0; 
    margin-bottom: 65px; 
  }
  .footer-links { 
    gap: 45px; 
  } 
}

@media (max-width: 470px) { 
  h1 { 
    font-size: 44px; 
  }
  .hero-actions .button { 
    width: 100%; 
  }
  .feature-grid { 
    grid-template-columns: 1fr; 
  }
  .feature-card { 
    min-height: auto; 
  }
  .proof-strip strong { 
    font-size: 21px; 
  }
  .proof-strip span { 
    line-height: 1.4; 
  }
  .footer-links { 
    gap: 25px; 
  }
  .footer-bottom { 
    flex-direction: column; 
    gap: 10px; 
  } 
}
/* ===== TAMBAHAN: Cocok Untuk, Integrasi API, Kenapa Wa RanPOS =====
   Tempel di BAWAH CSS lama (sebelum blok @media), atau di paling bawah file. */

.nav-links { gap: 24px; } /* muat 6 link + tombol */

.usecase-section, .why-section { padding-top: 105px; padding-bottom: 105px; }
.api-section { padding-top: 0; padding-bottom: 105px; }

/* Kartu 4 kolom (dipakai Cocok Untuk & Kenapa) */
.usecase-grid, .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.usecase-card, .why-card { border: 1px solid var(--line); border-radius: 14px; padding: 28px 22px; transition: border .2s, transform .2s; }
.usecase-card { background: var(--pale); }
.usecase-card:hover, .why-card:hover { border-color: var(--green); transform: translateY(-4px); }

.usecase-icon, .why-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--mint); margin-bottom: 22px; }
.usecase-card:nth-child(2) .usecase-icon, .why-card:nth-child(2) .why-icon { background: #e8ecff; }
.usecase-card:nth-child(3) .usecase-icon, .why-card:nth-child(3) .why-icon { background: #fff1d9; }
.usecase-card:nth-child(4) .usecase-icon, .why-card:nth-child(4) .why-icon { background: #f2e7fa; }

.usecase-card h3, .why-card h3 { margin: 0 0 8px; font-size: 17px; color: var(--navy); }
.usecase-card p, .why-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

/* Integrasi API: panel navy membulat seperti CTA */
.api-inner { background: var(--navy); border-radius: 20px; padding: 60px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; position: relative; overflow: hidden; }
.api-copy .eyebrow { color: #7fb4f5; }
.api-copy h2 { color: white; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -.065em; margin: 16px 0 0; }
.api-copy h2 span { color: #5aa0ff; }
.api-copy > p { color: #9cb1bf; font-size: 14px; line-height: 1.75; margin: 20px 0 26px; max-width: 380px; }
.api-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; color: #c4d4df; font-size: 12px; }
.api-points li { display: flex; gap: 9px; align-items: center; }
.api-points li span { color: #5aa0ff; font-weight: 800; }

.code-card { background: #04111f; border: 1px solid #ffffff14; border-radius: 14px; padding: 16px 20px 22px; overflow-x: auto; box-shadow: 0 20px 40px #00000040; }
.code-dots { display: flex; gap: 6px; }
.code-dots span { width: 9px; height: 9px; border-radius: 50%; background: #2c4258; }
.code-dots span:nth-child(1) { background: #f26d6d; }
.code-dots span:nth-child(2) { background: #f0b73e; }
.code-dots span:nth-child(3) { background: #4fd18b; }
.code-card pre { margin: 18px 0 0; color: #cfe5ff; font-family: "Courier New", monospace; font-size: 12px; line-height: 1.8; }

@media (max-width: 800px) {
  .usecase-section, .why-section { padding-top: 75px; padding-bottom: 75px; }
  .api-section { padding-bottom: 75px; }
  .usecase-grid, .why-grid { grid-template-columns: repeat(2, 1fr); }
  .api-inner { grid-template-columns: 1fr; padding: 36px 24px; gap: 32px; }
}
@media (max-width: 470px) {
  .usecase-grid, .why-grid { grid-template-columns: 1fr; }
}