/* ===== 22 KARSILASTIRMA — kriterleri tek tek spotlight, sonra büyük özet ===== */
.v22 {
  --cycle: 18s;
  background:
    radial-gradient(ellipse 65% 50% at 70% 45%, rgba(var(--brand-rgb), .16), transparent 55%),
    #0c0e14;
}
.v22 .story { position:absolute; inset:0; }
.v22 .beat {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:4% 5%; gap:.85rem;
  opacity:0; visibility:hidden; pointer-events:none;
}
.v22 .b1 { animation:v22b1 var(--cycle) linear infinite; }
.v22 .b2 { animation:v22b2 var(--cycle) linear infinite; }
.v22 .b3 { animation:v22b3 var(--cycle) linear infinite; }
.v22 .b4 { animation:v22b4 var(--cycle) linear infinite; }
.v22 .b5 { animation:v22b5 var(--cycle) linear infinite; }
.v22 .b6 { animation:v22b6 var(--cycle) linear infinite; }
.v22 .b7 { animation:v22b7 var(--cycle) linear infinite; }
.v22 .b-final { animation:v22bf var(--cycle) linear infinite; }
/* intro~12 · her kriter ~9 · final tutuş 75–100 */
@keyframes v22b1 {
  0%,11%{opacity:0;visibility:hidden;transform:scale(1.04)}
  12%{opacity:0;visibility:visible}
  15%{opacity:1;transform:none}
  19%{opacity:1}
  21%{opacity:0;transform:scale(.97)}
  22%,100%{opacity:0;visibility:hidden}
}
@keyframes v22b2 {
  0%,20%{opacity:0;visibility:hidden;transform:translateX(28px)}
  21%{opacity:0;visibility:visible}
  24%{opacity:1;transform:none}
  28%{opacity:1}
  30%{opacity:0}
  31%,100%{opacity:0;visibility:hidden}
}
@keyframes v22b3 {
  0%,29%{opacity:0;visibility:hidden;transform:translateX(28px)}
  30%{opacity:0;visibility:visible}
  33%{opacity:1;transform:none}
  37%{opacity:1}
  39%{opacity:0}
  40%,100%{opacity:0;visibility:hidden}
}
@keyframes v22b4 {
  0%,38%{opacity:0;visibility:hidden;transform:translateX(28px)}
  39%{opacity:0;visibility:visible}
  42%{opacity:1;transform:none}
  46%{opacity:1}
  48%{opacity:0}
  49%,100%{opacity:0;visibility:hidden}
}
@keyframes v22b5 {
  0%,47%{opacity:0;visibility:hidden;transform:translateX(28px)}
  48%{opacity:0;visibility:visible}
  51%{opacity:1;transform:none}
  55%{opacity:1}
  57%{opacity:0}
  58%,100%{opacity:0;visibility:hidden}
}
@keyframes v22b6 {
  0%,56%{opacity:0;visibility:hidden;transform:translateX(28px)}
  57%{opacity:0;visibility:visible}
  60%{opacity:1;transform:none}
  64%{opacity:1}
  66%{opacity:0}
  67%,100%{opacity:0;visibility:hidden}
}
@keyframes v22b7 {
  0%,65%{opacity:0;visibility:hidden;transform:translateX(28px)}
  66%{opacity:0;visibility:visible}
  69%{opacity:1;transform:none}
  73%{opacity:1}
  75%{opacity:0}
  76%,100%{opacity:0;visibility:hidden}
}
@keyframes v22bf {
  0%,74%{opacity:0;visibility:hidden;transform:scale(1.03)}
  75%{opacity:0;visibility:visible}
  79%{opacity:1;transform:none}
  100%{opacity:1;visibility:visible}
}
.v22 .n {
  margin:0; font:800 .72rem Outfit,sans-serif; letter-spacing:.16em;
  text-transform:uppercase; color:#ffb4b1;
}
.v22 .topic {
  margin:0; text-align:center;
  font:800 clamp(1.6rem, 4.2vw, 2.6rem) Outfit,sans-serif;
  color:#fff; letter-spacing:-.02em; line-height:1.15;
  text-shadow:0 8px 32px rgba(0,0,0,.35);
}
.v22 .duo {
  display:grid; grid-template-columns:1fr auto 1fr; gap:.7rem; align-items:stretch;
  width:min(920px, 100%); margin-top:.35rem;
}
.v22 .card {
  border-radius:18px; padding:1.1rem 1.15rem 1.2rem;
  border:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column; gap:.45rem; min-width:0;
}
.v22 .card.bad {
  background:linear-gradient(165deg,#2a1a1c,#181216);
  border-color:rgba(255,140,140,.28);
}
.v22 .card.good {
  background:linear-gradient(165deg,rgba(var(--brand-rgb),.28),#1a1216 70%);
  border-color:rgba(var(--brand-rgb),.45);
  box-shadow:0 16px 40px rgba(var(--brand-rgb),.18);
}
.v22 .card span {
  font:800 .72rem Outfit,sans-serif; letter-spacing:.04em;
  text-transform:uppercase;
}
.v22 .card.bad span { color:#ffb4b1; }
.v22 .card.good span { color:#ffd0ce; }
.v22 .card strong {
  font:800 clamp(1.15rem, 2.8vw, 1.75rem) Outfit,sans-serif;
  color:#fff; line-height:1.25; font-weight:800;
}
.v22 .vs {
  align-self:center; width:2.6rem; height:2.6rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--brand); color:#fff;
  font:800 .75rem Outfit,sans-serif;
  box-shadow:0 8px 24px rgba(var(--brand-rgb),.4);
}
.v22 .b-final {
  padding:2% 3%; gap:.3rem; justify-content:center;
  box-sizing:border-box;
}
.v22 .b-final .final-h {
  margin:0; font:800 clamp(1.1rem, 2.6vw, 1.45rem) Outfit,sans-serif; color:#fff;
  text-align:center; width:100%; letter-spacing:-.02em; flex:0 0 auto;
}
.v22 .sum {
  list-style:none; margin:0; padding:0; width:min(980px,100%);
  display:flex; flex-direction:column; gap:.28rem;
  flex:1 1 auto; min-height:0; justify-content:space-between;
}
.v22 .sum li {
  display:grid; grid-template-columns:1.1fr 1fr 1.15fr; gap:.5rem; align-items:center;
  padding:.38rem .7rem; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  flex:1 1 0; min-height:0;
}
.v22 .sum li b {
  font:800 clamp(1rem, 2.3vw, 1.28rem) Outfit,sans-serif; color:#fff;
  line-height:1.15;
}
.v22 .sum li em {
  font:600 clamp(.92rem, 2.1vw, 1.15rem) Outfit,sans-serif;
  font-style:normal; color:#ffd0ce; line-height:1.2;
}
.v22 .sum li strong {
  font:800 clamp(.95rem, 2.15vw, 1.2rem) Outfit,sans-serif; color:#fff;
  background:rgba(var(--brand-rgb),.22); border-radius:10px;
  padding:.28rem .55rem; border:1px solid rgba(var(--brand-rgb),.4);
  line-height:1.2;
}
@media (max-width:640px) {
  .v22 .duo { grid-template-columns:1fr; gap:.45rem; }
  .v22 .vs { display:none; }
  .v22 .topic { font-size:clamp(1.25rem, 7vw, 1.8rem); }
  .v22 .card strong { font-size:clamp(1rem, 5vw, 1.35rem); }
  .v22 .b-final { padding:1.5% 2.5%; }
  .v22 .sum { gap:.2rem; }
  .v22 .sum li {
    grid-template-columns:1fr 1fr; gap:.15rem .35rem; padding:.3rem .45rem;
  }
  .v22 .sum li b { grid-column:1 / -1; font-size:.85rem; }
  .v22 .sum li em, .v22 .sum li strong { font-size:.78rem; }
}