:root{--white: #ffffff;--black: #242930;--gray: #ADB5BD;--primary: #3578FF;--secondary: #6b7280;--danger: #B95153;--success: #51B97B;--warning: #ED9E15;--info: #517BB9}
@font-face{font-family:MyCustomFont;src:url(/build/assets/MyFonts-Regular-Bk1KM35c.woff2) format("woff2"),url(/build/assets/MyFonts-Regular-DnY37-e0.woff) 
format("woff"),url(/resources/fonts/MyFonts-Regular.otf) format("opentype"),url(/build/assets/MyFonts-Regular-B72C880K.ttf) 
format("truetype");font-weight:400;font-style:normal}
@font-face{font-family:MyCustomFont;src:url(/build/assets/MyFonts-Medium-Dca8pUc8.woff2) format("woff2"),url(/build/assets/MyFonts-Medium-q3oZfhBc.woff) format("woff"),url(/resources/fonts/MyFonts-Medium.otf) format("opentype"),url(/build/assets/MyFonts-Medium-DG5hqINx.ttf) format("truetype");font-weight:500;font-style:normal}
@font-face{font-family:MyCustomFont;src:url(/build/assets/MyFonts-Semibold-kMUBrnkW.woff2) format("woff2"),url(/build/assets/MyFonts-Semibold-Dq5CVuRP.woff) format("woff"),url(/resources/fonts/MyFonts-Semibold.otf) format("opentype"),url(/build/assets/MyFonts-Semibold-DVs02Qgq.ttf) format("truetype");font-weight:600;font-style:normal}@font-face{font-family:MyCustomFont;src:url(/build/assets/MyFonts-Bold-BJlA_3ZK.woff2) format("woff2"),url(/build/assets/MyFonts-Bold-C5PQXvlF.woff) format("woff"),url(/resources/fonts/MyFonts-Bold.otf) format("opentype"),url(/build/assets/MyFonts-Bold-C8rkMRlk.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:MyCustomFont;src:url(/build/assets/MyFonts-Extrabold-D11MYCGx.woff2) format("woff2"),url(/build/assets/MyFonts-Extrabold-B3uVAEyl.woff) format("woff"),url(/resources/fonts/MyFonts-Extrabold.otf) format("opentype"),url(/build/assets/MyFonts-Extrabold-DsgpebJO.ttf) format("truetype");font-weight:800;font-style:normal}:root{--font-primary: "MyCustomFont";--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-extrabold: 800}.font-normal{font-family:var(--font-primary);font-weight:var(--font-normal)}.font-medium{font-family:var(--font-primary);font-weight:var(--font-medium)}.font-semibold{font-family:var(--font-primary);font-weight:var(--font-semibold)}.font-bold{font-family:var(--font-primary);font-weight:var(--font-bold)}.font-extrabold{font-family:var(--font-primary);font-weight:var(--font-extrabold)}.text-white{color:var(--white)}.text-black{color:var(--black)}.text-gray{color:var(--gray)}.text-primary{color:var(--primary)}.text-secondary{color:var(--secondary)}.text-danger{color:var(--danger)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-info{color:var(--info)}.text-8px{font-size:8px}.text-10px{font-size:10px}.text-11px{font-size:11px}.text-12px{font-size:12px}.text-13px{font-size:13px}.text-14px{font-size:14px}.text-15px{font-size:15px}.text-16px{font-size:16px}
.text-18px{font-size:18px}
.text-20px{font-size:20px}.text-24px{font-size:24px}.text-26px{font-size:26px}
.text-30px{font-size:30px}
.text-36px{font-size:36px}.text-48px{font-size:48px}.text-left{text-align:left}
.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.
uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}
.underline{text-decoration:underline}.italic{font-style:italic}.leading-0{line-height:0}
.leading-auto{line-height:auto}.leading-none{line-height:1}.leading-tight{line-height:1.25}
.leading-snug{line-height:1.375}.leading-normal{line-height:1.5}.leading-relaxed{line-height:1.625}
.leading-loose{line-height:2}.line-height-15px{line-height:15px}.line-height-16px{line-height:16px}
.line-height-18px{line-height:18px}.line-height-20px{line-height:20px}.line-height-28{line-height:28px}
.line-height-30{line-height:30.1px}.line-height-35{line-height:35.1px}.tracking-tighter{letter-spacing:-.05em}
.tracking-tight{letter-spacing:-.025em}.tracking-normal{letter-spacing:0}.tracking-wide{letter-spacing:.025em}
.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.letter-spacing-min02px{letter-spacing:-.2px}
.letter-spacing-min03px{letter-spacing:-.3px}.letter-spacing-min04px{letter-spacing:-.4px}
.letter-spacing-min05px{letter-spacing:-.5px}.truncate-1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}
.truncate-2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.truncate-3{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.truncate-4{display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.truncate-none{overflow:visible;white-space:normal}.flex{display:flex}.inline-flex{display:inline-flex}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.flex-1{flex:1 0 0}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.items-baseline{align-items:baseline}.self-auto{align-self:auto}.self-start{align-self:flex-start}.self-center{align-self:center}.self-end{align-self:flex-end}.self-stretch{align-self:stretch}.relative{position:relative}.absolute{position:absolute}.top-2{top:2px}.right-4{right:4px}.translate-x-1{transform:translate(25%,-25%)}.gap-4px{gap:4px}.gap-6px{gap:6px}.gap-8px{gap:8px}.gap-12px{gap:12px}.gap-16px{gap:16px}.gap-35px{gap:35px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-5{gap:20px}.gap-6{gap:24px}.gap-8{gap:32px}.gap-10{gap:40px}.grid{display:grid}.inline-grid{display:inline-grid}.grid-cols-1{grid-template-columns:repeat(1,1fr)}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}.grid-cols-5{grid-template-columns:repeat(5,1fr)}.grid-cols-6{grid-template-columns:repeat(6,1fr)}.grid-cols-8{grid-template-columns:repeat(8,1fr)}.grid-cols-12{grid-template-columns:repeat(12,1fr)}.grid-rows-1{grid-template-rows:repeat(1,1fr)}.grid-rows-2{grid-template-rows:repeat(2,1fr)}.grid-rows-3{grid-template-rows:repeat(3,1fr)}.grid-rows-4{grid-template-rows:repeat(4,1fr)}.grid-rows-6{grid-template-rows:repeat(6,1fr)}.place-items-start{place-items:start}.place-items-center{place-items:center}.place-items-end{place-items:end}.place-items-stretch{place-items:stretch}.place-content-start{place-content:start}.place-content-center{place-content:center}.place-content-end{place-content:end}.place-content-between{place-content:space-between}.place-content-around{place-content:space-around}.place-content-evenly{place-content:space-evenly}.auto-cols-auto{grid-auto-columns:auto}.auto-cols-min{grid-auto-columns:min-content}.auto-cols-max{grid-auto-columns:max-content}.auto-cols-fr{grid-auto-columns:minmax(0,1fr)}.auto-rows-auto{grid-auto-rows:auto}.auto-rows-min{grid-auto-rows:min-content}.auto-rows-max{grid-auto-rows:max-content}.auto-rows-fr{grid-auto-rows:minmax(0,1fr)}.gap-x-1{column-gap:4px}.gap-x-2{column-gap:8px}.gap-x-3{column-gap:12px}.gap-x-4{column-gap:16px}.gap-x-5{column-gap:20px}.gap-y-1{row-gap:4px}.gap-y-2{row-gap:8px}.gap-y-3{row-gap:12px}.gap-y-4{row-gap:16px}.gap-y-5{row-gap:20px}.btn{display:flex;padding:14px 12px;justify-content:center;align-items:center;min-height:46px;max-height:46px;min-width:46px;gap:4px;align-self:stretch;font-family:var(--font-primary);font-size:16px;font-weight:var(--font-semibold);line-height:16px;letter-spacing:-.4px;border-radius:8px;transition:background-color .3s ease,opacity .3s ease;overflow:hidden}.btn svg{flex-shrink:0}.btn .icon{flex-shrink:0}.btn-primary,.btn-primary-2{background-color:var(--black);color:#fff;border:1px solid var(--black);cursor:pointer}.btn-secondary,.btn-secondary-2{background-color:var(--white);color:var(--black);border:1px solid #EAEAEA;cursor:pointer}.btn-disabled{cursor:not-allowed;background-color:#f1f3f5;color:var(--gray);border:1px solid #F1F3F5}.btn-loading-white,.btn-loading-black{cursor:not-allowed!important;pointer-events:none!important;position:relative;display:flex;justify-content:center;align-items:center}.btn-loading-white:after{cursor:not-allowed!important;pointer-events:none!important;content:"";width:16px;height:16px;border:2px solid white;border-top-color:transparent;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);animation:spin .6s linear infinite}.btn-loading-black:after{cursor:not-allowed!important;pointer-events:none!important;content:"";width:16px;height:16px;border:2px solid var(--black);border-top-color:transparent;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);animation:spin .6s linear infinite}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}form{width:100%;gap:16px}.form-group{display:flex;flex-direction:column;gap:4px;width:100%}.label span{color:var(--danger)}.label-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px;align-self:stretch}.label-text label{font-size:16px;font-family:var(--font-primary);font-weight:var(--font-semibold);color:#242930;line-height:normal;letter-spacing:-.5px}.label-text .informasi{color:var(--gray);font-size:14px;font-family:var(--font-primary);font-weight:var(--font-normal);letter-spacing:-.3px;line-height:16px;padding-bottom:4px}.input-wrapper{position:relative;display:flex;align-items:center;width:100%}.input-wrapper input{flex:1;padding-right:40px}.input-wrapper i{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--black);font-size:16px;margin-right:2px}.form-group input[type=password]{padding-right:40px;font-size:16px;letter-spacing:3px}input{display:flex;padding:13px 12px;align-items:center;gap:12px;align-self:stretch;border-radius:8px;border:1px solid var(--Button-Black, #EAEAEA);background-color:#fff;font-family:var(--font-primary);font-size:16px;font-weight:var(--font-semibold);line-height:normal;letter-spacing:-.5px;width:100%;outline:none;transition:border-color .3s ease}select{display:flex;padding:13px 40px 13px 12px;align-items:center;gap:12px;align-self:stretch;border-radius:8px;border:1px solid var(--Button-Black, #EAEAEA);background-color:#fff;font-family:var(--font-primary);font-size:16px;font-weight:var(--font-semibold);line-height:normal;letter-spacing:-.5px;width:100%;outline:none;transition:border-color .3s ease;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;position:relative}.select-wrapper{position:relative;width:100%;border-radius:8px}.select-wrapper:after{content:"▼";font-size:14px;color:#242930;position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none}.select-wrapper.error select{border:1px solid var(--danger)!important;color:var(--danger)!important}.select-wrapper.error:after{color:var(--danger)!important}select:disabled{border-color:#f1f3f5;background-color:#f1f3f5;color:#a6adb4;pointer-events:none}.select-wrapper.readonly select{border-color:#f1f3f5;background-color:#f1f3f5;color:#242930;pointer-events:none}.select-wrapper:has(select:disabled):after{color:#a6adb4}select:focus{border-color:#242930}textarea{display:flex;padding:13px 12px;align-items:center;gap:12px;align-self:stretch;border-radius:8px;border:1px solid var(--Button-Black, #EAEAEA);background-color:#fff;font-family:var(--font-primary);font-size:16px;font-weight:var(--font-semibold);line-height:normal;letter-spacing:-.5px;width:100%;outline:none;transition:border-color .3s ease;resize:none;min-height:100px}textarea:disabled{border-color:#f1f3f5;background-color:#f1f3f5;color:#adb5bd;height:auto}textarea.error{border-color:var(--danger);color:var(--danger)}textarea:read-only{border-color:#f1f3f5;background-color:#f1f3f5;color:#242930;height:auto}textarea:focus{border-color:#242930}input:focus{border-color:#242930}input:disabled{border-color:#f1f3f5;background-color:#f1f3f5;color:#adb5bd}input:read-only{border-color:#f1f3f5;background-color:#f1f3f5;color:#242930}input:-webkit-autofill{background-color:#fff!important;-webkit-text-fill-color:#242930!important;font-family:var(--font-primary)!important;font-size:16px!important;font-weight:var(--font-semibold)!important;letter-spacing:-.5px!important;box-shadow:0 0 0 1000px #fff inset!important;-webkit-box-shadow:0 0 0px 1000px #fff inset!important;transition:background-color .3s ease,border-color .3s ease}input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:#242930!important;font-size:16px!important;font-family:var(--font-primary)!important}input.error{border-color:var(--danger);color:var(--danger)}.info{font-size:12px;color:var(--black);margin-top:4px;font-family:var(--font-primary);font-size:13px;font-style:normal;font-weight:600;line-height:15px;letter-spacing:-.3px}.color-error{color:var(--danger)}.color-info{color:var(--info)}.color-success{color:var(--success)}.color-warning{color:var(--warning)}form button{margin-top:8px}.custom-select{position:relative;width:100%;font-family:var(--font-primary);font-size:16px;font-weight:var(--font-semibold);line-height:normal;letter-spacing:-.5px}.select-trigger{background-color:#fff;padding:10px;border:1px solid #EAEAEA;border-radius:8px;cursor:pointer}.select-options{position:absolute;width:100%;background-color:#fff;border:1px solid var(--black);border-radius:5px;list-style:none;padding:0;margin:0;display:none;z-index:10}.select-options li{padding:10px;cursor:pointer;transition:background .3s}.select-options li:hover{background-color:#f0f0f0}.hidden{display:none}.decrementIncrement{width:120px;display:flex;align-items:center;border-radius:8px;border:1px solid var(--Button-Black, #EAEAEA);overflow:hidden}.decrementIncrement button{margin:0;width:80px;height:44px;color:#fff;border:none;background-color:var(--black);cursor:pointer;font-size:16px;font-weight:medium;display:flex;align-items:center;justify-content:center;transition:background-color .3s}.decrementIncrement button:disabled{border-color:#f1f3f5;background-color:#f1f3f5;color:#adb5bd;pointer-events:none}.decrementIncrement button:hover{background-color:#7e7e7e}.decrementIncrement input{width:100%;text-align:center;height:44px;border:none;outline:none;padding:4px;border-radius:0}.decrementIncrement input:disabled{background-color:#f1f3f5;color:#adb5bd}.otp-container{display:flex;justify-content:space-between;align-items:center;margin-top:20px;margin-bottom:20px;width:100%}.otp-container input{width:50px;height:50px;text-align:center;font-size:1.5rem;outline:none;border-radius:8px;border:1px solid var(--Button-Black, #EAEAEA);transition:all .2s ease-in-out}.otp-container input:focus{border-color:#242930}input::placeholder{color:#cdcdcd;font-family:var(--font-primary);font-size:16px;font-weight:var(--font-medium);line-height:normal;letter-spacing:-.5px}textarea::placeholder{color:#cdcdcd;font-family:var(--font-primary);font-size:16px;font-weight:var(--font-medium);line-height:normal;letter-spacing:-.5px}input[type=radio]{display:none}.labelRadio{display:flex;align-items:center;justify-content:space-between;padding:13px 12px;border:1px solid #EAEDF4;border-radius:8px;cursor:pointer;background-color:#fff;width:100%;color:#242930;font-family:var(--font-primary);font-size:16px;font-weight:var(--font-semibold);line-height:normal;letter-spacing:-.5px;transition:border-color .3s ease;transition:color .3s ease}.radioStroke{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid #EAEDF4;border-radius:50%;transition:.3s}.radioPoin{width:12px;height:12px;border-radius:50%;background-color:transparent;transition:.3s}input[type=radio]:checked+.labelRadio{border:1px solid #3578FF;color:#3578ff}input[type=radio]:checked+.labelRadio .radioStroke{border-color:#3578ff}input[type=radio]:checked+.labelRadio .radioPoin{background-color:#3578ff}.star-icon-rating{color:#e1e1e1;transition:color .3s ease;cursor:pointer}.star-icon-rating:hover,.star-icon-rating-active{color:#ffb400}.star-icon-ratings{color:#e1e1e1;transition:color .3s ease;cursor:pointer}.star-icon-ratings-active{color:#ffb400}.img{max-width:100%;height:auto;display:block}.img-cover{object-fit:cover;width:100%;height:100%}.img-contain{object-fit:contain;width:100%;height:100%}.img-fill{object-fit:fill;width:100%;height:100%}.img-scale-down{object-fit:scale-down;width:100%;height:100%}.img-none{object-fit:none;width:100%;height:100%}.img-top{object-position:top}.img-bottom{object-position:bottom}.img-left{object-position:left}.img-right{object-position:right}.img-center{object-position:center}.img-container{position:relative;display:flex;overflow:hidden;justify-content:center;align-items:center}.img-rounded{border-radius:8px}.img-circle{border-radius:50%}.img-border{border:1px solid var(--Button-StrokeNonActive, #EAEAEA)}.img-border-active{border:2px solid var(--success)}.img-background{background:#f1f3f5}.img-container-full{width:100%;height:400px;overflow:hidden;display:flex;justify-content:center;align-items:center}.img-container-shadow{width:250px;height:250px;overflow:hidden;border-radius:12px;box-shadow:0 4px 6px #0000001a;border:2px solid #ddd}.remove-image{position:absolute;top:3px;right:3px;display:flex;justify-content:center;align-items:center;width:16px;height:16px;padding:0;border-radius:52px;border:1px solid var(--Button-StrokeNonActive, #EAEAEA);background:#fff;cursor:pointer;z-index:99}.remove-image i{font-size:8px;color:var(--gray)}
.menu-items{width:100%}.menu-item{display:flex;width:100%;min-height:46px;padding:12px 20px;align-items:center;gap:8px;background-color:#fff;transition:background-color .3s ease}.menu-item svg{flex-shrink:0}.menu-item:hover{background-color:#f8f8f8}.nama-menu{display:flex;padding-top:1px;align-items:center;flex:1 0 0;width:100%;color:var(--black);text-align:center;font-family:var(--font-primary);font-size:16px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:-.5px}.count{display:flex;min-width:21px;padding:1px 4px 0;justify-content:center;align-items:center;color:#fff;border-radius:100px;background:var(--primary);text-align:center;font-family:var(--font-primary);font-size:16px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:-.5px}.menu-info{display:flex;width:100%;padding:20px;flex-direction:column;align-items:flex-start}.list-info{display:flex;padding:12px;flex-direction:column;align-items:flex-start;gap:12px;align-self:stretch;border-radius:16px;border:1px solid var(--Warna-Stroke-Body, #EAEDF4);background:#fff}.info-title{align-self:stretch;color:var(--Button-Black, #242930);font-family:var(--font-primary);font-size:14px;font-style:normal;font-weight:600;line-height:15px;letter-spacing:-.3px}.info-content{align-self:stretch;color:var(--gray, #ADB5BD);font-family:var(--font-primary);font-size:12px;font-style:normal;font-weight:500;line-height:normal;letter-spacing:-.3px}#menu-more-lists{border-radius:8px;border:1px solid #EAEDF4;background-color:#f6f6f6;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;position:absolute;right:0;margin-top:48px;margin-right:28px;gap:1.3px}.menu-more-list{background-color:#fff;display:flex;padding:4px 12px;align-items:center;gap:12px;width:100%;color:var(--black);font-size:15px;font-style:normal;font-weight:400;letter-spacing:-.5px}.menu-more-list:hover{background-color:#f8f8f8}.beranda-list-produk{padding:20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px}.beranda-produk-nama-toko{display:flex;align-items:center;gap:4px;align-self:stretch}.beranda-produk-nama-toko .data-null{background-color:#00f!important}.list-notifikasi-item{display:flex;flex-direction:column;margin-left:20px;margin-right:20px;padding:20px;align-items:flex-start;gap:8px;border-radius:16px;border:1px solid #EAEDF4;background-color:#fff;box-shadow:0 2px 8px #0000}@media (max-width: 400px){.beranda-list-produk{grid-template-columns:repeat(2,1fr)}}.alert-box{display:flex;width:100%;padding:8px;align-items:flex-start;gap:8px;align-self:stretch;border-radius:8px;border:1px solid var(--gray);background-color:#fff;color:var(--black)}.alert-box .icon-alert{width:14px;height:14px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}.alert-box .icon-alert svg{width:100%;height:100%;stroke:currentColor}.alert-box .text{flex:1 0 0;font-family:var(--font-primary);font-size:12px;font-style:normal;font-weight:400;line-height:normal;letter-spacing:-.3px}.alert-box.danger{border-color:var(--danger);background-color:#fceaea;color:var(--danger)}.alert-box.success{border-color:var(--success);background-color:#f3fff7;color:var(--success)}.alert-box.warning{border-color:var(--warning);background-color:#fff9ee;color:var(--warning)}.alert-box.info{border-color:var(--info);background-color:#f2f7ff;color:var(--info)}.list-riwayat-saldo-1{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;border-radius:16px;border:1px solid #EAEDF4;background:#fff;box-shadow:0 2px 8px #0000}.list-riwayat-saldo-1 .informasi{display:flex;padding:20px;align-items:center;gap:16px;align-self:stretch;width:100%;overflow:hidden}.list-riwayat-saldo-1 .informasi p{font-style:normal;line-height:15px;letter-spacing:-.3px}.list-riwayat-saldo-1 .informasi .icon-tarik-saldo{display:flex;padding:6px;justify-content:center;align-items:center;gap:3.556px;align-self:stretch;aspect-ratio:1/1;border-radius:100%;background:#fff5f3}.list-riwayat-saldo-1 .informasi .icon-terima-saldo{display:flex;padding:6px;justify-content:center;align-items:center;gap:3.556px;align-self:stretch;aspect-ratio:1/1;border-radius:100%;background:#f5fff3}.list-riwayat-saldo-1 .informasi .informasi-tanggal{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:1 0 0}.list-riwayat-saldo-1 .informasi .informasi-saldo{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px}.list-riwayat-saldo-1 .informasi .informasi-tanggal p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;align-self:stretch;line-clamp:1;overflow:hidden;text-overflow:ellipsis}.list-riwayat-saldo-1 .button{display:flex;padding:0 20px 20px;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;width:100%;align-self:stretch}.slider-container{width:100%;overflow:hidden;margin-bottom:20px}.slider{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}.slider::-webkit-scrollbar{display:none}.slider-item{flex:0 0 auto;padding:4px 12px;border-radius:100px;cursor:pointer;background-color:var(--white);color:var(--black);border:1px solid #EAEAEA;font-family:var(--font-primary);letter-spacing:-.4px;font-size:16px;font-weight:var(--font-regular);white-space:nowrap}.slider-item .count-slide{background-color:var(--primary);align-items:center;padding-left:8px;padding-right:8px;border-radius:40px;color:#fff}.slider-item.active{background-color:#f4f8ff;color:var(--info);border:1px solid var(--info)}#geser{display:flex;overflow-x:auto;white-space:nowrap;gap:8px;padding:0 20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}#geser::-webkit-scrollbar{display:none}.geser-item{display:flex;align-items:center;gap:8px;padding:12px 20px;border-radius:35px;border:1px solid #EAEDF4;background:#fff;text-decoration:none;color:var(--black);flex-shrink:0;white-space:nowrap}.geser-item.active{border:1px solid var(--primary);color:var(--primary)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}*{-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;font-family:var(--font-primary),"sans-serif";line-height:1.5;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#000}img,video,canvas,audio,iframe,embed,object{display:block;max-width:100%}svg{flex-shrink:0}ul,ol{list-style:none}a{text-decoration:none;color:inherit}table{border-collapse:collapse;width:100%}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:""}.container{position:relative;margin:0 auto;width:100%;max-width:400px;min-height:100vh;box-shadow:0 2px 10px #0000001a;box-sizing:border-box;overflow-y:auto;overflow:hidden;display:flex;flex-direction:column;background-color:#fff;clip-path:inset(0 0 0 0)}

.nav-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 12px 20px;
    border-bottom: 1px solid #F0F0F0;
    background: linear-gradient(135deg, #FFD700, #FF8C00); /* Gradasi kuning ke oranye */
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 1000;
    box-sizing: border-box;
    color: white; /* Agar teks kontras dengan latar belakang */
    font-weight: bold; /* Memberikan kesan tegas pada teks */
    border-radius: 8px; /* Menambah sedikit kelengkungan pada sudut */
}

/* Perbaikan pada media query untuk tampilan perangkat kecil */
@media (max-width: 768px) {
    .nav-top {
        padding: 10px 16px;
    }
}

.nav-bottom {
    position: fixed;
    bottom: 0;
    left: 0; /* Menempatkan menu di bagian bawah layar */
    width: 100%; /* Pastikan menu bawah mengambil seluruh lebar layar */
    padding: 12px 20px;
    border-top: 1px solid #f0f0f0;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    gap: 8px;
    box-sizing: border-box;
}
/* === FIX: Popup Tambah Keranjang === */
.tambah-keranjang{
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);   /* awal: tersembunyi di bawah */
  transition: transform .3s ease-in-out;
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 10000;                     /* di atas nav-bottom */
  border-radius: 16px 16px 0 0;
  max-height: 80vh;
  overflow: hidden;
}

/* Saat dibuka via JS: .classList.add('show') */
.tambah-keranjang.show{
  transform: translate(-50%, 0);      /* slide-up muncul */
}

/* (Opsional, jika masih dipakai kelas-kelas ini di dalam) */
.tambah-keranjang .head-pop-up{
  position: sticky; top: 0; height: 55px;
  display: flex; align-items: center; gap: 12px;
  z-index: 10; padding: 20px; overflow: hidden;
  background-color: var(--black);
}

.tambah-keranjang .content-pop-up{
  flex: 1; overflow-y: auto;
  max-height: calc(80vh - 55px);
  padding: 20px 20px 40px;
}
.navigasi-menu{border-right:1px solid #F0F0F0;background:#fff;position:fixed;left:0;width:100%;max-width:300px;height:100vh;
	z-index:999;transform:translate(-101%);transition:transform .3s ease-in-out}
.menu-scroll{max-height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#888 #f1f1f1;padding-bottom:80px}
.navigasi-menu.active{transform:translate(0)}.content{width:100%;min-height:100vh}.content-pt{padding-top:52px}
.content-pb{padding-bottom:71px}.nav-top 
.menu{width:28px;height:28px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;position:relative;background-color:none}
.bar{width:28px;height:2px;background-color:#242930;transition:all .3s ease;position:absolute}
.bar:nth-child(1){top:6px}.bar:nth-child(2){top:14px}.bar:nth-child(3){top:22px}
.menu.active .bar:nth-child(1){transform:translateY(8px) rotate(45deg)}.menu.active .bar:nth-child(2){opacity:0}
.menu.active .bar:nth-child(3){transform:translateY(-8px) rotate(-45deg)}#deskripsi-toko{visibility:hidden}
.head-page{z-index:999}.container-wrap{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
.buttonOnOff{display:flex;justify-content:flex-start;width:42px;height:24px;padding:4px;align-items:center;border-radius:24px;border:1px solid #EAEAEA;background:#fff;cursor:pointer;transition:background .3s ease-in-out}
.indikator{width:16px;height:16px;flex-shrink:0;background-color:#eaeaea;border-radius:50%;transition:transform .2s ease-in-out,background-color .2s ease-in-out}
.buttonOnOff.active{background:var(--primary)}.buttonOnOff.active .indikator{transform:translate(18px);background-color:#fff}.list-keranjang{display:flex;width:100%;padding:20px;flex-direction:column;align-items:flex-start;gap:16px;border-radius:16px;border:1px solid #EAEDF4;background:#fff;box-shadow:0 2px 8px #0000}.divider{height:1px;align-self:stretch;background-color:#eaedf4;border:none}.divider-dash{height:1px;align-self:stretch;border:none;border-top:1px dashed #EAEDF4}.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:99990}.modal-container{display:none;width:inherit;position:fixed;max-width:400px;padding:20px;z-index:999999;left:50%;top:50%;transform:translate(-50%,-50%)}@media (max-width: 830px){.container,.nav-top,.nav-bottom,.navigasi-menu,.tambah-keranjang,.modal-container,.pop-up{max-width:100%}}

/* Ensure the viewport scales properly */
html, body {
    width: 100%;
    height: 100%;
    font-family: var(--font-primary), "sans-serif";
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #000;
    padding: 0;
    margin: 0;
}

/* Media Queries for responsive design */
@media (max-width: 100%) {
    .container {
        max-width: 100%;
        padding: 10px;
    }

    .grid-cols-1 {
        grid-template-columns: 1fr;
    }

    .nav-top, .nav-bottom {
        padding: 10px;
    }

    .flex-row {
        flex-direction: column;
    }

    .menu-item {
        padding: 10px;
        font-size: 14px;
    }

    .img-container-full {
        width: 100%;
        height: auto;
    }

    .buttonOnOff {
        width: 40px;
        height: 20px;
    }

    .buttonOnOff .indikator {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 100%) {
    .container {
        max-width: 100%;
        padding: 8px;
    }

    .nav-top, .nav-bottom {
        padding: 8px;
    }

    .grid-cols-2 {
        grid-template-columns: 1fr;
    }

    .menu-item {
        padding: 8px;
        font-size: 12px;
    }

    .img-container-full {
        width: 100%;
        height: 250px;
    }

    .img-cover {
        width: 100%;
        height: 100%;
    }

    .buttonOnOff {
        width: 100%;
        max-width: 120px;
    }

    .buttonOnOff .indikator {
        width: 14px;
        height: 14px;
    }
}

/* Ensure images are responsive */
.img {
    max-width: 100%;
    height: auto;
    display: block;
}

.img-cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.grid {
    display: grid;
    gap: 16px;
}

.grid-cols-1 {
    grid-template-columns: 1fr;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

/* Max-width for buttons and other elements */
.nav-top, .nav-bottom {
    width: 100%;
    padding: 10px;
}

.buttonOnOff {
    width: 100%;
    max-width: 150px;
}