:root{
    --bg:#fff8f7;
    --pink:#ff5d87;
    --pink2:#ff9bb4;
    --soft:#ffe7ec;
    --cream:#fffaf4;
    --purple:#9b6bb0;
    --text:#4d2940;
    --muted:#7c5d6d;
    --line:#ffc6d3;
    --shadow:0 14px 36px rgba(118,67,89,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--text);
    background:
      radial-gradient(circle at 20% 10%,rgba(255,205,218,.35),transparent 30%),
      linear-gradient(180deg,#fffdfb,#fff7f7);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 32px));margin:auto}

.topbar{
    position:sticky;top:0;z-index:40;
    backdrop-filter:blur(16px);
    background:rgba(255,252,249,.88);
    border-bottom:1px solid rgba(255,175,194,.45);
}
.nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}
.brand img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid white;box-shadow:var(--shadow)}
nav{display:flex;align-items:center;gap:24px;font-weight:700;font-size:14px}
nav a:hover{color:var(--pink)}
.menu-btn{display:none;border:0;background:var(--soft);border-radius:12px;padding:9px 12px;font-size:22px}

.hero{padding:60px 0 35px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:45px}
.hero-copy{text-align:center}
.ribbon,.mini-ribbon{
    display:inline-block;background:linear-gradient(180deg,#ff94ad,#ff6488);
    color:white;padding:12px 30px;border-radius:18px;
    font-weight:900;letter-spacing:.7px;box-shadow:0 8px 0 #f5b6c5;
}
.hero h1{font-size:clamp(44px,6vw,86px);line-height:.92;margin:28px 0 22px;color:#ff557f;text-shadow:0 4px 0 white,0 7px 0 #ffd4de}
.hero h1 span{color:var(--purple)}
.trust-badge{
    display:inline-block;padding:11px 26px;border-radius:999px;
    background:#fff0b8;border:1px solid #ffd16c;font-weight:900;color:#8c4b52;
}
.hero p{font-size:19px;line-height:1.8;max-width:650px;margin:24px auto}
.hero-art{position:relative}
.hero-art img{border-radius:34px;box-shadow:var(--shadow);border:8px solid rgba(255,255,255,.8)}
.primary-btn,.buy-btn{
    display:inline-flex;align-items:center;justify-content:center;
    border:0;cursor:pointer;color:#fff;font-weight:900;
    background:linear-gradient(180deg,#ff6f96,#ff4777);
    border-radius:14px;padding:14px 24px;
    box-shadow:0 8px 20px rgba(255,71,119,.22);
}
.primary-btn:hover,.buy-btn:hover{transform:translateY(-2px)}

.section{padding:26px 0}
.panel{
    background:rgba(255,255,255,.68);
    border:2px solid var(--line);
    border-radius:28px;
    padding:30px;
    box-shadow:var(--shadow)
}
.section-title{display:flex;gap:14px;align-items:center;margin-bottom:22px}
.section-title .icon{font-size:42px}
.section-title h2{margin:0;font-size:31px;color:var(--purple)}
.section-title h2 span{color:var(--pink)}
.section-title p{margin:3px 0 0;color:var(--muted)}

.package-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.package-card{
    position:relative;text-align:center;padding:26px 18px 20px;
    border:1.5px solid var(--line);border-radius:22px;
    background:linear-gradient(180deg,#fffdfd,#fff8f8);
    min-height:330px;
}
.package-card.featured{border-color:#ffba73;box-shadow:0 0 0 5px rgba(255,216,155,.22)}
.best{
    position:absolute;right:10px;top:-14px;background:#ffd875;
    padding:7px 13px;border-radius:999px;font-size:11px;font-weight:900;transform:rotate(-5deg)
}
.package-icon{font-size:52px}
.package-card h3{font-size:22px;margin:10px 0}
.price{font-size:31px;font-weight:900;color:#5b2947;margin:12px 0}
.old-price{text-decoration:line-through;color:#9f858f;margin-top:10px}
.package-card p{color:var(--muted);min-height:50px}
.buy-btn{width:100%;margin-top:8px}

.benefits{display:grid;grid-template-columns:repeat(4,1fr);margin-top:25px;padding-top:22px;border-top:1px dashed var(--line)}
.benefits>div{display:grid;grid-template-columns:48px 1fr;align-items:center;padding:8px 16px;border-right:1px dashed var(--line)}
.benefits>div:last-child{border-right:0}
.benefits span{grid-row:1/3;font-size:34px}
.benefits b{color:var(--pink)}
.benefits small{color:var(--muted)}

.steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;gap:12px}
.step{
    border:1px solid var(--line);border-radius:18px;padding:22px 16px;text-align:center;background:white
}
.step span{
    display:flex;width:34px;height:34px;margin:-10px 0 10px;
    align-items:center;justify-content:center;border-radius:50%;background:var(--pink);color:white;font-weight:900
}
.step b{display:block;margin:10px 0}
.step p{color:var(--muted);font-size:14px;line-height:1.5}
.arrow{align-self:center;font-size:25px;color:var(--pink)}

.three-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.info-card{background:white;border:1px solid var(--line);border-radius:22px;padding:22px}
.info-card>div{font-size:35px}
.info-card h3{color:var(--pink)}
.info-card p{color:var(--muted);line-height:1.6}

.faq details{
    border-bottom:1px dashed var(--line);padding:16px 2px
}
.faq summary{font-weight:800;cursor:pointer}
.faq p{color:var(--muted);line-height:1.6}

.alert{padding:16px;border-radius:14px;background:#fff1d3;border:1px solid #ffd689}
.alert.error{background:#ffe8ec;border-color:#ffb4c6}

footer{margin-top:35px;background:linear-gradient(180deg,#ffdce5,#ffcbd9);padding-top:30px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.footer-grid>div{display:flex;flex-direction:column;gap:8px}
.footer-grid a,.footer-grid p{font-size:14px;color:#714759;margin:0}
.footer-brand{display:grid!important;grid-template-columns:70px 1fr;align-items:center}
.footer-brand img{width:70px;height:70px;border-radius:50%;object-fit:cover}
.copyright{text-align:center;padding:22px;margin-top:20px;border-top:1px solid rgba(255,255,255,.65);font-size:13px}

.checkout-page{min-height:100vh;padding:40px 0}
.checkout-wrap{max-width:950px}
.back-link{display:inline-block;margin-bottom:20px;font-weight:800;color:var(--pink)}
.checkout-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:20px}
.checkout-card{
    background:white;border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--shadow)
}
.checkout-card h1{margin:18px 0 8px}
.muted{color:var(--muted)}
.checkout-card form{display:grid;gap:15px;margin-top:25px}
.checkout-card label{display:grid;gap:7px;font-weight:700}
.checkout-card input{
    width:100%;border:1.5px solid #f5c6d3;border-radius:13px;padding:13px 14px;font:inherit;outline:none
}
.checkout-card input:focus{border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,93,135,.12)}
.full{width:100%;margin-top:5px}
.summary-card{text-align:center}
.summary-card img{width:220px;margin:auto;border-radius:22px}
.summary-note{margin-top:20px;background:#fff3d6;border-radius:14px;padding:14px;font-size:14px;line-height:1.5}

@media(max-width:900px){
    nav{
        position:absolute;left:16px;right:16px;top:74px;
        background:white;border:1px solid var(--line);
        border-radius:18px;padding:18px;box-shadow:var(--shadow);
        display:none;flex-direction:column;align-items:stretch
    }
    nav.open{display:flex}
    .menu-btn{display:block}
    .hero-grid{grid-template-columns:1fr}
    .hero-art{max-width:600px;margin:auto}
    .package-grid{grid-template-columns:repeat(2,1fr)}
    .benefits{grid-template-columns:repeat(2,1fr)}
    .benefits>div{border-right:0}
    .steps{grid-template-columns:1fr 1fr}
    .arrow{display:none}
    .three-cards{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:580px){
    .container{width:min(100% - 22px,1180px)}
    .hero{padding-top:35px}
    .hero h1{font-size:43px}
    .hero p{font-size:16px}
    .panel{padding:20px 14px}
    .package-grid{grid-template-columns:1fr}
    .benefits{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr}
    .checkout-grid{grid-template-columns:1fr}
}

.helper{font-size:12px;color:var(--muted);margin-top:-7px}
.success-wrap,.check-wrap{max-width:760px}
.success-card{text-align:center}
.success-emoji{font-size:62px;margin-bottom:12px}
.order-code-box{
    margin:26px auto;padding:20px;border:2px dashed var(--pink2);border-radius:20px;
    background:#fff7f9;display:grid;gap:9px;max-width:520px
}
.order-code-box small{font-weight:900;color:var(--muted)}
.order-code-box strong{font-size:clamp(24px,5vw,38px);letter-spacing:1px;color:var(--pink)}
.copy-btn,.secondary-btn{
    border:1px solid var(--line);background:white;border-radius:12px;padding:10px 16px;
    color:var(--text);font-weight:900;cursor:pointer
}
.order-detail{
    display:grid;grid-template-columns:1fr 1fr;text-align:left;
    border:1px solid var(--line);border-radius:18px;overflow:hidden;margin:20px 0
}
.order-detail>div{padding:14px 16px;border-bottom:1px solid #ffe2e9;display:flex;flex-direction:column;gap:4px}
.order-detail span{font-size:12px;color:var(--muted);font-weight:700}
.status{display:inline-flex;width:max-content;padding:5px 9px;border-radius:999px;font-size:12px}
.status.pending{background:#fff0c9;color:#8b5b00}
.success-actions{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.check-form{display:grid;grid-template-columns:1fr auto;gap:10px;margin:24px 0}
.check-form input{
    border:1.5px solid #f5c6d3;border-radius:13px;padding:13px 14px;font:inherit;outline:none
}
.order-detail.result{margin-top:20px}
@media(max-width:580px){
    .order-detail{grid-template-columns:1fr}
    .check-form{grid-template-columns:1fr}
}

/* V3 ADMIN + PAYMENT */
.admin-page{margin:0;background:#fff8f9}
.admin-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.admin-sidebar{
    background:linear-gradient(180deg,#5b2947,#3f1c33);padding:24px 16px;color:white;
    display:flex;flex-direction:column;gap:8px
}
.admin-brand{font-weight:900;font-size:20px;margin-bottom:20px}
.admin-sidebar a{padding:12px 14px;border-radius:12px;color:#fff;opacity:.85}
.admin-sidebar a:hover,.admin-sidebar a.active{background:rgba(255,255,255,.13);opacity:1}
.admin-main{padding:30px;min-width:0}
.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.admin-top h1{margin:0}.admin-top p{margin:5px 0;color:var(--muted)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stat-card{background:white;border:1px solid var(--line);border-radius:20px;padding:20px;display:grid;gap:5px;box-shadow:var(--shadow)}
.stat-card span{font-size:28px}.stat-card b{font-size:30px;color:var(--pink)}.stat-card small{color:var(--muted)}
.admin-panel{background:white;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow)}
.admin-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.table-wrap{overflow:auto}
.admin-table{width:100%;border-collapse:collapse;min-width:760px}
.admin-table th,.admin-table td{padding:12px 10px;border-bottom:1px solid #ffe3ea;text-align:left;font-size:14px}
.admin-table th{color:var(--muted);font-size:12px;text-transform:uppercase}
.status.paid{background:#dff7e7;color:#18723b}
.status.failed,.status.refunded,.status.expired{background:#ffe3e3;color:#9f2828}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.filter-row a{padding:8px 12px;border-radius:999px;background:white;border:1px solid var(--line);font-size:12px;font-weight:800}
.filter-row a.active{background:var(--pink);color:white}
.admin-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.proof-image{width:100%;max-height:520px;object-fit:contain;border-radius:16px;border:1px solid var(--line);background:#fafafa}
.admin-actions{display:flex;gap:10px;margin-top:16px}
.approve-btn,.reject-btn{border:0;border-radius:12px;padding:12px 18px;font-weight:900;cursor:pointer}
.approve-btn{background:#dff7e7;color:#18723b}.reject-btn{background:#ffe3e3;color:#9f2828}
.qris-placeholder{margin:20px 0;padding:28px;text-align:center;border:2px dashed var(--line);border-radius:20px;background:#fff8fa}
.qris-icon{font-size:64px;color:var(--pink)}
input[type="file"]{width:100%;border:1.5px solid #f5c6d3;border-radius:13px;padding:13px;background:white}
@media(max-width:900px){
    .admin-shell{grid-template-columns:1fr}
    .admin-sidebar{position:relative;flex-direction:row;overflow:auto}
    .admin-brand{display:none}
    .admin-main{padding:18px}
    .stat-grid{grid-template-columns:repeat(2,1fr)}
    .admin-two{grid-template-columns:1fr}
}
@media(max-width:580px){
    .stat-grid{grid-template-columns:1fr}
}

/* ===============================
   V4 CLEAN ADMIN
   =============================== */
.clean-admin{
    --admin-bg:#fff8fb;
    --admin-card:#ffffff;
    --admin-sidebar:#3f2135;
    --admin-sidebar2:#552b45;
    --admin-line:#f6ced9;
}
.clean-admin .admin-sidebar{
    background:
      radial-gradient(circle at 30% 10%,rgba(255,117,157,.18),transparent 30%),
      linear-gradient(180deg,var(--admin-sidebar2),var(--admin-sidebar));
    padding:24px 16px;
    min-height:100vh;
    position:sticky;
    top:0;
    align-self:start;
}
.clean-admin .admin-brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:4px 8px 24px;
    margin:0;
}
.clean-admin .brand-orb{
    width:44px;height:44px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(180deg,#ff83a4,#ff4e7c);
    box-shadow:0 8px 18px rgba(255,78,124,.25);
}
.clean-admin .admin-brand b{display:block;font-size:15px;letter-spacing:.6px}
.clean-admin .admin-brand small{display:block;font-size:10px;opacity:.6;margin-top:2px}
.clean-admin .admin-nav{display:grid;gap:7px}
.clean-admin .admin-nav a{
    display:flex;gap:11px;align-items:center;
    padding:12px 14px;border-radius:13px;
    color:white;opacity:.76;font-weight:700;font-size:14px;
}
.clean-admin .admin-nav a:hover,.clean-admin .admin-nav a.active{
    opacity:1;background:rgba(255,255,255,.12);
}
.clean-admin .sidebar-bottom{
    margin-top:auto;
    padding-top:28px;
    display:grid;
    gap:8px;
}
.owner-chip{
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);
    border-radius:12px;
    padding:10px 12px;
    color:#fff;
    font-size:12px;
}
.logout-link{
    padding:10px 12px!important;
    font-size:12px!important;
    color:#ffc4d4!important;
}
.clean-admin .admin-main{
    background:
      radial-gradient(circle at 85% 0%,rgba(255,215,227,.45),transparent 28%),
      var(--admin-bg);
    padding:32px;
}
.admin-header{
    display:flex;justify-content:space-between;gap:24px;align-items:center;
    margin-bottom:24px;
}
.admin-header h1{margin:4px 0 6px;font-size:30px}
.admin-header p{margin:0;color:var(--muted)}
.eyebrow{
    font-size:10px;font-weight:900;letter-spacing:1.8px;color:var(--pink);
}
.v4-stats{
    grid-template-columns:repeat(5,1fr);
}
.v4-stats .stat-card{
    display:flex;align-items:center;gap:14px;
    padding:18px;
    min-height:104px;
}
.stat-icon{
    width:44px;height:44px;border-radius:15px;
    display:flex;align-items:center;justify-content:center;
    background:#fff0f5;border:1px solid #ffd5e0;font-size:22px;
}
.v4-stats .stat-card b{display:block;font-size:26px;margin-top:4px}
.admin-panel-v4{padding:22px}
.admin-panel-v4 h2{margin:3px 0 0}
.v4-table td:first-child b{display:block}
.v4-table td:first-child small{
    display:block;color:var(--muted);font-size:10px;margin-top:3px
}
.table-action{
    display:inline-flex;padding:7px 10px;border-radius:9px;
    background:#fff0f5;color:var(--pink);font-weight:800;font-size:12px;
}
.empty-state{
    text-align:center;padding:40px;color:var(--muted)
}
.voucher-admin-card{grid-column:1/-1}
.voucher-box{
    border:2px dashed #ff9bb4;
    background:linear-gradient(180deg,#fff8fb,#fff0f5);
    border-radius:18px;
    padding:20px;
    display:grid;
    gap:9px;
    text-align:center;
}
.voucher-box small{font-weight:900;color:var(--muted);letter-spacing:.8px}
.voucher-box strong{
    font-size:clamp(22px,4vw,36px);
    color:var(--pink);
    letter-spacing:1px;
    word-break:break-word;
}
.status.generated{background:#eee4ff;color:#663a9c}
.user-voucher-box{margin:20px 0}
.admin-two{align-items:start}
@media(max-width:1200px){
    .v4-stats{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
    .clean-admin .admin-sidebar{
        min-height:auto;position:relative;
    }
    .clean-admin .admin-brand{display:flex}
    .clean-admin .admin-nav{display:flex;overflow:auto}
    .clean-admin .admin-nav a{white-space:nowrap}
    .clean-admin .sidebar-bottom{display:none}
    .admin-header{align-items:flex-start;flex-direction:column}
    .v4-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:580px){
    .clean-admin .admin-main{padding:16px}
    .v4-stats{grid-template-columns:1fr}
    .admin-header h1{font-size:24px}
}

/* V4.2 ORDER HISTORY */
.history-wrap{max-width:980px}
.history-head{
    display:flex;align-items:flex-start;justify-content:space-between;
    gap:18px;margin-bottom:22px
}
.history-head h1{margin:18px 0 5px}
.history-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.history-list{display:grid;gap:16px}
.history-card{
    background:white;border:1.5px solid var(--line);
    border-radius:22px;padding:20px;box-shadow:var(--shadow)
}
.history-card-top{
    display:flex;align-items:center;justify-content:space-between;
    gap:14px;padding-bottom:15px;border-bottom:1px dashed var(--line)
}
.history-card-top small,.history-voucher small{font-size:10px;color:var(--muted);font-weight:900;letter-spacing:1px}
.history-card-top h3{margin:4px 0 0;font-size:20px;color:var(--pink)}
.mini-copy,.history-voucher button{
    border:1px solid var(--line);background:#fff;border-radius:10px;
    padding:8px 12px;font-weight:900;color:var(--pink);cursor:pointer
}
.history-grid{
    display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
    padding:16px 0
}
.history-grid>div{
    background:#fff9fb;border:1px solid #ffe0e8;
    border-radius:12px;padding:11px
}
.history-grid span{display:block;font-size:10px;color:var(--muted);margin-bottom:4px}
.history-grid b{font-size:13px}
.history-voucher{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    background:linear-gradient(180deg,#fff3f7,#ffeaf0);
    border:2px dashed #ff9bb4;border-radius:14px;padding:14px
}
.history-voucher strong{font-size:21px;color:var(--pink);letter-spacing:.8px}
.history-voucher.waiting{border-color:#f1d7a4;background:#fff8e8;color:#755d28}
.history-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.history-empty{
    text-align:center;background:white;border:1.5px solid var(--line);
    border-radius:24px;padding:45px 20px;box-shadow:var(--shadow)
}
.history-empty-icon{font-size:58px}
.history-loading{text-align:center;padding:35px;color:var(--muted)}
.check-top-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.status.processing{background:#e8e4ff;color:#54399d}
.status.delivered{background:#dff7e7;color:#18723b}
@media(max-width:850px){
    .history-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:580px){
    .history-head{flex-direction:column}
    .history-grid{grid-template-columns:1fr}
    .history-card{padding:15px}
    .history-voucher{align-items:flex-start;flex-direction:column}
}


/* V4.4 PAYMENT UPGRADE */
.payment-v44-wrap{max-width:1080px}
.payment-v44-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.payment-v44-card{padding:30px}
.payment-v44-title{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:18px 0}
.payment-v44-title h1{margin:0 0 6px}
.countdown-box{
    min-width:150px;background:#fff4d6;border:1px solid #ffd478;border-radius:16px;
    padding:12px 16px;text-align:center
}
.countdown-box small{display:block;font-weight:900;color:#8d6b26;font-size:10px;letter-spacing:1px}
.countdown-box strong{font-size:24px;color:#6b412f}

.payment-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}
.pay-step{
    border:1px solid #f4d5dd;border-radius:15px;padding:12px;background:#fffafb;
    display:grid;grid-template-columns:30px 1fr;align-items:center;column-gap:8px;opacity:.55
}
.pay-step.active{opacity:1;border-color:#ff9eb6;background:#fff3f7}
.pay-step span{
    width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:#eadde3;color:#785365;font-weight:900;grid-row:1/3
}
.pay-step.active span{background:var(--pink);color:#fff}
.pay-step b{font-size:13px}
.pay-step small{font-size:10px;color:var(--muted)}

.payment-v44-grid{display:grid;grid-template-columns:1fr .9fr;gap:18px;margin-top:20px}
.payment-summary-box,.qris-v44-box{
    border:1px solid var(--line);border-radius:20px;padding:20px;background:#fffdfd
}
.payment-summary-box h2,.qris-v44-box h2{margin-top:0}
.pay-detail-row{
    display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:10px;
    border-bottom:1px dashed #f3d3dc;padding:12px 0
}
.pay-detail-row:last-child{border-bottom:0}
.pay-detail-row span{font-size:12px;color:var(--muted)}
.amount-row b{font-size:25px;color:var(--pink)}
.qris-v44-box{text-align:center}
.qris-v44-img{width:min(100%,350px);margin:0 auto 14px;border-radius:18px;border:1px solid var(--line)}
.qris-v44-box p{line-height:1.6;color:var(--muted)}
.qris-v44-box .secondary-btn{display:inline-flex;margin-top:4px}

.upload-proof-v44,.proof-waiting-v44,.voucher-ready-v44{
    margin-top:20px;border:1.5px solid var(--line);border-radius:20px;padding:20px;background:#fff
}
.proof-drop{
    border:2px dashed #ffabc0;border-radius:18px;background:#fff7f9;min-height:210px;
    display:flex!important;align-items:center;justify-content:center;text-align:center;
    cursor:pointer;overflow:hidden
}
.proof-drop input{display:none}
.proof-drop-icon{font-size:48px;margin-bottom:8px}
#proofEmpty{display:grid;gap:5px}
#proofPreview{width:100%;max-height:430px;object-fit:contain}
.proof-waiting-v44{display:flex;align-items:center;gap:18px;background:#fff8e5;border-color:#f1d18b}
.proof-wait-icon{font-size:42px}
.proof-waiting-v44 h2,.proof-waiting-v44 p{margin:3px 0}
.proof-waiting-v44 .secondary-btn{margin-left:auto;white-space:nowrap}

.voucher-ready-v44{
    border:2px dashed #ff7da1;background:linear-gradient(180deg,#fff7fa,#fff0f5);
    text-align:center
}
.voucher-ready-v44.redeemed{border-color:#8bd5a7;background:#f0fff5}
.voucher-ready-v44 small{font-weight:900;color:var(--muted);display:block}
.voucher-ready-v44 strong{display:block;font-size:clamp(24px,4vw,38px);color:var(--pink);margin:8px 0 14px}
.voucher-ready-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.payment-v44-foot{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap}

.settings-form{display:grid;gap:16px}
.settings-form label{display:grid;gap:7px;font-weight:800}
.settings-form input,.settings-form textarea{
    width:100%;padding:12px;border:1.5px solid var(--line);border-radius:12px;font:inherit
}
.settings-form small{font-weight:400;color:var(--muted)}
.qris-admin-preview{width:min(100%,420px);margin:auto;border:1px solid var(--line);border-radius:18px}

.history-voucher.redeemed{border-color:#8bd5a7;background:#effff5}
.history-voucher-main{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.redeem-meta{margin-left:auto;display:flex;flex-direction:column;text-align:right;font-size:12px;color:var(--muted)}
.mini-bot-btn{padding:8px 12px;font-size:12px}

@media(max-width:760px){
    .payment-v44-grid{grid-template-columns:1fr}
    .payment-steps{grid-template-columns:1fr 1fr}
    .pay-detail-row{grid-template-columns:1fr auto}
    .pay-detail-row span{grid-column:1/3}
    .payment-v44-title{flex-direction:column}
    .countdown-box{width:100%}
    .proof-waiting-v44{align-items:flex-start;flex-direction:column}
    .proof-waiting-v44 .secondary-btn{margin-left:0}
    .redeem-meta{margin-left:0;text-align:left}
}
@media(max-width:480px){
    .payment-steps{grid-template-columns:1fr}
    .payment-v44-card{padding:18px}
}


/* =========================================
   V4.5 ADMIN DASHBOARD PRO
   ========================================= */
.header-actions{display:flex;gap:10px;flex-wrap:wrap}
.pro-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:15px}
.pro-kpi{
    background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;
    box-shadow:var(--shadow);position:relative;overflow:hidden
}
.pro-kpi.featured{background:linear-gradient(135deg,#fff1f6,#fff);border-color:#ffb3c7}
.pro-kpi .kpi-icon{font-size:24px;margin-bottom:12px}
.pro-kpi small{display:block;font-weight:900;font-size:10px;letter-spacing:1px;color:var(--muted)}
.pro-kpi strong{display:block;font-size:25px;margin:5px 0;color:#4c273d}
.pro-kpi.featured strong{color:var(--pink)}
.pro-kpi span{font-size:11px;color:var(--muted)}

.pro-secondary-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:18px}
.mini-stat{
    background:#fff;border:1px solid var(--line);border-radius:15px;padding:13px 15px;
    display:flex;align-items:center;gap:10px
}
.mini-stat b{font-size:22px;color:#4c273d}
.mini-stat span{font-size:11px;color:var(--muted)}
.pending-stat{background:#fff9e8;border-color:#f4dda1}
.success-stat{background:#f2fff6;border-color:#bfe6cc}
.danger-stat{background:#fff4f4;border-color:#efc1c1}

.pro-main-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:18px}
.sales-chart{height:300px;display:flex;align-items:stretch;gap:12px;padding-top:20px}
.sales-bar-col{flex:1;min-width:55px;display:grid;grid-template-rows:28px 1fr 20px 18px;text-align:center;gap:4px}
.bar-value{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{height:100%;background:#fff0f5;border-radius:13px;position:relative;overflow:hidden;border:1px solid #ffe0e8}
.bar-fill{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(180deg,#ff86a6,#ff5682);border-radius:11px 11px 0 0;min-height:4px}
.sales-bar-col b{font-size:10px}.sales-bar-col small{font-size:9px;color:var(--muted)}

.pro-insight-panel{display:flex;flex-direction:column}
.pro-insight-panel h2{margin:3px 0 12px}
.insight-card{border:1px solid #ffe0e8;border-radius:14px;padding:13px;margin-bottom:10px;background:#fffafb}
.insight-card span,.insight-card small{display:block;font-size:10px;color:var(--muted)}
.insight-card b{display:block;margin:5px 0;font-size:15px}
.insight-card a{font-size:11px;font-weight:800;color:var(--pink)}
.recent-pro-table{margin-bottom:30px}
.status.completed,.status.redeemed{background:#dff7e7;color:#18723b}
.status.processing,.status.delivered{background:#e8e4ff;color:#54399d}

.order-filter-pro{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.filter-search{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:12px}
.filter-search input,.filter-selects select{
    width:100%;border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;background:#fff;font:inherit
}
.filter-selects{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:10px;align-items:end}
.filter-selects label{font-size:10px;color:var(--muted);font-weight:900;display:grid;gap:5px}
.reset-filter-btn{align-self:end;justify-content:center}
.results-line{font-size:12px;color:var(--muted);margin:10px 2px}
.empty-table-cell{text-align:center!important;padding:35px!important;color:var(--muted)}
.admin-table td:first-child small{display:block;font-size:9px;color:var(--muted);margin-top:3px}

.danger-outline-btn{
    border:1.5px solid #efb1b1;background:#fff;color:#a53636;
    border-radius:12px;padding:10px 14px;font-weight:900;cursor:pointer
}
.danger-outline-btn:hover{background:#fff1f1}

@media(max-width:1200px){
    .pro-kpi-grid{grid-template-columns:repeat(2,1fr)}
    .pro-secondary-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
    .pro-main-grid{grid-template-columns:1fr}
    .filter-selects{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
    .pro-kpi-grid,.pro-secondary-grid{grid-template-columns:1fr}
    .filter-search{grid-template-columns:1fr}
    .filter-selects{grid-template-columns:1fr}
    .sales-chart{overflow-x:auto;min-width:0}
    .sales-bar-col{min-width:62px}
}


/* V4.6 CUSTOMER EXPERIENCE + DYNAMIC BRANDING */
.dynamic-brand-logo{width:34px;height:34px;object-fit:contain;border-radius:10px;vertical-align:middle;margin-right:8px}
.dynamic-brand-orb{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;background:#fff0f5;border-radius:10px;margin-right:8px}
.brand{display:flex;align-items:center}
.branding-settings-grid{align-items:start}
.brand-preview-panel{text-align:center;position:sticky;top:20px}
.branding-logo-preview{width:130px;height:130px;object-fit:contain;border:1px solid var(--line);border-radius:24px;background:#fff;margin:15px auto}
.branding-fallback-logo{font-size:70px;margin:20px}
.brand-link-preview{display:grid;gap:8px;margin-top:18px;text-align:left}
.brand-link-preview div{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fffafb}
.brand-link-preview span,.brand-link-preview small{display:block}
.brand-link-preview span{font-weight:900;font-size:11px}
.brand-link-preview small{color:var(--muted);margin-top:3px;word-break:break-all}
.remove-logo-check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}
.remove-logo-check input{width:auto!important}
.customer-help-card{
    margin:24px 0;border:1px solid #ffd5e0;border-radius:22px;padding:20px;
    background:linear-gradient(135deg,#fff3f7,#fff);display:flex;align-items:center;justify-content:space-between;gap:20px
}
.customer-help-card small{font-size:10px;font-weight:900;color:var(--pink);letter-spacing:1px}
.customer-help-card h2{margin:4px 0;font-size:18px}
.customer-link-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:760px){
    .customer-help-card{flex-direction:column;align-items:flex-start}
    .customer-link-actions{justify-content:flex-start}
    .brand-preview-panel{position:static}
}


/* V5 — DUITKU AUTOMATIC QRIS */
.auto-payment-v5{
    margin-top:20px;border:2px solid #b7dfc4;border-radius:22px;padding:20px;
    background:linear-gradient(135deg,#effff4,#fff);display:grid;
    grid-template-columns:auto 1fr auto;gap:18px;align-items:center
}
.auto-payment-icon{
    width:60px;height:60px;border-radius:18px;background:#dff8e7;
    display:flex;align-items:center;justify-content:center;font-size:30px
}
.auto-payment-copy small{font-size:10px;font-weight:900;letter-spacing:1px;color:#247341}
.auto-payment-copy h2{margin:4px 0 7px}
.auto-payment-copy p{margin:0;color:var(--muted);line-height:1.55}
.gateway-ref{font-size:10px;color:var(--muted);margin-top:8px}
.auto-pay-btn{white-space:nowrap}
.auto-status-v5{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:12px;margin-top:10px;color:#3f7251;font-size:12px
}
.pulse-dot{
    width:10px;height:10px;border-radius:50%;background:#3fb967;
    box-shadow:0 0 0 0 rgba(63,185,103,.5);animation:v5pulse 1.5s infinite
}
@keyframes v5pulse{70%{box-shadow:0 0 0 10px rgba(63,185,103,0)}100%{box-shadow:0 0 0 0 rgba(63,185,103,0)}}
.manual-fallback-v5{
    margin-top:12px;border:1px solid #efdca8;border-radius:16px;background:#fffaf0;padding:12px
}
.manual-fallback-v5 summary{cursor:pointer;font-weight:900;color:#765f2a}
.manual-fallback-inner{padding:14px 4px 2px;text-align:center}
.mixed-proof-form{display:grid;gap:10px;margin-top:12px}
.mixed-proof-form input{padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.gateway-settings-v5{
    border-top:2px dashed #f1c9d4;margin-top:22px;padding-top:20px;display:grid;gap:14px
}
.gateway-settings-v5 h2{margin:0}
.gateway-settings-v5 select{
    width:100%;padding:12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font:inherit
}
.callback-info-v5{
    background:#f8f4ff;border:1px solid #dcd1f5;border-radius:12px;padding:12px;display:grid;gap:5px
}
.callback-info-v5 code{font-size:11px;word-break:break-all}
@media(max-width:800px){
    .auto-payment-v5{grid-template-columns:1fr;text-align:center}
    .auto-payment-icon{margin:auto}
    .auto-pay-btn{justify-content:center}
}





/* V5.2 — MOBILE FIT DESKTOP
   Phones render the full desktop canvas and automatically scale it to screen width.
   Do not add initial-scale=1 to the viewport meta tag. */
html {
    min-width: 1180px;
}
body {
    min-width: 1180px;
    overflow-x: hidden;
}


/* V5.3 PERFORMANCE TUNING */
.section,
.admin-panel,
.history-card,
.checkout-card {
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}

img {
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* V5.4 BRANDING FIX */
.footer-brand-line{display:flex;align-items:center;gap:12px}
.footer-brand-line .dynamic-brand-logo{width:58px;height:58px;object-fit:contain;border-radius:14px;margin:0}
.footer-brand-line .dynamic-brand-orb{width:58px;height:58px;margin:0}
.footer-grid a{color:inherit;text-decoration:none}
.footer-grid a:hover{color:var(--pink)}

/* V5.5 UI POLISH — visual only */
.nav{min-height:78px;gap:30px}
.brand{gap:12px;font-size:16px}
.brand img,.brand .dynamic-brand-logo{width:52px;height:52px;object-fit:contain;border:0;border-radius:0;box-shadow:none;background:transparent}
nav{gap:27px;font-size:15px}
nav a{transition:color .18s ease,transform .18s ease}
nav a:hover{transform:translateY(-1px)}

.hero{padding:44px 0 22px}
.hero-grid{grid-template-columns:1fr 1fr;gap:28px}
.hero h1{font-size:clamp(44px,5.45vw,78px);margin:24px 0 18px}
.hero p{margin:19px auto 20px}
.hero-art{display:flex;align-items:center;justify-content:center;min-height:360px}
.hero-art img{width:100%;max-width:560px;max-height:430px;object-fit:contain;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;filter:drop-shadow(0 18px 24px rgba(118,67,89,.10))}

.section{padding:22px 0}
.panel{box-shadow:0 12px 32px rgba(118,67,89,.085)}
.package-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;box-shadow:0 6px 16px rgba(118,67,89,.035)}
.package-card:hover{transform:translateY(-3px);box-shadow:0 13px 27px rgba(118,67,89,.09);border-color:#ff9db4}
.package-card.featured:hover{border-color:#ffba73;box-shadow:0 0 0 5px rgba(255,216,155,.22),0 13px 27px rgba(118,67,89,.09)}

@media (max-width:900px){
  .hero{padding-top:34px}
  .hero-art{min-height:0}
  .hero-art img{max-width:540px}
}

/* V5.5.6 FINAL POLISH — approved hero composition
   Keep the same desktop composition on forced-desktop mobile. */
@media (min-width:901px){
  .hero{padding:28px 0 8px!important;overflow:visible!important}
  .hero .container.hero-grid{
    width:min(1180px,calc(100% - 32px))!important;
    grid-template-columns:42% 58%!important;
    gap:0!important;
    margin:0 auto!important;
    overflow:visible!important;
  }
  .hero-copy{
    padding-left:30px!important;
    padding-right:0!important;
    text-align:left!important;
    align-items:flex-start!important;
    justify-content:center!important;
  }
  .hero-copy .ribbon{font-size:16px!important;padding:14px 26px!important}
  .hero-copy h1{
    font-size:clamp(55px,4.15vw,68px)!important;
    line-height:.91!important;
    letter-spacing:-1.8px!important;
    margin:24px 0 17px!important;
    text-align:left!important;
    white-space:nowrap!important;
  }
  .hero-copy h1 span{display:block!important;white-space:normal!important}
  .hero-copy .trust-badge{font-size:15px!important;padding:10px 22px!important}
  .hero-copy p{
    font-size:18px!important;
    line-height:1.55!important;
    max-width:450px!important;
    margin:18px 0 19px!important;
    text-align:left!important;
  }
  .hero-copy .primary-btn{font-size:15px!important;padding:14px 24px!important}
  .hero-art{
    min-height:455px!important;
    margin-left:-28px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow:visible!important;
  }
  .hero-art img{
    display:block!important;
    width:830px!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    transform:none!important;
    object-fit:contain!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    filter:drop-shadow(0 18px 24px rgba(118,67,89,.10))!important;
  }
}


/* V5.5.7 FINAL SPACING — visual-only refinement
   Consolidated after removing superseded V5.5.1–V5.5.5 hero overrides. */
@media (min-width:901px){
  /* Preserve the approved V5.5.6 composition without relying on older overrides. */
  .hero-copy{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
  }

  /* Give the sentence more breathing room and avoid awkward wrapping. */
  .hero-copy p{
    width:100%!important;
    max-width:475px!important;
  }

  /* Pull the package panel closer to the hero. */
  #packages{
    margin-top:-32px!important;
  }
}


/* =========================================================
   V5.5.8 — HERO LOCK + LOWER SECTION POLISH
   Final visual lock for hero. Backend untouched.
   ========================================================= */

@media (min-width:901px){
  /* HERO LOCK */
  .hero{
    padding-bottom:18px!important;
  }

  .hero .container.hero-grid{
    margin-bottom:0!important;
  }

  .hero-copy h1{
    font-size:clamp(58px,4.35vw,76px)!important;
    line-height:.92!important;
    letter-spacing:-1.6px!important;
  }

  .hero-copy p{
    font-size:18px!important;
    line-height:1.55!important;
    max-width:500px!important;
  }

  /* Pull package panel upward without touching mascot dimensions */
  #packages,
  .packages-section,
  .package-section{
    margin-top:-34px!important;
  }

  /* If section relies on padding instead of margin */
  #packages.section,
  .packages-section.section{
    padding-top:18px!important;
  }

  /* LOWER SECTION POLISH */
  #packages .section-card,
  .packages-section .section-card,
  .package-section .section-card,
  #how .section-card,
  #faq .section-card{
    border-radius:26px!important;
    box-shadow:0 16px 38px rgba(87,35,63,.07)!important;
  }

  .package-card{
    border-radius:22px!important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease!important;
  }

  .package-card:hover{
    transform:translateY(-4px)!important;
    box-shadow:0 14px 30px rgba(255,82,130,.12)!important;
  }

  #how{
    margin-top:26px!important;
  }

  #how .steps,
  .steps-grid{
    gap:16px!important;
  }

  #how .step-card,
  .step-card{
    border-radius:20px!important;
    min-height:150px!important;
  }

  #faq{
    margin-top:26px!important;
  }

  #faq details{
    border-radius:14px!important;
  }

  footer{
    margin-top:34px!important;
  }
}

/* Forced-desktop mobile keeps the exact same desktop canvas.
   No separate responsive restyling is introduced here. */


/* =========================================================
   V5.5.11 — MOBILE HERO RIGHT-ALIGN
   BASE: V5.5.8 approved desktop.
   Phone keeps the SAME hero proportions/sizes as desktop.
   Only the mascot's RIGHT EDGE is locked to the package panel.
   ========================================================= */

@media screen and (max-device-width: 900px) {
  /* Hero and package already use the same 1180px container.
     Keep the desktop composition unchanged. */
  .hero .container.hero-grid{
    width:min(1180px,calc(100% - 32px))!important;
    grid-template-columns:42% 58%!important;
    gap:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    overflow:visible!important;
  }

  .hero-copy{
    position:relative!important;
    z-index:2!important;
  }

  /* Key fix:
     keep mascot at V5.5.8 size, but anchor its RIGHT EDGE
     to the exact right edge of the same container used by
     the white package panel below. */
  .hero-art{
    position:relative!important;
    z-index:1!important;
    margin-left:0!important;
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    overflow:visible!important;
  }

  .hero-art img{
    flex:0 0 auto!important;
    width:830px!important;
    max-width:none!important;
    max-height:none!important;
    height:auto!important;
    transform:none!important;
    margin:0!important;
  }

  /* Do not move package/lower content. */
  #packages,
  .packages-section,
  .package-section{
    transform:none!important;
  }
}


/* =========================================================
   V5.5.12 — HERO RIGHT ALIGN ALL
   Same alignment rule for DESKTOP + forced-desktop MOBILE:
   hero mascot right edge = package white panel right edge.
   ========================================================= */

/* Desktop */
@media screen and (min-device-width: 901px) {
  .hero .container.hero-grid{
    width:min(1180px,calc(100% - 32px))!important;
    grid-template-columns:42% 58%!important;
    gap:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    overflow:visible!important;
  }

  .hero-art{
    position:relative!important;
    z-index:1!important;
    width:100%!important;
    margin-left:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    overflow:visible!important;
  }

  .hero-art img{
    flex:0 0 auto!important;
    width:830px!important;
    max-width:none!important;
    max-height:none!important;
    height:auto!important;
    transform:none!important;
    margin:0!important;
  }
}

/* Shared package alignment guard */
#packages .container,
.packages-section .container,
.package-section .container{
  width:min(1180px,calc(100% - 32px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}


/* =========================================================
   V5.5.13 — HERO FINE TUNE
   Based on V5.5.12.
   - Mascot only slightly smaller on desktop + forced-desktop mobile.
   - Right edge stays aligned with the package panel.
   - Hero description uses intentional two-line copy in HTML.
   ========================================================= */

@media screen and (min-device-width: 901px) {
  .hero-art img{
    width:790px!important; /* was 830px */
  }
}

@media screen and (max-device-width: 900px) {
  .hero-art img{
    width:790px!important; /* same visual rule on phone */
  }
}

/* Keep the right edge aligned after the slight size reduction. */
.hero-art{
  justify-content:flex-end!important;
}

/* Make the requested two-line description feel intentional. */
.hero-copy p{
  max-width:520px!important;
  line-height:1.48!important;
}


/* =========================================================
   V5.5.14 — LOWER SECTION POLISH
   Hero + voucher package are LOCKED from V5.5.13.
   This block only polishes sections below them.
   ========================================================= */

/* More deliberate rhythm below the package panel */
#how,
.how-section,
.purchase-steps,
.features-section,
.info-section,
#faq,
.faq-section {
  scroll-margin-top: 90px;
}

/* Shared lower cards */
.how-section,
.purchase-steps,
.faq-section,
#faq {
  border-radius: 24px!important;
}

/* Cara Pembelian: stronger heading and cleaner step cards */
.how-section h2,
.purchase-steps h2,
#how h2 {
  letter-spacing: -.02em!important;
  line-height: 1.1!important;
}

.how-section .step,
.how-section .step-card,
.purchase-steps .step,
.purchase-steps .step-card,
#how .step,
#how .step-card {
  border-radius: 18px!important;
  transition: transform .18s ease, box-shadow .18s ease!important;
}

.how-section .step:hover,
.how-section .step-card:hover,
.purchase-steps .step:hover,
.purchase-steps .step-card:hover,
#how .step:hover,
#how .step-card:hover {
  transform: translateY(-2px)!important;
  box-shadow: 0 10px 24px rgba(92,40,66,.07)!important;
}

/* Trust/info cards: keep cute, but more balanced */
.features-section > *,
.info-section > *,
.trust-card,
.info-card {
  border-radius: 20px!important;
}

.features-section h3,
.info-section h3,
.trust-card h3,
.info-card h3 {
  letter-spacing: -.01em!important;
}

/* FAQ: make rows easier to scan/click */
.faq-section,
#faq {
  overflow: hidden!important;
}

.faq-section details,
#faq details {
  border-radius: 14px!important;
  transition: background .18s ease!important;
}

.faq-section details:hover,
#faq details:hover {
  background: rgba(255, 245, 248, .72)!important;
}

.faq-section summary,
#faq summary {
  cursor: pointer!important;
  line-height: 1.45!important;
}

/* Footer: slightly cleaner hierarchy */
footer {
  margin-top: 42px!important;
}

footer h3,
footer h4,
footer strong {
  letter-spacing: -.01em!important;
}

footer a {
  text-decoration: none!important;
}

/* Phone remains forced-desktop, but lower sections get safer spacing */
@media screen and (max-device-width: 900px) {
  .how-section,
  .purchase-steps,
  .faq-section,
  #faq {
    border-radius: 20px!important;
  }

  footer {
    margin-top: 34px!important;
  }
}


/* =========================================================
   V5.5.15 — FINAL LOWER BALANCE
   LOCKED: Hero + Paket Voucher from V5.5.13/14.
   Goal: tighter vertical rhythm + balanced lower info cards.
   ========================================================= */

/* Paket Voucher -> Cara Pembelian */
#packages,
.packages-section,
.package-section {
  margin-bottom: 60px!important;
}

/* Cara Pembelian: remove excessive outer whitespace */
#how,
.how-section,
.purchase-steps {
  margin-top: 0!important;
  margin-bottom: 40px!important;
}

/* The two information/trust cards:
   fill the same content width as the sections above. */
.features-section,
.info-section,
.trust-section {
  width:min(1180px,calc(100% - 32px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
  margin-top:0!important;
  margin-bottom:58px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
}

/* Common possible wrappers/cards */
.features-section > *,
.info-section > *,
.trust-section > *,
.trust-card,
.info-card {
  min-width:0!important;
}

/* FAQ closer to info cards, matching the same page rhythm */
#faq,
.faq-section {
  margin-top:0!important;
  margin-bottom:55px!important;
}

/* Footer follows FAQ without the previous oversized dead zone */
footer {
  margin-top:0!important;
}

/* Forced-desktop phone: same spacing system, slightly tighter */
@media screen and (max-device-width:900px) {
  #packages,
  .packages-section,
  .package-section {
    margin-bottom:54px!important;
  }

  #how,
  .how-section,
  .purchase-steps {
    margin-bottom:38px!important;
  }

  .features-section,
  .info-section,
  .trust-section {
    margin-bottom:52px!important;
  }

  #faq,
  .faq-section {
    margin-bottom:50px!important;
  }
}


/* =========================================================
   V5.5.16 — PACKAGE → PURCHASE GAP -60%
   Only changes the vertical gap after Paket Voucher.
   Hero, package cards, purchase section internals, info, FAQ,
   footer and application/payment logic remain untouched.
   ========================================================= */

#packages,
.packages-section,
.package-section {
  margin-bottom:24px!important; /* V5.5.15: 60px -> reduced 60% */
}

@media screen and (max-device-width:900px) {
  #packages,
  .packages-section,
  .package-section {
    margin-bottom:22px!important; /* V5.5.15: 54px -> reduced ~60% */
  }
}


/* =========================================================
   V5.5.18 — FINAL VERTICAL RHYTHM
   Verified against actual homepage structure:
   #packages -> #how -> #check -> #faq
   HERO + PACKAGE INTERNALS ARE LOCKED.
   ========================================================= */

/* 1) Paket Voucher -> Cara Pembelian
   Kill generic .section padding contribution, then pull #how upward.
   This is intentionally stronger than the old margin-bottom-only patch. */
#packages.section {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

#how.section {
    padding-top: 0 !important;
    margin-top: -42px !important;
    padding-bottom: 14px !important;
}

/* 2) Cara Pembelian -> info cards */
#check.section {
    padding-top: 0 !important;
    padding-bottom: 14px !important;
}

/* Make the two info cards truly fill the row 50:50.
   The old base rule was repeat(3,1fr), which left 1/3 empty. */
#check .three-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

/* 3) Info cards -> FAQ */
#faq.section {
    padding-top: 0 !important;
    margin-top: 8px !important;
    padding-bottom: 18px !important;
}

/* Keep FAQ -> footer comfortable, not oversized. */
footer {
    margin-top: 20px !important;
}

/* Forced-desktop phones use the same visual rhythm. */
@media screen and (max-device-width: 900px) {
    #packages.section {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    #how.section {
        padding-top: 0 !important;
        margin-top: -42px !important;
        padding-bottom: 14px !important;
    }

    #check.section {
        padding-top: 0 !important;
        padding-bottom: 14px !important;
    }

    #check .three-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    #faq.section {
        padding-top: 0 !important;
        margin-top: 8px !important;
        padding-bottom: 18px !important;
    }

    footer {
        margin-top: 20px !important;
    }
}


/* =========================================================
   V5.5.19 — GAP CALIBRATION
   Fix V5.5.18 overlap only.
   Hero/package internals/backend remain LOCKED.
   ========================================================= */

/* Package -> Cara Pembelian:
   cancel the aggressive -42px pull and leave a clean small gap. */
#packages.section {
    padding-bottom: 0 !important;
    margin-bottom: 24px !important;
}

#how.section {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 14px !important;
}

/* Preserve the good V5.5.18 lower rhythm. */
#check.section {
    padding-top: 0 !important;
    padding-bottom: 14px !important;
}

#check .three-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

#faq.section {
    padding-top: 0 !important;
    margin-top: 8px !important;
    padding-bottom: 18px !important;
}

footer {
    margin-top: 20px !important;
}

/* Same calibration for forced-desktop mobile. */
@media screen and (max-device-width: 900px) {
    #packages.section {
        padding-bottom: 0 !important;
        margin-bottom: 24px !important;
    }

    #how.section {
        padding-top: 0 !important;
        margin-top: 0 !important;
        padding-bottom: 14px !important;
    }
}


/* =========================================================
   V5.5.20 — UI FINAL / LOCKED LAYOUT
   Final calibrated vertical rhythm.
   Hero, voucher cards, navigation and backend are LOCKED.
   ========================================================= */

/* Paket Voucher -> Cara Pembelian */
#packages.section {
    padding-bottom: 0 !important;
    margin-bottom: 24px !important;
}
#how.section {
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    padding-bottom: 0 !important;
}

/* Cara Pembelian -> information cards */
#check.section {
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    padding-bottom: 0 !important;
}
#check .three-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

/* Information cards -> FAQ */
#faq.section {
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    padding-bottom: 0 !important;
}

/* FAQ -> footer */
footer {
    margin-top: 0 !important;
}

/* Keep the exact same locked rhythm on the forced-desktop phone view. */
@media screen and (max-device-width: 900px) {
    #packages.section {
        padding-bottom: 0 !important;
        margin-bottom: 24px !important;
    }
    #how.section {
        padding-top: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 24px !important;
        padding-bottom: 0 !important;
    }
    #check.section {
        padding-top: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 24px !important;
        padding-bottom: 0 !important;
    }
    #faq.section {
        padding-top: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 24px !important;
        padding-bottom: 0 !important;
    }
}


/* =========================================================
   V5.6.0 — MIDTRANS REVIEW / LEGAL INFORMATION
   Adds legal-policy layouts and checkout consent only.
   Existing payment/order backend behavior remains unchanged.
   ========================================================= */
.service-copy{display:grid;gap:12px;color:var(--muted);line-height:1.75}
.service-copy p{margin:0}
.service-copy strong{color:var(--text)}
.service-copy a,.legal-body a,.agreement-row a{color:var(--pink);font-weight:800;text-decoration:underline;text-underline-offset:2px}

.legal-page{min-height:100vh;padding:34px 0 60px}
.legal-shell{max-width:920px}
.legal-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}
.legal-home{font-weight:900;color:var(--pink)}
.legal-card{background:white;border:1px solid var(--line);border-radius:26px;padding:34px;box-shadow:var(--shadow)}
.legal-card h1{margin:8px 0 6px;color:var(--purple);font-size:clamp(30px,5vw,46px)}
.legal-updated{color:var(--muted);font-size:13px;margin-bottom:26px}
.legal-body{color:var(--muted);line-height:1.78}
.legal-body h2{color:var(--text);font-size:20px;margin:28px 0 8px}
.legal-body p{margin:8px 0}
.legal-body ul{padding-left:22px;margin:8px 0}
.legal-body li{margin:7px 0}
.legal-note{background:#fff4d9;border:1px solid #ffd98a;border-radius:14px;padding:14px 16px;margin:18px 0;color:#6c5136}
.legal-contact{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:20px}

.agreement-row{grid-template-columns:22px 1fr!important;align-items:start!important;gap:10px!important;font-weight:600!important;font-size:13px;line-height:1.55;color:var(--muted)}
.checkout-card .agreement-row input[type="checkbox"]{width:18px!important;height:18px!important;margin:2px 0 0!important;padding:0!important;accent-color:var(--pink);box-shadow:none!important}

@media(max-width:700px){
  .legal-card{padding:22px}
  .legal-top{align-items:flex-start;flex-direction:column}
}