@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#0b1220;--panel:#121d30;--line:#263650;--muted:#91a0b8;--text:#f4f7fb;--accent:#7c9cff;--accent2:#9d7cff}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% -15%,#20385b 0,transparent 48%),var(--bg);color:var(--text);font-family:'DM Sans',system-ui,sans-serif;min-height:100vh}
.shell{width:min(900px,calc(100% - 36px));margin:auto}.top{height:92px;display:flex;align-items:center;gap:13px;border-bottom:1px solid #ffffff12}.logo{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#769bff,#a17bff);color:#101827;font-size:17px}.brand{font-weight:800;letter-spacing:1.5px;font-size:13px}.subbrand{font-size:11px;color:var(--muted);margin-top:3px}.secure{margin-left:auto;color:#8ed8b3;font-size:11px;background:#16372f;padding:8px 11px;border-radius:30px}
.hero{text-align:center;padding:66px 10px 36px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.3px;color:#9bb5ff}.hero h1{font-size:clamp(34px,6vw,55px);line-height:1.08;letter-spacing:-2px;margin:17px 0}.hero h1 span{background:linear-gradient(90deg,#91b3ff,#c0a1ff);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{color:var(--muted);font-size:14px}
.panel{background:linear-gradient(145deg,#16243a,#111b2d);border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:0 24px 70px #0005}.panel>label,.field label{display:block;font-size:12px;font-weight:700;margin-bottom:10px;color:#dce5f4}.url-row{display:flex;gap:10px}input,select{height:48px;border:1px solid #31435f;border-radius:10px;background:#0c1627;color:var(--text);padding:0 14px;font:inherit;min-width:0}input{flex:1}input:focus,select:focus{outline:2px solid #819fff66;border-color:#819fff}.primary,.download{border:0;border-radius:10px;background:linear-gradient(100deg,#769cff,#9d82ff);color:#0c1422;font-weight:800;padding:0 20px;cursor:pointer}.primary span{margin-left:12px}.status{font-size:11px;color:var(--muted);margin-top:12px;min-height:16px}.status.error{color:#ff9b9b}.status.good{color:#8ed8b3}.preview{display:flex;align-items:center;gap:14px;margin-top:22px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#0c1627}.preview img{width:112px;aspect-ratio:16/9;object-fit:cover;border-radius:7px;background:#25334a}.preview strong{font-size:13px;display:block}.preview small{display:block;color:var(--muted);margin-top:6px;font-size:11px}.hidden{display:none!important}.choices{margin-top:24px}.tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:20px}.tab{background:transparent;border:1px solid transparent;color:var(--muted);padding:10px 14px;border-radius:8px;font:inherit;font-size:12px;cursor:pointer}.tab.active{background:#26395b;color:#dfe8ff;border-color:#3d5681}.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field select{width:100%}.quality-note{height:48px;display:flex;align-items:center;color:var(--muted);font-size:12px;border:1px solid var(--line);border-radius:10px;padding:0 14px}.download{width:100%;height:50px;margin-top:20px}.download span{margin-left:8px}.download:disabled,.primary:disabled{opacity:.55;cursor:wait}footer{display:flex;justify-content:space-between;gap:12px;color:#64738b;font-size:10px;padding:22px 4px 34px}
@media(max-width:620px){.hero{padding:48px 5px 28px}.panel{padding:19px}.url-row{flex-direction:column}.primary{height:46px}.option-grid{grid-template-columns:1fr}.secure{font-size:0}.secure:first-letter{font-size:11px}footer{flex-direction:column}.preview img{width:88px}}

/* Gerçek indirme ilerlemesi */
.progress-box{
  margin-top:22px;
  padding:17px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0c1627;
}
.progress-heading,.progress-details{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.progress-heading{
  font-size:12px;
  color:#dce5f4;
  margin-bottom:12px;
}
.progress-heading strong{
  color:#a9baff;
  font-size:15px;
  font-variant-numeric:tabular-nums;
}
.progress-track{
  width:100%;
  height:11px;
  overflow:hidden;
  border-radius:20px;
  background:#263650;
}
.progress-fill{
  width:0%;
  height:100%;
  border-radius:20px;
  background:linear-gradient(90deg,#769cff,#a17bff);
  transition:width .35s ease;
}
.progress-details{
  margin-top:10px;
  color:var(--muted);
  font-size:10px;
}

/* YouTube tarzı site logosu */
.logo{
  width:46px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#e62117;
  flex-shrink:0;
  box-shadow:0 4px 14px #e6211740;
}
.logo svg{
  width:29px;
  height:22px;
  display:block;
}