/* Halaman Teknologi: tema gelap dengan nuansa cetak biru */
body.tech { background: #070B16; color: #CBD5E1; }
.tech h1, .tech h2, .tech h3, .tech h4 { color: #fff; }
.tech p { color: #94A3B8; }
.tech .eyebrow { color: #67E8F9; }
.tech .nav__menu a.is-active { color: #fff; box-shadow: 0 2px 0 var(--primary-2); padding-bottom: 4px; }

/* Hero */
.thero { position: relative; overflow: hidden; padding: 52px 0 56px; background:
  radial-gradient(circle at 85% 0%, rgba(6,182,212,.22), transparent 45%),
  radial-gradient(circle at 0% 100%, rgba(79,70,229,.3), transparent 50%), #0B1120; }
.thero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(#000 40%, transparent); -webkit-mask-image: linear-gradient(#000 40%, transparent); }
.thero__inner { position: relative; max-width: 860px; }
.crumbs { display: flex; gap: 10px; font-size: .88rem; color: #64748B; margin-bottom: 28px; }
.crumbs a { color: #94A3B8; }
.crumbs a:hover { color: #fff; }
.thero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: .45em; }
.thero .grad, .tech .grad { background-image: linear-gradient(90deg, #818CF8, #22D3EE); -webkit-background-clip: text; background-clip: text; color: transparent; }
.thero p { font-size: 1.1rem; max-width: 640px; }
.facts { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.facts li { padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.facts b { display: block; color: #fff; font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.facts span { display: block; margin-top: 6px; color: #94A3B8; font-size: .85rem; }

/* Sections */
.tsec { padding: 68px 0; }
.tsec--panel { background: #0B1120; border-block: 1px solid rgba(255,255,255,.06); }
.tsec__head { text-align: center; max-width: 680px; margin: 0 auto 52px; }
.tsec__head h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }

/* Lapisan teknologi */
.layers { display: grid; gap: 20px; position: relative; }
.layer { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; padding: 28px; border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.1); }
.layer__num { display: inline-block; font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; background-image: linear-gradient(135deg, #818CF8, #22D3EE); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 14px; }
.layer__head h3 { font-size: 1.25rem; margin-bottom: .4em; }
.layer__head p { font-size: .92rem; margin: 0; }
.tk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.tk { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 14px; background: rgba(7,11,22,.6); border: 1px solid rgba(255,255,255,.08); transition: border-color .2s, transform .2s; }
.tk:hover { border-color: var(--c); transform: translateY(-3px); }
.tk__logo { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--c); color: var(--fg, #fff); box-shadow: 0 8px 18px -8px var(--c); }
.tk__logo svg { width: 24px; height: 24px; fill: currentColor; }
.tk h4 { font-size: 1rem; margin: 2px 0 4px; }
.tk p { font-size: .84rem; line-height: 1.45; margin: 0; }

/* Alur rilis */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; position: relative; counter-reset: s; }
.flow::before { content: ""; position: absolute; left: 10%; right: 10%; top: 26px; height: 2px; background: linear-gradient(90deg, #4F46E5, #06B6D4); opacity: .55; }
.flow__step { position: relative; text-align: center; display: grid; gap: 6px; justify-items: center; }
.flow__n { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; color: #fff; background: #0B1120; border: 2px solid #22D3EE; box-shadow: 0 0 0 6px #0B1120, 0 0 22px rgba(34,211,238,.35); position: relative; }
.flow__step b { color: #fff; font-size: 1.05rem; margin-top: 10px; }
.flow__step small { color: #94A3B8; font-size: .85rem; max-width: 190px; }

/* Prinsip */
.prs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pr { padding: 26px 24px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); transition: border-color .2s, transform .2s; }
.pr:hover { border-color: #22D3EE; transform: translateY(-4px); }
.pr__ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, #4F46E5, #06B6D4); margin-bottom: 18px; color: #fff; }
.pr__ic svg { width: 24px; height: 24px; }
.pr h3 { font-size: 1.1rem; }
.pr p { font-size: .92rem; margin: 0; }

.tech .cta-band { padding-top: 0; }

@media (max-width: 1024px) {
  .layer { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .prs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .flow::before { left: 26px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; background: linear-gradient(180deg, #4F46E5, #06B6D4); }
  .flow__step { grid-template-columns: 54px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 16px; align-items: center; }
  .flow__n { grid-row: span 2; }
  .flow__step b { margin: 0; align-self: end; }
  .flow__step small { max-width: none; align-self: start; }
}
@media (max-width: 560px) {
  .tsec { padding: 52px 0; }
  .thero { padding: 36px 0 44px; }
  .prs { grid-template-columns: minmax(0, 1fr); }
  .layer { padding: 22px 18px; }
  .tk-grid { grid-template-columns: minmax(0, 1fr); }
}