/* style.css */
/* =========================================================
   STYLE.CSS – HERO + LOGO CARD ONLY
   ========================================================= */

/* ========== ROOT TOKENS ========== */
:root{
  --accent:#1f6feb;
  --accent-2:#2b7fff;

  --bg:#ffffff;
  --bg-soft:#f5f7fb;

  --text:#0f172a;
  --text-muted:#64748b;
  --text-soft:#334155;

  --card:#ffffff;

  --border:rgba(15,23,42,.10);
  --border-strong:rgba(15,23,42,.18);

  --radius-xl:22px;
  --radius-lg:18px;

  --shadow-1:0 8px 22px rgba(15,23,42,.08);
  --shadow-2:0 16px 50px rgba(15,23,42,.12);

  --focus:0 0 0 3px rgba(31,111,235,.22);
}

/* ========== BASE ========== */
*{ box-sizing:border-box; }
html, body{ overflow-x:hidden; }

body{
  margin:0;
  min-height:100vh;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, #ffffff 0%, #ffffff 40%, var(--bg-soft) 100%);
}

a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(31,111,235,.18); }

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

/* ========== LAYOUT WRAPPER ========== */
.page-shell{
  max-width:1200px;
  margin:0 auto;
  padding:18px 16px 44px;
}

/* ========== HERO (V2) ========== */
.hero-v2{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
  gap:28px;
  align-items:center;
  padding:18px 0 6px;
}

.hero-title{
  font-size:clamp(2.15rem, 3.6vw, 3.15rem);
  letter-spacing:-.03em;
  line-height:1.05;
  margin:0 0 12px;
}

.accent-word{
  color:var(--accent);
  text-shadow:0 10px 24px rgba(31,111,235,.20);
}

.hero-desc{
  margin:0;
  font-size:1rem;
  line-height:1.7;
  color:var(--text-muted);
  max-width:640px;
}

.hero-points{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 18px;
  max-width:720px;
}

.point{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text-soft);
  font-size:.92rem;
}

.dot{
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#fff;
  background:var(--accent);
  box-shadow:0 10px 20px rgba(31,111,235,.18);
}

.hero-cta{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* ========== HERO RIGHT ========== */
.hero-right{
  justify-self:end;
  width:100%;
  display:flex;
  justify-content:flex-end;
}

/* Card visual kanan */
.logo-card{
  width:min(560px, 100%);
  border-radius:22px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 18px 55px rgba(15,23,42,.12);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  position:relative;
  overflow:hidden;
  padding:18px 16px 16px;
  gap:12px;
}

.logo-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 240px at 20% 20%, rgba(31,111,235,.16), transparent 55%),
    radial-gradient(520px 240px at 80% 80%, rgba(31,111,235,.10), transparent 60%);
  pointer-events:none;
}

/* Logo atas */
.logo-top{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top:6px;
  position:relative;
  z-index:1;
}

.logo-card-img{
  width:min(300px, 70%);
  height:auto;
  filter:drop-shadow(0 18px 34px rgba(15,23,42,.14));
}

/* ========== NETWORK VISUAL ========== */
.network-visual{
  width:100%;
  position:relative;
  z-index:1;
  border-radius:18px;
  overflow:hidden;
  isolation:isolate;
  transform:translateZ(0);
  animation:floatCard 4.8s ease-in-out infinite;
}

@keyframes floatCard{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

.network-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
  filter:drop-shadow(0 18px 40px rgba(15,23,42,.10));
}

/* Shimmer/glow bergerak di atas gambar */
.network-visual::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(closest-side at 20% 30%, rgba(43,127,255,.18), transparent 60%),
    radial-gradient(closest-side at 75% 65%, rgba(31,111,235,.14), transparent 62%),
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,.08) 40%, transparent 80%);
  mix-blend-mode:screen;
  opacity:.9;
  transform:translateX(-18%);
  animation:shimmerMove 5.5s ease-in-out infinite;
  pointer-events:none;
  z-index:2;
}

@keyframes shimmerMove{
  0%,100%{ transform:translateX(-18%) translateY(0) rotate(0deg); }
  50%{ transform:translateX(10%) translateY(-2%) rotate(2deg); }
}

/* Node ping (titik sinyal) */
.node{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(31,111,235,.95);
  box-shadow:0 0 0 0 rgba(31,111,235,.0);
  z-index:3;
}

.node::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  border:2px solid rgba(31,111,235,.32);
  opacity:0;
  transform:scale(.6);
  animation:ping 1.9s ease-out infinite;
}

.node::after{
  content:"";
  position:absolute;
  inset:-20px;
  border-radius:999px;
  border:2px solid rgba(43,127,255,.18);
  opacity:0;
  transform:scale(.6);
  animation:ping 1.9s ease-out infinite .35s;
}

@keyframes ping{
  0%{ opacity:0; transform:scale(.55); }
  18%{ opacity:.75; }
  100%{ opacity:0; transform:scale(1.6); }
}

/* Posisi node (sesuaikan kalau gambar kamu beda sedikit) */
.n-kantor{ left:14%; top:54%; animation:nodeGlow 2.4s ease-in-out infinite; }
.n-umkm{ left:30%; top:70%; animation:nodeGlow 2.6s ease-in-out infinite .15s; }
.n-hotel{ left:50%; top:56%; animation:nodeGlow 2.8s ease-in-out infinite .25s; }
.n-resto{ left:66%; top:73%; animation:nodeGlow 2.7s ease-in-out infinite .20s; }
.n-perusahaan{ left:84%; top:55%; animation:nodeGlow 2.5s ease-in-out infinite .10s; }

@keyframes nodeGlow{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.18); }
}

.network-caption{
  position:relative;
  z-index:1;
  text-align:center;
  font-size:.86rem;
  color:var(--text-muted);
  line-height:1.4;
  padding-top:2px;
}

.network-caption strong{ color:var(--text); }

/* ========== TABS ========== */
.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 18px;
  justify-content:center;
}

.tab-btn{
  border-radius:999px;
  padding:9px 14px;
  font-size:.82rem;
  border:1px solid rgba(15,23,42,.12);
  background:#ffffff;
  color:var(--text-muted);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

.tab-btn:hover{
  transform:translateY(-1px);
  background:var(--bg-soft);
  border-color:var(--border-strong);
  color:var(--text);
}

.tab-btn:focus{
  outline:none;
  box-shadow:var(--focus);
}

.tab-btn.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#ffffff;
  font-weight:800;
}

/* ========== SECTION (CARD STYLE) ========== */
.section{
  border-radius:var(--radius-xl);
  padding:16px 14px 18px;
  background:rgba(255,255,255,.90);
  border:1px solid var(--border);
  box-shadow:var(--shadow-1);
  margin-bottom:18px;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom:14px;
}

.section-title{
  font-size:1.04rem;
  font-weight:800;
  letter-spacing:-.01em;
}

.section-sub{
  font-size:.84rem;
  color:var(--text-muted);
  line-height:1.4;
}

/* ========== INFO PLAIN (TANPA CARD) ========== */
.info-plain{
  margin-bottom:18px;
  padding:0;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
}

.plain-body{
  color:#111827;
  line-height:1.7;
}

/* ========== GRID ========== */
.pkg-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(265px, 1fr));
  justify-content:stretch;
}

.pkg-grid.single{ justify-content:center; }
.pkg-grid.single .paket-card{ max-width:540px; width:100%; }

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

/* ========== CARD ========== */
.paket-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--card);
  border:1px solid var(--border);
  padding:14px;
  box-shadow:var(--shadow-1);
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.paket-card:hover{
  transform:translateY(-2px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-2);
}

.card-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
}

.card-header{
  display:flex;
  align-items:center;
  gap:16px;
}

.card-header-left{ display:flex; align-items:center; }

.card-header-right{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
}

.paket-title{
  font-size:1rem;
  margin:0;
  font-weight:800;
  letter-spacing:-.01em;
  text-align:right;
  color:var(--text);
}

.price-block{ text-align:right; }

.price-main{
  font-size:1.12rem;
  font-weight:900;
  line-height:1.05;
  letter-spacing:-.01em;
}

.price-note{
  font-size:.74rem;
  color:var(--text-muted);
}

/* BENEFIT */
.benefit-list{
  list-style:none;
  padding:0;
  margin:6px 0 0;
  font-size:.84rem;
  color:var(--text-muted);
  text-align:right;
  width:100%;
  line-height:1.45;
}
.benefit-list li{ margin-bottom:3px; }

/* RING SPEED */
.ring{
  width:92px;
  height:92px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;

  --angle:0deg;
  background:conic-gradient(var(--accent) var(--angle), rgba(15,23,42,.10) 0deg);
  transition:--angle .9s ease-out;
  box-shadow:0 12px 26px rgba(15,23,42,.10);
}

.ring::after{
  content:"";
  position:absolute;
  inset:14px;
  background:#ffffff;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
}

.ring span{
  position:relative;
  z-index:1;
  font-size:19px;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--text);
}

/* ========== ACTIONS / BUTTONS ========== */
.card-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:2px;
  padding-top:10px;
  border-top:1px solid rgba(15,23,42,.06);
}

.btn{
  border-radius:999px;
  padding:10px 14px;
  font-size:.82rem;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  transition:transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}

.btn:focus{
  outline:none;
  box-shadow:var(--focus);
}

.btn-primary{
  background:linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
  color:#ffffff;
  font-weight:900;
  justify-content:center;
}

.btn-primary:hover{
  filter:brightness(1.04);
  transform:translateY(-1px);
}

.btn-ghost{
  background:#ffffff;
  border:1px solid var(--border);
  color:var(--text);
  padding-inline:14px;
}

.btn-ghost:hover{
  background:var(--bg-soft);
  border-color:var(--border-strong);
  transform:translateY(-1px);
}

/* ========== MODAL ========== */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.50);
  backdrop-filter:blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:80;
  padding:14px;
}

.modal-overlay.show{ display:flex; }

.modal-card{
  max-width:460px;
  width:100%;
  background:#ffffff;
  border-radius:22px;
  border:1px solid var(--border);
  box-shadow:0 24px 70px rgba(15,23,42,.22);
  padding:16px 16px 14px;
  color:var(--text);
  font-size:.90rem;
}

.modal-header{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:10px;
}

.modal-title{
  font-size:1.04rem;
  font-weight:900;
  letter-spacing:-.01em;
}

.modal-close{
  border:none;
  background:#ffffff;
  border:1px solid var(--border);
  color:var(--text);
  width:34px;
  height:34px;
  border-radius:10px;
  font-size:1.2rem;
  cursor:pointer;
  display:grid;
  place-items:center;
}

.modal-close:hover{
  background:var(--bg-soft);
  border-color:var(--border-strong);
}

.modal-scheme-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}

.modal-scheme-btn{
  border-radius:999px;
  border:1px solid var(--border);
  background:#ffffff;
  color:var(--text);
  padding:6px 12px;
  font-size:.76rem;
  cursor:pointer;
}

.modal-scheme-btn:hover{
  background:var(--bg-soft);
  border-color:var(--border-strong);
}

.modal-scheme-btn.active{
  border-color:rgba(31,111,235,.55);
  background:rgba(31,111,235,.10);
  color:var(--text);
}

.modal-section-label{
  font-size:.80rem;
  color:var(--text-muted);
  margin-bottom:6px;
}

.modal-table{
  width:100%;
  border-collapse:collapse;
  font-size:.84rem;
  margin-bottom:8px;
}

.modal-table td{ padding:4px 0; }
.modal-table td:first-child{ color:var(--text-muted); }
.modal-table td:last-child{
  text-align:right;
  font-variant-numeric:tabular-nums;
  color:var(--text);
}

.modal-sep{
  border-top:1px dashed rgba(15,23,42,.18);
  margin:10px 0;
}

.modal-footer-text{
  margin-top:10px;
  font-size:.84rem;
  color:var(--text-muted);
  line-height:1.55;
}

.modal-footer-text strong{ color:var(--text); }

.modal-footer-actions{
  margin-top:10px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

/* ========== LOADING ========== */
.paket-loading{
  text-align:center;
  padding:2rem 1rem;
  font-size:.98rem;
  color:var(--text-muted);
}

/* ========== FOOTER ========== */
.footer-bottom{
  border-top:1px solid rgba(15,23,42,.08);
  background:#ffffff;
  padding:16px;
}

.footer-bottom p{
  margin:0;
  color:#0f172a;
  text-align:center;
  font-size:.86rem;
}

/* ========== RESPONSIVE ========== */
@media (max-width:900px){
  .hero-v2{ grid-template-columns:minmax(0,1fr); }
  .hero-right{
    justify-self:stretch;
    justify-content:flex-start;
  }
  .logo-card{
    width:100%;
    margin-top:14px;
  }
  .hero-points{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:640px){
  .hero-points{ grid-template-columns:minmax(0,1fr); }
}