:root{--blue:#0b4488;--blue2:#0875ed;--orange:#ff6500;--ink:#102344;--muted:#61718a;--line:#dbe5f1;--pale:#eef6ff;--green:#079b4b}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#f6f9fd}a{color:inherit;text-decoration:none}.topbar{background:#fff;border-bottom:1px solid #e5eaf1;position:sticky;top:0;z-index:5}.nav{max-width:1200px;margin:auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{font-size:25px;font-weight:900;color:#0b4488 !important;letter-spacing:-1px}.brand > span{color:#ff6500 !important}.brand small{display:block;font-size:9px;letter-spacing:2px;color:#68778b !important;font-weight:700}.navlinks{display:flex;gap:25px;color:#34445d;font-size:13px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;background:var(--orange);color:white;font-weight:800;padding:13px 18px;cursor:pointer;font-size:14px}.btn:hover{filter:brightness(.96)}.btn.blue{background:var(--blue)}.btn.outline{background:white;border:1px solid var(--line);color:var(--blue)}.hero{background:linear-gradient(120deg,#062b59,#0b4b94);color:#fff}.hero-inner{max-width:1200px;margin:auto;padding:28px 22px;display:flex;justify-content:space-between;align-items:center;gap:28px}.hero h1{font-size:clamp(28px,4vw,44px);line-height:1.1;margin:8px 0 12px;max-width:650px}.hero p{line-height:1.65;color:#e1edff;max-width:680px}.pill{display:inline-block;border:1px solid #77a8dc;border-radius:9px;padding:7px 12px;font-size:12px;font-weight:700}.price{font-size:30px;font-weight:900;color:#ffcc42}.wrap{max-width:1200px;margin:24px auto;padding:0 22px}.grid{display:grid;grid-template-columns:minmax(230px,.82fr) minmax(390px,1.55fr) minmax(220px,.78fr);gap:18px;align-items:start}.panel{background:#fff;border:1px solid #e1eaf5;border-radius:13px;padding:18px;box-shadow:0 4px 18px #173d6b08}.panel h2,.panel h3{margin:0 0 14px}.product-visual{height:210px;background:linear-gradient(145deg,#f8fbff,#e8f3ff);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:76px}.product-name{font-weight:850;font-size:18px;margin:15px 0 8px}.checks{list-style:none;padding:0;margin:15px 0}.checks li{padding:7px 0;font-size:13px}.checks li:before{content:"✓";display:inline-flex;align-items:center;justify-content:center;background:#0875ed;color:white;border-radius:50%;width:20px;height:20px;margin-right:8px;font-weight:900}.section-title{background:#eaf4ff;border-radius:8px;padding:10px 12px;font-weight:850;margin:18px 0 12px;display:flex;align-items:center;gap:10px}.num{background:#0875ed;color:white;border-radius:50%;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}label{font-size:12px;font-weight:800}input,select,textarea{font:inherit;font-size:14px;border:1px solid #cfd9e6;border-radius:7px;padding:11px 12px;width:100%;background:white;color:var(--ink)}textarea{resize:vertical;min-height:76px}input:focus,select:focus,textarea:focus{outline:2px solid #b8d8ff;border-color:#0875ed}.hint{font-size:11px;color:var(--muted);line-height:1.5}.sidecard{margin-bottom:13px}.sidecard p{font-size:13px;line-height:1.55;color:#4f6078;margin-bottom:0}.sidecard ul{padding-left:20px;font-size:13px;line-height:1.9}.notice{background:#fff6ec;border-color:#ffe2c6}.green{background:#f0fff5;border-color:#c9f1d8}.total{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#f2f8ff;border-radius:9px;padding:13px;margin:14px 0}.total strong{font-size:19px;color:var(--blue)}.upload{border:1px dashed #9cb3ce;border-radius:8px;padding:13px;background:#fbfdff}.upload input{padding:7px;border:0;font-size:12px}.footnote{text-align:center;color:var(--muted);font-size:12px;margin:12px 0}.footer{padding:28px 22px;background:#092e5b;color:#dceaff;text-align:center;font-size:12px;margin-top:35px}.alert{padding:12px 14px;border-radius:8px;background:#fff2e8;color:#8d3900;margin-bottom:14px;font-size:13px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:11px;border-bottom:1px solid #e4ebf3;text-align:left;white-space:nowrap}th{background:#f2f7fd}.badge{display:inline-block;border-radius:20px;background:#eaf4ff;color:#0754a2;padding:5px 9px;font-size:11px;font-weight:800}.admin-layout{max-width:1250px;margin:25px auto;padding:0 20px}.admin-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
@media(max-width:1000px){.grid{grid-template-columns:1fr 1.7fr}.rightcol{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.sidecard{margin:0}.navlinks{display:none}}@media(max-width:700px){.hero-inner{display:block}.hero-inner .hero-side{margin-top:16px}.grid{grid-template-columns:1fr}.rightcol{grid-column:auto;display:block}.sidecard{margin-bottom:12px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.nav{padding:12px 16px}.nav .btn{padding:10px 12px;font-size:12px}.wrap{padding:0 12px}.panel{padding:15px}.hero-inner{padding:25px 17px}.admin-layout{padding:0 12px}}
/* Admin data table: merge order date and total into order detail for compact screens */
.order-summary{white-space:normal!important;min-width:180px;max-width:240px;line-height:1.5}
.order-summary .order-date{display:inline-block;color:#63738a;font-size:11px;margin-top:4px;white-space:normal}
.order-summary .order-total{display:inline-block;color:#163b66;font-size:12px;margin-top:4px;white-space:normal}
.admin-content .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.admin-content table{min-width:0;width:100%;table-layout:auto}
.admin-content th,.admin-content td{padding:8px 7px;font-size:11px;white-space:normal;vertical-align:middle}
.admin-content td select{min-width:100px;padding:8px 6px;font-size:11px}
.admin-content td .btn{font-size:11px;padding:8px 9px!important;white-space:normal}
@media(max-width:900px){.admin-content .table-wrap{overflow-x:auto}.admin-content table{min-width:690px}}

/* V12: responsive navigation and controls across customer-facing pages */
html{scroll-behavior:smooth;max-width:100%;overflow-x:hidden}
body{min-width:320px;overflow-x:hidden}
img,video,iframe{max-width:100%;height:auto}
button,input,select,textarea{max-width:100%}
.btn,button{min-height:42px;line-height:1.25;white-space:normal;overflow-wrap:anywhere}
.topbar{width:100%}
.nav{width:100%;min-width:0;flex-wrap:wrap;justify-content:flex-start;gap:10px 14px}
.brand{flex:0 0 auto;max-width:100%;line-height:1.05}
.testimonial-menu-link{flex:0 0 auto}
.navlinks{display:flex;flex:1 1 100%;order:5;flex-wrap:wrap;align-items:center;gap:8px 18px;min-width:0}
.navlinks a{display:inline-flex;align-items:center;min-height:36px}
.nav>div:last-child{display:flex;flex:1 1 auto;min-width:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.nav>div:last-child .btn{max-width:100%}
.hero-inner,.wrap,.admin-layout,.admin-head,.grid,.form-grid,.cta{min-width:0}
.hero-inner>*{min-width:0}
.cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cta>div{min-width:0;max-width:100%}
.table-wrap,.tablewrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:900px){
 .nav{padding:12px 16px;gap:10px}
 .navlinks{display:flex;gap:6px 12px}
 .navlinks a{font-size:12px}
 .grid{grid-template-columns:minmax(0,1fr)}
 .rightcol{grid-column:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .rightcol .sidecard{min-width:0}
}
@media(max-width:600px){
 .nav{padding:10px 12px;gap:9px;align-items:center}
 .brand{font-size:22px;letter-spacing:-.7px}
 .brand small{font-size:8px;letter-spacing:1.5px}
 .testimonial-menu-link{padding:9px 11px;font-size:12px;min-height:38px}
 .nav>div:last-child{flex:1 1 100%;justify-content:flex-start;gap:7px}
 .nav>div:last-child .btn{flex:1 1 auto;padding:9px 10px;font-size:12px;min-height:40px}
 .navlinks{order:6;flex:1 1 100%;gap:5px 7px;padding-top:3px;border-top:1px solid #edf1f6}
 .navlinks a{font-size:11px;min-height:32px;padding:4px 2px}
 .hero-inner{padding:22px 14px;display:block}
 .hero h1{font-size:clamp(26px,7.4vw,36px);overflow-wrap:anywhere}
 .hero p{font-size:15px;line-height:1.55}
 .hero-inner .btn{max-width:100%;padding:11px 13px;font-size:13px}
 .wrap{padding:0 12px;margin:18px auto}
 .panel{padding:13px;border-radius:12px}
 .rightcol{display:block}
 .rightcol .sidecard{margin-bottom:12px}
 .form-grid{grid-template-columns:minmax(0,1fr)}
 .field.full{grid-column:auto}
 .total{align-items:flex-start;flex-wrap:wrap}
 .total strong{font-size:17px;overflow-wrap:anywhere}
 .cta{display:flex;flex-direction:column;align-items:stretch;padding:16px!important}
 .cta>div:last-child{display:flex;flex-wrap:wrap;gap:8px!important}
 .cta .btn{flex:1 1 120px}
 .footer{padding:20px 12px;font-size:11px}
 .admin-layout{padding:0 10px}
 .admin-head{align-items:stretch}
 .admin-head .btn{width:100%}
 .table-wrap table,.tablewrap table{min-width:620px}
}
@media(max-width:380px){
 .brand{font-size:19px}
 .testimonial-menu-link{font-size:11px;padding:8px 9px}
 .nav>div:last-child .btn{font-size:11px;padding:8px 7px}
 .navlinks{gap:4px 6px}
 .navlinks a{font-size:10px}
 .hero h1{font-size:26px}
}

/* V13: perapian navigasi mobile Android dan tombol halaman pelanggan */
@media (max-width: 700px) {
  .topbar { position: sticky; top: 0; z-index: 50; }
  .nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: initial;
    gap: 10px 12px !important;
    padding: 12px 14px !important;
    width: 100%;
  }
  .nav > .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    justify-self: start;
    font-size: clamp(19px, 5vw, 23px);
    line-height: 1.05;
  }
  .nav > .brand small { font-size: 7px; letter-spacing: 1.35px; }
  .nav > .testimonial-menu-link {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    min-height: 42px;
    padding: 10px 13px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
  .nav > .navlinks {
    grid-column: 1 / -1;
    grid-row: 2;
    order: initial;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px !important;
    padding: 9px 0 0;
    border-top: 1px solid #edf1f6;
    min-width: 0;
  }
  .nav > .navlinks a {
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 8px;
    background: #f3f7fc;
    color: #244365;
    font-size: 11px !important;
    line-height: 1.2;
  }
  .nav > div:last-child,
  .nav > .account-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex !important;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 7px !important;
  }
  .nav > div:last-child .btn,
  .nav > .account-actions .btn {
    flex: 1 1 125px;
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 10px 11px !important;
    font-size: 12px !important;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* Halaman login/registrasi dengan tombol kembali sebagai tautan langsung */
  .nav > a:last-child:not(.testimonial-menu-link) {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    text-align: center;
  }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .hero-actions .btn { flex: 1 1 145px; min-width: 0; }
}
@media (max-width: 420px) {
  .nav { padding: 10px 11px !important; gap: 8px 9px !important; }
  .nav > .brand { font-size: 19px; letter-spacing: -.6px; }
  .nav > .brand small { font-size: 6.5px; letter-spacing: 1.05px; }
  .nav > .testimonial-menu-link { padding: 9px 10px !important; font-size: 11px !important; }
  .nav > div:last-child .btn,
  .nav > .account-actions .btn { flex-basis: 110px; font-size: 11px !important; padding: 9px 8px !important; }
  .nav > .navlinks a { font-size: 10px !important; padding: 7px 8px; }
}

/* V14: konsistensi tombol navigasi mobile untuk semua halaman pelanggan */
@media (max-width: 700px) {
  .nav {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: 9px 10px !important;
    padding: 12px 12px !important;
  }
  .nav > .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0;
    max-width: 100%;
    font-size: clamp(17px, 4.6vw, 21px) !important;
    letter-spacing: -.6px;
  }
  .nav > .brand small {
    font-size: clamp(6px, 1.7vw, 7px) !important;
    letter-spacing: 1px !important;
  }
  .nav > .testimonial-menu-link {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    padding: 8px 10px !important;
    min-height: 38px !important;
    font-size: 11px !important;
    border-radius: 9px;
  }
  .nav > div:last-child,
  .nav > .account-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    align-self: center;
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 145px;
    gap: 5px !important;
  }
  .nav > div:last-child .btn,
  .nav > .account-actions .btn {
    flex: 0 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 7px 8px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    border-radius: 8px !important;
    gap: 4px !important;
    overflow-wrap: anywhere;
  }
  .nav > .navlinks {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100%;
    gap: 5px !important;
    padding-top: 7px !important;
    margin: 0;
  }
  .nav > .navlinks a {
    min-height: 30px !important;
    padding: 5px 7px !important;
    font-size: 10px !important;
    line-height: 1.2;
    border-radius: 7px;
  }
  .nav > a:last-child:not(.testimonial-menu-link) {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100%;
    min-height: 34px;
    padding: 8px 10px;
    font-size: 11px;
  }
  .btn, button, input[type="submit"] {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .hero-actions .btn,
  .cta .btn { min-height: 38px !important; padding: 9px 11px !important; font-size: 12px !important; }
}
@media (max-width: 420px) {
  .nav { grid-template-columns: minmax(0, 1fr) auto !important; }
  .nav > .brand { grid-column: 1 !important; grid-row: 1 !important; }
  .nav > .testimonial-menu-link { grid-column: 2 !important; grid-row: 1 !important; }
  .nav > div:last-child,
  .nav > .account-actions {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    max-width: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start !important;
  }
  .nav > div:last-child .btn,
  .nav > .account-actions .btn {
    flex: 1 1 105px !important;
    width: auto !important;
    min-height: 36px !important;
    font-size: 11px !important;
  }
  .nav > .navlinks { grid-row: 2 !important; }
}

/* V15: final mobile header override — compact, consistent and cache-busted */
@media (max-width: 700px) {
  .topbar { width:100% !important; overflow:visible; }
  .topbar .nav {
    display:flex !important;
    flex-flow:row wrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px 10px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:10px 12px !important;
    margin:0 !important;
  }
  .topbar .nav > .brand {
    order:1 !important;
    flex:0 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:44% !important;
    font-size:clamp(17px,4.7vw,21px) !important;
    line-height:1.02 !important;
    letter-spacing:-.65px !important;
    overflow-wrap:normal !important;
  }
  .topbar .nav > .brand small {
    display:block !important;
    margin-top:3px !important;
    font-size:clamp(6px,1.65vw,7px) !important;
    line-height:1.2 !important;
    letter-spacing:1px !important;
    white-space:normal !important;
  }
  .topbar .nav > .testimonial-menu-link {
    order:2 !important;
    flex:0 0 auto !important;
    width:auto !important;
    max-width:38% !important;
    min-width:0 !important;
    min-height:36px !important;
    padding:8px 10px !important;
    margin:0 !important;
    border-radius:9px !important;
    font-size:clamp(10px,2.8vw,12px) !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
  }
  .topbar .nav > .navlinks { display:none !important; }
  .topbar .nav > .account-actions,
  .topbar .nav > div:last-child {
    order:3 !important;
    flex:1 0 100% !important;
    display:flex !important;
    flex-flow:row wrap !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:7px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }
  .topbar .nav > .account-actions .btn,
  .topbar .nav > div:last-child .btn,
  .topbar .nav > a:not(.brand):not(.testimonial-menu-link) {
    flex:1 1 118px !important;
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:38px !important;
    padding:9px 10px !important;
    margin:0 !important;
    border-radius:9px !important;
    font-size:clamp(11px,2.9vw,12px) !important;
    line-height:1.2 !important;
    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    justify-content:center !important;
  }
  .topbar .nav > a:not(.brand):not(.testimonial-menu-link) {
    order:3 !important;
    flex:1 1 100% !important;
  }
}
@media (max-width: 380px) {
  .topbar .nav { padding:9px 10px !important; gap:7px 8px !important; }
  .topbar .nav > .brand { max-width:43% !important; font-size:18px !important; }
  .topbar .nav > .brand small { font-size:6px !important; letter-spacing:.8px !important; }
  .topbar .nav > .testimonial-menu-link { max-width:40% !important; padding:7px 8px !important; font-size:10px !important; }
  .topbar .nav > .account-actions .btn,
  .topbar .nav > div:last-child .btn { flex-basis:105px !important; font-size:11px !important; }
}


/* V16: header mobile diperkecil sekitar 40% dan dirapikan */
@media (max-width: 700px) {
  .nav {
    padding: 7px 9px !important;
    gap: 6px 7px !important;
  }
  .nav > .brand {
    font-size: clamp(12px, 3.2vw, 14px) !important;
    letter-spacing: -.45px !important;
    line-height: 1.05 !important;
  }
  .nav > .brand small {
    font-size: 5px !important;
    letter-spacing: .7px !important;
    margin-top: 2px;
  }
  .nav > .testimonial-menu-link {
    min-height: 26px !important;
    padding: 5px 7px !important;
    font-size: 7.5px !important;
    line-height: 1.1 !important;
    border-radius: 7px !important;
    gap: 3px !important;
  }
  .nav > .navlinks {
    gap: 4px !important;
    padding-top: 5px !important;
  }
  .nav > .navlinks a {
    min-height: 22px !important;
    padding: 4px 6px !important;
    font-size: 7px !important;
    line-height: 1.1 !important;
    border-radius: 6px !important;
  }
  .nav > div:last-child,
  .nav > .account-actions {
    gap: 4px !important;
  }
  .nav > div:last-child .btn,
  .nav > .account-actions .btn {
    flex: 1 1 82px !important;
    min-height: 26px !important;
    padding: 5px 6px !important;
    font-size: 7.5px !important;
    line-height: 1.15 !important;
    border-radius: 7px !important;
    gap: 3px !important;
  }
  .nav > a:last-child:not(.testimonial-menu-link) {
    min-height: 25px !important;
    padding: 5px 7px !important;
    font-size: 7.5px !important;
    line-height: 1.15 !important;
    border-radius: 7px !important;
  }
}
@media (max-width: 420px) {
  .nav { padding: 6px 7px !important; gap: 5px 6px !important; }
  .nav > .brand { font-size: 12px !important; }
  .nav > .brand small { font-size: 4.5px !important; letter-spacing: .55px !important; }
  .nav > .testimonial-menu-link { font-size: 7px !important; padding: 4px 6px !important; }
  .nav > div:last-child .btn,
  .nav > .account-actions .btn { flex-basis: 72px !important; font-size: 7px !important; padding: 4px 5px !important; }
  .nav > .navlinks a { font-size: 6.5px !important; padding: 4px 5px !important; }
}

/* V17: satukan header desktop dan jadikan header mobile satu baris ringkas */
@media (min-width: 701px) {
  .topbar .nav {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    overflow: visible !important;
  }
  .topbar .nav > .brand { order: 1 !important; flex: 0 0 auto !important; }
  .topbar .nav > .navlinks {
    order: 2 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    min-width: 0 !important;
    gap: clamp(8px, 1.25vw, 18px) !important;
    white-space: nowrap !important;
  }
  .topbar .nav > .testimonial-menu-link {
    order: 3 !important;
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 8px 11px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  .topbar .nav > .account-actions,
  .topbar .nav > div:last-child {
    order: 4 !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }
  .topbar .nav > .account-actions .btn,
  .topbar .nav > div:last-child .btn {
    min-height: 34px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 700px) {
  .topbar { overflow: hidden !important; }
  .topbar .nav {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 7px 8px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topbar .nav::-webkit-scrollbar { display: none !important; }
  .topbar .nav > .brand {
    order: 1 !important;
    flex: 0 0 88px !important;
    width: 88px !important;
    max-width: 88px !important;
    min-width: 88px !important;
    font-size: 15px !important;
    letter-spacing: -.45px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .topbar .nav > .brand small {
    display: block !important;
    font-size: 5px !important;
    letter-spacing: .65px !important;
    line-height: 1.15 !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
  }
  .topbar .nav > .testimonial-menu-link {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    font-size: 9px !important;
    line-height: 1 !important;
    border-radius: 7px !important;
    white-space: nowrap !important;
  }
  .topbar .nav > .navlinks { display: none !important; }
  .topbar .nav > .account-actions,
  .topbar .nav > div:last-child {
    order: 3 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: max-content !important;
    max-width: none !important;
    min-width: 0 !important;
    gap: 5px !important;
    margin: 0 !important;
  }
  .topbar .nav > .account-actions .btn,
  .topbar .nav > div:last-child .btn,
  .topbar .nav > a:not(.brand):not(.testimonial-menu-link) {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    border-radius: 7px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    gap: 3px !important;
  }
  .topbar .nav > a:last-child:not(.testimonial-menu-link) {
    order: 4 !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }
}


/* V19: Header layout correction — desktop actions right-aligned, compact single-row mobile */
@media (min-width: 701px) {
  .topbar .nav {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .topbar .nav > .brand {
    flex: 0 0 auto !important;
    margin-right: auto !important;
  }
  .topbar .nav > .testimonial-menu-link {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  .topbar .nav > .account-actions,
  .topbar .nav > div:last-child {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-left: 0 !important;
  }
  .topbar .nav > .navlinks { display: none !important; }
}

@media (max-width: 700px) {
  .topbar { overflow: hidden !important; }
  .topbar .nav {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 5px 6px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topbar .nav::-webkit-scrollbar { display: none !important; }
  .topbar .nav > .brand {
    order: 1 !important;
    flex: 0 0 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: -.35px !important;
    white-space: nowrap !important;
  }
  .topbar .nav > .brand small {
    display: block !important;
    margin-top: 1px !important;
    font-size: 4px !important;
    line-height: 1.1 !important;
    letter-spacing: .35px !important;
    white-space: nowrap !important;
  }
  .topbar .nav > .testimonial-menu-link {
    order: 2 !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 21px !important;
    padding: 4px 5px !important;
    margin: 0 !important;
    border-radius: 5px !important;
    font-size: 6px !important;
    line-height: 1 !important;
    gap: 2px !important;
    white-space: nowrap !important;
  }
  .topbar .nav > .navlinks { display: none !important; }
  .topbar .nav > .account-actions,
  .topbar .nav > div:last-child {
    order: 3 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: max-content !important;
    max-width: none !important;
    min-width: 0 !important;
    gap: 3px !important;
    margin: 0 !important;
  }
  .topbar .nav > .account-actions .btn,
  .topbar .nav > div:last-child .btn,
  .topbar .nav > a:not(.brand):not(.testimonial-menu-link) {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 21px !important;
    padding: 4px 5px !important;
    margin: 0 !important;
    border-radius: 5px !important;
    font-size: 6px !important;
    line-height: 1 !important;
    gap: 2px !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    justify-content: center !important;
  }
  .topbar .nav > a:last-child:not(.testimonial-menu-link) {
    order: 4 !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }
}

/* V20: right-aligned compact navigation across desktop and mobile */
@media (min-width: 701px) {
  .topbar .nav {
    justify-content: flex-end !important;
    gap: 8px !important;
  }
  .topbar .nav > .brand { margin-right: auto !important; }
  .topbar .nav > .testimonial-menu-link { margin-left: auto !important; }
  .topbar .nav > .account-actions,
  .topbar .nav > div:last-child {
    margin-left: 0 !important;
    justify-content: flex-end !important;
  }
}
@media (max-width: 700px) {
  .topbar .nav {
    justify-content: flex-end !important;
    gap: 3px !important;
  }
  .topbar .nav > .brand { flex-basis: 60px !important; width:60px!important; min-width:60px!important; max-width:60px!important; }
  .topbar .nav > .testimonial-menu-link,
  .topbar .nav > .account-actions .btn,
  .topbar .nav > div:last-child .btn,
  .topbar .nav > a:not(.brand):not(.testimonial-menu-link) {
    font-size: 6px !important;
    padding: 3px 4px !important;
    min-height: 19px !important;
    border-radius: 4px !important;
    gap: 1px !important;
  }
  .topbar .nav > .testimonial-menu-link { margin-left:auto!important; }
}

/* Keep testimonial page navigation in one compact row, aligned to the right */
.test-nav-actions {
  display:flex !important;
  flex-flow:row nowrap !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 0 24px auto !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.test-nav-actions::-webkit-scrollbar { display:none !important; }
.test-nav-actions .test-nav-btn,
.test-nav-actions .testimonial-menu-link {
  flex:0 0 auto !important;
  min-width:0 !important;
  min-height:30px !important;
  padding:6px 10px !important;
  margin:0 !important;
  font-size:11px !important;
  line-height:1.1 !important;
  border-radius:7px !important;
  white-space:nowrap !important;
}
@media (max-width:640px) {
  .test-wrap { padding-left:10px !important; padding-right:10px !important; }
  .test-nav-actions { justify-content:flex-end !important; gap:4px !important; }
  .test-nav-actions .test-nav-btn,
  .test-nav-actions .testimonial-menu-link {
    min-height:24px !important;
    padding:4px 6px !important;
    font-size:8px !important;
    border-radius:5px !important;
    gap:2px !important;
  }
}

/* V23: keep the logo separate and group every public header button on the right */
.topbar .nav {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:nowrap !important;
  gap:12px !important;
  min-width:0 !important;
}
.topbar .nav > .brand {
  flex:0 0 auto !important;
  margin:0 auto 0 0 !important;
  width:auto !important;
  max-width:none !important;
}
.topbar .nav > .header-actions,
.topbar .nav > .account-actions {
  display:flex !important;
  flex:0 1 auto !important;
  flex-flow:row nowrap !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:7px !important;
  min-width:0 !important;
  max-width:calc(100% - 130px) !important;
  margin:0 0 0 auto !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  white-space:nowrap !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.topbar .nav > .header-actions::-webkit-scrollbar,
.topbar .nav > .account-actions::-webkit-scrollbar { display:none !important; }
.topbar .nav > .header-actions .btn,
.topbar .nav > .account-actions .btn {
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  min-height:34px !important;
  padding:7px 10px !important;
  margin:0 !important;
  font-size:11px !important;
  line-height:1.1 !important;
  border-radius:7px !important;
  white-space:nowrap !important;
}
.topbar .nav .cara-order-menu { order:1 !important; }
.topbar .nav .testimonial-menu-link { order:2 !important; margin:0 !important; }
@media (min-width:701px) {
  .topbar .nav { padding:12px 22px !important; }
  .topbar .nav > .header-actions,
  .topbar .nav > .account-actions { max-width:calc(100% - 180px) !important; gap:8px !important; }
  .topbar .nav > .header-actions .btn,
  .topbar .nav > .account-actions .btn { min-height:36px !important; padding:8px 12px !important; font-size:12px !important; }
}
@media (max-width:700px) {
  .topbar .nav { padding:7px 9px !important; gap:7px !important; }
  .topbar .nav > .brand { flex:0 0 78px !important; width:78px !important; max-width:78px !important; font-size:18px !important; letter-spacing:-.6px !important; line-height:1 !important; }
  .topbar .nav > .brand small { font-size:5.5px !important; letter-spacing:.65px !important; line-height:1.2 !important; }
  .topbar .nav > .header-actions,
  .topbar .nav > .account-actions { max-width:calc(100% - 85px) !important; gap:4px !important; }
  .topbar .nav > .header-actions .btn,
  .topbar .nav > .account-actions .btn { min-height:24px !important; padding:4px 6px !important; font-size:8px !important; border-radius:5px !important; gap:2px !important; }
}