/* Bentor Go - tampilan pelanggan (premium). Dimuat setelah style.css, hanya oleh index.html. */
/* ===== PREMIUM: menu bawah terang, rata penuh tanpa kotak ===== */
.nav{width:100%;max-width:520px;left:50%;bottom:0;transform:translateX(-50%);padding:8px 6px calc(6px + env(safe-area-inset-bottom,0px));border:0;border-radius:0;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 -1px 0 #eee8dc,0 -12px 26px -16px #1c191533;overflow:visible}
.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#f5822099,transparent);pointer-events:none}
.nav button{position:relative;gap:4px;padding:6px 4px 4px;border-radius:0;background:transparent;box-shadow:none;color:#8f897d;font:600 11px/1 var(--disp,inherit);letter-spacing:.01em;transition:color .25s,transform .3s var(--spr,ease)}
.nav button:active{transform:scale(.92)}
.nav button svg{width:24px;height:24px;stroke-width:1.7}
.nav svg .d{fill:currentColor;fill-opacity:.1}
.nav button[aria-current="true"]{color:#e07600;background:transparent;box-shadow:none}
.nav button[aria-current="true"] svg{stroke:#e07600;fill:none;filter:none}
.nav button[aria-current="true"] svg .d{fill:#f58220;fill-opacity:.22}
.nav button[aria-current="true"]::after{content:"";position:absolute;top:-8px;bottom:auto;left:50%;width:30px;height:3px;margin-left:-15px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#ffb04a,#f06a00)}
.nav .nb{background:linear-gradient(135deg,#ff8a6b,#e03a24);box-shadow:0 0 0 2px #fff}
body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}

/* ===== Iklan: efek profesional ===== */
.adt{box-shadow:0 22px 34px -22px #1658b8cc,0 0 0 1px #ffffff26 inset,0 2px 6px #1714100d}
.ads{transition:filter .4s}
.ads::before{animation:adFloat 7s ease-in-out infinite alternate}
.ads::after{animation:adFloat 9s ease-in-out -3s infinite alternate-reverse}
@keyframes adFloat{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-14px,10px,0) scale(1.12)}}
.ads .adg,.ads>.adx::before{pointer-events:none}
/* kilau menyapu */
.adt .ads>.adx::after{content:"";position:absolute;inset:-40% auto -40% -60%;width:38%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,#ffffff3a,transparent);animation:adSheen 6.5s 1.2s ease-in-out infinite;pointer-events:none}
@keyframes adSheen{0%{left:-60%}38%,100%{left:140%}}
/* masuknya teks saat slide aktif */
.ads .adk,.ads h2,.ads p,.ads .adb{opacity:0;transform:translateY(8px)}
.ads.on .adk,.ads.on h2,.ads.on p,.ads.on .adb{animation:adIn .7s var(--eo,ease) both}
.ads.on h2{animation-delay:.08s}.ads.on p{animation-delay:.16s}.ads.on .adb{animation-delay:.24s}
@keyframes adIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* gambar/ilustrasi melayang halus */
.ads.on>img,.ads.on .adv svg{animation:adBob 5s ease-in-out infinite alternate}
@keyframes adBob{from{transform:translateY(3px) rotate(-1deg)}to{transform:translateY(-5px) rotate(1deg)}}
/* tombol: kilau emas */
.adb{position:relative;overflow:hidden;box-shadow:0 10px 18px -8px #0007,inset 0 -2px 0 #0000000f,0 0 0 1px #ffffffb3}
.adb::after{content:"";position:absolute;inset:0 auto 0 -70%;width:50%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,#f5c45a66,transparent);animation:adSheen 4.2s 2s ease-in-out infinite}
/* label kecil bergaya premium */
.adk{background:linear-gradient(180deg,#ffffff40,#ffffff1a);border-color:#f5d98a99}
/* indikator titik dengan progres */
.add button{position:relative;overflow:hidden}
.add button[aria-current="true"]{background:#d9d2c4}
.add button[aria-current="true"]::after{content:"";position:absolute;inset:0;border-radius:99px;background:linear-gradient(90deg,#ffb04a,#f06a00);transform-origin:left;animation:adProg 4.5s linear both}
@keyframes adProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.ads::before,.ads::after,.adt .ads>.adx::after,.adb::after,.ads.on>img,.ads.on .adv svg,.add button[aria-current="true"]::after{animation:none!important}.ads .adk,.ads h2,.ads p,.ads .adb{opacity:1;transform:none}.ads.on .adk,.ads.on h2,.ads.on p,.ads.on .adb{animation:none}.add button[aria-current="true"]{background:linear-gradient(90deg,#ffb04a,#f06a00)}}

/* ===== Iklan driver bentor: animasi berkendara ===== */
.ads.a1>img{position:relative;z-index:1}
.ads.a1 .adrd{position:absolute;left:0;right:0;bottom:0;height:6px;z-index:0;opacity:.55;background:repeating-linear-gradient(90deg,#fff 0 22px,transparent 22px 48px);animation:adRoad .7s linear infinite}
.ads.a1 .adrd::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:#ffffff66}
@keyframes adRoad{to{background-position-x:-48px}}
.ads.a1 .adsp{position:absolute;right:0;top:0;bottom:0;width:48%;z-index:0;pointer-events:none;overflow:hidden}
.ads.a1 .adsp b{position:absolute;left:100%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#ffffffb3);animation:adSpd 1.1s linear infinite}
.ads.a1 .adsp b:nth-child(1){top:34%;width:46px}
.ads.a1 .adsp b:nth-child(2){top:52%;width:70px;animation-delay:-.4s;animation-duration:.9s}
.ads.a1 .adsp b:nth-child(3){top:70%;width:38px;animation-delay:-.7s}
@keyframes adSpd{from{transform:translateX(0)}to{transform:translateX(-260px)}}
.ads.a1.on>img{animation:adDrive 1.1s cubic-bezier(.22,1,.36,1) both,adRide .45s 1.1s ease-in-out infinite alternate}
@keyframes adDrive{from{opacity:0;transform:translateX(70%)}to{opacity:1;transform:none}}
@keyframes adRide{from{transform:translateY(0) rotate(-.5deg)}to{transform:translateY(-2.5px) rotate(.5deg)}}
@media (prefers-reduced-motion:reduce){.ads.a1 .adrd,.ads.a1 .adsp b,.ads.a1.on>img{animation:none!important}}

/* Pemberitahuan di atas menu: terang, tanpa kotak hitam */
.toast{background:#fff;color:#3a2a14;border:1px solid #f5822059;box-shadow:0 10px 26px -12px #1c191540}

/* ===== Menu bawah: tanpa blok isian/hitam saat disentuh ===== */
.nav button{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;outline:0;background:transparent!important}
.nav button:focus{outline:0}
.nav button:focus-visible{outline:2px solid #f5822099;outline-offset:-3px;border-radius:12px}
.nav svg .d{display:none!important}
.nav button[aria-current="true"] svg{stroke:#e07600;fill:none!important}

/* ===== Iklan: efek saat disentuh / diklik ===== */
.ads{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:pan-x pan-y}
.ads .adx,.ads>img,.ads .adv{transition:transform .35s var(--spr,cubic-bezier(.34,1.56,.64,1))}
.ads.prs .adx{transform:scale(.975) translateX(2px)}
.ads.prs .adv{transform:scale(1.06)}
.ads.prs{filter:brightness(1.07) saturate(1.08)}
.ads .rip{position:absolute;z-index:2;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#ffffffcc 0,#ffffff66 45%,#ffffff00 70%);transform:scale(0);opacity:.9;animation:adRip .75s cubic-bezier(.22,1,.36,1) forwards}
@keyframes adRip{to{transform:scale(34);opacity:0}}
.adb{transition:transform .25s var(--spr,ease),box-shadow .25s}
.adb:active{transform:scale(.93)}
@media (hover:hover){.ads:hover .adb{transform:translateY(-2px);box-shadow:0 14px 22px -10px #0008,inset 0 -2px 0 #0000000f,0 0 0 1px #fff}.ads:hover .adv{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.ads .rip{display:none}.ads.prs .adx,.ads.prs .adv{transform:none}}