/* === V29 Responsive + link halaman per menu === */
:root{
  --safe-pad: clamp(14px, 3vw, 26px);
}
html{scroll-behavior:smooth;}
body{overflow-x:hidden;}
img,svg,video,canvas{max-width:100%;}
button,a,input,select,textarea{font:inherit;}

/* Landing header/menu: tetap rapi di desktop, tablet, dan HP */
.haji-header{z-index:70;}
.haji-nav a{white-space:nowrap;text-decoration:none;}
@media(max-width:1080px){
  .haji-header{grid-template-columns:1fr auto;align-items:center;gap:10px 14px;}
  .haji-nav{grid-column:1/-1;order:3;display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:6px 2px 2px;justify-content:flex-start;}
  .haji-nav a{flex:0 0 auto;}
}
@media(max-width:620px){
  .haji-header{position:sticky;top:0;padding:12px 14px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);}
  .haji-brand strong{max-width:54vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .haji-login-btn{min-width:76px;height:40px;padding:0 14px;border-radius:999px;}
  .haji-nav{gap:10px;}
  .haji-nav a{height:34px;border:1px solid #e4eee9;border-radius:999px;padding:0 13px;display:inline-flex;align-items:center;background:#fff;}
  .haji-nav a.active{background:#087a5f;color:#fff;}
  .haji-nav a.active:after{display:none;}
  .public-package-list{grid-template-columns:1fr!important;}
  .package-detail-hero{grid-template-columns:1fr!important;padding-right:0!important;}
  .package-detail-hero img{width:100%!important;height:170px!important;}
  .package-detail-price{font-size:22px!important;}
  .package-detail-grid{grid-template-columns:1fr!important;}
}

/* Halaman konten publik terpisah */
.page-hero{padding:54px clamp(18px,5vw,84px) 34px;background:linear-gradient(135deg,#f8fffc 0%,#edf8f4 48%,#fff 100%);border-bottom:1px solid #e2eee9;}
.page-hero .crumb{display:inline-flex;gap:8px;align-items:center;border:1px solid #d7ebe4;border-radius:999px;background:#fff;padding:8px 13px;color:#087a5f;font-size:13px;font-weight:900;margin-bottom:16px;}
.page-hero h1{max-width:900px;margin:0;font-size:clamp(32px,5vw,56px);line-height:1.05;letter-spacing:-.04em;color:#071821;}
.page-hero p{max-width:780px;margin:14px 0 0;color:#5f6d7c;line-height:1.75;font-size:17px;}
.page-content{padding:34px clamp(18px,5vw,84px) 56px;background:#fff;}
.page-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1180px;margin:0 auto;}
.page-card{border:1px solid #e2eee9;border-radius:18px;background:#fff;box-shadow:0 16px 42px rgba(6,43,60,.06);padding:20px;min-height:150px;}
.page-card b{display:block;color:#10202a;font-size:18px;margin-bottom:9px;}
.page-card p{margin:0;color:#607081;line-height:1.62;}
.page-card .icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#eaf6f2;color:#087a5f;margin-bottom:12px;font-size:22px;}
.page-wide{max-width:980px;margin:0 auto;border:1px solid #e2eee9;border-radius:20px;background:#fbfefd;padding:24px;line-height:1.75;color:#526171;}
@media(max-width:900px){.page-grid{grid-template-columns:1fr 1fr;}.page-content{padding-top:24px;}}
@media(max-width:560px){.page-grid{grid-template-columns:1fr;}.page-hero{padding-top:34px}.page-wide{padding:18px}.page-card{min-height:auto;}}

/* Admin dashboard: sidebar + konten tidak terlalu jauh, tabel aman di tablet/HP */
.admin-v18-body .drawer-nav a,
.admin-v18-body .drawer-nav button{width:100%;text-decoration:none;}
.admin-v18-body .drawer-nav a{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;min-height:38px!important;padding:9px 10px!important;border-radius:10px!important;color:#2d2350!important;background:transparent!important;border:0!important;font-weight:800!important;}
.admin-v18-body .drawer-nav a span{display:flex;align-items:center;gap:9px;min-width:0;}
.admin-v18-body .drawer-nav a i{font-style:normal;width:20px;text-align:center;flex:0 0 auto;}
.admin-v18-body .drawer-nav a b{font-size:11px;border:1px solid #e5dcf5;background:#fff;border-radius:999px;min-width:24px;text-align:center;padding:2px 6px;color:#5b3bd0;}
.admin-v18-body .drawer-nav a.active{background:linear-gradient(135deg,#f2edff,#fff5ee)!important;color:#4f27c7!important;box-shadow:inset 0 0 0 1px #e3d7ff!important;}
@media(min-width:900px){
  body.app-body.admin-v18-body .mobile-shell,
  body.admin-v18-body .mobile-shell{grid-template-columns:286px minmax(0,1fr)!important;}
  body.app-body.admin-v18-body .drawer,
  body.admin-v18-body .drawer{width:286px!important;}
  body.app-body.admin-v18-body .drawer-card,
  body.admin-v18-body .drawer-card{width:268px!important;}
  body.app-body.admin-v18-body .screen-content,
  body.admin-v18-body .screen-content{padding:96px 20px 38px 18px!important;max-width:1260px!important;}
}
@media(max-width:899px){
  .admin-v18-body .topbar{position:sticky!important;top:0!important;left:0!important;right:0!important;width:100%!important;border-radius:0!important;}
  .admin-v18-body .screen-content{padding:16px!important;}
  .admin-v18-body .drawer{position:fixed!important;inset:0!important;background:rgba(18,11,42,.35)!important;pointer-events:none!important;opacity:0!important;transition:.18s ease!important;z-index:90!important;}
  .admin-v18-body .drawer.open{pointer-events:auto!important;opacity:1!important;}
  .admin-v18-body .drawer-card{width:min(86vw,310px)!important;height:100dvh!important;border-radius:0 18px 18px 0!important;box-shadow:24px 0 70px rgba(18,11,42,.25)!important;transform:translateX(-103%);transition:.2s ease!important;}
  .admin-v18-body .drawer.open .drawer-card{transform:translateX(0);}
  .admin-v18-body .v18-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .admin-v18-body .v18-tools{display:grid!important;grid-template-columns:1fr;gap:8px!important;}
  .admin-v18-body .v18-tools .btn,.admin-v18-body .v18-tools button{width:100%;}
  .admin-v18-body .v18-table{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;}
  .admin-v18-body .v18-table table{min-width:760px!important;}
  .admin-v18-body .row-actions{min-width:170px!important;}
}
@media(max-width:560px){
  .admin-v18-body .screen-content{padding:12px!important;}
  .admin-v18-body .v18-stats{grid-template-columns:1fr!important;}
  .admin-v18-body .v18-head{padding:14px!important;}
  .admin-v18-body .v18-head h1{font-size:22px!important;}
  .admin-v18-body .v18-table table{min-width:680px!important;font-size:12px!important;}
}

/* Role pages: bottom nav responsif dan link per menu tetap terasa seperti aplikasi */
.bottom-nav{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;}
.bottom-nav::-webkit-scrollbar{display:none;}
.bottom-nav a,.bottom-nav button{text-decoration:none;}
.bottom-nav a{border:0;background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;min-width:72px;padding:7px 8px;border-radius:14px;font-weight:800;font-size:11px;}
.bottom-nav a.active{background:rgba(8,122,95,.1);color:#087a5f;}
.nav-ico{font-size:18px;line-height:1;}
@media(max-width:760px){
  .mobile-shell{max-width:none!important;width:100%!important;min-height:100dvh!important;border-radius:0!important;}
  .topbar{padding-left:var(--safe-pad)!important;padding-right:var(--safe-pad)!important;}
  .screen-content{padding-left:var(--safe-pad)!important;padding-right:var(--safe-pad)!important;}
  .summary-grid,.settings-grid{grid-template-columns:1fr!important;}
  .row-card,.card{border-radius:16px!important;}
  .row-top{gap:10px!important;align-items:flex-start!important;}
  .row-top .btn,.row-top button{white-space:nowrap;}
  .table-scroll,.v18-table{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;}
  .clean-table{min-width:700px;}
}
@media(min-width:761px) and (max-width:1100px){
  .mobile-shell{max-width:none!important;width:100%!important;}
  .screen-content{padding-left:24px!important;padding-right:24px!important;}
  .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}


/* === V52 Green Tone Unification === */
:root{
  --sinu-green:#087353;
  --sinu-green-2:#0b7a5d;
  --sinu-green-3:#0f8a63;
  --sinu-green-dark:#071821;
  --sinu-green-soft:#e9f9ef;
  --sinu-green-soft-2:#f4fffb;
  --sinu-gold:#d3a54b;
  --primary:#087353;
  --primary-2:#0b7a5d;
  --accent:#087353;
}
body.app-body,
.admin-v18-body,
.mobile-shell,
.screen-content{
  background:
    radial-gradient(circle at top left, rgba(8,115,83,.12), transparent 34%),
    linear-gradient(135deg,#fbfffd 0%,#f4fffb 55%,#eaf7f1 100%) !important;
}
.eyebrow,
.topbar .eyebrow,
.v18-head .eyebrow{
  color:#087353!important;
}
.topbar,
.drawer-card,
.card,
.panel,
.modal-card,
.auth-card{
  border-color:#d8eee5!important;
}
.avatar-circle,
.btn.primary,
.big-login-btn,
.admin-btn,
.public-cta-btn:not(.soft),
.haji-login-btn,
button.primary,
.stat-card:hover,
.logout-btn:hover{
  background:linear-gradient(135deg,#087353,#0f8a63)!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(8,115,83,.18)!important;
}
.btn.soft,
.public-cta-btn.soft,
.icon-btn,
.drawer-nav a,
.bottom-nav a,
.bottom-nav button{
  border-color:#d8eee5!important;
  color:#087353!important;
}
.drawer-nav a.active,
.drawer-nav a:hover,
.bottom-nav a.active,
.bottom-nav button.active,
.bottom-nav .active{
  background:#e9f9ef!important;
  color:#087353!important;
  border-color:#bdebd7!important;
}
.chip.ok,
.badge.green,
.status-success{
  background:#e9f9ef!important;
  color:#087353!important;
  border-color:#bdebd7!important;
}
.chip.warn,
.badge.orange{
  background:#fff9e9!important;
  color:#8a5a00!important;
  border-color:#eadfce!important;
}
.chip.bad,
.badge.red{
  background:#fff0f0!important;
  color:#a3182b!important;
  border-color:#ffd0d9!important;
}
input:focus,
select:focus,
textarea:focus{
  border-color:#087353!important;
  box-shadow:0 0 0 4px rgba(8,115,83,.12)!important;
}
a{color:#087353}
.skeleton-card,
.stat-card,
.feature-card,
.page-card,
.public-package-button{
  border-color:#d8eee5!important;
}
.seat span i,
.progress span,
.progress-bar,
.v18-table .seat i{
  background:linear-gradient(90deg,#087353,#0f8a63)!important;
}
.toast.show,
.toast{
  background:#071821!important;
  color:#fff!important;
  border-color:#087353!important;
}

/* V54 jamaah certificate nav compact */
.bottom-nav{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.bottom-nav button,.bottom-nav a{font-size:10px!important;gap:2px!important;padding:6px 2px!important}
.bottom-nav .nav-ico{font-size:16px!important}