:root{
  --primary:#0f766e;--primary-dark:#115e59;--primary-soft:#ccfbf1;
  --accent:#f59e0b;--bg:#f4f7fb;--surface:#ffffff;--text:#172033;
  --muted:#667085;--border:#e4e7ec;--danger:#b42318;--success:#027a48;
  --shadow:0 12px 35px rgba(16,24,40,.08);--radius:16px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.app-shell{min-height:100vh;display:flex}.sidebar{position:fixed;inset:0 auto 0 0;width:268px;background:linear-gradient(180deg,#0f766e 0%,#134e4a 100%);color:#fff;padding:24px 18px;display:flex;flex-direction:column;z-index:40;box-shadow:10px 0 30px rgba(15,118,110,.12)}.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 24px;border-bottom:1px solid rgba(255,255,255,.16)}.brand-mark{width:44px;height:44px;border-radius:14px;background:#fff;color:var(--primary);display:grid;place-items:center;font-weight:800;box-shadow:0 8px 18px rgba(0,0,0,.12)}.brand strong,.brand span{display:block}.brand strong{font-size:18px}.brand span{font-size:12px;opacity:.78}.nav-menu{display:grid;gap:8px;margin-top:24px}.nav-link{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;color:rgba(255,255,255,.83);font-weight:600;transition:.2s}.nav-link:hover,.nav-link.active{background:rgba(255,255,255,.15);color:#fff;transform:translateX(2px)}.nav-icon{width:24px;text-align:center;font-size:20px}.sidebar-footer{margin-top:auto;border-top:1px solid rgba(255,255,255,.16);padding-top:18px}.user-mini{display:flex;gap:10px;align-items:center}.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.2);font-weight:800}.user-mini strong,.user-mini span{display:block}.user-mini span{font-size:12px;opacity:.72}.logout-link{display:block;margin-top:14px;text-align:center;padding:9px;border:1px solid rgba(255,255,255,.25);border-radius:10px;font-size:14px}.main-area{margin-left:268px;min-width:0;flex:1;display:flex;flex-direction:column;min-height:100vh}.topbar{height:88px;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 30px;gap:16px;position:sticky;top:0;z-index:20}.topbar h1{font-size:22px;margin:0}.topbar p{margin:3px 0 0;color:var(--muted);font-size:13px}.topbar-badge{margin-left:auto;background:var(--primary-soft);color:var(--primary-dark);padding:8px 13px;border-radius:999px;font-size:13px;font-weight:700}.menu-toggle{display:none;border:0;background:#eef4f4;width:42px;height:42px;border-radius:12px;cursor:pointer;font-size:20px}.content{padding:28px;flex:1}.footer{padding:18px 28px;border-top:1px solid var(--border);display:flex;justify-content:space-between;color:var(--muted);font-size:13px;background:#fff}.grid{display:grid;gap:20px}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:22px}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);position:relative;overflow:hidden}.stat-card:after{content:"";position:absolute;width:85px;height:85px;border-radius:50%;background:var(--primary-soft);right:-28px;top:-28px}.stat-label{color:var(--muted);font-size:13px;font-weight:600}.stat-value{font-size:30px;font-weight:800;margin-top:8px}.stat-note{font-size:12px;color:var(--primary);margin-top:6px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.card-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:14px}.card-header h2,.card-header h3{margin:0;font-size:18px}.card-body{padding:22px}.two-column{grid-template-columns:minmax(0,1.4fr) minmax(290px,.6fr)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;padding:10px 15px;font-weight:700;cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:#eef2f6;color:#344054}.btn-outline{background:#fff;color:var(--primary);border:1px solid var(--primary)}.btn-danger{background:#fee4e2;color:var(--danger)}.btn-sm{padding:7px 10px;border-radius:9px;font-size:13px}.actions{display:flex;gap:8px;flex-wrap:wrap}.alert{padding:13px 16px;border-radius:12px;margin-bottom:18px;font-weight:600;transition:.3s}.alert-success{background:#ecfdf3;color:var(--success);border:1px solid #abefc6}.alert-danger{background:#fef3f2;color:var(--danger);border:1px solid #fecdca}.fade-out{opacity:0;transform:translateY(-6px)}.table-responsive{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:760px}.table th,.table td{padding:13px 14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}.table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#fafbfc}.table tbody tr:hover{background:#fbfdfd}.badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700}.badge-primary{background:var(--primary-soft);color:var(--primary-dark)}.badge-neutral{background:#f2f4f7;color:#475467}.search-bar{display:flex;gap:10px;flex-wrap:wrap}.search-bar input{min-width:230px;flex:1}.form-control,.form-select,.form-textarea{width:100%;border:1px solid #d0d5dd;border-radius:11px;padding:10px 12px;background:#fff;color:var(--text);outline:none;transition:.2s}.form-control:focus,.form-select:focus,.form-textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(15,118,110,.1)}.form-textarea{min-height:90px;resize:vertical}.form-group label{display:block;font-weight:700;font-size:13px;margin-bottom:7px}.required{color:var(--danger)}.form-hint{font-size:12px;color:var(--muted);margin-top:5px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-grid .full{grid-column:1/-1}.section-title{display:flex;align-items:center;gap:10px;margin:2px 0 16px}.section-title span{width:34px;height:34px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-weight:800}.section-title h3{margin:0;font-size:17px}.person-block{border:1px solid var(--border);border-radius:15px;padding:18px;margin-bottom:18px;background:#fcfdfd}.person-block:last-child{margin-bottom:0}.tabs{display:flex;gap:8px;background:#f2f4f7;padding:6px;border-radius:13px;margin-bottom:20px}.tab-btn{flex:1;border:0;background:transparent;padding:11px;border-radius:9px;font-weight:700;cursor:pointer;color:#475467}.tab-btn.active{background:#fff;color:var(--primary);box-shadow:0 3px 12px rgba(16,24,40,.08)}.tab-pane{display:none}.tab-pane.active{display:block}.form-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:18px;border-top:1px solid var(--border);margin-top:22px}.empty-state{text-align:center;padding:45px 20px;color:var(--muted)}.empty-state strong{display:block;color:var(--text);font-size:18px;margin-bottom:5px}.quick-list{display:grid;gap:12px}.quick-item{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--border)}.quick-item:last-child{border-bottom:0}.quick-item strong,.quick-item span{display:block}.quick-item span{font-size:12px;color:var(--muted)}.progress{height:10px;background:#eef2f6;border-radius:999px;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,var(--primary),#14b8a6);border-radius:999px}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.detail-item{padding:12px 14px;background:#f8fafc;border-radius:11px}.detail-item dt{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase}.detail-item dd{margin:5px 0 0;font-weight:600}.detail-item.full{grid-column:1/-1}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top left,#ccfbf1 0,transparent 35%),linear-gradient(135deg,#f7fafc,#ecfdf5)}.login-card{width:min(440px,100%);background:#fff;border:1px solid var(--border);border-radius:22px;padding:30px;box-shadow:0 24px 60px rgba(15,118,110,.15)}.login-brand{text-align:center;margin-bottom:24px}.login-brand .brand-mark{margin:0 auto 12px}.login-brand .brand-mark--logo{width:78px;height:78px;padding:8px;border-radius:22px;background:linear-gradient(145deg,#ffffff 0%,#effdfa 100%);box-shadow:0 14px 34px rgba(0,35,44,.18), inset 0 1px 0 rgba(255,255,255,.85);display:grid;place-items:center;overflow:hidden}.login-brand .brand-mark--logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}.login-brand h1{font-size:24px;margin:0}.login-brand p{color:var(--muted);margin:6px 0 0}.login-card .form-group{margin-bottom:16px}.login-help{margin-top:18px;padding:12px;background:#f8fafc;border-radius:10px;font-size:12px;color:var(--muted)}.w-100{width:100%}.text-muted{color:var(--muted)}.mb-0{margin-bottom:0}.mt-2{margin-top:8px}.sidebar-overlay{display:none}
@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr)}.two-column{grid-template-columns:1fr}}
@media(max-width:800px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:translateX(0)}.main-area{margin-left:0}.menu-toggle{display:grid;place-items:center}.sidebar-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:30}.sidebar-overlay.show{display:block}.topbar{padding:0 18px}.content{padding:18px}.footer{padding:16px 18px}.form-grid,.detail-grid{grid-template-columns:1fr}.form-grid .full,.detail-item.full{grid-column:auto}}
@media(max-width:560px){.stats-grid{grid-template-columns:1fr}.card-header{align-items:flex-start;flex-direction:column}.tabs{flex-direction:column}.form-actions{flex-direction:column-reverse}.form-actions .btn{width:100%}.topbar-badge{display:none}.topbar h1{font-size:18px}.table{min-width:680px}}
@media print{.sidebar,.topbar,.footer,.no-print,.sidebar-overlay{display:none!important}.main-area{margin:0}.content{padding:0}.card{box-shadow:none;border:0}.card-header{padding-left:0;padding-right:0}.card-body{padding-left:0;padding-right:0}body{background:#fff}}

/* Modul wali nikah */
.guardian-notice{margin:16px 0;padding:13px 15px;border-radius:12px;border:1px solid var(--border);font-size:13px;line-height:1.55}
.guardian-notice.info{background:#eff8ff;border-color:#b2ddff;color:#175cd3}
.guardian-notice.open{background:#ecfdf3;border-color:#abefc6;color:#027a48}
.guardian-notice.locked{background:#fffaeb;border-color:#fedf89;color:#93370d}
.guardian-fields{transition:.2s}
.guardian-fields.is-locked .form-control,
.guardian-fields.is-locked .form-textarea{background:#f2f4f7;color:#667085;border-color:#e4e7ec;cursor:not-allowed}
.form-select:disabled,.form-control:disabled,.form-textarea:disabled{background:#f2f4f7;color:#667085;cursor:not-allowed}
.parent-status-notice{margin-top:14px;padding:12px 14px;border-radius:12px;border:1px solid var(--border);font-size:13px;line-height:1.55}
.parent-status-notice.available{background:#ecfdf3;border-color:#abefc6;color:#027a48}
.parent-status-notice.locked{background:#fffaeb;border-color:#fedf89;color:#93370d}
.parent-fields-locked [data-parent-dependent]{background:#f2f4f7!important;color:#667085!important;border-color:#e4e7ec!important;cursor:not-allowed;opacity:1!important;-webkit-text-fill-color:#667085}.parent-fields-locked select[data-parent-dependent]{appearance:none;background-image:none!important}
.parent-fields-locked.parent-name-open [data-parent-name]{background:#fff!important;color:#101828!important;border-color:var(--border)!important;cursor:text!important;-webkit-text-fill-color:#101828}.parent-fields-locked.parent-name-open [data-parent-name]:focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(15,143,128,.12)!important}


/* Pilihan jenis layanan */
.badge-warning{background:#fffaeb;color:#b54708}
.service-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-radius:14px;margin-bottom:18px;border:1px solid var(--border)}
.service-banner strong,.service-banner span{display:block}
.service-banner strong{font-size:15px;margin-bottom:3px}
.service-banner span{font-size:13px}
.service-banner-primary{background:#ecfdf3;border-color:#abefc6;color:#027a48}
.service-banner-warning{background:#fffaeb;border-color:#fedf89;color:#93370d}
.modal-open{overflow:hidden}
.service-modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.62);backdrop-filter:blur(5px);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.service-modal-backdrop.is-open{display:flex;animation:modalFade .2s ease-out}
.service-modal-card{width:min(720px,100%);background:#fff;border-radius:24px;padding:30px;box-shadow:0 30px 90px rgba(15,23,42,.28);position:relative;animation:modalRise .25s ease-out}
.service-modal-close{position:absolute;right:18px;top:16px;width:38px;height:38px;border:0;border-radius:50%;background:#f2f4f7;color:#475467;font-size:25px;line-height:1;cursor:pointer}
.service-modal-icon{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:26px;margin:0 auto 12px}
.service-modal-card>h2{text-align:center;margin:0;font-size:24px}
.service-modal-card>p{text-align:center;color:var(--muted);margin:7px 0 22px}
.service-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px}
.service-choice{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:22px;border:2px solid var(--border);border-radius:18px;transition:.2s;background:#fff;min-height:170px}
.service-choice:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(16,24,40,.1)}
.service-choice-primary:hover{border-color:#5fe9d5;background:#f0fdfa}
.service-choice-warning:hover{border-color:#fdb022;background:#fffcf5}
.service-choice-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:22px;font-weight:800}
.service-choice-primary .service-choice-icon{background:var(--primary-soft);color:var(--primary)}
.service-choice-warning .service-choice-icon{background:#fef0c7;color:#b54708}
.service-choice strong{font-size:17px;color:var(--text)}
.service-choice small{font-size:13px;color:var(--muted);line-height:1.55}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalRise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:640px){.service-choice-grid{grid-template-columns:1fr}.service-modal-card{padding:26px 18px 20px}.service-choice{min-height:auto}.service-banner{align-items:flex-start;flex-direction:column}.service-banner .btn{width:100%}}

.village-letterhead-preview{text-align:center;border-bottom:3px double var(--text);padding:8px 5px 14px;line-height:1.45;font-family:"Times New Roman",serif;font-size:14px}.village-letterhead-preview strong{display:block;font-size:21px;margin-top:3px}.village-summary{margin-top:18px}.dashboard-village-summary{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);display:grid;gap:4px}.dashboard-village-summary span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}.dashboard-village-summary strong{font-size:16px}.dashboard-village-summary small{color:var(--muted);line-height:1.5}.dashboard-village-summary a{color:var(--primary);font-size:13px;font-weight:700;margin-top:5px}.village-preview-card{align-self:start}

/* Pemisahan data berdasarkan jenis layanan */
.stat-card-link{display:block;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.stat-card-link:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(16,24,40,.12);border-color:#99d8d2}
.service-data-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
.service-data-tab{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border:1px solid var(--border);border-radius:13px;background:#f8fafc;color:#475467;font-weight:700;transition:.2s}
.service-data-tab:hover{transform:translateY(-1px);border-color:#98a2b3;background:#fff}
.service-data-tab strong{min-width:32px;height:32px;padding:0 9px;border-radius:999px;display:grid;place-items:center;background:#e4e7ec;color:#344054;font-size:13px}
.service-data-tab.active{border-color:#98a2b3;background:#fff;box-shadow:0 8px 22px rgba(16,24,40,.08);color:var(--text)}
.service-data-tab-primary.active{border-color:#5fe9d5;background:#f0fdfa;color:#115e59}
.service-data-tab-primary.active strong{background:var(--primary);color:#fff}
.service-data-tab-warning.active{border-color:#fdb022;background:#fffcf5;color:#93370d}
.service-data-tab-warning.active strong{background:#f79009;color:#fff}
@media(max-width:720px){.service-data-tabs{grid-template-columns:1fr}.service-data-tab{padding:12px 14px}}

/* Statistik Daftar Nikah */
.statistics-filter-card{margin-bottom:22px}.statistics-filter-row{display:flex;align-items:center;justify-content:space-between;gap:18px}.statistics-filter-row strong{display:block;margin-bottom:3px}.statistics-year-filter{display:flex;align-items:center;gap:10px;min-width:220px}.statistics-year-filter label{font-size:13px;font-weight:700}.statistics-year-filter .form-select{min-width:110px}.statistics-summary-grid{margin-top:0}.statistics-age-value{font-size:27px}.statistics-chart-card{margin-bottom:22px}.statistics-chart-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.statistics-canvas-wrap{position:relative;width:100%;min-height:340px;overflow:hidden}.statistics-canvas{display:block;width:100%;height:340px}.statistics-note-card{margin-bottom:4px}.statistics-note-card p{margin-top:6px;line-height:1.65}@media(max-width:1050px){.statistics-chart-grid{grid-template-columns:1fr}}@media(max-width:640px){.statistics-filter-row{align-items:flex-start;flex-direction:column}.statistics-year-filter{width:100%}.statistics-year-filter .form-select{flex:1}.statistics-canvas-wrap{min-height:320px}.statistics-canvas{height:320px}}@media print{.statistics-chart-grid{grid-template-columns:1fr}.statistics-chart-card{break-inside:avoid}.statistics-canvas-wrap{min-height:300px}.statistics-note-card{break-inside:avoid}}

/* Dashboard profesional */
.dashboard-body{background:#f2f5f9}.dashboard-body .content{background:radial-gradient(circle at 88% 3%,rgba(20,184,166,.08),transparent 23%),radial-gradient(circle at 15% 18%,rgba(245,158,11,.055),transparent 18%),#f2f5f9}.dashboard-page{max-width:1580px;margin:0 auto}.dashboard-hero{position:relative;min-height:242px;padding:38px 40px;border-radius:26px;overflow:hidden;color:#fff;background:linear-gradient(124deg,#073f3b 0%,#0f766e 48%,#0d9488 100%);box-shadow:0 24px 55px rgba(15,118,110,.22);display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:22px}.dashboard-hero:before{content:"";position:absolute;inset:auto -70px -150px auto;width:360px;height:360px;border-radius:50%;border:68px solid rgba(255,255,255,.055)}.dashboard-hero:after{content:"";position:absolute;inset:-95px auto auto 40%;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.045)}.dashboard-hero-pattern{position:absolute;inset:0;opacity:.12;background-image:linear-gradient(30deg,rgba(255,255,255,.18) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.18) 87.5%,rgba(255,255,255,.18)),linear-gradient(150deg,rgba(255,255,255,.18) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.18) 87.5%,rgba(255,255,255,.18)),linear-gradient(30deg,rgba(255,255,255,.18) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.18) 87.5%,rgba(255,255,255,.18)),linear-gradient(150deg,rgba(255,255,255,.18) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.18) 87.5%,rgba(255,255,255,.18));background-size:70px 122px;background-position:0 0,0 0,35px 61px,35px 61px}.dashboard-hero-content,.dashboard-hero-clock{position:relative;z-index:2}.dashboard-hero-content{max-width:760px}.dashboard-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.02em}.status-dot{width:8px;height:8px;border-radius:50%;background:#86efac;box-shadow:0 0 0 5px rgba(134,239,172,.13);animation:dashboardPulse 2s infinite}.dashboard-hero h2{font-size:34px;line-height:1.17;margin:18px 0 8px;letter-spacing:-.025em}.dashboard-hero p{max-width:680px;margin:0;color:rgba(255,255,255,.77);font-size:15px;line-height:1.65}.dashboard-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.hero-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 17px;border-radius:12px;font-size:13px;font-weight:800;transition:.2s}.hero-btn:hover{transform:translateY(-2px)}.hero-btn-primary{background:#fff;color:#0b635d;box-shadow:0 10px 25px rgba(4,47,46,.18)}.hero-btn-light{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff}.dashboard-hero-clock{min-width:230px;padding:22px;border:1px solid rgba(255,255,255,.17);border-radius:20px;background:rgba(4,47,46,.28);backdrop-filter:blur(10px);text-align:right;box-shadow:inset 0 1px rgba(255,255,255,.09)}.clock-label{display:block;color:rgba(255,255,255,.65);font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}.dashboard-hero-clock strong{display:block;font-size:34px;line-height:1.15;margin:8px 0 3px;font-variant-numeric:tabular-nums;letter-spacing:.035em}.dashboard-hero-clock small{color:rgba(255,255,255,.7);font-size:12px}.clock-today{margin-top:16px;padding-top:13px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:rgba(255,255,255,.73)}.clock-today span{font-weight:900;color:#fde68a;font-size:15px}.dashboard-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}.dashboard-stat-card{position:relative;display:flex;align-items:center;gap:14px;min-height:132px;padding:20px;border:1px solid #e3e8ef;border-radius:18px;background:rgba(255,255,255,.93);box-shadow:0 10px 30px rgba(30,41,59,.055);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}.dashboard-stat-card:before{content:"";position:absolute;width:100px;height:100px;border-radius:50%;right:-48px;top:-50px;background:var(--stat-soft,#e9f8f5);opacity:.85}.dashboard-stat-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(30,41,59,.1);border-color:var(--stat-border,#cbd5e1)}.dashboard-stat-icon{position:relative;z-index:1;flex:0 0 48px;width:48px;height:48px;display:grid;place-items:center;border-radius:15px;color:var(--stat-color,#0f766e);background:var(--stat-soft,#e9f8f5)}.dashboard-stat-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.dashboard-stat-copy{position:relative;z-index:1;min-width:0}.dashboard-stat-copy>span{display:block;color:#64748b;font-size:12px;font-weight:700}.dashboard-stat-copy strong{display:block;color:#132238;font-size:29px;line-height:1.15;margin:5px 0 4px;letter-spacing:-.03em}.dashboard-stat-copy small{display:block;color:#8490a2;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-stat-arrow{position:absolute;right:14px;bottom:12px;color:var(--stat-color,#0f766e);font-size:17px;opacity:.55;transition:.2s}.dashboard-stat-card:hover .dashboard-stat-arrow{transform:translateX(3px);opacity:1}.stat-total{--stat-color:#2563eb;--stat-soft:#eaf2ff;--stat-border:#a8c7fa}.stat-daftar{--stat-color:#0f766e;--stat-soft:#e6f8f4;--stat-border:#9adace}.stat-rekomendasi{--stat-color:#d97706;--stat-soft:#fff6df;--stat-border:#f8ce7d}.stat-month{--stat-color:#7c3aed;--stat-soft:#f2ebff;--stat-border:#cdb6f5}.trend-up{color:#059669!important}.trend-down{color:#dc2626!important}.dashboard-main-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,.65fr);gap:18px;margin-bottom:18px}.dashboard-panel{background:#fff;border:1px solid #e3e8ef;border-radius:20px;box-shadow:0 10px 32px rgba(30,41,59,.055);overflow:hidden}.dashboard-panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px 24px 12px}.dashboard-panel-header.compact{align-items:center;padding-bottom:18px;border-bottom:1px solid #edf0f4}.panel-kicker{display:block;color:#0f766e;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}.dashboard-panel-header h3{margin:0;color:#1b2a40;font-size:18px;letter-spacing:-.01em}.dashboard-panel-header p{margin:4px 0 0;color:#7a8597;font-size:12px}.panel-link{color:#0f766e;font-size:12px;font-weight:800;white-space:nowrap}.dashboard-chart-legend{display:flex;align-items:center;gap:13px;padding-top:4px;color:#64748b;font-size:11px;font-weight:600}.dashboard-chart-legend span{display:flex;align-items:center;gap:6px}.dashboard-chart-legend i{display:block;width:9px;height:9px;border-radius:3px}.legend-daftar{background:#0f766e}.legend-rekomendasi{background:#f59e0b}.dashboard-chart-wrap{height:350px;padding:0 17px 8px}.dashboard-chart-wrap canvas{display:block;width:100%;height:330px}.dashboard-composition-panel{display:flex;flex-direction:column}.service-donut-wrap{display:grid;place-items:center;padding:25px 20px 17px}.service-donut{--daftar-angle:0deg;width:168px;height:168px;padding:15px;border-radius:50%;background:conic-gradient(#0f766e 0 var(--daftar-angle),#f59e0b var(--daftar-angle) 360deg);box-shadow:0 13px 30px rgba(15,118,110,.13);position:relative}.service-donut:before{content:"";position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(255,255,255,.7)}.service-donut.is-empty{background:#e9eef4}.service-donut-center{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;background:#fff;display:grid;place-content:center;text-align:center;box-shadow:inset 0 0 0 1px #eef1f4}.service-donut-center strong{font-size:29px;line-height:1;color:#16243a}.service-donut-center span{font-size:11px;color:#8490a2;margin-top:5px}.service-composition-list{display:grid;gap:8px;padding:0 22px 22px}.service-composition-list a{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:10px 11px;border-radius:11px;background:#f8fafc;transition:.2s}.service-composition-list a:hover{background:#f1f5f9;transform:translateX(2px)}.composition-name{display:flex;align-items:center;gap:8px;font-size:12px;color:#475569;font-weight:700}.composition-dot{width:9px;height:9px;border-radius:3px}.composition-dot.daftar{background:#0f766e}.composition-dot.rekomendasi{background:#f59e0b}.service-composition-list strong{font-size:13px}.service-composition-list small{min-width:42px;color:#8490a2;text-align:right;font-size:11px}.dashboard-lower-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(360px,.55fr);gap:18px}.dashboard-activity-list{padding:4px 14px 12px}.dashboard-activity-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto 18px;align-items:center;gap:12px;padding:13px 10px;border-bottom:1px solid #edf0f4;border-radius:10px;transition:.2s}.dashboard-activity-item:last-child{border-bottom:0}.dashboard-activity-item:hover{background:#f8fafc}.activity-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-size:13px;font-weight:900}.activity-icon.registration{background:#e6f8f4;color:#0f766e}.activity-icon.recommendation{background:#fff4d9;color:#c26a00}.activity-content{min-width:0}.activity-content strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#243248;font-size:13px}.activity-content strong em{font-style:normal;color:#94a3b8;font-weight:500}.activity-content small{display:block;color:#8490a2;font-size:11px;margin-top:3px}.activity-service{padding:5px 8px;border-radius:999px;font-size:10px;font-weight:800;white-space:nowrap}.activity-service.registration{color:#0d6b63;background:#e6f8f4}.activity-service.recommendation{color:#a95800;background:#fff3d6}.activity-chevron{color:#a7b0bf;font-size:21px}.dashboard-side-stack{display:grid;align-content:start;gap:14px}.dashboard-action-panel{overflow:visible}.quick-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:16px}.quick-action-card{min-height:122px;padding:14px;border-radius:14px;border:1px solid #e3e8ef;background:#f8fafc;display:flex;flex-direction:column;align-items:flex-start;transition:.2s}.quick-action-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(30,41,59,.09)}.quick-action-card>span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:10px;font-size:18px;font-weight:800}.quick-action-card strong{font-size:12px;color:#26354b}.quick-action-card small{font-size:10px;color:#8490a2;margin-top:3px;line-height:1.4}.quick-action-card.primary{background:#eefaf7;border-color:#c8ebe4}.quick-action-card.primary>span{background:#0f766e;color:#fff}.quick-action-card.warning{background:#fff9ea;border-color:#f8e0a7}.quick-action-card.warning>span{background:#f59e0b;color:#fff}.quick-action-card.neutral>span{background:#e8eef5;color:#506176}.dashboard-village-card{display:grid;grid-template-columns:48px minmax(0,1fr) 28px;align-items:center;gap:13px;padding:17px 18px;border-radius:18px;color:#fff;background:linear-gradient(135deg,#172a3a,#253d4f);box-shadow:0 15px 32px rgba(23,42,58,.18);overflow:hidden;position:relative}.dashboard-village-card:after{content:"";position:absolute;width:110px;height:110px;border:20px solid rgba(255,255,255,.035);border-radius:50%;right:-50px;top:-45px}.village-card-seal{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.09);font-family:Georgia,serif;font-size:22px;font-weight:700}.dashboard-village-card div:nth-child(2){min-width:0}.dashboard-village-card span,.dashboard-village-card strong,.dashboard-village-card small{display:block}.dashboard-village-card span{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#94a3b8;font-weight:800}.dashboard-village-card strong{font-size:14px;margin:2px 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-village-card small{font-size:10px;color:#c3ccd6;line-height:1.45}.dashboard-village-card>a{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.1);font-size:19px}.dashboard-empty-state{text-align:center;padding:44px 20px 48px;color:#8490a2}.dashboard-empty-state>span{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 12px;border-radius:15px;background:#eef7f5;color:#0f766e;font-size:24px}.dashboard-empty-state strong{display:block;color:#26354b}.dashboard-empty-state p{font-size:12px}.dashboard-empty-state a{display:inline-flex;margin-top:5px;padding:8px 12px;border-radius:9px;background:#0f766e;color:#fff;font-size:11px;font-weight:800}.dashboard-body .topbar{background:rgba(255,255,255,.88);box-shadow:0 1px 0 rgba(226,232,240,.8)}.dashboard-body .topbar h1{letter-spacing:-.02em}.dashboard-body .topbar-badge{box-shadow:inset 0 0 0 1px rgba(15,118,110,.09)}
@keyframes dashboardPulse{0%,100%{box-shadow:0 0 0 4px rgba(134,239,172,.14)}50%{box-shadow:0 0 0 8px rgba(134,239,172,0)}}
@media(max-width:1260px){.dashboard-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-main-grid{grid-template-columns:minmax(0,1.45fr) minmax(290px,.55fr)}.dashboard-lower-grid{grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr)}}
@media(max-width:1030px){.dashboard-main-grid,.dashboard-lower-grid{grid-template-columns:1fr}.dashboard-side-stack{grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr)}.dashboard-village-card{align-self:stretch}.dashboard-hero{padding:32px}.dashboard-hero h2{font-size:30px}}
@media(max-width:760px){.dashboard-hero{min-height:auto;align-items:flex-start;flex-direction:column;padding:28px 24px}.dashboard-hero-clock{width:100%;min-width:0;text-align:left}.dashboard-hero-clock strong{font-size:29px}.dashboard-stat-grid{grid-template-columns:1fr 1fr}.dashboard-main-grid,.dashboard-lower-grid{gap:14px}.dashboard-side-stack{grid-template-columns:1fr}.dashboard-panel-header{padding:19px 18px 11px}.dashboard-panel-header.compact{padding:18px}.dashboard-chart-legend{display:none}.dashboard-chart-wrap{padding:0 8px;height:320px}.dashboard-activity-item{grid-template-columns:40px minmax(0,1fr) 15px}.activity-service{display:none}}
@media(max-width:520px){.dashboard-page{margin:-2px}.dashboard-hero{border-radius:20px;padding:24px 20px}.dashboard-hero h2{font-size:26px}.dashboard-hero p{font-size:13px}.dashboard-hero-actions{width:100%}.hero-btn{flex:1;justify-content:center;padding:10px 12px}.dashboard-stat-grid{grid-template-columns:1fr;gap:11px}.dashboard-stat-card{min-height:112px;padding:16px}.dashboard-stat-copy strong{font-size:26px}.quick-action-grid{grid-template-columns:1fr 1fr}.quick-action-card{min-height:115px}.service-donut{width:150px;height:150px}.dashboard-panel-header h3{font-size:16px}}
@media(prefers-reduced-motion:reduce){.status-dot{animation:none}.dashboard-stat-card,.hero-btn,.quick-action-card,.dashboard-activity-item{transition:none}}
@media print{.dashboard-hero,.dashboard-stat-grid,.dashboard-main-grid,.dashboard-lower-grid{break-inside:avoid}.dashboard-hero{background:#0f766e!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.dashboard-chart-wrap{height:300px}}

/* Akad Nikah */
.akad-tab{display:inline-flex;align-items:center;gap:7px}.akad-tab span{font-size:15px}.akad-section{position:relative;overflow:hidden;border-color:#b9ded6;background:linear-gradient(180deg,#fff 0%,#fbfffe 100%)}.akad-section:after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-90px;top:-100px;background:radial-gradient(circle,rgba(15,118,110,.12),rgba(15,118,110,0) 70%);pointer-events:none}.akad-intro{position:relative;z-index:1;display:flex;align-items:center;gap:13px;padding:15px 17px;margin-bottom:20px;border:1px solid #cce9e3;border-radius:15px;background:linear-gradient(135deg,#ebfaf6,#f8fffd)}.akad-intro-icon{width:43px;height:43px;display:grid;place-items:center;flex:0 0 43px;border-radius:13px;background:linear-gradient(135deg,#0f766e,#16a085);box-shadow:0 9px 20px rgba(15,118,110,.2);font-size:20px}.akad-intro strong,.akad-intro span{display:block}.akad-intro strong{color:#164e49;font-size:14px}.akad-intro span{color:#66817d;font-size:12px;margin-top:3px}.akad-grid .form-control[readonly]{background:#eef6f4;color:#0f5e58;border-color:#b7dcd5;font-weight:800;cursor:not-allowed}.akad-summary-cell strong{display:block;color:#164e49;font-size:12px}.akad-summary-cell span{display:block;color:#64748b;font-size:11px;margin-top:2px}.akad-summary-empty{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:#fff7df;color:#a16207;font-size:10px;font-weight:800}.btn-akad{border-color:#9bd6ca!important;background:#edfaf7!important;color:#0f6f67!important}.btn-akad:hover{background:#dff6f1!important;transform:translateY(-1px)}.akad-detail-card{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:18px;border:1px solid #cde8e2;border-radius:17px;background:linear-gradient(135deg,#f3fcfa,#fff);box-shadow:0 8px 24px rgba(15,118,110,.06)}.akad-detail-item{padding:13px;border-radius:13px;background:#fff;border:1px solid #e2eeeb}.akad-detail-item.full{grid-column:1/-1}.akad-detail-item dt{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#77908b;font-weight:800}.akad-detail-item dd{margin:5px 0 0;color:#183b38;font-weight:800;line-height:1.45}.akad-detail-empty{padding:18px;border:1px dashed #dfb65d;border-radius:14px;background:#fffbeb;color:#8a5a00}.akad-detail-empty a{font-weight:800;text-decoration:underline}@media(max-width:760px){.akad-detail-card{grid-template-columns:1fr 1fr}}@media(max-width:480px){.akad-detail-card{grid-template-columns:1fr}.akad-detail-item.full{grid-column:auto}.akad-intro{align-items:flex-start}}

/* REGIS SIMKAH dan penyempurnaan visual */
.registration-meta-grid{align-items:end}.simkah-number{display:inline-flex;align-items:center;padding:6px 10px;border-radius:10px;background:linear-gradient(135deg,#e8faf5,#f7fffc);border:1px solid #bfe8dd;color:#0b6b63;font-size:12px;letter-spacing:.02em;white-space:nowrap}.simkah-detail-badge{display:inline-flex;gap:6px;align-items:center;margin-top:9px;padding:7px 10px;border-radius:10px;background:#eaf9f5;border:1px solid #c5e9e0;color:#17645e;font-size:12px}.dashboard-v2{background:linear-gradient(180deg,#f8fbfc 0,#f4f8fa 100%);border-radius:24px;padding:2px}.dashboard-v2 .v2-panel,.dashboard-v2 .v2-stat-card{box-shadow:0 12px 35px rgba(22,50,65,.08);border:1px solid rgba(218,228,234,.9)}.dashboard-v2 .v2-stat-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(15,118,110,.14)}.dashboard-topbar{min-height:145px}.topbar-scene{opacity:.98}.sidebar{background:linear-gradient(180deg,#0a7d71 0%,#075f67 52%,#064d5a 100%)}.sidebar:after{content:"";position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none;background:radial-gradient(circle at 28% 80%,rgba(45,212,191,.15),transparent 40%),linear-gradient(180deg,transparent,rgba(0,30,40,.18))}.nav-link{border:1px solid transparent}.nav-link.active{background:linear-gradient(135deg,#20c997,#0fb79f);border-color:rgba(255,255,255,.2);box-shadow:0 10px 26px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.2)}.sidebar-footer{position:relative;z-index:2}.user-card,.logout-link{backdrop-filter:blur(8px)}

/* =========================================================
   Dashboard & Navigation Premium v2.2
   ========================================================= */
:root{
  --ui-navy:#14213a;
  --ui-teal:#087f73;
  --ui-teal-dark:#045b62;
  --ui-green:#18b892;
  --ui-cyan:#139bb5;
  --ui-purple:#7b4ce1;
  --ui-orange:#f4a51c;
  --ui-page:#f5f8fb;
  --ui-line:#e5edf2;
  --ui-card-shadow:0 14px 40px rgba(25,54,74,.08);
  --ui-card-shadow-hover:0 22px 48px rgba(8,127,115,.14)
}
body{background:radial-gradient(circle at 88% 2%,rgba(80,210,184,.08),transparent 24%),var(--ui-page);color:var(--ui-navy)}
.sidebar{width:286px;padding:22px 16px 20px;background:linear-gradient(155deg,#0a927f 0%,#06726e 35%,#055b67 72%,#064553 100%);box-shadow:16px 0 44px rgba(4,72,82,.16);overflow:hidden;isolation:isolate}
.sidebar-glow{position:absolute;z-index:-1;width:340px;height:340px;border-radius:50%;left:-180px;top:-110px;background:radial-gradient(circle,rgba(60,255,211,.30),rgba(60,255,211,0) 68%)}
.sidebar-pattern{position:absolute;z-index:-1;inset:auto -40px 0 -40px;height:48%;opacity:.28;background:radial-gradient(circle at 30% 55%,rgba(73,224,194,.35),transparent 35%),repeating-radial-gradient(circle at 40% 100%,transparent 0 18px,rgba(255,255,255,.035) 19px 20px)}
.sidebar:before{content:"";position:absolute;z-index:-1;width:235px;height:235px;border:1px solid rgba(255,255,255,.06);border-radius:46% 54% 55% 45%;right:-115px;top:210px;transform:rotate(20deg);box-shadow:0 0 0 24px rgba(255,255,255,.018),0 0 0 48px rgba(255,255,255,.012)}
.sidebar:after{height:42%;background:linear-gradient(180deg,transparent,rgba(0,29,38,.28)),radial-gradient(circle at 25% 70%,rgba(45,212,191,.18),transparent 42%)}
.brand{min-height:76px;padding:2px 6px 22px;gap:13px;border-bottom:1px solid rgba(255,255,255,.14);position:relative;z-index:2}
.brand-mark{width:50px;height:50px;border-radius:16px;color:#08796f;background:linear-gradient(145deg,#fff,#eefdfa);box-shadow:0 12px 26px rgba(0,33,40,.22),inset 0 0 0 1px rgba(255,255,255,.7);font-size:16px;letter-spacing:.03em}
.brand-copy strong{font-size:19px;letter-spacing:-.02em}.brand-copy span{font-size:12px;color:#c8f6ed;opacity:.95;margin-top:2px}
.nav-caption{display:block;margin:22px 13px 9px;color:rgba(220,255,248,.56);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.16em}
.nav-menu{margin-top:0;gap:7px;position:relative;z-index:2}
.nav-link{min-height:54px;padding:10px 12px;border-radius:15px;gap:12px;color:rgba(235,255,252,.83);font-size:13px;font-weight:700;border:1px solid transparent;position:relative;overflow:hidden;transform:none!important}
.nav-link:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.10),transparent);opacity:0;transition:.25s}
.nav-link:hover{background:rgba(255,255,255,.075);color:#fff;border-color:rgba(255,255,255,.08)}
.nav-link:hover:before{opacity:1}
.nav-link.active{background:linear-gradient(135deg,#19c59c,#0fa79c);color:#fff;border-color:rgba(255,255,255,.23);box-shadow:0 12px 28px rgba(0,34,43,.24),inset 0 1px rgba(255,255,255,.25)}
.nav-link.active:after{content:"";position:absolute;width:80px;height:80px;border-radius:50%;right:-36px;top:-38px;background:rgba(255,255,255,.10)}
.nav-icon{width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.08);transition:.25s}
.nav-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nav-link:hover .nav-icon{background:rgba(255,255,255,.13);transform:scale(1.04)}
.nav-link.active .nav-icon{background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
.nav-text{flex:1}.nav-indicator{width:5px;height:5px;border-radius:50%;background:#bff9ed;opacity:0;box-shadow:0 0 0 4px rgba(191,249,237,.12)}.nav-link.active .nav-indicator{opacity:1}
.sidebar-footer{padding-top:15px;border-top:1px solid rgba(255,255,255,.14);position:relative;z-index:3}
.user-card{display:grid;grid-template-columns:42px minmax(0,1fr) 22px;align-items:center;gap:11px;padding:12px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(2,50,58,.22);box-shadow:inset 0 1px rgba(255,255,255,.05);transition:.2s}
.user-card:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}
.user-card .avatar{width:42px;height:42px;background:linear-gradient(135deg,#73d7c6,#3ba99c);box-shadow:0 8px 18px rgba(0,34,42,.22)}
.user-card-copy{min-width:0}.user-card-copy strong,.user-card-copy span{display:block}.user-card-copy strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-card-copy span{font-size:10px;color:#bde9e3;margin-top:2px}.user-card-chevron{width:18px;height:18px;fill:none;stroke:#d7fff7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.logout-link{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;height:45px;border-radius:13px;border:1px solid rgba(129,240,220,.28);background:linear-gradient(135deg,rgba(35,190,164,.16),rgba(5,61,69,.25));font-size:12px;font-weight:800;transition:.22s}
.logout-link svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.logout-link:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.28);transform:translateY(-1px)}
.main-area{margin-left:286px;background:transparent}
.topbar{height:96px;padding:0 34px;background:rgba(255,255,255,.89);border-bottom:1px solid rgba(218,228,234,.88);box-shadow:0 4px 22px rgba(37,63,82,.035);backdrop-filter:blur(16px)}
.dashboard-topbar{min-height:142px;height:142px;overflow:hidden}
.topbar-heading{position:relative;z-index:2}.topbar-heading h1{font-size:28px;letter-spacing:-.035em;color:#15213a}.topbar-heading p{display:flex;align-items:center;gap:7px;font-size:12px;color:#718096;margin-top:7px}.topbar-heading p svg{width:15px;height:15px;fill:none;stroke:#6f8595;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.topbar-scene{position:absolute;right:20px;bottom:-4px;width:min(43%,470px);height:132px;display:flex;align-items:flex-end;justify-content:flex-end;pointer-events:none}.topbar-scene svg{width:100%;height:100%;filter:drop-shadow(0 8px 16px rgba(27,145,124,.08))}
.topbar-badge{margin-left:auto;background:linear-gradient(135deg,#e8faf5,#f6fffc);border:1px solid #c8ebe2;color:#0b6d64;box-shadow:0 7px 18px rgba(15,118,110,.08)}
.content{padding:25px 28px 34px;max-width:1680px;width:100%;margin:0 auto}
.dashboard-v2{padding:0;background:transparent;border-radius:0}
.v2-welcome{position:relative;display:flex;justify-content:space-between;align-items:center;gap:22px;min-height:126px;padding:26px 28px;margin-bottom:18px;border-radius:22px;color:#fff;overflow:hidden;background:linear-gradient(125deg,#087b72 0%,#0b9582 45%,#11a98b 100%);box-shadow:0 20px 42px rgba(8,127,115,.19)}
.v2-welcome:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-110px;top:-155px;border:40px solid rgba(255,255,255,.055)}.v2-welcome:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 52%,rgba(255,255,255,.06));pointer-events:none}
.v2-welcome>div{position:relative;z-index:1}.v2-live{display:inline-flex;align-items:center;gap:7px;margin-bottom:9px;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.13);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.v2-live i{width:7px;height:7px;border-radius:50%;background:#8fffdc;box-shadow:0 0 0 5px rgba(143,255,220,.12);animation:v2Pulse 1.8s infinite}
.v2-welcome>div>strong{display:block;font-size:25px;letter-spacing:-.025em}.v2-welcome p{max-width:650px;margin:6px 0 0;color:#d8fff7;font-size:12px}.v2-today{min-width:135px;padding:15px 18px;border:1px solid rgba(255,255,255,.2);border-radius:17px;text-align:center;background:rgba(255,255,255,.11);backdrop-filter:blur(6px)}.v2-today span,.v2-today small{display:block}.v2-today span{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#cafff3}.v2-today strong{display:block;font-size:30px;line-height:1.1;margin:4px 0}.v2-today small{font-size:10px;color:#d9fff7}
.v2-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:18px}
.v2-stat-card{min-height:151px;padding:18px;border-radius:19px;background:#fff;display:grid;grid-template-columns:47px minmax(0,1fr);grid-template-rows:1fr auto;gap:10px 13px;position:relative;overflow:hidden;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;border:1px solid #e4edf2!important;box-shadow:var(--ui-card-shadow)!important}
.v2-stat-card:before{content:"";position:absolute;width:98px;height:98px;border-radius:50%;right:-46px;top:-45px;background:var(--stat-soft,#ebfaf7)}
.v2-stat-card:hover{transform:translateY(-5px)!important;box-shadow:var(--ui-card-shadow-hover)!important;border-color:#cdebe4!important}
.v2-stat-icon{width:47px;height:47px;border-radius:15px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--stat-a,#16a88f),var(--stat-b,#0a8177));box-shadow:0 10px 21px color-mix(in srgb,var(--stat-a,#16a88f) 24%,transparent)}.v2-stat-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v2-stat-total{--stat-a:#2fc9a4;--stat-b:#0ea487;--stat-soft:#e9fbf6}.v2-stat-daftar{--stat-a:#19a9c7;--stat-b:#087f9e;--stat-soft:#e9f8fc}.v2-stat-rekomendasi{--stat-a:#42c763;--stat-b:#14933e;--stat-soft:#edfbed}.v2-stat-month{--stat-a:#9865eb;--stat-b:#7141cb;--stat-soft:#f2ecfd}
.v2-stat-content{min-width:0}.v2-stat-content small,.v2-stat-content strong,.v2-stat-content em{display:block}.v2-stat-content small{font-size:11px;font-weight:750;color:#5b687b}.v2-stat-content strong{font-size:29px;line-height:1.05;margin:7px 0 8px;color:#17243c;letter-spacing:-.035em}.v2-stat-content em{font-style:normal;font-size:9px;color:#7b8796}.v2-stat-content em b,.v2-stat-content em.is-up{color:#17935b}.v2-stat-content em.is-down{color:#c54545}
.v2-stat-link{grid-column:1/-1;padding-top:10px;border-top:1px solid #edf2f5;display:flex;align-items:center;justify-content:space-between;font-size:9px;font-weight:800;color:#728091}.v2-stat-link b{width:23px;height:23px;border-radius:8px;display:grid;place-items:center;background:#edf8f5;color:#0e7d71}
.v2-main-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(285px,.62fr);gap:17px;margin-bottom:17px}.v2-lower-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);gap:17px}
.v2-panel{background:#fff;border:1px solid #e3ebf0!important;border-radius:20px;box-shadow:var(--ui-card-shadow)!important;overflow:hidden;transition:box-shadow .25s,border-color .25s}.v2-panel:hover{box-shadow:0 18px 44px rgba(31,63,82,.105)!important;border-color:#d8e6eb!important}
.v2-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:20px 21px 12px}.v2-panel-head.compact{align-items:center;padding-bottom:16px;border-bottom:1px solid #edf2f5}.v2-panel-head span{display:block;font-size:8px;font-weight:850;letter-spacing:.14em;color:#15907f}.v2-panel-head h2{margin:4px 0 0;font-size:16px;letter-spacing:-.015em;color:#1a2940}.v2-panel-head p{font-size:10px;color:#8490a1;margin:4px 0 0}.v2-panel-head>a{padding:7px 10px;border:1px solid #d9e8e5;border-radius:9px;color:#0c7a6f;font-size:9px;font-weight:800;background:#f7fcfa}.v2-panel-head>a:hover{background:#ebf9f5}
.v2-legend{display:flex;gap:12px;padding:7px 9px;border-radius:10px;background:#f7fafb}.v2-legend span{display:flex;align-items:center;gap:5px;color:#6b7789;font-size:8px;letter-spacing:0;text-transform:none}.v2-legend i,.v2-composition-list i{width:8px;height:8px;border-radius:50%}.v2-legend i.daftar,.v2-composition-list i.daftar{background:#16aa91}.v2-legend i.rekomendasi,.v2-composition-list i.rekomendasi{background:#f3a51d}
.v2-chart-area{height:285px;padding:2px 17px 4px}.v2-chart-area canvas{width:100%!important;height:100%!important}.v2-chart-insight{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:11px;align-items:center;margin:4px 18px 18px;padding:12px 14px;border:1px solid #d4eee8;border-radius:13px;background:linear-gradient(135deg,#effbf8,#f9fffd)}.v2-insight-icon{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;background:#dff7f1;color:#0c8a78}.v2-insight-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.v2-chart-insight strong{font-size:10px}.v2-chart-insight p{font-size:9px;color:#748393;margin:2px 0 0}.v2-chart-insight>a{font-size:9px;font-weight:800;color:#0e7e72}
.v2-donut-wrap{display:grid;place-items:center;padding:14px 0}.v2-donut{width:168px;height:168px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#18ad92 0 var(--daftar-angle),#f4a51c var(--daftar-angle) 100%);box-shadow:0 12px 28px rgba(20,117,104,.11);position:relative}.v2-donut:after{content:"";position:absolute;inset:32px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #edf1f4}.v2-donut>div{position:relative;z-index:1;text-align:center}.v2-donut strong,.v2-donut span{display:block}.v2-donut strong{font-size:26px}.v2-donut span{font-size:9px;color:#7e8a98}.v2-donut.empty{background:#edf2f4}
.v2-composition-list{display:grid;padding:0 20px 15px}.v2-composition-list>a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #edf2f5}.v2-composition-list>a:last-child{border-bottom:0}.v2-composition-list span{display:flex;align-items:center;gap:8px;font-size:10px;color:#465569}.v2-composition-list strong{font-size:11px}.v2-composition-list small{min-width:38px;text-align:right;font-size:8px;color:#8994a3}.v2-primary-action{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 18px 18px;height:41px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#13aa8e,#087b72);box-shadow:0 10px 22px rgba(8,127,115,.18);font-size:10px;font-weight:800}.v2-primary-action:hover{filter:brightness(1.04);transform:translateY(-1px)}
.v2-latest-list{display:grid}.v2-latest-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto 16px;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid #edf2f5;transition:.18s}.v2-latest-item:last-child{border-bottom:0}.v2-latest-item:hover{background:#f8fcfb;padding-left:21px}.v2-couple-avatar{width:40px;height:40px;position:relative}.v2-couple-avatar b,.v2-couple-avatar i{position:absolute;width:28px;height:28px;border-radius:10px;display:grid;place-items:center;color:#fff;font-size:10px;font-style:normal;border:2px solid #fff}.v2-couple-avatar b{left:0;top:0;background:linear-gradient(135deg,#178fb0,#0c7191)}.v2-couple-avatar i{right:0;bottom:0;background:linear-gradient(135deg,#ef9b7d,#db6d74)}.v2-latest-copy{min-width:0}.v2-latest-copy strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;color:#25364c}.v2-latest-copy strong em{font-style:normal;color:#9aa5b1;font-weight:500}.v2-latest-copy small{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:8px;color:#8793a2}.v2-latest-copy small svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.v2-service-badge{padding:5px 8px;border-radius:999px;font-size:8px;font-weight:800;white-space:nowrap}.v2-service-badge.daftar{color:#087566;background:#e6f8f3}.v2-service-badge.rekomendasi{color:#a66300;background:#fff4d9}.v2-item-more{color:#9ba7b5;font-size:16px}.v2-empty{text-align:center;padding:45px 20px;color:#8290a0}.v2-empty span{font-size:24px}.v2-empty strong{display:block;color:#293a50;margin-top:7px}.v2-empty p{font-size:10px}.v2-empty a{display:inline-block;padding:7px 11px;border-radius:9px;background:#0d8276;color:#fff;font-size:9px;font-weight:800}
.v2-info-list{padding:4px 18px}.v2-info-item{display:grid;grid-template-columns:39px minmax(0,1fr);gap:11px;padding:13px 0;border-bottom:1px solid #edf2f5}.v2-info-item:last-child{border-bottom:0}.v2-info-item>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center}.v2-info-item>span.green{color:#0d967d;background:#e8f9f5}.v2-info-item>span.blue{color:#2086bd;background:#eaf6fd}.v2-info-item>span.purple{color:#7b4ce1;background:#f2edfd}.v2-info-item svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.v2-info-item strong{display:block;font-size:10px}.v2-info-item p{font-size:9px;color:#788596;margin:3px 0;line-height:1.5}.v2-info-item small{font-size:8px;color:#a0a9b4}.v2-quick-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:14px 18px 18px}.v2-quick-row>a{display:grid;grid-template-columns:29px minmax(0,1fr);column-gap:8px;padding:11px;border:1px solid #e2ebef;border-radius:12px;background:#f9fbfc}.v2-quick-row>a:hover{border-color:#bfe4dc;background:#f3fbf9}.v2-quick-row span{grid-row:1/3;width:28px;height:28px;border-radius:9px;background:#e2f7f1;color:#0b8576;display:grid;place-items:center;font-weight:800}.v2-quick-row strong{font-size:9px}.v2-quick-row small{font-size:7px;color:#8c97a4}
@keyframes v2Pulse{0%,100%{box-shadow:0 0 0 4px rgba(143,255,220,.13)}50%{box-shadow:0 0 0 9px rgba(143,255,220,0)}}
@media(max-width:1250px){.v2-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v2-main-grid,.v2-lower-grid{grid-template-columns:1fr}.topbar-scene{width:45%}}
@media(max-width:900px){.sidebar{width:286px}.main-area{margin-left:0}.topbar{height:82px;min-height:82px}.dashboard-topbar{height:100px;min-height:100px}.topbar-scene{opacity:.55;width:52%}.content{padding:18px}.v2-welcome{min-height:115px}.v2-main-grid,.v2-lower-grid{gap:14px}}
@media(max-width:650px){.topbar-scene{display:none}.dashboard-topbar{height:88px;min-height:88px}.topbar-heading h1{font-size:21px}.v2-welcome{padding:21px;align-items:flex-start}.v2-welcome>div>strong{font-size:20px}.v2-today{min-width:105px}.v2-stat-grid{grid-template-columns:1fr}.v2-main-grid,.v2-lower-grid{display:block}.v2-panel{margin-bottom:14px}.v2-chart-area{height:245px}.v2-chart-insight{grid-template-columns:35px minmax(0,1fr)}.v2-chart-insight>a{grid-column:2}.v2-latest-item{grid-template-columns:40px minmax(0,1fr) 16px}.v2-service-badge{display:none}.v2-quick-row{grid-template-columns:1fr}}
@media(max-width:430px){.content{padding:13px}.v2-welcome{display:block}.v2-today{margin-top:15px;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;text-align:left}.v2-today small{text-align:right}.v2-stat-card{min-height:140px}.v2-panel-head{padding:17px 16px 11px}.v2-legend{display:none}.v2-chart-area{padding-inline:8px}.v2-donut{width:150px;height:150px}.v2-latest-item{padding-inline:14px}}
@media(prefers-reduced-motion:reduce){.v2-live i{animation:none}.v2-stat-card,.v2-panel,.nav-link,.quick-action-card{transition:none}}


/* =========================================================
   Hotfix Dashboard Premium v2.3
   ========================================================= */
.brand-mark{font-size:17px;font-weight:900;letter-spacing:.04em}
.brand-mark span{display:inline-block;transform:translateY(1px)}
.topbar{background:rgba(255,255,255,.94);backdrop-filter:blur(18px)}
.topbar-heading h1{font-weight:800}
.v2-welcome{border:1px solid #d6ece7;box-shadow:0 18px 38px rgba(20,67,86,.06)}
.v2-welcome strong{font-weight:800}
.v2-stat-card,.v2-panel,.user-card,.logout-link,.nav-link{transition:all .25s ease}
.v2-stat-card:hover,.v2-panel:hover{transform:translateY(-4px)}
.v2-panel-head h2{font-weight:800}
.v2-latest-item:nth-child(even){background:linear-gradient(180deg,#fbfdfd,#f8fbfc)}
.v2-latest-item:hover{background:#eefbf8}
.v2-info-panel .v2-panel-head{background:linear-gradient(180deg,#fbfffe,#f4fbfa)}
.v2-info-item strong{font-size:11px}
.v2-quick-row a{box-shadow:0 10px 22px rgba(16,96,88,.05)}
.v2-primary-action span{font-size:16px;line-height:1}
.footer{background:transparent;color:#7b8794}
.footer span:last-child{font-weight:700;color:#0c7a6f}
@media (max-width:900px){.sidebar{box-shadow:22px 0 40px rgba(1,39,49,.32)}}


/* =========================================================
   Dashboard Refinement Premium v2.5
   ========================================================= */
.dashboard-v2{position:relative}
.dashboard-v2:before{content:"";position:absolute;inset:0 auto auto 0;width:42%;height:240px;background:radial-gradient(circle at left top,rgba(44,208,175,.08),transparent 72%);pointer-events:none}
.dashboard-v2:after{content:"";position:absolute;right:0;top:0;width:320px;height:260px;background:radial-gradient(circle at 70% 10%,rgba(39,191,163,.10),transparent 70%);pointer-events:none}
.v2-welcome,.v2-stat-card,.v2-panel{position:relative;z-index:1}
.v2-welcome{background:linear-gradient(135deg,#ffffff 0%,#f8fefd 65%,#eefaf7 100%);border-radius:24px;overflow:hidden}
.v2-welcome:before{content:"";position:absolute;right:-40px;top:-56px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(38,200,165,.18),rgba(38,200,165,0) 72%)}
.v2-welcome:after{content:"";position:absolute;left:40%;bottom:-72px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(19,155,181,.10),rgba(19,155,181,0) 72%)}
.v2-live{box-shadow:0 8px 18px rgba(20,151,126,.12)}
.v2-today{background:linear-gradient(135deg,#ffffff,#f4fffb);border:1px solid #d4eee7;box-shadow:0 12px 24px rgba(13,128,116,.08)}
.v2-today strong{font-size:38px;background:linear-gradient(135deg,#0b8d7f,#14b997);-webkit-background-clip:text;background-clip:text;color:transparent}
.v2-stat-card{background:linear-gradient(180deg,#fff 0%,#fcfefe 100%)}
.v2-stat-card:after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--stat-a,#2fc9a4),transparent 78%);opacity:.75}
.v2-stat-card:hover .v2-stat-icon{transform:translateY(-2px) scale(1.04)}
.v2-stat-link{margin-top:2px}
.v2-panel{background:linear-gradient(180deg,#ffffff 0%,#fcfefe 100%)}
.v2-panel-head{background:linear-gradient(180deg,#ffffff 0%,#fbfdfd 100%)}
.v2-chart-panel .v2-panel-head,.v2-latest-panel .v2-panel-head{border-bottom:1px solid #edf2f5}
.v2-chart-area{padding-top:10px}
.v2-chart-insight{box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.v2-composition-panel .v2-donut-wrap{padding-top:20px}
.v2-donut{box-shadow:0 14px 34px rgba(17,120,108,.14), inset 0 2px 10px rgba(255,255,255,.35)}
.v2-composition-list a:hover{padding-left:6px}
.v2-primary-action{position:relative;overflow:hidden}
.v2-primary-action:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.22) 50%,transparent 80%);transform:translateX(-120%);transition:transform .7s ease}
.v2-primary-action:hover:before{transform:translateX(120%)}
.v2-latest-panel .v2-panel-head,.v2-info-panel .v2-panel-head{padding-bottom:14px}
.v2-latest-list{padding:8px 0}
.v2-latest-item{border-bottom:1px solid #edf3f6}
.v2-latest-item:hover{box-shadow:inset 4px 0 0 #1ab89b}
.v2-couple-avatar b,.v2-couple-avatar i{box-shadow:0 6px 14px rgba(28,67,78,.18)}
.v2-item-more{display:grid;place-items:center;width:20px;height:20px;border-radius:7px;background:#f4f7fa}
.v2-info-panel{background:linear-gradient(180deg,#ffffff 0%,#fbfefd 100%)}
.v2-info-list{padding-top:6px}
.v2-info-item{align-items:flex-start}
.v2-info-item>span{box-shadow:0 8px 20px rgba(31,78,92,.08)}
.v2-quick-row{padding-top:10px}
.v2-quick-row a{background:linear-gradient(180deg,#ffffff 0%,#f8fcfc 100%)}
.v2-quick-row a:hover{transform:translateY(-2px);box-shadow:0 16px 26px rgba(21,99,97,.08)}
.v2-quick-row span{box-shadow:0 8px 18px rgba(11,133,118,.14)}
.topbar-scene svg{filter:drop-shadow(0 12px 20px rgba(50,154,137,.08))}
.topbar-badge{background:linear-gradient(135deg,#e9fbf7,#d8f6ee);border:1px solid #c3ece1}
.brand-mark{position:relative;overflow:hidden}
.brand-mark:before{content:"";position:absolute;inset:-20% auto auto -40%;width:80%;height:180%;background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.8) 50%,transparent 100%);transform:rotate(22deg)}
.nav-link.active .nav-indicator{box-shadow:0 0 0 6px rgba(191,249,237,.10),0 0 18px rgba(191,249,237,.55)}
.user-card{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.06))}
.logout-link{box-shadow:0 12px 24px rgba(3,44,51,.18)}
.footer{border-top:1px solid rgba(223,232,238,.9)}
@keyframes floatSoft{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.v2-stat-card:nth-child(1){animation:floatSoft 5.2s ease-in-out infinite}
.v2-stat-card:nth-child(2){animation:floatSoft 5.8s ease-in-out infinite}
.v2-stat-card:nth-child(3){animation:floatSoft 6.1s ease-in-out infinite}
.v2-stat-card:nth-child(4){animation:floatSoft 6.5s ease-in-out infinite}
@media (max-width:900px){.v2-stat-card:nth-child(n){animation:none}.v2-welcome:before,.v2-welcome:after,.dashboard-v2:before,.dashboard-v2:after{display:none}}
@media (prefers-reduced-motion:reduce){.v2-stat-card:nth-child(n),.v2-primary-action:before{animation:none;transition:none}}


/* =========================================================
   Dashboard Modern Luxury v2.6
   ========================================================= */
body.dashboard-body,
body.dashboard-v2-body{background:
  radial-gradient(circle at 10% 8%, rgba(41, 207, 169, .10), transparent 22%),
  radial-gradient(circle at 90% 6%, rgba(19, 155, 181, .09), transparent 20%),
  linear-gradient(180deg, #f5fbfc 0%, #f2f7fa 45%, #eef4f8 100%)}
.app-shell{background:transparent}
.sidebar{border-right:1px solid rgba(255,255,255,.10);background:
  linear-gradient(180deg,#0aa08a 0%,#087d79 34%,#075c6c 68%,#083f52 100%)}
.sidebar:before{opacity:.9}
.sidebar-pattern{opacity:.38}
.brand{margin-bottom:8px}
.brand-mark{width:54px;height:54px;border-radius:18px;background:linear-gradient(145deg,#ffffff 0%,#effdfa 100%);box-shadow:0 14px 34px rgba(0,35,44,.22), inset 0 1px 0 rgba(255,255,255,.85)}
.brand-copy strong{font-size:20px;font-weight:800}
.brand-copy span{font-size:12px;letter-spacing:.02em}
.nav-caption{margin-top:18px;margin-bottom:10px;color:rgba(223,255,249,.64)}
.nav-link{min-height:56px;padding:11px 13px;border-radius:17px;background:rgba(255,255,255,.02)}
.nav-link:hover{background:rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.nav-link.active{background:linear-gradient(135deg,#26d3aa 0%,#11b8a1 48%,#0aa3a2 100%);box-shadow:0 18px 34px rgba(0,39,47,.26), inset 0 1px 0 rgba(255,255,255,.28)}
.nav-link.active .nav-icon{background:rgba(255,255,255,.20)}
.nav-indicator{width:7px;height:7px}
.user-card{border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.05));border-color:rgba(255,255,255,.16);box-shadow:0 10px 26px rgba(2,42,50,.14)}
.user-card .avatar{width:46px;height:46px;font-size:15px}
.logout-link{height:48px;border-radius:15px;background:linear-gradient(135deg,rgba(35,190,164,.18),rgba(255,255,255,.04));border-color:rgba(156,248,232,.24)}
.main-area{padding-bottom:14px}
.topbar{margin:18px 18px 0 18px;border:1px solid rgba(220,231,236,.95);border-radius:28px;height:100px;min-height:100px;padding:0 34px;box-shadow:0 16px 40px rgba(27,56,78,.08)}
.dashboard-topbar{height:158px;min-height:158px}
.topbar-heading h1{font-size:31px;font-weight:850;letter-spacing:-.04em}
.topbar-heading p{font-size:13px;color:#6e7e90;font-weight:600}
.topbar-heading p svg{width:17px;height:17px}
.topbar-scene{right:16px;width:40%;max-width:470px;opacity:1}
.topbar-scene svg{filter:drop-shadow(0 20px 30px rgba(46,154,138,.10))}
.content{padding:20px 18px 18px}
.dashboard-v2{display:block}
.v2-welcome{padding:26px 28px;border-radius:26px;min-height:138px;background:
  linear-gradient(135deg,#ffffff 0%,#f9ffff 55%,#eefbf8 100%);box-shadow:0 18px 42px rgba(19,69,88,.08);border:1px solid #d8ece8}
.v2-welcome>div>strong{font-size:28px;letter-spacing:-.03em;margin-top:10px}
.v2-welcome p{font-size:14px;max-width:720px;color:#607287}
.v2-live{padding:8px 12px;border-radius:999px;background:#ecfbf7;color:#0d8a78;font-size:11px;letter-spacing:.05em}
.v2-live i{width:9px;height:9px;background:#1ac89e;box-shadow:0 0 0 5px rgba(26,200,158,.13)}
.v2-today{min-width:155px;padding:18px 20px;border-radius:22px}
.v2-today span{font-size:11px;letter-spacing:.08em;font-weight:800;color:#7a889a}
.v2-today strong{font-size:42px;line-height:1}
.v2-today small{font-size:12px;color:#6a788a}
.v2-stat-grid{gap:18px;margin:18px 0}
.v2-stat-card{min-height:176px;padding:20px;border-radius:22px;box-shadow:0 16px 36px rgba(20,58,78,.08)!important;border:1px solid #dfebf0!important}
.v2-stat-card:before{width:116px;height:116px;right:-52px;top:-52px;opacity:.95}
.v2-stat-card:after{left:20px;right:20px;height:5px;opacity:.82}
.v2-stat-icon{width:54px;height:54px;border-radius:17px;box-shadow:0 12px 24px color-mix(in srgb,var(--stat-a,#16a88f) 24%,transparent)}
.v2-stat-icon svg{width:25px;height:25px}
.v2-stat-content small{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#738295}
.v2-stat-content strong{font-size:34px;margin:10px 0 8px}
.v2-stat-content em{font-size:11px}
.v2-stat-link{font-size:11px;padding-top:12px}
.v2-stat-link b{width:26px;height:26px;border-radius:9px}
.v2-main-grid,.v2-lower-grid{gap:18px;margin-bottom:18px}
.v2-panel{border-radius:24px;box-shadow:0 18px 40px rgba(22,57,77,.08)!important;border:1px solid #dfebf0!important}
.v2-panel-head{padding:22px 23px 14px}
.v2-panel-head.compact{padding:22px 23px 16px}
.v2-panel-head span{font-size:9px}
.v2-panel-head h2{font-size:20px;font-weight:850}
.v2-panel-head p{font-size:12px}
.v2-panel-head>a{padding:8px 12px;border-radius:11px;font-size:10px}
.v2-legend{padding:9px 11px;border-radius:12px}
.v2-legend span{font-size:10px;font-weight:700}
.v2-chart-area{height:320px;padding:10px 18px 8px}
.v2-chart-insight{grid-template-columns:42px minmax(0,1fr) auto;gap:12px;padding:14px 16px;border-radius:16px}
.v2-insight-icon{width:40px;height:40px;border-radius:13px}
.v2-insight-icon svg{width:20px;height:20px}
.v2-chart-insight strong{font-size:12px}
.v2-chart-insight p,.v2-chart-insight a{font-size:11px}
.v2-donut{width:186px;height:186px}
.v2-donut:after{inset:35px}
.v2-donut strong{font-size:31px}
.v2-donut span{font-size:11px}
.v2-composition-list{padding:4px 21px 16px}
.v2-composition-list a{padding:12px 0}
.v2-composition-list span{font-size:12px;font-weight:700}
.v2-composition-list strong{font-size:13px}
.v2-composition-list small{font-size:10px}
.v2-primary-action{height:46px;border-radius:14px;font-size:12px}
.v2-latest-list{padding:6px 0}
.v2-latest-item{grid-template-columns:46px minmax(0,1fr) auto 20px;gap:12px;padding:14px 20px}
.v2-couple-avatar{width:44px;height:44px}
.v2-couple-avatar b,.v2-couple-avatar i{width:30px;height:30px;font-size:11px}
.v2-latest-copy strong{font-size:13px}
.v2-latest-copy small{font-size:10px}
.v2-service-badge{padding:6px 10px;font-size:9px;letter-spacing:.02em}
.v2-item-more{font-size:18px}
.v2-empty{padding:50px 20px}
.v2-empty strong{font-size:18px}
.v2-empty p,.v2-empty a{font-size:11px}
.v2-info-list{padding:6px 20px 2px}
.v2-info-item{grid-template-columns:44px minmax(0,1fr);gap:13px;padding:15px 0}
.v2-info-item>span{width:42px;height:42px;border-radius:14px}
.v2-info-item svg{width:20px;height:20px}
.v2-info-item strong{font-size:13px}
.v2-info-item p{font-size:11px}
.v2-info-item small{font-size:10px}
.v2-quick-row{gap:12px;padding:14px 20px 20px}
.v2-quick-row a{padding:13px 12px;border-radius:15px}
.v2-quick-row span{width:30px;height:30px;border-radius:10px}
.v2-quick-row strong{font-size:11px}
.v2-quick-row small{font-size:9px}
.footer{margin:0 18px 0 18px;padding:18px 8px 10px;background:transparent;border-top:0;font-size:12px}
@media(max-width:1250px){.topbar-scene{width:34%}.v2-welcome>div>strong{font-size:24px}.v2-stat-content strong{font-size:30px}}
@media(max-width:900px){.topbar{margin:10px 10px 0 10px;height:88px;min-height:88px;border-radius:22px;padding:0 18px}.dashboard-topbar{height:110px;min-height:110px}.content{padding:14px 10px 12px}.footer{margin:0 10px}.v2-welcome{padding:22px}.v2-main-grid,.v2-lower-grid{display:block}.v2-panel{margin-bottom:16px}}
@media(max-width:650px){.v2-welcome>div>strong{font-size:22px}.v2-welcome p{font-size:12px}.v2-today strong{font-size:34px}.v2-stat-card{min-height:156px}.v2-stat-content strong{font-size:28px}.v2-panel-head h2{font-size:18px}.v2-chart-area{height:260px}.v2-donut{width:164px;height:164px}}


/* =========================================================
   Dashboard Greeting & Live Clock v2.7
   ========================================================= */
.dashboard-topbar .topbar-heading h1{font-size:38px!important;line-height:1.05;font-weight:900!important;letter-spacing:-.05em!important}
.v2-greeting-copy{min-width:0;max-width:62%}
.v2-greeting-copy>strong{display:block;font-size:31px!important;line-height:1.2;color:#16314a!important}
.v2-greeting-copy>strong #dashboardGreeting{background:linear-gradient(135deg,#087f73,#18b892);-webkit-background-clip:text;background-clip:text;color:transparent}
.dashboard-live-clock{position:relative;z-index:2;display:grid;grid-template-columns:54px minmax(155px,1fr) auto;align-items:center;gap:14px;min-width:380px;padding:16px 18px;border:1px solid rgba(191,229,220,.95);border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(238,251,247,.96));box-shadow:0 16px 34px rgba(23,95,93,.10);backdrop-filter:blur(14px)}
.clock-icon{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#18b892,#087f73);box-shadow:0 12px 24px rgba(8,127,115,.22)}
.clock-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.clock-copy span,.clock-copy strong,.clock-copy small,.clock-today span,.clock-today strong,.clock-today small{display:block}
.clock-copy span{font-size:10px;font-weight:850;letter-spacing:.10em;text-transform:uppercase;color:#718193}
.clock-copy strong{font-size:28px;line-height:1.05;margin:4px 0 5px;color:#172b42;font-variant-numeric:tabular-nums;letter-spacing:.035em}
.clock-copy small{font-size:10px;color:#728093}
.clock-today{min-width:74px;padding-left:15px;border-left:1px solid #dbeae6;text-align:center}
.clock-today span{font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.09em;color:#7d8a99}
.clock-today strong{font-size:25px;line-height:1.05;margin:4px 0;color:#0c8578}
.clock-today small{font-size:9px;color:#80909f}
@media(max-width:1250px){.dashboard-topbar .topbar-heading h1{font-size:34px!important}.v2-greeting-copy{max-width:56%}.v2-greeting-copy>strong{font-size:27px!important}.dashboard-live-clock{min-width:345px;grid-template-columns:48px minmax(140px,1fr) auto}.clock-icon{width:48px;height:48px}.clock-copy strong{font-size:25px}}
@media(max-width:900px){.dashboard-topbar .topbar-heading h1{font-size:29px!important}.v2-welcome{display:block}.v2-greeting-copy{max-width:none}.dashboard-live-clock{margin-top:18px;width:100%;min-width:0}.v2-greeting-copy>strong{font-size:24px!important}}
@media(max-width:560px){.dashboard-topbar .topbar-heading h1{font-size:26px!important}.dashboard-live-clock{grid-template-columns:46px minmax(0,1fr);padding:14px}.clock-today{grid-column:1/-1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px 0 0;border-left:0;border-top:1px solid #dbeae6;text-align:left}.clock-today small{text-align:right}.clock-copy strong{font-size:23px}.v2-greeting-copy>strong{font-size:21px!important}}

/* Pilihan lokasi akad nikah */
.akad-grid [data-akad-location-type]{font-weight:800;color:#154e49;background:#fbfffe}.akad-grid [data-akad-location-address]{background:linear-gradient(135deg,#eef9f6,#f8fffd)!important;border-color:#b9ded6!important;color:#164e49;font-weight:700;cursor:not-allowed}.akad-grid #akadLocationHint{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:6px 9px;border-radius:9px;background:#eaf8f4;color:#39746c;font-weight:600}

/* Statistik tempat akad dan filter periode v2.9 */
.statistics-filter-modern{align-items:flex-start}.statistics-filter-copy{max-width:420px}.statistics-advanced-filter{display:grid;grid-template-columns:110px 145px 155px 155px auto;gap:12px;align-items:end}.statistics-advanced-filter .form-group label{font-size:11px;margin-bottom:5px}.statistics-advanced-filter .form-control,.statistics-advanced-filter .form-select{min-height:42px}.statistics-filter-actions{display:flex;gap:8px}.statistics-filter-actions .btn{white-space:nowrap;min-height:42px}.statistics-period-badge{display:flex;align-items:center;gap:10px;margin:-8px 0 18px;padding:10px 14px;border:1px solid #cfe9e3;border-radius:13px;background:linear-gradient(135deg,#f0fbf8,#fff);color:#56706d;font-size:12px}.statistics-period-badge span{font-weight:700}.statistics-period-badge strong{color:#0c746a}.statistics-place-card{margin-bottom:22px}.statistics-place-wrap{min-height:380px}.statistics-place-card .card-header{background:linear-gradient(135deg,#ffffff,#f1fbf8)}
@media(max-width:1280px){.statistics-filter-row.statistics-filter-modern{display:block}.statistics-filter-copy{max-width:none;margin-bottom:16px}.statistics-advanced-filter{grid-template-columns:repeat(4,minmax(120px,1fr))}.statistics-filter-actions{grid-column:1/-1;justify-content:flex-end}}
@media(max-width:760px){.statistics-advanced-filter{grid-template-columns:1fr 1fr}.statistics-filter-actions{grid-column:1/-1}.statistics-filter-actions .btn{flex:1}.statistics-period-badge{align-items:flex-start;flex-direction:column;gap:2px}}
@media(max-width:480px){.statistics-advanced-filter{grid-template-columns:1fr}.statistics-filter-actions{grid-column:auto;flex-direction:column}.statistics-place-wrap{min-height:320px}}


/* Dashboard Publik v3.0 */
.public-dashboard-body{margin:0;background:#f3f8fa;color:#17243b;font-family:Inter,Segoe UI,Arial,sans-serif}.public-nav{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,5vw);background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid #e1ebef;position:sticky;top:0;z-index:10}.public-brand{display:flex;align-items:center;gap:12px}.public-brand>span{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:#fff;font-weight:900;background:linear-gradient(135deg,#16b596,#087d79);box-shadow:0 10px 24px rgba(8,125,121,.22)}.public-brand strong,.public-brand small{display:block}.public-brand strong{font-size:15px}.public-brand small{font-size:11px;color:#718094}.public-nav-actions{display:flex;align-items:center;gap:14px}.public-nav-actions>span{padding:9px 13px;border-radius:11px;background:#eef9f6;color:#08796f;font-weight:800;font-size:12px}.public-nav-actions>a{padding:10px 16px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#15ad91,#08776f);font-size:12px;font-weight:800;box-shadow:0 10px 22px rgba(8,119,111,.18)}.public-dashboard{width:min(1460px,calc(100% - 40px));margin:24px auto}.public-hero{min-height:330px;padding:48px;display:grid;grid-template-columns:1.4fr .6fr;align-items:center;gap:30px;border:1px solid #d9ebe7;border-radius:32px;background:radial-gradient(circle at 82% 18%,rgba(74,218,187,.2),transparent 28%),linear-gradient(135deg,#fff,#f2fdf9);box-shadow:0 22px 55px rgba(24,66,84,.09);overflow:hidden}.public-kicker,.public-section-title>span{font-size:10px;font-weight:900;letter-spacing:.16em;color:#118b79}.public-hero h1{font-size:43px;line-height:1.12;margin:12px 0;color:#17243b;letter-spacing:-.04em}.public-hero h1 b{color:#0b8b7b}.public-hero p{font-size:15px;color:#66768a;max-width:700px}.public-hero-actions{display:flex;gap:11px;margin-top:24px}.public-hero-actions a{padding:12px 18px;border-radius:13px;background:#0c897b;color:#fff;font-size:12px;font-weight:800}.public-hero-actions a.outline{background:#fff;color:#0c7c72;border:1px solid #bfe7df}.public-hero-summary{display:grid;grid-template-columns:1fr 1fr;gap:14px}.public-hero-summary article{padding:24px;border-radius:22px;background:rgba(255,255,255,.86);border:1px solid #d9ece7;box-shadow:0 15px 30px rgba(27,79,85,.08)}.public-hero-summary span,.public-hero-summary strong,.public-hero-summary small{display:block}.public-hero-summary span{font-size:11px;color:#718094;font-weight:800}.public-hero-summary strong{font-size:38px;margin:8px 0;color:#0b897a}.public-hero-summary small{color:#8a96a5}.public-section{margin-top:26px;padding:30px;border-radius:28px;background:#fff;border:1px solid #e0eaef;box-shadow:0 16px 40px rgba(27,60,78,.07)}.public-section-title h2{font-size:28px;margin:7px 0 3px}.public-section-title p{color:#748296;margin:0}.public-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}.public-chart-card{border:1px solid #e1ebef;border-radius:22px;background:linear-gradient(180deg,#fff,#fbfdfd);box-shadow:0 12px 30px rgba(24,61,80,.06);overflow:hidden}.public-chart-card.wide{grid-column:1/-1}.public-chart-card header{padding:19px 20px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eef3f5}.public-chart-card header small{color:#13917f;font-size:9px;font-weight:900;letter-spacing:.13em}.public-chart-card h3{font-size:17px;margin:4px 0}.public-chart-card header>b{padding:7px 10px;border-radius:10px;background:#ecfaf6;color:#0a8174;font-size:11px}.public-canvas{padding:12px 12px 8px;min-height:260px}.public-canvas.tall{min-height:300px}.recommendation{background:linear-gradient(180deg,#fff,#f9fcff)}.public-rec-summary{display:flex;justify-content:space-between;align-items:center;margin:20px 0 15px;padding:16px 18px;border:1px solid #dcebea;border-radius:18px;background:#f6fcfa}.public-rec-summary article small,.public-rec-summary article strong,.public-rec-summary article span{display:block}.public-rec-summary article small{font-size:9px;font-weight:900;color:#168e7e}.public-rec-summary article strong{font-size:30px;color:#17243b}.public-rec-summary article span{font-size:11px;color:#7a8797}.public-filter{display:flex;padding:5px;background:#eaf3f4;border-radius:13px}.public-filter button{border:0;padding:9px 14px;border-radius:9px;background:transparent;color:#617184;font-weight:800;font-size:11px;cursor:pointer}.public-filter button.active{background:#fff;color:#0a8477;box-shadow:0 6px 15px rgba(24,67,84,.10)}.public-footer{display:flex;justify-content:space-between;padding:25px max(24px,5vw);font-size:11px;color:#758397}.login-card:before{content:"";display:block}.login-page .login-card:after{content:"Kembali ke Dashboard Publik";display:block;text-align:center;margin-top:14px;color:#0b7f73;font-size:12px;font-weight:700}
@media(max-width:900px){.public-hero{grid-template-columns:1fr;padding:34px}.public-hero h1{font-size:34px}.public-chart-grid{grid-template-columns:1fr}.public-chart-card.wide{grid-column:auto}}@media(max-width:600px){.public-nav{height:auto;padding:12px 15px}.public-brand strong{font-size:12px}.public-nav-actions>span{display:none}.public-nav-actions>a{padding:9px 11px;font-size:10px}.public-dashboard{width:calc(100% - 20px);margin:10px auto}.public-hero{padding:25px 20px;border-radius:24px}.public-hero h1{font-size:28px}.public-hero-summary{grid-template-columns:1fr}.public-section{padding:20px 14px;border-radius:22px}.public-section-title h2{font-size:23px}.public-rec-summary{align-items:flex-start;gap:12px;flex-direction:column}.public-footer{display:block;text-align:center}.public-footer span{display:block;margin:4px}}


/* =========================================================
   Dashboard Publik Modern Color v3.1
   ========================================================= */
.public-dashboard-body{background:radial-gradient(circle at 12% 8%,rgba(20,184,166,.10),transparent 24%),radial-gradient(circle at 88% 3%,rgba(59,130,246,.08),transparent 20%),linear-gradient(180deg,#f4fbfc 0%,#eff6fa 100%)}
.public-nav{border-radius:0 0 22px 22px;box-shadow:0 10px 30px rgba(25,64,83,.06)}
.public-nav-actions>span{background:linear-gradient(135deg,#e9fbf7,#ddf7f2);border:1px solid #caeee5;box-shadow:0 10px 18px rgba(16,124,116,.08)}
.public-nav-actions>a{background:linear-gradient(135deg,#18b899,#098178);border:1px solid rgba(255,255,255,.22)}
.public-dashboard{width:min(1480px,calc(100% - 34px));margin:20px auto 26px}
.public-hero{position:relative;background:radial-gradient(circle at 85% 15%,rgba(66,214,183,.22),transparent 25%),radial-gradient(circle at 18% 95%,rgba(59,130,246,.14),transparent 24%),linear-gradient(135deg,#ffffff,#f4fdfa);border:1px solid #d7ebe7;box-shadow:0 24px 60px rgba(27,66,84,.09)}
.public-hero:before{content:"";position:absolute;right:-60px;top:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.16),rgba(16,185,129,0) 72%)}
.public-hero:after{content:"";position:absolute;left:52%;bottom:-80px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.12),rgba(59,130,246,0) 72%)}
.public-kicker,.public-section-title>span{font-size:11px;color:#0d8f7d}
.public-hero h1{font-size:46px}.public-hero p{font-size:16px;line-height:1.7}
.public-hero-actions a{box-shadow:0 12px 22px rgba(14,125,116,.12)}
.public-hero-actions a.outline{box-shadow:none}
.public-hero-summary article{position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,253,252,.94));box-shadow:0 18px 32px rgba(28,75,90,.08)}
.public-hero-summary article:before{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-36px;top:-36px;background:rgba(16,185,129,.09)}
.public-hero-summary article:nth-child(2):before{background:rgba(59,130,246,.10)}
.public-hero-summary strong{font-size:42px}
.public-section{position:relative;overflow:hidden}
.public-section:before{content:"";position:absolute;right:-90px;top:-90px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.07),rgba(16,185,129,0) 72%);pointer-events:none}
.public-section-title h2{font-size:30px;font-weight:850;letter-spacing:-.03em}
.public-chart-grid{gap:20px;margin-top:24px}
.public-chart-card{position:relative;border-radius:24px;box-shadow:0 18px 40px rgba(23,60,79,.07);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.public-chart-card:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(21,61,79,.11);border-color:#cfe5e5}
.public-chart-card:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#18b899,#1ea5d2,#7c5cf3,#f4a51d);opacity:.95}
.public-chart-card header{padding:20px 20px 13px;background:linear-gradient(180deg,#ffffff,#fbfdfd)}
.public-chart-card header small{font-size:10px;color:#11917f}
.public-chart-card h3{font-size:18px;font-weight:800}
.public-chart-card header>b{background:linear-gradient(135deg,#eefbf8,#e4f7fb);border:1px solid #d4eceb;color:#0b8275;font-size:11px}
.public-canvas{padding:14px 14px 10px;min-height:280px;background:linear-gradient(180deg,#fff,#fcfefe)}
.public-canvas.tall{min-height:330px}
.public-rec-summary{background:linear-gradient(135deg,#f6fcfa,#f5fbff);box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.public-rec-summary article strong{font-size:34px}
.public-filter{padding:6px;background:#ebf3f5;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.public-filter button{padding:10px 16px;font-size:11px}
.public-filter button.active{background:linear-gradient(135deg,#ffffff,#f8fdfd);color:#098377;border:1px solid #dce9ea}
.public-footer{padding-top:6px;font-size:12px}
@media(max-width:900px){.public-hero h1{font-size:36px}.public-hero p{font-size:14px}.public-section-title h2{font-size:25px}}
@media(max-width:600px){.public-dashboard{width:calc(100% - 16px)}.public-hero{padding:24px 18px}.public-hero h1{font-size:30px}.public-chart-card,.public-section,.public-hero{border-radius:22px}.public-canvas,.public-canvas.tall{min-height:260px}}


/* =========================================================
   Public Dashboard Powerful Background v3.1.1
   ========================================================= */
.public-dashboard-body{
  background:
    radial-gradient(circle at 8% 10%, rgba(16,185,129,.22), transparent 22%),
    radial-gradient(circle at 92% 8%, rgba(59,130,246,.20), transparent 20%),
    radial-gradient(circle at 20% 92%, rgba(245,158,11,.18), transparent 24%),
    radial-gradient(circle at 88% 84%, rgba(139,92,246,.16), transparent 22%),
    linear-gradient(135deg,#e8fffa 0%,#eef9ff 24%,#f5f0ff 48%,#fff8ea 72%,#eefcf7 100%);
  background-attachment: fixed;
  position:relative;
}
.public-dashboard-body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,.26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.15));
}
.public-nav{
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(245,255,252,.88));
  border-bottom:1px solid rgba(208,229,229,.9);
  box-shadow:0 12px 34px rgba(23,60,79,.08);
}
.public-brand>span{
  background:linear-gradient(135deg,#10c3a0,#087a79 58%,#2563eb 100%);
  box-shadow:0 14px 32px rgba(8,125,121,.22);
}
.public-nav-actions>a{
  background:linear-gradient(135deg,#18c2a2,#0d8e85 45%,#1277c8 100%);
  box-shadow:0 14px 26px rgba(8,119,111,.20);
}
.public-nav-actions>span{
  background:linear-gradient(135deg,#e9fffa,#e5f6ff 55%,#f4efff 100%);
  color:#086f74;
}
.public-dashboard{position:relative;z-index:1}
.public-hero{
  background:
    radial-gradient(circle at 85% 18%, rgba(34,197,94,.20), transparent 24%),
    radial-gradient(circle at 70% 82%, rgba(59,130,246,.16), transparent 24%),
    radial-gradient(circle at 18% 20%, rgba(245,158,11,.14), transparent 16%),
    linear-gradient(135deg,#ffffff 0%,#f2fffb 35%,#eef7ff 65%,#f7f2ff 100%);
  border:1px solid #d7ebe7;
  box-shadow:0 26px 60px rgba(27,66,84,.11);
}
.public-hero:before{background:radial-gradient(circle,rgba(16,185,129,.22),rgba(16,185,129,0) 72%)}
.public-hero:after{background:radial-gradient(circle,rgba(59,130,246,.18),rgba(59,130,246,0) 72%)}
.public-hero h1 b{background:linear-gradient(135deg,#0a8f7c,#0f7fa4 60%,#6b4ce6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.public-hero-actions a{background:linear-gradient(135deg,#12b897,#0d8f82 48%,#1077c7 100%)}
.public-hero-actions a.outline{background:rgba(255,255,255,.86);border:1px solid #cbe7e3;color:#0b7c72}
.public-hero-summary article:nth-child(1){background:linear-gradient(180deg,#ffffff,#f2fffb)}
.public-hero-summary article:nth-child(2){background:linear-gradient(180deg,#ffffff,#f2f8ff)}
.public-hero-summary article:nth-child(1) strong{color:#0c897a}
.public-hero-summary article:nth-child(2) strong{color:#2563eb}
.public-section{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,255,255,.94));
  box-shadow:0 18px 44px rgba(27,60,78,.08);
}
.public-section:after{
  content:"";
  position:absolute;
  left:-70px;
  bottom:-70px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(245,158,11,.10),rgba(245,158,11,0) 72%);
  pointer-events:none;
}
.public-chart-card{
  background:linear-gradient(180deg,#ffffff 0%,#fbffff 52%,#f9fcff 100%);
  border:1px solid #ddeaf0;
}
.public-chart-card:before{background:linear-gradient(90deg,#10b981 0%,#06b6d4 33%,#8b5cf6 66%,#f59e0b 100%)}
.public-chart-card header>b{
  background:linear-gradient(135deg,#effff9,#ecf7ff 50%,#f4efff 100%);
  color:#0b7f78;
}
.public-rec-summary{
  background:linear-gradient(135deg,#f5fffb 0%,#f4fbff 55%,#faf5ff 100%);
  border:1px solid #dcebea;
}
.public-filter{
  background:linear-gradient(135deg,#edf6f8,#eef8fb 55%,#f3effd 100%);
}
.public-filter button.active{
  background:linear-gradient(135deg,#ffffff,#faffff);
  box-shadow:0 10px 18px rgba(24,67,84,.10);
}
.public-footer{
  color:#617387;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.24));
}
@media(max-width:600px){
  .public-dashboard-body:before{opacity:.22;background-size:26px 26px}
}


/* Export Excel Data Daftar Nikah v3.2 */
.btn-excel{color:#fff;background:linear-gradient(135deg,#16864b,#0e6f3e);border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 22px rgba(14,111,62,.18)}
.btn-excel:hover{background:linear-gradient(135deg,#197e49,#095f34);box-shadow:0 14px 26px rgba(14,111,62,.24)}
.excel-icon{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:rgba(255,255,255,.18);font-size:11px;font-weight:900}


/* Export Excel wajib filter tanggal */
.export-date-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px}.export-date-modal.is-open{display:flex}.export-date-backdrop{position:absolute;inset:0;background:rgba(8,28,42,.58);backdrop-filter:blur(7px)}.export-date-dialog{position:relative;z-index:1;width:min(560px,100%);padding:28px;border:1px solid #d9e8e8;border-radius:24px;background:linear-gradient(180deg,#fff,#f8fdfc);box-shadow:0 30px 80px rgba(8,35,49,.25);animation:exportModalIn .25s ease}.export-date-close{position:absolute;right:16px;top:14px;width:36px;height:36px;border:0;border-radius:11px;background:#edf4f5;color:#526477;font-size:22px;cursor:pointer}.export-date-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:20px;background:linear-gradient(135deg,#22b573,#087f5b);box-shadow:0 12px 26px rgba(8,127,91,.22)}.export-date-dialog h2{margin:16px 0 6px;font-size:22px;color:#17283d}.export-date-dialog>p{margin:0 0 20px;color:#6d7c8f;font-size:13px;line-height:1.65}.export-date-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.export-date-hint{margin-top:14px;padding:11px 13px;border-radius:12px;background:#edf9f6;color:#477168;font-size:12px}.export-date-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid #e6eef1}.btn-excel{background:linear-gradient(135deg,#18a96f,#087b57);color:#fff;border:0}.btn-excel:hover{filter:brightness(1.04);box-shadow:0 10px 22px rgba(8,123,87,.18)}.excel-icon{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.18);font-weight:900}@keyframes exportModalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}@media(max-width:560px){.export-date-grid{grid-template-columns:1fr}.export-date-actions{flex-direction:column-reverse}.export-date-actions .btn{width:100%}}


/* =========================================================
   Menu Cetak & Popup v3.3
   ========================================================= */
.nav-link-button{width:100%;border:1px solid transparent;font:inherit;text-align:left;cursor:pointer}
.print-choice-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px}
.print-choice-modal.is-open{display:flex}
.print-choice-backdrop{position:absolute;inset:0;background:rgba(8,24,37,.62);backdrop-filter:blur(8px);animation:printFade .2s ease}
.print-choice-dialog{position:relative;z-index:1;width:min(660px,100%);padding:26px;border:1px solid rgba(255,255,255,.75);border-radius:26px;background:linear-gradient(145deg,#ffffff,#f4fbfa);box-shadow:0 30px 80px rgba(4,33,48,.28);animation:printPop .28s ease}
.print-choice-close{position:absolute;right:16px;top:14px;width:36px;height:36px;border:0;border-radius:12px;background:#eef3f5;color:#526275;font-size:23px;cursor:pointer}
.print-choice-heading{display:grid;grid-template-columns:58px minmax(0,1fr);gap:15px;align-items:center;padding-right:34px;margin-bottom:20px}.print-choice-heading small{font-size:9px;font-weight:900;letter-spacing:.16em;color:#0f8d7d}.print-choice-heading h2{margin:3px 0;font-size:23px;color:#18283d}.print-choice-heading p{margin:0;color:#718094;font-size:12px}.print-choice-symbol{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#17b899,#087d79 65%,#2563eb);box-shadow:0 15px 28px rgba(8,125,121,.22)}.print-choice-symbol svg,.print-choice-card-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.print-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}.print-choice-card{position:relative;overflow:hidden;min-height:188px;padding:20px;border:1px solid #dce9ed;border-radius:20px;background:#fff;box-shadow:0 13px 28px rgba(26,61,79,.07);transition:.24s}.print-choice-card:before{content:"";position:absolute;width:115px;height:115px;border-radius:50%;right:-42px;top:-50px;background:var(--print-soft)}.print-choice-card:hover{transform:translateY(-4px);box-shadow:0 22px 38px rgba(18,75,79,.13);border-color:var(--print-border)}.print-choice-daftar{--print-soft:#e5faf5;--print-border:#9fddd0;--print-main:#0f8d7d}.print-choice-rekomendasi{--print-soft:#e9f3ff;--print-border:#a9c9f4;--print-main:#2563b5}.print-choice-card-icon{position:relative;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:#fff;background:var(--print-main);box-shadow:0 10px 21px color-mix(in srgb,var(--print-main) 22%,transparent)}.print-choice-card strong,.print-choice-card small,.print-choice-card b{position:relative;display:block}.print-choice-card strong{font-size:15px;margin-top:14px;color:#1e3045}.print-choice-card small{font-size:11px;line-height:1.55;color:#738195;margin-top:5px}.print-choice-card b{font-size:10px;margin-top:15px;color:var(--print-main)}body.modal-open{overflow:hidden}@keyframes printFade{from{opacity:0}to{opacity:1}}@keyframes printPop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}@media(max-width:600px){.print-choice-dialog{padding:21px 16px;border-radius:22px}.print-choice-grid{grid-template-columns:1fr}.print-choice-card{min-height:155px}.print-choice-heading{grid-template-columns:48px 1fr}.print-choice-symbol{width:46px;height:46px;border-radius:14px}.print-choice-heading h2{font-size:19px}}


/* =========================================================
   Dokumen Cetak Daftar Nikah v3.4
   ========================================================= */
.print-choice-card.is-rich{display:block;text-decoration:none}
.print-choice-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.print-choice-actions.single-row{justify-content:space-between;align-items:center}
.print-doc-dialog{max-width:860px;padding:28px 28px 26px;border-radius:30px;background:linear-gradient(155deg,rgba(255,255,255,.97),rgba(241,250,249,.98));box-shadow:0 36px 90px rgba(7,35,57,.26), inset 0 1px 0 rgba(255,255,255,.9);overflow:hidden}
.print-doc-dialog::before,.print-doc-dialog::after{content:"";position:absolute;z-index:0;border-radius:50%;pointer-events:none;filter:blur(4px)}
.print-doc-dialog::before{width:220px;height:220px;right:-80px;top:-70px;background:radial-gradient(circle at center,rgba(32,190,159,.16),rgba(32,190,159,0) 70%)}
.print-doc-dialog::after{width:180px;height:180px;left:-70px;bottom:-70px;background:radial-gradient(circle at center,rgba(37,99,235,.12),rgba(37,99,235,0) 72%)}
.print-doc-dialog > *{position:relative;z-index:1}
.print-doc-selector{display:flex;flex-direction:column;gap:9px;margin:14px 0 20px;padding:18px;border:1px solid rgba(195,220,228,.95);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,250,251,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 14px 30px rgba(26,61,79,.06)}
.print-doc-selector label{font-weight:900;color:#203041;font-size:13px;letter-spacing:.01em}
.print-doc-selector select,.print-doc-selector input{width:100%;min-height:52px;padding:14px 16px;border:1px solid #cfe0e6;border-radius:16px;background:linear-gradient(180deg,#ffffff,#f9fcfd);font:inherit;color:#203041;box-shadow:0 8px 18px rgba(15,49,72,.05);transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease}
.print-doc-selector select:hover,.print-doc-selector input:hover{border-color:#b7d8d1}
.print-doc-selector select:focus,.print-doc-selector input:focus{outline:none;border-color:#20be9f;box-shadow:0 0 0 4px rgba(32,190,159,.12),0 10px 24px rgba(15,49,72,.08);transform:translateY(-1px)}
.print-doc-selector small{font-size:12px;color:#6f8092;line-height:1.55;padding:2px 2px 0}
.print-doc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}
.print-doc-btn{position:relative;overflow:hidden;border:1px solid #d6e4ea;background:linear-gradient(180deg,#ffffff,#f7fbfc);color:#14324a;padding:16px 12px;border-radius:18px;font-weight:900;cursor:pointer;box-shadow:0 10px 22px rgba(15,49,72,.07);transition:all .24s ease}
.print-doc-btn::before{content:"";position:absolute;inset:auto -10% 100% auto;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(32,190,159,.14),rgba(32,190,159,0) 70%);transition:transform .26s ease}
.print-doc-btn:hover{transform:translateY(-3px);border-color:#a7dcd1;box-shadow:0 18px 34px rgba(15,49,72,.12);background:linear-gradient(180deg,#ffffff,#effcf9)}
.print-doc-btn:hover::before{transform:translate(-8px,80px)}
.print-doc-btn:active{transform:translateY(-1px) scale(.99)}
@media(max-width:900px){.print-doc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.print-choice-actions.single-row{flex-direction:column;align-items:stretch}.print-doc-dialog{padding:24px 18px 22px}}
@media(max-width:560px){.print-doc-grid{grid-template-columns:1fr}.print-doc-selector{padding:15px;border-radius:18px}.print-doc-dialog{border-radius:24px}}


/* =========================================================
   Logo Kop & Nomor Manual v3.5
   ========================================================= */
.village-logo-preview-row{display:flex;justify-content:center;gap:18px;margin-bottom:14px}.village-logo-preview-row img{width:72px;height:82px;object-fit:contain;border:1px solid #e0e8ed;border-radius:12px;padding:5px;background:#fff}.print-number-preview{padding:13px 15px;border-radius:15px;background:linear-gradient(135deg,#eefbf8,#f3f8ff);border:1px solid #d6ebe8;color:#0d726b;font-size:12px;font-weight:900;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}.print-doc-btn:focus{outline:3px solid rgba(15,118,110,.15);outline-offset:2px}


/* =========================================================
   Template Editor v3.6
   ========================================================= */
.template-editor-layout{display:grid;grid-template-columns:240px minmax(0,1fr) 280px;gap:18px;align-items:start}.template-doc-list,.template-editor-card,.template-placeholder-card{padding:20px}.template-doc-list h3,.template-placeholder-card h3{margin:0 0 14px}.template-doc-link{display:block;padding:12px 13px;border-radius:12px;color:#26394d;border:1px solid transparent;margin-bottom:7px;font-weight:750}.template-doc-link small{display:block;margin-top:3px;color:#8895a4;font-size:10px}.template-doc-link:hover{background:#f3faf8;border-color:#d8ece7}.template-doc-link.active{background:linear-gradient(135deg,#e7faf5,#edf8ff);border-color:#bee6dc;color:#08776e}.template-editor-head{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #e8eef2;padding-bottom:15px;margin-bottom:15px}.template-editor-head small{font-size:9px;font-weight:900;letter-spacing:.12em;color:#0d8a78}.template-editor-head h3{margin:5px 0}.template-editor-head p{margin:0;color:#748294;font-size:12px}.badge-neutral{background:#eef2f5;color:#617083}.template-code-editor{width:100%;min-height:560px;margin-top:8px;padding:16px;border:1px solid #d7e2e8;border-radius:14px;background:#172331;color:#dff7ef;font-family:Consolas,Monaco,monospace;font-size:12px;line-height:1.55;resize:vertical}.template-code-editor:focus{outline:2px solid rgba(20,184,166,.25);border-color:#38bda5}.template-actions{display:flex;gap:10px;margin-top:14px}.placeholder-list{display:flex;flex-wrap:wrap;gap:7px}.placeholder-chip{border:1px solid #d8e6eb;background:#f7fbfc;color:#17675f;border-radius:9px;padding:6px 8px;font-size:10px;font-family:Consolas,monospace;cursor:pointer}.placeholder-chip:hover{background:#eaf9f5;border-color:#b8e1d8}.template-help{margin-top:18px;padding:13px;border-radius:12px;background:#f5f8fa;color:#657486;font-size:11px}.template-help code{background:#e7edf1;padding:1px 4px;border-radius:4px}.template-document{font-family:"Bookman Old Style",Bookman,Georgia,"Times New Roman",serif;font-size:12pt}.template-heading{text-align:center;margin-bottom:20px}.template-heading h1{font-size:12pt;text-transform:uppercase}.template-table{width:100%;border-collapse:collapse}.template-table td{padding:2px 4px;vertical-align:top}.template-table td:first-child{width:235px}.template-signature{width:40%;margin:28px 0 0 auto;text-align:center}.template-signature .signature-space{height:80px}.template-signature .signature-name{display:block;white-space:nowrap;font-size:10pt;border-bottom:1px solid #000}@media(max-width:1200px){.template-editor-layout{grid-template-columns:210px minmax(0,1fr)}.template-placeholder-card{grid-column:1/-1}}@media(max-width:760px){.template-editor-layout{grid-template-columns:1fr}.template-code-editor{min-height:440px}.template-actions{flex-direction:column}}

/* Public Statistik Catin v4.4.2 */
.public-filter-section{background:linear-gradient(135deg,#ffffff,#f5fffc 56%,#f5f9ff)}
.public-stat-filter{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr)) auto;gap:14px;align-items:end;margin-top:22px;padding:20px;border:1px solid #dce9ed;border-radius:20px;background:rgba(248,252,253,.92);box-shadow:inset 0 1px 0 #fff}
.public-stat-filter label{display:block;margin-bottom:7px;color:#405469;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.public-stat-filter select,.public-stat-filter input{width:100%;min-height:45px;border:1px solid #ccdce2;border-radius:12px;padding:10px 12px;background:#fff;color:#1f3348;outline:none}
.public-stat-filter select:focus,.public-stat-filter input:focus{border-color:#18a994;box-shadow:0 0 0 4px rgba(24,169,148,.1)}
.public-filter-actions{display:flex;gap:8px;align-items:center}.public-filter-actions button,.public-filter-actions a{min-height:45px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;padding:10px 15px;font-size:12px;font-weight:800;cursor:pointer}.public-filter-actions button{background:linear-gradient(135deg,#11a88e,#0d7fb4);color:#fff;box-shadow:0 10px 22px rgba(13,127,180,.17)}.public-filter-actions a{background:#eaf0f4;color:#4b6075}
.public-filter-note{margin-top:13px;padding:11px 14px;border-radius:12px;background:#eaf9f5;color:#14675e;font-size:12px;font-weight:700}
.public-data-card{margin-top:22px;border:1px solid #e0eaee;border-radius:20px;background:#fff;box-shadow:0 14px 34px rgba(24,61,80,.06);overflow:hidden}
.public-table-wrap{overflow:auto;max-height:520px}.public-data-table{width:100%;min-width:920px;border-collapse:separate;border-spacing:0}.public-data-table th{position:sticky;top:0;z-index:2;padding:13px 14px;background:linear-gradient(180deg,#ecfaf7,#e8f4f7);color:#385267;font-size:10px;text-transform:uppercase;letter-spacing:.055em;text-align:left;border-bottom:1px solid #d5e5e9}.public-data-table td{padding:13px 14px;border-bottom:1px solid #edf2f4;color:#465b6e;font-size:12px;vertical-align:top}.public-data-table tbody tr:nth-child(even){background:#fbfdfd}.public-data-table tbody tr:hover{background:#f2fbf8}.public-data-table strong{color:#1b3448}.public-empty{text-align:center!important;padding:38px!important;color:#8290a0!important}.public-regis-badge,.public-destination-badge{display:inline-flex;padding:6px 9px;border-radius:9px;font-size:11px;font-weight:800;white-space:nowrap}.public-regis-badge{background:#e9f2ff;color:#2563a8;border:1px solid #cfe0fa}.public-destination-badge{background:#fff6dd;color:#a45a00;border:1px solid #f4dc9f}
.public-chart-legend{display:flex;align-items:center;gap:7px;color:#63758a;font-size:10px;font-weight:800}.public-chart-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}.public-chart-legend i.male{background:#2563eb}.public-chart-legend i.female{background:#ec4899}.public-rekom-chart{margin-top:20px}
@media(max-width:1100px){.public-stat-filter{grid-template-columns:repeat(2,minmax(0,1fr))}.public-filter-actions{grid-column:1/-1}}
@media(max-width:600px){.public-stat-filter{grid-template-columns:1fr;padding:14px}.public-filter-actions{grid-column:auto}.public-filter-actions button,.public-filter-actions a{flex:1}.public-table-wrap{max-height:430px}.public-chart-legend{flex-wrap:wrap;justify-content:flex-end}}

/* Loader animasi akses aplikasi */
html.is-loading, body.is-loading { overflow: hidden; }
.app-loader-overlay{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at top left,rgba(117,224,204,.28),transparent 30%),radial-gradient(circle at bottom right,rgba(20,184,166,.18),transparent 32%),rgba(246,251,250,.98);backdrop-filter:blur(10px);transition:opacity .28s ease,visibility .28s ease;animation:loaderAutoHide .28s ease .72s forwards}
.app-loader-overlay.is-hiding{opacity:0;visibility:hidden;pointer-events:none;animation:none}
.app-loader-overlay.is-hidden{display:none}
.app-loader-card{position:relative;width:min(430px,100%);padding:34px 30px 28px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(239,252,248,.97));border:1px solid rgba(157,226,213,.85);box-shadow:0 28px 80px rgba(18,72,74,.18);text-align:center;overflow:hidden}
.app-loader-card:before,.app-loader-card:after{content:"";position:absolute;border-radius:999px;filter:blur(8px);opacity:.55;pointer-events:none}.app-loader-card:before{width:140px;height:140px;right:-35px;top:-45px;background:radial-gradient(circle,#99ead7 0,rgba(153,234,215,0) 72%)}.app-loader-card:after{width:120px;height:120px;left:-28px;bottom:-35px;background:radial-gradient(circle,#b8f0e3 0,rgba(184,240,227,0) 72%)}
.app-loader-rings{position:relative;width:118px;height:118px;margin:0 auto 16px}.app-loader-rings span{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;animation:loaderSpin 4.5s linear infinite}.app-loader-rings span:first-child{border-top-color:#0f766e;border-right-color:#2dd4bf}.app-loader-rings span:last-child{inset:12px;border-bottom-color:#14b8a6;border-left-color:#99f6e4;animation-direction:reverse;animation-duration:3.4s}
.app-loader-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;font-size:29px;animation:loaderFloat 2.1s ease-in-out infinite}.app-loader-heart{display:inline-block;color:#ef476f;font-size:24px;animation:loaderPulse 1.25s ease-in-out infinite}
.app-loader-text strong,.app-loader-text small{display:block;position:relative;z-index:1}.app-loader-text strong{font-size:24px;line-height:1.15;color:#13313f;margin-bottom:7px;letter-spacing:-.02em}.app-loader-text small{font-size:13px;line-height:1.65;color:#68808f;max-width:290px;margin:0 auto}
.app-loader-progress{position:relative;z-index:1;height:10px;margin:22px auto 0;width:min(240px,100%);background:#e2f3ef;border-radius:999px;overflow:hidden;border:1px solid #d1ebe4}.app-loader-progress span{display:block;height:100%;width:42%;background:linear-gradient(90deg,#0f766e,#14b8a6,#6ee7d0);border-radius:999px;animation:loaderTrack 1.5s ease-in-out infinite}
@keyframes loaderSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes loaderFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes loaderPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
@keyframes loaderTrack{0%{transform:translateX(-115%)}100%{transform:translateX(350%)}}
@keyframes loaderAutoHide{to{opacity:0;visibility:hidden;pointer-events:none}}
@media (max-width:640px){.app-loader-card{padding:28px 20px 22px;border-radius:24px}.app-loader-rings{width:102px;height:102px}.app-loader-icon{font-size:25px}.app-loader-heart{font-size:20px}.app-loader-text strong{font-size:21px}}


/* Halaman Berkas Persyaratan Nikah v4.5.8 */
.public-requirements-link{background:linear-gradient(135deg,#7c3aed,#2563eb)!important;box-shadow:0 10px 24px rgba(79,70,229,.20)!important}
.public-requirements-promo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);align-items:center;gap:30px;background:radial-gradient(circle at 86% 12%,rgba(99,102,241,.13),transparent 28%),linear-gradient(135deg,#fff,#f5fffc 56%,#f3f6ff)}
.public-requirements-promo-copy h2{font-size:30px;margin:8px 0 6px;letter-spacing:-.03em}.public-requirements-promo-copy p{max-width:720px;color:#6f8093;line-height:1.7}.public-requirements-button{display:inline-flex;margin-top:18px;padding:12px 18px;border-radius:14px;background:linear-gradient(135deg,#0d9c87,#2563eb);color:#fff;font-size:12px;font-weight:900;box-shadow:0 12px 25px rgba(37,99,235,.18)}
.public-requirements-promo-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.public-requirements-promo-cards article{padding:20px 14px;border:1px solid #dce8ed;border-radius:20px;text-align:center;background:rgba(255,255,255,.92);box-shadow:0 14px 30px rgba(21,59,80,.07);transition:.25s}.public-requirements-promo-cards article:hover{transform:translateY(-4px);box-shadow:0 20px 38px rgba(21,59,80,.11)}.public-requirements-promo-cards .promo-icon{display:block;font-size:34px;margin-bottom:9px}.public-requirements-promo-cards strong,.public-requirements-promo-cards small{display:block}.public-requirements-promo-cards strong{font-size:13px;color:#182a43}.public-requirements-promo-cards small{font-size:10px;color:#718194;margin-top:3px}
.requirements-page{background:radial-gradient(circle at 8% 6%,rgba(20,184,166,.13),transparent 24%),radial-gradient(circle at 92% 7%,rgba(99,102,241,.10),transparent 23%),linear-gradient(180deg,#f4fbfc,#f3f6fb)}
.requirements-main{width:min(1380px,calc(100% - 40px));margin:28px auto 42px}
.requirements-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:34px;padding:52px;border-radius:34px;border:1px solid #d8ebe7;background:radial-gradient(circle at 86% 18%,rgba(99,102,241,.18),transparent 29%),radial-gradient(circle at 18% 100%,rgba(20,184,166,.15),transparent 27%),linear-gradient(135deg,#fff,#f4fdfa);box-shadow:0 24px 60px rgba(20,58,76,.09)}
.requirements-kicker{font-size:10px;font-weight:900;letter-spacing:.18em;color:#0b8e7d}.requirements-hero h1{font-size:45px;line-height:1.08;margin:12px 0;color:#18243d;letter-spacing:-.045em}.requirements-hero p{font-size:15px;line-height:1.75;color:#687a8f;max-width:760px}.requirements-summary{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.requirements-summary span{display:inline-flex;align-items:center;gap:8px;padding:10px 13px;border-radius:13px;border:1px solid #d8e7e8;background:rgba(255,255,255,.9);font-size:11px;font-weight:800;color:#536b7f}.requirements-summary b{font-size:17px;color:#0b8d7c}
.requirements-hero-visual{display:grid;place-items:center;min-height:210px}.requirements-couple{display:flex;align-items:center;gap:14px;font-size:72px;filter:drop-shadow(0 18px 18px rgba(23,61,80,.12));animation:reqFloat 3s ease-in-out infinite}.requirements-couple i{font-style:normal;font-size:32px;color:#ef476f;animation:reqPulse 1.35s ease-in-out infinite}.requirements-docs{margin-top:8px;font-size:27px;letter-spacing:10px;opacity:.85}
.requirements-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:26px;align-items:start}.requirements-card{overflow:hidden;border-radius:30px;border:1px solid #dce8ed;background:#fff;box-shadow:0 20px 50px rgba(22,58,78,.08)}.requirements-card header{display:grid;grid-template-columns:74px 1fr;gap:18px;align-items:center;padding:28px 30px;border-bottom:1px solid #e6eef2}.male-card header{background:radial-gradient(circle at 93% 8%,rgba(37,99,235,.14),transparent 30%),linear-gradient(135deg,#f7fbff,#edf5ff)}.female-card header{background:radial-gradient(circle at 93% 8%,rgba(236,72,153,.13),transparent 30%),linear-gradient(135deg,#fff8fc,#fdf0f7)}.requirements-avatar{width:68px;height:68px;border-radius:22px;display:grid;place-items:center;font-size:35px;background:#fff;border:1px solid rgba(211,226,233,.95);box-shadow:0 13px 28px rgba(24,63,82,.10)}.requirements-card header small{font-size:9px;letter-spacing:.15em;font-weight:900;color:#0b8c7b}.requirements-card header h2{font-size:26px;margin:4px 0 2px;color:#17243b}.requirements-card header p{margin:0;color:#718195;font-size:12px;line-height:1.55}
.requirements-list{list-style:none;margin:0;padding:18px}.requirements-list li{position:relative;display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start;margin:0;padding:15px;border-radius:18px;border:1px solid transparent;transition:.23s}.requirements-list li:not(:last-child){margin-bottom:4px}.requirements-list li:hover{background:#f6fbfb;border-color:#dcebea;transform:translateX(3px)}.requirements-list li.important{background:linear-gradient(135deg,#fff9ed,#fff4f3);border-color:#f2dfbf}.req-icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:#0b897a;background:linear-gradient(145deg,#e8faf5,#f7fffd);border:1px solid #d0ebe4}.female-card .req-icon{color:#c2417a;background:linear-gradient(145deg,#fff0f7,#fffafd);border-color:#f2d8e5}.requirements-list li.important .req-icon{color:#c36b13;background:#fff4dc;border-color:#f0d6a3}.req-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.requirements-list strong,.requirements-list small{display:block}.requirements-list strong{font-size:14px;color:#1b3045;margin:2px 0 4px}.requirements-list small{font-size:12px;color:#708093;line-height:1.55}
.requirements-note{display:grid;grid-template-columns:70px 1fr;gap:18px;align-items:center;margin-top:26px;padding:26px 30px;border-radius:26px;border:1px solid #d4e8e4;background:radial-gradient(circle at 94% 15%,rgba(14,165,164,.12),transparent 29%),linear-gradient(135deg,#ecfbf7,#f7fbff);box-shadow:0 17px 42px rgba(22,60,78,.07)}.requirements-note-icon{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font-size:30px;background:#fff;box-shadow:0 12px 27px rgba(23,62,80,.09)}.requirements-note small{font-size:9px;letter-spacing:.15em;font-weight:900;color:#0b8d7b}.requirements-note h2{font-size:24px;margin:5px 0 3px;color:#17243b}.requirements-note p{margin:0;color:#6d7f92;font-size:13px}
@keyframes reqFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes reqPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
@media(max-width:980px){.public-requirements-promo,.requirements-hero,.requirements-grid{grid-template-columns:1fr}.public-requirements-promo-cards{max-width:650px}.requirements-hero-visual{min-height:155px}.requirements-couple{font-size:58px}}
@media(max-width:650px){.public-requirements-promo-cards{grid-template-columns:1fr}.requirements-main{width:calc(100% - 18px);margin:10px auto 25px}.requirements-hero{padding:30px 22px;border-radius:26px}.requirements-hero h1{font-size:32px}.requirements-couple{font-size:47px}.requirements-card{border-radius:24px}.requirements-card header{grid-template-columns:58px 1fr;padding:22px 18px}.requirements-avatar{width:54px;height:54px;border-radius:17px;font-size:28px}.requirements-list{padding:10px}.requirements-list li{grid-template-columns:42px 1fr;padding:13px 10px}.req-icon{width:40px;height:40px}.requirements-note{grid-template-columns:1fr;text-align:center;padding:22px}.requirements-note-icon{margin:auto}.public-nav-actions .public-requirements-link{display:none}}

/* Penyempurnaan kartu menu persyaratan publik v4.5.9 */
.public-requirements-promo{position:relative;overflow:hidden;border-color:#d9e8eb!important;background:linear-gradient(135deg,#ffffff 0%,#f2fbf8 55%,#f2f6ff 100%)!important}
.public-requirements-promo:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-90px;top:-120px;background:radial-gradient(circle,rgba(37,99,235,.12),rgba(37,99,235,0) 72%)}
.public-requirements-promo>*{position:relative;z-index:1}.public-requirements-promo-copy h2{font-size:32px!important}.public-requirements-button{transition:.22s}.public-requirements-button:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(37,99,235,.23)}
.public-requirements-promo-cards article{border-radius:22px!important}.public-requirements-promo-cards .promo-icon{width:50px;height:50px;margin:0 auto 10px!important;border-radius:16px;display:grid!important;place-items:center;background:linear-gradient(145deg,#e9faf5,#eef4ff);color:#0b8578;border:1px solid #d5e8e5}.public-requirements-promo-cards .promo-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.public-requirements-promo-cards article:nth-child(2) .promo-icon{color:#c2417a;background:linear-gradient(145deg,#fff0f7,#fffafd);border-color:#f0dae5}.public-requirements-promo-cards article:nth-child(3) .promo-icon{color:#2563ae;background:linear-gradient(145deg,#edf4ff,#f8fbff);border-color:#dbe6f6}


/* =========================================================
   Public mobile responsive + navigation v4.6.0
   ========================================================= */
.public-mobile-toggle{display:none;width:44px;height:44px;border:1px solid #d8e5e9;border-radius:13px;background:#fff;align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer;box-shadow:0 8px 20px rgba(22,59,78,.07)}
.public-mobile-toggle span{display:block;width:19px;height:2px;border-radius:99px;background:#174052;transition:.22s}
.public-nav.menu-open .public-mobile-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.public-nav.menu-open .public-mobile-toggle span:nth-child(2){opacity:0}
.public-nav.menu-open .public-mobile-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:760px){
  .public-dashboard-body{overflow-x:hidden}
  .public-nav{height:auto;min-height:68px;padding:10px 12px;gap:10px;align-items:center;position:sticky;top:0}
  .public-brand{min-width:0;flex:1;gap:9px}.public-brand>span,.req-brand-logo,.req-brand-fallback{width:42px!important;height:42px!important;flex:0 0 42px!important;border-radius:13px!important}
  .public-brand div{min-width:0}.public-brand strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.public-brand small{font-size:10px}
  .public-mobile-toggle{display:flex;flex:0 0 44px}
  .public-nav-actions{display:none!important;position:absolute;left:10px;right:10px;top:calc(100% + 7px);padding:10px;flex-direction:column;align-items:stretch;gap:8px;border:1px solid #d9e6ea;border-radius:18px;background:rgba(255,255,255,.98);box-shadow:0 22px 50px rgba(13,48,66,.18);backdrop-filter:blur(14px)}
  .public-nav.menu-open .public-nav-actions{display:flex!important;animation:publicMenuIn .2s ease}
  .public-nav-actions>span{display:none!important}.public-nav-actions>a{display:flex!important;width:100%;min-height:44px;align-items:center;justify-content:center;padding:10px 12px!important;border-radius:12px!important;font-size:11px!important}
  .public-dashboard{width:calc(100% - 16px);margin:10px auto 24px}
  .public-hero{min-height:0;padding:25px 18px;border-radius:24px;grid-template-columns:1fr;gap:22px}
  .public-kicker{font-size:9px;letter-spacing:.12em}.public-hero h1{font-size:29px;line-height:1.12;margin:10px 0}.public-hero p{font-size:13px;line-height:1.65}
  .public-hero-actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:18px}.public-hero-actions a{width:100%;min-height:45px;padding:11px 14px;text-align:center}
  .public-hero-summary{grid-template-columns:1fr 1fr;gap:10px}.public-hero-summary article{padding:17px 14px;border-radius:18px}.public-hero-summary strong{font-size:31px}.public-hero-summary span{font-size:10px}.public-hero-summary small{font-size:10px}
  .public-section{margin-top:14px;padding:20px 14px;border-radius:22px}.public-section-title h2{font-size:23px;line-height:1.18}.public-section-title p{font-size:12px;line-height:1.6}
  .public-requirements-promo{grid-template-columns:1fr!important;gap:20px!important}.public-requirements-promo-copy h2{font-size:25px!important}.public-requirements-promo-copy p{font-size:12px}.public-requirements-button{width:100%;justify-content:center}
  .public-requirements-promo-cards{grid-template-columns:1fr!important;gap:9px!important}.public-requirements-promo-cards article{display:grid;grid-template-columns:48px 1fr;column-gap:12px;align-items:center;text-align:left!important;padding:13px!important}.public-requirements-promo-cards .promo-icon{grid-row:1/3;margin:0!important}.public-requirements-promo-cards strong,.public-requirements-promo-cards small{text-align:left}
  .public-chart-grid{grid-template-columns:1fr;gap:12px;margin-top:16px}.public-chart-card.wide{grid-column:auto}.public-chart-card{border-radius:19px}.public-chart-card header{padding:16px 14px 10px;align-items:flex-start;gap:8px}.public-chart-card h3{font-size:15px}.public-chart-card header>b{font-size:10px}.public-canvas,.public-canvas.tall{min-height:230px;padding:8px 5px}
  .public-rec-summary{flex-direction:column;align-items:stretch;gap:12px;padding:14px}.public-filter{width:100%;display:grid;grid-template-columns:1fr 1fr}.public-filter button{width:100%}
  .public-footer{padding:20px 14px;display:block;text-align:center;font-size:10px}.public-footer span{display:block;margin:4px 0}
  .req-main{width:calc(100% - 14px)!important;margin:8px auto 24px!important}.req-hero{padding:24px 16px!important;border-radius:23px!important}.req-hero h1{font-size:30px!important}.req-hero p{font-size:12.5px!important}.req-hero-actions{display:grid!important;grid-template-columns:1fr!important}.req-hero-actions a,.req-hero-actions button{width:100%!important}.req-hero-visual{min-height:150px!important}.req-couple-card{width:180px!important;height:155px!important}.req-couple-svg{width:110px!important;height:110px!important}.req-stats{gap:9px!important;margin:14px 0!important}.req-stat{padding:14px!important;border-radius:18px!important}.req-stat strong{font-size:25px!important}.req-jump{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}.req-jump a{text-align:center!important}.req-grid{gap:14px!important}.req-panel-head{grid-template-columns:48px 1fr!important;gap:11px!important;padding:18px 14px!important}.req-panel-head h2{font-size:22px!important}.req-panel-head p{font-size:11px!important}.req-count{grid-column:2!important;justify-self:start!important}.req-list{padding:8px!important}.req-item{grid-template-columns:38px minmax(0,1fr)!important;gap:10px!important;padding:12px 9px!important}.req-item-icon{width:38px!important;height:38px!important}.req-item-copy strong{font-size:13px!important}.req-item-copy small{font-size:11px!important}.req-badge{grid-column:2!important;justify-self:start!important}.req-note{grid-template-columns:1fr!important;text-align:center!important;padding:20px 16px!important}.req-note-icon{margin:auto!important}.req-note h2{font-size:21px!important}.req-note p{font-size:11.5px!important}.req-note-mark{justify-self:center!important}
}
@media(max-width:420px){.public-hero-summary{grid-template-columns:1fr}.public-hero h1{font-size:26px}.public-section{padding:18px 12px}.public-chart-card header{flex-direction:column}.public-chart-card header>b{align-self:flex-start}}
@keyframes publicMenuIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}


.public-brand.with-logo{gap:14px}
.public-brand-logo{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(180deg,#ffffff,#f5fbfb);border:1px solid #d7e8ea;box-shadow:0 10px 24px rgba(8,125,121,.12);overflow:hidden;flex:0 0 48px}
.public-brand-logo img{width:100%;height:100%;object-fit:contain;display:block;padding:3px}
.public-nav-logo{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(180deg,#ffffff,#f4fbfb);border:1px solid #d6e8eb;box-shadow:0 10px 20px rgba(16,74,91,.10);overflow:hidden;padding:3px}
.public-nav-logo img{width:100%;height:100%;object-fit:contain;display:block}
.public-akad-badge{display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap;border:1px solid transparent}
.public-akad-badge.done{background:#eaf9f0;color:#137a43;border-color:#bfe6cf}
.public-akad-badge.pending{background:#fff6e6;color:#a55a00;border-color:#f2d39a}
@media(max-width:600px){.public-nav-logo{display:none}.public-brand-logo{width:42px;height:42px;flex-basis:42px;border-radius:13px}}


.statistics-page .public-education-chart{background:linear-gradient(180deg,#ffffff,#fbfdff)}
.statistics-page .education-canvas{min-height:480px;padding:14px 16px 10px}
@media(max-width:760px){.statistics-page .education-canvas{min-height:520px;padding:10px 4px}.statistics-page .public-education-chart header{align-items:flex-start;gap:10px;flex-direction:column}}


/* Perbaikan presisi logo desa pada sidebar admin */
.sidebar .brand{align-items:center;gap:14px;padding-left:4px;padding-right:4px}
.sidebar .brand-mark.brand-mark--logo{width:62px!important;height:62px!important;flex:0 0 62px!important;padding:5px!important;border-radius:18px!important;background:#ffffff!important;border:1px solid rgba(255,255,255,.88)!important;box-shadow:0 14px 30px rgba(0,35,44,.22),inset 0 0 0 1px rgba(9,121,111,.06)!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;isolation:isolate}
.sidebar .brand-mark.brand-mark--logo:before,.sidebar .brand-mark.brand-mark--logo:after{display:none!important;content:none!important}
.sidebar .brand-mark.brand-mark--logo img{position:relative!important;z-index:2!important;display:block!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;margin:auto!important;padding:0!important;border:0!important;border-radius:0!important;transform:none!important;filter:none!important;opacity:1!important}
.sidebar .brand-mark.brand-mark--logo.logo-load-error:after{content:"CD"!important;display:grid!important;place-items:center!important;position:absolute!important;inset:0!important;color:#08796f!important;font-weight:900!important;font-size:17px!important}
.sidebar .brand-copy{min-width:0;flex:1}
.sidebar .brand-copy strong{line-height:1.15}
@media(max-width:900px){.sidebar .brand-mark.brand-mark--logo{width:58px!important;height:58px!important;flex-basis:58px!important}}




/* Dokumen Surat Kesehatan - opsional */
.health-document-section{background:linear-gradient(180deg,#ffffff,#f8fcfb);border-color:#d8ebe7}
.health-upload-card{display:flex;align-items:center;gap:16px;padding:18px;margin-bottom:18px;border-radius:18px;background:linear-gradient(135deg,#eafaf6,#f3f8ff);border:1px solid #d0e8e2}
.health-upload-icon{width:54px;height:54px;flex:0 0 54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#0f8d7c,#1fb89f);color:#fff;font-size:26px;box-shadow:0 12px 24px rgba(15,141,124,.18)}
.health-upload-copy strong,.health-upload-copy span{display:block}.health-upload-copy strong{font-size:16px;color:#18364a;margin-bottom:4px}.health-upload-copy span{font-size:13px;color:#687e8f;line-height:1.55}
.optional-label{display:inline-flex;margin-left:7px;padding:3px 8px;border-radius:999px;background:#e8f7f3;color:#0d766b;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.health-file-field input[type=file]{padding:11px;background:#fff}
.health-current-file{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding:16px;border-radius:16px;background:#eefaf6;border:1px solid #cfe8df}
.health-current-file strong,.health-current-file span{display:block}.health-current-file strong{color:#176858;margin-bottom:3px}.health-current-file span{font-size:12px;color:#66827b}
.health-remove-option{display:flex;align-items:center;gap:9px;margin-top:12px;padding:11px 13px;border-radius:12px;background:#fff6f2;border:1px solid #f2d9cf;color:#9a4e36;font-size:13px;font-weight:700;cursor:pointer}
.health-remove-option input{width:17px;height:17px}
.health-empty-note{margin-top:14px;padding:14px 16px;border-radius:14px;background:#f7fafc;border:1px dashed #cfdce3;color:#687a89;font-size:13px}.health-empty-note strong{color:#34495b}
@media(max-width:700px){.health-upload-card,.health-current-file{align-items:flex-start;flex-direction:column}.health-current-file .actions{width:100%}.health-current-file .btn{flex:1}.health-upload-icon{width:48px;height:48px;flex-basis:48px}}


/* Status dan preview Dokumen Surat Kesehatan pada daftar data */
.health-document-cell{min-width:220px}
.health-list-status{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap;border:1px solid transparent}
.health-list-status-icon{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:14px;line-height:1;font-weight:900}
.health-list-status.available{background:#ebfaf2;color:#126c43;border-color:#bfe6d0}.health-list-status.available .health-list-status-icon{background:#19a865;color:#fff}
.health-list-status.missing{background:#fff0f0;color:#a12828;border-color:#f2c7c7}.health-list-status.missing .health-list-status-icon{background:#dc3d3d;color:#fff}
.health-document-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px}
.btn-health-view{background:linear-gradient(135deg,#0d8c7d,#12ac98);color:#fff;border:0}.btn-health-view:hover{background:linear-gradient(135deg,#0a786c,#0d9686)}
.btn-health-download{background:#edf5ff;color:#245f9e;border:1px solid #cbdff5}.btn-health-download:hover{background:#dfedfd}
.health-preview-modal{position:fixed;inset:0;z-index:99990;display:none;align-items:center;justify-content:center;padding:24px}
.health-preview-modal.is-open{display:flex}
.health-preview-backdrop{position:absolute;inset:0;background:rgba(9,24,37,.72);backdrop-filter:blur(7px)}
.health-preview-dialog{position:relative;width:min(1050px,96vw);height:min(820px,92vh);display:flex;flex-direction:column;border-radius:26px;background:#fff;border:1px solid rgba(255,255,255,.75);box-shadow:0 34px 100px rgba(3,18,31,.38);overflow:hidden;animation:healthPreviewIn .22s ease-out}
.health-preview-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;background:linear-gradient(135deg,#edfdf8,#f2f7ff);border-bottom:1px solid #dce8ed}
.health-preview-header span{display:block;font-size:9px;letter-spacing:.14em;font-weight:900;color:#0b8979}.health-preview-header h2{margin:4px 0 0;font-size:20px;color:#1b2f44}
.health-preview-close{width:40px;height:40px;border:0;border-radius:12px;background:#eaf0f4;color:#5b6d7c;font-size:26px;line-height:1;cursor:pointer}
.health-preview-body{position:relative;flex:1;min-height:0;background:#eef3f5;padding:12px}
.health-preview-body iframe{width:100%;height:100%;border:0;border-radius:14px;background:#fff;opacity:0;transition:opacity .18s ease}.health-preview-body iframe.is-ready{opacity:1}
.health-preview-loading{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;color:#536b7b;font-weight:700;background:#eef3f5}.health-preview-loading.is-hidden{display:none}
.health-preview-loading span{width:24px;height:24px;border-radius:50%;border:3px solid #c8ddd8;border-top-color:#0f9584;animation:healthPreviewSpin .8s linear infinite}
.health-preview-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 20px;background:#fff;border-top:1px solid #e2ebee}
@keyframes healthPreviewIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes healthPreviewSpin{to{transform:rotate(360deg)}}
@media(max-width:700px){.health-document-cell{min-width:190px}.health-preview-modal{padding:8px}.health-preview-dialog{width:100%;height:95vh;border-radius:19px}.health-preview-header{padding:14px 15px}.health-preview-header h2{font-size:16px}.health-preview-body{padding:7px}.health-preview-footer{padding:11px 12px;flex-wrap:wrap}.health-preview-footer .btn{flex:1}.health-document-actions{flex-direction:column;align-items:stretch}.health-document-actions .btn{width:100%}}


/* Perbaikan pratinjau Surat Kesehatan v4.7.6 */
.health-preview-body iframe[hidden]{display:none!important}
.health-preview-image{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;border-radius:14px;background:#fff;opacity:0;transition:opacity .18s ease}
.health-preview-image.is-ready{opacity:1}
.health-preview-image[hidden]{display:none!important}
.health-preview-error{position:absolute;inset:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;border-radius:16px;background:#fff;border:1px solid #e1e8ec;color:#6b7c89}
.health-preview-error[hidden]{display:none!important}
.health-preview-error strong{display:block;margin-bottom:7px;font-size:18px;color:#a52b2b}
.health-preview-error span{max-width:560px;font-size:13px;line-height:1.6}


/* Hak akses pengguna Admin dan Staff */
.staff-access-note{margin-top:18px;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,#eefaf7,#f2f7ff);border:1px solid #d3e8e4;color:#36586a;font-size:13px;line-height:1.65}
.staff-access-note strong{color:#0b756b}
.user-role-badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.03em}
.user-role-badge.admin{background:#e8f8f3;color:#08796f;border:1px solid #c2e7dd}
.user-role-badge.staff{background:#eef3ff;color:#365aa0;border:1px solid #d2ddf8}
.staff-readonly-banner{display:flex;align-items:center;gap:13px;margin-bottom:18px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,#edf9f6,#f2f6ff);border:1px solid #d5e8e5}
.staff-readonly-banner>span{display:grid;place-items:center;min-width:58px;height:34px;border-radius:10px;background:#0d887d;color:#fff;font-size:11px;font-weight:900;letter-spacing:.08em}
.staff-readonly-banner strong,.staff-readonly-banner small{display:block}.staff-readonly-banner strong{font-size:14px;color:#17384b}.staff-readonly-banner small{font-size:12px;color:#718194;margin-top:2px}
.account-users-table{min-width:720px}
@media(max-width:700px){.staff-readonly-banner{align-items:flex-start}.account-user-card .form-grid{grid-template-columns:1fr}}


/* Pembaruan 4.8.5 - hero dashboard admin */
.dashboard-topbar{position:sticky;isolation:isolate;background:linear-gradient(135deg,#ffffff 0%,#f8fffd 58%,#eefaf7 100%)!important;border:1px solid rgba(200,226,220,.92)!important;box-shadow:0 22px 45px rgba(20,64,78,.09)!important;overflow:hidden}
.dashboard-topbar::before{content:"";position:absolute;inset:auto auto -55px -20px;width:280px;height:180px;background:radial-gradient(circle at center,rgba(45,212,191,.14),rgba(45,212,191,0));pointer-events:none;z-index:0}
.dashboard-topbar::after{content:"";position:absolute;right:160px;top:-70px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle at center,rgba(167,243,208,.24),rgba(255,255,255,0) 65%);pointer-events:none;z-index:0}
.dashboard-hero-heading{max-width:min(68%,980px)}
.dashboard-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:linear-gradient(135deg,#e8faf5,#ffffff);border:1px solid #ccefe6;color:#0b766a;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 10px 18px rgba(15,118,110,.08);margin-bottom:14px}
.dashboard-kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:#14b8a6;box-shadow:0 0 0 5px rgba(20,184,166,.14)}
.dashboard-topbar .topbar-heading h1{font-size:34px!important;line-height:1.12;font-weight:900!important;letter-spacing:-.045em!important;max-width:100%;margin:0;color:#14233b;text-wrap:balance}
.dashboard-topbar .topbar-heading p{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;color:#5f7286;font-weight:600;margin-top:12px;max-width:92%}
.dashboard-topbar .topbar-heading p b{color:#84a49d;font-size:14px;line-height:1}
.dashboard-topbar .topbar-heading p svg{flex:0 0 auto}
.topbar-scene{z-index:1}
.topbar-scene svg{animation:dashboardFloatScene 5.8s ease-in-out infinite}
@keyframes dashboardFloatScene{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

@media (max-width:1250px){
  .dashboard-hero-heading{max-width:62%}
  .dashboard-topbar .topbar-heading h1{font-size:30px!important}
}
@media (max-width:900px){
  .dashboard-hero-heading{max-width:100%}
  .dashboard-kicker{margin-bottom:10px;padding:7px 12px;font-size:11px}
  .dashboard-topbar .topbar-heading h1{font-size:25px!important}
  .dashboard-topbar .topbar-heading p{font-size:12px;max-width:100%;margin-top:8px}
}
@media (max-width:650px){
  .dashboard-topbar::after{display:none}
  .dashboard-kicker{display:none}
  .dashboard-topbar .topbar-heading h1{font-size:22px!important;line-height:1.16}
  .dashboard-topbar .topbar-heading p{gap:6px}
}


/* Menu Penomoran Surat v4.8.6 */
.letter-number-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr);gap:22px;align-items:center;margin-bottom:22px;padding:28px;border-radius:24px;background:radial-gradient(circle at 92% 12%,rgba(45,212,191,.16),transparent 30%),linear-gradient(135deg,#ffffff,#f2fcf9);border:1px solid #d7e9e6;box-shadow:0 16px 40px rgba(21,66,78,.07)}
.letter-number-kicker{display:block;font-size:10px;font-weight:900;letter-spacing:.15em;color:#0e8c7b}.letter-number-hero h2{font-size:30px;line-height:1.1;margin:8px 0;color:#17243b}.letter-number-hero>div>p{margin:0;color:#65788b;line-height:1.7}.letter-number-example{padding:20px;border-radius:20px;background:rgba(255,255,255,.88);border:1px solid #d6e7e8;box-shadow:0 12px 28px rgba(24,67,84,.06)}.letter-number-example small,.letter-number-example strong,.letter-number-example p{display:block}.letter-number-example small{font-size:10px;color:#0d8879;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.letter-number-example strong{margin:10px 0 8px;font-size:13px;color:#21394c;line-height:1.65}.letter-number-example strong span{padding:4px 7px;border-radius:7px;background:#e9f8f4}.letter-number-example strong em{font-style:normal;color:#b45309;background:#fff4df;padding:4px 7px;border-radius:7px}.letter-number-example p{font-size:11px!important;color:#788899!important}
.letter-number-card{overflow:hidden}.letter-number-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.letter-number-item{padding:18px;border:1px solid #dce8eb;border-radius:18px;background:linear-gradient(180deg,#fff,#f9fcfc);box-shadow:0 10px 24px rgba(27,64,80,.05)}.letter-number-item header{display:flex;align-items:center;gap:12px;margin-bottom:15px}.letter-number-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#dff9f2,#e8f1ff);color:#0f8276}.letter-number-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.letter-number-item header strong,.letter-number-item header small{display:block}.letter-number-item header strong{font-size:14px;color:#203449}.letter-number-item header small{font-size:9px;color:#8090a0;letter-spacing:.08em;margin-top:3px}.letter-number-fields{display:grid;grid-template-columns:minmax(120px,.38fr) minmax(180px,.62fr);gap:12px}.letter-number-fields label{font-size:11px;font-weight:800;color:#526679}.letter-number-fields input{margin-top:6px}.letter-number-live-preview{margin-top:13px;padding:11px 13px;border-radius:12px;background:linear-gradient(135deg,#ecfaf6,#f1f6ff);border:1px solid #d7eae6;color:#176a62;font-size:12px;font-weight:800;overflow-wrap:anywhere}.letter-number-live-preview b{color:#b35e05}.letter-number-notes{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 22px 20px}.letter-number-notes>div{padding:14px;border-radius:14px;background:#f7fafc;border:1px solid #e3eaf0}.letter-number-notes strong,.letter-number-notes span{display:block}.letter-number-notes strong{font-size:12px;color:#263b4f}.letter-number-notes span{font-size:11px;color:#718195;margin-top:4px}.letter-number-actions{padding:18px 22px!important;margin:0!important}.letter-number-actions .btn[disabled]{opacity:.5;cursor:not-allowed}
@media(max-width:900px){.letter-number-hero,.letter-number-grid{grid-template-columns:1fr}.letter-number-example{max-width:none}.letter-number-notes{grid-template-columns:1fr}}
@media(max-width:560px){.letter-number-hero{padding:20px}.letter-number-hero h2{font-size:24px}.letter-number-fields{grid-template-columns:1fr}.letter-number-notes{padding:0 16px 16px}.letter-number-actions{flex-direction:column}.letter-number-actions .btn{width:100%}}


/* Dashboard khusus akun Staff - v4.8.7 */
.staff-kicker{background:linear-gradient(135deg,#edf5ff,#ffffff)!important;border-color:#cfe0fb!important;color:#235fa4!important}
.staff-kicker::before{background:#3b82f6!important;box-shadow:0 0 0 5px rgba(59,130,246,.14)!important}
.staff-dashboard{display:grid;gap:18px}
.staff-welcome-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 28px;border:1px solid #d9e9e6;border-radius:24px;background:radial-gradient(circle at 85% 10%,rgba(59,130,246,.10),transparent 30%),linear-gradient(135deg,#ffffff,#f3fcfa);box-shadow:0 16px 38px rgba(29,65,80,.08)}
.staff-welcome-copy{min-width:0}.staff-role-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:#eaf8f5;color:#08786d;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.staff-role-badge i{width:8px;height:8px;border-radius:50%;background:#14b8a6;box-shadow:0 0 0 5px rgba(20,184,166,.13)}
.staff-welcome-copy h2{margin:13px 0 5px;font-size:27px;line-height:1.15;color:#17243b}.staff-welcome-copy p{margin:0;color:#687a8e;font-size:13px;max-width:760px}
.staff-profile-card{min-width:250px;display:grid;grid-template-columns:54px 1fr;gap:13px;align-items:center;padding:15px 17px;border-radius:18px;background:rgba(255,255,255,.9);border:1px solid #dbe8ec;box-shadow:0 10px 24px rgba(30,65,82,.07)}.staff-profile-avatar{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#0f9e8d,#1d78b6);color:#fff;font-size:22px;font-weight:900}.staff-profile-card small,.staff-profile-card strong,.staff-profile-card span{display:block}.staff-profile-card small{font-size:9px;font-weight:900;letter-spacing:.11em;color:#7b8a9b}.staff-profile-card strong{font-size:15px;color:#17243b;margin:2px 0}.staff-profile-card span{font-size:11px;color:#0c8879;font-weight:800}
.staff-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.staff-stat-card{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;min-height:126px;padding:20px;border-radius:21px;background:#fff;border:1px solid #dfe9ed;box-shadow:0 13px 30px rgba(28,61,78,.07)}.staff-stat-card::after{content:"";position:absolute;right:-28px;top:-30px;width:105px;height:105px;border-radius:50%;background:rgba(20,184,166,.08)}.staff-stat-card.blue::after{background:rgba(59,130,246,.09)}.staff-stat-card.purple::after{background:rgba(139,92,246,.09)}.staff-stat-card.green::after{background:rgba(34,197,94,.09)}.staff-stat-icon{position:relative;z-index:1;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#e8faf5;color:#0b8c7c;font-size:23px;font-weight:900}.staff-stat-card.blue .staff-stat-icon{background:#eaf3ff;color:#2872bf}.staff-stat-card.purple .staff-stat-icon{background:#f1ebff;color:#7746d3}.staff-stat-card.green .staff-stat-icon{background:#ebfaef;color:#269252}.staff-stat-card div{position:relative;z-index:1}.staff-stat-card small{display:block;color:#748498;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.staff-stat-card strong{display:block;color:#17243b;font-size:30px;line-height:1.05;margin:5px 0}.staff-stat-card p{margin:0;color:#8593a3;font-size:11px}
.staff-main-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(310px,.55fr);gap:18px}.staff-panel{border:1px solid #dfe9ed;border-radius:23px;background:#fff;box-shadow:0 15px 34px rgba(27,60,78,.07);overflow:hidden}.staff-panel-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 22px;border-bottom:1px solid #edf2f4}.staff-panel-head span{font-size:9px;color:#0b8a7a;font-weight:900;letter-spacing:.12em}.staff-panel-head h2{margin:4px 0 0;font-size:18px;color:#17243b}.staff-panel-head>a{font-size:11px;color:#0c8175;font-weight:800}.staff-latest-list{padding:6px 20px 14px}.staff-latest-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid #edf2f4}.staff-latest-item:last-child{border-bottom:0}.staff-couple-icon{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:#eaf9f5;color:#0c887a;font-size:20px;font-weight:900}.staff-latest-item div{min-width:0}.staff-latest-item strong{display:block;color:#23354a;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.staff-latest-item small{display:block;color:#8794a3;font-size:10px;margin-top:3px}.staff-latest-date{font-size:10px;color:#5f7285;font-weight:700;text-align:right}.staff-empty{text-align:center;padding:46px 20px;color:#8290a0}.staff-empty strong{display:block;color:#24364b}.staff-empty p{font-size:12px}
.staff-access-panel{display:flex;flex-direction:column}.staff-access-list{padding:15px 20px;display:grid;gap:5px}.staff-access-list>div{display:grid;grid-template-columns:29px 1fr;gap:10px;align-items:start;padding:10px;border-radius:13px}.staff-access-list>div.allowed{background:#f3fbf8}.staff-access-list>div.denied{background:#fff6f5}.staff-access-list b{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;background:#dff5ee;color:#0a8a76}.staff-access-list .denied b{background:#fee5e2;color:#c33b32}.staff-access-list strong,.staff-access-list small{display:block}.staff-access-list strong{font-size:12px;color:#26384b}.staff-access-list small{font-size:10px;color:#8492a1;margin-top:2px}.staff-primary-button{margin:auto 20px 20px;padding:13px 15px;border-radius:13px;text-align:center;background:linear-gradient(135deg,#0d9585,#127ba9);color:#fff;font-size:12px;font-weight:900;box-shadow:0 12px 25px rgba(14,128,125,.19)}
@media(max-width:1100px){.staff-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.staff-main-grid{grid-template-columns:1fr}}
@media(max-width:700px){.staff-welcome-card{display:block;padding:21px}.staff-profile-card{margin-top:17px;min-width:0}.staff-stat-grid{grid-template-columns:1fr}.staff-welcome-copy h2{font-size:22px}.staff-latest-item{grid-template-columns:40px minmax(0,1fr)}.staff-latest-date{grid-column:2;text-align:left}.staff-panel-head{align-items:flex-start}}

/* Penyimpanan nomor tengah surat v4.8.8 */
.letter-middle-storage-note{padding:10px 12px;border-radius:12px;background:#fff8e8;border:1px solid #f2ddb0;color:#8b5a09;font-size:12px;font-weight:700;line-height:1.5}
.letter-middle-storage-note.is-saved{background:#eaf9f3;border-color:#bde5d4;color:#126746}
.stored-letter-number{display:inline-flex;max-width:245px;padding:7px 10px;border-radius:10px;background:linear-gradient(135deg,#eaf9f5,#f7fffc);border:1px solid #c2e8de;color:#0b6c63;font-size:11px;font-weight:800;line-height:1.35;white-space:normal}
.stored-letter-middle{display:block;margin-top:5px;color:#718096;font-size:10px;font-weight:700}
.stored-letter-empty{display:inline-flex;padding:6px 9px;border-radius:9px;background:#f3f4f6;color:#7b8491;font-size:11px;font-weight:700}
.letter-number-notice{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:22px;font-family:Inter,Segoe UI,Arial,sans-serif}
.letter-number-notice-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.68);backdrop-filter:blur(7px)}
.letter-number-notice-card{position:relative;width:min(450px,100%);padding:30px 28px 26px;border-radius:26px;background:linear-gradient(180deg,#fff,#f9fbfc);border:1px solid rgba(255,255,255,.72);box-shadow:0 30px 90px rgba(2,32,40,.34);text-align:center;animation:letterNoticePop .25s cubic-bezier(.2,.9,.3,1.15)}
.letter-number-notice-close{position:absolute;right:15px;top:14px;width:35px;height:35px;border:0;border-radius:11px;background:#eef2f7;color:#64748b;font-size:24px;cursor:pointer}
.letter-number-notice-icon{width:72px;height:72px;margin:0 auto 14px;border-radius:23px;display:grid;place-items:center;background:linear-gradient(135deg,#f97316,#ef4444);color:#fff;font-size:40px;font-weight:900;box-shadow:0 14px 30px rgba(239,68,68,.25)}
.letter-number-notice-card small{display:block;color:#d14343;font-size:10px;font-weight:900;letter-spacing:.16em}
.letter-number-notice-card h3{margin:7px 0 9px;color:#172033;font-size:24px}
.letter-number-notice-card p{margin:0;color:#526174;line-height:1.6}
.letter-number-notice-detail{margin-top:14px;padding:12px 14px;border-radius:13px;background:#fff1f2;border:1px solid #fecdd3;color:#9f1239;font-size:13px;font-weight:800}
.letter-number-notice-action{margin-top:18px;width:100%;padding:12px 16px;border:0;border-radius:13px;background:linear-gradient(135deg,#0f766e,#0ea5a4);color:#fff;font-weight:900;cursor:pointer;box-shadow:0 10px 24px rgba(15,118,110,.22)}
@keyframes letterNoticePop{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}


/* Pembaruan 4.9.0 - sidebar hidup, dapat disembunyikan, dan tujuan rekomendasi */
.sidebar{transition:width .28s ease,transform .28s ease,box-shadow .28s ease;padding-top:20px!important}
.sidebar .brand{position:relative;z-index:3;margin-bottom:10px;padding-bottom:18px!important}
.sidebar-collapse-toggle{position:absolute;right:-17px;top:82px;z-index:60;width:36px;height:36px;border-radius:50%;border:1px solid rgba(190,229,224,.95);background:linear-gradient(145deg,#ffffff,#eaf9f6);color:#08796f;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px rgba(6,60,69,.18);transition:.24s ease}
.sidebar-collapse-toggle:hover{transform:scale(1.08);box-shadow:0 14px 30px rgba(6,60,69,.24)}
.sidebar-collapse-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s ease}
.nav-caption{padding:0 12px 8px!important;color:#baf2e7!important;font-size:10px!important;letter-spacing:.15em!important}
.nav-menu{gap:9px!important}
.nav-link{position:relative;min-height:52px;border-radius:16px!important;padding:11px 13px!important;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.035)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025);overflow:hidden;transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease!important}
.nav-link::before{content:"";position:absolute;left:-35%;top:-70%;width:90px;height:130px;background:linear-gradient(110deg,transparent,rgba(255,255,255,.13),transparent);transform:rotate(18deg);transition:left .45s ease;pointer-events:none}
.nav-link:hover::before{left:110%}
.nav-link:hover{background:rgba(255,255,255,.105)!important;border-color:rgba(255,255,255,.10)!important;transform:translateX(4px)!important;box-shadow:0 9px 22px rgba(0,33,42,.11)}
.nav-link.active{background:linear-gradient(135deg,#25c9ae,#0aa79e)!important;border-color:rgba(255,255,255,.26)!important;box-shadow:0 13px 28px rgba(0,47,55,.23),inset 0 1px 0 rgba(255,255,255,.24)!important}
.nav-icon{width:36px!important;height:36px!important;flex:0 0 36px;display:grid!important;place-items:center;border-radius:11px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.08)}
.nav-icon svg{width:19px;height:19px}
.nav-text{font-weight:750;letter-spacing:-.01em}
.nav-indicator{margin-left:auto;width:7px;height:7px;border-radius:50%;background:transparent;box-shadow:none}
.nav-link.active .nav-indicator{background:#d8fff8;box-shadow:0 0 0 6px rgba(216,255,248,.15),0 0 14px rgba(216,255,248,.75)}
.sidebar-footer{transition:opacity .2s ease}
.sidebar-collapsed .sidebar{width:86px;padding-left:12px!important;padding-right:12px!important}
.sidebar-collapsed .main-area{margin-left:86px}
.sidebar-collapsed .brand{justify-content:center;padding-left:0!important;padding-right:0!important}
.sidebar-collapsed .brand-copy,.sidebar-collapsed .nav-caption,.sidebar-collapsed .nav-text,.sidebar-collapsed .nav-indicator,.sidebar-collapsed .user-card-copy,.sidebar-collapsed .user-card-chevron,.sidebar-collapsed .logout-link span{display:none!important}
.sidebar-collapsed .sidebar .brand-mark.brand-mark--logo{width:52px!important;height:52px!important;flex-basis:52px!important}
.sidebar-collapsed .nav-link{justify-content:center;padding:8px!important}
.sidebar-collapsed .nav-icon{margin:0}
.sidebar-collapsed .sidebar-footer{display:flex;flex-direction:column;align-items:center;gap:10px}
.sidebar-collapsed .user-card{padding:6px!important;display:block}
.sidebar-collapsed .logout-link{width:44px;height:44px;padding:0!important;display:grid!important;place-items:center;margin:0!important}
.sidebar-collapsed .sidebar-collapse-toggle svg{transform:rotate(180deg)}
.main-area{transition:margin-left .28s ease}
.recommendation-destination-cell{min-width:250px;padding-top:14px !important;padding-bottom:14px !important}
.recommendation-destination-card{display:flex;align-items:center;gap:12px;min-width:240px;max-width:320px;padding:10px 12px;border-radius:16px;background:linear-gradient(135deg,#fffdf6 0%,#fff7e5 100%);border:1px solid #f2ddb0;box-shadow:0 10px 24px rgba(184,120,0,.08)}
.recommendation-destination-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#fff0c4,#ffd979);color:#9a5b00;font-weight:900;font-size:18px;border:1px solid #efca72;box-shadow:0 8px 18px rgba(214,154,14,.18)}
.recommendation-destination-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.recommendation-destination-label{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#be7a00}
.recommendation-destination-cell strong,.recommendation-destination-cell small{display:block;line-height:1.35}
.recommendation-destination-cell strong{color:#21384c;font-size:15px;font-weight:800;word-break:break-word}
.recommendation-destination-cell small{color:#6f7d8c;font-size:12px;font-weight:600}
@media (max-width: 768px){
  .recommendation-destination-cell{min-width:210px}
  .recommendation-destination-card{min-width:200px;max-width:none;padding:10px}
  .recommendation-destination-cell strong{font-size:14px}
}
@media(max-width:900px){.sidebar-collapse-toggle{display:none}.sidebar-collapsed .main-area{margin-left:0}.sidebar-collapsed .sidebar{width:286px;padding-left:16px!important;padding-right:16px!important}.sidebar-collapsed .brand-copy,.sidebar-collapsed .nav-caption,.sidebar-collapsed .nav-text,.sidebar-collapsed .nav-indicator,.sidebar-collapsed .user-card-copy,.sidebar-collapsed .user-card-chevron,.sidebar-collapsed .logout-link span{display:initial!important}.sidebar-collapsed .nav-link{justify-content:flex-start;padding:11px 13px!important}}


/* v4.9.1 - alamat Rumah/Bedol dapat diedit */
.akad-address-group .form-textarea.akad-address-editable{
    background:linear-gradient(180deg,#ffffff,#f8fffd);
    border-color:#79d8c8;
    box-shadow:0 0 0 4px rgba(20,184,166,.08);
}
.akad-address-group .form-textarea.akad-address-editable:focus{
    border-color:#0f9f8f;
    box-shadow:0 0 0 4px rgba(15,159,143,.14);
}
.akad-address-group .form-textarea.akad-address-locked{
    background:#f3f6f8;
    color:#526476;
    cursor:not-allowed;
}


/* v4.9.3 - Jadwal akad 3 hari ke depan pada dashboard publik */
.public-upcoming-akad{position:relative;overflow:hidden;background:linear-gradient(145deg,#ffffff 0%,#f4fffc 55%,#f6f9ff 100%)}
.public-upcoming-akad:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-110px;top:-120px;background:radial-gradient(circle,rgba(45,212,191,.18),rgba(45,212,191,0) 70%);pointer-events:none}
.public-upcoming-title{position:relative;z-index:1}
.public-akad-days{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin-top:24px}
.public-akad-day-card{overflow:hidden;border:1px solid #dce9ec;border-radius:24px;background:rgba(255,255,255,.96);box-shadow:0 16px 38px rgba(24,61,80,.08)}
.public-akad-day-card>header{display:flex;align-items:center;gap:14px;padding:18px 20px;border-bottom:1px solid #e8f0f2;background:linear-gradient(135deg,#f4fffc,#f7fbff)}
.public-akad-day-card>header>div:last-child small{display:block;font-size:9px;font-weight:900;letter-spacing:.13em;color:#14917f}
.public-akad-day-card>header h3{margin:4px 0 0;font-size:17px;color:#1b3045}
.public-akad-date-icon{width:58px;height:58px;flex:0 0 58px;border-radius:17px;display:grid;place-items:center;align-content:center;background:linear-gradient(145deg,#0f9f8f,#08776f);color:#fff;box-shadow:0 12px 26px rgba(8,119,111,.2)}
.public-akad-date-icon span{font-size:24px;line-height:1;font-weight:900}.public-akad-date-icon small{font-size:9px;margin-top:4px;letter-spacing:.1em;font-weight:900}
.public-akad-list{display:grid}.public-akad-item{padding:18px 20px}.public-akad-item+.public-akad-item{border-top:1px dashed #dbe7ea}
.public-akad-couple{display:flex;gap:12px;align-items:flex-start}.public-akad-couple-icon{width:36px;height:36px;flex:0 0 36px;border-radius:12px;display:grid;place-items:center;background:#fff0f4;color:#df3f6b;font-size:16px;border:1px solid #f5ceda}
.public-akad-couple small,.public-akad-couple strong,.public-akad-couple em{display:block}.public-akad-couple small{font-size:9px;letter-spacing:.11em;font-weight:900;color:#8090a0;margin-bottom:4px}.public-akad-couple strong{font-size:14px;line-height:1.35;color:#172d41}.public-akad-couple em{font-style:normal;font-size:11px;color:#d06a87;font-weight:800;margin:2px 0}
.public-akad-info{display:grid;gap:9px;margin-top:14px;padding-left:48px}.public-akad-info>div{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:14px;background:#f8fbfc;border:1px solid #e4ecef}.public-akad-info-icon{width:27px;height:27px;flex:0 0 27px;border-radius:9px;display:grid;place-items:center;background:#e8faf5;color:#0d7c70;font-weight:900}.public-akad-info-icon.location{background:#fff4de;color:#a76400}.public-akad-info p{margin:0;min-width:0}.public-akad-info small,.public-akad-info strong{display:block}.public-akad-info small{font-size:9px;font-weight:900;letter-spacing:.08em;color:#8a98a7}.public-akad-info strong{font-size:12px;line-height:1.5;color:#31485b;word-break:break-word;margin-top:2px}
.public-akad-empty{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:24px;padding:30px;border-radius:20px;border:1px dashed #cfe2df;background:rgba(246,253,251,.9);text-align:left}.public-akad-empty>span{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#e7f8f4;color:#0d8577;font-size:26px}.public-akad-empty strong{display:block;color:#20374b}.public-akad-empty p{margin:3px 0 0;color:#7b8a99;font-size:13px}
@media(max-width:700px){.public-akad-days{grid-template-columns:1fr}.public-akad-day-card>header{padding:15px}.public-akad-item{padding:16px 15px}.public-akad-info{padding-left:0}.public-akad-empty{align-items:flex-start;padding:22px 17px}}


/* v4.9.4 - Jadwal akad publik premium dan PWA */
.public-upcoming-akad-v3{position:relative;overflow:hidden;padding:0!important;border:1px solid rgba(205,229,226,.95)!important;background:linear-gradient(145deg,#ffffff 0%,#f7fffc 50%,#f4f7ff 100%)!important;box-shadow:0 24px 64px rgba(20,57,77,.10)!important}
.public-upcoming-akad-v3::before{content:"";position:absolute;width:330px;height:330px;border-radius:50%;right:-130px;top:-150px;background:radial-gradient(circle,rgba(32,201,151,.18),rgba(32,201,151,0) 70%);pointer-events:none}
.public-upcoming-akad-v3::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;left:-150px;bottom:-160px;background:radial-gradient(circle,rgba(59,130,246,.13),rgba(59,130,246,0) 72%);pointer-events:none}
.public-akad-v3-head{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px;padding:34px 36px 28px;border-bottom:1px solid #e1eeec;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(239,252,248,.78))}
.public-akad-v3-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#eafaf5;border:1px solid #caebe2;color:#087d70;font-size:10px;font-weight:900;letter-spacing:.13em}
.public-akad-v3-kicker svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.public-akad-v3-title h2{margin:14px 0 7px;font-size:31px;line-height:1.15;letter-spacing:-.035em;color:#17243b}.public-akad-v3-title h2 b{color:#0b8b79}.public-akad-v3-title p{margin:0;color:#6d7e91;font-size:14px;line-height:1.7}
.public-akad-v3-summary{display:grid;grid-template-columns:52px auto;align-items:center;gap:12px;min-width:275px;padding:17px 18px;border-radius:22px;background:rgba(255,255,255,.92);border:1px solid #d6e9e5;box-shadow:0 15px 34px rgba(20,72,77,.08)}
.public-akad-v3-summary-icon{grid-row:1/3;width:52px;height:52px;border-radius:17px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#16b596,#087d79 65%,#2563eb);box-shadow:0 12px 25px rgba(8,125,121,.22)}
.public-akad-v3-summary-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.public-akad-v3-summary small,.public-akad-v3-summary strong,.public-akad-v3-summary span{display:inline-block}.public-akad-v3-summary small{font-size:9px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#728497}.public-akad-v3-summary strong{font-size:28px;line-height:1;color:#17243b;margin:0 6px}.public-akad-v3-summary span{font-size:11px;color:#7b8999}.public-akad-v3-summary em{grid-column:1/-1;font-style:normal;padding-top:10px;margin-top:2px;border-top:1px solid #e7efef;color:#0b7d70;font-size:11px;font-weight:800;text-align:center}
.public-akad-v3-timeline{position:relative;z-index:1;display:grid;gap:20px;padding:28px 36px 36px}
.public-akad-v3-day{overflow:hidden;border-radius:25px;border:1px solid #dce9ec;background:rgba(255,255,255,.96);box-shadow:0 16px 40px rgba(20,59,78,.07);transition:transform .25s ease,box-shadow .25s ease}.public-akad-v3-day:hover{transform:translateY(-3px);box-shadow:0 23px 48px rgba(15,92,83,.11)}
.public-akad-v3-day-head{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px 22px;background:linear-gradient(135deg,#f3fffb,#f5f9ff);border-bottom:1px solid #e3ecef}
.public-akad-v3-date{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;align-content:center;color:#fff;background:linear-gradient(145deg,#13aa91,#08796f);box-shadow:0 12px 26px rgba(8,121,111,.21)}.public-akad-v3-date span{font-size:25px;font-weight:900;line-height:1}.public-akad-v3-date small{font-size:9px;font-weight:900;letter-spacing:.12em;margin-top:4px}
.public-akad-v3-day-copy>span{display:inline-flex;padding:4px 8px;border-radius:999px;background:#e4f8f2;color:#08776c;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.public-akad-v3-day-copy h3{margin:6px 0 0;color:#1b3045;font-size:18px;letter-spacing:-.015em}
.public-akad-v3-count{padding:8px 12px;border-radius:999px;background:#fff;border:1px solid #d8e7e9;color:#52687a;font-size:11px;font-weight:900;white-space:nowrap}
.public-akad-v3-list{display:grid;gap:0}.public-akad-v3-card{position:relative;display:grid;grid-template-columns:minmax(250px,.82fr) minmax(420px,1.18fr);gap:22px;align-items:stretch;padding:22px}.public-akad-v3-card+.public-akad-v3-card{border-top:1px dashed #dce7ea}.public-akad-v3-card::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:4px;border-radius:0 6px 6px 0;background:linear-gradient(180deg,#14b8a6,#2563eb)}
.public-akad-v3-couple{display:flex;align-items:center;gap:14px;padding:15px 17px;border-radius:19px;background:linear-gradient(135deg,#fff8fb,#fff);border:1px solid #f1dbe5}.public-akad-v3-ring{width:48px;height:48px;flex:0 0 48px;border-radius:16px;display:grid;place-items:center;color:#d63f70;background:linear-gradient(145deg,#ffe7ef,#fff5f8);border:1px solid #f3cbd9}.public-akad-v3-ring svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.public-akad-v3-couple small{display:block;font-size:9px;font-weight:900;letter-spacing:.11em;color:#9a7080;margin-bottom:5px}.public-akad-v3-couple strong{display:inline;font-size:14px;line-height:1.45;color:#1c3045}.public-akad-v3-amp{display:inline-block;margin:0 5px;color:#d35a80;font-weight:900}
.public-akad-v3-details{display:grid;grid-template-columns:minmax(170px,.42fr) minmax(260px,.58fr);gap:12px}.public-akad-v3-detail{display:flex;align-items:flex-start;gap:12px;padding:15px 16px;border-radius:19px;background:#f8fbfc;border:1px solid #e1ebee;min-width:0}.public-akad-v3-detail>span{width:39px;height:39px;flex:0 0 39px;border-radius:13px;display:grid;place-items:center}.public-akad-v3-detail.time>span{color:#087d70;background:#e5f9f3}.public-akad-v3-detail.location>span{color:#a66200;background:#fff1d5}.public-akad-v3-detail svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.public-akad-v3-detail small,.public-akad-v3-detail strong,.public-akad-v3-detail p{display:block}.public-akad-v3-detail small{font-size:9px;font-weight:900;letter-spacing:.09em;color:#82909f}.public-akad-v3-detail strong{font-size:14px;color:#1e3448;margin-top:4px}.public-akad-v3-detail p{margin:3px 0 0;font-size:12px;line-height:1.5;color:#66798a;word-break:break-word}
.public-akad-v3-empty{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:15px;margin:28px 36px 36px;padding:30px;border-radius:22px;border:1px dashed #cbdedb;background:rgba(247,253,251,.9)}.public-akad-v3-empty>span{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;color:#0b8375;background:#e5f8f3}.public-akad-v3-empty svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.public-akad-v3-empty strong{display:block;color:#20374a}.public-akad-v3-empty p{margin:4px 0 0;color:#7b8a99;font-size:13px}
.pwa-install-button{border:0;padding:10px 14px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#2563eb,#0d9488);font-size:11px;font-weight:900;cursor:pointer;box-shadow:0 10px 22px rgba(37,99,235,.17)}.pwa-install-button:hover{transform:translateY(-1px)}
@media(max-width:1050px){.public-akad-v3-head{grid-template-columns:1fr}.public-akad-v3-summary{width:min(420px,100%)}.public-akad-v3-card{grid-template-columns:1fr}.public-akad-v3-details{grid-template-columns:1fr 1.5fr}}
@media(max-width:700px){.public-akad-v3-head{padding:25px 20px}.public-akad-v3-title h2{font-size:25px}.public-akad-v3-summary{min-width:0}.public-akad-v3-timeline{padding:20px}.public-akad-v3-day-head{grid-template-columns:56px minmax(0,1fr);padding:15px}.public-akad-v3-date{width:56px;height:56px}.public-akad-v3-count{grid-column:2;justify-self:start}.public-akad-v3-card{padding:17px 15px}.public-akad-v3-details{grid-template-columns:1fr}.public-akad-v3-couple{align-items:flex-start}.public-akad-v3-empty{margin:20px;padding:22px 17px;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.public-akad-v3-day,.pwa-install-button{transition:none!important}}


/* v4.9.6 - kredit developer pada halaman login */
.login-developer-credit{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    text-align:center;
    background:linear-gradient(135deg,#f8fafc,#eefbf7);
    border:1px solid #d7ebe5;
    color:#0f766e;
    font-size:13px;
    font-weight:700;
    letter-spacing:.02em;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.login-developer-credit em{
    font-style:italic;
}


/* v4.9.7 - daftar nikah dan rekomendasi lebih sejajar, hidup, dan profesional */
.catin-list-page .content{padding:18px;margin:0}
.catin-list-card{width:100%;max-width:none;margin:0;border-radius:26px;overflow:hidden;border:1px solid rgba(207,224,230,.95);box-shadow:0 20px 52px rgba(24,60,80,.10);background:linear-gradient(180deg,#ffffff 0%,#fbfefe 100%)}
.catin-list-card>.card-header{min-height:92px;padding:22px 26px;background:radial-gradient(circle at 92% 12%,rgba(45,212,191,.12),transparent 25%),linear-gradient(135deg,#ffffff,#f5fcfa);border-bottom:1px solid #deeaee}
.catin-list-card>.card-header h2{font-size:21px;letter-spacing:-.025em;color:#17243b;margin-bottom:3px}
.catin-list-card>.card-header .text-muted{font-size:13px;color:#6c7e91}
.catin-list-card>.card-body{padding:22px 26px 26px}
.catin-list-page .service-data-tabs{gap:14px;margin-bottom:18px}
.catin-list-page .service-data-tab{position:relative;overflow:hidden;min-height:66px;padding:15px 18px;border-radius:17px;border:1px solid #dbe7eb;background:linear-gradient(180deg,#fff,#f7fafc);box-shadow:0 8px 20px rgba(25,60,78,.045)}
.catin-list-page .service-data-tab::before{content:"";position:absolute;right:-22px;top:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(20,184,166,.12),transparent 70%)}
.catin-list-page .service-data-tab:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(20,91,91,.10);border-color:#b9ddd6}
.catin-list-page .service-data-tab.active{background:linear-gradient(135deg,#edfffa,#f8fffd);border-color:#36d5bd;box-shadow:0 14px 30px rgba(20,184,166,.13)}
.catin-list-page .service-data-tab-warning.active{background:linear-gradient(135deg,#fffaf0,#fffef9);border-color:#f5a623;box-shadow:0 14px 30px rgba(245,158,11,.12)}
.catin-list-page .service-data-tab span{font-size:14px;font-weight:800;position:relative;z-index:1}
.catin-list-page .service-data-tab strong{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;font-size:13px;position:relative;z-index:1;box-shadow:0 7px 16px rgba(20,60,76,.09)}
.catin-list-page .search-bar{padding:5px;border:1px solid #dbe7eb;border-radius:16px;background:#f8fbfc;gap:8px}
.catin-list-page .search-bar .form-control{border:0;background:transparent;box-shadow:none;padding-left:14px}
.catin-list-page .search-bar .btn{border-radius:12px;min-width:70px}
.catin-list-table-wrap{margin-top:18px;border:1px solid #e1eaee;border-radius:20px;overflow:auto;background:#fff;box-shadow:0 10px 28px rgba(25,60,78,.055)}
.catin-list-table{min-width:1180px}
.catin-list-table th{padding:15px 12px;background:linear-gradient(180deg,#f8fbfc,#f1f7f8);color:#526679;border-bottom:1px solid #dce8ec;font-size:10px;letter-spacing:.055em;white-space:nowrap}
.catin-list-table td{padding:16px 12px;vertical-align:middle;border-bottom:1px solid #ebf1f3}
.catin-list-table tbody tr{transition:background .18s ease,box-shadow .18s ease}
.catin-list-table tbody tr:hover{background:linear-gradient(90deg,#f3fffb,#fbfefe);box-shadow:inset 4px 0 0 #17b89f}
.catin-list-table .actions{gap:7px;align-items:center}
.catin-list-table .actions .btn{min-height:34px;border-radius:10px;white-space:nowrap}
@media(max-width:900px){.catin-list-page .content{padding:10px}.catin-list-card{border-radius:20px}.catin-list-card>.card-header,.catin-list-card>.card-body{padding:18px}.catin-list-page .service-data-tabs{grid-template-columns:1fr}.catin-list-page .search-bar{display:grid;grid-template-columns:1fr auto}.catin-list-page .search-bar .btn-secondary{grid-column:1/-1}}


/* v4.9.8 - daftar melebar otomatis, menu layanan dapat digeser, dan tampilan persyaratan dirapikan */
.catin-list-page .content{max-width:none!important;width:100%!important;padding:18px!important;margin:0!important}
.catin-list-page .main-area{min-width:0;width:auto}
.catin-list-page .catin-list-card{width:100%!important;max-width:none!important}
@media(min-width:1600px){
  .catin-list-page .content{padding:18px 22px!important}
  .catin-list-card>.card-header{padding-left:30px;padding-right:30px}
  .catin-list-card>.card-body{padding-left:30px;padding-right:30px}
  .catin-list-table{min-width:100%}
}
.sidebar{overflow:hidden}
.sidebar .nav-caption{flex:0 0 auto}
.sidebar .nav-menu{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scroll-behavior:smooth;margin-top:6px;padding:4px 4px 10px 0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.32) transparent}
.sidebar .nav-menu::-webkit-scrollbar{width:5px}
.sidebar .nav-menu::-webkit-scrollbar-track{background:transparent}
.sidebar .nav-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:999px}
.sidebar-scroll-btn{flex:0 0 auto;width:100%;height:27px;border:0;border-radius:10px;display:grid;place-items:center;color:rgba(255,255,255,.88);background:rgba(255,255,255,.08);cursor:pointer;transition:.18s ease;margin-top:5px}
.sidebar-scroll-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sidebar-scroll-btn:hover:not(:disabled){background:rgba(255,255,255,.16);transform:translateY(-1px)}
.sidebar-scroll-btn:disabled{opacity:.32;cursor:default}
.sidebar-scroll-btn.is-hidden{display:none}
.sidebar-scroll-down{margin-top:4px;margin-bottom:5px}
.sidebar-footer{flex:0 0 auto;margin-top:0}
.sidebar-collapsed .sidebar-scroll-btn{width:42px;margin-left:auto;margin-right:auto}
@media(max-width:900px){
  .sidebar .nav-menu{padding-bottom:14px}
  .sidebar-scroll-btn{height:32px}
  .catin-list-page .content{padding:10px!important}
}


/* v5.0.0 - Sidebar staff lebih ringkas dan brand baru */
.brand-copy strong{font-size:17px;line-height:1.2}
.staff-sidebar .nav-caption{margin:16px 4px 8px;font-size:10px;letter-spacing:.14em}
.staff-sidebar .nav-menu{display:flex!important;flex-direction:column;gap:10px!important;flex:0 1 auto!important;overflow:visible!important;padding:2px 0 10px!important;margin-top:2px!important}
.staff-sidebar .nav-link{min-height:58px!important;padding:10px 12px!important;border-radius:16px!important;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035))!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);gap:11px!important}
.staff-sidebar .nav-link:hover{transform:translateX(3px)!important;background:rgba(255,255,255,.11)!important}
.staff-sidebar .nav-link.active{min-height:62px!important;background:linear-gradient(135deg,#27cdb2,#0ba79e)!important;box-shadow:0 12px 26px rgba(0,43,52,.22),inset 0 1px 0 rgba(255,255,255,.25)!important}
.staff-sidebar .nav-icon{width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:11px!important}
.staff-sidebar .nav-icon svg{width:19px!important;height:19px!important}
.staff-sidebar .nav-text{font-size:13px;font-weight:800}
.staff-sidebar .sidebar-footer{margin-top:auto;padding-top:12px}
.staff-sidebar .user-card{padding:10px;border-radius:15px}
.staff-sidebar .user-card .avatar{width:40px;height:40px}
.staff-sidebar .logout-link{margin-top:10px;padding:10px 12px;border-radius:14px}
@media(max-width:900px){
  .staff-sidebar .nav-menu{overflow-y:auto!important}
}


/* =========================================================
   V5.0.1 — RESPONSIVE MENYELURUH DESKTOP, TABLET, DAN HP
   ========================================================= */
:root{
  --mobile-safe-top:env(safe-area-inset-top,0px);
  --mobile-safe-right:env(safe-area-inset-right,0px);
  --mobile-safe-bottom:env(safe-area-inset-bottom,0px);
  --mobile-safe-left:env(safe-area-inset-left,0px);
}
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas,iframe{max-width:100%}
.main-area,.content,.card,.card-body,.table-responsive,.public-dashboard,.requirements-main{min-width:0;max-width:100%}
.table-responsive,.public-table-wrap{position:relative;max-width:100%;overflow-x:auto!important;overflow-y:visible;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:#9bcfc5 #eef7f5}
.table-responsive::-webkit-scrollbar,.public-table-wrap::-webkit-scrollbar{height:8px}
.table-responsive::-webkit-scrollbar-track,.public-table-wrap::-webkit-scrollbar-track{background:#eef7f5;border-radius:999px}
.table-responsive::-webkit-scrollbar-thumb,.public-table-wrap::-webkit-scrollbar-thumb{background:#91c9be;border-radius:999px}
.table-responsive.has-horizontal-scroll,.public-table-wrap.has-horizontal-scroll{padding-bottom:4px}
.table-responsive:focus-visible,.public-table-wrap:focus-visible{outline:3px solid rgba(15,118,110,.18);outline-offset:3px;border-radius:12px}

@media screen and (max-width:1180px){
  .content{padding:20px}
  .stats-grid,.v2-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .two-column,.v2-main-grid,.v2-lower-grid,.staff-main-grid{grid-template-columns:1fr!important}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-header{gap:16px}
  .card-header>.actions{justify-content:flex-end}
  .public-dashboard{width:min(100% - 24px,1460px)!important}
  .statistics-page .public-dashboard{width:min(100% - 24px,1500px)!important}
}

@media screen and (max-width:900px){
  body.sidebar-mobile-open{overflow:hidden;touch-action:none}
  .sidebar{
    width:min(86vw,320px)!important;
    height:100dvh;
    min-height:100dvh;
    padding:max(16px,var(--mobile-safe-top)) 14px max(14px,var(--mobile-safe-bottom))!important;
    transform:translateX(-105%);
    box-shadow:24px 0 60px rgba(3,35,45,.28)!important;
    overflow:hidden!important;
  }
  .sidebar.open{transform:translateX(0)!important}
  .sidebar .brand{padding:2px 4px 14px!important;margin-bottom:6px!important}
  .sidebar .brand-mark.brand-mark--logo{width:52px!important;height:52px!important;flex:0 0 52px!important}
  .sidebar .brand-copy strong{font-size:17px!important}
  .sidebar .nav-caption{margin:10px 3px 6px!important}
  .sidebar .nav-menu,.staff-sidebar .nav-menu{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain!important;padding-right:3px!important}
  .sidebar .nav-link,.staff-sidebar .nav-link{min-height:50px!important;padding:8px 10px!important;border-radius:14px!important;gap:10px!important}
  .sidebar .nav-icon,.staff-sidebar .nav-icon{width:34px!important;height:34px!important;flex:0 0 34px!important;border-radius:10px!important}
  .sidebar .nav-text,.staff-sidebar .nav-text{font-size:12.5px!important}
  .sidebar .sidebar-footer{margin-top:8px!important;padding-top:10px!important}
  .sidebar .user-card{padding:9px!important}
  .sidebar .logout-link{min-height:44px!important;margin-top:8px!important}
  .sidebar-overlay.show{display:block!important;backdrop-filter:blur(3px)}
  .main-area,.sidebar-collapsed .main-area{margin-left:0!important;width:100%!important}
  .topbar{
    margin:8px 8px 0!important;
    width:calc(100% - 16px)!important;
    min-height:78px!important;
    height:auto!important;
    padding:14px 16px!important;
    border-radius:20px!important;
    gap:12px!important;
  }
  .topbar-heading{min-width:0;flex:1}
  .topbar-heading h1,.dashboard-topbar .topbar-heading h1{font-size:clamp(20px,4.8vw,27px)!important;line-height:1.16!important;overflow-wrap:anywhere}
  .topbar-heading p{font-size:11px!important;flex-wrap:wrap}
  .topbar-badge{display:none!important}
  .menu-toggle{display:grid!important;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px}
  .dashboard-topbar{min-height:94px!important}
  .topbar-scene{display:none!important}
  .content{padding:14px 10px 18px!important;width:100%}
  .footer{margin:0!important;padding:16px 12px calc(16px + var(--mobile-safe-bottom))!important;gap:5px;flex-direction:column;text-align:center}

  .card,.v2-panel,.staff-panel,.account-user-card{border-radius:20px!important}
  .card-header{padding:17px!important;align-items:flex-start!important;flex-direction:column!important}
  .card-header h2,.card-header h3{font-size:18px!important}
  .card-header>.actions{width:100%;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .card-header>.actions .btn{width:100%;min-height:44px}
  .card-body{padding:16px!important}
  .actions{gap:7px}
  .btn{min-height:42px;padding:9px 12px;white-space:normal;text-align:center}
  .btn-sm{min-height:37px;padding:7px 10px}

  .form-grid,.detail-grid,.registration-meta-grid,.letter-number-fields{grid-template-columns:1fr!important}
  .form-grid .full,.detail-item.full{grid-column:auto!important}
  .person-block{padding:15px!important;border-radius:16px!important}
  .tabs{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:7px;padding:5px;-webkit-overflow-scrolling:touch}
  .tab-btn{flex:0 0 auto;min-width:150px;scroll-snap-align:start;min-height:42px}
  .form-actions{position:sticky;bottom:0;z-index:12;margin:18px -16px -16px!important;padding:12px 16px calc(12px + var(--mobile-safe-bottom))!important;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);box-shadow:0 -10px 28px rgba(20,52,68,.08);flex-direction:column-reverse!important}
  .form-actions .btn{width:100%}

  .catin-list-page .content{padding:10px 8px 16px!important}
  .catin-list-card{width:100%!important;border-radius:18px!important}
  .catin-list-card>.card-header,.catin-list-card>.card-body{padding:15px!important}
  .catin-list-page .service-data-tabs{display:flex!important;grid-template-columns:none!important;overflow-x:auto!important;scroll-snap-type:x mandatory;gap:9px;padding:2px 1px 8px;-webkit-overflow-scrolling:touch}
  .catin-list-page .service-data-tab{flex:0 0 min(78vw,300px)!important;min-height:58px;scroll-snap-align:start}
  .catin-list-page .search-bar{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px}
  .catin-list-page .search-bar input{min-width:0!important}
  .catin-list-page .search-bar .btn-secondary{grid-column:1/-1}
  .catin-list-page .table{min-width:1040px!important}
  .catin-list-page .table th,.catin-list-page .table td{padding:10px!important}
  .catin-list-page .table .actions{min-width:120px;display:grid;grid-template-columns:1fr 1fr}
  .catin-list-page .table .actions form{display:contents}

  .stats-grid,.v2-stat-grid,.staff-stat-grid{grid-template-columns:1fr 1fr!important;gap:12px!important}
  .v2-welcome,.staff-welcome-card{padding:18px!important;border-radius:20px!important}
  .dashboard-live-clock{width:100%!important;min-width:0!important}
  .v2-panel-head,.staff-panel-head{gap:12px;align-items:flex-start!important;flex-direction:column!important}
  .v2-chart-area{height:245px!important}

  .print-choice-modal,.export-date-modal,.health-preview-modal{padding:8px!important;align-items:flex-end!important}
  .print-choice-dialog,.print-doc-dialog,.export-date-dialog,.health-preview-dialog{width:100%!important;max-width:none!important;max-height:94dvh;border-radius:22px 22px 0 0!important;overflow-y:auto!important}
  .print-doc-grid{grid-template-columns:1fr 1fr!important}
  .print-choice-actions.single-row,.export-date-actions{align-items:stretch!important}
  .health-preview-dialog{height:94dvh!important}

  .public-nav{padding:10px 12px!important;min-height:68px;height:auto!important}
  .public-brand{min-width:0;max-width:calc(100% - 56px)}
  .public-brand strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .public-dashboard,.statistics-page .public-dashboard,.requirements-main{width:calc(100% - 16px)!important;margin:10px auto 24px!important}
  .public-hero{grid-template-columns:1fr!important;padding:25px 20px!important;min-height:0!important;border-radius:24px!important}
  .public-hero h1{font-size:clamp(28px,7vw,36px)!important}
  .public-hero-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:9px}
  .public-hero-actions a:first-child{grid-column:1/-1}
  .public-section{padding:20px 15px!important;border-radius:22px!important;margin-top:16px!important}
  .public-section-title h2{font-size:clamp(22px,5vw,27px)!important}
  .public-chart-grid{grid-template-columns:1fr!important;gap:13px!important}
  .public-chart-card.wide{grid-column:auto!important}
  .public-canvas,.public-canvas.tall{min-height:235px!important}
  .public-data-table{min-width:820px!important}
  .statistics-page .public-filter-shell{grid-template-columns:1fr!important}
  .statistics-page .public-filter-highlights{grid-template-columns:1fr 1fr!important}
  .statistics-page .public-stat-filter{grid-template-columns:1fr 1fr!important}
  .requirements-grid{grid-template-columns:1fr!important}
}

@media screen and (max-width:620px){
  .topbar{padding:12px!important;min-height:72px!important}
  .topbar-heading h1,.dashboard-topbar .topbar-heading h1{font-size:20px!important}
  .topbar-heading p{margin-top:5px!important}
  .content{padding:10px 7px 15px!important}
  .card-header,.card-body{padding:14px!important}
  .card-header>.actions{grid-template-columns:1fr!important}
  .service-data-tabs,.catin-list-page .service-data-tabs{margin-left:-2px;margin-right:-2px}
  .catin-list-page .service-data-tab{flex-basis:84vw!important}
  .catin-list-page .search-bar{grid-template-columns:1fr!important}
  .catin-list-page .search-bar .btn{width:100%}
  .catin-list-page .search-bar .btn-secondary{grid-column:auto}
  .stats-grid,.v2-stat-grid,.staff-stat-grid{grid-template-columns:1fr!important}
  .v2-stat-card,.stat-card,.staff-stat-card{min-height:auto!important}
  .dashboard-live-clock{grid-template-columns:44px minmax(0,1fr)!important;padding:13px!important}
  .clock-today{grid-column:1/-1!important;border-left:0!important;border-top:1px solid #dbeae6;padding-top:10px!important}
  .print-doc-grid{grid-template-columns:1fr!important}
  .print-doc-selector{padding:13px!important}
  .print-choice-heading{grid-template-columns:44px minmax(0,1fr)!important}
  .export-date-grid{grid-template-columns:1fr!important}
  .public-hero-actions{grid-template-columns:1fr!important}
  .public-hero-actions a:first-child{grid-column:auto}
  .public-hero-summary{grid-template-columns:1fr!important}
  .public-filter{width:100%;overflow-x:auto}
  .public-filter button{flex:0 0 auto}
  .statistics-page .public-filter-highlights,.statistics-page .public-stat-filter{grid-template-columns:1fr!important}
  .statistics-page .public-filter-actions{flex-direction:column!important}
  .statistics-page .public-filter-actions>*{width:100%!important}
  .public-akad-v3-title h2{font-size:23px!important}
  .public-akad-v3-head,.public-akad-v3-timeline{padding-left:14px!important;padding-right:14px!important}
  .requirements-hero{padding:24px 17px!important}
  .requirements-hero h1{font-size:28px!important}
  .requirements-card header{grid-template-columns:50px minmax(0,1fr)!important;padding:17px 14px!important}
  .requirements-list{padding:8px!important}
  .requirements-list li{grid-template-columns:38px minmax(0,1fr)!important;padding:11px 7px!important}
  .req-icon{width:36px!important;height:36px!important}
  .footer{font-size:11px!important}
}

@media screen and (max-width:390px){
  .sidebar{width:92vw!important}
  .menu-toggle{width:39px;height:39px;flex-basis:39px}
  .topbar-heading h1,.dashboard-topbar .topbar-heading h1{font-size:18px!important}
  .btn{font-size:12px}
  .catin-list-page .service-data-tab{flex-basis:88vw!important}
  .public-brand strong{font-size:11px!important}
  .public-brand small{font-size:9px!important}
}

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


/* Pembaruan 5.0.2 - header tetap terlihat saat halaman digulir */
:root{--public-sticky-height:78px}

/* Header publik tetap berada di atas pada desktop, tablet, HP, dan mode PWA. */
.public-dashboard-body .public-nav,
.statistics-page .public-nav,
.requirements-page .public-nav{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  z-index:1000!important;
  margin:0!important;
  border-radius:0 0 22px 22px!important;
  box-shadow:0 14px 34px rgba(22,61,80,.14)!important;
  padding-top:max(10px,env(safe-area-inset-top))!important;
}
.public-dashboard-body,
.statistics-page,
.requirements-page{
  padding-top:calc(var(--public-sticky-height) + env(safe-area-inset-top))!important;
}

/* Header area Admin dan Staff tetap terlihat ketika konten digulir. */
.main-area>.topbar{
  position:sticky!important;
  top:0!important;
  z-index:90!important;
  flex:0 0 auto!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

/* Mencegah judul tertutup ketika menuju anchor. */
[id]{scroll-margin-top:110px}

@media screen and (max-width:900px){
  :root{--public-sticky-height:68px}
  .public-dashboard-body .public-nav,
  .statistics-page .public-nav,
  .requirements-page .public-nav{
    min-height:68px!important;
    padding:10px 12px!important;
    padding-top:max(10px,env(safe-area-inset-top))!important;
  }
  .public-dashboard-body,
  .statistics-page,
  .requirements-page{
    padding-top:calc(68px + env(safe-area-inset-top))!important;
  }
  .main-area>.topbar{
    top:0!important;
    margin-top:0!important;
    border-radius:0 0 20px 20px!important;
    width:100%!important;
  }
}

@media screen and (max-width:620px){
  :root{--public-sticky-height:66px}
  .public-dashboard-body,
  .statistics-page,
  .requirements-page{
    padding-top:calc(66px + env(safe-area-inset-top))!important;
  }
  .public-dashboard-body .public-nav,
  .statistics-page .public-nav,
  .requirements-page .public-nav{
    min-height:66px!important;
  }
}

@media print{
  .public-dashboard-body,
  .statistics-page,
  .requirements-page{padding-top:0!important}
  .public-dashboard-body .public-nav,
  .statistics-page .public-nav,
  .requirements-page .public-nav{position:static!important}
}


/* Pembaruan 5.0.3 - header Admin dan Staff selalu terlihat */
:root{--admin-topbar-space:132px}

body.admin-fixed-topbar .main-area>.topbar{
  position:fixed!important;
  top:0!important;
  left:304px!important;
  right:18px!important;
  width:auto!important;
  margin:18px 0 0!important;
  z-index:1000!important;
  flex:0 0 auto!important;
  background:rgba(255,255,255,.96)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
  box-shadow:0 16px 38px rgba(22,61,80,.12)!important;
}
body.admin-fixed-topbar.sidebar-collapsed .main-area>.topbar{
  left:104px!important;
}
body.admin-fixed-topbar .main-area>.content{
  margin-top:var(--admin-topbar-space)!important;
}

/* Header tetap berlaku pada Dashboard Admin/Staff, daftar, form input, dan penomoran surat. */
body.admin-fixed-topbar.dashboard-body .main-area>.topbar,
body.admin-fixed-topbar.catin-list-page .main-area>.topbar,
body.admin-fixed-topbar .main-area>.topbar.dashboard-topbar{
  visibility:visible!important;
  opacity:1!important;
}

@media screen and (max-width:900px){
  body.admin-fixed-topbar .main-area>.topbar,
  body.admin-fixed-topbar.sidebar-collapsed .main-area>.topbar{
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    margin:0!important;
    padding-top:max(12px,env(safe-area-inset-top))!important;
    border-radius:0 0 20px 20px!important;
    z-index:1000!important;
  }
  body.admin-fixed-topbar .main-area>.content{
    margin-top:var(--admin-topbar-space)!important;
  }
  body.admin-fixed-topbar .sidebar.open{
    z-index:1200!important;
  }
  body.admin-fixed-topbar .sidebar-overlay.show{
    z-index:1100!important;
  }
}

@media print{
  body.admin-fixed-topbar .main-area>.topbar{position:static!important;margin:0!important}
  body.admin-fixed-topbar .main-area>.content{margin-top:0!important}
}


/* v5.0.4 - pilihan pekerjaan seragam */
.occupation-field{position:relative}
.occupation-select{
    min-height:46px;
    padding-right:42px;
    background-color:#fff;
    background-image:linear-gradient(45deg,transparent 50%,#0f766e 50%),linear-gradient(135deg,#0f766e 50%,transparent 50%);
    background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
    background-size:6px 6px,6px 6px;
    background-repeat:no-repeat;
}
.occupation-select:focus{background-color:#fbfffe}
@media(max-width:560px){.occupation-select{min-height:48px;font-size:14px}}

/* v5.0.5 - Popup pilih pasangan cetak lebih elegan dan hidup */
.print-doc-modal .print-choice-backdrop{background:rgba(5,24,38,.72);backdrop-filter:blur(12px) saturate(1.15)}
.print-doc-dialog{width:min(920px,calc(100% - 24px));max-width:920px;max-height:92vh;overflow-y:auto;padding:30px;border:1px solid rgba(255,255,255,.9);background:radial-gradient(circle at 95% 0,rgba(45,212,191,.16),transparent 30%),radial-gradient(circle at 4% 100%,rgba(59,130,246,.12),transparent 30%),linear-gradient(155deg,#ffffff 0%,#f5fcfa 57%,#f4f8ff 100%);box-shadow:0 42px 110px rgba(2,25,41,.38),inset 0 1px 0 #fff}
.print-doc-dialog::-webkit-scrollbar{width:8px}.print-doc-dialog::-webkit-scrollbar-thumb{background:#b8d9d3;border-radius:999px}.print-doc-dialog::-webkit-scrollbar-track{background:transparent}
.print-doc-dialog .print-choice-close{z-index:5;background:rgba(255,255,255,.86);border:1px solid #d9e9e8;box-shadow:0 8px 20px rgba(20,53,72,.10);transition:.2s}
.print-doc-dialog .print-choice-close:hover{transform:rotate(7deg) scale(1.04);background:#fff;color:#0f766e}
.print-doc-dialog .print-choice-heading{margin-bottom:15px}.print-doc-dialog .print-choice-heading h2{font-size:27px;letter-spacing:-.035em}.print-doc-dialog .print-choice-heading p{font-size:13px;line-height:1.6;max-width:680px}
.print-doc-dialog .print-choice-symbol{width:62px;height:62px;border-radius:20px;animation:printSymbolFloat 3.4s ease-in-out infinite}
@keyframes printSymbolFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.print-doc-stepbar{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid #dcebea;box-shadow:0 10px 24px rgba(20,57,75,.05)}
.print-doc-stepbar span{display:inline-flex;align-items:center;gap:7px;color:#738296;font-size:11px;font-weight:800;white-space:nowrap}.print-doc-stepbar span b{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:#e7eef2;color:#668093;font-size:11px}
.print-doc-stepbar span.is-active{color:#087d72}.print-doc-stepbar span.is-active b{background:linear-gradient(135deg,#17b899,#087d79);color:#fff;box-shadow:0 6px 14px rgba(8,125,121,.22)}
.print-doc-stepbar i{height:1px;flex:1;min-width:18px;background:linear-gradient(90deg,#c6dfda,#e4edf0)}.print-doc-stepbar-blue span.is-active{color:#2563b5}.print-doc-stepbar-blue span.is-active b{background:linear-gradient(135deg,#3b82f6,#2563b5)}
.print-doc-selector{gap:10px;margin:0 0 20px;padding:20px;border-radius:24px;background:rgba(255,255,255,.82);box-shadow:0 18px 42px rgba(20,58,78,.075),inset 0 1px 0 #fff}
.print-doc-selector label{display:flex;align-items:center;gap:8px;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:#466175}.print-doc-selector label::before{content:"";width:8px;height:8px;border-radius:50%;background:#15b89d;box-shadow:0 0 0 4px rgba(21,184,157,.12)}
.print-doc-selector select{appearance:none;-webkit-appearance:none;padding-right:48px;background-image:linear-gradient(45deg,transparent 50%,#2b6e68 50%),linear-gradient(135deg,#2b6e68 50%,transparent 50%),linear-gradient(180deg,#fff,#f9fcfd);background-position:calc(100% - 22px) 22px,calc(100% - 16px) 22px,0 0;background-size:6px 6px,6px 6px,100% 100%;background-repeat:no-repeat;font-weight:700}
.print-selected-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:13px;padding:13px 15px;border-radius:18px;background:linear-gradient(135deg,#edfbf7,#f8fffd);border:1px solid #bfe8dd;box-shadow:0 10px 25px rgba(15,118,110,.08);transition:.25s ease}
.print-selected-card.is-empty{background:#f7f9fb;border-color:#e0e7eb;box-shadow:none}.print-selected-card.is-ready{animation:selectedCardIn .3s ease}@keyframes selectedCardIn{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:none}}
.print-selected-card-blue{background:linear-gradient(135deg,#eef6ff,#f8fbff);border-color:#c9dcf7}.print-selected-avatar{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#16b999,#087d79);color:#fff;font-size:24px;font-weight:900;box-shadow:0 9px 20px rgba(8,125,121,.2)}
.print-selected-card-blue .print-selected-avatar{background:linear-gradient(135deg,#3b82f6,#2563b5)}.print-selected-card.is-empty .print-selected-avatar{background:#e6edf1;color:#8193a1;box-shadow:none}
.print-selected-copy{min-width:0}.print-selected-copy small,.print-selected-copy strong,.print-selected-copy span{display:block}.print-selected-copy small{font-size:9px;font-weight:900;letter-spacing:.12em;color:#0d8979}.print-selected-copy strong{margin-top:2px;color:#17324a;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.print-selected-copy span{margin-top:4px;color:#708194;font-size:11px}.print-selected-copy span b,.print-selected-copy span em{font-style:normal;font-weight:700}.print-selected-copy span i{display:inline-block;width:4px;height:4px;margin:0 7px;border-radius:50%;background:#9bb0bb;vertical-align:middle}
.print-selected-status{padding:7px 10px;border-radius:999px;background:#dff7ef;color:#08776d;font-size:10px;font-weight:900;white-space:nowrap}.print-selected-card.is-empty .print-selected-status{background:#edf1f4;color:#718394}
.print-doc-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.print-doc-btn{min-height:96px;display:flex;align-items:center;gap:10px;text-align:left;padding:13px;border-radius:18px}
.print-doc-btn-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#dff8f2,#ecfdf8);border:1px solid #bee9df;color:#0c8073;font-size:11px;font-weight:900;box-shadow:0 7px 16px rgba(15,118,110,.09);transition:.22s ease}
.rekom-print-doc-btn .print-doc-btn-icon{background:linear-gradient(135deg,#eaf3ff,#f4f8ff);border-color:#cbdcf7;color:#2563b5}.print-doc-btn-copy{display:block;min-width:0}.print-doc-btn-copy strong,.print-doc-btn-copy small{display:block}.print-doc-btn-copy strong{font-size:12px;line-height:1.25;color:#163149}.print-doc-btn-copy small{margin-top:4px;font-size:9px;line-height:1.35;color:#7a8998;font-weight:700}
.print-doc-btn:hover .print-doc-btn-icon{transform:scale(1.06) rotate(-2deg)}.letter-middle-storage-note{border-radius:12px}.print-choice-actions.single-row{padding-top:3px}
@media(max-width:900px){.print-doc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.print-doc-dialog{width:min(760px,calc(100% - 18px));padding:24px}.print-doc-stepbar{overflow-x:auto}.print-doc-stepbar i{min-width:28px}}
@media(max-width:560px){.print-doc-modal{align-items:flex-end!important;padding:0!important}.print-doc-dialog{width:100%;max-height:94dvh;border-radius:26px 26px 0 0!important;padding:20px 15px 18px}.print-doc-dialog .print-choice-heading h2{font-size:21px}.print-doc-dialog .print-choice-heading p{font-size:11px}.print-doc-stepbar{padding:9px 10px;gap:7px}.print-doc-stepbar span{font-size:10px}.print-doc-stepbar span b{width:22px;height:22px}.print-doc-selector{padding:14px}.print-selected-card{grid-template-columns:42px minmax(0,1fr);padding:11px}.print-selected-avatar{width:40px;height:40px}.print-selected-status{grid-column:2;justify-self:start}.print-doc-grid{grid-template-columns:1fr 1fr!important;gap:9px}.print-doc-btn{min-height:86px;padding:10px;gap:8px}.print-doc-btn-icon{width:34px;height:34px;flex-basis:34px}.print-doc-btn-copy strong{font-size:11px}.print-doc-btn-copy small{font-size:8.5px}.print-choice-actions.single-row .btn{width:100%}}
@media(max-width:380px){.print-doc-grid{grid-template-columns:1fr!important}}


/* Pembaruan 5.0.6 - fokus popup cetak tanpa sidebar dan topbar */
.print-choice-modal{z-index:12000!important}
body.print-module-open{overflow:hidden!important}
body.print-module-open .sidebar,
body.print-module-open .sidebar-collapse-toggle,
body.print-module-open.admin-fixed-topbar .main-area>.topbar,
body.print-module-open .main-area>.topbar{
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  transform:translateY(-8px)!important;
}
body.print-module-open .print-choice-modal.is-open{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
body.print-module-open .print-choice-backdrop{
  background:rgba(5,24,38,.78)!important;
  backdrop-filter:blur(14px) saturate(1.12)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.12)!important;
}
@media(max-width:900px){
  body.print-module-open .sidebar.open{visibility:hidden!important;opacity:0!important;pointer-events:none!important}
  body.print-module-open .sidebar-overlay{display:none!important}
}


/* v5.0.7 - pagination data publik per 5 baris/kategori */
.public-table-pagination,.public-chart-pagination{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;margin-top:12px;border-radius:16px;background:linear-gradient(135deg,#f7fbfc,#effaf7);border:1px solid #dcebec;box-shadow:0 10px 24px rgba(24,61,80,.055)}
.public-chart-pagination{margin:0 16px 16px}
.public-pagination-summary{font-size:12px;font-weight:800;color:#607386}
.public-pagination-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.public-pagination-controls button{min-width:36px;height:36px;padding:0 10px;border:1px solid #cfe2e5;border-radius:11px;background:#fff;color:#315067;font-size:12px;font-weight:900;cursor:pointer;box-shadow:0 5px 12px rgba(24,61,80,.06);transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease}
.public-pagination-controls button:hover:not(:disabled){transform:translateY(-2px);border-color:#7ccfc1;color:#08796f}
.public-pagination-controls button.active{background:linear-gradient(135deg,#15ad91,#087d79);border-color:#087d79;color:#fff;box-shadow:0 8px 18px rgba(8,125,121,.22)}
.public-pagination-controls button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.public-page-row[hidden]{display:none!important}
@media(max-width:600px){.public-table-pagination,.public-chart-pagination{align-items:flex-start;flex-direction:column;padding:13px}.public-pagination-controls{width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.public-pagination-controls button{flex:0 0 auto}.public-chart-pagination{margin:0 10px 12px}}


/* Pembaruan 5.1.0 - pencarian data catin berdasarkan nomor registrasi */
.public-search-nav-link{background:linear-gradient(135deg,#e2fbf5,#effffb)!important;color:#087d79!important;border-color:#a8e6d9!important;font-weight:900!important}
.public-registration-search{position:relative;overflow:hidden;background:linear-gradient(145deg,#f6fffc 0%,#edf9f8 54%,#f9fcff 100%);border:1px solid #d6ebe8;box-shadow:0 20px 55px rgba(21,72,83,.09)}
.public-registration-search:before{content:"";position:absolute;width:270px;height:270px;border-radius:50%;right:-110px;top:-120px;background:radial-gradient(circle,rgba(43,203,172,.18),rgba(43,203,172,0) 70%);pointer-events:none}
.public-registration-search-shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);gap:40px;align-items:center;padding:32px}
.public-registration-search-copy h2{margin:9px 0 10px;color:#17354b;font-size:clamp(25px,3vw,38px);line-height:1.13}.public-registration-search-copy>p{max-width:650px;margin:0;color:#607587;line-height:1.75}
.public-registration-search-security{display:flex;align-items:center;gap:12px;margin-top:20px;padding:12px 14px;border:1px solid #c9e9e2;border-radius:16px;background:rgba(255,255,255,.72)}
.public-registration-search-security>span{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;border-radius:12px;background:#dff8f2;color:#087d79}.public-registration-search-security svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.public-registration-search-security strong,.public-registration-search-security small{display:block}.public-registration-search-security strong{color:#1e4f5b;font-size:12px}.public-registration-search-security small{margin-top:2px;color:#718596;font-size:10px;line-height:1.45}
.public-registration-search-form{position:relative;padding:24px;border:1px solid rgba(191,226,220,.95);border-radius:24px;background:rgba(255,255,255,.93);box-shadow:0 17px 42px rgba(24,69,81,.1)}
.public-registration-search-form label{display:block;margin-bottom:9px;color:#21465a;font-size:12px;font-weight:900;letter-spacing:.04em}.public-registration-search-form>small{display:block;margin-top:9px;color:#758897;font-size:10px;line-height:1.5}
.public-registration-search-input{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;overflow:hidden;border:1px solid #c9dfe1;border-radius:16px;background:#fff;transition:.2s ease}.public-registration-search-input:focus-within{border-color:#19ad94;box-shadow:0 0 0 4px rgba(25,173,148,.12)}
.public-registration-search-input>span{display:grid;place-items:center;color:#0e8b7b}.public-registration-search-input svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.public-registration-search-input input{min-width:0;height:54px;border:0;outline:0;background:transparent;color:#19374c;font-size:15px;font-weight:800;text-transform:uppercase}.public-registration-search-input input::placeholder{color:#a1afb9;font-weight:600;text-transform:none}.public-registration-search-input button{height:44px;margin-right:5px;padding:0 20px;border:0;border-radius:12px;background:linear-gradient(135deg,#13ad90,#087d79);color:#fff;font-size:12px;font-weight:900;cursor:pointer;box-shadow:0 8px 18px rgba(8,125,121,.2);transition:.2s ease}.public-registration-search-input button:hover{transform:translateY(-1px);box-shadow:0 11px 22px rgba(8,125,121,.25)}
.public-registration-result{position:relative;z-index:1;margin:0 32px 32px;padding:25px;border:1px solid #d5e8e7;border-radius:25px;background:#fff;box-shadow:0 18px 42px rgba(20,65,79,.08);animation:publicSearchResultIn .35s ease}@keyframes publicSearchResultIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.public-registration-message{display:flex;align-items:center;justify-content:center;gap:14px;min-height:120px;padding:22px;border-radius:19px;text-align:left}.public-registration-message>span{width:48px;height:48px;display:grid;place-items:center;flex:0 0 48px;border-radius:16px;font-size:22px;font-weight:900}.public-registration-message svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.public-registration-message strong{display:block;color:#29465a;font-size:17px}.public-registration-message p{margin:5px 0 0;color:#687c8d;font-size:12px}.public-registration-message.not-found{background:#fff9ed;border:1px solid #f3dfb9}.public-registration-message.not-found>span{background:#ffedc8;color:#b37215}.public-registration-message.error{background:#fff2f2;border:1px solid #f0cece}.public-registration-message.error>span{background:#f9dede;color:#b23e3e}
.public-registration-result-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px dashed #dbe8e9}.public-registration-success{display:inline-flex;padding:6px 10px;border-radius:999px;background:#dcf8ee;color:#087b6e;font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.public-registration-result-head h3{margin:8px 0 4px;color:#18384e;font-size:24px}.public-registration-result-head p{margin:0;color:#718291;font-size:11px}.public-registration-result-head p strong{color:#285065}.public-registration-verified{width:48px;height:48px;display:grid;place-items:center;flex:0 0 48px;border-radius:16px;background:linear-gradient(135deg,#e3faf4,#edfffb);color:#0a8a78;border:1px solid #bde7dd}.public-registration-verified svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.public-registration-couple-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.public-registration-person{overflow:hidden;border:1px solid #dbe7ea;border-radius:20px;background:#fbfdfe}.public-registration-person header{display:flex;align-items:center;gap:12px;padding:17px 18px;border-bottom:1px solid #e5edef}.public-registration-person header>span{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;border-radius:13px;color:#fff;font-size:14px;font-weight:900}.public-registration-person.male header>span{background:linear-gradient(135deg,#3a8fe8,#2367b5)}.public-registration-person.female header>span{background:linear-gradient(135deg,#e976a8,#bf477c)}.public-registration-person header small,.public-registration-person header strong{display:block}.public-registration-person header small{font-size:8px;font-weight:900;letter-spacing:.12em;color:#7c8d9a}.public-registration-person header strong{margin-top:3px;color:#193b51;font-size:15px}.public-registration-person dl{margin:0;padding:3px 18px 12px}.public-registration-person dl>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px dashed #e1e9eb}.public-registration-person dl>div:last-child{border-bottom:0}.public-registration-person dt{color:#718493;font-size:10px;font-weight:800}.public-registration-person dd{margin:0;color:#294b5f;font-size:11px;font-weight:800;text-align:right;overflow-wrap:anywhere}.public-registration-person .public-registration-address dd{line-height:1.55;font-weight:700}
.public-registration-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}.public-registration-detail-grid article{display:flex;align-items:flex-start;gap:12px;min-height:105px;padding:16px;border:1px solid #dce8ea;border-radius:19px;background:linear-gradient(145deg,#fff,#f9fcfd)}.public-registration-detail-icon{width:39px;height:39px;display:grid;place-items:center;flex:0 0 39px;border-radius:13px}.public-registration-detail-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.public-registration-detail-icon.guardian{background:#e8f1ff;color:#3975bd}.public-registration-detail-icon.time{background:#e5f9f3;color:#0d8d78}.public-registration-detail-icon.location{background:#fff0e6;color:#cb6d2f}.public-registration-detail-grid small,.public-registration-detail-grid strong,.public-registration-detail-grid p{display:block}.public-registration-detail-grid small{color:#7b8d99;font-size:8px;font-weight:900;letter-spacing:.1em}.public-registration-detail-grid strong{margin-top:5px;color:#1d4056;font-size:13px}.public-registration-detail-grid p{margin:4px 0 0;color:#6d8190;font-size:10px;line-height:1.45}
@media(max-width:980px){.public-registration-search-shell{grid-template-columns:1fr;gap:22px}.public-registration-detail-grid{grid-template-columns:1fr 1fr}.public-registration-detail-grid article:last-child{grid-column:1/-1}}
@media(max-width:650px){.public-registration-search-shell{padding:22px 16px}.public-registration-search-form{padding:16px;border-radius:19px}.public-registration-search-input{grid-template-columns:38px minmax(0,1fr)}.public-registration-search-input button{grid-column:1/-1;width:calc(100% - 10px);height:42px;margin:0 5px 5px}.public-registration-search-input input{height:50px;font-size:13px}.public-registration-result{margin:0 16px 22px;padding:16px;border-radius:20px}.public-registration-result-head h3{font-size:20px}.public-registration-couple-grid,.public-registration-detail-grid{grid-template-columns:1fr}.public-registration-detail-grid article:last-child{grid-column:auto}.public-registration-person dl>div{grid-template-columns:1fr;gap:4px}.public-registration-person dd{text-align:left}.public-registration-message{justify-content:flex-start}.public-registration-verified{display:none}}

/* =========================================================
   V5.1.2 — RESPONSIF GLOBAL & AKSES CEPAT
   ========================================================= */
:root{
  --app-viewport-height:100dvh;
  --tap-size:44px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:110px}
body{min-height:100%;min-height:var(--app-viewport-height);overscroll-behavior-y:contain}
button,input,select,textarea{font:inherit;max-width:100%}
input,select,textarea{min-width:0}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,.btn,[role="button"],input[type="button"],input[type="submit"]{touch-action:manipulation}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.responsive-table-shell{position:relative;width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;border-radius:inherit;scrollbar-width:thin;scrollbar-color:#8fc7bc #edf6f4}
.responsive-table-shell::-webkit-scrollbar{height:8px}
.responsive-table-shell::-webkit-scrollbar-track{background:#edf6f4;border-radius:999px}
.responsive-table-shell::-webkit-scrollbar-thumb{background:#8fc7bc;border-radius:999px}
.responsive-table-shell:focus-visible{outline:3px solid rgba(15,118,110,.2);outline-offset:3px}
.responsive-table-shell>table{margin:0;width:100%}

.print-record-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center;margin-bottom:9px}
.print-record-search input{width:100%;min-height:45px;border:1px solid #d2e4e4;border-radius:13px;padding:10px 13px;background:#fff;color:#1c3044;outline:none;transition:border-color .18s ease,box-shadow .18s ease}
.print-record-search input:focus{border-color:#4fb7a7;box-shadow:0 0 0 4px rgba(15,141,125,.1)}
.print-record-load-status{display:inline-flex;align-items:center;min-height:30px;max-width:235px;padding:6px 10px;border-radius:999px;background:#edf5f5;color:#63768a;font-size:10.5px;font-weight:700;line-height:1.3}
.print-record-load-status.is-loading{background:#fff7dd;color:#93691b}
.print-record-load-status.is-success{background:#e8f8f2;color:#14775f}
.print-record-load-status.is-error{background:#fff0f1;color:#b42336}

[role="dialog"]{max-width:calc(100vw - 20px);max-height:calc(var(--app-viewport-height) - 20px)}
.print-choice-dialog,.print-doc-dialog,.export-date-dialog,.health-preview-dialog,.service-modal-card,.save-pop-card,.wali-warning-card,.letter-number-notice-card{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.print-choice-close,.export-date-close,.wali-warning-close,.letter-number-notice-close{min-width:var(--tap-size);min-height:var(--tap-size)}

@media screen and (min-width:901px) and (max-width:1280px){
  .sidebar{width:250px}
  .main-area{margin-left:250px}
  .content{padding:18px}
  .topbar{margin-left:12px;margin-right:12px}
  .card-header>.actions{flex-wrap:wrap}
  .form-grid{gap:14px}
  .print-doc-dialog{width:min(920px,calc(100vw - 32px))}
}

@media screen and (max-width:900px){
  body{background-attachment:scroll!important}
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important}
  .main-area,.content,.card,.card-body,.form-grid,.detail-grid,.actions,.search-bar,.filter-bar{min-width:0!important}
  .content>*{max-width:100%}
  .card-header,.panel-header,.section-header{min-width:0}
  .card-header h1,.card-header h2,.card-header h3,.panel-header h1,.panel-header h2,.panel-header h3{overflow-wrap:anywhere}
  .form-control,input[type="text"],input[type="search"],input[type="date"],input[type="time"],input[type="number"],input[type="password"],select,textarea{width:100%;min-height:44px}
  textarea{min-height:96px;resize:vertical}
  .actions,.filter-actions,.toolbar-actions{flex-wrap:wrap}
  .actions>.btn,.filter-actions>.btn,.toolbar-actions>.btn{min-width:0}
  .responsive-table-shell,.table-responsive,.public-table-wrap{margin-inline:0;max-width:100vw}
  .responsive-table-shell table,.table-responsive table{width:max-content;min-width:100%}
  .print-record-search{grid-template-columns:1fr}
  .print-record-load-status{max-width:none;width:100%;border-radius:11px}
  .print-choice-dialog,.print-doc-dialog,.export-date-dialog,.service-modal-card{max-height:min(94dvh,calc(var(--app-viewport-height) - 8px))!important}
  .save-pop-card,.wali-warning-card,.letter-number-notice-card{width:min(100%,460px)!important;max-height:calc(var(--app-viewport-height) - 20px)!important;overflow-y:auto!important;padding:24px 18px!important}
  .print-choice-backdrop,.export-date-backdrop,.service-modal-backdrop,.save-pop-backdrop,.wali-warning-backdrop,.letter-number-notice-backdrop{backdrop-filter:blur(3px)!important}
  .public-section,.req-panel,.card,.v2-panel,.staff-panel{box-shadow:0 10px 26px rgba(18,52,67,.07)!important}
}

@media screen and (max-width:620px){
  :root{--tap-size:46px}
  .content{padding-left:max(7px,env(safe-area-inset-left))!important;padding-right:max(7px,env(safe-area-inset-right))!important}
  .topbar{margin-left:max(6px,env(safe-area-inset-left))!important;margin-right:max(6px,env(safe-area-inset-right))!important;width:auto!important}
  .card,.v2-panel,.staff-panel,.public-section,.req-panel{border-radius:17px!important}
  .card-body,.panel-body{min-width:0}
  .btn,.nav-link,.public-nav-actions a,.req-jump a{min-height:var(--tap-size)}
  .actions,.card-header>.actions,.filter-actions,.toolbar-actions,.print-choice-actions,.export-date-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .actions>.btn,.actions>a,.actions>form,.card-header>.actions>*,.filter-actions>*,.toolbar-actions>*,.print-choice-actions>*,.export-date-actions>*{width:100%!important}
  .actions>form .btn{width:100%!important}
  .print-choice-modal,.export-date-modal,.health-preview-modal{padding:0!important}
  .print-choice-dialog,.print-doc-dialog,.export-date-dialog,.health-preview-dialog{max-height:min(96dvh,var(--app-viewport-height))!important;padding-bottom:calc(18px + env(safe-area-inset-bottom))!important}
  .print-doc-grid{grid-template-columns:1fr!important}
  .print-doc-btn{min-height:72px!important}
  .print-choice-heading{padding-right:32px!important}
  .print-choice-heading p{line-height:1.5}
  .public-nav-actions{max-height:calc(var(--app-viewport-height) - 80px);overflow-y:auto;overscroll-behavior:contain}
  .req-jump{display:flex;overflow-x:auto;flex-wrap:nowrap;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .req-jump a{flex:0 0 auto;scroll-snap-align:start}
}

@media screen and (max-width:380px){
  .content{padding-left:5px!important;padding-right:5px!important}
  .topbar{padding:10px!important}
  .menu-toggle{width:38px!important;height:38px!important;flex-basis:38px!important}
  .topbar-heading h1,.dashboard-topbar .topbar-heading h1{font-size:17px!important}
  .card-header,.card-body{padding:12px!important}
  .print-choice-dialog,.print-doc-dialog,.export-date-dialog{padding-left:12px!important;padding-right:12px!important}
  .print-choice-heading{grid-template-columns:40px minmax(0,1fr)!important;gap:10px!important}
  .print-choice-symbol{width:40px!important;height:40px!important}
}

@media screen and (max-height:520px) and (orientation:landscape){
  .print-choice-modal,.export-date-modal,.health-preview-modal,.service-modal{align-items:flex-start!important;padding:5px!important}
  .print-choice-dialog,.print-doc-dialog,.export-date-dialog,.health-preview-dialog,.service-modal-card{width:min(960px,100%)!important;max-height:calc(var(--app-viewport-height) - 10px)!important;border-radius:16px!important;overflow-y:auto!important}
  .sidebar{height:var(--app-viewport-height)!important;min-height:0!important}
  .topbar{min-height:62px!important}
  .topbar-heading p{display:none!important}
}

@media (hover:none){
  .card:hover,.print-choice-card:hover,.print-doc-btn:hover,.service-choice:hover,.nav-link:hover{transform:none!important}
}

@media (prefers-reduced-data:reduce){
  .topbar-scene,.sidebar-glow,.sidebar-pattern,.public-hero-visual,.req-hero-visual{display:none!important}
  *,*::before,*::after{background-image:none!important;box-shadow:none!important}
}

@media print{
  .responsive-table-shell{overflow:visible!important;max-width:none!important}
  .responsive-table-shell>table{width:100%!important}
}

/* =========================================================
   V5.1.3 — PERBAIKAN SCROLL MOUSE, TOUCHPAD, DAN LAYAR SENTUH
   ========================================================= */
html{
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-gutter:stable;
}
body{
  min-height:100%;
  overflow-x:hidden;
  overflow-y:visible;
  touch-action:pan-x pan-y;
}

/* Kembalikan scroll halaman apabila tidak ada lapisan aktif. */
html:not(.is-loading):not(.catin-scroll-locked),
body:not(.is-loading):not(.modal-open):not(.print-module-open):not(.sidebar-mobile-open):not(.catin-scroll-locked){
  overflow-y:auto!important;
  touch-action:pan-x pan-y!important;
}

/* Penguncian hanya berlaku saat popup/menu benar-benar terbuka. */
html.catin-scroll-locked,
body.catin-scroll-locked,
body.modal-open,
body.print-module-open,
body.sidebar-mobile-open,
html.is-loading,
body.is-loading{
  overflow-y:hidden!important;
}

/* Roda mouse dapat menggulir isi popup yang panjang. */
.service-modal-backdrop.is-open,
.print-choice-modal.is-open,
.export-date-modal.is-open,
.health-preview-modal.is-open,
.save-pop-layer,
#waliHakimWarningModal,
.letter-number-notice{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch;
}

.service-modal-card,
.print-choice-dialog,
.print-doc-dialog,
.export-date-dialog,
.health-preview-dialog,
.save-pop-card,
.wali-warning-card,
.letter-number-notice-card{
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}

/* Area konten utama tidak boleh menjadi pengunci scroll tersendiri. */
.app-shell,
.main-area,
.content,
.public-dashboard,
.requirements-main{
  overflow-y:visible;
}

@media screen and (max-width:900px){
  .service-modal-card,
  .print-choice-dialog,
  .print-doc-dialog,
  .export-date-dialog,
  .health-preview-dialog,
  .save-pop-card,
  .wali-warning-card,
  .letter-number-notice-card{
    overflow-y:auto!important;
    max-height:calc(var(--app-viewport-height,100dvh) - 12px)!important;
  }
}

@media print{
  html,body{overflow:visible!important;touch-action:auto!important}
}

/* =========================================================
   V5.1.4 — SCROLL RODA MOUSE STABIL
   ========================================================= */
html:not(.catin-scroll-locked):not(.is-loading){
  height:auto!important;
  min-height:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
}
body:not(.catin-scroll-locked):not(.modal-open):not(.print-module-open):not(.sidebar-mobile-open):not(.is-loading){
  position:static!important;
  height:auto!important;
  min-height:100vh!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  touch-action:auto!important;
}
/* Elemen popup yang tidak terbuka tidak boleh menangkap mouse atau scroll. */
.service-modal-backdrop:not(.is-open),
.print-choice-modal:not(.is-open),
.export-date-modal:not(.is-open),
.health-preview-modal:not(.is-open){
  pointer-events:none!important;
}

/* =========================================================
   V5.1.5 — SCROLL NATIVE LEBIH RESPONSIF
   ========================================================= */
html{
  scroll-behavior:auto!important;
  -webkit-overflow-scrolling:touch;
}
body{
  scroll-behavior:auto!important;
}

/* Scroll halaman utama menggunakan mekanisme asli browser. */
html:not(.catin-scroll-locked):not(.is-loading),
body:not(.catin-scroll-locked):not(.modal-open):not(.print-module-open):not(.sidebar-mobile-open):not(.is-loading){
  overscroll-behavior-y:auto!important;
  scroll-behavior:auto!important;
}

/* Sidebar desktop boleh meneruskan scroll ke halaman setelah mencapai ujung. */
@media screen and (min-width:901px){
  .sidebar .nav-menu,
  .staff-sidebar .nav-menu{
    overscroll-behavior-y:auto!important;
    scroll-behavior:auto!important;
  }
}

/* Pada perangkat sentuh, scroll internal tetap halus dan tidak bocor ke belakang. */
@media screen and (max-width:900px){
  .sidebar .nav-menu,
  .staff-sidebar .nav-menu,
  .service-modal-backdrop.is-open,
  .print-choice-modal.is-open,
  .export-date-modal.is-open,
  .health-preview-modal.is-open{
    -webkit-overflow-scrolling:touch;
  }
}


/* =========================================================
   V5.1.6 — UPLOAD DAN TAMPILAN FOTO CATIN
   ========================================================= */
.catin-photo-section{overflow:hidden}
.catin-photo-intro{display:flex;flex-direction:column;gap:5px;margin:0 0 20px;padding:16px 18px;border:1px solid #cdeee9;border-radius:16px;background:linear-gradient(135deg,#effcf9,#f5f9ff);color:#334155}
.catin-photo-intro strong{font-size:16px;color:#0f766e}
.catin-photo-intro span{font-size:13px;line-height:1.65}
.catin-photo-upload-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.catin-photo-upload-card{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;align-items:center;padding:18px;border:1px solid #dbe5ea;border-radius:20px;background:#fff;box-shadow:0 12px 30px rgba(15,23,42,.06)}
.catin-photo-preview{width:170px;aspect-ratio:3/4;border-radius:18px;border:2px dashed #b7cbc9;background:linear-gradient(145deg,#f0fdfa,#ecf4ff);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;overflow:hidden;color:#0f766e}
.catin-photo-preview>span{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#fff;font-size:27px;font-weight:900;box-shadow:0 8px 22px rgba(15,118,110,.14)}
.catin-photo-preview>small{font-weight:700;color:#64748b}
.catin-photo-preview img{width:100%;height:100%;object-fit:cover;display:block}
.catin-photo-upload-copy{min-width:0}
.catin-photo-upload-copy>label:first-child{display:block;margin-bottom:9px;font-weight:800;color:#1e293b}
.catin-photo-file-input{padding:10px!important;height:auto!important}
.catin-photo-file-input::file-selector-button{border:0;border-radius:10px;padding:10px 13px;margin-right:10px;background:#0f766e;color:#fff;font-weight:800;cursor:pointer}
.catin-photo-remove-option{display:flex;align-items:flex-start;gap:9px;margin-top:14px;padding:11px 12px;border-radius:12px;background:#fff7ed;color:#9a3412;font-size:13px;font-weight:700}
.catin-photo-remove-option input{margin-top:2px}
.catin-photo-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.catin-photo-detail-card{display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px;align-items:center;padding:18px;border:1px solid #dbe5ea;border-radius:20px;background:#fff}
.catin-photo-detail-card>img,.catin-photo-detail-placeholder{width:180px;aspect-ratio:3/4;border-radius:18px;object-fit:cover;background:linear-gradient(145deg,#f0fdfa,#edf4ff)}
.catin-photo-detail-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#0f766e}
.catin-photo-detail-placeholder span{font-size:32px;font-weight:900}
.catin-photo-detail-card>div:last-child{display:flex;flex-direction:column;gap:6px}
.catin-photo-detail-card>div:last-child small{font-size:11px;font-weight:900;letter-spacing:.12em;color:#0f766e}
.catin-photo-detail-card>div:last-child strong{font-size:18px;color:#1e293b}
.catin-photo-detail-card>div:last-child span{color:#64748b}
.public-registration-photo{width:100%;aspect-ratio:4/3;border-radius:18px 18px 10px 10px;margin-bottom:14px;background:linear-gradient(145deg,#ecfdf5,#eaf3ff);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;overflow:hidden;color:#0f766e;border:1px solid rgba(15,118,110,.12)}
.public-registration-person.female .public-registration-photo{background:linear-gradient(145deg,#fff1f5,#f6efff);color:#be185d;border-color:rgba(190,24,93,.12)}
.public-registration-photo.has-photo{padding:0;background:#1d5ef0;border-color:rgba(29,94,240,.18)}
.public-registration-person.female .public-registration-photo.has-photo{background:#1d5ef0;border-color:rgba(29,94,240,.18)}
.public-registration-photo img{width:100%;height:100%;display:block;object-fit:contain;object-position:center bottom;background:#1d5ef0}
.public-registration-photo>span{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#fff;font-size:28px;font-weight:900;box-shadow:0 10px 28px rgba(15,23,42,.11)}
.public-registration-photo>small{font-weight:800;color:#64748b}
.public-registration-confirmation{display:flex;align-items:flex-start;gap:14px;margin-top:16px;padding:18px 20px;border:1px solid #cfe7dc;border-radius:20px;background:linear-gradient(145deg,#f7fffb,#edf9f5);box-shadow:0 14px 30px rgba(18,86,77,.06)}
.public-registration-confirmation-icon{width:44px;height:44px;display:grid;place-items:center;flex:0 0 44px;border-radius:15px;background:linear-gradient(135deg,#daf6eb,#eefbf6);color:#0b8c79;border:1px solid #bde2d7}.public-registration-confirmation-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.public-registration-confirmation small,.public-registration-confirmation p{display:block}.public-registration-confirmation small{color:#0b8d79;font-size:9px;font-weight:900;letter-spacing:.12em}.public-registration-confirmation p{margin:4px 0 0;color:#26475b;font-size:13px;line-height:1.7}.public-registration-confirmation p strong{color:#12354a;font-size:14px}

@media(max-width:1100px){
  .catin-photo-upload-card,.catin-photo-detail-card{grid-template-columns:140px minmax(0,1fr)}
  .catin-photo-preview,.catin-photo-detail-card>img,.catin-photo-detail-placeholder{width:140px}
}
@media(max-width:760px){
  .catin-photo-upload-grid,.catin-photo-detail-grid{grid-template-columns:1fr}
  .catin-photo-upload-card,.catin-photo-detail-card{grid-template-columns:110px minmax(0,1fr);gap:14px;padding:14px}
  .catin-photo-preview,.catin-photo-detail-card>img,.catin-photo-detail-placeholder{width:110px;border-radius:14px}
  .public-registration-photo{aspect-ratio:4/3}
  .public-registration-confirmation{padding:16px;gap:12px;border-radius:18px}
  .public-registration-confirmation p{font-size:12px}
}
@media(max-width:430px){
  .catin-photo-upload-card,.catin-photo-detail-card{grid-template-columns:1fr}
  .catin-photo-preview,.catin-photo-detail-card>img,.catin-photo-detail-placeholder{width:min(220px,100%);margin:0 auto}
}

.btn-photo{background:linear-gradient(135deg,#7c3aed,#a855f7)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 20px rgba(124,58,237,.18)}
.btn-photo:hover{transform:translateY(-1px);box-shadow:0 11px 24px rgba(124,58,237,.25)}

/* V5.2.0 — Pengelolaan akun dan perlindungan halaman publik */
.account-row-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:180px}
.account-row-actions form{display:inline-flex;margin:0}
.account-delete-disabled{display:inline-flex;align-items:center;min-height:34px;padding:6px 9px;border-radius:9px;background:#f2f4f7;color:#98a2b3;font-size:11px;font-weight:800;white-space:nowrap}
.account-edit-card{border-color:#bfe4da;box-shadow:0 18px 42px rgba(15,118,110,.09)}
.account-edit-card>.card-header{background:linear-gradient(135deg,#f1fcf8,#f5f9ff)}
.public-security-notice{position:fixed;left:50%;bottom:24px;z-index:99999;max-width:calc(100vw - 32px);padding:11px 16px;border:1px solid rgba(255,255,255,.25);border-radius:13px;background:rgba(20,42,56,.94);color:#fff;font-size:12px;font-weight:800;box-shadow:0 16px 38px rgba(5,25,38,.25);opacity:0;transform:translate(-50%,14px);pointer-events:none;transition:opacity .18s ease,transform .18s ease;backdrop-filter:blur(10px)}
.public-security-notice.is-visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:700px){.account-users-table{min-width:830px}.account-row-actions{min-width:165px}.public-security-notice{bottom:16px;text-align:center}}


/* V5.2.3 — Perlindungan privasi hasil Informasi Data Pengantin */
.public-registration-result.is-sensitive-result{isolation:isolate;overflow:hidden}
.public-registration-result.is-sensitive-result>*:not(.public-privacy-watermark){position:relative;z-index:2;transition:filter .16s ease,opacity .16s ease}
.public-privacy-watermark{position:absolute;inset:0;z-index:6;display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));grid-auto-rows:minmax(100px,1fr);align-items:center;justify-items:center;gap:14px;padding:22px;overflow:hidden;pointer-events:none;user-select:none}
.public-privacy-watermark span{display:block;width:220px;color:#0b6f68;font-size:10px;font-weight:900;letter-spacing:.08em;text-align:center;white-space:nowrap;opacity:.075;transform:rotate(-24deg)}
.public-registration-result.is-sensitive-result.is-privacy-hidden>*{filter:blur(22px)!important;opacity:.025!important;pointer-events:none!important;user-select:none!important}
.public-registration-result.is-sensitive-result.is-privacy-hidden::after{content:attr(data-privacy-label) "\A Data disamarkan untuk menjaga privasi";white-space:pre;position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:28px;background:linear-gradient(145deg,rgba(237,252,248,.985),rgba(239,247,255,.985));color:#15524f;font-size:clamp(17px,2.2vw,25px);font-weight:900;line-height:1.7;text-align:center;letter-spacing:.01em;backdrop-filter:blur(12px)}
.public-registration-result.is-sensitive-result,.public-registration-result.is-sensitive-result img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media(max-width:760px){.public-privacy-watermark{grid-template-columns:repeat(2,minmax(150px,1fr));padding:14px}.public-privacy-watermark span{width:180px;font-size:8px;opacity:.065}}
@media print{
  body.public-dashboard-body>*{display:none!important}
  body.public-dashboard-body::before{content:"Pencetakan Informasi Data Pengantin tidak diizinkan.";position:fixed;inset:0;display:grid;place-items:center;padding:30px;background:#fff;color:#17354b;font:700 20px/1.6 Arial,sans-serif;text-align:center}
}


/* V5.2.5 — Usia otomatis di bawah tanggal lahir catin */
.catin-birthdate-group .catin-age-indicator{display:flex;align-items:center;gap:7px;min-height:34px;margin-top:8px;padding:8px 11px;border:1px solid #d8e6ea;border-radius:11px;background:#f7fafb;color:#667b8b;font-size:12px;font-weight:800;line-height:1.4;transition:border-color .18s ease,background .18s ease,color .18s ease}
.catin-birthdate-group .catin-age-indicator::before{content:"";width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#9aabb6;box-shadow:0 0 0 4px rgba(154,171,182,.12)}
.catin-birthdate-group .catin-age-indicator.has-age{border-color:#bde8dc;background:linear-gradient(135deg,#effcf8,#f3fbff);color:#0d776c}
.catin-birthdate-group .catin-age-indicator.has-age::before{background:#10a88d;box-shadow:0 0 0 4px rgba(16,168,141,.12)}
.catin-birthdate-group .catin-age-indicator.is-invalid{border-color:#f0c8c8;background:#fff5f5;color:#b42318}
.catin-birthdate-group .catin-age-indicator.is-invalid::before{background:#d92d20;box-shadow:0 0 0 4px rgba(217,45,32,.1)}
@media(max-width:600px){.catin-birthdate-group .catin-age-indicator{font-size:11px;padding:8px 10px}}


/* V5.2.7 — Tanggal lahir otomatis dari NIK */
.nik-birth-hint{margin-top:6px;transition:color .2s ease}.nik-birth-hint.is-success{color:#087d68;font-weight:800}.nik-birth-hint.is-error{color:#c23b3b;font-weight:800}


/* V5.3.7 — Rapak/BINWIN dan Nomor WhatsApp */
.rapak-tab{border-color:#c9defd!important}.rapak-tab.active{background:linear-gradient(135deg,#edf5ff,#e7f0ff)!important;color:#1d5fa8!important;border-color:#a9c9f5!important}
.rapak-binwin-section{position:relative;overflow:hidden}.rapak-binwin-section:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-105px;top:-115px;background:radial-gradient(circle,rgba(37,99,235,.11),rgba(37,99,235,0) 70%);pointer-events:none}
.rapak-binwin-intro{position:relative;z-index:1;display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:15px 17px;border:1px solid #d6e5f8;border-radius:18px;background:linear-gradient(135deg,#f6faff,#edf5ff)}
.rapak-binwin-icon{width:44px;height:44px;display:grid;place-items:center;flex:0 0 44px;border-radius:14px;background:linear-gradient(135deg,#2f80ed,#2563b8);color:#fff;font-size:21px;box-shadow:0 10px 22px rgba(37,99,184,.2)}
.rapak-binwin-intro strong,.rapak-binwin-intro span{display:block}.rapak-binwin-intro strong{color:#1c4167}.rapak-binwin-intro span{margin-top:3px;color:#718399;font-size:12px}.rapak-binwin-grid{position:relative;z-index:1}.rapak-binwin-hint{padding:11px 13px;border-radius:13px;background:#f3f8ff;border:1px solid #dae7f6;color:#526f8b!important}
.btn-rapak{background:linear-gradient(135deg,#2563b8,#2f80ed)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 20px rgba(37,99,184,.18)}.btn-rapak:hover{filter:brightness(1.04)}
.btn-whatsapp{margin-left:10px;background:linear-gradient(135deg,#16a34a,#22c55e)!important;color:#fff!important;border-color:transparent!important}
.rapak-summary-cell strong{display:block;color:#234968;white-space:nowrap}.whatsapp-number-cell strong{color:#16734a;white-space:nowrap}
@media(max-width:640px){.rapak-binwin-intro{align-items:flex-start}.btn-whatsapp{display:inline-flex;margin:8px 0 0}}


/* V5.3.9 — Cek Jadwal Rapak/BINWIN pada halaman publik */
.public-requirements-promo{align-items:stretch}.public-rapak-check{align-self:stretch;padding:22px;border:1px solid #d4e5e8;border-radius:24px;background:rgba(255,255,255,.82);box-shadow:0 18px 42px rgba(25,63,78,.08);backdrop-filter:blur(12px)}
.public-rapak-check-head{display:flex;align-items:flex-start;gap:13px}.public-rapak-check-icon{width:48px;height:48px;display:grid;place-items:center;flex:0 0 48px;border-radius:16px;background:linear-gradient(135deg,#e3f8f4,#e8f1ff);color:#087d79;border:1px solid #c8e6df}.public-rapak-check-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.public-rapak-check-head small{display:block;color:#0b8d7b;font-size:8px;font-weight:900;letter-spacing:.13em}.public-rapak-check-head h3{margin:4px 0;color:#17384e;font-size:21px}.public-rapak-check-head p{margin:0;color:#6e8192;font-size:11px;line-height:1.5}
.public-rapak-check-form{margin-top:16px}.public-rapak-check-form label{display:block;margin-bottom:7px;color:#294b5e;font-size:10px;font-weight:900}.public-rapak-check-form>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.public-rapak-check-form input{min-width:0;height:46px;padding:0 13px;border:1px solid #ccdde1;border-radius:13px;background:#fff;color:#17384e;font-weight:800;text-transform:uppercase;outline:0}.public-rapak-check-form input:focus{border-color:#13a38d;box-shadow:0 0 0 4px rgba(19,163,141,.1)}.public-rapak-check-form button{min-height:46px;padding:0 16px;border:0;border-radius:13px;background:linear-gradient(135deg,#0fa58d,#1678c8);color:#fff;font-size:11px;font-weight:900;cursor:pointer;box-shadow:0 10px 20px rgba(13,125,121,.18)}
.public-rapak-check-result{margin-top:14px}.public-rapak-alert{padding:13px 14px;border-radius:14px}.public-rapak-alert strong,.public-rapak-alert span{display:block}.public-rapak-alert strong{font-size:12px}.public-rapak-alert span{margin-top:3px;font-size:10px;line-height:1.5}.public-rapak-alert.error{background:#fff1f1;border:1px solid #efcccc;color:#a63737}.public-rapak-alert.warning{background:#fff8e8;border:1px solid #efdcae;color:#976216}.public-rapak-alert.pending{background:#edf5ff;border:1px solid #c9def9;color:#31628c}
.public-rapak-schedule-card{position:relative;overflow:hidden;padding:17px;border:1px solid #cbe6de;border-radius:18px;background:linear-gradient(145deg,#f5fffb,#f5f9ff)}.public-rapak-schedule-card:after{content:"";position:absolute;width:130px;height:130px;right:-55px;top:-65px;border-radius:50%;background:rgba(25,184,153,.1)}.public-rapak-status{position:relative;z-index:1;display:inline-flex;padding:5px 8px;border-radius:999px;background:#dff7ee;color:#087b6e;font-size:8px;font-weight:900;letter-spacing:.1em}.public-rapak-schedule-card h3{position:relative;z-index:1;margin:8px 0 10px;color:#15384e;font-size:18px}.public-rapak-date{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border-radius:13px;background:#fff;border:1px solid #d8e6e8}.public-rapak-date strong{color:#173b50;font-size:12px}.public-rapak-date span{color:#087d79;font-size:11px;font-weight:900;white-space:nowrap}.public-rapak-attendees,.public-rapak-location{position:relative;z-index:1;margin-top:11px}.public-rapak-attendees>small,.public-rapak-location>small{display:block;color:#78909c;font-size:8px;font-weight:900;letter-spacing:.12em}.public-rapak-attendees ul{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0 0;padding:0;list-style:none}.public-rapak-attendees li{padding:7px 9px;border-radius:10px;background:#fff;border:1px solid #dbe7e9;color:#25475b;font-size:10px;font-weight:800}.public-rapak-attendees li span{color:#708596;font-weight:700}.public-rapak-location{padding:10px 12px;border-radius:13px;background:#fff;border:1px solid #dbe7e9}.public-rapak-location strong{display:block;margin-top:4px;color:#183d52;font-size:12px}.public-rapak-location p{margin:3px 0 0;color:#687d8d;font-size:9px;line-height:1.45}
.rapak-summary-cell small{display:block;margin-top:3px;color:#6c8292;font-size:10px}
@media(max-width:900px){.public-rapak-check{margin-top:4px}.public-rapak-date{align-items:flex-start;flex-direction:column;gap:4px}}
@media(max-width:560px){.public-rapak-check{padding:16px;border-radius:19px}.public-rapak-check-form>div{grid-template-columns:1fr}.public-rapak-check-form button{width:100%}.public-rapak-attendees ul{display:grid;grid-template-columns:1fr}.public-rapak-date strong{font-size:11px}}


/* V5.4.0 — Penyempurnaan Jadwal Rapak dan Setting WhatsApp Gateway */
.public-rapak-check-form input{font-size:13px;font-weight:600;letter-spacing:.01em}
.public-rapak-check-form input::placeholder{color:#7d8790;font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;opacity:1}
.public-rapak-status{font-size:9px}
.public-rapak-schedule-card h3{font-size:19px}
.public-rapak-date strong{font-size:13px}.public-rapak-date span{font-size:12px}
.public-rapak-attendees>small,.public-rapak-location>small{font-size:9px}
.public-rapak-attendees li{font-size:11px;padding:8px 10px}
.public-rapak-location strong{font-size:13px}.public-rapak-location p{font-size:10px;line-height:1.55}
.public-rapak-alert.pending strong{font-size:13px;line-height:1.5}
.account-section-menu{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px;padding:10px;border:1px solid #dce8eb;border-radius:16px;background:linear-gradient(145deg,#fff,#f6fafb);box-shadow:0 10px 26px rgba(28,63,78,.06)}
.account-section-menu a{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 15px;border:1px solid #d5e4e7;border-radius:12px;background:#fff;color:#23475a;font-size:12px;font-weight:900;text-decoration:none;transition:.18s ease}
.account-section-menu a:hover{transform:translateY(-1px);border-color:#9ed7ce;color:#087d70;box-shadow:0 8px 18px rgba(13,125,113,.09)}
.whatsapp-gateway-card{scroll-margin-top:18px}.whatsapp-gateway-status{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;font-size:10px;font-weight:900}.whatsapp-gateway-status:before{content:"";width:8px;height:8px;border-radius:50%}.whatsapp-gateway-status.active{background:#e4f8ec;color:#117541}.whatsapp-gateway-status.active:before{background:#22a65a;box-shadow:0 0 0 4px rgba(34,166,90,.12)}.whatsapp-gateway-status.inactive{background:#f1f4f6;color:#697b87}.whatsapp-gateway-status.inactive:before{background:#9aa9b2}
.whatsapp-gateway-main-grid{align-items:end}.whatsapp-active-field{align-self:stretch}.whatsapp-active-field>label:first-child{display:block;margin-bottom:9px}.whatsapp-toggle{display:flex!important;align-items:center;gap:10px;min-height:46px;padding:8px 12px;border:1px solid #d6e5e8;border-radius:13px;background:#f8fbfc;cursor:pointer}.whatsapp-toggle input{position:absolute;opacity:0;pointer-events:none}.whatsapp-toggle span{position:relative;width:42px;height:24px;flex:0 0 42px;border-radius:999px;background:#bcc9cf;transition:.2s}.whatsapp-toggle span:after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.18);transition:.2s}.whatsapp-toggle input:checked+span{background:#18a879}.whatsapp-toggle input:checked+span:after{transform:translateX(18px)}.whatsapp-toggle b{color:#315164;font-size:11px}
.whatsapp-parameter-panel{margin-top:18px;padding:18px;border:1px solid #d7e7e5;border-radius:18px;background:linear-gradient(145deg,#f6fffb,#f5f9ff)}.whatsapp-parameter-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.whatsapp-parameter-heading strong,.whatsapp-parameter-heading span{display:block}.whatsapp-parameter-heading strong{color:#17495a;font-size:15px}.whatsapp-parameter-heading span{margin-top:4px;color:#718493;font-size:11px;line-height:1.5}.whatsapp-parameter-heading code,.whatsapp-parameter-preview code{display:block;padding:7px 9px;border:1px solid #d6e4e8;border-radius:9px;background:#fff;color:#136b63;font-size:10px;overflow-wrap:anywhere}.whatsapp-parameter-preview{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;margin-top:4px;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.75);color:#526d7c;font-size:10px}.whatsapp-parameter-preview strong{white-space:nowrap}
@media(max-width:720px){.account-section-menu{display:grid;grid-template-columns:1fr}.account-section-menu a{justify-content:center}.whatsapp-parameter-heading{flex-direction:column}.whatsapp-parameter-preview{grid-template-columns:1fr}.whatsapp-parameter-preview strong{white-space:normal}}


/* V5.4.1 — Tombol kirim notifikasi pendaftaran melalui WhatsApp Gateway */
.btn-whatsapp-notify{background:linear-gradient(135deg,#16a34a,#22c55e)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 20px rgba(22,163,74,.2)}
.btn-whatsapp-notify:hover{filter:brightness(1.04);transform:translateY(-1px)}
.whatsapp-notify-disabled{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 10px;border-radius:9px;background:#eef2f4;color:#94a3ad;font-size:11px;font-weight:850;white-space:nowrap;cursor:not-allowed}
.actions form:has(.btn-whatsapp-notify){display:inline-flex;margin:0}
@supports not selector(:has(*)){.actions form{display:inline-flex;margin:0}}


/* V5.4.2 - Pengaturan format WhatsApp Gateway */
.whatsapp-inline-check{display:flex!important;align-items:center;gap:8px;margin-top:9px;color:#526b7b;font-size:10px;font-weight:700;cursor:pointer}.whatsapp-inline-check input{width:16px;height:16px;accent-color:#0c9b7c}.whatsapp-auto-note{margin-top:16px;line-height:1.6}


/* V5.4.6 — MASKAWIN / MAHAR */
.mahar-tab{background:linear-gradient(135deg,#fff7ed,#fffbeb)!important;color:#9a5b13!important;border-color:#f3d49a!important}
.mahar-tab.active{background:linear-gradient(135deg,#f59e0b,#d97706)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 10px 22px rgba(217,119,6,.20)}
.maskawin-mahar-section{background:linear-gradient(145deg,#fffdfa,#fff8e8);border-color:#f2ddb0}
.maskawin-mahar-intro{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding:16px 18px;border:1px solid #f1d9a4;border-radius:18px;background:linear-gradient(135deg,#fff8e8,#fffdf7)}
.maskawin-mahar-icon{width:48px;height:48px;display:grid;place-items:center;flex:0 0 48px;border-radius:15px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;font-size:24px;box-shadow:0 12px 24px rgba(217,119,6,.20)}
.maskawin-mahar-intro strong,.maskawin-mahar-intro span{display:block}.maskawin-mahar-intro strong{color:#74410b;font-size:15px}.maskawin-mahar-intro span{margin-top:3px;color:#876c48;font-size:12px;line-height:1.55}
.mahar-detail-card{background:linear-gradient(145deg,#fffdf7,#fff8e8);border-color:#efd79f}.mahar-detail-card dd{font-size:15px;line-height:1.75;color:#5f421c}
.public-registration-mahar{display:flex;align-items:flex-start;gap:14px;margin-top:16px;padding:18px 20px;border:1px solid #efd8a6;border-radius:20px;background:linear-gradient(145deg,#fffdf7,#fff7e6);box-shadow:0 14px 30px rgba(146,93,20,.06)}
.public-registration-mahar-icon{width:46px;height:46px;display:grid;place-items:center;flex:0 0 46px;border-radius:15px;background:linear-gradient(135deg,#fff0c7,#ffe2a1);color:#b66b0d;border:1px solid #efd090}.public-registration-mahar-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.public-registration-mahar small,.public-registration-mahar strong{display:block}.public-registration-mahar small{color:#a1600b;font-size:9px;font-weight:900;letter-spacing:.12em}.public-registration-mahar strong{margin-top:5px;color:#5b3b12;font-size:14px;line-height:1.65;white-space:pre-line}
@media(max-width:650px){.public-registration-mahar{padding:16px;gap:12px;border-radius:18px}.public-registration-mahar strong{font-size:13px}.maskawin-mahar-intro{align-items:flex-start}}

.btn-mahar{background:linear-gradient(135deg,#f59e0b,#d97706)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 20px rgba(217,119,6,.18)}
.btn-mahar:hover{transform:translateY(-1px);box-shadow:0 11px 24px rgba(217,119,6,.24)}


/* v5.4.9 - daftar nikah dan rekomendasi lebih presisi, hidup, elegan, dan profesional */
.catin-list-table-wrap{border-radius:24px;background:linear-gradient(180deg,#ffffff 0%,#fbfefe 100%);box-shadow:0 16px 36px rgba(20,58,76,.07)}
.catin-list-table{min-width:1440px;border-collapse:separate;border-spacing:0}
.catin-list-table thead th{position:sticky;top:0;z-index:2;padding:14px 12px;background:linear-gradient(180deg,#f6fbfc 0%,#eef5f7 100%);box-shadow:inset 0 -1px 0 #d9e7ea}
.catin-list-table tbody tr{position:relative}
.catin-list-table tbody tr:nth-child(even){background:linear-gradient(90deg,#fcfefe 0%,#f9fcfc 100%)}
.catin-list-table tbody tr:hover{background:linear-gradient(90deg,#eefcf8,#f8fdfd);box-shadow:inset 4px 0 0 #17b89f}
.catin-list-table td{padding:14px 12px;vertical-align:top;font-size:13px;line-height:1.45}
.catin-list-table td:first-child{width:54px;font-size:17px;font-weight:800;color:#1d5669;padding-top:18px}
.catin-list-table td strong{color:#18384c;line-height:1.42}
.catin-list-table .badge{padding:7px 11px;border-radius:999px;font-size:11px;line-height:1.25;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.catin-list-table .badge-warning{background:linear-gradient(135deg,#fff1d6,#ffe8bc);color:#a85b00}
.catin-list-table .stored-letter-number,.catin-list-table .simkah-number{display:inline-flex;align-items:center;border-radius:12px;padding:8px 11px;font-size:11px;line-height:1.35;box-shadow:0 6px 16px rgba(19,85,87,.06)}
.catin-list-table .stored-letter-middle,.catin-list-table .text-muted{display:block;margin-top:5px;color:#708293;font-size:11px;line-height:1.45}
.catin-list-table .stored-letter-empty{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#fff7df;color:#a16207;font-size:10px;font-weight:800}
.catin-list-table .recommendation-destination-cell{min-width:240px}
.catin-list-table .recommendation-destination-card{min-width:0;max-width:280px;padding:11px 12px;border-radius:16px;align-items:flex-start}
.catin-list-table .recommendation-destination-icon{width:34px;height:34px;flex:0 0 34px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#fff4d6,#fee6b8);color:#c77a05;font-size:18px}
.catin-list-table .recommendation-destination-label{font-size:10px;letter-spacing:.08em}
.catin-list-table .recommendation-destination-meta strong{font-size:13px;line-height:1.4}
.catin-list-table .recommendation-destination-meta small{font-size:11px;line-height:1.45}
.catin-list-table .rapak-summary-cell,.catin-list-table .akad-summary-cell{min-width:190px}
.catin-list-table .rapak-summary-cell strong,.catin-list-table .akad-summary-cell strong{white-space:normal;font-size:12px;line-height:1.45}
.catin-list-table .rapak-summary-cell small,.catin-list-table .akad-summary-cell span{display:block;margin-top:4px;color:#698091;font-size:11px;line-height:1.55}
.catin-list-table .whatsapp-number-cell{min-width:128px}
.catin-list-table .whatsapp-number-cell strong{display:inline-flex;align-items:center;padding:6px 10px;border-radius:10px;background:#edf9f1;border:1px solid #cfe9d7;color:#16734a;font-size:12px}
.catin-list-table .health-document-cell{min-width:162px}
.catin-list-table .health-list-status{margin-bottom:8px}
.catin-list-table .actions{display:grid;grid-template-columns:repeat(2,minmax(96px,1fr));gap:7px;align-content:start;min-width:228px}
.catin-list-table .actions>a,.catin-list-table .actions>span,.catin-list-table .actions>form{width:100%}
.catin-list-table .actions form{display:block!important;margin:0}
.catin-list-table .actions .btn,.catin-list-table .actions .whatsapp-notify-disabled{width:100%;justify-content:center;min-height:34px;padding:7px 10px;border-radius:11px;font-size:12px;line-height:1.2;box-shadow:0 7px 16px rgba(18,52,68,.06)}
.catin-list-table .actions .btn-outline{border-color:#cddde4;color:#20415a;background:#fff}
.catin-list-table .actions .btn-secondary{background:#f3f6f8;color:#3a556b}
.catin-list-table .actions .btn-whatsapp-notify{background:linear-gradient(135deg,#16a34a,#14b8a6)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 10px 22px rgba(22,163,74,.18)}
.catin-list-table .actions .btn-whatsapp-notify:hover{box-shadow:0 12px 24px rgba(22,163,74,.24)}
.catin-list-table .actions .whatsapp-notify-disabled{background:#eef3f6;color:#97a7b4;box-shadow:none}
.catin-list-table .btn-health-view,.catin-list-table .btn-health-download{min-height:31px;border-radius:10px;font-size:11px}
@media(max-width:1200px){.catin-list-table{min-width:1340px}.catin-list-table .actions{min-width:212px}}
@media(max-width:900px){.catin-list-table td{padding:12px 10px}.catin-list-table td:first-child{font-size:15px;padding-top:15px}.catin-list-table .actions{grid-template-columns:1fr 1fr;min-width:204px}}


/* v5.5.0 - perbaikan nyata tinggi baris dan menu aksi ringkas */
.catin-list-table-wrap{overflow-x:auto!important;overflow-y:visible!important}
.catin-list-table{min-width:1260px!important;table-layout:auto!important}
.catin-list-table tbody tr,.catin-list-table tbody td{height:auto!important;min-height:0!important}
.catin-list-table tbody td{padding:11px 10px!important;vertical-align:middle!important}
.catin-list-table tbody td:first-child{padding-top:11px!important;font-size:14px!important}
.catin-list-table tbody tr{background:#fff}
.catin-list-table tbody tr:nth-child(even){background:#f9fcfc}
.catin-list-table tbody tr:hover{background:#effbf8!important}
.catin-list-table .badge,.catin-list-table .stored-letter-number,.catin-list-table .simkah-number{padding:6px 9px!important;font-size:10.5px!important}
.catin-list-table .stored-letter-middle,.catin-list-table .text-muted{margin-top:3px!important;font-size:10.5px!important}
.catin-list-table .rapak-summary-cell,.catin-list-table .akad-summary-cell{min-width:160px!important}
.catin-list-table .akad-summary-cell strong,.catin-list-table .rapak-summary-cell strong{font-size:11.5px!important}
.catin-list-table .akad-summary-cell span,.catin-list-table .rapak-summary-cell small{font-size:10px!important;line-height:1.45!important}
.catin-actions-cell{width:132px!important;min-width:132px!important;vertical-align:top!important}
.catin-row-action-menu{width:100%;margin:0;position:relative}
.catin-row-action-menu>summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:38px;padding:8px 10px;border:1px solid #b9ddd5;border-radius:12px;background:linear-gradient(135deg,#effcf8,#f8fffd);color:#0b7168;font-size:11.5px;font-weight:900;cursor:pointer;box-shadow:0 7px 16px rgba(15,118,110,.08);transition:.2s ease;white-space:nowrap}
.catin-row-action-menu>summary::-webkit-details-marker{display:none}
.catin-row-action-menu>summary:hover{transform:translateY(-1px);border-color:#72cbbd;box-shadow:0 10px 20px rgba(15,118,110,.13)}
.catin-row-action-menu>summary b{margin-left:auto;font-size:14px;transition:.2s ease}
.catin-row-action-menu[open]>summary{background:linear-gradient(135deg,#0f8f80,#0aa799);color:#fff;border-color:transparent;box-shadow:0 11px 24px rgba(15,143,128,.22)}
.catin-row-action-menu[open]>summary b{transform:rotate(180deg)}
.catin-row-action-icon{width:23px;height:23px;display:grid;place-items:center;border-radius:8px;background:rgba(15,118,110,.1);font-size:12px}
.catin-row-action-menu[open] .catin-row-action-icon{background:rgba(255,255,255,.18)}
.catin-row-action-panel{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px;padding:10px;border:1px solid #d8e7e9;border-radius:15px;background:linear-gradient(180deg,#fff,#f8fbfc);box-shadow:0 14px 30px rgba(18,55,72,.10)}
.catin-row-action-menu[open] .catin-row-action-panel{display:grid;animation:catinActionOpen .18s ease-out}
.catin-row-action-panel>a,.catin-row-action-panel>form,.catin-row-action-panel>span{width:100%!important;margin:0!important}
.catin-row-action-panel form{display:block!important}
.catin-row-action-panel .btn,.catin-row-action-panel .whatsapp-notify-disabled{width:100%!important;min-height:33px!important;padding:6px 7px!important;border-radius:9px!important;font-size:10.5px!important;line-height:1.2!important;white-space:normal!important;text-align:center!important}
@keyframes catinActionOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(max-width:900px){.catin-list-table{min-width:1180px!important}.catin-actions-cell{width:124px!important;min-width:124px!important}.catin-row-action-panel{grid-template-columns:1fr}}


/* v5.5.3 - teks tombol Rapak/BINWIN membungkus rapi */
.catin-row-action-panel .btn-rapak{white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;line-height:1.12!important;min-height:40px!important;padding-top:6px!important;padding-bottom:6px!important}
.catin-row-action-panel .btn-rapak .btn-label-wrap{display:block;width:100%;white-space:normal;line-height:1.12;text-align:center}


/* v5.5.4 - teks Rapak/BINWIN tepat di tengah */
.catin-row-action-panel .btn-rapak{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important}
.catin-row-action-panel .btn-rapak .btn-label-wrap{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:100%!important;text-align:center!important;line-height:1.08!important}


/* v5.5.7 - responsif global HP/tablet tanpa mengubah pengaturan aplikasi */
html{max-width:100%;overflow-x:hidden}body{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;touch-action:manipulation}.main-area,.content,.card,.card-body,.table-responsive,.catin-list-table-wrap,.print-doc-dialog,.print-choice-dialog{min-width:0!important;max-width:100%}.table-responsive,.catin-list-table-wrap{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.table-responsive::-webkit-scrollbar,.catin-list-table-wrap::-webkit-scrollbar{height:7px}.table-responsive::-webkit-scrollbar-thumb,.catin-list-table-wrap::-webkit-scrollbar-thumb{background:#c9dce2;border-radius:999px}.form-control,.form-select,.form-textarea,input,select,textarea{max-width:100%;font-size:16px}.btn,.tab-btn,.nav-link,.service-data-tab,.print-doc-btn{ -webkit-tap-highlight-color:transparent }

@media screen and (max-width:1024px){
  :root{--mobile-gap:10px;--mobile-radius:18px;--tap-size:44px}
  .content{padding:16px 12px 22px!important}
  .card,.catin-list-card,.v2-panel,.staff-panel,.account-user-card{border-radius:var(--mobile-radius)!important}
  .card-header{gap:12px!important}
  .card-header>.actions,.toolbar-actions,.filter-actions,.export-date-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;gap:9px!important}
  .card-header>.actions>*{width:100%!important}.card-header>.actions .btn,.toolbar-actions .btn,.filter-actions .btn,.export-date-actions .btn{width:100%!important;min-height:var(--tap-size)!important}
  .form-grid,.detail-grid,.letter-number-grid,.registration-meta-grid{grid-template-columns:1fr!important;gap:13px!important}.form-grid .full,.detail-item.full{grid-column:auto!important}
  .tabs{display:flex!important;overflow-x:auto!important;gap:8px!important;padding:6px!important;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.tab-btn{flex:0 0 auto!important;min-width:155px!important;min-height:var(--tap-size)!important;scroll-snap-align:start;white-space:normal!important;text-align:center!important}
  .service-data-tabs{display:flex!important;overflow-x:auto!important;gap:10px!important;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px!important}.service-data-tab{flex:0 0 min(78vw,310px)!important;scroll-snap-align:start}
  .search-bar{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important}.search-bar input{min-width:0!important}.search-bar .btn{min-width:74px!important}
  .catin-list-page .table{min-width:1080px!important}.catin-list-table th{font-size:9.5px!important}.catin-list-table tbody td{padding:10px 9px!important}.catin-actions-cell{width:120px!important;min-width:120px!important}.catin-row-action-menu>summary{min-height:40px!important}.catin-row-action-panel{grid-template-columns:1fr!important;gap:6px!important;padding:8px!important}.catin-row-action-panel .btn,.catin-row-action-panel .whatsapp-notify-disabled{min-height:36px!important;font-size:10.5px!important}
}

@media screen and (max-width:760px){
  body{background:#f4f8fa!important}.main-area,.sidebar-collapsed .main-area{margin-left:0!important;width:100%!important}
  .topbar{margin:8px 8px 0!important;width:calc(100% - 16px)!important;min-height:74px!important;height:auto!important;padding:12px 14px!important;border-radius:20px!important;align-items:flex-start!important}.topbar-heading{min-width:0;flex:1}.topbar-heading h1{font-size:clamp(19px,5vw,25px)!important;line-height:1.15!important;overflow-wrap:anywhere}.topbar-heading p{font-size:11px!important;line-height:1.45!important}.menu-toggle{display:grid!important;place-items:center!important;width:44px!important;height:44px!important;flex:0 0 44px!important;border-radius:14px!important}.topbar-badge{display:none!important}
  .content{padding:10px 8px 18px!important}.footer{padding:14px 10px calc(14px + env(safe-area-inset-bottom))!important;text-align:center!important;flex-direction:column!important;gap:4px!important;font-size:11px!important}
  .card-header,.card-body{padding:14px!important}.card-header h2,.card-header h3{font-size:18px!important;line-height:1.2}.card-header p,.text-muted{font-size:12px!important;line-height:1.45}
  .btn{min-height:44px!important;padding:9px 11px!important;border-radius:12px!important;font-size:12px!important;line-height:1.25!important}.btn-sm{min-height:38px!important;font-size:11px!important}
  .form-actions{position:sticky!important;bottom:0!important;z-index:12!important;margin:16px -14px -14px!important;padding:12px 14px calc(12px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(14px)!important;box-shadow:0 -10px 28px rgba(20,52,68,.08)!important;display:grid!important;grid-template-columns:1fr!important}.form-actions .btn{width:100%!important}
  .catin-list-page .content{padding:8px 6px 16px!important}.catin-list-card>.card-header,.catin-list-card>.card-body{padding:12px!important}.catin-list-page .service-data-tab{flex-basis:84vw!important;min-height:58px!important}.catin-list-page .search-bar{grid-template-columns:1fr!important}.catin-list-page .search-bar .btn{width:100%!important}.catin-list-table-wrap{border-radius:18px!important;margin-top:12px!important}.catin-list-page .table{min-width:1040px!important}.catin-list-table tbody td{padding:9px 8px!important}.catin-list-table .badge,.catin-list-table .stored-letter-number,.catin-list-table .simkah-number{font-size:10px!important;padding:5px 8px!important}.catin-actions-cell{width:112px!important;min-width:112px!important}.catin-row-action-panel{grid-template-columns:1fr!important}.catin-row-action-panel .btn-rapak .btn-label-wrap{text-align:center!important;align-items:center!important}
  .account-users-table,.letter-number-table{min-width:760px!important}.account-row-actions{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;min-width:145px!important}.account-row-actions .btn{width:100%!important}
  .public-dashboard,.statistics-page .public-dashboard,.requirements-main{width:calc(100% - 14px)!important;margin:8px auto 22px!important}.public-hero,.public-section{border-radius:22px!important}.public-hero{grid-template-columns:1fr!important;padding:24px 18px!important}.public-hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}.public-hero-actions a{width:100%!important;min-height:44px!important}.public-section{padding:18px 14px!important}.public-table-wrap{overflow-x:auto!important}.public-data-table{min-width:760px!important}
}

/* Modul cetak: tetap grid di HP dan lebih nyaman disentuh */
@media screen and (max-width:760px){
  .print-choice-modal,.print-doc-modal,.export-date-modal{align-items:flex-end!important;padding:0!important}.print-choice-dialog,.print-doc-dialog,.export-date-dialog{width:100%!important;max-width:none!important;max-height:94dvh!important;border-radius:26px 26px 0 0!important;padding:18px 14px calc(16px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;overscroll-behavior:contain!important}.print-choice-close{top:10px!important;right:12px!important;width:40px!important;height:40px!important;border-radius:13px!important}.print-choice-heading{display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;gap:11px!important;padding-right:42px!important}.print-choice-heading h2{font-size:21px!important;line-height:1.18!important}.print-choice-heading p{font-size:11px!important;line-height:1.45!important}.print-choice-symbol{width:48px!important;height:48px!important;border-radius:15px!important}.print-doc-stepbar{display:flex!important;overflow-x:auto!important;gap:7px!important;padding:9px 10px!important;border-radius:14px!important;-webkit-overflow-scrolling:touch}.print-doc-stepbar span{flex:0 0 auto!important;min-width:max-content!important;font-size:10px!important}.print-doc-stepbar span b{width:23px!important;height:23px!important}.print-doc-stepbar i{min-width:34px!important}.print-doc-selector{padding:13px!important;border-radius:18px!important}.print-record-search{grid-template-columns:1fr!important}.print-record-search input,.print-doc-selector select,.print-doc-selector input{min-height:44px!important;font-size:16px!important}.print-record-load-status{justify-self:start!important;margin-top:3px!important}.print-selected-card{grid-template-columns:42px minmax(0,1fr)!important;gap:9px!important;padding:10px!important}.print-selected-status{grid-column:2!important;justify-self:start!important}.print-doc-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin-top:12px!important}.print-doc-btn{min-height:84px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;padding:10px 8px!important;border-radius:16px!important;text-align:left!important}.print-doc-btn-icon{width:34px!important;height:34px!important;flex:0 0 34px!important;border-radius:11px!important}.print-doc-btn-copy strong{font-size:11px!important;line-height:1.2!important}.print-doc-btn-copy small{font-size:8.5px!important;line-height:1.25!important;margin-top:3px!important}.print-choice-actions.single-row{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}.print-choice-actions.single-row .btn{width:100%!important}
}

@media screen and (max-width:380px){
  .content{padding-left:6px!important;padding-right:6px!important}.card-header,.card-body{padding:12px!important}.service-data-tab{flex-basis:88vw!important}.catin-list-page .table{min-width:980px!important}.catin-actions-cell{width:104px!important;min-width:104px!important}.catin-row-action-menu>summary{font-size:10.5px!important;padding:7px!important}.catin-row-action-icon{width:21px!important;height:21px!important}.catin-row-action-panel{padding:7px!important}.catin-row-action-panel .btn,.catin-row-action-panel .whatsapp-notify-disabled{font-size:9.8px!important;min-height:34px!important;padding:5px!important}.print-doc-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}.print-doc-btn{min-height:78px!important;padding:8px 6px!important;gap:6px!important}.print-doc-btn-icon{width:30px!important;height:30px!important;flex-basis:30px!important}.print-doc-btn-copy strong{font-size:10px!important}.print-doc-btn-copy small{display:none!important}.print-choice-heading h2{font-size:19px!important}
}


/* v5.5.8 - kartu dokumen cetak mobile: ikon di atas judul dan tetap kotak */
@media (max-width: 560px) {
  .print-doc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .print-doc-btn {
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 12px 10px !important;
    text-align: left !important;
  }
  .print-doc-btn-icon {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    margin-bottom: 2px !important;
  }
  .print-doc-btn-copy {
    width: 100% !important;
    min-width: 0 !important;
  }
  .print-doc-btn-copy strong,
  .print-doc-btn-copy small {
    display: block !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  .print-doc-btn-copy strong {
    font-size: 11px !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }
  .print-doc-btn-copy small {
    display: block !important;
    margin-top: 4px !important;
    font-size: 8.5px !important;
    line-height: 1.3 !important;
    text-align: left !important;
  }
}
@media (max-width: 380px) {
  .print-doc-btn {
    aspect-ratio: auto !important;
    min-height: 108px !important;
  }
}


/* v5.5.9 - modul cetak HP lebih presisi dan tidak terlalu besar */
@media (max-width: 560px) {
  .print-doc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  .print-doc-btn {
    aspect-ratio: auto !important;
    min-height: 98px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    padding: 10px 9px !important;
    border-radius: 15px !important;
    text-align: left !important;
  }
  .print-doc-btn-icon {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 10px !important;
    margin: 0 0 2px 0 !important;
    font-size: 10px !important;
  }
  .print-doc-btn-copy {
    width: 100% !important;
    min-width: 0 !important;
  }
  .print-doc-btn-copy strong {
    display: block !important;
    font-size: 10.5px !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-align: left !important;
  }
  .print-doc-btn-copy small {
    display: block !important;
    margin-top: 3px !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-align: left !important;
  }
}
@media (max-width: 380px) {
  .print-doc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .print-doc-btn {
    min-height: 92px !important;
    padding: 8px 7px !important;
  }
  .print-doc-btn-icon {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
  }
  .print-doc-btn-copy strong {
    font-size: 10px !important;
  }
  .print-doc-btn-copy small {
    font-size: 7.5px !important;
  }
}


/* v5.6.0 - modul cetak HP center, rata tengah, dan judul panjang wrap */
@media (max-width: 560px) {
  .print-doc-btn {
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
  }
  .print-doc-btn-icon {
    margin: 0 auto 4px auto !important;
  }
  .print-doc-btn-copy {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }
  .print-doc-btn-copy strong,
  .print-doc-btn-copy small {
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .print-doc-btn-copy strong {
    line-height: 1.2 !important;
  }
  .print-doc-btn-copy small {
    line-height: 1.25 !important;
    max-width: 100% !important;
  }
}


/* v5.6.1 - indikator langkah cetak menyala setelah nomor surat dan formulir dipilih */
.print-doc-stepbar span.is-done {
  color: #087d72 !important;
}
.print-doc-stepbar span.is-done b {
  background: linear-gradient(135deg,#17b899,#087d79) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(8,125,121,.22) !important;
}
.print-doc-stepbar-blue span.is-done {
  color: #2563b5 !important;
}
.print-doc-stepbar-blue span.is-done b {
  background: linear-gradient(135deg,#2563eb,#0ea5e9) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(37,99,235,.20) !important;
}
.print-doc-stepbar i.is-done {
  background: linear-gradient(90deg,#17b899,#087d79) !important;
}
.print-doc-stepbar-blue i.is-done {
  background: linear-gradient(90deg,#2563eb,#0ea5e9) !important;
}


/* v5.6.2 - Detail Data Catin mobile lebih hidup dan Login Catin publik */
@media (max-width: 760px) {
  .catin-detail-page .content{padding:10px!important;background:radial-gradient(circle at 8% 0%,rgba(20,184,166,.16),transparent 26%),linear-gradient(180deg,#eef7f8,#f8fbfd)!important}
  .catin-detail-page .card{border-radius:24px!important;overflow:hidden;border-color:#d8e9eb!important;box-shadow:0 20px 48px rgba(20,55,72,.13)!important;background:linear-gradient(180deg,#ffffff,#fbfefe)!important}
  .catin-detail-page .card-header{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;padding:18px!important;background:radial-gradient(circle at 92% 0%,rgba(20,184,166,.18),transparent 32%),linear-gradient(135deg,#ffffff,#f0fbf8)!important;border-bottom:1px solid #dcebed!important}
  .catin-detail-page .card-header h2{font-size:23px!important;line-height:1.15!important;letter-spacing:-.02em!important;color:#17364c!important;overflow-wrap:anywhere!important}
  .catin-detail-page .card-header .text-muted{font-size:12px!important;color:#6f8394!important}
  .catin-detail-page .simkah-detail-badge{display:inline-flex!important;max-width:100%!important;flex-wrap:wrap!important;gap:6px!important;margin-top:10px!important;padding:8px 11px!important;border-radius:13px!important;background:#eafbf6!important;border-color:#b8e7dc!important;font-size:11px!important;overflow-wrap:anywhere!important}
  .catin-detail-page .card-header .actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important}
  .catin-detail-page .card-header .actions .btn{width:100%!important;min-height:42px!important;border-radius:14px!important;font-size:12px!important;padding:9px 8px!important;box-shadow:0 8px 18px rgba(20,58,76,.07)!important}
  .catin-detail-page .card-body{padding:14px!important}
  .catin-detail-page .tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;padding:10px!important;margin-bottom:14px!important;border-radius:22px!important;background:linear-gradient(145deg,#eef5f7,#f8fbfd)!important;border:1px solid #dbe7eb!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.85)!important;overflow:visible!important}
  .catin-detail-page .tab-btn{min-width:0!important;min-height:54px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;padding:10px 8px!important;border-radius:16px!important;background:#fff!important;color:#2e4358!important;font-size:12px!important;line-height:1.25!important;text-align:center!important;white-space:normal!important;box-shadow:0 10px 22px rgba(22,58,77,.06)!important;border:1px solid #e2edf0!important;scroll-snap-align:none!important}
  .catin-detail-page .tab-btn.active{background:linear-gradient(135deg,#0fb39c,#0a7e79)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 14px 28px rgba(8,126,121,.22)!important}
  .catin-detail-page .tab-btn.mahar-tab{grid-column:1/-1!important;background:linear-gradient(135deg,#fff7e8,#fffdf5)!important;color:#9a5b13!important;border-color:#f1d69e!important}
  .catin-detail-page .tab-btn.mahar-tab.active{background:linear-gradient(135deg,#f59e0b,#d97706)!important;color:#fff!important}
  .catin-detail-page .person-block{border-radius:20px!important;padding:14px!important;margin-bottom:12px!important;background:linear-gradient(180deg,#ffffff,#fbfefe)!important;box-shadow:0 12px 26px rgba(22,58,77,.06)!important;border-color:#dcebee!important}
  .catin-detail-page .section-title{margin-bottom:12px!important;align-items:center!important}
  .catin-detail-page .section-title span{width:36px!important;height:36px!important;border-radius:13px!important;background:linear-gradient(135deg,#dcf8f1,#eefbf8)!important;color:#087d79!important;box-shadow:0 8px 18px rgba(8,125,121,.10)!important}
  .catin-detail-page .section-title h3{font-size:16px!important;color:#19364c!important}
  .catin-detail-page .detail-grid{grid-template-columns:1fr!important;gap:9px!important}
  .catin-detail-page .detail-item{padding:12px!important;border-radius:15px!important;background:linear-gradient(135deg,#f8fbfd,#ffffff)!important;border:1px solid #e2edf0!important}
  .catin-detail-page .detail-item dt{font-size:9px!important;letter-spacing:.09em!important;color:#7a8d9a!important}
  .catin-detail-page .detail-item dd{font-size:13px!important;color:#18384e!important;line-height:1.55!important;overflow-wrap:anywhere!important}
  .catin-detail-page .akad-detail-card{grid-template-columns:1fr!important;padding:14px!important;border-radius:19px!important}
  .catin-detail-page .catin-photo-detail-grid{grid-template-columns:1fr!important;gap:12px!important}
}

.catin-login-public-main{width:min(1180px,calc(100% - 28px));margin:22px auto 34px;display:grid;gap:22px}.catin-login-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.86fr);gap:24px;align-items:center;padding:34px;border:1px solid #d5ebe8;border-radius:30px;background:radial-gradient(circle at 92% 0%,rgba(20,184,166,.22),transparent 36%),linear-gradient(135deg,#ffffff,#effbf8 55%,#f5f8ff);box-shadow:0 24px 60px rgba(23,67,83,.11)}.catin-login-hero h1{margin:8px 0 10px;font-size:clamp(34px,5vw,58px);line-height:1;color:#152b43}.catin-login-hero p{margin:0;color:#65798b;line-height:1.75;max-width:680px}.catin-login-form{padding:22px;border-radius:24px;background:rgba(255,255,255,.88);border:1px solid #cbe8e2;box-shadow:0 18px 42px rgba(24,69,81,.11)}.catin-login-form label{display:block;margin-bottom:8px;color:#21465a;font-size:12px;font-weight:900;letter-spacing:.06em}.catin-login-form div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.catin-login-form input{height:50px;border:1px solid #c9dfe1;border-radius:15px;padding:0 14px;outline:0;text-transform:uppercase;font-size:15px;font-weight:800;color:#19374c}.catin-login-form input:focus{border-color:#14a98f;box-shadow:0 0 0 4px rgba(20,169,143,.12)}.catin-login-form button{height:50px;border:0;border-radius:15px;padding:0 18px;background:linear-gradient(135deg,#13ad90,#087d79);color:#fff;font-weight:900;cursor:pointer;box-shadow:0 10px 24px rgba(8,125,121,.20)}.catin-login-form small{display:block;margin-top:8px;color:#758897;font-size:11px}.catin-login-result{position:relative;overflow:hidden;padding:24px;border:1px solid #d5e8e7;border-radius:28px;background:#fff;box-shadow:0 20px 52px rgba(20,65,79,.10)}.catin-login-result-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px dashed #dbe8e9}.catin-login-result-head span{display:inline-flex;padding:6px 10px;border-radius:999px;background:#dcf8ee;color:#087b6e;font-size:9px;font-weight:900;letter-spacing:.12em}.catin-login-result-head h2{margin:8px 0 4px;color:#18384e;font-size:28px}.catin-login-result-head p{margin:0;color:#718291;font-size:12px}.catin-login-result-head a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border-radius:13px;background:#eef4f6;color:#23465a;font-weight:900;font-size:12px}.catin-login-readonly-note{position:relative;z-index:2;display:flex;gap:12px;align-items:center;margin:16px 0;padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,#f0fdfa,#f8fbff);border:1px solid #c8eee5}.catin-login-readonly-note strong{color:#087d79}.catin-login-readonly-note span{color:#607487;font-size:12px}.catin-login-couple-grid,.catin-login-info-grid{position:relative;z-index:2}.catin-login-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}.catin-login-info-grid article{min-height:122px;padding:17px;border:1px solid #dce8ea;border-radius:20px;background:linear-gradient(145deg,#fff,#f9fcfd);box-shadow:0 12px 26px rgba(20,65,79,.05)}.catin-login-info-grid small{display:block;color:#7b8d99;font-size:9px;font-weight:900;letter-spacing:.1em}.catin-login-info-grid strong{display:block;margin-top:7px;color:#1d4056;font-size:14px;line-height:1.45;white-space:pre-line}.catin-login-info-grid p{margin:5px 0 0;color:#6d8190;font-size:11px;line-height:1.5}.catin-login-result.is-sensitive-result{isolation:isolate}.catin-login-result.is-sensitive-result>*:not(.public-privacy-watermark){position:relative;z-index:2}@media(max-width:860px){.catin-login-hero{grid-template-columns:1fr;padding:24px;border-radius:26px}.catin-login-info-grid{grid-template-columns:1fr 1fr}.catin-login-info-grid article:last-child{grid-column:1/-1}}@media(max-width:640px){.catin-login-public-main{width:calc(100% - 18px);margin:12px auto 24px}.catin-login-hero{padding:20px 16px;border-radius:24px}.catin-login-hero h1{font-size:36px}.catin-login-form{padding:16px}.catin-login-form div{grid-template-columns:1fr}.catin-login-form button{width:100%}.catin-login-result{padding:16px;border-radius:22px}.catin-login-result-head{align-items:flex-start;flex-direction:column}.catin-login-result-head h2{font-size:24px}.catin-login-readonly-note{align-items:flex-start;flex-direction:column}.catin-login-info-grid{grid-template-columns:1fr}.catin-login-info-grid article:last-child{grid-column:auto}.catin-login-form input{font-size:14px}}


/* v5.6.3 - Login Catin seperti login staff/admin dan data baca-saja */
.catin-login-staff-screen {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 12%, rgba(204,251,241,.95) 0, transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(219,234,254,.9) 0, transparent 34%),
    linear-gradient(135deg,#f7fafc,#ecfdf5);
}
.catin-login-staff-screen .public-nav,
.catin-login-staff-screen .public-footer {
  display: none !important;
}
.catin-login-staff-screen .catin-login-public-main {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.catin-staff-login-card {
  width: min(460px, 100%);
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(207,224,230,.95);
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 24px 60px rgba(15,118,110,.15);
  position: relative;
  overflow: hidden;
  animation: catinLoginRise .34s ease-out both;
}
.catin-staff-login-card:before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  right: -90px;
  top: -120px;
  background: radial-gradient(circle, rgba(20,184,166,.16), transparent 72%);
  pointer-events: none;
}
.catin-staff-login-card:after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  left: -80px;
  bottom: -80px;
  background: radial-gradient(circle, rgba(37,99,235,.10), transparent 72%);
  pointer-events: none;
}
.catin-staff-login-card > * {
  position: relative;
  z-index: 1;
}
.catin-staff-login-card .login-brand {
  margin-bottom: 24px;
}
.catin-staff-login-card .login-brand h1 {
  font-size: 27px;
  letter-spacing: -.035em;
}
.catin-staff-login-card .login-brand p {
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}
.catin-login-form.staff-like {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.catin-login-form.staff-like .form-group {
  margin-bottom: 16px;
}
.catin-login-form.staff-like label {
  display: block;
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 7px;
  color: #1d3448;
}
.catin-login-form.staff-like .form-control {
  min-height: 48px;
  border-radius: 13px;
  text-transform: uppercase;
}
.catin-login-form.staff-like .btn {
  min-height: 47px;
  border-radius: 13px;
}
.catin-login-staff-screen .catin-login-result {
  width: min(460px, 100%);
  margin: -14px auto 24px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.catin-login-staff-screen .public-registration-message {
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(15,55,70,.10);
}
.catin-data-view-screen .catin-login-public-main {
  width: min(1240px, calc(100% - 28px));
  margin: 0 auto;
}
.catin-data-view-screen .catin-login-result {
  animation: catinLoginRise .34s ease-out both;
}
.catin-login-result-head {
  background: linear-gradient(135deg,#ffffff,#f0fdfa);
}
.catin-login-readonly-note {
  border-left: 4px solid #0f9f8f;
}
@keyframes catinLoginRise {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 560px) {
  .catin-login-staff-screen .catin-login-public-main {
    padding: 18px 14px;
  }
  .catin-staff-login-card {
    padding: 26px 18px 20px;
    border-radius: 22px;
  }
  .catin-staff-login-card .brand-mark--logo {
    width: 72px;
    height: 72px;
  }
  .catin-staff-login-card .login-brand h1 {
    font-size: 25px;
  }
  .catin-login-staff-screen .catin-login-result {
    width: 100%;
  }
}


/* v5.6.5 - Export Rekomendasi dan tombol kecil kembali ke atas */
.staff-stat-card.orange{--staff-a:#f59e0b;--staff-b:#d97706;--staff-soft:#fff7ed}
.staff-secondary-button{margin-top:10px;background:linear-gradient(135deg,#f59e0b,#d97706)!important;box-shadow:0 14px 28px rgba(217,119,6,.16)!important}
.staff-service-tabs{margin-top:14px;margin-bottom:18px}.staff-service-tabs .service-data-tab{min-height:56px}
.scroll-top-fab{position:fixed;right:18px;bottom:18px;z-index:90;width:42px;height:42px;border:0;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#0f8f80,#126eb8);color:#fff;font-size:20px;font-weight:900;box-shadow:0 16px 34px rgba(15,55,70,.24);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px) scale(.92);transition:opacity .22s ease,transform .22s ease,visibility .22s ease,box-shadow .22s ease}.scroll-top-fab.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.scroll-top-fab:hover{box-shadow:0 20px 42px rgba(15,55,70,.30);transform:translateY(-2px) scale(1.02)}.public-scroll-top{right:22px;bottom:22px;z-index:80}@media(max-width:720px){.scroll-top-fab{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:38px;height:38px;border-radius:13px;font-size:18px}.public-scroll-top{right:14px}}


/* v5.6.6 - penyempurnaan tampilan Login Catin */
.catin-login-form.staff-like input.form-control::placeholder{color:transparent}
.login-help.login-credit{display:flex;align-items:center;justify-content:center;text-align:center;font-size:15px;line-height:1.5;font-weight:700;color:#5b6877;min-height:74px}
.login-help.login-credit em{font-style:italic;color:#667085;letter-spacing:.01em}


/* v5.6.7 - nama pasangan tampil pada halaman Ubah Data Catin */
.edit-catin-summary{
  display:inline-grid;
  gap:3px;
  margin-top:10px;
  padding:10px 13px;
  border-radius:15px;
  background:linear-gradient(135deg,#eefdf9,#f7fbff);
  border:1px solid #c9eee5;
  box-shadow:0 10px 22px rgba(15,118,110,.08);
  color:#174052;
}
.edit-catin-summary span{
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#0b8f7d;
}
.edit-catin-summary strong{
  font-size:15px;
  line-height:1.25;
  color:#14233a;
  text-transform:uppercase;
}
.edit-catin-summary small{
  font-size:11px;
  color:#657789;
  font-weight:700;
}
@media(max-width:640px){
  .card-header:has(.edit-catin-summary){
    align-items:flex-start;
  }
  .edit-catin-summary{
    display:grid;
    width:100%;
    margin-top:12px;
    padding:12px;
  }
  .edit-catin-summary strong{
    font-size:14px;
    overflow-wrap:anywhere;
  }
}


/* v5.6.8 - Tab form admin lebih hidup, elegan, dan nyaman di smartphone */
form[data-catin-save-form] .tabs{
  position:relative;
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
  padding:12px;
  margin:0 0 20px;
  border-radius:22px;
  background:
    radial-gradient(circle at 15% 10%,rgba(20,184,166,.12),transparent 34%),
    radial-gradient(circle at 85% 0%,rgba(59,130,246,.08),transparent 34%),
    linear-gradient(145deg,#f8fbfd,#edf3f6);
  border:1px solid #dbe8ec;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 12px 28px rgba(24,54,72,.06);
  overflow:visible;
}
form[data-catin-save-form] .tab-btn{
  position:relative;
  min-width:0 !important;
  min-height:58px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:12px 10px;
  border-radius:17px;
  border:1px solid transparent;
  background:rgba(255,255,255,.72);
  color:#23415a;
  font-weight:900;
  font-size:13px;
  line-height:1.25;
  text-align:center;
  box-shadow:0 8px 18px rgba(20,55,75,.045);
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
  overflow:hidden;
}
form[data-catin-save-form] .tab-btn::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:#b7c7d1;
  box-shadow:0 0 0 5px rgba(183,199,209,.14);
  flex:0 0 10px;
  transition:.22s ease;
}
form[data-catin-save-form] .tab-btn::after{
  content:"";
  position:absolute;
  inset:auto -30px -44px auto;
  width:96px;
  height:96px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(20,184,166,.11),transparent 70%);
  opacity:0;
  transition:.25s ease;
}
form[data-catin-save-form] .tab-btn:hover{
  transform:translateY(-2px);
  border-color:#bee9df;
  background:#ffffff;
  color:#0b6f66;
  box-shadow:0 13px 26px rgba(15,118,110,.10);
}
form[data-catin-save-form] .tab-btn:hover::after{opacity:1;transform:translate(-10px,-8px)}
form[data-catin-save-form] .tab-btn.active{
  color:#ffffff !important;
  border-color:transparent !important;
  background:linear-gradient(135deg,#0fb39c,#087d79) !important;
  box-shadow:0 15px 30px rgba(8,126,121,.22),inset 0 1px 0 rgba(255,255,255,.22) !important;
}
form[data-catin-save-form] .tab-btn.active::before{
  background:#ffffff;
  box-shadow:0 0 0 5px rgba(255,255,255,.18);
}
form[data-catin-save-form] .tab-btn.active::after{
  opacity:1;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%);
}
form[data-catin-save-form] .tab-btn.mahar-tab{
  background:linear-gradient(135deg,#fff8e8,#ffffff);
  color:#a55e08;
  border-color:#f2dcaa;
}
form[data-catin-save-form] .tab-btn.mahar-tab::before{
  background:#f59e0b;
  box-shadow:0 0 0 5px rgba(245,158,11,.14);
}
form[data-catin-save-form] .tab-btn.mahar-tab.active{
  background:linear-gradient(135deg,#f59e0b,#d97706) !important;
  color:#fff !important;
}
form[data-catin-save-form] .tab-btn.akad-tab{
  background:linear-gradient(135deg,#eefdf9,#ffffff);
}
form[data-catin-save-form] .tab-btn.rapak-tab{
  background:linear-gradient(135deg,#eff6ff,#ffffff);
}
form[data-catin-save-form] .tab-pane.active{
  animation:adminTabPaneRise .26s ease-out both;
}
@keyframes adminTabPaneRise{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@media(max-width:760px){
  form[data-catin-save-form] .tabs{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
    padding:10px !important;
    border-radius:20px !important;
    overflow:visible !important;
  }
  form[data-catin-save-form] .tab-btn{
    min-height:58px !important;
    padding:11px 8px !important;
    font-size:12px !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
  form[data-catin-save-form] .tab-btn.mahar-tab{
    grid-column:1 / -1;
  }
}
@media(max-width:390px){
  form[data-catin-save-form] .tabs{
    gap:8px !important;
    padding:8px !important;
  }
  form[data-catin-save-form] .tab-btn{
    min-height:54px !important;
    font-size:11.5px !important;
    border-radius:15px !important;
  }
}


/* v5.6.9 - Login Catin menampilkan data orang tua kedua catin */
.catin-login-parents-section{
  position:relative;
  margin:18px 0;
  padding:18px;
  border-radius:24px;
  background:linear-gradient(145deg,#ffffff,#f8fdfc);
  border:1px solid #d9e9ee;
  box-shadow:0 16px 38px rgba(20,55,75,.07);
  overflow:hidden;
}
.catin-login-parents-section:before{
  content:"";
  position:absolute;
  right:-70px;
  top:-90px;
  width:210px;
  height:210px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(20,184,166,.12),transparent 70%);
  pointer-events:none;
}
.catin-login-section-title{
  position:relative;
  z-index:1;
  margin-bottom:16px;
}
.catin-login-section-title span{
  display:block;
  margin-bottom:5px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  color:#0b8f7d;
}
.catin-login-section-title h3{
  margin:0;
  font-size:22px;
  line-height:1.2;
  color:#172033;
}
.catin-login-section-title p{
  margin:6px 0 0;
  color:#667085;
  font-size:13px;
}
.catin-login-parent-group{
  position:relative;
  z-index:1;
  margin-top:14px;
}
.catin-login-parent-group h4{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
  padding:7px 11px;
  border-radius:999px;
  background:#ecfdf8;
  border:1px solid #c6eee2;
  color:#0c7368;
  font-size:12px;
  font-weight:900;
}
.catin-login-parent-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.catin-login-parent-card{
  min-width:0;
  border:1px solid #dbe9ee;
  border-radius:20px;
  background:linear-gradient(180deg,#fff,#fbfefe);
  box-shadow:0 10px 26px rgba(15,55,70,.055);
  overflow:hidden;
}
.catin-login-parent-card header{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:11px;
  align-items:center;
  padding:14px;
  border-bottom:1px solid #edf3f6;
  background:linear-gradient(135deg,#f8fffc,#f5faff);
}
.catin-login-parent-card header>span{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#dff8f2,#ecfdf8);
  color:#0b8075;
  font-weight:900;
  box-shadow:0 8px 18px rgba(15,118,110,.10);
}
.catin-login-parent-card header small,
.catin-login-parent-card header strong{
  display:block;
}
.catin-login-parent-card header small{
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#718096;
  font-weight:900;
}
.catin-login-parent-card header strong{
  color:#172033;
  font-size:14px;
  line-height:1.25;
}
.catin-login-parent-card dl{
  margin:0;
  padding:12px 14px 14px;
  display:grid;
  gap:8px;
}
.catin-login-parent-card dl div{
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  gap:8px;
  padding-bottom:8px;
  border-bottom:1px dashed #e4edf1;
}
.catin-login-parent-card dl div:last-child{
  border-bottom:0;
  padding-bottom:0;
}
.catin-login-parent-card dt{
  color:#718096;
  font-size:11px;
  font-weight:900;
}
.catin-login-parent-card dd{
  margin:0;
  color:#17364d;
  font-size:12px;
  font-weight:800;
  overflow-wrap:anywhere;
}
.catin-login-parent-card .parent-address{
  grid-template-columns:1fr;
}
.catin-login-parent-card.is-limited{
  background:linear-gradient(180deg,#fff,#fffaf1);
  border-color:#f4dfb3;
}
.catin-login-parent-card.is-limited header{
  background:linear-gradient(135deg,#fff7e6,#fffdf7);
}
@media(max-width:760px){
  .catin-login-parents-section{
    padding:14px;
    border-radius:22px;
  }
  .catin-login-section-title h3{
    font-size:19px;
  }
  .catin-login-parent-grid{
    grid-template-columns:1fr;
  }
  .catin-login-parent-card dl div{
    grid-template-columns:1fr;
    gap:2px;
  }
}


/* v5.7.0 - ikon jam Total Jadwal dibuat lebih jelas, hidup, dan animasi */
.public-akad-v3-summary{
  position:relative;
  overflow:hidden;
}
.public-akad-v3-summary-icon{
  position:relative;
  isolation:isolate;
  overflow:visible !important;
  background:
    radial-gradient(circle at 30% 28%,rgba(255,255,255,.28),transparent 30%),
    linear-gradient(135deg,#11c5a5 0%,#087d79 58%,#2563eb 100%) !important;
  box-shadow:
    0 14px 28px rgba(8,125,121,.26),
    0 0 0 6px rgba(20,184,166,.10) !important;
  animation: publicClockFloat 2.8s ease-in-out infinite;
}
.public-akad-v3-summary-icon:before{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:22px;
  border:2px solid rgba(20,184,166,.28);
  animation: publicClockPulse 1.9s ease-out infinite;
  z-index:-1;
}
.public-akad-v3-summary-icon:after{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.34);
  z-index:-1;
}
.public-akad-v3-summary-icon svg{
  width:31px !important;
  height:31px !important;
  stroke-width:2.25 !important;
  filter:drop-shadow(0 2px 3px rgba(0,40,50,.20));
}
.public-akad-v3-summary-icon svg circle{
  stroke:rgba(255,255,255,.96);
}
.public-akad-v3-summary-icon svg path{
  stroke:#ffffff;
  transform-origin:12px 12px;
  animation: publicClockHand 3.6s linear infinite;
}
@keyframes publicClockFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-3px) scale(1.035)}
}
@keyframes publicClockPulse{
  0%{transform:scale(.88);opacity:.72}
  100%{transform:scale(1.22);opacity:0}
}
@keyframes publicClockHand{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
@media(max-width:700px){
  .public-akad-v3-summary-icon{
    width:58px !important;
    height:58px !important;
    border-radius:19px !important;
  }
  .public-akad-v3-summary-icon svg{
    width:33px !important;
    height:33px !important;
  }
}
@media(prefers-reduced-motion:reduce){
  .public-akad-v3-summary-icon,
  .public-akad-v3-summary-icon:before,
  .public-akad-v3-summary-icon svg path{
    animation:none !important;
  }
}


/* v5.7.1 - notifikasi alert dibuat elegan dan hidup */
body.app-live-alert-open{overflow:hidden}
.app-live-alert{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease}
.app-live-alert.is-open{opacity:1;visibility:visible;pointer-events:auto}
.app-live-alert-backdrop{position:absolute;inset:0;background:rgba(9,19,28,.52);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.app-live-alert-dialog{position:relative;width:min(520px,100%);padding:28px 26px 22px;border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(244,252,250,.98));border:1px solid rgba(210,231,228,.95);box-shadow:0 28px 80px rgba(4,24,37,.30);transform:translateY(20px) scale(.96);opacity:0;transition:transform .26s ease,opacity .26s ease;overflow:hidden}
.app-live-alert.is-open .app-live-alert-dialog{transform:translateY(0) scale(1);opacity:1}
.app-live-alert-dialog:before{content:"";position:absolute;inset:-100px auto auto -80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.08),transparent 68%)}
.app-live-alert-dialog:after{content:"";position:absolute;inset:auto -60px -90px auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(20,184,166,.12),transparent 70%)}
.app-live-alert-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border:1px solid #d7e5e8;border-radius:12px;background:rgba(255,255,255,.82);color:#597083;font-size:24px;line-height:1;display:grid;place-items:center;cursor:pointer;transition:.2s ease;z-index:2}
.app-live-alert-close:hover{background:#fff;color:#1d3448;transform:translateY(-1px)}
.app-live-alert-icon{position:relative;width:88px;height:88px;margin:0 auto 18px;border-radius:26px;display:grid;place-items:center;background:linear-gradient(135deg,#fff0f0,#fff7f7);box-shadow:0 18px 40px rgba(220,38,38,.10)}
.app-live-alert-icon span{position:relative;z-index:2;font-size:44px;font-weight:900;line-height:1;color:#dc2626;text-shadow:0 6px 18px rgba(220,38,38,.14);animation:appAlertBob 1.8s ease-in-out infinite}
.app-live-alert-icon i{position:absolute;inset:12px;border-radius:22px;border:1px solid rgba(248,113,113,.30)}
.app-live-alert-icon:before,.app-live-alert-icon:after{content:"";position:absolute;border-radius:50%;border:2px solid rgba(248,113,113,.22);inset:8px;animation:appAlertPulse 2s ease-out infinite}
.app-live-alert-icon:after{inset:0;animation-delay:.6s}
.app-live-alert-copy{position:relative;z-index:1;text-align:center}
.app-live-alert-copy small{display:block;margin-bottom:6px;font-size:11px;font-weight:900;letter-spacing:.16em;color:#0f8d7d}
.app-live-alert-copy h3{margin:0 0 10px;font-size:38px;line-height:1.08;letter-spacing:-.03em;color:#172033}
.app-live-alert-copy p{margin:0 auto;max-width:410px;font-size:17px;line-height:1.72;color:#5b6877}
.app-live-alert-actions{position:relative;z-index:1;display:flex;justify-content:center;margin-top:20px}
.app-live-alert-actions .btn{min-width:150px;min-height:48px;border-radius:16px;font-size:16px;font-weight:900;box-shadow:0 16px 30px rgba(8,125,121,.20)}
@keyframes appAlertPulse{0%{transform:scale(.86);opacity:.55}100%{transform:scale(1.2);opacity:0}}
@keyframes appAlertBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-width:640px){.app-live-alert{padding:14px}.app-live-alert-dialog{padding:24px 18px 18px;border-radius:24px}.app-live-alert-icon{width:78px;height:78px;border-radius:22px}.app-live-alert-icon span{font-size:38px}.app-live-alert-copy h3{font-size:30px}.app-live-alert-copy p{font-size:15px;line-height:1.6}.app-live-alert-actions .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.app-live-alert,.app-live-alert-dialog,.app-live-alert-icon span,.app-live-alert-icon:before,.app-live-alert-icon:after{transition:none!important;animation:none!important}}


/* v5.7.2 - Rekomendasi Nikah: Foto Catin dan Nomor HP/WhatsApp opsional */
form[data-catin-save-form] .service-banner-warning{background:linear-gradient(135deg,#fff7e8,#fffef8);border-color:#f4d9a8}
form[data-catin-save-form] input[name="nomor_whatsapp"]{letter-spacing:.02em}


/* v5.7.5 - Foto Catin tampil pada Detail Rekomendasi Nikah */
.catin-detail-page .catin-photo-detail-section{
  background:linear-gradient(145deg,#ffffff,#f8fffd);
  border-color:#d5eee7;
}
.catin-detail-page .catin-photo-detail-card{
  box-shadow:0 14px 30px rgba(20,55,72,.07);
}
.catin-detail-page .catin-photo-detail-card>img{
  background:#1d5ef0;
  object-fit:contain;
  object-position:center bottom;
}


/* v5.7.6 - halaman publik public_rekom.php */
.public-rekom-body{min-height:100vh;background:radial-gradient(circle at 12% 5%,rgba(20,184,166,.15),transparent 28%),radial-gradient(circle at 90% 4%,rgba(59,130,246,.12),transparent 28%),linear-gradient(180deg,#eef7f8,#f8fbfd)}
.public-rekom-main{width:min(1220px,calc(100% - 28px));margin:0 auto;padding:28px 0 38px}
.public-rekom-search-screen .public-rekom-main{min-height:calc(100vh - 130px);display:grid;place-items:center}
.public-rekom-login-card{width:min(465px,100%);padding:30px;border:1px solid #d4e6eb;border-radius:26px;background:rgba(255,255,255,.96);box-shadow:0 24px 60px rgba(15,118,110,.14);position:relative;overflow:hidden;animation:catinLoginRise .34s ease-out both}
.public-rekom-login-card:before{content:"";position:absolute;right:-92px;top:-120px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(20,184,166,.16),transparent 72%)}
.public-rekom-login-card>*{position:relative;z-index:1}
.public-rekom-result{position:relative;padding:0;border-radius:28px;overflow:hidden;animation:catinLoginRise .34s ease-out both}
.public-rekom-result-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:25px 26px;border:1px solid #d7e8eb;border-radius:26px;background:linear-gradient(135deg,#ffffff,#f0fdfa);box-shadow:0 18px 42px rgba(20,60,76,.09);margin-bottom:16px}
.public-rekom-result-head span{display:block;font-size:10px;font-weight:900;letter-spacing:.14em;color:#087d79}.public-rekom-result-head h2{margin:4px 0 2px;font-size:28px;color:#172033}.public-rekom-result-head p{margin:0;color:#667085}.public-rekom-result-head a{padding:9px 13px;border-radius:13px;background:#fff;border:1px solid #dbe6ea;color:#31475b;font-weight:800}
.public-rekom-summary-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}.public-rekom-summary-grid article{padding:18px;border-radius:20px;border:1px solid #dbe9ee;background:linear-gradient(180deg,#fff,#fbfefe);box-shadow:0 12px 28px rgba(20,55,72,.06)}.public-rekom-summary-grid small{display:block;font-size:10px;font-weight:900;letter-spacing:.12em;color:#0b8f7d}.public-rekom-summary-grid strong{display:block;margin-top:5px;font-size:17px;line-height:1.35;color:#172033;overflow-wrap:anywhere}.public-rekom-summary-grid p{margin:5px 0 0;color:#667085;font-size:13px}
.public-rekom-section{position:relative;z-index:1;margin-top:16px;padding:18px;border-radius:24px;border:1px solid #d9e9ee;background:linear-gradient(145deg,#ffffff,#f8fffd);box-shadow:0 16px 38px rgba(20,55,72,.07);overflow:hidden}.public-rekom-section:before{content:"";position:absolute;right:-80px;top:-90px;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,rgba(20,184,166,.10),transparent 70%)}.public-rekom-section-title{position:relative;z-index:1;margin-bottom:14px}.public-rekom-section-title span{font-size:10px;font-weight:900;letter-spacing:.14em;color:#0b8f7d}.public-rekom-section-title h3{margin:4px 0 0;font-size:22px;color:#172033}
.public-rekom-photo-grid,.public-rekom-person-grid,.public-rekom-parent-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.public-rekom-photo-grid article{padding:15px;border-radius:20px;border:1px solid #dce9ee;background:#fff;text-align:center;box-shadow:0 10px 26px rgba(15,55,70,.055)}.public-rekom-photo-grid strong,.public-rekom-photo-grid small{display:block}.public-rekom-photo-grid strong{margin-top:10px;color:#172033}.public-rekom-photo-grid small{color:#667085;font-weight:800}
.public-rekom-photo{width:100%;aspect-ratio:4/3;border-radius:18px;background:linear-gradient(145deg,#ecfdf5,#eaf3ff);border:1px solid #d7e8ef;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;overflow:hidden;color:#0f766e}.public-rekom-photo.has-photo{background:#1d5ef0}.public-rekom-photo img{width:100%;height:100%;object-fit:contain;object-position:center bottom;background:#1d5ef0}.public-rekom-photo>span{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#fff;font-size:28px;font-weight:900;box-shadow:0 10px 28px rgba(15,23,42,.11)}.public-rekom-photo>small{font-weight:800;color:#64748b}
.public-rekom-person-card,.public-rekom-parent-card{min-width:0;border:1px solid #dbe9ee;border-radius:22px;background:linear-gradient(180deg,#fff,#fbfefe);box-shadow:0 12px 28px rgba(20,55,72,.06);overflow:hidden}.public-rekom-person-card>header,.public-rekom-parent-card>header{display:grid;grid-template-columns:46px minmax(0,1fr);gap:11px;align-items:center;padding:14px;border-bottom:1px solid #edf3f6;background:linear-gradient(135deg,#f8fffc,#f5faff)}.public-rekom-person-card>header>span,.public-rekom-parent-card>header>span{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#dff8f2,#ecfdf8);color:#0b8075;font-weight:900;box-shadow:0 8px 18px rgba(15,118,110,.10)}.public-rekom-person-card header small,.public-rekom-parent-card header small{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#718096;font-weight:900}.public-rekom-person-card header strong,.public-rekom-parent-card header strong{display:block;color:#172033;font-size:14px;line-height:1.25}
.public-rekom-detail-grid,.public-rekom-parent-card dl{margin:0;padding:13px 14px 15px;display:grid;gap:8px}.public-rekom-detail-item,.public-rekom-parent-card dl div{display:grid;grid-template-columns:125px minmax(0,1fr);gap:8px;padding-bottom:8px;border-bottom:1px dashed #e4edf1}.public-rekom-detail-item.full,.public-rekom-parent-card dl div.full{grid-template-columns:1fr}.public-rekom-detail-item dt,.public-rekom-parent-card dt{font-size:11px;font-weight:900;color:#718096}.public-rekom-detail-item dd,.public-rekom-parent-card dd{margin:0;font-size:12px;font-weight:800;color:#17364d;overflow-wrap:anywhere}.public-rekom-parent-group{position:relative;z-index:1;margin-top:12px}.public-rekom-parent-group h4{display:inline-flex;margin:0 0 10px;padding:7px 11px;border-radius:999px;background:#ecfdf8;border:1px solid #c6eee2;color:#0c7368;font-size:12px;font-weight:900}.public-rekom-parent-card.is-limited{background:linear-gradient(180deg,#fff,#fffaf1);border-color:#f4dfb3}.public-rekom-parent-card.is-limited header{background:linear-gradient(135deg,#fff7e6,#fffdf7)}
@media(max-width:860px){.public-rekom-summary-grid{grid-template-columns:1fr}.public-rekom-person-grid,.public-rekom-parent-grid{grid-template-columns:1fr}.public-rekom-result-head{align-items:flex-start;flex-direction:column}.public-rekom-result-head a{width:100%;text-align:center}.public-rekom-photo-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.public-rekom-main{width:min(100% - 20px,1220px);padding:18px 0 28px}.public-rekom-login-card{padding:25px 18px 20px;border-radius:23px}.public-rekom-section{padding:14px;border-radius:21px}.public-rekom-section-title h3{font-size:19px}.public-rekom-photo-grid{grid-template-columns:1fr}.public-rekom-detail-item,.public-rekom-parent-card dl div{grid-template-columns:1fr;gap:2px}.public-rekom-photo{aspect-ratio:4/3}}


/* v5.7.7 - public_rekom.php: bagian Foto Calon Pengantin dihapus */
.public-rekom-body .public-rekom-person-card>header{border-radius:0;background:linear-gradient(135deg,#f8fffc,#f4f8ff)}
.public-rekom-body .public-rekom-person-card .public-rekom-detail-grid{padding-top:14px}


/* v5.7.9 - Foto Catin ditempatkan di atas identitas pada Data Rekom */
.public-rekom-photo-grid-top{
  margin:0 0 16px;
}
.public-rekom-photo-grid-top article{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  align-items:center;
  gap:14px;
  text-align:left!important;
  padding:13px!important;
  border-radius:22px!important;
  background:linear-gradient(135deg,#ffffff,#f8fffd)!important;
}
.public-rekom-photo-grid-top article.female{
  background:linear-gradient(135deg,#ffffff,#fff8fb)!important;
}
.public-rekom-photo-grid-top .public-rekom-photo{
  width:132px;
  aspect-ratio:3/4;
  border-radius:18px;
  margin:0;
  box-shadow:0 12px 26px rgba(29,94,240,.10);
}
.public-rekom-photo-grid-top .public-rekom-photo img{
  object-fit:contain;
  object-position:center bottom;
  background:#1d5ef0;
}
.public-rekom-photo-grid-top article small{
  display:block;
  margin-bottom:5px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  color:#0b8f7d;
}
.public-rekom-photo-grid-top article strong{
  display:block;
  font-size:16px;
  line-height:1.3;
  color:#172033;
  overflow-wrap:anywhere;
}
.public-rekom-photo-grid-top article.female small{
  color:#be185d;
}
.public-brand small{
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:800!important;
  color:#52667a!important;
}
@media(max-width:860px){
  .public-rekom-photo-grid-top{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:560px){
  .public-rekom-photo-grid-top article{
    grid-template-columns:100px minmax(0,1fr);
    gap:12px;
    padding:12px!important;
  }
  .public-rekom-photo-grid-top .public-rekom-photo{
    width:100px;
    border-radius:15px;
  }
  .public-rekom-photo-grid-top article strong{
    font-size:14px;
  }
  .public-brand small{
    font-size:11px!important;
  }
}


/* v5.8.0 - Popup Data Terverifikasi pada Data Rekom */
.public-rekom-verified-pop{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .24s ease,visibility .24s ease;
}
.public-rekom-verified-pop.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.public-rekom-verified-backdrop{
  position:absolute;
  inset:0;
  background:rgba(8,22,32,.48);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.public-rekom-verified-card{
  position:relative;
  width:min(520px,100%);
  padding:30px 28px 24px;
  border-radius:30px;
  text-align:center;
  background:
    radial-gradient(circle at 8% 0%,rgba(20,184,166,.14),transparent 34%),
    radial-gradient(circle at 92% 8%,rgba(37,99,235,.10),transparent 32%),
    linear-gradient(145deg,#ffffff,#f5fffc);
  border:1px solid rgba(195,232,224,.95);
  box-shadow:0 30px 90px rgba(6,31,45,.32);
  transform:translateY(18px) scale(.96);
  opacity:0;
  transition:transform .28s ease,opacity .28s ease;
  overflow:hidden;
}
.public-rekom-verified-pop.is-open .public-rekom-verified-card{
  transform:translateY(0) scale(1);
  opacity:1;
}
.public-rekom-verified-close{
  position:absolute;
  right:15px;
  top:15px;
  width:38px;
  height:38px;
  border:1px solid #d9e8ea;
  border-radius:14px;
  background:rgba(255,255,255,.86);
  color:#567085;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.public-rekom-verified-close:hover{
  color:#163047;
  background:#fff;
}
.public-rekom-verified-icon{
  position:relative;
  width:92px;
  height:92px;
  margin:0 auto 18px;
  border-radius:30px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#0fb39c,#087d79 70%,#2563eb);
  color:#fff;
  box-shadow:0 18px 42px rgba(8,125,121,.26);
  isolation:isolate;
}
.public-rekom-verified-icon span{
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  font-size:38px;
  font-weight:900;
  animation:rekomVerifiedCheck .95s cubic-bezier(.2,.8,.2,1) both;
}
.public-rekom-verified-icon i,
.public-rekom-verified-icon:before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:34px;
  border:2px solid rgba(20,184,166,.26);
  animation:rekomVerifiedPulse 1.9s ease-out infinite;
  z-index:-1;
}
.public-rekom-verified-icon:before{
  inset:-16px;
  animation-delay:.45s;
}
.public-rekom-verified-card small{
  display:block;
  margin-bottom:7px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  color:#0b8f7d;
}
.public-rekom-verified-card h2{
  margin:0 0 10px;
  font-size:36px;
  line-height:1.1;
  letter-spacing:-.035em;
  color:#172033;
}
.public-rekom-verified-card p{
  margin:0 auto 20px;
  max-width:420px;
  color:#5f7082;
  font-size:16px;
  line-height:1.75;
}
.public-rekom-verified-card p strong{
  color:#172033;
}
.public-rekom-verified-card .btn{
  min-width:150px;
  min-height:48px;
  border-radius:16px;
  font-weight:900;
  box-shadow:0 16px 30px rgba(8,125,121,.20);
}
@keyframes rekomVerifiedPulse{
  0%{transform:scale(.88);opacity:.75}
  100%{transform:scale(1.18);opacity:0}
}
@keyframes rekomVerifiedCheck{
  0%{transform:scale(.4) rotate(-18deg);opacity:0}
  65%{transform:scale(1.12) rotate(4deg);opacity:1}
  100%{transform:scale(1) rotate(0deg);opacity:1}
}
@media(max-width:560px){
  .public-rekom-verified-card{
    padding:26px 18px 20px;
    border-radius:25px;
  }
  .public-rekom-verified-icon{
    width:78px;
    height:78px;
    border-radius:24px;
  }
  .public-rekom-verified-icon span{
    width:50px;
    height:50px;
    font-size:32px;
  }
  .public-rekom-verified-card h2{
    font-size:30px;
  }
  .public-rekom-verified-card p{
    font-size:14px;
    line-height:1.65;
  }
  .public-rekom-verified-card .btn{
    width:100%;
  }
}
@media(prefers-reduced-motion:reduce){
  .public-rekom-verified-pop,
  .public-rekom-verified-card,
  .public-rekom-verified-icon span,
  .public-rekom-verified-icon i,
  .public-rekom-verified-icon:before{
    animation:none!important;
    transition:none!important;
  }
}


/* v5.8.2 - tombol N1 PI pada Modul Cetak Rekomendasi Nikah */
.rekom-print-doc-btn[data-rekom-doc-type="n1_pi"] .print-doc-btn-icon{
  background:linear-gradient(135deg,#fff1f5,#fce7f3)!important;
  color:#be185d!important;
  border-color:#fbcfe8!important;
  line-height:1.05;
  font-size:12px;
}
.rekom-print-doc-btn[data-rekom-doc-type="n1_pi"]:hover{
  border-color:#f9a8d4!important;
  box-shadow:0 14px 28px rgba(190,24,93,.12)!important;
}


/* v5.8.3 - Popup Data Terverifikasi pada Login Catin */
.catin-login-verified-pop{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .24s ease,visibility .24s ease;
}
.catin-login-verified-pop.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.catin-login-verified-backdrop{
  position:absolute;
  inset:0;
  background:rgba(8,22,32,.48);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.catin-login-verified-card{
  position:relative;
  width:min(520px,100%);
  padding:30px 28px 24px;
  border-radius:30px;
  text-align:center;
  background:
    radial-gradient(circle at 8% 0%,rgba(20,184,166,.14),transparent 34%),
    radial-gradient(circle at 92% 8%,rgba(37,99,235,.10),transparent 32%),
    linear-gradient(145deg,#ffffff,#f5fffc);
  border:1px solid rgba(195,232,224,.95);
  box-shadow:0 30px 90px rgba(6,31,45,.32);
  transform:translateY(18px) scale(.96);
  opacity:0;
  transition:transform .28s ease,opacity .28s ease;
  overflow:hidden;
}
.catin-login-verified-pop.is-open .catin-login-verified-card{
  transform:translateY(0) scale(1);
  opacity:1;
}
.catin-login-verified-close{
  position:absolute;
  right:15px;
  top:15px;
  width:38px;
  height:38px;
  border:1px solid #d9e8ea;
  border-radius:14px;
  background:rgba(255,255,255,.86);
  color:#567085;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.catin-login-verified-close:hover{
  color:#163047;
  background:#fff;
}
.catin-login-verified-icon{
  position:relative;
  width:92px;
  height:92px;
  margin:0 auto 18px;
  border-radius:30px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#0fb39c,#087d79 70%,#2563eb);
  color:#fff;
  box-shadow:0 18px 42px rgba(8,125,121,.26);
  isolation:isolate;
}
.catin-login-verified-icon span{
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  font-size:38px;
  font-weight:900;
  animation:catinLoginVerifiedCheck .95s cubic-bezier(.2,.8,.2,1) both;
}
.catin-login-verified-icon i,
.catin-login-verified-icon:before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:34px;
  border:2px solid rgba(20,184,166,.26);
  animation:catinLoginVerifiedPulse 1.9s ease-out infinite;
  z-index:-1;
}
.catin-login-verified-icon:before{
  inset:-16px;
  animation-delay:.45s;
}
.catin-login-verified-card small{
  display:block;
  margin-bottom:7px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  color:#0b8f7d;
}
.catin-login-verified-card h2{
  margin:0 0 10px;
  font-size:36px;
  line-height:1.1;
  letter-spacing:-.035em;
  color:#172033;
}
.catin-login-verified-card p{
  margin:0 auto 20px;
  max-width:420px;
  color:#5f7082;
  font-size:16px;
  line-height:1.75;
}
.catin-login-verified-card p strong{
  color:#172033;
}
.catin-login-verified-card .btn{
  min-width:150px;
  min-height:48px;
  border-radius:16px;
  font-weight:900;
  box-shadow:0 16px 30px rgba(8,125,121,.20);
}
@keyframes catinLoginVerifiedPulse{
  0%{transform:scale(.88);opacity:.75}
  100%{transform:scale(1.18);opacity:0}
}
@keyframes catinLoginVerifiedCheck{
  0%{transform:scale(.4) rotate(-18deg);opacity:0}
  65%{transform:scale(1.12) rotate(4deg);opacity:1}
  100%{transform:scale(1) rotate(0deg);opacity:1}
}
@media(max-width:560px){
  .catin-login-verified-card{
    padding:26px 18px 20px;
    border-radius:25px;
  }
  .catin-login-verified-icon{
    width:78px;
    height:78px;
    border-radius:24px;
  }
  .catin-login-verified-icon span{
    width:50px;
    height:50px;
    font-size:32px;
  }
  .catin-login-verified-card h2{
    font-size:30px;
  }
  .catin-login-verified-card p{
    font-size:14px;
    line-height:1.65;
  }
  .catin-login-verified-card .btn{
    width:100%;
  }
}
@media(prefers-reduced-motion:reduce){
  .catin-login-verified-pop,
  .catin-login-verified-card,
  .catin-login-verified-icon span,
  .catin-login-verified-icon i,
  .catin-login-verified-icon:before{
    animation:none!important;
    transition:none!important;
  }
}


/* v5.8.4 - Responsive Web Design menyeluruh untuk akses HP */
:root{
  --mobile-safe-x:max(12px,env(safe-area-inset-left));
  --mobile-safe-r:max(12px,env(safe-area-inset-right));
}
html,body{
  max-width:100%;
  overflow-x:hidden;
}
img,svg,video,canvas{
  max-width:100%;
}
.table-responsive,
.catin-list-table-wrap,
.report-table-wrap,
.print-doc-dialog,
.card,
.card-body,
.content,
.main-area,
.public-rekom-main,
.catin-login-public-main{
  max-width:100%;
}

/* Tablet besar sampai HP */
@media(max-width:900px){
  body{
    -webkit-text-size-adjust:100%;
  }
  .app-shell{
    display:block!important;
    min-height:100svh!important;
  }
  .main-area{
    width:100%!important;
    margin-left:0!important;
    min-width:0!important;
  }
  .content{
    width:100%!important;
    padding:14px!important;
  }
  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:35!important;
    min-height:64px!important;
    padding:10px 12px!important;
    gap:10px!important;
    background:rgba(255,255,255,.94)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
    box-shadow:0 10px 24px rgba(16,24,40,.08)!important;
  }
  .topbar h1{
    font-size:19px!important;
    line-height:1.2!important;
    overflow-wrap:anywhere!important;
  }
  .topbar .text-muted,
  .topbar-badge{
    font-size:11px!important;
  }
  .menu-toggle{
    display:grid!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    border-radius:14px!important;
  }
  .sidebar{
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    left:0!important;
    width:min(86vw,310px)!important;
    z-index:80!important;
    transform:translateX(-110%)!important;
    transition:transform .25s ease!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:calc(22px + env(safe-area-inset-bottom))!important;
  }
  .sidebar.open{
    transform:translateX(0)!important;
  }
  .sidebar-overlay.show{
    display:block!important;
    z-index:70!important;
    background:rgba(15,23,42,.48)!important;
    backdrop-filter:blur(4px)!important;
    -webkit-backdrop-filter:blur(4px)!important;
  }
  .sidebar-nav{
    gap:8px!important;
  }
  .sidebar-nav a,
  .sidebar-nav button{
    min-height:44px!important;
    border-radius:14px!important;
    font-size:13px!important;
  }
  .card{
    border-radius:22px!important;
    overflow:hidden!important;
    box-shadow:0 16px 38px rgba(20,55,72,.10)!important;
  }
  .card-header{
    padding:15px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    align-items:start!important;
  }
  .card-header h2{
    font-size:20px!important;
    line-height:1.2!important;
    overflow-wrap:anywhere!important;
  }
  .card-header .actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .card-header .actions .btn{
    width:100%!important;
    min-height:42px!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:12px!important;
    padding:9px 8px!important;
    border-radius:14px!important;
  }
  .card-body{
    padding:14px!important;
  }
  .stats-grid,
  .dashboard-stat-grid,
  .v2-stat-grid,
  .summary-grid,
  .service-choice-grid,
  .form-grid,
  .detail-grid,
  .registration-meta-grid,
  .letter-number-grid,
  .public-rekom-summary-grid,
  .public-rekom-person-grid,
  .public-rekom-parent-grid,
  .catin-login-info-grid,
  .catin-login-parent-grid,
  .public-registration-detail-grid{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .form-grid .full,
  .detail-item.full,
  .akad-detail-item.full{
    grid-column:auto!important;
  }
  .form-group label{
    font-size:12px!important;
  }
  .form-control,
  .form-select,
  .form-textarea,
  input,
  select,
  textarea{
    min-height:46px!important;
    font-size:16px!important;
    border-radius:14px!important;
  }
  textarea.form-textarea,
  textarea{
    min-height:96px!important;
  }
  .btn{
    min-height:44px!important;
    border-radius:14px!important;
    font-size:13px!important;
    white-space:normal!important;
  }
  .form-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  .form-actions .btn{
    width:100%!important;
  }
  .tabs{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    padding:8px!important;
    overflow:visible!important;
  }
  .tab-btn{
    min-width:0!important;
    min-height:52px!important;
    white-space:normal!important;
    line-height:1.25!important;
    padding:10px 8px!important;
    border-radius:15px!important;
    text-align:center!important;
    justify-content:center!important;
  }
  .table-responsive,
  .catin-list-table-wrap{
    width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:18px!important;
    border:1px solid #dce8ec!important;
    background:#fff!important;
  }
  .table{
    min-width:920px!important;
    font-size:12px!important;
  }
  .table th{
    font-size:10px!important;
    white-space:nowrap!important;
  }
  .table td{
    font-size:12px!important;
    vertical-align:top!important;
  }
  .search-bar,
  .filter-bar,
  .export-filter-form{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  .search-bar .btn,
  .filter-bar .btn,
  .export-filter-form .btn{
    width:100%!important;
  }
}

/* HP */
@media(max-width:640px){
  .content{
    padding:10px!important;
  }
  .topbar{
    min-height:58px!important;
    padding:8px 10px!important;
  }
  .topbar-heading{
    min-width:0!important;
  }
  .topbar h1{
    font-size:18px!important;
  }
  .topbar-date,
  .topbar-badge,
  .dashboard-live-clock,
  .clock-today{
    display:none!important;
  }
  .card{
    border-radius:20px!important;
  }
  .card-header,
  .card-body{
    padding:12px!important;
  }
  .card-header .actions{
    grid-template-columns:1fr!important;
  }
  .tabs{
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
    border-radius:18px!important;
  }
  .tab-btn{
    min-height:50px!important;
    font-size:12px!important;
  }
  .tab-btn.mahar-tab{
    grid-column:1/-1!important;
  }
  .person-block,
  .guardian-section,
  .akad-section,
  .rapak-binwin-section,
  .maskawin-mahar-section,
  .catin-photo-section,
  .health-document-section{
    padding:12px!important;
    border-radius:18px!important;
    margin-bottom:12px!important;
  }
  .section-title{
    gap:9px!important;
    align-items:center!important;
  }
  .section-title span{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border-radius:12px!important;
    font-size:13px!important;
  }
  .section-title h3{
    font-size:16px!important;
    line-height:1.25!important;
  }
  .detail-item{
    padding:11px!important;
    border-radius:14px!important;
  }
  .detail-item dt{
    font-size:9px!important;
  }
  .detail-item dd{
    font-size:13px!important;
    line-height:1.55!important;
    overflow-wrap:anywhere!important;
  }
  .catin-photo-upload-grid,
  .catin-photo-detail-grid,
  .public-rekom-photo-grid,
  .catin-login-couple-grid,
  .public-registration-couple-grid{
    grid-template-columns:1fr!important;
  }
  .catin-photo-upload-card,
  .catin-photo-detail-card{
    grid-template-columns:1fr!important;
    text-align:center!important;
  }
  .catin-photo-preview,
  .catin-photo-detail-card>img,
  .catin-photo-detail-placeholder{
    width:min(230px,100%)!important;
    margin:0 auto!important;
  }
  .print-choice-modal.is-open,
  .print-doc-modal.is-open{
    align-items:flex-start!important;
    padding:10px!important;
    overflow:auto!important;
  }
  .print-choice-dialog,
  .print-doc-dialog{
    width:100%!important;
    max-width:100%!important;
    max-height:none!important;
    min-height:auto!important;
    margin:8px auto calc(18px + env(safe-area-inset-bottom))!important;
    border-radius:22px!important;
    padding:16px!important;
  }
  .print-choice-heading{
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:10px!important;
    padding-right:36px!important;
  }
  .print-choice-heading h2{
    font-size:20px!important;
    line-height:1.2!important;
  }
  .print-choice-heading p{
    font-size:12px!important;
  }
  .print-doc-stepbar{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
  .print-doc-stepbar i{
    display:none!important;
  }
  .print-doc-stepbar span{
    width:100%!important;
    min-height:36px!important;
    font-size:11px!important;
  }
  .print-doc-selector{
    padding:12px!important;
    border-radius:18px!important;
  }
  .print-record-search{
    grid-template-columns:1fr!important;
  }
  .print-selected-card{
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:9px!important;
    padding:12px!important;
  }
  .print-selected-status{
    grid-column:1/-1!important;
    width:100%!important;
    text-align:center!important;
  }
  .print-doc-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .print-doc-btn{
    min-height:88px!important;
    padding:10px 7px!important;
    border-radius:16px!important;
  }
  .print-doc-btn-icon{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    font-size:11px!important;
  }
  .print-doc-btn-copy strong{
    font-size:11px!important;
    line-height:1.2!important;
  }
  .print-doc-btn-copy small{
    display:none!important;
  }
  .print-choice-actions,
  .print-choice-actions.single-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  .print-choice-actions .btn{
    width:100%!important;
  }
}

/* Halaman publik dan login agar nyaman di HP */
@media(max-width:760px){
  .public-nav{
    position:sticky!important;
    top:0!important;
    z-index:50!important;
    height:auto!important;
    min-height:64px!important;
    padding:9px 12px!important;
    gap:10px!important;
    flex-wrap:wrap!important;
  }
  .public-brand{
    min-width:0!important;
    flex:1 1 auto!important;
    gap:10px!important;
  }
  .public-brand-logo,
  .public-brand>span:first-child{
    width:44px!important;
    height:44px!important;
    flex:0 0 44px!important;
    border-radius:13px!important;
  }
  .public-brand strong{
    font-size:13px!important;
    white-space:normal!important;
    line-height:1.15!important;
  }
  .public-brand small{
    font-size:11px!important;
    font-weight:800!important;
  }
  .public-mobile-toggle{
    display:grid!important;
    width:42px!important;
    height:42px!important;
    border-radius:14px!important;
  }
  .public-nav-actions{
    display:none!important;
    width:100%!important;
    order:3!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:10px 0 2px!important;
  }
  .public-nav.menu-open .public-nav-actions{
    display:grid!important;
  }
  .public-nav-actions a,
  .public-nav-actions button,
  .public-nav-actions>span{
    width:100%!important;
    min-height:42px!important;
    justify-content:center!important;
    text-align:center!important;
    border-radius:14px!important;
  }
  .public-dashboard-main,
  .catin-login-public-main,
  .public-rekom-main{
    width:min(100% - 20px,1220px)!important;
    padding:18px 0 30px!important;
  }
  .public-hero,
  .public-section,
  .public-rekom-result,
  .catin-login-result,
  .catin-staff-login-card,
  .public-rekom-login-card{
    border-radius:24px!important;
    padding:18px!important;
  }
  .public-hero{
    grid-template-columns:1fr!important;
  }
  .public-hero h1,
  .public-rekom-result-head h2,
  .catin-login-result-head h2{
    font-size:24px!important;
    line-height:1.18!important;
    overflow-wrap:anywhere!important;
  }
  .public-rekom-result-head,
  .catin-login-result-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    align-items:start!important;
  }
  .public-rekom-result-head a,
  .catin-login-result-head a{
    width:100%!important;
    text-align:center!important;
  }
  .public-rekom-summary-grid,
  .public-rekom-photo-grid,
  .public-rekom-person-grid,
  .public-rekom-parent-grid,
  .catin-login-info-grid,
  .catin-login-parent-grid,
  .public-registration-couple-grid{
    grid-template-columns:1fr!important;
  }
  .public-rekom-section,
  .catin-login-parents-section{
    padding:14px!important;
    border-radius:21px!important;
  }
  .public-rekom-photo-grid-top article{
    grid-template-columns:96px minmax(0,1fr)!important;
  }
  .public-rekom-photo-grid-top .public-rekom-photo{
    width:96px!important;
  }
  .public-rekom-person-card>header,
  .public-rekom-parent-card>header,
  .catin-login-parent-card header{
    grid-template-columns:42px minmax(0,1fr)!important;
  }
  .public-rekom-detail-grid div,
  .public-rekom-parent-card dl div,
  .catin-login-parent-card dl div{
    grid-template-columns:1fr!important;
    gap:2px!important;
  }
  .public-footer{
    flex-direction:column!important;
    gap:5px!important;
    text-align:center!important;
    padding:18px 12px!important;
  }
}

/* HP kecil */
@media(max-width:420px){
  .content{
    padding:8px!important;
  }
  .topbar h1{
    font-size:16px!important;
  }
  .card-header h2{
    font-size:18px!important;
  }
  .tabs{
    grid-template-columns:1fr!important;
  }
  .tab-btn{
    min-height:46px!important;
  }
  .print-doc-grid{
    grid-template-columns:1fr!important;
  }
  .public-brand strong{
    font-size:12px!important;
  }
  .public-brand small{
    font-size:10.5px!important;
  }
  .catin-staff-login-card,
  .public-rekom-login-card{
    padding:20px 14px!important;
  }
  .brand-mark,
  .brand-mark--logo{
    width:72px!important;
    height:72px!important;
  }
  .catin-staff-login-card h1,
  .public-rekom-login-card h1{
    font-size:24px!important;
    line-height:1.15!important;
  }
}

/* Mode cetak tetap bersih */
@media print{
  .public-mobile-toggle,
  .menu-toggle,
  .scroll-top-fab,
  .sidebar-overlay{
    display:none!important;
  }
}

/* v5.8.5 - Perbaikan scroll popup Modul Cetak saat dibuka melalui HP */
@media(max-width:760px){
  body.print-module-open{
    position:static!important;
    height:auto!important;
    min-height:100svh!important;
    overflow:hidden!important;
    touch-action:pan-y!important;
  }
  .print-doc-modal.is-open,
  .print-choice-modal.print-doc-modal.is-open{
    position:fixed!important;
    inset:0!important;
    display:block!important;
    width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:10px 10px calc(86px + env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    align-items:initial!important;
    justify-content:initial!important;
  }
  .print-doc-modal.is-open .print-choice-backdrop,
  .print-choice-modal.print-doc-modal.is-open .print-choice-backdrop{
    position:fixed!important;
    inset:0!important;
    height:100dvh!important;
  }
  .print-doc-modal.is-open .print-doc-dialog,
  .print-choice-modal.print-doc-modal.is-open .print-doc-dialog{
    position:relative!important;
    width:100%!important;
    max-width:560px!important;
    height:auto!important;
    min-height:auto!important;
    max-height:none!important;
    margin:0 auto calc(92px + env(safe-area-inset-bottom))!important;
    overflow:visible!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .print-doc-modal.is-open .print-doc-grid,
  .print-choice-modal.print-doc-modal.is-open .print-doc-grid{
    padding-bottom:8px!important;
  }
  .print-doc-modal.is-open .print-choice-actions.single-row,
  .print-choice-modal.print-doc-modal.is-open .print-choice-actions.single-row{
    margin-bottom:calc(20px + env(safe-area-inset-bottom))!important;
  }
}
@media(max-width:420px){
  .print-doc-modal.is-open,
  .print-choice-modal.print-doc-modal.is-open{
    padding:8px 8px calc(96px + env(safe-area-inset-bottom))!important;
  }
  .print-doc-modal.is-open .print-doc-dialog,
  .print-choice-modal.print-doc-modal.is-open .print-doc-dialog{
    max-width:100%!important;
    margin-bottom:calc(105px + env(safe-area-inset-bottom))!important;
  }
}


/* v5.8.6 - Tampilan halaman publik HP lebih jelas, hidup, presisi, dan center */
@media(max-width:760px){
  .public-dashboard-body{
    background:
      radial-gradient(circle at 5% 0%,rgba(20,184,166,.18),transparent 28%),
      radial-gradient(circle at 100% 14%,rgba(37,99,235,.14),transparent 30%),
      linear-gradient(180deg,#eefcf8 0%,#f7fbff 55%,#eef7ff 100%)!important;
  }
  .public-nav{
    margin:0!important;
    padding:10px 10px!important;
    border-radius:0 0 20px 20px!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 12px 30px rgba(15,60,80,.12)!important;
    border-bottom:1px solid rgba(188,222,224,.9)!important;
  }
  .public-brand{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    flex:1 1 auto!important;
    min-width:0!important;
  }
  .public-brand-logo,
  .public-brand>span:first-child{
    width:48px!important;
    height:48px!important;
    flex:0 0 48px!important;
    border-radius:15px!important;
    box-shadow:0 10px 22px rgba(8,125,121,.13)!important;
  }
  .public-brand div{
    min-width:0!important;
    display:grid!important;
    gap:2px!important;
  }
  .public-brand strong{
    font-size:14px!important;
    line-height:1.12!important;
    letter-spacing:-.02em!important;
    color:#172033!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .public-brand small{
    font-size:11.5px!important;
    line-height:1.15!important;
    font-weight:800!important;
    color:#51677b!important;
  }
  .public-mobile-toggle{
    position:relative!important;
    display:grid!important;
    place-items:center!important;
    width:48px!important;
    height:48px!important;
    flex:0 0 48px!important;
    border-radius:17px!important;
    background:linear-gradient(145deg,#ffffff,#f4fbff)!important;
    border:1px solid #cfe1e7!important;
    box-shadow:0 12px 26px rgba(18,55,72,.12)!important;
    gap:0!important;
  }
  .public-mobile-toggle span{
    position:absolute!important;
    left:14px!important;
    width:20px!important;
    height:2.5px!important;
    border-radius:999px!important;
    background:#17364c!important;
    transition:.22s ease!important;
  }
  .public-mobile-toggle span:nth-child(1){top:16px!important}
  .public-mobile-toggle span:nth-child(2){top:23px!important}
  .public-mobile-toggle span:nth-child(3){top:30px!important}
  .public-nav.menu-open .public-mobile-toggle span:nth-child(1){
    top:23px!important;
    transform:rotate(45deg)!important;
  }
  .public-nav.menu-open .public-mobile-toggle span:nth-child(2){
    opacity:0!important;
    transform:scaleX(.2)!important;
  }
  .public-nav.menu-open .public-mobile-toggle span:nth-child(3){
    top:23px!important;
    transform:rotate(-45deg)!important;
  }
  .public-nav-actions{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:calc(100% + 10px)!important;
    transform:translateX(-50%)!important;
    width:min(94vw,390px)!important;
    padding:12px!important;
    border-radius:24px!important;
    display:none!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    background:
      radial-gradient(circle at 16% 0%,rgba(20,184,166,.15),transparent 34%),
      linear-gradient(145deg,rgba(255,255,255,.98),rgba(243,252,250,.98))!important;
    border:1px solid #cae8e4!important;
    box-shadow:0 26px 58px rgba(10,46,64,.22)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    z-index:80!important;
  }
  .public-nav.menu-open .public-nav-actions{
    display:grid!important;
    animation:mobilePublicMenuDrop .22s ease-out both!important;
  }
  .public-nav-actions>span#publicClock{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-height:42px!important;
    border-radius:16px!important;
    font-size:12px!important;
    font-weight:900!important;
    color:#08776c!important;
    background:linear-gradient(135deg,#e7fbf6,#f5fffc)!important;
    border:1px solid #bbece2!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;
  }
  .public-nav-actions .public-nav-logo{
    display:none!important;
  }
  .public-nav-actions a,
  .public-nav-actions button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-height:46px!important;
    padding:11px 12px!important;
    border-radius:16px!important;
    text-align:center!important;
    font-size:12px!important;
    font-weight:900!important;
    letter-spacing:-.01em!important;
    color:#ffffff!important;
    background:linear-gradient(135deg,#13b99b,#087d79 62%,#1479c7)!important;
    border:1px solid rgba(255,255,255,.28)!important;
    box-shadow:0 10px 20px rgba(8,125,121,.15)!important;
  }
  .public-nav-actions a:nth-of-type(1){
    background:linear-gradient(135deg,#7c3aed,#2563eb)!important;
  }
  .public-nav-actions a:nth-of-type(4){
    background:linear-gradient(135deg,#13b99b,#087d79)!important;
  }
  .public-nav-actions a:hover,
  .public-nav-actions button:hover{
    transform:translateY(-1px)!important;
    filter:brightness(1.04)!important;
  }
  @keyframes mobilePublicMenuDrop{
    from{opacity:0;transform:translateX(-50%) translateY(-8px) scale(.98)}
    to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  }

  .public-dashboard{
    width:min(100% - 16px,430px)!important;
    margin:10px auto 28px!important;
  }
  .public-hero{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    padding:16px!important;
    border-radius:26px!important;
    text-align:center!important;
    background:
      radial-gradient(circle at 90% 4%,rgba(37,99,235,.13),transparent 30%),
      radial-gradient(circle at 5% 7%,rgba(20,184,166,.16),transparent 28%),
      linear-gradient(145deg,#ffffff,#f1fffc)!important;
    border:1px solid #cbe8e5!important;
    box-shadow:0 18px 44px rgba(12,54,72,.12)!important;
    overflow:hidden!important;
  }
  .public-kicker{
    justify-content:center!important;
    text-align:center!important;
    font-size:9.5px!important;
    letter-spacing:.14em!important;
    color:#0b7c72!important;
  }
  .public-hero h1{
    font-size:25px!important;
    line-height:1.14!important;
    margin:8px auto 8px!important;
    max-width:330px!important;
    text-align:center!important;
  }
  .public-hero p{
    max-width:330px!important;
    margin:0 auto!important;
    text-align:center!important;
    font-size:13px!important;
    line-height:1.6!important;
  }
  .public-hero-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    width:100%!important;
    margin:16px auto 0!important;
  }
  .public-hero-actions a{
    width:100%!important;
    min-height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:17px!important;
    padding:12px!important;
    text-align:center!important;
    font-size:12px!important;
    font-weight:900!important;
    box-shadow:0 10px 22px rgba(8,125,121,.13)!important;
  }
  .public-hero-actions a.outline{
    color:#08776c!important;
    background:rgba(255,255,255,.86)!important;
    border:1px solid #bfe7e0!important;
  }
  .public-hero-summary{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin-top:2px!important;
  }
  .public-hero-summary article{
    min-height:118px!important;
    padding:18px!important;
    border-radius:22px!important;
    text-align:left!important;
    display:grid!important;
    align-content:center!important;
    background:linear-gradient(145deg,#ffffff,#f4fffb)!important;
    border:1px solid #d8eee9!important;
    box-shadow:0 14px 30px rgba(20,55,72,.08)!important;
  }
  .public-hero-summary article:nth-child(2){
    background:linear-gradient(145deg,#ffffff,#f3f8ff)!important;
    border-color:#d7e4ff!important;
  }
  .public-hero-summary span{
    font-size:11px!important;
    font-weight:900!important;
    color:#607286!important;
  }
  .public-hero-summary strong{
    font-size:32px!important;
    line-height:1!important;
    margin:8px 0!important;
  }
  .public-hero-summary small{
    font-size:11px!important;
    color:#738498!important;
  }

  .public-section,
  .public-requirements-promo,
  .public-registration-search,
  .public-upcoming-akad-v3{
    width:100%!important;
    border-radius:24px!important;
    padding:16px!important;
    margin:16px auto!important;
    text-align:center!important;
    background:linear-gradient(145deg,#ffffff,#f7fffd)!important;
    border:1px solid #cfe8e6!important;
    box-shadow:0 16px 38px rgba(15,55,72,.10)!important;
  }
  .public-section-title,
  .public-requirements-promo-copy,
  .public-registration-search-copy{
    text-align:center!important;
  }
  .public-section h2,
  .public-requirements-promo h2,
  .public-registration-search h2{
    font-size:22px!important;
    line-height:1.2!important;
    text-align:center!important;
  }
  .public-requirements-button,
  .public-registration-search-form button,
  .public-rapak-check-form button{
    width:100%!important;
    min-height:46px!important;
    border-radius:16px!important;
    justify-content:center!important;
    text-align:center!important;
  }
  .public-registration-search-form,
  .public-rapak-check{
    padding:14px!important;
    border-radius:20px!important;
    text-align:left!important;
  }
  .public-registration-search-input,
  .public-rapak-check-form>div{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .public-registration-search-input>span{
    display:none!important;
  }
  .public-registration-search-input input,
  .public-rapak-check-form input{
    text-align:center!important;
    min-height:48px!important;
    font-size:16px!important;
    border-radius:16px!important;
  }
}

/* HP sangat kecil: semua elemen dipaksa center dan tidak menabrak tepi */
@media(max-width:420px){
  .public-dashboard{
    width:calc(100% - 12px)!important;
  }
  .public-nav{
    padding:8px 8px!important;
  }
  .public-brand-logo,
  .public-brand>span:first-child{
    width:44px!important;
    height:44px!important;
    flex-basis:44px!important;
  }
  .public-brand strong{
    font-size:12.8px!important;
  }
  .public-brand small{
    font-size:10.8px!important;
  }
  .public-mobile-toggle{
    width:46px!important;
    height:46px!important;
    flex-basis:46px!important;
  }
  .public-hero,
  .public-section{
    padding:14px!important;
    border-radius:22px!important;
  }
  .public-hero h1{
    font-size:23px!important;
  }
  .public-nav-actions{
    width:calc(100vw - 18px)!important;
    border-radius:22px!important;
  }
}


/* v5.8.8 - Tengah untuk status dan aksi dokumen kesehatan */
.document-status-cell,
.health-document-cell,
.dok-kesehatan-cell,
.table td .document-status-wrap,
.table td .health-doc-actions{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  text-align:center!important;
}
.document-status-cell .btn,
.health-document-cell .btn,
.dok-kesehatan-cell .btn,
.table td .document-status-wrap .btn,
.table td .health-doc-actions .btn{
  margin-left:auto!important;
  margin-right:auto!important;
}
.table td .badge-upload-status,
.table td .upload-status-badge,
.table td .status-upload{
  margin-left:auto!important;
  margin-right:auto!important;
}
@media (max-width: 900px){
  .document-status-cell,
  .health-document-cell,
  .dok-kesehatan-cell,
  .table td .document-status-wrap,
  .table td .health-doc-actions{
    width:100%!important;
  }
}


/* v5.8.9 - indikator penulisan otomatis */
form[data-catin-save-form] [data-auto-case="upper"]{
  text-transform:uppercase;
}


/* v5.9.0 - Show filter dan pagination tabel publik */
.public-data-toolbar{
  align-items:stretch;
}
.public-data-toolbar-compact{
  margin-top:14px;
  grid-template-columns:minmax(180px,1fr) auto;
}
.public-data-show-filter{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:86px;
  padding:15px 17px;
  border-radius:22px;
  border:1px solid #d7e8ed;
  background:linear-gradient(145deg,#ffffff,#f4fffc);
  box-shadow:0 14px 30px rgba(20,55,72,.07);
  color:#17243b;
  font-weight:900;
}
.public-data-show-filter span{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#0b8f7d;
}
.public-data-show-filter select{
  min-width:118px;
  height:44px;
  padding:0 36px 0 13px;
  border-radius:14px;
  border:1px solid #bfe3df;
  background:#fff;
  color:#17364c;
  font-weight:900;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.public-data-show-filter select:focus{
  border-color:#0fb39c;
  box-shadow:0 0 0 4px rgba(20,184,166,.14);
}
.public-table-pagination:not([hidden]){
  display:flex!important;
}
.public-pagination-controls button.active{
  transform:translateY(-1px);
}
@media(max-width:760px){
  .public-data-toolbar,
  .public-data-toolbar-compact{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .public-data-show-filter{
    min-height:64px;
    justify-content:space-between;
    width:100%;
    padding:12px 14px;
    border-radius:18px;
  }
  .public-data-show-filter select{
    min-width:132px;
    font-size:16px;
  }
  .public-table-pagination{
    align-items:center!important;
    text-align:center;
  }
  .public-pagination-summary{
    width:100%;
    text-align:center;
  }
  .public-pagination-controls{
    justify-content:center!important;
  }
}

/* v5.9.1 - pagination dan filter Show pada Data Daftar Nikah/Rekomendasi admin */
.catin-list-filter-bar{
  display:grid!important;
  grid-template-columns:minmax(220px,1fr) 190px auto auto!important;
  gap:10px!important;
  align-items:end!important;
}
.catin-show-filter{
  display:grid;
  gap:5px;
  min-width:0;
}
.catin-show-filter span{
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  color:#0b7c72;
  text-transform:uppercase;
}
.catin-show-filter select{
  cursor:pointer;
  font-weight:800;
}
.admin-list-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
  padding:14px;
  border-radius:20px;
  background:linear-gradient(145deg,#f8fffd,#f5f9ff);
  border:1px solid #d7e9ed;
  box-shadow:0 12px 26px rgba(20,55,72,.06);
}
.admin-page-btn,
.admin-page-dots,
.admin-page-info{
  min-width:38px;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:13px;
  font-size:13px;
  font-weight:900;
  text-align:center;
}
.admin-page-btn{
  color:#17364c;
  background:#fff;
  border:1px solid #d8e7ec;
  box-shadow:0 7px 14px rgba(15,55,72,.045);
  transition:.18s ease;
}
.admin-page-btn:hover{
  transform:translateY(-1px);
  color:#08776c;
  border-color:#bfe7e0;
  box-shadow:0 10px 20px rgba(8,125,121,.10);
}
.admin-page-btn.active{
  color:#fff;
  background:linear-gradient(135deg,#13b99b,#087d79 70%,#1479c7);
  border-color:transparent;
  box-shadow:0 12px 24px rgba(8,125,121,.20);
}
.admin-page-prev,.admin-page-next{
  padding-left:14px;
  padding-right:14px;
}
.admin-page-dots{
  color:#7b8b9c;
  background:transparent;
  min-width:24px;
}
.admin-page-info{
  color:#607386;
  background:#eef7f8;
  border:1px solid #d6e8ec;
  font-size:11px;
}
@media(max-width:900px){
  .catin-list-filter-bar{
    grid-template-columns:1fr!important;
  }
  .catin-show-filter{
    width:100%;
  }
  .admin-list-pagination{
    justify-content:center;
    padding:12px;
    gap:7px;
  }
  .admin-page-btn,
  .admin-page-dots,
  .admin-page-info{
    min-width:36px;
    min-height:36px;
    font-size:12px;
    padding:7px 10px;
  }
  .admin-page-info{
    width:100%;
    margin-top:2px;
  }
}
@media(max-width:420px){
  .admin-page-prev,.admin-page-next{
    width:100%;
  }
}


/* v5.9.2 - Show filter publik dibuat sejajar dengan kartu statistik */
.public-data-toolbar{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
}
.public-data-toolbar .public-data-pill,
.public-data-toolbar .public-data-show-filter{
  width:100%!important;
  min-width:0!important;
  min-height:104px!important;
  margin:0!important;
}
.public-data-toolbar .public-data-show-filter{
  align-self:stretch!important;
  flex-direction:row!important;
  justify-content:center!important;
  text-align:center!important;
}
.public-data-toolbar .public-data-show-filter select{
  max-width:150px!important;
}
.public-data-toolbar-compact{
  grid-template-columns:minmax(0,1fr) minmax(180px,260px)!important;
  align-items:stretch!important;
}
.public-data-toolbar-compact .public-data-show-filter{
  min-height:78px!important;
}
@media(max-width:1200px){
  .public-data-toolbar{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:760px){
  .public-data-toolbar,
  .public-data-toolbar-compact{
    grid-template-columns:1fr!important;
  }
  .public-data-toolbar .public-data-pill,
  .public-data-toolbar .public-data-show-filter{
    min-height:76px!important;
  }
  .public-data-toolbar .public-data-show-filter{
    justify-content:space-between!important;
  }
}

/* v5.9.3 - Filter Show pada Data Daftar Nikah/Rekomendasi dibuat sejajar */
.catin-list-filter-bar{
  display:grid!important;
  grid-template-columns:minmax(280px,1fr) minmax(210px,240px) auto auto!important;
  align-items:center!important;
  gap:12px!important;
  padding:12px!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,#f8fffd,#f6fbff)!important;
  border:1px solid #d7eaed!important;
  box-shadow:0 12px 28px rgba(20,55,72,.055)!important;
}
.catin-list-filter-bar>input.form-control{
  min-height:52px!important;
  margin:0!important;
  border-radius:16px!important;
}
.catin-list-filter-bar>.btn{
  min-height:52px!important;
  margin:0!important;
  padding-left:22px!important;
  padding-right:22px!important;
  border-radius:16px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
}
.catin-list-filter-bar .catin-show-filter{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  height:52px!important;
  min-height:52px!important;
  margin:0!important;
  padding:7px 10px 7px 14px!important;
  border-radius:16px!important;
  background:#ffffff!important;
  border:1px solid #cfe4e8!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 8px 18px rgba(20,55,72,.04)!important;
}
.catin-list-filter-bar .catin-show-filter span{
  flex:0 0 auto!important;
  margin:0!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.13em!important;
  color:#08776c!important;
  text-transform:uppercase!important;
}
.catin-list-filter-bar .catin-show-filter select.form-control{
  flex:1 1 auto!important;
  min-width:112px!important;
  width:100%!important;
  height:38px!important;
  min-height:38px!important;
  margin:0!important;
  padding:7px 34px 7px 12px!important;
  border:0!important;
  border-left:1px solid #e1edf0!important;
  border-radius:0!important;
  background-color:transparent!important;
  box-shadow:none!important;
  font-size:15px!important;
  font-weight:900!important;
  color:#172033!important;
  text-align:center!important;
}
.catin-list-filter-bar .catin-show-filter select.form-control:focus{
  outline:0!important;
  box-shadow:none!important;
}
@media(max-width:900px){
  .catin-list-filter-bar{
    grid-template-columns:1fr 1fr!important;
    align-items:stretch!important;
    padding:11px!important;
  }
  .catin-list-filter-bar>input.form-control{
    grid-column:1/-1!important;
  }
  .catin-list-filter-bar .catin-show-filter{
    width:100%!important;
  }
  .catin-list-filter-bar>.btn{
    width:100%!important;
  }
}
@media(max-width:560px){
  .catin-list-filter-bar{
    grid-template-columns:1fr!important;
    gap:9px!important;
    padding:10px!important;
    border-radius:20px!important;
  }
  .catin-list-filter-bar .catin-show-filter{
    justify-content:space-between!important;
    height:50px!important;
    min-height:50px!important;
  }
  .catin-list-filter-bar .catin-show-filter select.form-control{
    max-width:170px!important;
    text-align:center!important;
  }
}