/* ═══ DETEKSI PLATFORM DOWNLOADER — ikon platform + animasi sebelum hasil muncul ═══ */
.pd{--pd-c:var(--accent);display:none;align-items:center;gap:12px;margin-top:10px;padding:10px 12px;border-radius:14px;
  border:1px solid var(--border);background:var(--bg);position:relative;overflow:hidden}
.pd.show{display:flex;animation:pdIn .32s cubic-bezier(.2,.9,.3,1.1) both}
.pd::before{content:'';position:absolute;inset:0;background:radial-gradient(120% 140% at 0% 50%,color-mix(in srgb,var(--pd-c) 16%,transparent),transparent 62%);pointer-events:none}
.pd[data-state="scan"],.pd[data-state="done"]{border-color:color-mix(in srgb,var(--pd-c) 55%,var(--border))}
.pd[data-state="bad"]{border-color:#ef4444}

.pd-ico{position:relative;width:46px;height:46px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--surface2);color:var(--pd-c);animation:pdPop .5s cubic-bezier(.2,1.4,.4,1) both}
.pd-ico .pi{width:24px;height:24px;margin:0;font-size:22px;vertical-align:0}
.pd-ico .pi.has-logo{width:24px;height:24px}
.pd-mono{font-size:19px;font-weight:800;line-height:1;color:var(--pd-c);font-family:inherit}
/* cincin: berdenyut saat terdeteksi, berputar saat mengambil info */
.pd-ico::after{content:'';position:absolute;inset:-3px;z-index:0;border-radius:50%;border:2px solid var(--pd-c);opacity:0;pointer-events:none}
.pd[data-state="found"] .pd-ico::after{animation:pdPulse 1.1s ease-out 1}
.pd[data-state="scan"] .pd-ico::after{opacity:1;border-color:color-mix(in srgb,var(--pd-c) 22%,transparent);border-top-color:var(--pd-c);animation:pdSpin .85s linear infinite}
.pd[data-state="done"] .pd-ico::after{opacity:0;animation:pdPulse .7s ease-out 1}
.pd[data-state="bad"] .pd-ico{color:#ef4444;animation:pdShake .45s ease both}
.pd-tick{z-index:2;position:absolute;right:-5px;bottom:-5px;width:17px;height:17px;border-radius:50%;background:var(--green,#22c55e);color:#fff;
  font-size:10px;font-weight:800;line-height:1;display:none;align-items:center;justify-content:center;border:2px solid var(--bg);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.pd[data-state="done"] .pd-tick{display:flex;animation:pdPop .4s cubic-bezier(.2,1.6,.4,1) both}

.pd-txt{position:relative;min-width:0;flex:1}
.pd-name{font-size:13px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-sub{font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.pd[data-state="bad"] .pd-sub{color:#ef4444}
.pd[data-state="scan"] .pd-sub::after{content:'...';display:inline-block;width:0;overflow:hidden;vertical-align:bottom;white-space:nowrap;animation:pdDots 1.2s steps(4,end) infinite}
.pd-bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--pd-c)}
.pd[data-state="scan"] .pd-bar{width:38%;animation:pdBar 1.1s ease-in-out infinite}

/* hasil muncul bertahap setelah ikon */
#dl-result.pd-reveal .dl2-media{animation:pdRise .45s cubic-bezier(.2,.8,.3,1) both}
#dl-result.pd-reveal #dl-tabs,#dl-result.pd-reveal #dl-quality-grid{animation:pdRise .45s .12s cubic-bezier(.2,.8,.3,1) both}

/* chip platform di mode batch */
.pd-batch{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pd-batch:empty{display:none}
.pd-bchip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:100px;
  background:var(--surface2);border:1px solid var(--border);color:var(--text);animation:pdPop .35s cubic-bezier(.2,1.4,.4,1) both}
.pd-bchip.bad{color:#ef4444;border-color:#ef4444}
.pd-bchip .pi{color:inherit}

@keyframes pdIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pdPop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes pdPulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes pdSpin{to{transform:rotate(360deg)}}
@keyframes pdShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes pdDots{to{width:1.1em}}
@keyframes pdBar{0%{margin-left:-38%}100%{margin-left:100%}}
@keyframes pdRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .pd.show,.pd-ico,.pd-tick,.pd-bchip,#dl-result.pd-reveal .dl2-media,#dl-result.pd-reveal #dl-tabs,#dl-result.pd-reveal #dl-quality-grid{animation:none}
  .pd[data-state="found"] .pd-ico::after,.pd[data-state="done"] .pd-ico::after{animation:none}
  .pd[data-state="scan"] .pd-ico::after{animation-duration:2.4s}
  .pd[data-state="scan"] .pd-bar{animation:none;width:100%;opacity:.5}
}