/* ==========================================================
   Komplek Blossom — slide banner beranda (tampilan + pengelola)
   ========================================================== */

/* ---------------- slider ---------------- */
.bn-slider{
  position:relative; margin-top:16px; border-radius:22px; overflow:hidden;
  background:#0b3d24; box-shadow:var(--shadow); isolation:isolate;
  -webkit-tap-highlight-color:transparent;
}
.bn-track{display:flex; transition:transform .6s cubic-bezier(.4,0,.2,1); will-change:transform}
.bn-slide{
  position:relative; flex:0 0 100%; height:clamp(190px,26vw,302px);
  overflow:hidden; cursor:default; outline:none;
}
.bn-slide[data-bn-link]{cursor:pointer}
.bn-slide img{width:100%; height:100%; object-fit:cover; display:block; user-select:none}
.bn-veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(6,32,20,.80) 0%,rgba(6,32,20,.50) 40%,rgba(6,32,20,.14) 70%,rgba(6,32,20,.04) 100%);
}
.bn-copy{
  position:absolute; left:clamp(16px,3vw,34px); bottom:clamp(16px,3.4vw,30px);
  max-width:min(600px,74%); color:#fff;
}
.bn-copy h3{
  color:#fff; font-size:clamp(17px,2.15vw,27px); line-height:1.2;
  letter-spacing:-.03em; text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.bn-copy p{
  margin-top:6px; font-size:clamp(12px,1.25vw,14.5px); line-height:1.55;
  color:rgba(255,255,255,.88); text-shadow:0 1px 8px rgba(0,0,0,.3);
}
.bn-cta{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  padding:8px 15px; border-radius:999px; background:#fff; color:var(--green-800);
  font-weight:800; font-size:12.3px; letter-spacing:-.01em;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.5);
}
.bn-dots{position:absolute; right:16px; bottom:15px; display:flex; gap:6px; z-index:3}
.bn-dot{
  width:8px; height:8px; padding:0; border:0; border-radius:999px;
  background:rgba(255,255,255,.45); cursor:pointer; transition:width .25s,background .25s;
}
.bn-dot.on{width:22px; background:#fff}
.bn-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:#fff;
  border:1px solid rgba(255,255,255,.32); background:rgba(8,40,26,.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .2s, background .2s;
}
.bn-slider:hover .bn-nav{opacity:1}
.bn-nav:hover{background:rgba(8,40,26,.66)}
.bn-nav.prev{left:12px}
.bn-nav.next{right:12px}
.bn-nav.prev svg{transform:rotate(180deg)}

@media (hover:none){
  .bn-nav{display:none}
}
@media (max-width:720px){
  .bn-slider{border-radius:18px; margin-top:14px}
  .bn-slide{height:clamp(186px,50vw,258px)}
  .bn-copy{max-width:calc(100% - 32px); left:16px; bottom:14px}
  .bn-copy p{-webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden}
  .bn-dots{right:12px; bottom:10px}
}

/* ---------------- pengelola slide (Pengaturan) ---------------- */
.bnm-empty{
  border:1.5px dashed var(--line); border-radius:16px; padding:28px 18px;
  text-align:center; background:#fbfdfc; color:var(--muted);
}
.bnm-empty .ic{color:var(--green); display:inline-grid; place-items:center; margin-bottom:8px}
.bnm-empty b{display:block; color:var(--ink); font-size:13.5px}
.bnm-empty span{display:block; font-size:12.4px; margin-top:3px}

.bnm-list{display:grid; gap:10px}
.bnm-row{
  display:grid; grid-template-columns:132px minmax(0,1fr) auto; gap:14px; align-items:center;
  padding:10px; border:1px solid var(--line); border-radius:16px; background:#fff;
}
.bnm-row.off{background:#fbfdfc; opacity:.72}
.bnm-thumb{width:132px; height:76px; border-radius:11px; overflow:hidden; background:var(--green-050)}
.bnm-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.bnm-info{min-width:0}
.bnm-title{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:800; font-size:13.4px}
.bnm-title .chip{font-size:10.5px; padding:2px 8px}
.bnm-sub{font-size:12.2px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bnm-link{display:flex; align-items:center; gap:4px; font-size:11.5px; color:var(--green-700); margin-top:4px; min-width:0}
.bnm-link span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bnm-act{display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap}
.bnm-ord{display:flex; flex-direction:column; gap:3px; margin-right:2px}
.bnm-mini{
  width:22px; height:17px; display:grid; place-items:center; padding:0;
  border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--ink-2); cursor:pointer;
}
.bnm-mini:hover:not(:disabled){border-color:var(--green); color:var(--green)}
.bnm-mini:disabled{opacity:.35; cursor:not-allowed}
.btn.danger{color:#b23b46}
.btn.danger:hover{background:var(--rose-050); border-color:#f3c7cb}

/* modal edit */
.bnm-modal{max-width:820px; width:min(96vw,820px)}
.bnm-edit{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:16px; align-items:start}
.bnm-prev{width:100%; aspect-ratio:21/9; border-radius:14px; overflow:hidden; background:#0b3d24}
.bnm-prev img{width:100%; height:100%; object-fit:cover; display:block}
.bnm-edit-form .fld{margin-bottom:10px}
.bnm-check{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; margin-top:4px}
.bnm-uploading{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); margin-top:10px}

@media (max-width:720px){
  .bnm-row{grid-template-columns:96px minmax(0,1fr); gap:10px}
  .bnm-thumb{width:96px; height:58px}
  .bnm-act{grid-column:1/-1; justify-content:flex-start}
  .bnm-ord{flex-direction:row}
  .bnm-edit{grid-template-columns:1fr}
  .bnm-modal{max-width:96vw}
}