.logo-promo{
    max-width: 250px;
     margin-bottom: 16px;
}
.tittle-1{
    font-size: 32px;
    color: #27255f;
    text-align: center;
    font-weight: 700;
     margin-bottom: 16px;
}

/* style for */
 .promo-wrapper{
      max-width: 100%;
      margin:auto;
    }

    .accordion{
      border-radius:14px;
      overflow:hidden;
    }

    .accordion-item{
      border:none;
      margin:0;
    }

    .accordion-button{
      padding:12px 16px;
      box-shadow:none !important;
      border:none;
      border-radius:0 !important;
    }

    .accordion-button::after{
      filter: brightness(0) invert(1);
    }

    .accordion-button:not(.collapsed){
      color:white;
    }

    .accordion-button h2{
      font-size:22px;
      font-weight:800;
      margin:0;
      line-height:1;
    }

    .accordion-button span{
      display:block;
      font-size:13px;
      font-weight:600;
      margin-bottom:6px;
    }



    .bg-senin,  .accordion-button.bg-senin:focus , .accordion-button.bg-senin:not(.collapsed){
      background:#595e35;
      color:white;
    }

    .bg-selasa , .accordion-button.bg-selasa:focus , .accordion-button.bg-selasa:not(.collapsed){
      background:#2c3f43;
      color:white;
    }

    .bg-rabu , .accordion-button.bg-rabu:focus , .accordion-button.bg-rabu:not(.collapsed){
      background:#6b2831;
      color:white;
    }

    .bg-kamis, .accordion-button.bg-kamis:focus, .accordion-button.bg-kamis:not(.collapsed){
      background:#d7c69a;
      color:white;
    }

    .bg-jumat , .accordion-button.bg-jumat:focus , .accordion-button.bg-jumat:not(.collapsed){
      background:#272d3b;
      color:white;
    }

    .bg-sabtu , .accordion-button.bg-sabtu:focus , .accordion-button.bg-sabtu:not(.collapsed) {
          background:#00627b;
          color:white;
    }

    /* content */
    .promo-content{
      color:white;
      padding-bottom:24px;
    }

    .promo-content-1{
        background:#595e35 ;  
    }
    .promo-content-2{
        background: #2c3f43 ;
    }
     .promo-content-3{
        background: #6b2831; 
    }
    .promo-content-4{
        background:#d7c69a ; 
    }
    .promo-content-5{
        background: #272d3b ;
    }
    .promo-content-6{
        background:#00627b;
    }


    .promo-image{
      position:relative;
    }

    .promo-image img{
      width:100%;
      height:220px;
      object-fit:cover;
    }

    .image-overlay{
      position:absolute;
      bottom:0;
      left:0;
      width:100%;
      padding:18px;
    }


    .image-overlay-1{
        background:linear-gradient(to top, #595e35, rgba(77,151,210,0));
    }
        .image-overlay-2{
        background:linear-gradient(to top, #2c3f43, rgba(77,151,210,0));
    }
        .image-overlay-3{
        background:linear-gradient(to top, #6b2831, rgba(77,151,210,0));
    }
        .image-overlay-4{
        background:linear-gradient(to top, #d7c69a, rgba(77,151,210,0));
    }
        .image-overlay-5{
        background:linear-gradient(to top, #272d3b, rgba(77,151,210,0));
    }
        .image-overlay-6{
        background:linear-gradient(to top, #00627b, rgba(77,151,210,0));
    }
        

    .image-overlay span{
      display:block;
      font-size:14px;
      font-weight:500;
    }

    .image-overlay h2{
      margin:0;
      font-size:26px;
      font-weight:800;
    }

    .price-wrapper{
      padding:20px 16px 0;
    }

    .price-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px 12px;
    }

    .price-item{
      font-size:13px;
      line-height:1.3;
    }

    .price-item strong{
      display:block;
      font-size:15px;
    }

    .btn-custom{
      margin-top:28px;
      width:100%;
      border:none;
      color:white;
      padding:14px;
      border-radius:10px;
      font-weight:700;
      box-shadow:0 4px 12px rgba(0,0,0,0.15);
    }

    .btn-custom-1{
        background:#81884d !important;
    }
    .btn-custom-2{
        background:#4d6f75 !important;
    }
    .btn-custom-3{
        background:#a73e4c !important;
    }
    .btn-custom-4{
        background:#f3e0af !important;
        color: #27255F !important;
    }
    .btn-custom-5{
        background:#48536d !important;
    }
    .btn-custom-6{
        background:#007c9b !important;        
    }
     .btn-custom-1:hover, .btn-custom-2:hover, .btn-custom-3:hover, .btn-custom-4:hover, .btn-custom-5:hover, .btn-custom-6:hover{
        opacity: 0.9;
     }




@media screen and (max-width: 768px) {
  .logo-promo{
            max-width: 200px !important;
            margin-top: 16px;
        }

        .tittle-1{
            font-size: 20px !important;
        }

}



 .swiper {
            border-radius: 20px;
            overflow: hidden;
        }

        .slide-item {
            position: relative;
            transition: all 0.3s ease;
        }

        .slide-item img {
            width: 100%;
            /* height: 500px; */
            height: auto;
            object-fit: cover;
            border-radius: 16px;
        }

        .overlay {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            width: 50%;
            background: linear-gradient(to left, rgba(0,0,0,0.75), rgba(0,0,0,0));
            color: white;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-top-right-radius: 16px;
            border-bottom-right-radius: 16px;
        }




        .overlay h5 {
            letter-spacing: 2px;
            opacity: 0.8;
            margin-bottom: 10px;
        }

        .overlay h1 {
            font-weight: bold;
            font-size: 40px;
            margin-bottom: 10px;
        }

        .price-list p {
            margin: 6px 0;
            line-height: 1.4;
            font-size: 15px;
        }

        .btn-custom {
            margin-top: 20px;
            border: none;
            padding: 12px;
            border-radius: 10px;
            font-weight: 600;
            width: 70%;
        }

        /* .btn-custom:hover {
            background-color: #4a8bbd;
        } */

        /* Swiper Navigation */
        .swiper-button-next,
        .swiper-button-prev {
            color: white;
        }

        .swiper-pagination-bullet {
            background: white;
        }

        /* Responsive */

        @media (max-width: 768px) { 
            .overlay {
            width: 100%;
            padding: 20px;
            background: rgba(0, 0, 0, 0.6);
        }

            .overlay h1 {
                font-size: 32px;
            }

            .slide-item img {
                height: 100%;
            }

            .btn-custom {
                width: 100%;
            }
        }

        .swiper-slide {
            overflow: hidden;
        }

        .overlay-2-left,
        .overlay-2-right {
            position: absolute;
            top: 0;
            height: 100%;
            width: 10%;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            z-index: 3;
            color: white;
        }

        .overlay-2-right {
            right: 0;
            border-top-left-radius: 16px;
            border-bottom-left-radius: 16px;

        }

        .overlay-2-left {
            left: 0;
            border-top-right-radius: 16px;
            border-bottom-right-radius: 16px;
        }


        .senin {
            background: #595e35;
        }

        .selasa {
            background-color: #2c3f43;
        }

        .rabu {
            background-color: #6b2831;
        }

        .kamis {
            background-color: #d7c69a;
        }

        .jumat {
            background-color: #272d3b;
        }

        .sabtu {
            background-color: #00627b;
        }

        .minggu {
            background-color: #0ad0df;
        }


        .card-vertical {
            color: white;
            padding: 20px 10px;
            writing-mode: vertical-rl;
            rotate: 180deg;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .day {
            font-size: 16px;
            font-weight: 300;
            letter-spacing: 1px;
        }

        .title {
            font-size: 40px;
            font-weight: bold;
            letter-spacing: 2px;
        }

        .swiper-slide-active .overlay-2-right,
        .swiper-slide-active .overlay-2-left {
            display: none;
        }

        .swiper-slide-active {
            /* transform: translate3d(-9184px, 0px, 0px) rotateZ(0deg) scale(1) !important; */
        }

        .swiper-slide-prev {
            /* transform: translate3d(calc(-13.25% - 6888px), 0px, -100px) rotateZ(0deg) scale(1) !important; */

        }

        .swiper-slide-next {
            /* transform: translate3d(calc(13.25% - 11480px), 0px, -100px) rotateZ(0deg) scale(1) !important; */

        }


        /*card form*/
    .title-form{
        font-size:26px;
        font-weight:700;
        color:#27255F;
        margin-bottom:6px;
    }

    .subtitle-form{
        color:#7b7b93;
        font-size:14px;
        margin-bottom:24px;
    }

    .form-floating>.form-control,
    .form-floating>.form-select{
        height:58px;
        border-radius:14px;
        border:1px solid #dfe3ec;
    }

    .form-floating>.form-control:focus,
    .form-floating>.form-select:focus{
        border-color:#27255F;
        box-shadow:0 0 0 .15rem rgba(39,37,95,.15);
    }

    .btn-submit{
        background:#27255F;
        border:none;
        height:54px;
        border-radius:14px;
        font-weight:600;
        font-size:16px;
        transition:.3s;
    }

    .btn-submit:hover{
        background:#1e1c4d;
        transform:translateY(-1px);
    }

    .form-label-small{
        font-size:13px;
        color:#7b7b93;
        margin-bottom:10px;
    }

    @media(max-width:576px){
        .card-form{
            padding:24px 18px;
            border-radius:18px;
        }
    }

        .promo-check {
        display: none;
    }

    /* .promo-label {
        border: 1px solid #dcdcdc;
    } */

    .promo-label {
    border: 1px solid #dedede38;
    border-radius: 14px;
    padding: 14px 18px;
    cursor: pointer;
    width: 100%;
    transition: .25s ease;
    background: #fff;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05);
}
 .promo-label:hover {
    border-color: #27255f2e;
 }



    .promo-check:checked + .promo-label {
        background: #27255F;
        border-color: #27255F;
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(39,37,95,.18);
    }

    .promo-check:checked + .promo-label small {
        color: #d4ffdd !important;
    }

    .promo-label {
        backdrop-filter: blur(10px);
    }

    .select-1{
      border-radius: 10px;
    }

    /*date picker*/

    /* Wrapper utama */
.datepicker {
    width: 100%;
    max-width: 100%;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid #e6e8ef;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0,0,0,.04);

    font-family: Arial, sans-serif;
}

/* Header bulan */
.datepicker-days .datepicker-switch {
    font-size: 22px;
    font-weight: 700;
    color: #27255F;
    padding: 14px 0;
}

/* tombol prev next */
.datepicker-days .prev,
.datepicker-days .next {
    font-size: 18px;
    font-weight: bold;
    color: #27255F;
    transition: .2s ease;
}

.datepicker-days .prev:hover,
.datepicker-days .next:hover {
    background: rgba(39,37,95,.08);
    border-radius: 10px;
}

/* hari */
.datepicker table tr th {
    font-weight: 700;
    color: #27255F;
    padding: 10px 6px;
    font-size: 15px;
}

/* semua tanggal */
.datepicker table tr td {
    width: 42px;
    height: 42px;

    border-radius: 12px !important;

    font-size: 15px;
    font-weight: 500;

    transition: .2s ease;
}

/* hover tanggal */
.datepicker table tr td.day:hover {
    background: #eef2ff;
    color: #27255F;
}

/* tanggal aktif */
.datepicker table tr td.active,
.datepicker table tr td.active:hover {
    background: linear-gradient(135deg,#27255F,#403d88) !important;
    color: #fff !important;

    box-shadow: 0 6px 14px rgba(39,37,95,.2);
}

/* hari ini */
.datepicker table tr td.today {
    background: #ffe9b3 !important;
    color: #7a5600 !important;
}

/* disabled / bulan lain */
.datepicker table tr td.old,
.datepicker table tr td.new,
.datepicker table tr td.disabled {
    color: #b7bcc8;
}

/* spacing tabel */
.datepicker table {
    width: 100%;
}

/* MOBILE */
@media (max-width: 576px) {

    .datepicker {
        padding: 14px;
        border-radius: 16px;
    }

    .datepicker-days .datepicker-switch {
        font-size: 18px;
    }

    .datepicker table tr th {
        font-size: 12px;
        padding: 8px 2px;
    }

    .datepicker table tr td {
        width: 36px;
        height: 36px;

        font-size: 13px;
        border-radius: 10px !important;
    }

}

.datepicker table tr td.active,
.datepicker table tr td.active:focus,
.datepicker table tr td.active:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    color: #fff !important;
}


.mySwiper .swiper-button-next,
.mySwiper .swiper-button-prev {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    margin-top: -25px; /* Center vertical */
}

.mySwiper .swiper-button-next:hover,
.mySwiper .swiper-button-prev:hover {
    background: white;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    transform: scale(1.1);
}

/* .mySwiper .swiper-button-next svg,
.mySwiper .swiper-button-prev svg {
    width: 20px;
    height: 20px;
    fill: #007bff; 
} */

.mySwiper .custom-prev,
.mySwiper .custom-next {
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, #007bff, #0056b3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.mySwiper .custom-prev { left: 10px; }
.mySwiper .custom-next { right: 10px; }

.mySwiper .custom-prev:hover { transform: translateX(-5px); }
.mySwiper .custom-next:hover { transform: translateX(5px); }

.mySwiper .custom-prev svg,
.mySwiper .custom-next svg {
    width: 24px;
    height: 24px;
}

.swiper-button-prev:after , .swiper-button-next:after {
    display: none;
}
/* 
sdasd */


.mySwiper .custom-prev,
.mySwiper .custom-next {
    color: white;  /* Warna default SVG */
    width: 50px;
    height: 50px;
    background: linear-gradient(45deg, #007bff, #0056b3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.mySwiper .custom-prev:hover,
.mySwiper .custom-next:hover {
    background: linear-gradient(45deg, #e0e0e0, #ffffff);
    color: #0056b3;  /* Gold/orange saat hover untuk kontras */
    transform: translateX(-5px); /* Prev: kiri */
}

.mySwiper .custom-next:hover {
    transform: translateX(5px); /* Next: kanan */
}