*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:#f3f7f8;color:#18353b}
:root{--g:#087f3b;--dg:#075e32;--teal:#075e68;--line:#d8e5e7}
header{background:linear-gradient(135deg,#075e68,#087f3b);color:white}
.nav{max-width:1200px;margin:auto;padding:15px 22px;display:flex;justify-content:space-between;align-items:center;gap:15px}
.brand{font-size:18px;font-weight:800;display:flex;align-items:center;gap:10px}
.brand-logo{width:42px;height:42px;object-fit:contain;background:#fff;border-radius:8px;padding:3px}
.nav-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nav-btn{background:#ffffff22;color:white;border:1px solid #ffffff55;padding:9px 13px;border-radius:8px;text-decoration:none;cursor:pointer;font:inherit}
.active-nav{background:#fff;color:#075e68}
.admin-chip{background:#ffffff18;border:1px solid #ffffff30;padding:8px 11px;border-radius:8px;font-size:13px}
.hero{max-width:1200px;margin:auto;padding:45px 22px 55px;display:grid;grid-template-columns:1.25fr .75fr;gap:30px}
.hero h1,.dashboard-hero h1{font-size:46px;margin:8px 0 15px;line-height:1.05}.hero p,.dashboard-hero p{font-size:18px;line-height:1.7}
.hero-card{background:#ffffff18;border:1px solid #ffffff35;padding:22px;border-radius:16px}
.dashboard-hero{max-width:1200px;margin:auto;padding:35px 22px 40px}
.wrap{max-width:1200px;margin:auto;padding:30px 22px}.view{display:none}.view.active{display:block}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.card{background:white;border:1px solid var(--line);border-radius:16px;padding:23px;box-shadow:0 6px 20px #12383d0a}
h2{margin-top:0}label{display:block;font-weight:bold;margin:13px 0 6px}
input,select,textarea{width:100%;padding:11px;border:1px solid #c8d7da;border-radius:8px;font:inherit;background:#fff}
textarea{min-height:110px;resize:vertical}.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn{border:0;border-radius:8px;padding:11px 16px;background:var(--g);color:#fff;font-weight:bold;cursor:pointer}.btn.gray{background:#e7eff0;color:#075e68}.btn.red{background:#b52d2d}.btn.small{padding:7px 10px;font-size:12px}.full{width:100%;margin-top:14px}
.notice{background:#fff8e5;border-left:4px solid #e2a72e;padding:12px;margin-top:12px}.success{background:#eaf7ee;border:1px solid #b7dfc2;padding:15px;border-radius:9px;margin-bottom:15px}.error{background:#fff0f0;border:1px solid #e0a0a0;color:#8d2020;padding:12px;border-radius:9px;margin-bottom:15px}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}.stat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px}.stat b{display:block;font-size:28px;color:var(--dg);margin-top:6px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0}.toolbar input,.toolbar select{width:auto;min-width:180px}
table{width:100%;border-collapse:collapse;background:white}th,td{padding:10px;border-bottom:1px solid #e2eaec;text-align:left;vertical-align:top;font-size:13px}th{background:#edf5f6}
.tablewrap{overflow:auto}.badge{display:inline-block;padding:5px 8px;border-radius:20px;background:#e8f4ff;color:#17628b;font-weight:bold;font-size:11px}
.ticket-box{background:#f7fbfb;border:1px dashed #b8ced1;border-radius:12px;padding:14px}.ticket-label{font-size:11px;font-weight:800;letter-spacing:1px;color:#075e68}.ticket-number{font-size:25px;font-weight:900;color:#075e32;margin:5px 0 8px;word-break:break-word}
.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.status-grid>div{background:#f6fafb;border:1px solid #e1ebed;padding:10px;border-radius:8px;font-size:13px}
.bar-item{margin:8px 0}.bar-top{display:flex;justify-content:space-between;font-size:13px;gap:8px}.bar-bg{height:9px;background:#e7eff0;border-radius:9px;overflow:hidden;margin-top:4px}.bar-fill{height:100%;background:#087f3b}
.modal{position:fixed;inset:0;background:#0008;display:none;align-items:center;justify-content:center;padding:20px;z-index:10}.modal.show{display:flex}.modalbox{background:white;border-radius:14px;padding:25px;max-width:700px;width:100%;max-height:90vh;overflow:auto}
.desc-box{background:#f5f8f9;padding:12px;border-radius:8px;margin-top:5px;white-space:pre-wrap}.muted{color:#667a80;font-size:14px;line-height:1.6}
footer{background:#12383d;color:#d5e6e8;padding:25px;text-align:center;margin-top:30px}.login-page{min-height:100vh;background:linear-gradient(135deg,#075e68,#087f3b);display:flex;align-items:center;justify-content:center}.login-shell{width:100%;max-width:450px;padding:20px}.login-card{background:#fff;border-radius:18px;padding:30px;box-shadow:0 20px 50px #0004}.login-logo{width:80px;height:80px;object-fit:contain;display:block;margin:0 auto 12px}.login-title{text-align:center;font-size:28px;font-weight:800;color:#075e68}.back-link{display:block;text-align:center;margin-top:18px;color:#075e68;text-decoration:none}
.check{display:flex;align-items:center;gap:8px}.check input{width:auto}
@media print{header .nav,footer,.toolbar,.btn,.modal,.admin-chip{display:none!important}.card{box-shadow:none}.wrap{max-width:none}.grid{grid-template-columns:1fr 1fr}body{background:#fff}table{font-size:10px}}
@media(max-width:800px){.hero,.grid,.row{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.hero h1,.dashboard-hero h1{font-size:36px}.nav{align-items:flex-start}.brand{font-size:15px}.status-grid{grid-template-columns:1fr}}

.hero{position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,#075e68ee,#087f3bd9),var(--hero-image);background-size:cover;background-position:center;opacity:.18;pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero-about{margin-top:18px;padding:15px;border-left:3px solid var(--accent,#e2a72e);background:#ffffff12;border-radius:8px}
.hero-about p{font-size:14px;margin:6px 0 0;line-height:1.6}
.settings-panel{position:fixed;inset:0;background:#071d20cc;z-index:30;display:none;overflow:auto;padding:25px}
.settings-panel.show{display:block}
.settings-head{max-width:1200px;margin:0 auto;background:#fff;border-radius:16px 16px 0 0;padding:22px;display:flex;justify-content:space-between;gap:20px}
.settings-panel form{max-width:1200px;margin:0 auto;background:#f3f7f8;padding:0 22px 22px}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.settings-card{box-shadow:none}
.settings-card h3{margin-top:0;color:var(--teal,#075e68)}
.color-row{display:grid;grid-template-columns:1fr 100px;align-items:center;gap:10px;margin:10px 0}
.color-row input[type=color]{height:42px;padding:3px}
.preview-box{margin-top:18px;padding:15px;border:1px dashed #b8ced1;border-radius:10px}
.preview-sample{margin-top:10px;padding:16px;border:3px solid var(--accent,#e2a72e);border-radius:10px}
.image-preview{width:100%;object-fit:contain;background:#f5f8f9;border:1px solid #d8e5e7;border-radius:10px;padding:10px;margin-bottom:10px}
.logo-preview{height:160px}.hero-preview{height:180px;object-fit:cover}.settings-actions{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}
@media(max-width:800px){.settings-grid{grid-template-columns:1fr}.settings-head{flex-direction:column}.settings-panel{padding:10px}.settings-panel form{padding:0 10px 10px}}

/* ================================================================
   RESPONSIVE UI UPGRADE
   Menjaga layout tetap rapi saat laptop di-resize, minimize,
   tablet, dan handphone tanpa mengubah urutan/layout utama.
   ================================================================ */
html{width:100%;overflow-x:hidden;scroll-behavior:smooth}
body{width:100%;min-width:0;overflow-x:hidden}
main,.wrap,.nav,.hero,.dashboard-hero{width:100%;min-width:0}
img,canvas{max-width:100%}
*{min-width:0}
.grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.card{min-width:0;width:100%;overflow:hidden}
.hero{grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr)}
.stats{grid-template-columns:repeat(5,minmax(0,1fr));width:100%}
.stat{min-width:0;overflow:hidden}
.stat b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card canvas{display:block;width:100%!important;max-width:100%;height:180px!important}
.bar-item,.bar-top{min-width:0}
.bar-top span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-top b{flex:0 0 auto;white-space:nowrap}
.toolbar{width:100%;align-items:stretch}
.toolbar input,.toolbar select{flex:1 1 180px;min-width:0;max-width:100%}
.toolbar .btn{flex:0 0 auto;white-space:nowrap}
.tablewrap{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tablewrap table{width:100%;min-width:860px;table-layout:fixed}
.tablewrap th,.tablewrap td{overflow-wrap:anywhere;word-break:break-word}
.tablewrap th:nth-child(1),.tablewrap td:nth-child(1){width:15%}
.tablewrap th:nth-child(2),.tablewrap td:nth-child(2){width:17%}
.tablewrap th:nth-child(3),.tablewrap td:nth-child(3){width:15%}
.tablewrap th:nth-child(4),.tablewrap td:nth-child(4){width:12%}
.tablewrap th:nth-child(5),.tablewrap td:nth-child(5){width:13%}
.tablewrap th:nth-child(6),.tablewrap td:nth-child(6){width:13%}
.tablewrap th:nth-child(7),.tablewrap td:nth-child(7){width:15%}
input,select,textarea,button{max-width:100%}
.row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.status-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.nav{flex-wrap:wrap}
.brand{min-width:0;flex:1 1 300px}
.brand span{overflow-wrap:anywhere}
.nav-actions{min-width:0;flex:0 1 auto}
.nav-btn,.admin-chip{white-space:nowrap}
.login-page{width:100%;min-height:100dvh;overflow-x:hidden}
.login-shell{width:min(100%,450px)}
.settings-panel{width:100%;box-sizing:border-box}
.settings-panel form,.settings-head{width:100%;min-width:0}
.settings-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.settings-card{min-width:0}
.color-row{grid-template-columns:minmax(0,1fr) 90px}
.modal{width:100%;overflow:auto}
.modalbox{width:min(700px,100%);min-width:0}
.detail-summary,.desc-box{overflow-wrap:anywhere}
@media (max-width:1100px){
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero{grid-template-columns:minmax(0,1fr) minmax(260px,.8fr)}
}
@media (max-width:800px){
  .nav{padding:13px 16px}
  .nav-actions{width:100%;justify-content:flex-start}
  .hero,.dashboard-hero{grid-template-columns:minmax(0,1fr);padding:32px 16px 38px}
  .hero h1,.dashboard-hero h1{font-size:clamp(30px,7vw,38px)}
  .hero p,.dashboard-hero p{font-size:16px}
  .wrap{padding:22px 16px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row{grid-template-columns:minmax(0,1fr)}
  .settings-grid{grid-template-columns:minmax(0,1fr)}
  .toolbar input,.toolbar select{flex:1 1 100%;width:100%}
  .toolbar .btn{flex:1 1 auto}
  .status-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .nav{padding:11px 12px;gap:10px}
  .brand{flex-basis:100%;font-size:14px}
  .brand-logo{width:36px;height:36px}
  .nav-actions{gap:6px}
  .nav-btn,.admin-chip{font-size:12px;padding:8px 10px}
  .hero,.dashboard-hero{padding:26px 12px 30px}
  .hero h1,.dashboard-hero h1{font-size:30px}
  .hero-card{padding:17px}
  .wrap{padding:16px 12px}
  .card{border-radius:13px;padding:17px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .stat{padding:13px}
  .stat b{font-size:23px}
  .toolbar{gap:7px}
  .toolbar .btn{width:100%}
  .ticket-number{font-size:21px}
  .tablewrap table{min-width:800px}
  .settings-panel{padding:7px}
  .settings-head{padding:16px}
  .settings-panel form{padding:0 10px 14px}
  .settings-actions .btn{width:100%}
  .color-row{grid-template-columns:minmax(0,1fr) 72px}
  .modal{padding:10px}
  .modalbox{padding:17px;max-height:94dvh}
  footer{padding:18px 12px;font-size:12px}
}
@media print{
  @page{size:A4 landscape;margin:10mm}
  html,body{overflow:visible!important;background:#fff!important}
  header .nav,footer,.toolbar,.btn,.modal,.settings-panel,.admin-chip{display:none!important}
  .wrap{max-width:none!important;width:100%!important;padding:0!important}
  .grid{grid-template-columns:1fr 1fr!important}
  .stats{grid-template-columns:repeat(5,1fr)!important}
  .card{box-shadow:none!important;break-inside:avoid}
  .tablewrap{overflow:visible!important}
  .tablewrap table{min-width:0!important;width:100%!important;table-layout:fixed!important}
  .tablewrap th,.tablewrap td{font-size:8px!important;padding:5px!important}
}

/* ================================================================
   SOCIAL MEDIA FOOTER
   Link Instagram, Facebook, dan YouTube dikendalikan dari database
   melalui Dashboard > Pengaturan Website.
   ================================================================ */
.footer-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.social-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:92px;
  padding:8px 12px;
  border:1px solid #ffffff35;
  border-radius:999px;
  color:#fff;
  background:#ffffff12;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  transition:transform .15s ease,background .15s ease;
}
.social-link:hover{
  transform:translateY(-1px);
  background:#ffffff24;
}
.social-url-hint{
  border-color:#b52d2d!important;
  outline:2px solid #b52d2d22;
}
@media(max-width:520px){
  .footer-inner{flex-direction:column;text-align:center}
  .social-footer{width:100%}
  .social-link{flex:1 1 auto;min-width:85px}
}