/* ============================================
   CERTOLEGAL — MAIN STYLESHEET
   Font: Plus Jakarta Sans (heading), Manrope (body), IBM Plex Mono (data/utility)
   ============================================ */

:root{
  --icon-check: url("/img/icon-checkmark-only.png");
  --teal-900:#0C2E2C; --teal-700:#124A45; --teal-500:#1B6E64; --teal-300:#5FA79A; --teal-100:#E4F0EC;
  --amber-600:#B8862F; --amber-500:#D2A24C; --amber-100:#FBF1DE;
  --paper:#F8F6F1; --panel:#FFFFFF; --line:#E4E0D6;
  --ink-900:#16211E; --ink-600:#4A5652; --ink-400:#8B968F;
  --red-600:#B4442E; --red-100:#FBEAE5;
  --green-600:#2F7D4F; --green-100:#E7F4EC;
  --radius-m:14px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;font-family:'Manrope',sans-serif;background:var(--paper);color:var(--ink-900);}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}

/* ===== Logo wordmark dengan huruf O terintegrasi ===== */
.o-badge{display:inline-flex;align-items:center;justify-content:center;position:relative;width:0.78em;height:0.78em;vertical-align:0.1em;margin:0 0.02em;}
.o-badge .o-ring{position:absolute;inset:0;border-radius:50%;border:0.1em solid currentColor;}
.o-badge .o-icon{width:78%;height:78%;background-color:currentColor;-webkit-mask-image:url("/img/icon-checkmark-only.png");mask-image:url("/img/icon-checkmark-only.png");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;}
.wordmark{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;letter-spacing:-0.01em;}
.tagline{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.04em;color:var(--amber-600);margin-left:2px;}

/* ===== Placeholder ilustrasi ===== */
.img-placeholder{border:2px dashed var(--teal-300);border-radius:var(--radius-m);background:var(--teal-100);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--teal-700);text-align:center;padding:20px;}
.img-placeholder .ph-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;}
.img-placeholder .ph-sub{font-size:11px;color:var(--teal-500);max-width:220px;}

/* ===== Ilustrasi konten (Hero, Cara Kerja, Detail Layanan) =====
   Aturan tunggal untuk semua ilustrasi: object-fit:cover + object-position:center.
   Rasio ditentukan HANYA oleh aspect-ratio per komponen (tanpa breakpoint) —
   supaya kontainer mengecil/meluas mengikuti lebar layar secara kontinu/matematis,
   dan pemotongan tepi (kalau terjadi) selalu simetris dari tengah, bukan meloncat
   antar 2 rasio berbeda saat layar di-resize melewati breakpoint. */
.hero-illustration img,
.cara-kerja-illustration img,
.detail-illustration img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.hero-illustration picture{width:100%;height:100%;display:block;}

/* ===== NAV ===== */
header.site{position:sticky;top:0;z-index:20;background:rgba(248,246,241,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;}
.nav-logo{display:flex;align-items:center;gap:6px;}
.nav-logo .wordmark{font-size:19px;color:var(--teal-900);}
.nav-links{display:flex;align-items:center;gap:28px;font-size:13.5px;font-weight:700;color:var(--ink-600);}
.nav-links a:hover{color:var(--teal-900);}
.nav-right{display:flex;align-items:center;gap:14px;}
.lang-switch{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;}
.lang-switch span{padding:6px 11px;cursor:pointer;color:var(--ink-400);}
.lang-switch span.on{background:var(--teal-900);color:#fff;}
.btn{font-size:13px;font-weight:700;padding:10px 18px;border-radius:8px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.btn-primary{background:var(--teal-900);color:#fff;}
.btn-ghost{background:transparent;color:var(--teal-900);border:1.5px solid var(--teal-900);}
.btn-sm{padding:7px 14px;font-size:12px;}
@media (max-width:900px){ .nav-links{display:none;} }

/* ===== HERO ===== */
.hero{padding:72px 0 60px;position:relative;overflow:hidden;}
.hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 85% 15%, var(--teal-100) 0%, transparent 45%);z-index:-1;}
.hero .wrap{display:grid;grid-template-columns:1.15fr 0.85fr;gap:40px;align-items:center;}
.hero-illustration{aspect-ratio:4/5;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--amber-600);background:var(--amber-100);border:1px solid var(--amber-500);padding:7px 14px;border-radius:999px;margin-bottom:24px;}
.hero h1{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(32px,5vw,50px);line-height:1.08;letter-spacing:-0.02em;color:var(--teal-900);margin:0 0 20px;}
.hero h1 em{font-style:normal;color:var(--amber-600);}
.hero p.lead{font-size:17px;color:var(--ink-600);max-width:540px;margin:0 0 32px;}
.hero-btns{display:flex;gap:14px;margin-bottom:48px;flex-wrap:wrap;}
.hero-stats{display:flex;gap:44px;padding-top:28px;border-top:1px solid var(--line);max-width:600px;flex-wrap:wrap;}
.hero-stat b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:24px;font-weight:800;color:var(--teal-900);}
.hero-stat span{font-size:11.5px;color:var(--ink-400);letter-spacing:.03em;}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;}
  .hero-illustration{order:-1;}
  /* Rasio landscape ini HANYA aktif kalau admin sudah upload gambar Hero
     versi mobile (lihat class has-mobile-variant di home.ejs). Selama belum
     diupload, hero-illustration tetap pakai aspect-ratio:4/5 di atas —
     jadi tidak ada perubahan tampilan sebelum gambar baru siap. */
  .hero-illustration.has-mobile-variant{ aspect-ratio: 2/1; }
}

/* ===== SECTION SHELL ===== */
section.block{padding:56px 0;}
section.block.alt{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.block-head{margin-bottom:34px;}
.block-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--amber-600);letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px;}
.block-head h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:28px;font-weight:800;letter-spacing:-0.01em;color:var(--teal-900);margin:0 0 8px;}
.block-head p{font-size:14.5px;color:var(--ink-600);max-width:520px;margin:0;}

/* ===== KATEGORI ===== */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.cat-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-m);padding:24px 22px;transition:.15s;}
.cat-card:hover{border-color:var(--teal-500);}
.cat-icon{width:42px;height:42px;border-radius:11px;background:var(--teal-100);display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:19px;}
.cat-card h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:15.5px;font-weight:700;color:var(--teal-900);margin:0 0 6px;}
.cat-card p{font-size:12.5px;color:var(--ink-600);margin:0 0 14px;}
.cat-card .cat-link{font-size:12px;font-weight:700;color:var(--teal-500);}
@media (max-width:900px){ .cat-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .cat-grid{grid-template-columns:1fr;} }

/* ===== USP ===== */
.usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.usp-card{background:var(--teal-900);border-radius:var(--radius-m);padding:28px 24px;color:#fff;}
.usp-card .usp-icon{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:17px;}
.usp-card h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:700;margin:0 0 10px;}
.usp-card p{font-size:13px;color:var(--teal-100);margin:0;line-height:1.6;}
.usp-card.amber{background:var(--amber-500);color:var(--teal-900);}
.usp-card.amber p{color:var(--teal-700);}
.usp-card.amber .usp-icon{background:rgba(12,46,44,.12);}
@media (max-width:900px){ .usp-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .usp-grid{grid-template-columns:1fr;} }

/* ===== CARA KERJA ===== */
.steps-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.cara-kerja-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:32px;align-items:center;}
.cara-kerja-illustration{aspect-ratio:1/1;}
.step-card{position:relative;padding:22px 18px 18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-m);}
.step-num{font-family:'Plus Jakarta Sans',sans-serif;font-size:26px;font-weight:800;color:var(--teal-100);margin-bottom:10px;}
.step-card h4{font-size:13.5px;font-weight:700;color:var(--teal-900);margin:0 0 6px;}
.step-card p{font-size:12px;color:var(--ink-600);margin:0;}
@media (max-width:900px){
  .cara-kerja-grid{grid-template-columns:1fr;}
}

/* ===== TESTIMONI ===== */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.testi-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-m);padding:22px;}
.testi-stars{color:var(--amber-500);font-size:13px;margin-bottom:12px;}
.testi-card p{font-size:13px;color:var(--ink-600);line-height:1.6;margin:0 0 16px;}
.testi-person{display:flex;align-items:center;gap:10px;}
.testi-avatar{width:32px;height:32px;border-radius:50%;background:var(--teal-100);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:var(--teal-700);}
.testi-name{font-size:12.5px;font-weight:700;color:var(--teal-900);}
.testi-role{font-size:11px;color:var(--ink-400);}
@media (max-width:900px){ .testi-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .testi-grid{grid-template-columns:1fr;} }

/* ===== BLOG PREVIEW ===== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.blog-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;}
.blog-thumb{height:110px;}
.blog-body{padding:18px;}
.blog-tag{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--amber-600);text-transform:uppercase;letter-spacing:.05em;}
.blog-body h4{font-size:13.5px;font-weight:700;color:var(--teal-900);margin:8px 0 0;line-height:1.4;}
@media (max-width:900px){ .blog-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .blog-grid{grid-template-columns:1fr;} }

/* ===== FOOTER ===== */
footer.site{background:var(--teal-900);color:var(--teal-100);padding:52px 0 30px;margin-top:20px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px;}
.footer-col h5{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--teal-300);margin:0 0 14px;}
.footer-col a{display:block;font-size:13px;color:var(--teal-100);margin-bottom:10px;}
.footer-brand p{font-size:12.5px;color:var(--teal-300);max-width:280px;line-height:1.6;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;font-size:11.5px;color:var(--teal-300);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} }

/* ===== AI WIDGET ===== */
.ai-widget{position:fixed;bottom:24px;right:24px;background:var(--teal-900);color:#fff;border-radius:999px;padding:14px 20px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;box-shadow:0 8px 24px rgba(12,46,44,.25);cursor:pointer;z-index:30;}
.ai-dot{width:8px;height:8px;border-radius:50%;background:var(--amber-500);}

/* ===== BREADCRUMB ===== */
.breadcrumb{font-size:12.5px;color:var(--ink-400);padding:20px 0 0;}
.breadcrumb a{color:var(--ink-400);}
.breadcrumb a:hover{color:var(--teal-900);}
.breadcrumb span.current{color:var(--teal-900);font-weight:600;}

/* ===== HALAMAN KATEGORI ===== */
.cat-page-header{padding:16px 0 28px;}
.cat-page-header h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:28px;font-weight:800;color:var(--teal-900);margin:0 0 8px;letter-spacing:-0.01em;}
.cat-page-header p{font-size:14.5px;color:var(--ink-600);margin:0;max-width:480px;}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-bottom:40px;}
.svc-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-m);padding:20px;display:block;}
.svc-card h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;color:var(--teal-900);margin:0 0 8px;}
.svc-card p{font-size:12.5px;color:var(--ink-600);margin:0 0 14px;line-height:1.5;}
.svc-meta{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--line);}
.svc-price{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:14px;color:var(--teal-900);}
.svc-price span{display:block;font-family:'Manrope',sans-serif;font-weight:500;font-size:10px;color:var(--ink-400);}
.svc-link{font-size:12px;font-weight:700;color:var(--teal-500);}
@media (max-width:560px){ .svc-grid{grid-template-columns:1fr;} }

/* ===== HALAMAN DETAIL LAYANAN ===== */
.detail-header{padding:20px 0 28px;}
.detail-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--amber-600);text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px;}
.detail-header h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:30px;font-weight:800;color:var(--teal-900);margin:0 0 14px;letter-spacing:-0.01em;line-height:1.15;}
.detail-header p.lead{font-size:15px;color:var(--ink-600);margin:0 0 22px;max-width:520px;}
.badge-row{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap;}
.info-badge{background:var(--teal-100);color:var(--teal-900);font-size:12px;font-weight:700;padding:8px 14px;border-radius:999px;display:flex;align-items:center;gap:6px;}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;}

.detail-illustration{aspect-ratio:8/3;margin-bottom:10px;}

.dsection{padding:30px 0;border-top:1px solid var(--line);}
.dsection h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:800;color:var(--teal-900);margin:0 0 14px;}
.dsection p{font-size:14px;color:var(--ink-600);line-height:1.7;margin:0 0 10px;}

.checklist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;}
.checklist li{font-size:13px;color:var(--ink-900);display:flex;gap:8px;align-items:flex-start;}
.checklist li::before{content:"";width:16px;height:16px;flex-shrink:0;margin-top:2px;background-color:var(--teal-500);-webkit-mask-image:url("/img/icon-checkmark-only.png");mask-image:url("/img/icon-checkmark-only.png");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
@media (max-width:560px){ .checklist{grid-template-columns:1fr;} }

.steps{counter-reset:step;display:flex;flex-direction:column;gap:0;}
.step{display:flex;gap:16px;padding-bottom:22px;position:relative;}
.step:not(:last-child)::before{content:"";position:absolute;left:15px;top:34px;bottom:0;width:1.5px;background:var(--line);}
.step-icon{counter-increment:step;width:32px;height:32px;border-radius:50%;background:var(--teal-900);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:13px;flex-shrink:0;}
.step-icon::before{content:counter(step);}
.step-body h4{font-size:13.5px;font-weight:700;color:var(--teal-900);margin:4px 0 4px;}
.step-body p{font-size:12.5px;color:var(--ink-600);margin:0;}

.price-table{width:100%;border-collapse:collapse;font-size:13px;}
.price-table th{text-align:left;padding:10px 12px;background:var(--teal-100);color:var(--teal-900);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;}
.price-table td{padding:12px 12px;border-bottom:1px solid var(--line);}
.price-table .tier-name{font-weight:700;color:var(--teal-900);}
.price-table .tier-price{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;color:var(--amber-600);text-align:right;}
.price-note{font-size:11px;color:var(--ink-400);margin-top:10px;}

.benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.benefit-item{background:var(--teal-100);border-radius:10px;padding:16px;}
.benefit-item h4{font-size:13px;font-weight:700;color:var(--teal-900);margin:0 0 4px;}
.benefit-item p{font-size:11.5px;color:var(--teal-700);margin:0;}
@media (max-width:560px){ .benefit-grid{grid-template-columns:1fr;} }

.faq-item{border-bottom:1px solid var(--line);padding:16px 0;}
.faq-item:first-child{padding-top:0;}
.faq-item h4{font-size:13.5px;font-weight:700;color:var(--teal-900);margin:0 0 6px;}
.faq-item p{font-size:12.5px;color:var(--ink-600);margin:0;line-height:1.6;}

.related-row{display:flex;gap:10px;flex-wrap:wrap;}
.related-chip{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:12.5px;font-weight:600;color:var(--teal-900);}

.cta-final{background:var(--teal-900);border-radius:var(--radius-m);padding:32px 26px;text-align:center;margin:30px 0 50px;}
.cta-final h3{font-family:'Plus Jakarta Sans',sans-serif;color:#fff;font-size:19px;font-weight:800;margin:0 0 8px;}
.cta-final p{color:var(--teal-100);font-size:13px;margin:0 0 20px;}
.cta-final .btn-row{justify-content:center;}

/* ===== HALAMAN LEGAL (ToS, Privasi) ===== */
.legal-disclaimer{background:var(--amber-100);border:1px solid var(--amber-500);border-radius:10px;padding:16px 20px;margin:20px 0 10px;font-size:12.5px;color:var(--teal-900);line-height:1.6;}
.legal-disclaimer b{color:var(--amber-600);}
.legal-updated{font-size:11.5px;color:var(--ink-400);font-family:'IBM Plex Mono',monospace;margin-bottom:24px;}
.dsection ol{padding-left:20px;margin:0 0 10px;}
.dsection ol li{font-size:14px;color:var(--ink-600);line-height:1.7;margin-bottom:6px;}
.dsection ul.plain-list{padding-left:20px;margin:0 0 10px;}
.dsection ul.plain-list li{font-size:14px;color:var(--ink-600);line-height:1.7;margin-bottom:6px;}

/* ===== ERROR PAGES ===== */
.error-page{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px;}
.error-page h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:64px;font-weight:800;color:var(--teal-100);margin:0;}
.error-page h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;color:var(--teal-900);margin:8px 0 12px;}
.error-page p{color:var(--ink-600);margin:0 0 24px;}

/* ============================================
   MEMBER AREA (Fase 4) — login/daftar, dashboard, detail pesanan, profil
   ============================================ */

/* Status tags — sama seperti admin.css, disalin ke sini karena style.css
   dipakai halaman publik yang tidak load admin.css */
.tag-green{background:var(--green-100);color:var(--green-600);font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;}
.tag-amber{background:var(--amber-100);color:var(--amber-600);font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;}
.tag-red{background:var(--red-100);color:var(--red-600);font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;}

/* ===== Login & Daftar ===== */
.hint{font-weight:500;color:var(--ink-400);font-size:12px;}
.hint a{color:var(--teal-700);font-weight:700;}
.member-auth-wrap{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:40px 0;}
.member-auth-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:36px 32px;width:100%;max-width:420px;}
.member-auth-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:22px;font-weight:800;color:var(--teal-900);margin:0 0 6px;text-align:center;}
.member-auth-sub{font-size:13px;color:var(--ink-400);text-align:center;margin:0 0 24px;}
.member-auth-foot{font-size:13px;color:var(--ink-600);text-align:center;margin:14px 0 0;}
.member-auth-foot a{color:var(--teal-700);font-weight:700;}

/* ===== Form fields dasar (dipakai di seluruh Member Area) ===== */
.mform-field{margin-bottom:16px;}
.mform-field label{display:block;font-size:12.5px;font-weight:700;color:var(--teal-900);margin-bottom:6px;}
.mform-field input,.mform-field select,.mform-field textarea{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:8px;font-family:'Manrope',sans-serif;font-size:14px;background:#fff;}
.mform-field input:focus,.mform-field select:focus,.mform-field textarea:focus{outline:none;border-color:var(--teal-500);}
.mform-error{background:var(--red-100);color:var(--red-600);font-size:12.5px;padding:10px 14px;border-radius:8px;margin-bottom:16px;}
.mform-success{background:var(--green-100);color:var(--green-600);font-size:12.5px;padding:10px 14px;border-radius:8px;margin-bottom:16px;}
.mform-btn{width:100%;background:var(--teal-900);color:#fff;font-size:14px;font-weight:700;padding:12px;border:none;border-radius:8px;cursor:pointer;}
.mform-btn:hover{background:var(--teal-700);}
.mform-btn-sm{width:auto;padding:10px 20px;}
.mform-inline{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.mform-inline input[type="file"]{flex:1;min-width:180px;}
.mform-inline input[type="text"]{flex:1;min-width:160px;padding:11px 14px;border:1px solid var(--line);border-radius:8px;font-family:'Manrope',sans-serif;font-size:13px;}

/* ===== Shell: tab internal (Pesanan Saya / Profil / Keluar) ===== */
.member-shell-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:22px 0 18px;border-bottom:1px solid var(--line);margin-bottom:22px;}
.member-welcome{font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;font-weight:800;color:var(--teal-900);}
.member-tabs{display:flex;gap:8px;}
.member-tabs a{font-size:13px;font-weight:700;color:var(--ink-600);padding:8px 14px;border-radius:8px;}
.member-tabs a:hover{background:var(--teal-100);}
.member-tabs a.active{background:var(--teal-900);color:#fff;}

/* ===== Reminder box ===== */
.member-reminder-box{background:var(--amber-100);border:1px solid var(--amber-500);border-radius:12px;padding:16px 18px;margin-bottom:22px;}
.member-reminder-box h3{margin:0 0 10px;font-size:14px;color:var(--teal-900);}
.member-reminder-item{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--ink-600);padding:6px 0;}
.member-reminder-cta{margin-left:auto;background:var(--teal-900);color:#fff;font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:999px;white-space:nowrap;}

.member-section-title-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin:26px 0 14px;}

.member-cross-role-banner{background:var(--teal-100);border-radius:10px;padding:12px 16px;font-size:13px;color:var(--teal-900);margin-bottom:22px;}
.member-cross-role-banner a{color:var(--teal-700);font-weight:700;}

.member-section-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:800;color:var(--teal-900);margin:26px 0 14px;}

.member-empty{background:#fff;border:1px dashed var(--line);border-radius:12px;padding:32px;text-align:center;}
.member-empty p{color:var(--ink-600);margin:0 0 14px;}

/* ===== Daftar pesanan (kartu) ===== */
.member-order-list{display:flex;flex-direction:column;gap:10px;}
.member-order-card{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;}
.member-order-card:hover{border-color:var(--teal-500);}
.member-order-kode{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-400);margin-bottom:2px;}
.member-order-layanan{font-size:15px;font-weight:700;color:var(--teal-900);}
.member-order-catatan{font-size:12.5px;color:var(--ink-600);margin-top:4px;}

/* ===== Detail pesanan ===== */
.member-detail-header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:8px 0 6px;}
.member-detail-header h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:22px;font-weight:800;color:var(--teal-900);margin:0;}
.member-detail-kode{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-400);margin-top:4px;}
.member-order-actions{display:flex;gap:10px;margin:12px 0 6px;}
.member-btn-danger{border-color:var(--red-600) !important;color:var(--red-600) !important;background:transparent;cursor:pointer;font-family:'Manrope',sans-serif;}
.member-note-box{background:var(--teal-100);border-radius:10px;padding:14px 16px;font-size:13.5px;color:var(--teal-900);margin:14px 0;}

/* ===== Timeline status ===== */
.member-timeline{display:flex;flex-direction:column;gap:0;}
.member-timeline-item{display:flex;gap:14px;padding:0 0 20px;position:relative;}
.member-timeline-item:not(:last-child)::before{content:'';position:absolute;left:5px;top:14px;bottom:0;width:1.5px;background:var(--line);}
.member-timeline-dot{width:11px;height:11px;border-radius:50%;background:var(--teal-500);margin-top:4px;flex-shrink:0;}
.member-timeline-status{font-size:13.5px;font-weight:700;color:var(--teal-900);text-transform:capitalize;}
.member-timeline-catatan{font-size:13px;color:var(--ink-600);margin-top:3px;}
.member-timeline-date{font-size:11.5px;color:var(--ink-400);margin-top:4px;}

/* ===== Dokumen ===== */
.member-doc-list{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.member-doc-item{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 18px;}
.member-doc-name{font-size:13.5px;font-weight:700;color:var(--teal-900);}
.member-upload-box{background:var(--paper);border:1px dashed var(--line);border-radius:12px;padding:18px 20px;margin-bottom:20px;}
.member-upload-box h3{font-size:14px;color:var(--teal-900);margin:0 0 4px;}

/* ===== Profil ===== */
.member-profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:40px;}
.member-profile-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 24px;}
.member-profile-card h3{font-size:15px;color:var(--teal-900);margin:0 0 16px;}

@media (max-width:720px){
  .member-profile-grid{grid-template-columns:1fr;}
  .member-shell-head{flex-direction:column;align-items:flex-start;}
}

/* ===== Toggle tampilkan/sembunyikan password ===== */
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:42px !important;}
.pw-toggle-btn{position:absolute;top:50%;right:4px;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:16px;line-height:1;padding:6px;color:var(--ink-400);}
.pw-toggle-btn:hover{color:var(--teal-900);}