/* Dasar bersama situs publik dan panel. Warna brand berasal dari variabel yang dicetak plugin, jangan dituliskan di sini. */
@font-face{font-family:"Fira Sans";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/FiraSans-Regular.woff) format("woff")}
@font-face{font-family:"Fira Sans";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/FiraSans-Italic.woff) format("woff")}
@font-face{font-family:"Fira Sans";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/FiraSans-Medium.woff) format("woff")}
@font-face{font-family:"Fira Sans";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/FiraSans-SemiBold.woff) format("woff")}
@font-face{font-family:"Fira Sans";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/FiraSans-Bold.woff) format("woff")}
@font-face{font-family:"Fira Sans";font-weight:800;font-style:normal;font-display:swap;src:url(../fonts/FiraSans-ExtraBold.woff) format("woff")}
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/Poppins-Bold.woff) format("woff")}
@font-face{font-family:"Poppins";font-weight:700;font-style:italic;font-display:swap;src:url(../fonts/Poppins-BoldItalic.woff) format("woff")}
@font-face{font-family:"Poppins";font-weight:800;font-style:normal;font-display:swap;src:url(../fonts/Poppins-ExtraBold.woff) format("woff")}
@font-face{font-family:"Poppins";font-weight:800;font-style:italic;font-display:swap;src:url(../fonts/Poppins-ExtraBoldItalic.woff) format("woff")}

:root{
  --tq-ink:#16171b;--tq-text:#3b3e47;--tq-muted:#6a6f7c;--tq-line:#e6e7ec;--tq-bg:#f6f6f8;--tq-surface:#fff;
  --tq-ok:#0f8a4a;--tq-ok-soft:#e4f6ec;--tq-warn:#b45f06;--tq-warn-soft:#fdf0dc;--tq-info:#1f5fd6;--tq-info-soft:#e5eefc;--tq-purple:#6d33d6;--tq-purple-soft:#efe8fc;--tq-danger:#c81e1e;--tq-danger-soft:#fde8e8;
  --tq-gold:#ffd43b;
  --tq-r:14px;--tq-r-sm:10px;--tq-r-lg:20px;
  --tq-sh-1:0 1px 2px rgba(20,20,30,.06),0 2px 8px rgba(20,20,30,.05);--tq-sh-2:0 6px 24px rgba(20,20,30,.1);--tq-sh-3:0 14px 40px rgba(20,20,30,.16);
  --tq-font:"Fira Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--tq-font-head:"Poppins","Fira Sans",system-ui,sans-serif;
  --tq-ease:cubic-bezier(.2,.7,.3,1)
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--tq-font);font-size:15px;line-height:1.5;color:var(--tq-text);background:var(--tq-surface);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--tq-ink);line-height:1.2;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0}
img,svg,video{max-width:100%}
img{height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--tq-primary);outline-offset:2px}
[hidden]{display:none!important}
.tq-i{flex:none;vertical-align:middle}

/* Logo: selaras dengan keluaran Brand::logoHtml */
.tq-logo{display:inline-flex;align-items:center;gap:7px;color:var(--tq-ink);line-height:1;white-space:nowrap}
.tq-logo .tq-swoosh{flex:none;width:auto}
.tq-logo-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.tq-logo-t b{font-family:var(--tq-font-head);font-weight:800;font-style:italic;font-size:25px;letter-spacing:-.01em;color:#23252b}
.tq-logo-t b em{font-style:italic;color:var(--tq-primary)}
.tq-logo-t small{font-family:var(--tq-font);font-weight:700;font-style:normal;font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:#23252b}
.tq-logo--white,.tq-logo--white .tq-logo-t b,.tq-logo--white .tq-logo-t b em,.tq-logo--white .tq-logo-t small{color:#fff}
.tq-logo--dark .tq-logo-t b,.tq-logo--dark .tq-logo-t b em,.tq-logo--dark .tq-logo-t small{color:#111}
.tq-logo-img{height:44px;width:auto;max-width:220px;object-fit:contain}

/* Tombol */
.tq-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:1.5px solid transparent;border-radius:var(--tq-r-sm);font-weight:700;font-size:15px;line-height:1.2;background:none;color:var(--tq-ink);text-align:center;transition:transform .15s var(--tq-ease),box-shadow .15s,background .15s,color .15s,border-color .15s;cursor:pointer}
.tq-btn:active{transform:translateY(1px)}
.tq-btn[disabled],.tq-btn.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.tq-btn--primary{background:linear-gradient(180deg,var(--tq-button),var(--tq-primary-dark));color:#fff;box-shadow:0 3px 10px color-mix(in srgb,var(--tq-button) 30%,transparent)}
.tq-btn--primary:hover{filter:brightness(1.07);box-shadow:0 6px 16px color-mix(in srgb,var(--tq-button) 36%,transparent)}
.tq-btn--outline{border-color:var(--tq-button);color:var(--tq-button);background:#fff}
.tq-btn--outline:hover{background:var(--tq-primary-soft)}
.tq-btn--light{background:#fff;color:var(--tq-button);box-shadow:var(--tq-sh-1)}
.tq-btn--light:hover{background:var(--tq-primary-soft)}
.tq-btn--ghost{background:var(--tq-bg);color:var(--tq-ink)}
.tq-btn--ghost:hover{background:var(--tq-line)}
.tq-btn--sm{min-height:36px;padding:6px 12px;font-size:13px}
.tq-btn--lg{min-height:50px;padding:12px 22px;font-size:16px}
.tq-btn--block{display:flex;width:100%}

/* Input */
.tq-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.tq-field>span{font-size:13px;font-weight:600;color:var(--tq-ink)}
.tq-input{display:block;width:100%;min-height:44px;padding:10px 12px;border:1.5px solid var(--tq-line);border-radius:var(--tq-r-sm);background:#fff;color:var(--tq-ink);font-size:16px;line-height:1.3;transition:border-color .15s,box-shadow .15s}
.tq-input:focus{outline:0;border-color:var(--tq-primary);box-shadow:0 0 0 3px var(--tq-primary-soft)}
.tq-input[aria-invalid=true]{border-color:var(--tq-danger)}
select.tq-input{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.tq-check{display:flex;align-items:center;gap:9px;min-height:44px;font-size:14px;cursor:pointer}
.tq-check input{width:20px;height:20px;accent-color:var(--tq-primary);margin:0;flex:none}

/* Badge status: warna status tetap, tidak mengikuti brand */
.tq-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;line-height:1.4;white-space:nowrap;background:var(--tq-bg);color:var(--tq-text)}
.tq-badge--ok{background:var(--tq-ok-soft);color:var(--tq-ok)}
.tq-badge--warn{background:var(--tq-warn-soft);color:var(--tq-warn)}
.tq-badge--info{background:var(--tq-info-soft);color:var(--tq-info)}
.tq-badge--purple{background:var(--tq-purple-soft);color:var(--tq-purple)}
.tq-badge--danger{background:var(--tq-danger-soft);color:var(--tq-danger)}

.tq-card{background:var(--tq-surface);border:1px solid var(--tq-line);border-radius:var(--tq-r);box-shadow:var(--tq-sh-1)}

/* Penanda data demonstrasi */
.tq-demo-ribbon{position:fixed;left:10px;bottom:calc(var(--tq-nav-h,0px) + env(safe-area-inset-bottom,0px) + 10px);z-index:60;padding:4px 10px;border-radius:999px;background:#17181c;color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;pointer-events:none;opacity:.88}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}