/* Shared public-site additions. Existing hero and product checkout retain their layout. */
.network-section{padding:84px 0;color:#153846;background:#f6faf9}
.network-section.alt{background:#eaf3f3}
.network-eyebrow{display:block;font-size:10px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:#22867b;margin-bottom:16px}
.network-title{font-size:clamp(28px,3.4vw,44px);line-height:1.16;letter-spacing:-.045em;font-weight:600;margin:0 0 20px}
.network-copy{font-size:14px;line-height:1.85;color:#58717a;max-width:620px}
.network-head{display:flex;align-items:end;justify-content:space-between;gap:36px;margin-bottom:32px}
.network-head .network-copy{max-width:390px}
.network-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.network-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px;border:1px solid #dce9e7;border-radius:22px;background:#fff;color:#173d48}
.network-card h3{font-size:21px;font-weight:600;letter-spacing:-.025em;margin:0;line-height:1.3}
.network-card p{font-size:13px;line-height:1.85;color:#607680;margin:0}
.network-card .network-link{margin-top:auto;padding-top:12px}
.network-number{display:grid;place-items:center;width:40px;height:40px;border:1px solid #bfe2d8;border-radius:13px;background:#edf8f3;color:#187b69;font-size:13px;margin-bottom:12px}
.network-link{color:#166e64;font-size:12px;font-weight:600;text-decoration:none;display:inline-block}
.network-link:hover{text-decoration:underline;text-underline-offset:4px}
.network-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 22px;border:1px solid transparent;border-radius:12px;background:#166e64;color:#fff;font:inherit;font-size:12px;font-weight:600;text-decoration:none;cursor:pointer;min-height:46px}
.network-button.secondary{background:transparent;border-color:#bfd4d4;color:#234a57}
.network-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.network-split{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}
.network-story{background:#14333e;color:#f0f7f6;padding:84px 0}
.network-story .network-copy{color:#b6cdd0}
.network-story .network-eyebrow{color:#9cdbca}
.network-story-note{font-size:11px;color:#a5c4c8;margin-top:24px;border-left:2px solid #91d4c1;padding-left:16px;line-height:1.8}
.network-story-art{min-height:370px;position:relative;border:1px solid #ffffff1f;border-radius:30px;padding:32px;background:radial-gradient(ellipse at center,#3c8e7840,transparent 68%),#ffffff05;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.network-story-art img{width:100%;height:260px;object-fit:contain}
.network-story-art span{font-size:11px;letter-spacing:.17em;color:#bce6d9}
.network-story-art strong{font-size:28px;font-weight:500;letter-spacing:-.03em}
.network-home{padding:40px;border-radius:28px;border:1px solid #d9e6e4;background:#f4f7ed;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.network-home img{width:100%;height:230px;object-fit:contain}
.network-directory{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px 0 0}
.network-directory a{font-size:11px;color:#254f60;padding:10px 15px;border:1px solid #ffffffa0;border-radius:25px;background:#ffffff65;text-decoration:none}
.network-directory a:hover{background:#fff}
.service-context{background:#eff7f4;border-bottom:1px solid #dce9e5;color:#204854;padding:22px 0}
.service-context-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.service-context strong{font-size:13px;font-weight:600;display:block}
.service-context p{font-size:11px;line-height:1.7;color:#5b777d;margin:5px 0 0;max-width:610px}
.service-context-controls{display:flex;gap:10px;align-items:center}
.service-context label{font-size:10px;color:#507078;display:flex;flex-direction:column;gap:5px}
.service-context select{font:inherit;font-size:12px;border:1px solid #c3dbd6;background:#fff;border-radius:10px;color:#214a53;padding:12px;min-width:150px;min-height:44px}
.service-context button{font:inherit;font-size:11px;border:1px solid #bcd9d1;background:#fff;border-radius:10px;color:#186b5b;padding:13px;cursor:pointer;min-height:44px;align-self:end}
.service-context button:disabled{opacity:.6;cursor:wait}
.service-context [data-location-feedback]:empty{display:none}
.network-section a:focus-visible,.network-story a:focus-visible,.service-context :focus-visible,.network-directory a:focus-visible{outline:3px solid #178b76;outline-offset:4px}
.network-steps{counter-reset:steps;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.network-step{border-top:1px solid #b5cfcc;padding:24px 0 0}
.network-step>span{font-size:11px;color:#208171}
.network-step h3{font-size:18px;font-weight:600;margin:14px 0 10px}
.network-step p{font-size:12px;color:#5a747c;line-height:1.8}
.network-guide-card{display:block;padding:28px;border-radius:20px;background:#fff;border:1px solid #dce9e7;color:#173d48;text-decoration:none;transition:transform .2s}
.network-guide-card:hover{transform:translateY(-3px)}
.network-guide-card h3{font-size:20px;line-height:1.35;margin:18px 0 14px;letter-spacing:-.02em}
.network-guide-card p{font-size:12px;color:#61777d;line-height:1.8;margin-bottom:22px}
.network-guide-card>span{font-size:10px;color:#238370;letter-spacing:.08em}
@media(max-width:900px){.network-head{align-items:start;flex-direction:column;gap:4px}.network-split{gap:30px}.network-grid{gap:14px}.network-card{padding:22px}.network-steps{grid-template-columns:repeat(2,1fr)}.service-context-controls{flex:1}.service-context-controls label{flex:1}.service-context select{width:100%}}
@media(max-width:640px){.network-section,.network-story{padding:56px 0}.network-grid,.network-split,.network-home{grid-template-columns:1fr}.network-copy{font-size:13px}.network-head{margin-bottom:24px}.network-card{padding:24px}.network-story-art{min-height:300px;padding:24px}.network-story-art img{height:220px}.network-home{padding:26px;gap:12px}.network-home img{height:190px}.network-steps{gap:24px 18px}.service-context-inner{gap:16px}.service-context-controls{width:100%}.service-context select{min-width:0}.service-context-controls button{max-width:150px;line-height:1.4}.network-directory{gap:8px}.network-directory a{font-size:10px;padding:9px 12px}}
@media(prefers-reduced-motion:reduce){.network-guide-card{transition:none}}

.brands-section .brands-heading{justify-content:center;text-align:center;margin-bottom:32px}
.brands-section #brands-title{font-size:clamp(25px,3vw,37px);font-weight:600;letter-spacing:-.035em;line-height:1.25;color:#1c4452;margin:12px 0 16px}
.brands-section .brands-heading p{font-size:12px;line-height:1.8;max-width:560px;color:#58717a}
@media(max-width:640px){.brands-section #brands-title{font-size:25px}.brands-section .brands-heading p{font-size:11px}}

/* Brand introduction and EV discovery share one hero. */
.new-hero h1{font-size:clamp(38px,4.1vw,58px);line-height:1.13;letter-spacing:-.045em}
.new-hero .intro-copy{max-width:430px}
.hero-ev-intro{margin-top:24px;padding-left:16px;border-left:2px solid #66bea7}
.hero-ev-intro>span{font-size:9px;letter-spacing:.14em;color:#8fcbbc;font-weight:600}
.hero-ev-intro p{font-size:15px;line-height:1.65;margin:7px 0 0;color:#b5c7cd}
.hero-ev-intro strong{font-weight:600;color:#e1f8ef}
@media(max-width:640px){.new-hero h1{font-size:clamp(32px,8.7vw,48px)}.hero-ev-intro{margin-top:20px}.hero-ev-intro p{font-size:14px}}


#katalog-container[hidden],.catalog-section[hidden]{display:none!important}

/* One overview brings product education, purchasing and support together. */
.raditya-overview{padding:80px 0;background:linear-gradient(125deg,#f0f7f2,#f7fafc);color:#193d47}
.overview-layout{display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;align-items:start}
.overview-intro h2{font-size:clamp(30px,3.5vw,46px);line-height:1.15;letter-spacing:-.045em;margin:0 0 22px;font-weight:600}
.overview-intro h2 em{font-style:normal;color:#258574}
.overview-intro>p{font-size:13px;line-height:1.9;color:#60777d;max-width:390px;margin-bottom:24px}
.overview-benefits{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.overview-benefits span{font-size:10px;padding:8px 11px;border:1px solid #cde2d9;border-radius:30px;color:#356a5c;background:#ffffff75}
.overview-topics details{border:1px solid #dce8e3;border-radius:18px;background:#ffffffb8;margin-bottom:12px;overflow:hidden}
.overview-topics details[open]{background:#fff;box-shadow:0 12px 35px #224c3c06}
.overview-topics summary{display:flex;align-items:center;gap:16px;padding:22px;cursor:pointer;list-style:none}
.overview-topics summary::-webkit-details-marker{display:none}
.overview-number{font-size:11px;color:#358371;background:#edf7f1;width:36px;height:36px;display:grid;place-items:center;border-radius:11px;flex-shrink:0}
.overview-topics summary strong{display:block;font-size:17px;line-height:1.4;font-weight:600;letter-spacing:-.02em}
.overview-topics summary small{display:block;font-size:10px;color:#71868b;margin-top:5px}
.overview-toggle{margin-left:auto;font-size:23px;color:#478d7d;font-weight:300}
.overview-topics details[open] .overview-toggle{transform:rotate(45deg)}
.overview-answer{padding:0 24px 24px 74px;color:#5e757c;font-size:12px;line-height:1.85}
.overview-answer p{margin:0 0 12px}
.overview-answer ol{padding-left:17px;margin:0 0 14px}
.overview-answer li{padding-left:4px;margin-bottom:10px}
.overview-answer strong{color:#315c60;font-weight:600}
.overview-links{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:18px}
.overview-links a{color:#237e6d;font-size:11px;font-weight:600;text-decoration:none}
.overview-links a:hover{text-decoration:underline}
.overview-note{font-size:10px;color:#7a8d90;padding:6px 4px}
.raditya-overview :focus-visible{outline:2px solid #258574;outline-offset:4px}
@media(max-width:800px){.overview-layout{gap:32px;grid-template-columns:1fr}.raditya-overview{padding:52px 0}.overview-intro h2 br:nth-child(2){display:none}.overview-intro>p{max-width:520px}.overview-intro h2{font-size:28px}.overview-benefits{margin-bottom:20px}.overview-topics summary{padding:18px;gap:12px}.overview-topics summary strong{font-size:15px}.overview-answer{padding:0 20px 20px}.overview-topics summary small{font-size:9px}}

/* ── 3D CURVED PANORAMA HERO (RADITYA FRESH BLUE EDITION) ───── */
:root{
 --in-oklch: ;
}
@supports (background: linear-gradient(in oklch, white, black)){
 :root{
  --in-oklch: in oklch;
 }
}
#navbar,#navbar.scrolled{
 position:fixed;
 top:0;
 left:0;
 right:0;
 z-index:50;
 background:transparent!important;
 border:0!important;
 box-shadow:none!important;
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
 pointer-events:none;
}
#navbar .nav-row{
 pointer-events:auto;
 background:linear-gradient(115deg var(--in-oklch), rgba(11,79,105,0.52), rgba(1,162,240,0.18));
 border:1px solid rgba(186,230,253,0.28);
 backdrop-filter:blur(20px) saturate(140%);
 -webkit-backdrop-filter:blur(20px) saturate(140%);
 box-shadow:0 12px 32px rgba(4,28,46,0.2), inset 0 1px 0 rgba(255,255,255,0.22);
}
#navbar.scrolled .nav-row{
 background:linear-gradient(115deg var(--in-oklch), rgba(8,56,86,0.84), rgba(11,79,105,0.78));
 border-color:rgba(125,211,252,0.34);
 box-shadow:0 14px 36px rgba(3,22,38,0.32), inset 0 1px 0 rgba(255,255,255,0.22);
}
.sales-referral-banner:not([hidden]){
 padding-top:104px;
}
#navbar .nav-links .pill-link,
#navbar .pill-link.gold{
 background:linear-gradient(125deg var(--in-oklch), #58c7ff 0%, #01a2f0 100%);
 color:#04243a;
 box-shadow:0 6px 20px rgba(1,162,240,0.32), inset 0 1px 0 rgba(255,255,255,0.6);
 border-color:rgba(186,230,253,0.5);
}
#navbar .nav-links .pill-link:hover{
 background:linear-gradient(125deg var(--in-oklch), #7ad5ff 0%, #14afff 100%);
}
.floating-contact{
 background:rgba(8,56,86,0.88);
 border-color:rgba(88,199,255,0.45);
 color:#6be0ff;
}
.new-hero .ev-hero-bottom{
 position:relative;
 z-index:3;
 color:#cbe8fb;
 border-top:1px solid rgba(186,230,253,0.16);
 padding-top:18px;
 padding-bottom:18px;
 margin-top:4px;
}
.new-hero .ev-hero-bottom a{
 color:#f0f9ff;
 padding:7px 14px;
 border-radius:999px;
 background:rgba(1,162,240,0.16);
 border:1px solid rgba(125,211,252,0.32);
 backdrop-filter:blur(8px);
 transition:background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.new-hero .ev-hero-bottom a:hover{
 background:rgba(1,162,240,0.28);
 border-color:rgba(125,211,252,0.6);
 transform:translateY(-1px);
}
.new-hero .ev-hero-bottom a span{
 color:#5ce1ff;
}
.new-hero.hero-curved-section{
 position:relative;
 overflow:hidden;
 padding:120px 0 64px;
 background:
  radial-gradient(ellipse 76% 64% at 50% 48% var(--in-oklch), #026eb8 0%, #005896 36%, #0b4f69 70%, #07354f 100%);
 color:#fff;
 isolation:isolate;
}
.new-hero.hero-curved-section::before{
 content:'';
 position:absolute;
 inset:0;
 pointer-events:none;
 z-index:0;
 background:
  linear-gradient(90deg var(--in-oklch), rgba(5,36,59,0.52) 0%, transparent 11%, transparent 89%, rgba(5,36,59,0.52) 100%),
  radial-gradient(ellipse 58% 42% at 50% 10% var(--in-oklch), rgba(1,162,240,0.34), transparent 72%),
  radial-gradient(ellipse 52% 38% at 50% 64% var(--in-oklch), rgba(1,162,240,0.22), transparent 70%);
}
/* Horizon soft glow behind the curved arch transition */
.new-hero.hero-curved-section::after{
 content:'';
 position:absolute;
 left:-10%;
 right:-10%;
 bottom:-20px;
 height:150px;
 pointer-events:none;
 z-index:1;
 background:
  radial-gradient(ellipse 62% 95% at 50% 100% var(--in-oklch), rgba(88,199,255,0.42) 0%, rgba(1,162,240,0.18) 48%, transparent 76%);
}

/* Smooth Curved Arch (Lengkungan Kubah) on the following section (#merek) */
#merek.brands-section{
 position:relative;
 z-index:5;
 margin-top:-52px;
 padding:54px 0 46px;
 border-radius:50% 50% 0 0 / 54px 54px 0 0;
 border-top:1.5px solid rgba(255,255,255,0.92);
 background:
  radial-gradient(ellipse 68% 58% at 50% 0% var(--in-oklch), rgba(186,230,253,0.52) 0%, transparent 72%),
  radial-gradient(ellipse at 20% 100% var(--in-oklch), rgba(186,230,253,0.32), transparent 55%),
  radial-gradient(ellipse at 90% 10% var(--in-oklch), rgba(213,226,241,0.6), transparent 50%),
  #eff5f9;
 box-shadow:
  0 -22px 56px rgba(1,162,240,0.26),
  0 -4px 18px rgba(4,30,50,0.22),
  inset 0 2px 0 rgba(255,255,255,0.96),
  inset 0 24px 48px rgba(186,230,253,0.28);
}
#merek.brands-section::before{
 content:'';
 position:absolute;
 top:16px;
 left:50%;
 transform:translateX(-50%);
 width:54px;
 height:4px;
 border-radius:999px;
 background:linear-gradient(90deg var(--in-oklch), rgba(1,162,240,0.15), rgba(1,162,240,0.48), rgba(1,162,240,0.15));
 pointer-events:none;
}
#merek.brands-section .brands-heading .kicker{
 color:#0061a8;
}
#merek.brands-section #brands-title{
 color:#0b3b59;
}
.hero-curved-header{
 position:relative;
 z-index:3;
 display:flex;
 flex-direction:column;
 align-items:center;
 text-align:center;
 max-width:840px;
 margin:0 auto;
 padding-bottom:18px;
}
.hero-curved-header .ev-badge{
 margin:0 auto 16px;
 background:rgba(1,162,240,0.14);
 border:1px solid rgba(125,211,252,0.34);
 color:#e0f4ff;
 box-shadow:0 4px 18px rgba(0,48,84,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
}
.hero-curved-header .ev-badge .ev-status-dot{
 background:#38bdf8;
 box-shadow:0 0 10px rgba(56,189,248,0.85);
}
.hero-curved-header h1{
 font-size:clamp(34px,4.4vw,56px);
 line-height:1.08;
 letter-spacing:-0.045em;
 margin:0 0 14px;
 color:#f5fbff;
 text-shadow:0 8px 28px rgba(4,30,50,0.32);
}
.hero-curved-header h1 em{
 color:#5ce1ff;
 font-style:normal;
}
.hero-curved-header .intro-copy{
 max-width:590px;
 margin:0 auto;
 font-size:14px;
 line-height:1.75;
 color:#d0e8f8;
}
.hero-curved-header .hero-ev-intro{
 margin:14px auto 0;
 padding:8px 16px;
 border-left:0;
 border:1px solid rgba(88,199,255,0.32);
 border-radius:999px;
 background:linear-gradient(120deg var(--in-oklch), rgba(7,56,88,0.72), rgba(0,97,168,0.52));
 display:inline-flex;
 align-items:center;
 gap:10px;
 flex-wrap:wrap;
 justify-content:center;
 backdrop-filter:blur(12px);
 box-shadow:0 8px 24px rgba(4,32,54,0.28);
}
.hero-curved-header .hero-ev-intro>span{
 font-size:9px;
 letter-spacing:0.15em;
 color:#6be0ff;
 padding-right:10px;
 border-right:1px solid rgba(255,255,255,0.22);
}
.hero-curved-header .hero-ev-intro p{
 margin:0;
 font-size:13px;
 color:#e4f4ff;
}
.hero-curved-header .hero-ev-intro strong{
 color:#ffffff;
}
.hero-curved-header .hero-actions{
 margin-top:18px;
 justify-content:center;
 gap:12px;
}
.hero-curved-header .hero-actions .pill-link.gold{
 background:linear-gradient(125deg var(--in-oklch), #38bdf8 0%, #01a2f0 100%);
 color:#04243a;
 box-shadow:0 10px 26px rgba(1,162,240,0.36), inset 0 1px 0 rgba(255,255,255,0.55);
}
.hero-curved-header .hero-actions .pill-link.gold:hover{
 background:linear-gradient(125deg var(--in-oklch), #67d4ff 0%, #0cb0ff 100%);
 transform:translateY(-1px);
}
.hero-curved-header .hero-actions .pill-link.outline{
 outline:none;
 border:1px solid rgba(186,230,253,0.36);
 background:rgba(255,255,255,0.08);
 color:#eff8ff;
}
.hero-curved-header .hero-actions .pill-link.outline:focus-visible{
 outline:2px solid #5ce1ff;
 outline-offset:4px;
}
.hero-curved-header .hero-actions .pill-link.outline:hover{
 border-color:rgba(92,225,255,0.68);
 background:rgba(1,162,240,0.2);
}
.hero-curved-header .hero-location{
 margin-top:14px;
 justify-content:center;
 color:#bce0f7;
 font-size:11px;
}
.hero-curved-header .hero-location>span{
 color:#5ce1ff;
}

/* 3D Cylindrical Panorama Strip */
.hero-panorama-shell{
 position:relative;
 z-index:2;
 width:100%;
 padding:8px 0 18px;
}
.hero-panorama-viewport{
 --card-w:clamp(290px, 37.5vw, 485px);
 --card-h:calc(var(--card-w) * 0.64);
 --card-gap:clamp(18px, 2.2vw, 30px);
 position:relative;
 width:100vw;
 left:50%;
 transform:translateX(-50%);
 height:calc(var(--card-h) + 34px);
 perspective:1150px;
 perspective-origin:50% 50%;
 overflow:hidden;
 user-select:none;
}
/* Subtle top & bottom cylinder lip framing like in reference image */
.hero-panorama-viewport::before,
.hero-panorama-viewport::after{
 content:'';
 position:absolute;
 left:-6%;
 right:-6%;
 height:26px;
 z-index:8;
 pointer-events:none;
 border-radius:50%;
}
.hero-panorama-viewport::before{
 top:-14px;
 background:radial-gradient(ellipse at 50% 100% var(--in-oklch), rgba(9,63,96,0.65) 0%, transparent 72%);
}
.hero-panorama-viewport::after{
 bottom:-14px;
 background:radial-gradient(ellipse at 50% 0% var(--in-oklch), rgba(6,42,66,0.75) 0%, transparent 72%);
}
.hero-panorama-stage{
 position:relative;
 width:100%;
 height:100%;
 transform-style:preserve-3d;
}
.hero-pano-card{
 position:absolute;
 top:50%;
 left:50%;
 width:var(--card-w);
 height:var(--card-h);
 border-radius:18px;
 overflow:hidden;
 border:1.5px solid rgba(186,230,253,0.24);
 box-shadow:0 22px 50px rgba(3,22,38,0.52);
 cursor:pointer;
 opacity:1;
 transition:
  transform 0.78s cubic-bezier(0.22, 1, 0.36, 1),
  opacity 0.55s ease,
  filter 0.78s cubic-bezier(0.22, 1, 0.36, 1),
  border-color 0.35s ease,
  box-shadow 0.45s ease;
 backface-visibility:hidden;
 will-change:transform, opacity;
}
.hero-pano-card.is-snapping{
 transition:none!important;
}
.hero-pano-card:focus-visible{
 outline:3px solid #5ce1ff;
 outline-offset:4px;
}
/* Center card (pos = 0): flat facing viewer */
.hero-pano-card[data-pos="0"]{
 transform-origin:center center;
 transform:translate3d(-50%, -50%, 0px) rotateY(0deg);
 z-index:5;
 opacity:1;
 border-color:rgba(125,211,252,0.52);
 box-shadow:0 26px 64px rgba(3,20,36,0.65), 0 0 0 1px rgba(186,230,253,0.16);
 filter:brightness(1.04);
}
/* Left card (pos = -1): right edge aligned with center card, left edge receding along cylinder */
.hero-pano-card[data-pos="-1"]{
 transform-origin:right center;
 transform:translate3d(calc(-150% - var(--card-gap)), -50%, -4px) rotateY(-24deg);
 z-index:4;
 opacity:1;
 filter:brightness(0.95) saturate(0.98);
}
/* Right card (pos = 1): left edge aligned with center card, right edge receding along cylinder */
.hero-pano-card[data-pos="1"]{
 transform-origin:left center;
 transform:translate3d(calc(50% + var(--card-gap)), -50%, -4px) rotateY(24deg);
 z-index:4;
 opacity:1;
 filter:brightness(0.96) saturate(0.98);
}
/* Far-left card sliver (pos = -2): continues cylinder curve at left viewport edge */
.hero-pano-card[data-pos="-2"]{
 transform-origin:right center;
 transform:translate3d(calc(-150% - var(--card-gap) * 1.95 - var(--card-w) * 0.895), -50%, calc(-8px - var(--card-w) * 0.4067)) rotateY(-42deg);
 z-index:2;
 opacity:1;
 filter:brightness(0.86) saturate(0.94);
}
/* Far-right card sliver (pos = 2): continues cylinder curve at right viewport edge */
.hero-pano-card[data-pos="2"]{
 transform-origin:left center;
 transform:translate3d(calc(50% + var(--card-gap) * 1.95 + var(--card-w) * 0.895), -50%, calc(-8px - var(--card-w) * 0.4067)) rotateY(42deg);
 z-index:2;
 opacity:1;
 filter:brightness(0.86) saturate(0.94);
}
/* Off-screen left (pos = -3): smooth exit beyond left cylinder rim */
.hero-pano-card[data-pos="-3"]{
 transform-origin:right center;
 transform:translate3d(calc(-150% - var(--card-gap) * 2.9 - var(--card-w) * 1.56), -50%, calc(-24px - var(--card-w) * 0.82)) rotateY(-58deg);
 z-index:1;
 opacity:0;
 pointer-events:none;
 filter:brightness(0.74) saturate(0.9);
}
/* Off-screen right (pos = 3): smooth entry from beyond right cylinder rim */
.hero-pano-card[data-pos="3"]{
 transform-origin:left center;
 transform:translate3d(calc(50% + var(--card-gap) * 2.9 + var(--card-w) * 1.56), -50%, calc(-24px - var(--card-w) * 0.82)) rotateY(58deg);
 z-index:1;
 opacity:0;
 pointer-events:none;
 filter:brightness(0.74) saturate(0.9);
}
.hero-pano-card:hover{
 border-color:rgba(125,211,252,0.75);
}

/* Card Visual Themes */
.hero-pano-card>img{
 width:100%;
 height:100%;
 display:block;
 transition:transform 0.55s ease;
}
.hero-pano-card:hover>img{
 transform:scale(1.03);
}
.pano-theme-photo{
 background:#0c3b59;
}
.pano-theme-photo>img{
 object-fit:cover;
 object-position:center 55%;
 filter:contrast(1.05) brightness(0.94);
}
.pano-theme-photo::after{
 content:'';
 position:absolute;
 inset:0;
 background:linear-gradient(180deg var(--in-oklch), rgba(8,46,74,0.18) 0%, rgba(8,42,68,0.12) 48%, rgba(6,33,54,0.78) 100%);
 pointer-events:none;
}

.pano-theme-featured{
 background:linear-gradient(135deg var(--in-oklch), #0f5279 0%, #0b3c5d 55%, #072840 100%);
}
.pano-theme-featured .pano-bg-photo{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 object-fit:cover;
 object-position:center 58%;
 opacity:0.32;
 mix-blend-mode:luminosity;
}
.pano-featured-overlay{
 position:absolute;
 inset:0;
 background:
  radial-gradient(circle at 72% 45% var(--in-oklch), rgba(1,162,240,0.32), transparent 52%),
  radial-gradient(circle at 28% 30% var(--in-oklch), rgba(255,180,0,0.16), transparent 46%),
  linear-gradient(180deg var(--in-oklch), rgba(9,49,77,0.2) 0%, rgba(6,32,52,0.82) 100%);
 pointer-events:none;
}
.pano-theme-featured .pano-featured-bike{
 position:relative;
 z-index:2;
 width:88%;
 height:86%;
 margin:3% auto 0;
 object-fit:contain;
 filter:drop-shadow(0 20px 24px rgba(2,18,32,0.55));
}

/* Sky-blue architectural card on the right (matching reference image's right card) */
.pano-theme-sky{
 background:linear-gradient(175deg var(--in-oklch), #b3e0fa 0%, #cdebfb 56%, #e6f5fd 100%);
 border-color:rgba(255,255,255,0.55);
}
.pano-sky-arch{
 position:absolute;
 right:-8%;
 bottom:-12%;
 width:68%;
 height:76%;
 background:linear-gradient(135deg, rgba(255,255,255,0.94) 0%, rgba(224,239,248,0.9) 55%, rgba(190,218,236,0.86) 100%);
 transform:skewY(-18deg) rotate(-8deg);
 border-top:2px solid #fff;
 border-left:2px solid #fff;
 box-shadow:-12px 12px 32px rgba(11,79,105,0.1);
 pointer-events:none;
}
.pano-theme-sky>img{
 position:relative;
 z-index:2;
 object-fit:contain;
 padding:18px 22px 54px;
 filter:drop-shadow(0 16px 22px rgba(11,60,93,0.2));
}

.pano-theme-studio{
 background:
  radial-gradient(circle at 82% 24% var(--in-oklch), rgba(255,188,66,0.24), transparent 44%),
  linear-gradient(145deg var(--in-oklch), #125884 0%, #0b4164 60%, #072b44 100%);
}
.pano-theme-studio>img{
 position:relative;
 z-index:2;
 object-fit:contain;
 padding:18px 20px 52px;
 filter:drop-shadow(0 18px 20px rgba(2,18,32,0.48));
}

.pano-theme-studio-dark{
 background:
  radial-gradient(circle at 24% 25% var(--in-oklch), rgba(1,162,240,0.28), transparent 50%),
  linear-gradient(145deg var(--in-oklch), #0e4c73 0%, #093552 65%, #062338 100%);
}
.pano-theme-studio-dark>img{
 position:relative;
 z-index:2;
 object-fit:contain;
 padding:18px 20px 52px;
 filter:drop-shadow(0 18px 20px rgba(2,18,32,0.52));
}

.pano-theme-crimson{
 background:
  radial-gradient(circle at 75% 28% var(--in-oklch), rgba(56,189,248,0.26), transparent 48%),
  linear-gradient(145deg var(--in-oklch), #144d75 0%, #0b3656 62%, #07243b 100%);
}
.pano-theme-crimson>img{
 position:relative;
 z-index:2;
 object-fit:contain;
 padding:16px 20px 52px;
 filter:drop-shadow(0 18px 22px rgba(2,18,32,0.52));
}

/* Bold concrete-wall style typographic backdrop inside cards (inspired by reference image) */
.hero-pano-wall-text{
 position:absolute;
 top:14%;
 left:8%;
 z-index:1;
 font-size:clamp(22px, 2.5vw, 36px);
 font-weight:800;
 line-height:1.02;
 letter-spacing:0.04em;
 color:rgba(224,242,254,0.24);
 text-transform:uppercase;
 pointer-events:none;
 text-shadow:0 2px 12px rgba(3,22,38,0.24);
}
.pano-theme-photo .hero-pano-wall-text{
 color:rgba(255,255,255,0.76);
 text-shadow:0 4px 18px rgba(4,28,46,0.48);
}

/* Card top tag & bottom captions */
.hero-pano-top-tag{
 position:absolute;
 top:14px;
 left:16px;
 right:16px;
 z-index:3;
 display:flex;
 justify-content:space-between;
 align-items:center;
 font-size:9px;
 letter-spacing:0.14em;
 color:#d8f0ff;
}
.hero-pano-top-tag i{
 display:inline-block;
 width:6px;
 height:6px;
 border-radius:50%;
 background:#38bdf8;
 box-shadow:0 0 8px rgba(56,189,248,0.8);
 margin-right:6px;
}
.hero-pano-caption{
 position:absolute;
 left:14px;
 right:14px;
 bottom:12px;
 z-index:3;
 padding:10px 14px;
 border-radius:12px;
 background:rgba(7,43,68,0.72);
 border:1px solid rgba(186,230,253,0.22);
 backdrop-filter:blur(12px);
 -webkit-backdrop-filter:blur(12px);
 display:flex;
 flex-direction:column;
 gap:2px;
 color:#f2faff;
}
.hero-pano-caption span{
 font-size:8px;
 letter-spacing:0.14em;
 text-transform:uppercase;
 color:#8cd4ff;
}
.hero-pano-caption strong,
.hero-pano-caption h2{
 font-size:15px;
 font-weight:600;
 letter-spacing:-0.02em;
 margin:0;
 color:#fff;
}
.hero-pano-caption.pano-caption-featured{
 flex-direction:row;
 align-items:center;
 justify-content:space-between;
}
.pano-action-circle{
 width:32px;
 height:32px;
 border-radius:50%;
 border:1px solid rgba(88,199,255,0.55);
 background:rgba(1,162,240,0.22);
 color:#6be0ff !important;
 font-size:16px !important;
 display:grid;
 place-items:center;
 flex-shrink:0;
}
.hero-pano-caption.pano-caption-light{
 background:rgba(255,255,255,0.82);
 border-color:rgba(255,255,255,0.92);
 color:#0b3b59;
}
.hero-pano-caption.pano-caption-light span{
 color:#0061a8;
}
.hero-pano-caption.pano-caption-light strong{
 color:#072c44;
}

/* Carousel Controls */
.hero-pano-controls{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:12px;
 margin-top:6px;
}
.hero-pano-nav-btn,
.hero-pano-autoplay-btn{
 width:34px;
 height:34px;
 border-radius:999px;
 border:1px solid rgba(255,255,255,0.2);
 background:rgba(255,255,255,0.08);
 color:#e0f2fe;
 display:grid;
 place-items:center;
 cursor:pointer;
 font-size:13px;
 transition:background 0.2s, border-color 0.2s, transform 0.2s;
}
.hero-pano-nav-btn:hover,
.hero-pano-autoplay-btn:hover{
 background:rgba(1,162,240,0.22);
 border-color:#5ce1ff;
 color:#fff;
 transform:scale(1.05);
}
.hero-pano-dots{
 display:flex;
 align-items:center;
 gap:7px;
 padding:6px 12px;
 border-radius:999px;
 background:rgba(255,255,255,0.06);
 border:1px solid rgba(255,255,255,0.12);
}
.hero-pano-dot{
 position:relative;
 overflow:hidden;
 width:7px;
 height:7px;
 border-radius:999px;
 border:0;
 padding:0;
 background:rgba(255,255,255,0.28);
 cursor:pointer;
 transition:width 0.25s ease, background 0.25s ease;
}
.hero-pano-dot.is-active{
 width:26px;
 background:rgba(88,199,255,0.32);
}
.hero-pano-dot.is-active::after{
 content:'';
 position:absolute;
 inset:0;
 border-radius:999px;
 background:#5ce1ff;
 transform-origin:left center;
 animation:hero-dot-progress 3.2s linear infinite;
}
.hero-pano-controls.is-paused .hero-pano-dot.is-active::after{
 animation-play-state:paused;
 transform:scaleX(1);
}
@keyframes hero-dot-progress{
 from{transform:scaleX(0)}
 to{transform:scaleX(1)}
}

.hero-actions-mobile{
 display:none;
}
@media(max-width:900px){
 .hero-panorama-viewport{
  --card-w:clamp(260px, 54vw, 390px);
  --card-gap:16px;
 }
}
@media(max-width:640px){
 .new-hero.hero-curved-section{
  padding-top:104px;
  padding-bottom:28px;
 }
 #merek.brands-section{
  margin-top:-24px;
  padding:34px 0 28px;
  border-radius:50% 50% 0 0 / 24px 24px 0 0;
 }
 .hero-curved-header{
  padding-bottom:8px;
  max-width:100%;
  padding-left:18px;
  padding-right:18px;
 }
 .hero-curved-header .ev-badge{
  margin-bottom:12px;
  font-size:9.5px;
  letter-spacing:.12em;
 }
 .hero-curved-header h1{
  font-size:clamp(26px, 7.5vw, 34px);
  line-height:1.15;
  margin-bottom:10px;
 }
 .hero-curved-header .intro-copy{
  font-size:12.5px;
  line-height:1.6;
  max-width:320px;
  margin:0 auto;
  color:#d0e8f8;
 }
 .hero-actions-desktop{
  display:none!important;
 }
 .hero-actions-mobile{
  display:flex;
  justify-content:center;
  gap:10px;
  width:min(350px, calc(100% - 32px));
  margin:18px auto 0;
  position:relative;
  z-index:6;
 }
 .hero-actions-mobile .pill-link{
  flex:1;
  min-height:44px;
  padding:11px 14px;
  font-size:12px;
  font-weight:600;
  justify-content:center;
  text-align:center;
  border-radius:10px;
 }
 .hero-actions-mobile .pill-link.gold{
  background:linear-gradient(125deg, #38bdf8 0%, #01a2f0 100%);
  color:#04243a;
  box-shadow:0 8px 22px rgba(1,162,240,0.38);
 }
 .hero-actions-mobile .pill-link.outline{
  border:1px solid rgba(186,230,253,0.36);
  background:rgba(255,255,255,0.08);
  color:#eff8ff;
 }
 .new-hero .ev-hero-bottom{
  margin-top:10px;
  padding-top:12px;
  padding-bottom:10px;
  font-size:9px;
 }
 .hero-panorama-viewport{
  --card-w:clamp(235px, 68vw, 310px);
  --card-gap:12px;
  perspective:850px;
 }
 .hero-pano-wall-text{
  font-size:18px;
 }
 .hero-pano-caption{
  padding:8px 11px;
  bottom:9px;
  left:9px;
  right:9px;
 }
 .hero-pano-caption strong,
 .hero-pano-caption h2{
  font-size:13px;
 }
}
@media(prefers-reduced-motion:reduce){
 .hero-pano-card,
 .hero-pano-card>img,
 .hero-pano-dot{
  transition:none!important;
 }
 .hero-pano-dot.is-active::after{
  animation:none!important;
  transform:scaleX(1);
 }
}