.dl-page{width:100%;animation:dlIn .4s ease both}
@keyframes dlIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.dl-hero{
  border-radius:16px;padding:22px 22px 18px;margin-bottom:14px;
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background:
    radial-gradient(640px 200px at 100% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%),
    linear-gradient(145deg, color-mix(in srgb, var(--panel) 95%, #000), var(--panel));
  box-shadow:0 16px 36px rgba(0,0,0,.32);
}
.dl-hero__eyebrow{
  display:inline-flex;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px;
}
.dl-hero h1{margin:0 0 6px;font-size:clamp(1.4rem,2.4vw,1.85rem);color:var(--text)}
.dl-hero p{margin:0;color:var(--muted);font-size:14px;line-height:1.5;max-width:52ch}

.dl-card{
  border-radius:16px;border:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background:var(--panel);box-shadow:0 14px 30px rgba(0,0,0,.3);overflow:hidden;margin-bottom:14px;
}
.dl-card__head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent);
}
.dl-card__head h2{margin:0;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:800}
.dl-card__head span{font-size:12px;color:var(--muted)}
.dl-card__body{padding:16px}

.dl-pack{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 16px;border-radius:14px;margin-bottom:10px;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);
  transition:border-color .18s ease, transform .18s ease;
}
.dl-pack:last-child{margin-bottom:0}
.dl-pack:hover{border-color:color-mix(in srgb, var(--accent) 45%, transparent);transform:translateY(-1px)}
.dl-pack__meta{min-width:0;flex:1}
.dl-pack__meta strong{display:block;color:#fff;font-size:15px;margin-bottom:4px}
.dl-pack__meta span{color:var(--muted);font-size:12px}
.dl-pack__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:150px;padding:12px 18px;border-radius:12px;text-decoration:none!important;
  font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  color:#041018!important;background:linear-gradient(135deg,var(--accent),var(--btn,#0284c7));
  box-shadow:0 10px 22px rgba(0,0,0,.28);border:0;
}
.dl-pack__btn:hover{filter:brightness(1.06)}
.dl-empty{padding:18px;text-align:center;color:var(--muted)}

.dl-table-wrap{overflow:auto;border-radius:12px;border:1px solid rgba(255,255,255,.08)}
.dl-table{width:100%;border-collapse:collapse;min-width:560px}
.dl-table th,.dl-table td{padding:12px 14px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06);font-size:13.5px}
.dl-table th{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800;
  background:rgba(0,0,0,.25);
}
.dl-table tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
.dl-table tbody tr:hover{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.dl-table td:first-child{color:#fff;font-weight:700}
.dl-table td{color:var(--text)}
.dl-badge{
  display:inline-flex;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:700;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--text);
}
.dl-badge--ok{
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  border-color:color-mix(in srgb, var(--accent) 40%, transparent);
  color:var(--accent);
}

/* kill old panel chrome on download page */
.dl-page .panel,.dl-page .panel-buyuk,.dl-page .m2-box.m2-page{
  background:transparent!important;border:0!important;box-shadow:none!important;margin:0!important;padding:0!important;
}
.dl-page .panel-heading,.dl-page .panel-body{display:none!important}

@media(max-width:700px){
  .dl-pack{align-items:stretch}
  .dl-pack__btn{width:100%}
}