:root{
  --kk-primary:#0b2a4a;
  --kk-accent:#c9a227;
  --kk-light:#f8f9fb;
}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;background:var(--kk-light);}
.navbar{background:rgba(11,42,74,.98);}
.navbar .nav-link,.navbar-brand{color:#fff!important;}
.hero{
  background:linear-gradient(120deg, rgba(11,42,74,.92), rgba(11,42,74,.65)),
             url('assets/img/hero.jpg') center/cover no-repeat;
  color:#fff;
  border-radius:18px;
}
.badge-kk{background:rgba(201,162,39,.18); color:#fff; border:1px solid rgba(201,162,39,.55);}
.card{border:0;border-radius:18px;box-shadow:0 10px 25px rgba(0,0,0,.06);}
.btn-kk{background:var(--kk-accent); border:0; color:#111; font-weight:700;}
.btn-kk:hover{filter:brightness(.95);}
.btn-outline-kk{border:1px solid var(--kk-accent); color:var(--kk-primary); font-weight:700;}
.btn-outline-kk:hover{background:var(--kk-accent); color:#111;}
.small-muted{color:#6c757d;font-size:.92rem;}
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  background:#fff; border-top:1px solid rgba(0,0,0,.08);
  padding:10px 12px;
}
@media(min-width:992px){ .sticky-cta{display:none;} }

.floating-wa{
  position:fixed; right:18px; bottom:86px; z-index:10000;
  background:var(--kk-accent); color:#111; text-decoration:none;
  padding:12px 14px; border-radius:999px; font-weight:800;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.floating-wa:hover{filter:brightness(.95); color:#111;}
@media(min-width:992px){ .floating-wa{bottom:22px;} }


/* Flyer slider (packages posters) */
.flyer-slider{
  display:flex; gap:14px; overflow:auto; padding:6px 2px 14px;
  scroll-snap-type:x mandatory;
}
.flyer-slider::-webkit-scrollbar{height:10px}
.flyer-slider > .flyer-item{flex:0 0 auto; width:min(86vw, 360px); scroll-snap-align:start}
@media(min-width:768px){ .flyer-slider > .flyer-item{width:360px} }
@media(min-width:1200px){ .flyer-slider > .flyer-item{width:380px} }

.flyer-card{
  position:relative; border-radius:24px; overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.14);
  background:#fff;
}
.flyer-card img{width:100%; height:520px; object-fit:cover; display:block}
@media(max-width:575px){ .flyer-card img{height:480px} }

.flyer-overlay{
  position:absolute; left:14px; right:14px; bottom:14px;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-radius:18px; padding:12px 12px;
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}
.flyer-title{font-weight:800; margin:0; font-size:1.02rem; line-height:1.2}
.flyer-meta{font-size:.86rem; color:rgba(0,0,0,.65); margin-top:4px}
.flyer-cta{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.flyer-price-pill{
  position:absolute; top:14px; left:14px;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-radius:999px; padding:10px 12px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}
.flyer-nav{
  display:flex; gap:10px; justify-content:flex-end; margin-top:6px
}
.flyer-nav button{
  border:1px solid rgba(0,0,0,.12);
  background:#fff; border-radius:999px; padding:8px 10px;
}
.flyer-nav button:active{transform:scale(.98)}


/* ✅ Desktop Slider Fix (Minimal Crop + show top) */
@media (min-width: 1024px){

  .flyer-slider{
    max-width: 1100px;
    margin: 20px auto;
  }

  .flyer-item img{
    width: 100% !important;
    height: 520px !important;       /* taller = less crop */
    object-fit: cover !important;
    object-position: top center !important; /* ✅ keep title/logo visible */
    border-radius: 18px;
  }
}