/* Ruang iklan landing & blog. Gambar dipatok rasio 16:9 dan teks dirender server → tidak ada pergeseran tata letak (CLS). */
.ad{position:relative;display:grid;gap:0;margin:2em 0;border-radius:22px;overflow:hidden;background:var(--card);color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow)}
.ad-media{display:block;aspect-ratio:16/9;background:var(--bg-soft);overflow:hidden}
.ad-media img{width:100%;height:100%;object-fit:cover}
.ad-body{display:grid;gap:8px;justify-items:start;padding:18px 20px 20px}
.ad-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ad-tag{font:700 .68rem/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ad-badge{font:700 .72rem/1 var(--font-body);padding:5px 9px;border-radius:999px;background:linear-gradient(135deg,var(--cyan-400),var(--cyan-600));color:var(--navy-950)}
.ad-title{font:700 1.2rem/1.25 var(--font-display);letter-spacing:-.01em;margin:0}
.ad-text{margin:0;color:var(--muted);font-size:.95rem;max-width:52ch}
.ad .btn{margin-top:6px}
.ad-terms{color:var(--muted);font-size:.74rem;line-height:1.4;max-width:60ch}
.is-sponsor{border-left:3px solid var(--cyan-500)}

/* artikel: iklan di tengah isi tidak ikut gaya prosa */
.bl-prose .ad{margin:2.2em 0}
.bl-prose .ad p{margin:0}
.bl-prose .ad .ad-text{margin:0}
.bl-prose .ad a{text-decoration:none}
.bl-prose .ad a.btn-primary{color:var(--navy-950)}

/* daftar blog & beranda: kartu horizontal di layar lebar */
.ad-blog_top,.ad-landing{margin:0 0 28px}
@media (min-width:720px){
  .ad-blog_top.has-img,.ad-landing.has-img,.ad-end.has-img{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:stretch}
  .ad-blog_top .ad-media,.ad-landing .ad-media,.ad-end .ad-media{aspect-ratio:auto;min-height:100%}
  .ad-blog_top .ad-body,.ad-landing .ad-body,.ad-end .ad-body{align-content:center;padding:26px 28px}
}
.ad-sidebar{margin:0 0 18px}
/* beranda: pita promo sendiri dengan latar lembut dan jarak atas-bawah yang sama (tidak menempel ke bagian di bawahnya) */
.promo-strip{padding:44px 0 52px;background:var(--bg-soft)}
.promo-strip .ad{margin:0;border-radius:26px;box-shadow:0 22px 48px -26px rgba(16,25,59,.4)}
.ad-landing .ad-title{font-size:1.35rem}
@media (min-width:900px){
  .ad-landing.has-img{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .ad-landing .ad-body{padding:38px 44px;gap:12px}
  .ad-landing .ad-title{font-size:1.8rem;line-height:1.15}
  .ad-landing .ad-text{font-size:1.05rem}
  .ad-landing .btn{min-height:52px;padding:0 30px;margin-top:10px}
}

/* halaman promo */
.promo-offer{display:grid;gap:12px;margin-top:20px;justify-items:start}
.promo-price{display:flex;align-items:baseline;gap:10px;color:#fff}
.promo-price small{font-size:.85rem;color:#C3CCE3}
.promo-price b{font:800 clamp(1.8rem,6vw,2.6rem)/1 var(--font-display);letter-spacing:-.02em}
.promo-until{display:inline-flex;font-size:.85rem;font-weight:600;color:var(--cyan-300)}
.promo-offer .row,.promo-ended .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.promo-ended{margin-top:18px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.1);color:#fff;display:grid;gap:10px;max-width:56ch}
.promo-terms{margin-top:2em;padding:16px 20px;border-radius:16px;background:var(--bg-soft);color:var(--muted);font-size:.9rem}
.promo-terms b{color:var(--text);display:block;margin-bottom:4px}
.promo-terms p{margin:0}