:root{
    --bg: #FBF8F1;
    --surface: #FFFFFF;
    --surface-sunken: #F3EFE4;
    --ink: #24241C;
    --ink-soft: #6E6C5E;
    --forest: #1F3625;
    --forest-deep: #142519;
    --blush: #C97B84;
    --blush-deep: #A8535F;
    --gold: #AD8A45;
    --gold-soft: #E7D9B3;
    --sage: #8FA383;
    --line: #E3DECE;
    --radius: 3px;
    --shadow: 0 10px 30px -18px rgba(20,37,25,0.35);
    font-size: 16px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
  }
  h1,h2,h3,h4{
    font-family:'Fraunces',serif;
    font-weight:600;
    color:var(--forest-deep);
    margin:0 0 .4em;
    letter-spacing:-0.01em;
  }
  .mono{font-family:'IBM Plex Mono',monospace;}
  a{color:inherit;}
  button{font-family:inherit;cursor:pointer;}
  :focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

  /* Override warna biru bawaan browser (focus ring, checkbox/radio, dsb) */
  html{accent-color:var(--forest);}
  input,select,textarea,button{accent-color:var(--forest);}
  input:focus,select:focus,textarea:focus{
    outline:2px solid var(--forest);
    outline-offset:1px;
    box-shadow:none;
  }
  input[type="date"]::-webkit-calendar-picker-indicator{
    filter:invert(20%) sepia(15%) saturate(1200%) hue-rotate(75deg) brightness(85%);
  }
  img.ph{width:100%;display:block;background:
    repeating-linear-gradient(135deg,#EFE9D8,#EFE9D8 10px,#E6DFC9 10px,#E6DFC9 20px);
    aspect-ratio:1/1;border-radius:2px;}

  /* ===== Layout shell ===== */
  .topbar{
    position:sticky;top:0;z-index:40;
    background:var(--forest);
    color:#F2EEE0;
  }
  .topbar-inner{
    max-width:1180px;margin:0 auto;padding:0 24px;
    display:flex;align-items:center;gap:28px;height:68px;
  }
  .brand{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-size:1.15rem;font-weight:600;white-space:nowrap;color:#fff;}
  .brand .mark{width:30px;height:30px;flex:none;}
  nav.mainnav{display:flex;gap:2px;flex:1;}
  nav.mainnav button{
    background:transparent;border:none;color:#D9D4BF;
    padding:10px 14px;font-size:.88rem;letter-spacing:.02em;
    border-radius:20px;transition:background .15s, color .15s;
  }
  nav.mainnav button:hover{color:#fff;}
  nav.mainnav button.active{background:rgba(255,255,255,.12);color:#fff;}
  .topbar-right{display:flex;align-items:center;gap:14px;}
  .cart-pill{
    display:flex;align-items:center;gap:6px;background:var(--blush);
    color:#fff;padding:8px 14px;border-radius:20px;border:none;font-size:.85rem;font-weight:600;
  }
  .role-toggle{display:flex;background:rgba(255,255,255,.08);border-radius:20px;padding:3px;}
  .role-toggle button{padding:6px 12px;font-size:.78rem;border-radius:16px;color:#C9C4AE;background:none;border:none;}
  .role-toggle button.active{background:var(--gold);color:#1B1B14;}

  main{max-width:1180px;margin:0 auto;padding:40px 24px 90px;}
  .view{display:none;animation:fade .35s ease;}
  .view.active{display:block;}
  @keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

  .eyebrow{
    font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--gold);margin-bottom:10px;display:block;
  }

  /* ===== Hero ===== */
  .hero{
    background:var(--forest);
    color:#F2EEE0;
    border-radius:6px;
    padding:56px 48px;
    display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
    position:relative;overflow:hidden;
    margin-bottom:48px;
  }
  .hero::after{
    content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;
    border:1px solid rgba(255,255,255,.12);border-radius:50%;
  }
  .hero::before{
    content:"";position:absolute;right:20px;bottom:-80px;width:180px;height:180px;
    border:1px solid rgba(255,255,255,.09);border-radius:50%;
  }
  .hero h1{color:#fff;font-size:2.5rem;line-height:1.08;max-width:11ch;font-weight:500;}
  .hero p{color:#C9C4AE;max-width:38ch;margin:16px 0 26px;}
  .btn{
    display:inline-flex;align-items:center;gap:8px;border:none;border-radius:24px;
    padding:13px 26px;font-size:.9rem;font-weight:600;letter-spacing:.01em;transition:transform .15s, background .15s;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:var(--blush);color:#fff;}
  .btn-primary:hover{background:var(--blush-deep);}
  .btn-gold{background:var(--gold);color:#1B1B14;}
  .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;}
  .btn-outline{background:transparent;border:1px solid var(--line);color:var(--ink);}
  .btn-outline:hover{border-color:var(--forest);}
  .btn-dark{background:var(--forest-deep);color:#fff;width:100%;justify-content:center;}
  .btn-dark:hover{background:var(--forest);}
  .btn-block{width:100%;justify-content:center;}

  .hero-visual{
    aspect-ratio:4/3;border-radius:4px;
    background:
      radial-gradient(circle at 30% 30%, rgba(201,123,132,.5), transparent 55%),
      radial-gradient(circle at 70% 65%, rgba(173,138,69,.45), transparent 55%),
      #2A4432;
    position:relative;
  }
  .hero-visual .seal{position:absolute;bottom:18px;left:18px;}

  /* stamp / seal signature element */
  .seal{
    width:76px;height:76px;border-radius:50%;
    border:1.5px dashed var(--gold);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:var(--forest-deep);color:var(--gold-soft);
    font-family:'IBM Plex Mono',monospace;text-align:center;flex:none;
  }
  .seal .n{font-size:1.05rem;font-weight:600;line-height:1;color:#fff;}
  .seal .l{font-size:.52rem;letter-spacing:.06em;text-transform:uppercase;margin-top:2px;}
  .seal.sm{width:52px;height:52px;}
  .seal.sm .n{font-size:.78rem;}
  .seal.sm .l{font-size:.42rem;}

  /* ===== category / grid ===== */
  .section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;}
  .section-head a{font-size:.82rem;color:var(--blush-deep);font-weight:600;}
  .cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:52px;}
  .cat-card{
    background:var(--surface);border:1px solid var(--line);border-radius:4px;
    padding:26px 16px;text-align:center;transition:border-color .15s, transform .15s;
  }
  .cat-card:hover{border-color:var(--sage);transform:translateY(-2px);}
  .cat-card .ico{font-size:1.6rem;margin-bottom:10px;}
  .cat-card span{font-size:.85rem;font-weight:600;}

  .grid-products{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .pcard{
    background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden;
    display:flex;flex-direction:column;transition:box-shadow .18s, transform .18s;cursor:pointer;
  }
  .pcard:hover{box-shadow:var(--shadow);transform:translateY(-3px);}
  .pcard .body{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column;gap:6px;}
  .pcard .name{font-weight:600;font-size:.92rem;}
  .pcard .price{font-family:'IBM Plex Mono',monospace;color:var(--forest);font-weight:600;font-size:.92rem;}
  .pcard .meta{display:flex;align-items:center;justify-content:space-between;margin-top:auto;}
  .stars{color:var(--gold);font-size:.78rem;}
  .add-btn{
    width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--bg);
    display:flex;align-items:center;justify-content:center;font-size:1rem;
  }
  .add-btn:hover{background:var(--forest);color:#fff;border-color:var(--forest);}

  /* ===== Catalog layout ===== */
  .catalog-layout{display:grid;grid-template-columns:220px 1fr;gap:36px;}
  .filters{border-right:1px solid var(--line);padding-right:24px;}
  .filters h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:12px;}
  .filter-list{list-style:none;padding:0;margin:0 0 28px;}
  .filter-list li{padding:8px 0;font-size:.88rem;border-bottom:1px solid var(--line);cursor:pointer;color:var(--ink-soft);}
  .filter-list li.active{color:var(--forest);font-weight:600;}
  .toolbar{display:flex;gap:12px;margin-bottom:20px;}
  .search-input{
    flex:1;border:1px solid var(--line);border-radius:20px;padding:10px 16px;font-size:.88rem;background:var(--surface);
  }
  .select-sort{border:1px solid var(--line);border-radius:20px;padding:10px 16px;font-size:.85rem;background:var(--surface);}

  /* ===== Product detail ===== */
  .detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:52px;}
  .detail-thumbs{display:flex;gap:10px;margin-top:10px;}
  .detail-thumbs img{width:64px;height:64px;border-radius:3px;}
  .price-lg{font-family:'IBM Plex Mono',monospace;font-size:1.6rem;color:var(--forest);font-weight:600;margin:8px 0 14px;}
  .qty-row{display:flex;align-items:center;gap:14px;margin:22px 0;}
  .qty-box{display:flex;align-items:center;border:1px solid var(--line);border-radius:20px;overflow:hidden;}
  .qty-box button{width:36px;height:36px;background:var(--bg);border:none;font-size:1rem;}
  .qty-box span{width:36px;text-align:center;font-family:'IBM Plex Mono',monospace;}
  .cashback-strip{
    display:flex;align-items:center;gap:14px;background:var(--surface-sunken);
    border:1px dashed var(--gold);border-radius:4px;padding:14px 16px;margin-top:22px;
  }
  .cashback-strip p{margin:0;font-size:.85rem;}
  .cashback-strip b{display:block;font-family:'Fraunces',serif;color:var(--forest-deep);font-size:1rem;}
  .stock{color:var(--sage);font-size:.8rem;font-weight:600;margin-bottom:6px;display:block;}

  /* ===== Cart ===== */
  .cart-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start;}
  table{width:100%;border-collapse:collapse;}
  .cart-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);padding:0 0 10px;border-bottom:1px solid var(--line);}
  .cart-table td{padding:16px 0;border-bottom:1px solid var(--line);vertical-align:middle;}
  .cart-item{display:flex;gap:12px;align-items:center;}
  .cart-item img{width:56px;height:56px;border-radius:3px;flex:none;}
  .remove-btn{background:none;border:none;color:var(--blush-deep);font-size:.78rem;font-weight:600;}
  .summary-card{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:24px;}
  .summary-row{display:flex;justify-content:space-between;font-size:.88rem;padding:8px 0;color:var(--ink-soft);}
  .summary-row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-weight:700;color:var(--ink);font-size:1rem;}
  .summary-row.total .mono{color:var(--forest);}

  /* ===== Checkout ===== */
  .steps{display:flex;justify-content:center;gap:0;margin-bottom:44px;}
  .step{display:flex;flex-direction:column;align-items:center;position:relative;flex:1;max-width:160px;}
  .step .dot{
    width:34px;height:34px;border-radius:50%;background:var(--surface);border:1.5px solid var(--line);
    display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:.8rem;color:var(--ink-soft);z-index:1;
  }
  .step.done .dot{background:var(--forest);border-color:var(--forest);color:#fff;}
  .step.current .dot{background:var(--gold);border-color:var(--gold);color:#1B1B14;}
  .step span.lbl{font-size:.75rem;margin-top:8px;color:var(--ink-soft);}
  .step.current span.lbl, .step.done span.lbl{color:var(--ink);font-weight:600;}
  .step::before{content:"";position:absolute;top:17px;left:-50%;width:100%;height:1px;background:var(--line);z-index:0;}
  .step:first-child::before{display:none;}
  .step.done::before{background:var(--forest);}

  .form-card{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:30px;max-width:560px;margin:0 auto;}
  .field{margin-bottom:16px;}
  .field label{display:block;font-size:.8rem;font-weight:600;margin-bottom:6px;}
  .field input, .field select, .field textarea{
    width:100%;border:1px solid var(--line);border-radius:3px;padding:10px 12px;font-size:.9rem;font-family:inherit;background:var(--bg);
  }
  .pay-options{display:grid;gap:10px;}
  .pay-opt{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:3px;padding:12px 14px;font-size:.88rem;cursor:pointer;}
  .pay-opt.selected{border-color:var(--forest);background:var(--surface-sunken);}
  .confirm-box{max-width:480px;margin:0 auto;text-align:center;}
  .check-badge{
    width:64px;height:64px;border-radius:50%;background:var(--forest);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 18px;
  }
  .receipt{
    text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:4px;
    padding:22px 24px;margin:26px 0;
  }
  .receipt-row{display:flex;justify-content:space-between;font-size:.86rem;padding:6px 0;border-bottom:1px dashed var(--line);}
  .receipt-row:last-child{border-bottom:none;}
  .points-earned{
    display:flex;align-items:center;gap:14px;background:var(--forest-deep);color:#fff;border-radius:4px;padding:16px 18px;margin-top:18px;
  }
  .points-earned p{margin:0;font-size:.84rem;color:#D9D4BF;}
  .points-earned b{font-family:'Fraunces',serif;font-size:1.05rem;color:#fff;}

  /* ===== Member points page ===== */
  .member-layout{display:grid;grid-template-columns:220px 1fr;gap:36px;}
  .member-nav{display:flex;flex-direction:column;gap:2px;}
  .member-nav button{
    text-align:left;background:none;border:none;padding:10px 12px;border-radius:3px;font-size:.86rem;color:var(--ink-soft);
  }
  .member-nav button.active{background:var(--forest);color:#fff;font-weight:600;}
  .points-hero{
    display:flex;align-items:center;gap:20px;background:var(--surface);border:1px solid var(--line);
    border-radius:4px;padding:24px;margin-bottom:26px;
  }
  .points-hero .total-n{font-family:'Fraunces',serif;font-size:2.1rem;color:var(--forest-deep);}
  .history-table th{text-align:left;font-size:.72rem;text-transform:uppercase;color:var(--ink-soft);padding-bottom:10px;border-bottom:1px solid var(--line);}
  .history-table td{padding:12px 0;border-bottom:1px solid var(--line);font-size:.87rem;}
  .plus{color:var(--sage);font-weight:600;font-family:'IBM Plex Mono',monospace;}

  /* ===== Admin dashboard ===== */
  .admin-shell{display:grid;grid-template-columns:210px 1fr;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;}
  .admin-side{background:var(--forest-deep);color:#D9D4BF;padding:24px 14px;}
  .admin-side .abrand{font-family:'Fraunces',serif;color:#fff;font-size:1rem;margin-bottom:26px;padding:0 10px;}
  .admin-side button{
    display:block;width:100%;text-align:left;background:none;border:none;color:#B9B5A2;
    padding:10px 12px;font-size:.85rem;border-radius:3px;margin-bottom:2px;
  }
  .admin-side button.active{background:rgba(255,255,255,.09);color:#fff;font-weight:600;}
  .admin-main{padding:28px 30px;}
  .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;}
  .stat-card{border:1px solid var(--line);border-radius:4px;padding:18px;}
  .stat-card .lbl{font-size:.74rem;color:var(--ink-soft);margin-bottom:8px;}
  .stat-card .val{font-family:'Fraunces',serif;font-size:1.6rem;color:var(--forest-deep);}
  .admin-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;}
  .chart-card{border:1px solid var(--line);border-radius:4px;padding:20px;}
  .bars{display:flex;align-items:flex-end;gap:8px;height:150px;margin-top:16px;}
  .bar{flex:1;background:linear-gradient(180deg,var(--sage),var(--forest));border-radius:3px 3px 0 0;position:relative;}
  .bar span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:.66rem;color:var(--ink-soft);}
  .admin-table th{text-align:left;font-size:.7rem;text-transform:uppercase;color:var(--ink-soft);padding-bottom:8px;border-bottom:1px solid var(--line);}
  .admin-table td{padding:10px 0;border-bottom:1px solid var(--line);font-size:.82rem;}
  .badge{padding:3px 10px;border-radius:12px;font-size:.7rem;font-weight:600;}
  .badge.selesai{background:#E4EEDF;color:#3B5C33;}
  .badge.proses{background:var(--gold-soft);color:#6B531F;}

  footer{border-top:1px solid var(--line);padding:30px 24px;text-align:center;font-size:.78rem;color:var(--ink-soft);}

  @media(max-width:860px){
    .hero{grid-template-columns:1fr;padding:36px 24px;}
    .cats{grid-template-columns:repeat(2,1fr);}
    .grid-products{grid-template-columns:repeat(2,1fr);}
    .catalog-layout,.cart-layout,.detail-layout,.member-layout,.admin-shell{grid-template-columns:1fr;}
    .filters{border-right:none;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:20px;}
    nav.mainnav{display:none;}
  }

/* ===== Tambahan: Auth pages, alerts, admin form ===== */
.auth-wrap{max-width:420px;margin:40px auto;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:36px;}
.auth-wrap h2{text-align:center;}
.auth-wrap p.sub{text-align:center;color:var(--ink-soft);font-size:.86rem;margin-bottom:24px;}
.auth-switch{text-align:center;margin-top:16px;font-size:.85rem;color:var(--ink-soft);}
.auth-switch a{color:var(--blush-deep);font-weight:600;text-decoration:none;}
.alert{padding:12px 16px;border-radius:4px;font-size:.86rem;margin-bottom:18px;}
.alert-error{background:#FBE7E7;color:#A13C3C;border:1px solid #F0C4C4;}
.alert-success{background:#E4EEDF;color:#3B5C33;border:1px solid #C7DDBC;}
.empty-state{padding:40px 0;text-align:center;color:var(--ink-soft);}
.admin-form{max-width:640px;}
.admin-form .field{margin-bottom:16px;}
.admin-actions{display:flex;gap:10px;margin-top:20px;}
.icon-btn{background:none;border:1px solid var(--line);border-radius:3px;padding:6px 10px;font-size:.78rem;color:var(--ink);}
.icon-btn.danger{color:var(--blush-deep);border-color:var(--blush-deep);}
.icon-btn:hover{background:var(--surface-sunken);}
table.admin-table img{width:36px;height:36px;border-radius:3px;object-fit:cover;vertical-align:middle;margin-right:8px;}
.pagination{display:flex;gap:6px;margin-top:20px;}
.pagination a, .pagination span{padding:6px 12px;border:1px solid var(--line);border-radius:4px;font-size:.82rem;text-decoration:none;color:var(--ink);}
.pagination a.active, .pagination span.active{background:var(--forest);color:#fff;border-color:var(--forest);}
.top-userbox{display:flex;align-items:center;gap:10px;font-size:.82rem;color:#D9D4BF;}
.top-userbox a{color:#fff;text-decoration:underline;}
img.prodimg{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;display:block;background:#EFE9D8;}

/* ===== Metode Pembayaran (checkout) ===== */
.channel-opt{display:flex;align-items:center;justify-content:space-between;}
.pm-tab{white-space:nowrap;}

/* ===== Tombol salin nomor pembayaran ===== */
.copy-row{display:flex;align-items:center;gap:8px;}
.copy-btn{background:var(--forest);color:#fff;border:none;border-radius:3px;padding:3px 10px;font-size:.72rem;cursor:pointer;font-family:'Inter',sans-serif;}
.copy-btn:hover{opacity:.85;}