/* === tweak cepat === */
:root{
  --tab-width:30px;
  --tab-bg:#8b1b1b;
  --tab-color:#fff;
  --tab-radius:10px;
  --tab-right-overhang:14px;
}

/* Hapus border/padding/wrap di area promo */
.promotion_group,
.promotion_group .wrap,
.promotion_group .title_wrap,
.promotions-list,
.promotions-list .promotions-wrap,
.promotions-list .promotion-title{
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
}

/* Gambar full-bleed */
.promotion_group img,
.promotions-list img{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  max-width:100% !important;
  height:auto !important;
}

/* Kontainer & list */
.promotions-container{font-size:0;line-height:0;display:flex;flex-direction:column}
.promotions-list{margin:0;border:0;padding:0;display:block;font-size:0;line-height:0;overflow:visible !important}
.promotions-wrap{margin:0;padding:0;display:block;overflow:visible !important}

/* Banner + overlay */
.promotion-title{position:relative;margin:0;padding:0;display:block;line-height:0;overflow:visible !important}
.promotion-title a{display:block;line-height:0}
.promotion-title .watermark{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:2;pointer-events:none;opacity:.15
}

/* TAB LIHAT DETAIL di kanan (vertikal) */
.lihat-detail-btn{
  position:absolute; top:50%; right:calc(-1 * var(--tab-right-overhang));
  transform:translateY(-50%);
  z-index:3; width:var(--tab-width); padding:4px 0; border:0; cursor:pointer;
  border-radius:var(--tab-radius) 0 0 var(--tab-radius);
  background:var(--tab-bg); color:var(--tab-color);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
  writing-mode:vertical-rl; text-orientation:upright;
  font:500 10px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  text-transform:uppercase; letter-spacing:.5px;
}
.lihat-detail-btn:focus{outline:2px solid rgba(255,255,255,.5); outline-offset:2px}

/* Deskripsi default tertutup */
.promotion-description,
.promotions-info{
  display:none;background:#0e0e0e;color:#fff;
  font-size:14px;line-height:1.5;padding:12px 12px 14px;margin:0
}
.promotions-list.open > .promotion-description,
.promotions-list.open > .promotions-info{display:block}

/* Warna teks promo (dari script terakhir lu) */
.promotions-info{
  position: relative !important;
  margin-top: 10px !important;
  padding: 15px 10px !important;
  -webkit-transition: all 0.3s ease-out !important;
  -o-transition: all 0.3s ease-out !important;
  transition: all 0.3s ease-out !important;
  color: #ffffff !important;
}

.promotion-description p,
.promotions-info-content p{margin:.4em 0}
.promotion-description a,
.promotions-info a{color:#36d1ff;text-decoration:underline}

@media (max-width:480px){
  :root{
    --tab-width:26px;
    --tab-right-overhang:10px;
    --tab-radius:8px;
  }
  .promotion-description,.promotions-info{font-size:13px;padding:10px}
}
