/* ==================== Banner Slider ==================== */
.banner-slider{position:relative;overflow:hidden;background:linear-gradient(135deg,#0D47A1 0%,#1565C0 40%,#1976D2 100%);aspect-ratio:1920/600;width:100%}
.banner-slider .slide{position:absolute;top:0;left:0;right:0;bottom:0;display:none;color:#fff}
.banner-slider .slide.active{display:block}
.banner-slider .slide .slide-overlay{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);text-align:center;padding:24px;animation:fadeInUp .7s ease}
@keyframes fadeInUp{from{opacity:0;transform:translateY(calc(-50% + 30px))}to{opacity:1;transform:translateY(-50%)}}
.banner-slider .slide h1{font-size:44px;margin-bottom:16px;font-weight:800;letter-spacing:1px;text-shadow:0 3px 16px rgba(0,0,0,.35);line-height:1.3}
.banner-slider .slide p{font-size:18px;opacity:.92;margin-bottom:28px;text-shadow:0 1px 6px rgba(0,0,0,.3);font-weight:400;letter-spacing:.5px}
.banner-slider .slide .btn{display:inline-block;padding:14px 42px;background:#fff;color:var(--primary);border-radius:30px;font-size:16px;font-weight:700;transition:all .35s ease;box-shadow:0 6px 24px rgba(0,0,0,.18);letter-spacing:.5px}
.banner-slider .slide .btn:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(0,0,0,.28);background:#f5f9ff}
.banner-dots{display:flex;justify-content:center;gap:10px;padding:16px 0;position:absolute;bottom:16px;width:100%;z-index:3}
.banner-dots span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:all .35s ease}
.banner-dots span.active{background:#fff;width:28px;border-radius:6px}
.banner-dots span:hover{background:rgba(255,255,255,.75)}

/* No Banner fallback */
.no-banner{background:linear-gradient(135deg,#0D47A1 0%,#1565C0 40%,#1976D2 100%);position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff}
.no-banner h1{font-size:32px;font-weight:800;letter-spacing:1px}
.no-banner p{opacity:.8;margin-top:10px;font-size:16px}

/* ==================== Banner Responsive ==================== */
@media (max-width:768px){
    .banner-slider{aspect-ratio:auto;height:auto;min-height:320px}
    .banner-slider .slide{position:relative;min-height:320px}
    .banner-slider .slide h1{font-size:26px}
    .banner-slider .slide p{font-size:15px}
    .banner-slider .slide .btn{padding:12px 32px;font-size:15px}
    .banner-slider .slide .slide-overlay{position:relative;top:auto;left:auto;right:auto;transform:none;padding:48px 20px}
    .banner-slider .slide .slide-overlay h1{animation:fadeInM .5s ease}
    @keyframes fadeInM{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
    .no-banner{position:relative;top:auto;left:auto;right:auto;bottom:auto;min-height:320px;padding:48px 20px}
    .no-banner h1{font-size:24px}
}
@media (max-width:480px){
    .banner-slider .slide h1{font-size:22px}
}