/* Styling untuk Kontrol Carousel (Tombol Kiri & Kanan) */

/* Memastikan wrapper tombol terlihat dan berada di atas gambar slide */
.carousel-control {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5%; /* Lebar area klik tombol */
    font-size: 20px;
    color: #fff; /* Warna ikon panah (putih) */
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    background-color: rgba(0, 0, 0, 0); /* Membuat background transparan */
    filter: alpha(opacity=50);
    opacity: .5; /* Membuat tombol sedikit transparan saat tidak di-hover */
    z-index: 5; /* Memastikan tombol di atas konten slider */
    top: 50%;
}

/* Posisi spesifik untuk tombol kiri (previous) */
.carousel-control.left {
    background-image: none; /* Menghapus gradient bawaan Bootstrap 3 */
    left: 0;
}

/* Posisi spesifik untuk tombol kanan (next) */
.carousel-control.right {
    background-image: none; /* Menghapus gradient bawaan Bootstrap 3 */
    right: 0;
    left: auto; /* Mereset posisi 'left' */
}

/* Efek saat mouse diarahkan ke tombol (hover) */
.carousel-control:hover,
.carousel-control:focus {
    color: #fff;
    text-decoration: none;
    filter: alpha(opacity=90);
    outline: 0;
    opacity: .9; /* Membuat tombol lebih jelas saat di-hover */
}

/* Styling untuk ikon panah di dalam tombol */
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
    position: absolute;
    top: -100%; /* Posisi ikon di tengah secara vertikal */
    z-index: 5;
    display: inline-block;
    margin-top: -15px; /* Menyesuaikan posisi vertikal ikon agar pas di tengah */
    font-size: 30px; /* Ukuran ikon panah */
    background: none !important;
    color: #fff !important;
}

.carousel-control .glyphicon-chevron-left {
    left: 50%; /* Posisi ikon di tengah area tombol kiri */
    margin-left: -15px; /* Menyesuaikan posisi horizontal ikon */
}

.carousel-control .glyphicon-chevron-right {
    right: 50%; /* Posisi ikon di tengah area tombol kanan */
    margin-right: -15px; /* Menyesuaikan posisi horizontal ikon */
}

/* Styling untuk 'sr-only' text (biasanya untuk screen reader) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}