:root{
  --navy-950:#0A2138;
  --navy-900:#0D2B45;
  --navy-800:#153A5C;
  --navy-700:#1F4E7A;
  --paper:#F5F7FA;
  --card:#FFFFFF;
  --ink:#152238;
  --ink-soft:#5A6B84;
  --line:#E1E6EE;
  --line-soft:#EEF1F6;

  --sms:#6D5BD0;      --sms-bg:#F1EEFC;
  --wa:#1FA855;       --wa-bg:#E9F8EF;
  --email:#DD7A1F;    --email-bg:#FDF1E3;
  --web:#1785C4;      --web-bg:#E7F3FB;

  --st-baru:#B4740E;    --st-baru-bg:#FCF0DA;
  --st-proses:#1F5FBF;  --st-proses-bg:#E7EFFC;
  --st-selesai:#1B8A4E; --st-selesai-bg:#E5F5EC;

  --radius:12px;
  --shadow: 0 1px 2px rgba(13,43,69,.06), 0 8px 24px -12px rgba(13,43,69,.12);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
h1,h2,h3,.display{ font-family:'Sora', system-ui, sans-serif; }
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}

/* ============ TOP UTILITY BAR ============ */
.util-bar{ background:var(--navy-950); color:#CBDCEC; font-size:12.5px; }
.util-bar .wrap{ max-width:1180px; margin:0 auto; padding:6px 24px; display:flex; justify-content:space-between; align-items:center; }
.util-bar .wrap span{opacity:.85;}
.util-links{display:flex; gap:18px;}
.util-links a{opacity:.85; transition:opacity .15s;}
.util-links a:hover{opacity:1; text-decoration:underline;}

/* ============ TOP BANNER ============ */
.banner{ background:linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%); color:#fff; border-bottom:3px solid var(--web); }
.banner .wrap{ max-width:1180px; margin:0 auto; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand-mark{ width:74px;height:35px; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); display:flex;align-items:center;justify-content:center; flex-shrink:0; }
.brand-text .name{ font-size:19px; font-weight:700; letter-spacing:.2px; line-height:1.15; }
.brand-text .tag{ font-size:12.5px; color:#AEC5DC; margin-top:2px; }
.banner-actions{ display:flex; align-items:center; gap:10px; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:9px; font-size:13.5px; font-weight:600; border:1px solid transparent; cursor:pointer; transition:transform .12s ease, background .15s ease, box-shadow .15s ease; white-space:nowrap; }
.btn:active{transform:translateY(1px);}
.btn-primary{ background:#EF8A1F; color:#241000; box-shadow:0 6px 16px -6px rgba(239,138,31,.6); }
.btn-primary:hover{background:#F49A3C;}
.btn-ghost{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22); color:#fff; }
.btn-ghost:hover{background:rgba(255,255,255,.14);}

/* ============ BREADCRUMBS + USER MENU ============ */
.breadcrumbs{ background:var(--card); border-bottom:1px solid var(--line); position:relative; z-index:20; }
.breadcrumbs .wrap{ max-width:1180px; margin:0 auto; padding:11px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.crumbs{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-soft); flex-wrap:wrap; }
.crumbs a{color:var(--web); font-weight:600;}
.crumbs a:hover{text-decoration:underline;}
.crumbs .sep{color:#B7C1D1;}
.crumbs .current{color:var(--ink); font-weight:600;}

.user-menu{ position:relative; }
.right-controls{ display:flex; align-items:center; gap:14px; }
.notif-bell{
  position:relative;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  flex-shrink:0;
}
.notif-bell:hover{ background:var(--line-soft); color:var(--ink); border-color:#C9D3E0; }
.notif-badge{
  position:absolute; top:-4px; right:-4px;
  min-width:17px; height:17px; padding:0 4px;
  border-radius:20px; background:#D0362B; color:#fff;
  font-size:10px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--card);
}
.user-trigger{
  display:flex; align-items:center; gap:9px;
  background:var(--card); border:1px solid var(--line);
  padding:6px 12px 6px 6px; border-radius:30px; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:border-color .15s ease, background .15s ease;
}
.user-trigger:hover{ border-color:#C9D3E0; background:#FAFBFD; }
.user-avatar{
  width:26px; height:26px; border-radius:50%;
  background:var(--web-bg); color:var(--web);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px; flex-shrink:0;
}
.user-trigger svg{ color:#9AAAC0; transition:transform .15s ease; }
.user-menu.open .user-trigger svg{ transform:rotate(180deg); }

.user-dropdown{
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:190px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--shadow);
  padding:6px;
  display:none;
  flex-direction:column;
  gap:2px;
}
.user-dropdown.open{ display:flex; }
.user-dropdown a{
  display:flex; align-items:center; gap:9px;
  padding:9px 10px; border-radius:7px;
  font-size:13.5px; font-weight:500; color:var(--ink);
}
.user-dropdown a:hover{ background:var(--line-soft); }
.user-dropdown a.danger{ color:#C0362C; }
.user-dropdown a.danger:hover{ background:#FBEAE8; }
.user-dropdown .divider{ height:1px; background:var(--line-soft); margin:4px 2px; }

/* ============ MAIN ============ */
main{ flex:1; max-width:1180px; width:100%; margin:0 auto; padding:32px 24px 56px; }

.page-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; margin-bottom:26px; }
.page-head h1{ font-size:26px; font-weight:700; margin:0 0 6px; color:var(--navy-950); }
.page-head p{ margin:0; color:var(--ink-soft); font-size:14.5px; max-width:560px; }
.search-box{ display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:9px 14px; min-width:280px; box-shadow:var(--shadow); }
.search-box input{ border:none; outline:none; font-size:13.5px; width:100%; font-family:inherit; color:var(--ink); }
.search-box svg{flex-shrink:0; color:#9AAAC0;}

/* ============ CHANNEL SUMMARY / FILTER ============ */
.channels{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:32px; }
.chan-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); cursor:pointer; transition:border-color .15s ease, transform .12s ease; position:relative; overflow:hidden; }
.chan-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; }
.chan-card[data-c="sms"]::before{background:var(--sms);}
.chan-card[data-c="wa"]::before{background:var(--wa);}
.chan-card[data-c="email"]::before{background:var(--email);}
.chan-card[data-c="web"]::before{background:var(--web);}
.chan-card:hover{transform:translateY(-2px); border-color:#C9D3E0;}
.chan-card.active{border-color:var(--navy-700); box-shadow:0 0 0 2px rgba(31,78,122,.15), var(--shadow);}

.chan-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.chan-icon{ width:34px;height:34px; border-radius:9px; display:flex;align-items:center;justify-content:center; }
.chan-card[data-c="sms"] .chan-icon{background:var(--sms-bg); color:var(--sms);}
.chan-card[data-c="wa"] .chan-icon{background:var(--wa-bg); color:var(--wa);}
.chan-card[data-c="email"] .chan-icon{background:var(--email-bg); color:var(--email);}
.chan-card[data-c="web"] .chan-icon{background:var(--web-bg); color:var(--web);}

.chan-count{ font-family:'Sora', sans-serif; font-size:22px; font-weight:700; color:var(--navy-950); }
.chan-name{ font-size:13.5px; font-weight:600; color:var(--ink); }
.chan-sub{ font-size:12px; color:var(--ink-soft); margin-top:2px; }

/* ============ SECTION ============ */
.section{ margin-bottom:34px; }
.section-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.section-dot{ width:9px;height:9px;border-radius:50%; }
.section[data-c="sms"] .section-dot{background:var(--sms);}
.section[data-c="wa"] .section-dot{background:var(--wa);}
.section[data-c="email"] .section-dot{background:var(--email);}
.section[data-c="web"] .section-dot{background:var(--web);}
.section-head h2{ font-size:16.5px; font-weight:700; margin:0; color:var(--navy-950); }
.section-head .count-pill{ font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:20px; color:var(--ink-soft); background:var(--line-soft); }
.section-head .see-all{ margin-left:auto; font-size:12.5px; font-weight:600; color:var(--web); }
.section-head .see-all:hover{ text-decoration:underline; }

.list{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.row{ display:grid; grid-template-columns:1.1fr 2fr 1fr 1fr 1fr auto; align-items:left; gap:8px; padding:14px 18px; border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.row:last-child{border-bottom:none;}
.row.head{ background:#FAFBFD; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); font-weight:700; padding-top:11px; padding-bottom:11px; }
.row .id{ font-weight:700; color:var(--navy-800); font-family:'Sora', sans-serif; font-size:13px; }
.row .subject{ color:var(--ink); font-weight:600; margin-bottom:2px; }
.row .from{ color:var(--ink-soft); font-size:12.5px; }
.row .date{color:var(--ink-soft); font-size:12.5px;}
.status{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:700; width:fit-content; }
.status::before{content:""; width:6px;height:6px;border-radius:50%;}
.status.baru{background:var(--st-baru-bg); color:var(--st-baru);}
.status.baru::before{background:var(--st-baru);}
.status.proses{background:var(--st-proses-bg); color:var(--st-proses);}
.status.proses::before{background:var(--st-proses);}
.status.selesai{background:var(--st-selesai-bg); color:var(--st-selesai);}
.status.selesai::before{background:var(--st-selesai);}
.status.telat{background:red; color:white;}
.status.telat::before{background:red;}
.status.warning{background:yellow; color:black;}
.status.warning::before{background:yellow;}
.status.normal {background:green; color:white;}
.status.normal::before{background:green;}
.row .action{ color:var(--web); font-weight:600; font-size:12.5px; text-align:right; }
.row .action:hover{text-decoration:underline;}
.row:not(.head):hover{background:#FBFCFE;}
.empty-row{ padding:24px 18px; color:var(--ink-soft); font-size:13px; text-align:center; }

/* ============ FORM (ubah password) ============ */
.form-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; max-width:480px; }
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--ink); }
.form-group input{ width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:13.5px; font-family:inherit; }
.form-group input:focus{ outline:2px solid var(--web); outline-offset:1px; border-color:var(--web); }
.alert{ padding:11px 14px; border-radius:8px; font-size:13px; margin-bottom:16px; }
.alert-error{ background:#FBEAE8; color:#B23227; }
.alert-success{ background:#E5F5EC; color:#1B8A4E; }

/* ============ FOOTER ============ */
footer{ background:var(--navy-950); color:#B9C9DC; margin-top:auto; }
.footer-main{ max-width:1180px; margin:0 auto; padding:40px 24px 24px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:32px; }
.footer-brand .name{ color:#fff; font-family:'Sora', sans-serif; font-weight:700; font-size:16px; margin-bottom:8px; }
.footer-brand p{ font-size:13px; line-height:1.6; color:#93A7C0; margin:0; }
.footer-col h4{ color:#fff; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; margin:0 0 12px; font-weight:700; }
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.footer-col a{font-size:13px; color:#B9C9DC; transition:color .15s;}
.footer-col a:hover{color:#fff;}
.footer-col .contact-line{ font-size:13px; display:flex; gap:8px; align-items:flex-start; color:#B9C9DC; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); }
.footer-bottom .wrap{ max-width:1180px; margin:0 auto; padding:16px 24px; display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#7C90AA; flex-wrap:wrap; gap:8px; }

@media (max-width: 900px){
  .channels{grid-template-columns:repeat(2,1fr);}
  .footer-main{grid-template-columns:1fr 1fr;}
  .row{grid-template-columns:1fr; gap:6px;}
  .row.head{display:none;}
  .row .action{text-align:left;}
}
@media (max-width: 560px){
  .banner .wrap{flex-direction:column; align-items:flex-start;}
  .banner-actions{width:100%;}
  .btn{flex:1; justify-content:center;}
  .footer-main{grid-template-columns:1fr;}
  .page-head{flex-direction:column; align-items:stretch;}
  .search-box{min-width:0;}
  .breadcrumbs .wrap{flex-wrap:wrap;}
}

/* ============ DETAIL PENGADUAN ============ */
.detail-head{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px; margin-bottom:22px;
}
.detail-head .id-block .no-tiket{
  font-family:'Sora', sans-serif; font-weight:700; font-size:22px; color:var(--navy-950);
}
.detail-head .id-block .perihal{ color:var(--ink-soft); font-size:14px; margin-top:4px; max-width:520px; }
.badge-sumber{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:20px; font-size:12.5px; font-weight:700;
}
.badge-sumber.sms{background:var(--sms-bg); color:var(--sms);}
.badge-sumber.whatsapp{background:var(--wa-bg); color:var(--wa);}
.badge-sumber.email{background:var(--email-bg); color:var(--email);}
.badge-sumber.web{background:var(--web-bg); color:var(--web);}

.detail-grid{
  display:grid; grid-template-columns: 1fr 1fr;  gap:20px; align-items:start;
  grid-template-rows: auto auto auto; 
  margin-bottom:20px;
}
.kolom-kiri {
  /* Membujur dari baris pertama hingga baris terakhir (melewati 2 baris) */
  background-color: #3498db;
}

.kolom-kanan-atas {
  background-color: #2ecc71;
}

.kolom-kanan-bawah {
  /* Memaksa elemen ini memakan 2 kolom sekaligus (memanjang penuh dari kiri ke kanan) */
  grid-column: span 2; 
  /* Secara otomatis turun ke Baris 3 karena ruang di atasnya sudah habis */
  background-color: #e74c3c;
  color: white;
  min-height: 100px; 
}

.info-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px;
}
.info-card h3{ font-size:14px; margin:0 0 16px; color:var(--navy-950); }
.info-row{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.info-row:last-child{ border-bottom:none; }
.info-row .icon{ width:32px;height:32px; border-radius:8px; background:var(--web-bg); color:var(--web); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.info-row .text .label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); font-weight:700; margin-bottom:2px; }
.info-row .text .value{ font-size:14px; color:var(--ink); font-weight:600; }

.map-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px; height:100%;
}
.map-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.map-card-head h3{ font-size:14px; margin:0; color:var(--navy-950); }
.map-edit-btn{
  border:none; background:none; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--web); padding:0;
}
.map-edit-btn:hover{ text-decoration:underline; }
#peta-lokasi{ width:100%; height:300px; border-radius:9px; border:1px solid var(--line); cursor:crosshair; }
.btn-outline{
  background:#fff; border:1px solid var(--line); color:var(--ink);
}
.btn-outline:hover{ background:var(--line-soft); }
.map-empty{
  height:300px; border-radius:9px; border:1px dashed var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); font-size:13px; text-align:center; padding:20px;
  background:#FAFBFD;
}
.map-coord{ margin-top:10px; font-size:12px; color:var(--ink-soft); }

.isi-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px;
}
.isi-card h3{ font-size:14px; margin:0 0 12px; color:var(--navy-950); }
.isi-card .isi-text{ font-size:14px; line-height:1.7; color:var(--ink); white-space:pre-line; }

.back-link{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--web); margin-bottom:18px; }
.back-link:hover{ text-decoration:underline; }

.info-label { font-size: 12px; color: #888; margin-bottom: 2px; }
  .info-value { font-size: 14px; color: #222; margin-bottom: 14px; }
  .foto-lampiran img { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; margin-right: 8px; margin-bottom: 8px; border: 1px solid #eee; }
  .badge-tahap { padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; background: #eef2ff; color: #4338ca; }
  .badge-selesai-sepakat { background: #e9fbf1; color: #14b862; }
  .badge-selesai-tidak { background: #fdecea; color: #a5231b; }
  .btn-cetak { background: #222; color: #fff; }
  .btn-cetak:hover { background: #000; color: #fff; }
  .panel-aksi { background: #f8fafc; border: 1px solid #e5e9f0; border-radius: 8px; padding: 20px; }
  .tenggat-ok { color: #14b862; font-size: 13px; }
  .tenggat-lewat { color: #dc3545; font-weight: 600; font-size: 13px; }

  /* --- Bootstrap-style vertical timeline --- */
  .timeline {
    position: relative;
    padding-left: 0;
    list-style: none;
  }
  .timeline::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: #e5e9f0;
  }
  .timeline-item {
    position: relative;
    padding-left: 52px;
    padding-bottom: 24px;
  }
  .timeline-item:last-child { padding-bottom: 0; }
  .timeline-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    z-index: 1;
  }
  .timeline-icon.bg-mulai   { background: #6c757d; }
  .timeline-icon.bg-proses  { background: #4338ca; }
  .timeline-icon.bg-berhasil{ background: #18d26e; }
  .timeline-icon.bg-gagal   { background: #dc3545; }
  .timeline-icon.bg-info    { background: #0d6efd; }
  .timeline-body {
    background: #f8fafc;
    border: 1px solid #eef1f5;
    border-radius: 8px;
    padding: 12px 16px;
  }
  .timeline-waktu { font-size: 11px; color: #999; margin-bottom: 3px; }
  .timeline-ket { font-size: 13.5px; color: #333; }
  .timeline-oleh { font-size: 12px; color: #888; }

@media (max-width: 860px){
  .detail-grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){ *{transition:none !important;} }