/* SIMPEL — Design 1 final visual layer */

:root{
  --d1-navy:#102746;
  --d1-blue:#0d67d5;
  --d1-bg:#f7f9fc;
  --d1-card:#ffffff;
  --d1-text:#12233f;
  --d1-muted:#66758c;
  --d1-line:#dfe6ee;
  --d1-green:#16a765;
  --d1-red:#e01919;
  --font-display:'Plus Jakarta Sans',sans-serif;
  --font-body:'Plus Jakarta Sans',sans-serif;
}

body{background:#eef2f6;color:var(--d1-text);font-family:var(--font-body);}
#app{background:var(--d1-bg);}
.content{padding-bottom:96px;}

/* HEADER — natural bamboo image, no blue tint */
.app-header{
  min-height:252px;
  padding:18px 18px 54px;
  border-radius:0 0 24px 24px;
  box-shadow:none;
  overflow:visible;
}
.header-scene{
  background-position:center 42%;
  transform:none;
  border-radius:0 0 24px 24px;
}
.header-fade{
  border-radius:0 0 24px 24px;
  background:linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.10) 45%,rgba(0,0,0,.46) 100%);
}
.header-row{align-items:flex-start;}
.brand{gap:10px;}
.logo-badge{width:42px;height:42px;}
.brand-text small{font-size:10px;color:#fff;letter-spacing:.10em;font-weight:700;}
.brand-text strong{font-size:12px;line-height:1.35;max-width:215px;color:#fff;}
.bell-btn{
  width:40px;height:40px;background:#fff;color:#1e293b;border:none;
  box-shadow:0 4px 14px rgba(0,0,0,.16);backdrop-filter:none;
}
.welcome{margin-top:20px;}
.greeting-eyebrow{font-size:10px;color:#fff;letter-spacing:.08em;font-weight:500;}
.greeting-name{font-size:25px;letter-spacing:-.035em;font-weight:800;color:#fff;}
.seal-badge{margin-top:12px;gap:7px;}
.seal-badge .ring{width:22px;height:22px;background:transparent;border:2px dashed #f1bb16;}
.seal-badge .ring i{font-size:8px;color:#f1bb16;}
.seal-badge span{font-size:10.5px;color:#fff;}
.header-tag{margin-top:9px;color:#fff;font-size:10.5px;}
.header-tag i{color:#f7b71b;font-size:11px;}
.header-search{
  margin-top:16px;margin-bottom:-80px;z-index:5;
  filter:drop-shadow(0 8px 12px rgba(30,52,75,.12));
}
.header-search input{
  height:52px;border-radius:13px;background:#fff;padding:0 54px 0 16px;
  font-size:12px;color:#516075;box-shadow:none;border:1px solid #e8edf3;
}
.header-search button{
  right:5px;top:5px;width:42px;height:42px;border-radius:10px;
  background:linear-gradient(180deg,#1675dd,#075cc0);font-size:16px;
}

#panel-beranda{padding-top:36px;}

/* EMERGENCY */
.emergency{
  margin:15px 17px 0;width:calc(100% - 34px);min-height:70px;padding:11px 14px;
  border-radius:14px;background:linear-gradient(135deg,#ea2020,#cf0e0e);
  box-shadow:0 10px 20px -16px rgba(181,0,0,.75);gap:11px;
}
.emergency-icon{width:42px;height:42px;background:#fff;color:#d71b1b;font-size:17px;}
.emergency-title{font-size:14px;font-weight:800;text-transform:uppercase;line-height:1.2;}
.emergency-desc{font-size:10.5px;color:#fff;margin-top:3px;font-weight:500;line-height:1.3;}
.emergency-cta{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;}

/* MAIN SERVICES */
.quick-wrapper{margin-top:14px;padding:0 17px;}
.quick-card{
  padding:16px 13px 14px;border:1px solid #e4eaf1;border-radius:18px;
  background:#fff;box-shadow:0 8px 18px -17px rgba(15,42,70,.45);
}
.section-head{margin-bottom:12px;}
.section-title{font-size:14px;color:var(--d1-text);font-weight:800;letter-spacing:-.025em;}
.section-link{font-size:10.5px;color:#0864cf;font-weight:700;}
.quick-grid{grid-template-columns:repeat(3,1fr);gap:9px;}
.service{
  min-height:130px;border:1px solid #e1e7ee;background:#fff;border-radius:13px;
  padding:12px 7px 10px;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;box-shadow:0 4px 10px -10px rgba(18,35,63,.38);
}
.service .icon{width:46px;height:46px;border-radius:14px;font-size:19px;margin:0 auto 8px;}
.service span{font-size:10.5px;font-weight:800;margin-top:0;line-height:1.25;color:var(--d1-text);}
.service-desc{display:block!important;font-size:9px!important;font-weight:500!important;color:var(--d1-muted)!important;line-height:1.45!important;margin-top:5px!important;max-width:92px;}
.icon.tint-blue{background:#e8f2ff;color:#0864cf;}
.icon.tint-teal{background:#e8f9ef;color:#13a653;}
.icon.tint-orange{background:#fff1dc;color:#ee7b00;}
.icon.tint-maroon{background:#ffe9ea;color:#d6202f;}
.icon.tint-purple{background:#f1eaff;color:#7442e8;}
.icon.tint-green{background:#e5f8f2;color:#06a982;}

.section{padding:18px 17px 0;}

/* DIGITAL ASSISTANT */
.ai-section .section-head{display:none;}
.ai-card{
  position:relative;border:1px solid #cde0f8;border-radius:16px;padding:16px 58px 16px 76px;
  min-height:112px;color:var(--d1-text);background:linear-gradient(120deg,#eef7ff,#f7fbff);
  box-shadow:0 6px 18px -18px rgba(22,89,162,.45);align-items:flex-start;
}
.ai-avatar{
  position:absolute;left:15px;top:21px;width:50px;height:50px;border-radius:50%;
  color:#0b75d7;background:#dceefe;border:1px solid #c4ddf5;font-size:23px;
}
.ai-text small{font-size:10px;color:#0967cf;font-weight:800;letter-spacing:0;text-transform:none;}
.ai-text strong{font-size:13.5px;color:var(--d1-text);margin-top:5px;font-weight:800;}
.ai-text p{font-size:10.5px;color:#263951;line-height:1.45;margin-top:4px;}
.ai-arrow{
  position:absolute;right:16px;top:38px;width:42px;height:42px;border-radius:50%;
  background:#23c763;color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 12px -8px rgba(19,162,79,.7);
}
.ai-arrow i:before{content:'\f232';font-family:'Font Awesome 6 Brands';}

/* BUDGET SUMMARY */
.budget-section{padding-top:18px;}
.budget-section .section-head{margin-bottom:8px;align-items:center;}
.budget-section .section-title{font-size:13.5px;}
.budget-section .section-link{display:block;}
.budget-subtitle{font-size:10px;color:var(--d1-muted);margin-top:-3px;margin-bottom:9px;}
.budget-card{border:1px solid #e2e8ef;border-radius:14px;box-shadow:none;padding:12px 13px;margin-top:0;background:#fff;}
.budget-label{font-size:8.5px;}
.budget-total{font-size:15px;color:var(--d1-text);font-weight:800;}
.budget-tag{font-size:9px;padding:5px 8px;}
.budget-bars{margin-top:10px;}
.bud-track{height:6px;background:#edf2f5;}
.bud-fill{background:linear-gradient(90deg,#0c6bd3,#3f91c8);}
.budget-foot{margin-top:9px;padding-top:8px;}
.budget-foot span{font-size:8.8px;max-width:70%;}
.budget-foot a{font-size:9px;}

/* Remaining lists */
.list-card{overflow:hidden;border:1px solid var(--d1-line);border-radius:16px;background:#fff;}
#info-list .list-item{border:0;border-bottom:1px solid var(--d1-line);border-radius:0;margin:0;box-shadow:none;padding:13px 14px;}
#info-list .list-item:last-child{border-bottom:0;}
.list-item{border-color:var(--d1-line);box-shadow:0 7px 18px -20px rgba(12,45,70,.55);}

/* FIVE-ITEM BOTTOM NAV */
.bottom-nav{
  background:rgba(255,255,255,.98);border-top:1px solid #e3e8ef;
  box-shadow:0 -8px 24px -22px rgba(10,42,66,.65);padding:9px 4px calc(12px + env(safe-area-inset-bottom));
  backdrop-filter:blur(14px);
}
.nav-item{gap:4px;color:#7c8999;min-width:0;}
.nav-item i{font-size:17px;}
.nav-item span{font-size:8.8px;font-weight:600;white-space:nowrap;}
.nav-item.active{color:#0d67d5;}
.nav-item.active i{transform:translateY(-1px);}

/* Sheets/forms */
.sheet{border-radius:24px 24px 0 0;padding-left:20px;padding-right:20px;}
.sheet-title{font-size:16px;color:var(--d1-text);}
.sheet-desc{color:var(--d1-muted);}
.sheet-meta,.status-card,.location-box{background:#f6f8fa;border-color:var(--d1-line);}
.form-field input,.form-field select,.form-field textarea,.ticket-input-row input{border-color:#dfe7ed;border-radius:11px;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus,.ticket-input-row input:focus{border-color:#4c8db9;box-shadow:0 0 0 3px rgba(54,128,178,.09);}
.sheet-btn{border-radius:12px;min-height:46px;}
.sheet-btn.primary,.ticket-input-row button{background:linear-gradient(135deg,#126bc7,#0d365f);}
.cat-item,.choice-btn{background:#f7f9fb;border-color:var(--d1-line);}
.footer-note{padding-top:22px;color:#8a96a0;}

@media (min-width:481px){
  #app{border-radius:28px;box-shadow:0 30px 80px -30px rgba(17,42,61,.35);}
  .app-header,.header-scene,.header-fade{border-radius:0 0 24px 24px;}
}