:root {
 color-scheme: light;
 font-family: Inter, "Segoe UI", Arial, sans-serif;
 color: #172d40;
 background: #e9eef4;
 font-synthesis: none;
 -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body {
 margin: 0;
 min-width: 280px;
 min-height: 100vh;
 min-height: 100svh;
 display: grid;
 place-items: center;
 padding: 32px clamp(20px, 5vw, 80px);
 background:
  radial-gradient(ellipse at 96% 95%, #2875d999 0, #2875d900 49%),
  radial-gradient(ellipse at 53% 49%, #5064774d 0, #50647700 66%),
  linear-gradient(128deg, #fafafa 2%, #e9edf0 44%, #d9e2ed 100%);
}
a { color: inherit; }
.portal { width: min(1080px, 100%); min-width: 0; }
.portal-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 35px; }
.portal-brand { display: flex; align-items: center; gap: 12px; }
.portal-brand img { flex-shrink: 0; object-fit: contain; border-radius: 50%; background: #fff; padding: 2px; }
.portal-brand strong { display: block; font-size: 15px; font-weight: 750; letter-spacing: .045em; }
.portal-brand small { display: block; margin-top: 6px; color: #637483; font-size: 9px; font-weight: 600; letter-spacing: .19em; }
.portal-header-label { color: #66798b; font-size: 10px; font-weight: 600; letter-spacing: .17em; }
.portal-intro { text-align: center; margin: 0 0 28px; }
.portal-eyebrow { font-size: 9px; font-weight: 750; letter-spacing: .22em; color: #566c7f; margin: 0 0 11px; }
.portal-intro h1 { font-size: clamp(28px, 3vw, 39px); font-weight: 600; line-height: 1.2; letter-spacing: -.045em; margin: 0; }
.portal-intro > p:last-child { color: #607385; font-size: 13px; line-height: 1.65; margin: 12px 0 0; }
.branch-panels {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 padding: 8px;
 border: 1px solid #ffffffd9;
 border-radius: 21px;
 background: #fff;
 box-shadow: 0 28px 80px #1c34432b, 0 4px 12px #2035470a;
 isolation: isolate;
}
.branch-panel {
 --accent: #203f5c;
 display: flex;
 flex-direction: column;
 position: relative;
 min-width: 0;
 padding: 30px 34px 24px;
 border-radius: 14px;
 background: #fff;
 text-decoration: none;
 overflow: hidden;
 -webkit-tap-highlight-color: #244f7626;
 touch-action: manipulation;
 transition: background-color .25s ease, box-shadow .25s ease, transform .16s ease;
}
.branch-panel-toko { --accent: #285c65; background: #f3f6f9; }
.branch-copy { position: relative; z-index: 1; }
.branch-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; color: #6b7b89; }
.branch-meta > span { display: flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 700; letter-spacing: .17em; }
.branch-meta i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.branch-meta svg { width: 21px; height: 21px; fill: none; stroke: var(--accent); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.branch-copy h2 { margin: 0 0 11px; font-size: clamp(27px, 2.8vw, 36px); line-height: 1.2; letter-spacing: -.045em; font-weight: 600; }
.branch-copy p { margin: 0; color: #627482; font-size: 13px; line-height: 1.7; }
.branch-visual { position: relative; display: grid; place-items: center; isolation: isolate; min-width: 0; height: 250px; margin: 9px -20px 5px; }
.branch-orbit { position: absolute; z-index: -1; width: min(86%, 340px); aspect-ratio: 1; border: 1px solid #53768b12; border-radius: 50%; background: radial-gradient(circle, #e7eef4a8 0, #f6f8fa00 67%); }
.branch-orbit::after { content: ""; position: absolute; inset: 20px; border: 1px dashed #53768b12; border-radius: 50%; }
.branch-watermark { position: absolute; z-index: -1; top: 12px; right: 7px; color: #193d5706; font-size: 135px; font-weight: 700; letter-spacing: -.09em; line-height: 1; }
.branch-product { display: block; width: 100%; height: 100%; max-width: 450px; min-height: 0; object-fit: contain; object-position: center; pointer-events: none; user-select: none; transition: transform .5s cubic-bezier(.2, .65, .25, 1); }
.branch-action { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 17px; border-top: 1px solid #173d5715; font-size: 12px; font-weight: 650; color: var(--accent); }
.branch-arrow { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: var(--accent); transition: transform .25s ease, background-color .25s ease; }
.branch-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.branch-panel:focus-visible { outline: 3px solid #337ab7; outline-offset: -4px; box-shadow: inset 0 0 0 6px #fff; }
.branch-panel:active { transform: scale(.987); background: #eaf1f7; box-shadow: inset 0 0 0 1px #335f7e42; }
.branch-panel:active .branch-arrow { transform: translateX(3px); }
.portal-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding-inline: 3px; color: #15344d; font-size: 10px; line-height: 1.6; }
.portal-footer p { display: flex; align-items: center; gap: 7px; margin: 0; }
.portal-footer svg { width: 15px; height: 17px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.portal-footer > span { font-size: 9px; }
@media (hover: hover) and (pointer: fine) {
 .branch-panel:hover { background: #f7fafc; box-shadow: inset 0 0 0 1px #2b536e2e; }
 .branch-panel-toko:hover { background: #eaf0f5; }
 .branch-panel:hover .branch-product { transform: translateY(-5px) scale(1.035); }
 .branch-panel:hover .branch-arrow { transform: translateX(3px); }
}
@media (max-width: 900px) and (min-width: 681px) {
 body { padding-inline: 28px; }
 .branch-panel { padding: 25px 25px 21px; }
 .branch-visual { height: 225px; margin-inline: -16px; }
 .branch-copy h2 { font-size: 29px; }
}
@media (max-width: 680px) {
 body { display: block; padding: 24px 18px max(24px, env(safe-area-inset-bottom)); }
 .portal { max-width: 480px; margin-inline: auto; }
 .portal-header { gap: 12px; margin-bottom: 26px; }
 .portal-brand { gap: 9px; }
 .portal-brand img { width: 38px; height: 38px; }
 .portal-brand strong { font-size: 12px; }
 .portal-brand small { font-size: 8px; letter-spacing: .13em; margin-top: 5px; }
 .portal-header-label { display: none; }
 .portal-intro { margin-bottom: 22px; }
 .portal-intro h1 { font-size: 29px; }
 .portal-intro > p:last-child { font-size: 12px; margin-top: 9px; }
 .branch-panels { grid-template-columns: minmax(0, 1fr); padding: 6px; gap: 6px; border-radius: 18px; box-shadow: 0 20px 60px #1c344323; }
 .branch-panel { padding: 23px 24px 18px; border-radius: 12px; }
 .branch-panel-bengkel { background: #fcfdff; }
 .branch-meta { margin-bottom: 12px; }
 .branch-meta > span { font-size: 8px; }
 .branch-meta svg { width: 18px; height: 18px; }
 .branch-copy h2 { font-size: 29px; margin-bottom: 8px; }
 .branch-copy p { font-size: 12px; line-height: 1.6; }
 .branch-visual { height: clamp(155px, 45vw, 205px); margin: 6px -12px 4px; }
 .branch-orbit { width: 205px; }
 .branch-watermark { font-size: 100px; right: 3px; top: 4px; }
 .branch-product { max-width: 340px; }
 .branch-action { padding-top: 13px; font-size: 11px; }
 .branch-arrow { width: 32px; height: 32px; flex-basis: 32px; }
 .portal-footer { flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-top: 18px; font-size: 9px; }
 .portal-footer p { justify-content: center; align-items: flex-start; }
 .portal-footer > span { font-size: 8px; }
}
@media (max-width: 350px) {
 body { padding-inline: 12px; }
 .portal-intro h1 { font-size: 26px; }
 .branch-panel { padding-inline: 19px; }
 .branch-copy h2 { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { transition: none !important; }
 .branch-panel:active, .branch-panel:hover .branch-product, .branch-panel:hover .branch-arrow, .branch-panel:active .branch-arrow { transform: none; }
}