/* Zavinix - halaman Tiket (user) & Tiket/Pengguna (admin) */
:root{--bg:#07080d;--s1:#0e1018;--s2:#151824;--s3:#1c2030;--bd:rgba(245,192,101,.2);--bd2:rgba(255,255,255,.09);
--tx:#f1f2f6;--mu:#8d93a8;--ac:#F5C065;--ac2:#d9a441;--acx:#1a1204;--ok:#3cdc8c;--wr:#ffbe3c;--er:#ff6b6b}
body.adm{--bg:#07060d;--s1:#0f0d1a;--s2:#161326;--s3:#1e1a33;--bd:#2a2547;--bd2:#2a2547;--tx:#ece9fb;--mu:#8d87b3;--ac:#7c5cff;--ac2:#3b82f6;--acx:#fff}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{background:var(--bg);color:var(--tx);font:14px/1.5 'Plus Jakarta Sans','Inter','Segoe UI',system-ui,sans-serif;min-height:100vh;
padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

/* ---- bar atas ---- */
.tk-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:10px 18px;background:rgba(7,8,13,.92);border-bottom:1px solid var(--bd)}
body.adm .tk-top{background:rgba(15,13,26,.95)}
.tk-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:1;min-width:0}
.tk-brand img{height:40px;width:auto;object-fit:contain}
.tk-brand-text{font-size:1.25rem;font-weight:800;letter-spacing:2px;
background-image:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%),linear-gradient(135deg,#FFE8A3 0%,#F5C065 25%,#E0A93B 45%,#9D5BD2 75%,#6B21A8 100%);
background-size:200% 100%,100% 100%;background-position:250% 0,0 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:tkShine 6s infinite linear}
@keyframes tkShine{0%{background-position:250% 0,0 0}100%{background-position:-150% 0,0 0}}
.tk-tag{font-size:10px;letter-spacing:.16em;color:var(--mu);font-weight:700;margin-left:2px}
.tk-back{padding:8px 14px;border:1px solid var(--bd);border-radius:10px;text-decoration:none;font-weight:700;font-size:13px;background:var(--s1)}
.tk-wrap{max-width:860px;margin:0 auto;padding:22px 16px 70px}
body.adm .tk-wrap{max-width:1180px}

/* ---- komponen umum ---- */
.tk-h{font-size:22px;font-weight:800}.tk-sub{color:var(--mu);font-size:13px;margin:4px 0 16px}
.tk-card{background:var(--s1);border:1px solid var(--bd2);border-radius:14px;padding:16px}
.tk-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--bd2);background:var(--s3);padding:10px 16px;border-radius:11px;font-weight:700;font-size:13.5px;cursor:pointer}
.tk-btn:hover{border-color:var(--ac)}
.tk-btn.p{background:linear-gradient(135deg,var(--ac),var(--ac2));color:var(--acx);border:0}
.tk-btn.d{color:var(--er)}.tk-btn.s{padding:6px 11px;font-size:12px;border-radius:9px}
.tk-btn:disabled{opacity:.55;cursor:default}
.tk-badge{display:inline-block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:4px 9px;border-radius:999px;white-space:nowrap}
.tk-badge.open{background:rgba(255,190,60,.16);color:var(--wr)}
.tk-badge.answered{background:rgba(60,220,140,.16);color:var(--ok)}
.tk-badge.closed{background:rgba(255,255,255,.09);color:var(--mu)}
.tk-chip{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:8px;background:var(--s3);color:var(--mu)}
.tk-chip.pri-Tinggi{color:#ffa94d}.tk-chip.pri-Mendesak{color:var(--er);background:rgba(255,107,107,.12)}
.tk-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tk-spacer{flex:1}
.tk-loading,.tk-empty{text-align:center;color:var(--mu);padding:38px 10px}
.tk-err{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.3);color:#ffb4b4;border-radius:11px;padding:10px 13px;font-size:13px;margin-bottom:12px}
.tk-ok{background:rgba(60,220,140,.1);border:1px solid rgba(60,220,140,.3);color:#9ff0c6;border-radius:11px;padding:10px 13px;font-size:13px;margin-bottom:12px}
.tk-warn{background:rgba(255,190,60,.1);border:1px solid rgba(255,190,60,.3);color:#ffd88a;border-radius:11px;padding:10px 13px;font-size:13px;margin-bottom:12px}
.tk-toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(30px);opacity:0;pointer-events:none;
background:var(--s3);border:1px solid var(--bd);padding:11px 18px;border-radius:12px;font-weight:700;font-size:13.5px;transition:.25s;z-index:60;max-width:90vw}
.tk-toast.on{opacity:1;transform:translateX(-50%)}

/* ---- daftar tiket ---- */
.tk-me{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;font-size:12.5px;color:var(--mu)}
.tk-me b{color:var(--tx);font-weight:700}
.tk-item{display:block;width:100%;text-align:left;background:var(--s1);border:1px solid var(--bd2);border-radius:14px;padding:14px 15px;margin-bottom:10px;cursor:pointer}
.tk-item:hover{border-color:var(--ac)}
.tk-item .t{font-weight:800;font-size:14.5px;margin:6px 0 2px;word-break:break-word}
.tk-item .m{color:var(--mu);font-size:12px}

/* ---- form ---- */
.tk-form label{display:block;font-size:12.5px;color:var(--mu);margin:0 0 5px;font-weight:600}
.tk-form .g{margin-bottom:14px}
.tk-form input,.tk-form select,.tk-form textarea{width:100%;padding:12px 14px;border-radius:11px;border:1px solid var(--bd2);background:var(--s2);outline:none}
.tk-form select option{background:#151824}
.tk-form input:focus,.tk-form select:focus,.tk-form textarea:focus{border-color:var(--ac)}
.tk-form textarea{min-height:170px;resize:vertical;line-height:1.5}
.tk-cnt{text-align:right;font-size:11.5px;color:var(--mu);margin-top:4px}
.tk-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.tk-2{grid-template-columns:1fr}}
.tk-who{background:var(--s2);border:1px dashed var(--bd);border-radius:11px;padding:10px 13px;font-size:12.5px;color:var(--mu);margin-bottom:14px}
.tk-who b{color:var(--tx)}

/* ---- percakapan ---- */
.tk-thead{margin-bottom:14px}
.tk-thead h2{font-size:18px;font-weight:800;margin:8px 0 6px;word-break:break-word}
.tk-msgs{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.tk-msg{max-width:88%;padding:11px 14px;border-radius:14px;background:var(--s2);border:1px solid var(--bd2)}
.tk-msg.me{align-self:flex-end;background:rgba(245,192,101,.12);border-color:rgba(245,192,101,.28)}
body.adm .tk-msg.me{background:rgba(124,92,255,.14);border-color:rgba(124,92,255,.32)}
.tk-msg .w{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--mu);margin-bottom:4px;flex-wrap:wrap}
.tk-msg .w b{color:var(--tx)}
.tk-staff{font-size:9.5px;font-weight:800;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:linear-gradient(135deg,var(--ac),var(--ac2));color:var(--acx)}
.tk-msg .b{white-space:pre-wrap;word-break:break-word;font-size:14px}
.tk-reply textarea{width:100%;min-height:110px;padding:12px 14px;border-radius:11px;border:1px solid var(--bd2);background:var(--s2);outline:none;resize:vertical;margin-bottom:10px}
.tk-reply textarea:focus{border-color:var(--ac)}

/* ---- admin ---- */
.ad-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px}
.ad-stat{background:var(--s1);border:1px solid var(--bd2);border-radius:13px;padding:12px 14px}
.ad-stat .l{color:var(--mu);font-size:11.5px;font-weight:700}.ad-stat .v{font-size:22px;font-weight:800;margin-top:2px}
.ad-stat.hot{border-color:rgba(255,190,60,.5)}.ad-stat.hot .v{color:var(--wr)}
.ad-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.ad-tabs button{padding:9px 16px;border-radius:10px;border:1px solid var(--bd2);background:var(--s1);font-weight:700;cursor:pointer;color:var(--mu)}
.ad-tabs button.on{background:linear-gradient(135deg,var(--ac),var(--ac2));color:var(--acx);border:0}
.ad-grid{display:grid;grid-template-columns:380px 1fr;gap:14px;align-items:start}
@media(max-width:880px){.ad-grid{grid-template-columns:1fr}.ad-grid.thread .ad-list{display:none}.ad-grid:not(.thread) .ad-detail{display:none}}
.ad-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.ad-filters button{padding:6px 12px;border-radius:999px;border:1px solid var(--bd2);background:var(--s1);color:var(--mu);font-weight:700;font-size:12px;cursor:pointer}
.ad-filters button.on{background:var(--ac);color:var(--acx);border-color:var(--ac)}
.ad-search{width:100%;padding:10px 13px;border-radius:11px;border:1px solid var(--bd2);background:var(--s2);margin-bottom:10px;outline:none}
.ad-list .tk-item.on{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac) inset}
.ad-list .tk-item.need{border-left:3px solid var(--wr)}
.ad-who{background:var(--s2);border:1px solid var(--bd2);border-radius:12px;padding:11px 14px;margin:10px 0;font-size:13px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px}
.ad-who span{color:var(--mu)}
.ad-nm{display:flex;gap:8px;align-items:center;margin-bottom:10px;font-size:12.5px;color:var(--mu)}
.ad-nm input{flex:1;max-width:240px;padding:8px 11px;border-radius:9px;border:1px solid var(--bd2);background:var(--s2);outline:none}
.ad-tbl{width:100%;border-collapse:collapse;font-size:13px}
.ad-tbl th{text-align:left;color:var(--mu);font-size:11.5px;padding:9px 10px;border-bottom:1px solid var(--bd2);white-space:nowrap}
.ad-tbl td{padding:10px;border-bottom:1px solid var(--bd2);vertical-align:top}
.ad-scroll{overflow-x:auto}
.ad-sel{padding:6px 10px;border-radius:9px;border:1px solid var(--bd2);background:var(--s2);outline:none;font-size:12.5px}
.ad-sel option{background:#161326}