/* Support Unggul — portal publik. Light-only, Petrol. Split-screen, fokus, minim teks. */
:root{
  color-scheme: light;
  --petrol:#0f766e; --petrol-600:#0d675f; --petrol-700:#0b5a53; --petrol-800:#0a3f3a; --petrol-300:#5eaaa2;
  --petrol-tint:#eaf4f2; --petrol-tint-2:#dcecea;
  --paper:#f5f7f6; --card:#ffffff; --ink:#0e1c1a; --ink-2:#3d5350; --ink-3:#7d908d;
  --line:#e4ebe9; --line-2:#d3dddb;
  --ok:#15803d; --ok-bg:#dff2e5; --err:#dc2626; --err-bg:#fdecec; --warn:#b45309; --warn-bg:#fdf0d9;
  --sans:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"SFMono-Regular","SF Mono","Cascadia Mono","Consolas",ui-monospace,monospace;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:var(--card);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
.mono{font-family:var(--mono);}

/* ===== shell split ===== */
.shell{display:flex;min-height:100vh;}

/* left brand panel */
.aside{flex:0 0 38%;max-width:440px;background:linear-gradient(160deg,var(--petrol) 0%,var(--petrol-800) 100%);color:#fff;padding:34px 40px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden;}
.aside::before{content:"";position:absolute;inset:0;opacity:.14;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:38px 38px;-webkit-mask-image:radial-gradient(ellipse 90% 60% at 30% 10%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse 90% 60% at 30% 10%,#000 20%,transparent 70%);}
.aside > *{position:relative;z-index:1;}
.brand-w{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;}
.brand-w .mk{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;font-weight:800;font-size:19px;}
.brand-w b{font-size:17px;font-weight:800;letter-spacing:.01em;display:block;line-height:1.1;}
.brand-w span{font-size:11px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.08em;font-weight:600;}
.aside-mid{margin-top:auto;margin-bottom:auto;}
.aside-mid h2{font-size:clamp(26px,3vw,34px);line-height:1.12;letter-spacing:-.02em;font-weight:800;margin:0;text-wrap:balance;}
.aside-foot{display:flex;flex-direction:column;gap:10px;font-size:12.5px;color:rgba(255,255,255,.72);}
.aside-foot a{color:#fff;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:7px;width:fit-content;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;}
.aside-foot .dom{color:rgba(255,255,255,.55);font-family:var(--mono);font-size:11px;}

/* right content */
.main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;padding:34px 40px 48px;}
.panel{width:100%;max-width:660px;}
.main .flash{width:100%;max-width:660px;}

/* mobile top bar (hidden on desktop) */
.mbar{display:none;}

/* panel head + actions */
.panel-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;}
.panel-top h1{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0;}
.panel-top p{font-size:14px;color:var(--ink-2);margin:3px 0 0;}

/* google button */
.gbtn{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--line-2);border-radius:9px;padding:9px 15px;cursor:pointer;transition:.15s;font-family:var(--sans);text-decoration:none;white-space:nowrap;}
.gbtn:hover{border-color:var(--petrol-300);box-shadow:0 2px 10px -4px rgba(0,0,0,.18);}
.gbtn svg{flex:none;}

/* signed-in chip */
.signed{display:flex;align-items:center;gap:10px;background:var(--petrol-tint);border:1px solid var(--petrol-tint-2);border-radius:10px;padding:8px 12px;}
.signed .sav{width:30px;height:30px;border-radius:50%;background:var(--petrol);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12.5px;line-height:1;text-transform:uppercase;flex:none;}
.signed b{font-size:12.5px;line-height:1.1;} .signed small{font-size:11px;color:var(--ink-2);}
.signed a{margin-left:6px;font-size:11px;color:var(--petrol);font-weight:600;text-decoration:none;}

/* form */
form.cform{display:grid;gap:16px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-2);}
.field label .req{color:var(--err);}
.field label .opt{color:var(--ink-3);font-weight:500;font-size:11.5px;}
.inp{background:var(--card);border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;font-size:14.5px;font-family:var(--sans);color:var(--ink);transition:border-color .15s,box-shadow .15s;width:100%;}
.inp::placeholder{color:var(--ink-3);}
.inp:focus{outline:none;border-color:var(--petrol);box-shadow:0 0 0 3px var(--petrol-tint);}
.inp.is-invalid{border-color:var(--err);}
.inp.is-invalid:focus{box-shadow:0 0 0 3px var(--err-bg);}
textarea.inp{resize:vertical;min-height:120px;}
.err-msg{font-size:12px;color:var(--err);font-weight:500;}

.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.cat{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:15px 8px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);cursor:pointer;transition:.15s;font-size:13px;font-weight:600;color:var(--ink-2);}
.cat .ci{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--petrol-tint);color:var(--petrol);font-size:17px;}
.cat:hover{border-color:var(--petrol-300);}
.cat.on{border-color:var(--petrol);background:var(--petrol-tint);color:var(--petrol);box-shadow:0 0 0 2px var(--petrol-tint);}
.cat.on .ci{background:var(--petrol);color:#fff;}

.drop{display:flex;align-items:center;gap:13px;border:1.5px dashed var(--line-2);border-radius:11px;padding:14px 16px;background:var(--paper);color:var(--ink-2);font-size:13px;cursor:pointer;}
.drop .di{width:36px;height:36px;border-radius:9px;background:var(--card);display:grid;place-items:center;color:var(--petrol);font-size:17px;flex:none;border:1px solid var(--line);}
.drop b{color:var(--ink);font-weight:700;display:block;font-size:13.5px;}
.drop input[type=file]{display:none;}
.files{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.file-chip{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12px;}
.file-chip button{border:none;background:transparent;color:var(--err);cursor:pointer;font-size:14px;line-height:1;}

.submit-row{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:6px;}
.btn{appearance:none;border:none;cursor:pointer;font-family:var(--sans);font-weight:700;background:var(--petrol);color:#fff;border-radius:11px;padding:13px 28px;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:.15s;box-shadow:0 8px 18px -8px var(--petrol);text-decoration:none;}
.btn:hover{background:var(--petrol-700);transform:translateY(-1px);}
.btn:disabled{opacity:.6;cursor:progress;transform:none;}
.btn .arr{transition:transform .15s;}
.btn:hover .arr{transform:translateX(3px);}
.btn-ghost{background:transparent;color:var(--petrol);border:1px solid var(--line-2);box-shadow:none;padding:12px 22px;}
.btn-ghost:hover{background:var(--petrol-tint);transform:none;}
.btn-block{width:100%;}

/* success */
.success{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:6vh;}
.check{width:64px;height:64px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;margin-bottom:18px;font-size:29px;}
.success h1{font-size:24px;font-weight:800;margin:0 0 6px;}
.success p{font-size:14px;color:var(--ink-2);margin:0 0 22px;max-width:38ch;}
.ticket{display:inline-flex;flex-direction:column;align-items:center;gap:3px;background:var(--petrol-tint);border:1px dashed var(--petrol-300);border-radius:12px;padding:16px 34px;margin-bottom:24px;}
.ticket small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.ticket b{font-family:var(--mono);font-size:28px;font-weight:700;color:var(--petrol);letter-spacing:.02em;}
.success-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}

/* ===== tiket saya ===== */
.tlist{display:flex;flex-direction:column;gap:11px;}
.trow{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--card);text-decoration:none;color:inherit;transition:.14s;}
.trow:hover{border-color:var(--petrol-300);box-shadow:0 10px 24px -16px rgba(11,40,37,.4);}
.trow .t-main{flex:1;min-width:0;}
.trow .t-no{font-family:var(--mono);font-size:11px;color:var(--petrol);font-weight:600;letter-spacing:.03em;}
.trow .t-subj{font-size:14px;font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.trow .t-meta{font-size:11.5px;color:var(--ink-3);margin-top:2px;}
.trow .chev{color:var(--ink-3);font-size:20px;line-height:1;}

/* ===== detail tiket (customer) ===== */
.td{width:100%;max-width:900px;margin:0 auto;}
.td-back{font-size:13px;margin:0 0 14px;}
.td-back a{color:var(--petrol);font-weight:600;text-decoration:none;}
.td-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(11,90,83,.05),0 22px 46px -32px rgba(11,40,37,.35);padding:26px 28px;}
.td-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:20px;}
.td-head .tr-no{font-family:var(--mono);font-size:12px;color:var(--petrol);font-weight:600;}
.td-head h1{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:5px 0 3px;}
.td-head .meta{font-size:12.5px;color:var(--ink-3);}
.td-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;}
.block-h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:0 0 10px;}
.desc-box{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:13.5px;color:var(--ink-2);line-height:1.65;}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;}
.thumb{position:relative;aspect-ratio:1;border-radius:11px;overflow:hidden;border:1px solid var(--line-2);display:block;background:var(--paper);transition:.15s;}
.thumb:hover{border-color:var(--petrol);box-shadow:0 8px 18px -10px rgba(11,40,37,.5);}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.thumb .zoom{position:absolute;right:6px;bottom:6px;background:rgba(10,63,58,.82);color:#fff;font-size:11px;border-radius:6px;padding:1px 6px;opacity:0;transition:.15s;}
.thumb:hover .zoom{opacity:1;}
.doc-chip{display:flex;align-items:center;gap:9px;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;font-size:12.5px;color:var(--ink-2);text-decoration:none;background:var(--card);}

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

/* ===== tiket saya ===== */
.lookup-wrap{width:100%;max-width:470px;margin:0 auto;display:flex;flex-direction:column;gap:16px;padding-top:2vh;}
.lookup{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(11,90,83,.05),0 22px 46px -30px rgba(11,40,37,.35);padding:30px 30px 28px;}
.lookup .lk-ic{width:52px;height:52px;border-radius:14px;background:var(--petrol-tint);color:var(--petrol);display:grid;place-items:center;font-size:23px;margin:0 auto 15px;}
.lookup h1{font-size:22px;text-align:center;margin:0 0 6px;font-weight:800;letter-spacing:-.01em;}
.lookup .lk-sub{font-size:13.5px;color:var(--ink-2);text-align:center;margin:0 auto 22px;max-width:34ch;}
.result-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(11,90,83,.05);padding:22px 26px;}
.lk-back{text-align:center;font-size:13px;color:var(--ink-3);margin:2px 0 0;}
.lk-back a{color:var(--petrol);font-weight:600;text-decoration:none;}

.result{margin-top:24px;border-top:1px solid var(--line);padding-top:20px;}
.tr-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.tr-no{font-family:var(--mono);font-size:14px;color:var(--ink-2);font-weight:600;}
.pill{font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill.baru{background:#e6efff;color:#2563eb;}
.pill.diproses,.pill.menunggu_divisi,.pill.menunggu_pelapor{background:var(--warn-bg);color:var(--warn);}
.pill.selesai,.pill.ditutup{background:var(--ok-bg);color:var(--ok);}
.pill.ditolak{background:var(--err-bg);color:var(--err);}
.last-move{font-size:12px;color:var(--petrol);background:var(--petrol-tint);border:1px solid var(--petrol-tint-2);border-radius:8px;padding:7px 11px;margin:10px 0 0;font-weight:600;}
.tl{position:relative;padding-left:22px;margin-top:18px;}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:10px;width:2px;background:var(--line-2);}
.tl-i{position:relative;margin-bottom:16px;}
.tl-i::before{content:"";position:absolute;left:-20px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--card);border:2px solid var(--line-2);}
.tl-i.done::before{background:var(--ok);border-color:var(--ok);}
.tl-i.now::before{background:var(--petrol);border-color:var(--petrol);box-shadow:0 0 0 4px var(--petrol-tint);}
.tl-s{font-size:13px;font-weight:700;}
.tl-b{font-size:12.5px;color:var(--ink-2);}
.tl-t{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);}
.empty{color:var(--ink-3);font-size:13px;text-align:center;padding:14px;}

/* flash */
.flash{border-radius:10px;padding:11px 15px;font-size:13px;font-weight:500;margin-bottom:18px;}
.flash.err{background:var(--err-bg);color:var(--err);border:1px solid color-mix(in srgb,var(--err) 30%,transparent);}
.flash.ok{background:var(--ok-bg);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);}

/* ===== responsive ===== */
@media (max-width:860px){
  .shell{flex-direction:column;}
  .aside{display:none;}
  .mbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:var(--petrol-800);color:#fff;position:sticky;top:0;z-index:10;}
  .mbar .brand-w b{font-size:15px;} .mbar .brand-w span{display:none;}
  .mbar .brand-w .mk{width:32px;height:32px;font-size:15px;}
  .mbar a.mlink{color:#fff;font-size:12.5px;font-weight:600;text-decoration:none;opacity:.85;}
  .main{padding:24px 20px 40px;}
  .row2{grid-template-columns:1fr;}
  .cats{grid-template-columns:1fr 1fr;}
  .panel-top{flex-direction:column;gap:12px;align-items:stretch;}
  .panel-top h1,.td-head h1{font-size:20px;}
  .td-card,.lookup,.result-card{padding:20px 18px;}
  .td-grid{grid-template-columns:1fr;}
  .signed{width:100%;box-sizing:border-box;}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));}
}

/* ===== ikon SVG ===== */
svg{flex:none;}
.lk-ic svg,.check svg{display:block;}
.last-move{display:inline-flex;align-items:center;gap:6px;}
.file-chip{align-items:center;}
.drop .di svg{display:block;}

/* ===== kotak lengkapi laporan (pelapor) ===== */
.reply-box{margin-top:16px;border:1px solid color-mix(in srgb,var(--warn) 32%,transparent);background:var(--warn-bg);border-radius:12px;padding:15px 16px;}
.reply-h{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:800;color:var(--warn);margin:0 0 3px;}
.reply-sub{font-size:12.5px;color:var(--ink-2);margin:0 0 12px;}
.reply-box .inp{background:var(--card);}
.reply-box .drop{background:var(--card);}
.reply-done{margin-top:16px;display:flex;align-items:center;gap:9px;background:var(--ok-bg);border:1px solid color-mix(in srgb,var(--ok) 32%,transparent);color:var(--ok);border-radius:12px;padding:12px 15px;font-size:13px;font-weight:600;}

/* umpan bot — tidak boleh terlihat maupun terjangkau keyboard */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}

/* ikon di dalam tombol bukan sasaran klik */
.btn svg,.gbtn svg{pointer-events:none;}

/* tautan masuk staf — sengaja kecil & tidak menonjol di portal customer */
.staff-link{color:rgba(255,255,255,.55)!important;font-size:11px;font-weight:500!important;border-bottom:none!important;text-decoration:none;margin-top:2px;}
.staff-link:hover{color:#fff!important;}