/*
======================================================================
REDIRECT CHECKER — MAIN STYLE
CSS utama dipisahkan dari index.php.
======================================================================
*/

:root{
  --stroke:rgba(255,255,255,.12);
  --stroke2:rgba(255,255,255,.08);
  --text:rgba(255,255,255,.94);
  --muted:rgba(255,255,255,.62);
  --dim:rgba(255,255,255,.40);
  --red:#ff2a4d;
  --red2:#ff0033;
  --mint:#22ff9a;
  --warn:#ffd166;
  --blue:#7fa7ff;
  --shadow:0 22px 70px rgba(0,0,0,.62);
  --panel:rgba(10,10,14,.72);
  --panel2:rgba(10,10,14,.55);
  --input:rgba(0,0,0,.30);
  --radius:18px;
  --font:"Plus Jakarta Sans",Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;}

 *{
  box-sizing:border-box}

html,body{
  min-height:100%}

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  line-height:1.45;
  background:url("https://photosme.site/uploads/kangtoto/1774933202_tauco.webp") center/cover fixed no-repeat;
  overflow-x:hidden}

body:before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.34);
  z-index:0;
  pointer-events:none}

body>*{
  position:relative;
  z-index:1}

.wrap{
  width:min(1220px,calc(100% - 32px));
  margin:30px auto 44px}

.top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:18px}

.brand{
  display:flex;
  gap:13px;
  align-items:center}

.logo{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,rgba(255,42,77,.30),rgba(255,42,77,.10));
  border:1px solid rgba(255,42,77,.25);
  box-shadow:0 12px 28px rgba(255,42,77,.12)}

h1{
  font-size:28px;
  line-height:1.1;
  margin:0;
  text-shadow:0 2px 0 rgba(0,0,0,.3)}

.sub{
  margin:6px 0 0;
  color:#c7d3ea;
  font-size:14px}

.home-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:16px;
  color:#dfffe8;
  text-decoration:none;
  background:radial-gradient(circle at 30% 20%,rgba(34,255,154,.22),transparent 42%),linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.035));
  border:1px solid rgba(34,255,154,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 28px rgba(0,0,0,.35),0 0 22px rgba(34,255,154,.10);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:.18s ease;}

 .home-icon svg{
  width:21px;
  height:21px;
  fill:currentColor;
  filter:drop-shadow(0 0 8px rgba(34,255,154,.38));}

 .home-icon:hover{
  transform:translateY(-2px);
  color:#ffffff;
  border-color:rgba(34,255,154,.52);
  background:radial-gradient(circle at 30% 20%,rgba(34,255,154,.32),transparent 45%),linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.045));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 16px 35px rgba(0,0,0,.42),0 0 28px rgba(34,255,154,.18);}

 .home-icon:active{
  transform:translateY(0) scale(.97);}

.layout{
  display:grid;
  grid-template-columns:420px minmax(0,1fr);
  gap:16px}

.card{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative}

.card:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:radial-gradient(520px 260px at 12% 0%,rgba(255,42,77,.14),transparent 62%),radial-gradient(460px 240px at 92% 8%,rgba(34,255,154,.08),transparent 60%);
  pointer-events:none}

.card>*{
  position:relative}

.card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 16px;
  border-bottom:1px solid var(--stroke2);
  background:rgba(255,255,255,.035)}

.card-head b{
  font-size:16px}

.small{
  font-size:12px;
  color:var(--muted)}

.panel-body{
  padding:16px}

.label{
  display:block;
  margin:0 0 8px;
  color:rgba(255,255,255,.82);
  font-weight:800;
  font-size:12px}

.textarea,.select,.input{
  width:100%;
  border:1px solid rgba(255,255,255,.13);
  background:var(--input);
  color:var(--text);
  border-radius:14px;
  outline:none;
  padding:12px;
  font-size:13px}

.textarea{
  min-height:330px;
  resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  line-height:1.5}

.textarea:focus,.select:focus,.input:focus{
  border-color:rgba(255,42,77,.46);
  box-shadow:0 0 0 4px rgba(255,42,77,.12)}

.select{
  height:43px}

.select option{
  background:#15151b;
  color:#fff}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px}

.field.full{
  grid-column:1/-1}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px}

.btn{
  border:1px solid var(--stroke2);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:11px 14px;
  border-radius:12px;
  font-weight:900;
  font-size:13px;
  cursor:pointer;
  transition:.18s ease;
  display:inline-flex;
  align-items:center;
  gap:8px}

.btn:hover{
  transform:translateY(-1px)}

.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none}

.btn.primary{
  border-color:rgba(255,42,77,.35);
  background:linear-gradient(180deg,rgba(255,42,77,.34),rgba(255,0,51,.16));
  box-shadow:0 14px 30px rgba(255,42,77,.14)}

.btn.green{
  border-color:rgba(34,255,154,.35);
  background:linear-gradient(180deg,rgba(34,255,154,.26),rgba(34,255,154,.10))}

.btn.warn{
  border-color:rgba(255,209,102,.36);
  background:linear-gradient(180deg,rgba(255,209,102,.30),rgba(255,209,102,.09));
  color:#fff4ce}

.progress{
  height:9px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(0,0,0,.22);
  overflow:hidden;
  margin-top:14px}

.bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,rgba(255,42,77,.88),rgba(34,255,154,.75));
  transition:width .22s ease}

.security{
  margin-top:14px;
  border:1px solid rgba(255,209,102,.26);
  background:rgba(255,209,102,.08);
  color:#ffe2a3;
  border-radius:13px;
  padding:10px 12px;
  font-size:12px;
  font-weight:700}

.stats{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  padding:16px}

.stat{
  border:1px solid var(--stroke2);
  border-radius:14px;
  background:rgba(0,0,0,.20);
  padding:13px}

.stat b{
  display:block;
  font-size:24px;
  line-height:1}

.stat span{
  font-size:12px;
  color:var(--muted)}

.result-tools{
  display:flex;
  gap:10px;
  flex-wrap:wrap}

.view-tabs{
  display:flex;
  gap:10px;
  padding:0 16px 12px}

.view-tabs .btn.active{
  border-color:rgba(255,42,77,.35);
  background:linear-gradient(180deg,rgba(255,42,77,.24),rgba(255,0,51,.10))}

.table-wrap{
  margin:0 16px 16px;
  border:1px solid var(--stroke2);
  border-radius:14px;
  overflow:auto;
  background:rgba(0,0,0,.18)}

table{
  border-collapse:separate;
  border-spacing:0;
  width:100%}

.summary-table{
  min-width:900px}

.summary-table th,.summary-table td{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.07);
  text-align:left;
  vertical-align:top;
  font-size:13px}

.summary-table th{
  position:sticky;
  top:0;
  background:rgba(20,20,26,.96);
  z-index:2;
  color:rgba(255,255,255,.74);
  font-weight:900}

.summary-table tr:hover td{
  background:rgba(255,42,77,.055)}

.url,.ip-summary,.source-ip-inline{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  word-break:break-all}

.source-meta{
  margin-top:7px}

.source-ip-inline{
  display:block;
  font-size:12px;
  color:#ffe2a3;
  line-height:1.4}

.source-ip-inline b{
  color:rgba(255,255,255,.70);
  font-weight:800;
  margin-right:6px;
  font-family:var(--font)}

.ip-summary{
  font-size:12px;
  color:#ffe2a3;
  line-height:1.35;
  max-width:220px}

.empty{
  padding:18px;
  color:rgba(255,255,255,.56);
  text-align:center}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  white-space:nowrap}

.pill.ok{
  border-color:rgba(34,255,154,.35);
  background:rgba(34,255,154,.10);
  color:#caffdf}

.pill.mid{
  border-color:rgba(255,209,102,.36);
  background:rgba(255,209,102,.11);
  color:#ffe5a7}

.pill.bad{
  border-color:rgba(255,75,107,.36);
  background:rgba(255,75,107,.11);
  color:#ffc8d0}

.pill.blue{
  border-color:rgba(120,166,255,.35);
  background:rgba(120,166,255,.10);
  color:#d6e3ff}

.bagan-list{
  display:grid;
  gap:14px;
  padding:0 16px 16px}

.bagan-card{
  border:1px solid var(--stroke2);
  background:rgba(0,0,0,.22);
  border-radius:16px;
  overflow:hidden}

.bagan-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  background:rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.08)}

.bagan-title b{
  display:block;
  font-size:12px;
  color:rgba(255,255,255,.75)}

.src{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  word-break:break-all;
  margin-top:4px;
  font-size:12px}

.mini{
  display:flex;
  gap:8px;
  align-items:flex-start;
  flex-wrap:wrap;
  justify-content:flex-end}

.bagan-table th,.bagan-table td{
  border:1px solid rgba(216,232,180,.45);
  padding:11px 12px;
  text-align:left;
  vertical-align:top;
  background:rgba(255,255,255,.94);
  color:#111;
  font-size:13px}

.bagan-table th{
  background:rgba(245,248,250,.98);
  font-weight:900}

.bagan-table .type{
  width:130px;
  white-space:nowrap;
  font-weight:900}

.bagan-table .u{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  word-break:break-all}

.bagan-table .dns{
  width:260px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  word-break:break-all;
  font-size:12px;
  color:#1c1c1c}

.dns-box b{
  display:inline-block;
  min-width:28px;
  color:#111}

.dns-box div+div{
  margin-top:4px}

.ssl-badge{
  display:inline-flex;
  align-items:center;
  margin-top:8px;
  padding:5px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid rgba(0,0,0,.12)}

.ssl-badge.ok{
  background:#e9fff2;
  color:#096b38;
  border-color:#a8ebc4}

.ssl-badge.bad{
  background:#fff0f2;
  color:#a4001c;
  border-color:#ffb8c1}

.ssl-badge.na{
  background:#f2f2f2;
  color:#555;
  border-color:#d5d5d5}

.ssl-note{
  display:block;
  margin-top:5px;
  color:#9b0018;
  font-size:11px;
  line-height:1.35;
  word-break:break-word}

.bagan-table .ok td{
  background:#effcf1}

.bagan-table .bad td{
  background:#fff1f3}

.bagan-note{
  padding:9px 14px;
  color:rgba(255,255,255,.62);
  font-size:12px;
  word-break:break-all;
  border-top:1px solid rgba(255,255,255,.08)}

.hidden{
  display:none!important}

.toast{
  position:fixed;
  right:18px;
  bottom:18px;
  background:rgba(10,10,14,.94);
  border:1px solid var(--stroke);
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  display:none;
  z-index:20;
  box-shadow:var(--shadow)}

.footer{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:14px;
  color:rgba(255,255,255,.36);
  font-size:11px}

.chain-text{
  white-space:pre-wrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  color:rgba(255,255,255,.75);
  margin-top:8px}

.summary-scroll{
  max-height:68vh}

.bagan-scroll{
  max-height:68vh;
  overflow:auto}

.copy-mini{
  padding:7px 10px;
  font-size:11px}

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px}

@media(max-width:1000px){
  .layout{
    grid-template-columns:1fr}

.textarea{
    min-height:230px}

.wrap{
    margin-top:18px}

.top{
    display:block}

.home-icon{
    margin-top:12px}

.bagan-scroll,.summary-scroll{
    max-height:none}}

@media(max-width:700px){
  .wrap{
    width:min(100% - 20px,1220px)}

.top h1{
    font-size:22px}

.form-grid,.stats{
    grid-template-columns:1fr}

.card-head{
    display:block}

.result-tools{
    margin-top:12px}

.btn{
    width:100%;
    justify-content:center}

.view-tabs{
    display:grid;
    grid-template-columns:1fr}

.bagan-title{
    display:block}

.mini{
    justify-content:flex-start;
    margin-top:10px}}

 

/* === Premium Upgrade UI === */

 @keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(10px)}

to{
    opacity:1;
    transform:translateY(0)}}

 @keyframes glowPulse{
  0%,100%{
    box-shadow:0 0 0 rgba(255,42,77,0)}

50%{
    box-shadow:0 0 28px rgba(255,42,77,.18)}}

 @keyframes scanMove{
  0%{
    background-position:0 0}

100%{
    background-position:160px 0}}

 .logo{
  animation:glowPulse 2.6s ease-in-out infinite}

.bar{
  background-size:160px 100%;
  animation:scanMove 1.4s linear infinite}

.smart-tools{
  margin:0 16px 12px;
  display:grid;
  gap:12px;
  animation:fadeUp .35s ease both}

.filter-chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap}

.filter-chip{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
  color:#fff;
  border-radius:999px;
  padding:9px 13px;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  transition:.18s ease}

.filter-chip:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.09)}

.filter-chip.active{
  border-color:rgba(255,42,77,.58);
  background:linear-gradient(180deg,rgba(255,42,77,.34),rgba(255,0,51,.12));
  box-shadow:0 10px 26px rgba(255,42,77,.12)}

.filter-chip.ok{
  color:#8dffbe;
  border-color:rgba(34,255,154,.28)}

.filter-chip.warn{
  color:#ffe09a;
  border-color:rgba(255,209,102,.30)}

.filter-chip.bad{
  color:#ff98aa;
  border-color:rgba(255,75,107,.30)}

.filter-chip.orange{
  color:#ffb06d;
  border-color:rgba(255,138,28,.32)}

.filter-chip.purple{
  color:#c6a8ff;
  border-color:rgba(168,112,255,.35)}

.filter-chip.blue{
  color:#8fbdff;
  border-color:rgba(120,166,255,.35)}

.search-row{
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto auto;
  gap:10px;
  align-items:center}

.search-box{
  height:42px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.24);
  border-radius:14px;
  display:flex;
  align-items:center;
  padding:0 12px}

.search-box input{
  width:100%;
  border:0;
  outline:none;
  background:transparent;
  color:#fff;
  font-size:13px}

.search-box span{
  color:rgba(255,255,255,.56);
  font-size:18px}

.toggle-line{
  display:flex;
  align-items:center;
  gap:9px;
  color:rgba(255,255,255,.76);
  font-size:12px;
  font-weight:800;
  white-space:nowrap}

.toggle-line input{
  display:none}

.toggle-line i{
  width:38px;
  height:22px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14);
  position:relative;
  transition:.2s ease}

.toggle-line i:before{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  left:3px;
  top:2px;
  border-radius:50%;
  background:rgba(255,255,255,.72);
  transition:.2s ease}

.toggle-line input:checked+i{
  background:rgba(34,255,154,.28);
  border-color:rgba(34,255,154,.42)}

.toggle-line input:checked+i:before{
  left:18px;
  background:#9effc5}

.summary-table{
  min-width:1180px}

.summary-table th span{
  display:block;
  margin-top:2px;
  font-size:11px;
  color:rgba(255,255,255,.48)}

.summary-table tbody tr{
  animation:fadeUp .28s ease both;
  cursor:pointer}

.summary-table tbody tr.selected td{
  background:rgba(255,42,77,.085)!important}

.summary-table tbody tr.selected td:first-child{
  box-shadow:inset 3px 0 0 rgba(255,42,77,.90)}

.source-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap}

.source-ip-inline{
  display:inline-flex;
  align-items:center;
  gap:4px}

.copy-micro{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.74);
  border-radius:7px;
  padding:2px 6px;
  font-size:11px;
  cursor:pointer}

.chain-mini{
  margin-top:5px;
  color:rgba(255,255,255,.68);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  line-height:1.4}

.relation-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  padding:7px 9px;
  font-size:11px;
  font-weight:1000;
  line-height:1.2;
  text-align:center;
  border:1px solid rgba(255,255,255,.12)}

.relation-badge.external{
  color:#ffbd7b;
  background:rgba(255,138,28,.12);
  border-color:rgba(255,138,28,.34)}

.relation-badge.same{
  color:#a9d3ff;
  background:rgba(120,166,255,.10);
  border-color:rgba(120,166,255,.30)}

.sameip-badge{
  display:inline-flex;
  border:1px solid rgba(120,166,255,.38);
  background:rgba(120,166,255,.11);
  color:#91bdff;
  border-radius:10px;
  padding:7px 9px;
  font-size:11px;
  font-weight:1000;
  line-height:1.25;
  text-align:center}

.muted-dash{
  color:rgba(255,255,255,.35)}

.detail-panel{
  margin:0 16px 16px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.20));
  padding:14px;
  animation:fadeUp .35s ease both}

.detail-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px}

.detail-head b{
  font-size:14px}

.detail-head span{
  color:var(--muted);
  font-size:12px}

.detail-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  margin-bottom:13px}

.detail-item{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.22);
  border-radius:12px;
  padding:10px;
  min-height:62px}

.detail-item span{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  margin-bottom:5px}

.detail-item b,.detail-item div{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  word-break:break-all}

.chain-cards{
  display:flex;
  gap:10px;
  overflow:auto;
  padding-bottom:4px}

.chain-card{
  min-width:170px;
  max-width:220px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(10,10,14,.62);
  border-radius:14px;
  padding:11px;
  position:relative}

.chain-card.ok{
  border-color:rgba(34,255,154,.30)}

.chain-card.mid{
  border-color:rgba(255,209,102,.28)}

.chain-card.bad{
  border-color:rgba(255,75,107,.32)}

.chain-card .num{
  display:inline-grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  font-weight:900;
  margin-bottom:8px}

.chain-card .ccode{
  font-weight:1000;
  margin-bottom:6px;
  color:#e9e9f5}

.chain-card .curl{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  line-height:1.35;
  word-break:break-all}

.chain-card .cip{
  margin-top:8px;
  color:#ffe2a3;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;
  word-break:break-all}

.chain-arrow{
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.58);
  font-size:23px;
  min-width:18px}

.scan-status{
  display:inline-flex;
  gap:6px;
  align-items:center}

.scan-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#22ff9a;
  box-shadow:0 0 18px rgba(34,255,154,.65);
  animation:glowPulse 1.2s ease-in-out infinite}

@media(max-width:900px){
  .search-row{
    grid-template-columns:1fr}

.detail-grid{
    grid-template-columns:1fr 1fr}

.toggle-line{
    justify-content:space-between}

.smart-tools{
    margin-inline:10px}}

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

.filter-chip{
    width:100%;
    justify-content:center}

.filter-chips{
    display:grid;
    grid-template-columns:1fr 1fr}

.search-row .btn{
    width:100%}}

 

/* === Compact Cyber Scan Loader v2 === */

 .scan-loader{
  margin-top:14px;
  padding:11px 12px 10px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 28px rgba(255,42,77,.08);
  overflow:hidden;
  position:relative}

.scan-loader:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(140px 60px at 8% 0%,rgba(255,42,77,.22),transparent 68%),linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);
  opacity:.8;
  pointer-events:none}

.scan-loader>*{
  position:relative}

.scan-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:9px}

.scan-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0}

.scan-title{
  font-size:11px;
  font-weight:900;
  color:rgba(255,255,255,.86);
  letter-spacing:.2px;
  white-space:nowrap}

.scan-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0}

.scan-count{
  font-size:11px;
  font-weight:800;
  color:#ffd6a0;
  text-shadow:0 0 10px rgba(255,151,38,.34)}

.scan-percent{
  min-width:42px;
  text-align:center;
  font-size:11px;
  font-weight:1000;
  color:#ffdbe1;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,42,77,.32);
  background:rgba(255,42,77,.11);
  box-shadow:0 0 16px rgba(255,42,77,.12)}

.scan-loader .progress{
  position:relative;
  height:10px;
  margin-top:0;
  border-radius:999px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 0 12px rgba(0,0,0,.70),0 0 22px rgba(255,42,77,.08)}

.scan-loader .progress:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px);
  background-size:22px 100%;
  opacity:.36;
  animation:scanGridMove 2s linear infinite}

.scan-loader .bar{
  position:relative;
  height:100%;
  width:0%;
  border-radius:999px;
  overflow:hidden;
  background:linear-gradient(90deg,#17d877 0%,#24f29a 36%,#ffc04f 62%,#ff365a 100%);
  background-size:190px 100%;
  box-shadow:0 0 12px rgba(23,216,119,.48),0 0 24px rgba(255,54,90,.34);
  transition:width .46s cubic-bezier(.2,.85,.2,1);
  animation:scanBarFlow 2.3s linear infinite}

.scan-loader .bar:after{
  content:"";
  position:absolute;
  right:-7px;
  top:50%;
  width:16px;
  height:16px;
  border-radius:50%;
  transform:translateY(-50%);
  background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.95),0 0 22px rgba(255,70,92,.95),0 0 34px rgba(34,255,154,.65)}

.scan-glow{
  position:absolute;
  inset:-2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  transform:translateX(-130%);
  animation:scanBeam 1.15s linear infinite}

.scan-desc{
  margin-top:8px!important;
  min-height:17px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:rgba(255,255,255,.66);
  font-size:11px}

.scan-loader .scan-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#ff3c57;
  box-shadow:0 0 12px rgba(255,60,87,.82);
  animation:scanDotPulse 1.05s ease-in-out infinite;
  flex-shrink:0}

.scan-loader.idle .bar{
  background:linear-gradient(90deg,rgba(255,255,255,.13),rgba(255,255,255,.06));
  box-shadow:none;
  animation:none}

.scan-loader.idle .bar:after,.scan-loader.idle .scan-glow{
  display:none}

.scan-loader.idle .scan-dot{
  background:#ffd166;
  box-shadow:0 0 12px rgba(255,209,102,.55)}

.scan-loader.running .scan-title:after{
  content:"";
  display:inline-block;
  width:14px;
  text-align:left;
  animation:scanDots 1.15s steps(4,end) infinite}

.scan-loader.done .bar{
  background:linear-gradient(90deg,#18d978,#69ffad);
  box-shadow:0 0 14px rgba(24,217,120,.58),0 0 28px rgba(24,217,120,.30);
  animation:none}

.scan-loader.done .scan-percent{
  color:#dfffe8;
  background:rgba(34,255,154,.13);
  border-color:rgba(34,255,154,.36);
  box-shadow:0 0 16px rgba(34,255,154,.17)}

.scan-loader.done .scan-dot{
  background:#22ff9a;
  box-shadow:0 0 14px rgba(34,255,154,.82)}

.scan-loader.stopped .bar{
  background:linear-gradient(90deg,#ffd166,#ff8a3d);
  box-shadow:0 0 14px rgba(255,209,102,.34);
  animation:none}

.scan-loader.stopped .scan-dot{
  background:#ffd166;
  box-shadow:0 0 14px rgba(255,209,102,.72)}

@keyframes scanBeam{
  100%{
    transform:translateX(130%)}}

@keyframes scanGridMove{
  100%{
    background-position:22px 0}}

@keyframes scanBarFlow{
  100%{
    background-position:190px 0}}

@keyframes scanDotPulse{
  0%,100%{
    opacity:.55;
    transform:scale(.82)}

50%{
    opacity:1;
    transform:scale(1.18)}}

@keyframes scanDots{
  0%{
    content:""}

25%{
    content:"."}

50%{
    content:".."}

75%,100%{
    content:"..."}}

@media(max-width:600px){
  .scan-meta{
    align-items:flex-start}

.scan-right{
    gap:6px}

.scan-title,.scan-count,.scan-percent,.scan-desc{
    font-size:10.5px}}

/* ==================================================================
   SEO TAUCO NETWORK ANIMATION: START
   Bagian ini boleh disalin ke tools lain.
   ================================================================== */

#networkBgCanvas.network-bg-canvas{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;
  display:block !important;
  width:100vw !important;
  height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  opacity:1;
  mix-blend-mode:screen;
}

/* Wrapper utama tools harus berada di atas canvas. */
.wrap{
  position:relative;
  z-index:2;
}

/* ==================================================================
   SEO TAUCO NETWORK ANIMATION: END
   ================================================================== */