/* ===== BANANA CAROUSEL SLIDER ===== */
  #banana-promo-widget *{box-sizing:border-box}
  
  .banana-container{margin:0;padding:0;position:relative;box-sizing:border-box}
  
  @media(min-width:768px),(orientation:landscape){
    .banana-container{padding:0 clamp(20px,4vw,48px)}
  }
  

  
  /* Carousel wrapper + scroll horizontal */
  .banana-carousel-wrapper{position:relative;overflow:hidden;width:100%}
  
  .banana-carousel{display:flex;gap:clamp(8px,2vw,16px);overflow-x:auto;scroll-behavior:smooth;padding:0;width:100%;scroll-snap-type:x mandatory}
  .banana-carousel::-webkit-scrollbar{height:6px}
  .banana-carousel::-webkit-scrollbar-track{background:transparent}
  .banana-carousel::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}
  .banana-carousel::-webkit-scrollbar-thumb:hover{background:#999}
  
  /* Card */
  .banana-card{flex:0 0 clamp(150px,40vw,280px);container-type:inline-size;container-name:bananacard;background:#7a1a2a;border-radius:0;border:2px solid #7a1a2a;padding:0;display:flex;flex-direction:column;min-width:0;overflow:hidden;scroll-snap-align:start;transition:transform .25s ease}
  .banana-card:hover{transform:translateY(-4px)}
  
  .banana-image-wrapper{position:relative;width:100%;aspect-ratio:2/3;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;background:#5a0000;min-width:0;border-radius:0}
  
  .banana-card-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
  
  .banana-top-links,.banana-bottom-links{display:flex;justify-content:space-between;padding:clamp(4px,3cqi,10px) clamp(6px,3.5cqi,12px);z-index:10;position:relative;gap:clamp(2px,1.5cqi,8px);min-width:0;width:100%}
  
  .banana-top-links a:first-child{color:#fff;font-size:clamp(9px,4.3cqi,18px);font-weight:900;text-decoration:none;white-space:normal;word-wrap:break-word;word-break:break-word;max-width:100%;line-height:1.3;text-align:left;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;min-width:0;width:100%}
  
  .banana-line-2,.banana-top-links a:first-child .banana-line-4{color:#fff;font-weight:900}
  
  .banana-line-3{font-size:33px;font-family:Arial,Helvetica,sans-serif;font-weight:900;color:#ffd700}
  
  .banana-top-links a:last-child{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent!important}
  
  .banana-top-links a:last-child img{width:clamp(60px,12cqi,80px);height:auto;object-fit:contain;background:transparent!important;transition:transform .2s ease;mix-blend-mode:multiply;flex-shrink:0}
  
  .banana-top-links a:last-child:hover img{transform:scale(1.1)}
  
  .banana-bottom-links a,.banana-bottom-links button{flex:1;padding:clamp(4px,2cqi,8px) clamp(6px,3cqi,12px);border-radius:0;font-size:clamp(8px,3.2cqi,14px);font-weight:600;text-decoration:none;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid transparent;transition:background .2s ease,border-color .2s ease,color .2s ease;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:32px;font-family:inherit}
  
  .banana-bottom-links a:first-child{background:#1a1a3e;color:#fff;border-color:#1a1a3e}
  
  .banana-bottom-links a:first-child:hover{background:#2d2d5c;border-color:#fff}
  
  .banana-bottom-links button:last-child{background:#C9A227;color:#1a1a3e;border-color:#C9A227}
  
  .banana-bottom-links button:last-child:hover{background:#d4b134;border-color:#1a1a3e}
  
  .banana-card-image-error{display:none;position:absolute;inset:0;z-index:5;background:#1a1a1a;color:#fff;align-items:center;justify-content:center;font-size:clamp(9px,3.5cqi,13px);text-align:center;padding:clamp(10px,6cqi,20px);border-radius:0;flex-direction:column}
  
  .banana-card-image-error p{max-width:95%;line-height:1.5;margin:0}
  
  .banana-card-image-error strong{display:block;margin-bottom:6px;font-size:1.1em}
  
  .banana-card-image[src="#staytuned"]{display:none}
  
  .banana-card-image[src="#staytuned"]+.banana-card-image-error{display:flex}
  
  .banana-image-wrapper.has-error .banana-top-links,.banana-image-wrapper.has-error .banana-bottom-links{display:none}
  
  
  .banana-nav-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 2px solid #7a1a2a;    /* Keep top border */
  border-bottom: 2px solid #7a1a2a; /* Keep bottom border */
  border-left: none;                /* Remove left border */
  border-right: none;               /* Remove right border */
  border-radius: 0;
  margin-bottom: 12px;
  background: transparent;
}

/* Tambahkan ini biar judul di tengah */
.banana-title {
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 600;
  color: #7a1a2a;
  text-align: center;
  flex: 1; /* Kunci utama: biar judul di tengah */
  margin: 0 10px;
  white-space: nowrap; /* Biar tidak turun baris */
}

/* Tombol tetap di kiri dan kanan */
.banana-nav-btn {
  
  color: #4A0404;
  border: none;
  padding: 8px 16px;
  border-radius: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background .2s, transform .15s;
  flex-shrink: 0; /* Biar tombol tidak mengecil */
  white-space: nowrap;
}

.banana-nav-btn:hover {
  
  transform: translateY(-2px);
}

.banana-nav-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
  
  @media(prefers-reduced-motion:reduce){.banana-card,.banana-bottom-links a,.banana-bottom-links button{transition:none}}