*{margin:0;padding:0;box-sizing:border-box}
:root{--primary:#7f1d1d;--primary-light:#991b1b;--accent:#e8b931;--bg:#f8fafc;--card:#fff;--text:#1e293b;--text-light:#64748b;--radius:14px;--shadow:0 4px 24px rgba(0,0,0,.08)}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;padding-bottom:80px;-webkit-font-smoothing:antialiased}

/* HEADER */
.app-header{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);color:#fff;padding:16px 20px;position:sticky;top:0;z-index:100;box-shadow:0 2px 16px rgba(0,0,0,.15)}
.header-inner{display:flex;align-items:center;max-width:600px;margin:auto;gap:12px}
.header-logo{width:48px;height:48px;object-fit:contain}
.header-text h1{font-size:1.1rem;font-weight:700;line-height:1.2}
.header-text p{font-size:.75rem;opacity:.85}

/* TAB NAV */
.tab-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;box-shadow:0 -2px 16px rgba(0,0,0,.1);z-index:100;padding:6px 0;padding-bottom:env(safe-area-inset-bottom,6px)}
.tab-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:none;background:none;color:var(--text-light);font-size:.65rem;padding:6px 0;cursor:pointer;transition:.2s}
.tab-btn i{font-size:1.2rem}
.tab-btn.active{color:var(--primary);font-weight:600}
.tab-btn.active i{transform:scale(1.15)}

/* TAB CONTENT */
.tab-content{display:none;max-width:600px;margin:0 auto;padding:16px}
.tab-content.active{display:block;animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* HERO */
.hero-card{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border-radius:var(--radius);padding:28px 20px;text-align:center;margin-bottom:20px;box-shadow:var(--shadow)}
.hero-card h2{font-size:1.3rem;margin-bottom:6px}
.hero-card p{font-size:.8rem;opacity:.9;line-height:1.5}

/* SECTION TITLE */
.section-title{font-size:.9rem;font-weight:700;color:var(--primary);margin-bottom:12px;padding-left:4px;display:flex;align-items:center;gap:8px}

/* SERVICE GRID */
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.service-card{background:var(--card);border-radius:var(--radius);padding:16px 8px;text-align:center;cursor:pointer;box-shadow:var(--shadow);transition:.2s;display:flex;flex-direction:column;align-items:center;gap:8px}
.service-card:active{transform:scale(.95)}
.service-card i{font-size:1.5rem;color:var(--primary);width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(127,29,29,.08);border-radius:50%}
.service-card span{font-size:.7rem;font-weight:600;color:var(--text);line-height:1.3}

/* FORM CARD */
.form-card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:16px}
.form-title{font-size:1.05rem;color:var(--primary);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:.78rem;font-weight:600;color:var(--text);margin-bottom:5px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1.5px solid #dde3ea;border-radius:10px;font-size:.85rem;font-family:inherit;background:#f8fafc;transition:.2s;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(127,29,29,.1)}
.form-group small{display:block;color:var(--text-light);font-size:.7rem;margin-top:4px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* BUTTONS */
.btn-submit{width:100%;padding:13px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border:none;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-submit:active{transform:scale(.97)}
.btn-submit:disabled{opacity:.6;cursor:not-allowed}

/* SUCCESS */
.success-card{background:var(--card);border-radius:var(--radius);padding:32px 20px;text-align:center;box-shadow:var(--shadow);animation:fadeUp .4s}
.success-card>i{font-size:3.5rem;color:#22c55e;margin-bottom:12px}
.success-card h2{color:#16a34a;margin-bottom:8px}
.no-pengajuan{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;padding:14px;border-radius:10px;font-size:1.2rem;font-weight:700;letter-spacing:1px;margin:12px 0}
.hint{font-size:.78rem;color:var(--text-light);margin-bottom:16px}

/* RESULTS */
.result-card{background:var(--card);border-radius:var(--radius);padding:16px;margin-top:12px;box-shadow:var(--shadow);animation:fadeUp .3s}
.result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.result-no{font-weight:700;font-size:.85rem;color:var(--primary)}
.badge{padding:4px 10px;border-radius:20px;font-size:.7rem;font-weight:600;color:#fff}
.badge-info{background:#3b82f6}.badge-warning{background:#f59e0b}.badge-success{background:#22c55e}.badge-danger{background:#ef4444}
.result-card p{font-size:.8rem;margin-bottom:4px;color:var(--text-light)}
.result-card b{color:var(--text)}
.catatan{background:#fef9c3;padding:8px;border-radius:8px;margin-top:6px}

/* EMPTY */
.empty-state{text-align:center;padding:40px 20px;color:var(--text-light)}
.empty-state i{font-size:2.5rem;margin-bottom:10px;opacity:.4}

/* INFO */
.info-item{padding:14px 0;border-bottom:1px solid #eee}
.info-item:last-child{border:none}
.info-item h4{font-size:.85rem;color:var(--primary);margin-bottom:4px;display:flex;align-items:center;gap:6px}
.info-item p,.info-item li{font-size:.8rem;color:var(--text-light);line-height:1.6}
.info-item ul{padding-left:18px;margin-top:6px}

/* FOOTER */
footer{text-align:center;padding:20px;color:var(--text-light);font-size:.7rem;margin-bottom:60px}

/* RESPONSIVE */
@media(max-width:380px){.service-grid{grid-template-columns:repeat(3,1fr)}.form-row{grid-template-columns:1fr}}
@media(min-width:768px){.service-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,.12)}}

/* MODAL OVERLAY */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px);animation:fadeIn .2s ease}
.modal-card{background:#fff;border-radius:16px;width:100%;max-width:500px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,.25);animation:scaleUp .25s cubic-bezier(0.34, 1.56, 0.64, 1)}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid #eee}
.modal-title{font-weight:700;color:var(--primary);font-size:.9rem}
.modal-close{background:none;border:none;font-size:1.6rem;color:var(--text-light);cursor:pointer;line-height:1}
.modal-close:hover{color:var(--primary)}
.modal-body{padding:16px;overflow-y:auto;display:flex;align-items:center;justify-content:center;flex:1}
.modal-body img{max-width:100%;max-height:60vh;border-radius:8px;object-fit:contain;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.modal-body iframe, .modal-body embed{width:100%;height:60vh;border:none;border-radius:8px}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleUp{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}

/* ANNOUNCEMENT DETAILS */
.announcement-content{margin-top:4px}
.announcement-content p{margin-bottom:8px;line-height:1.5}
.announcement-content p:last-child{margin-bottom:0}
.announcement-content ul, .announcement-content ol{margin-left:18px;margin-top:6px;margin-bottom:6px}
.announcement-content li{margin-bottom:4px}
.announcement-content a{color:#fff;text-decoration:underline;font-weight:600}

/* PWA INSTALL BANNER */
.pwa-banner {
  position: fixed;
  bottom: 80px; /* Above the tab navigation */
  left: 50%;
  transform: translateX(-50%) translateY(150px);
  width: calc(100% - 32px);
  max-width: 568px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: 0 10px 30px rgba(127, 29, 29, 0.15);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.pwa-banner.show {
  transform: translateX(-50%) translateY(0);
}
.pwa-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.pwa-banner-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 10px;
  background: #f8fafc;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.pwa-banner-info h4 {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.pwa-banner-info p {
  font-size: 0.7rem;
  color: var(--text-light);
  line-height: 1.3;
}
.pwa-banner-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-pwa-install {
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: .2s;
  box-shadow: 0 4px 10px rgba(127, 29, 29, 0.15);
}
.btn-pwa-install:active {
  transform: scale(0.95);
}
.btn-pwa-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--text-light);
  cursor: pointer;
  padding: 4px;
  transition: .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-pwa-close:hover {
  color: var(--primary);
}
@media (max-width: 480px) {
  .pwa-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
  }
  .pwa-banner-right {
    justify-content: flex-end;
  }
}

@media (max-width: 360px) {
  .tab-btn {
    font-size: 0.56rem !important;
    gap: 1px !important;
  }
  .tab-btn i {
    font-size: 1.05rem !important;
  }
}