@tailwind base;
@tailwind components;
@tailwind utilities;

html {
    scroll-behavior: smooth;
}

.container {
    padding-top: 1rem; /* Mengurangi padding atas untuk navbar */
    margin-bottom: -0.5rem;
}

.logo img {
    max-height: 120px; /* Sesuaikan ukuran logo agar lebih kecil */
    max-width: 180px;
}

.prose ol {
    list-style-type: decimal; /* Tampilkan nomor */
    padding-left: 1.25rem; /* Tambahkan margin kiri */
}

.prose ul {
    list-style-type: disc; /* Tampilkan bullet */
    padding-left: 1.25rem;
}

.prose li {
    margin-bottom: 0.5rem; /* Tambahkan jarak antar item */
}

.navbar-index {
    margin-top: -2.5rem;
}

/* CSS untuk transisi navbar */
#navbar {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    height: 4rem;
}

#navbar-category {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    height: 4rem;
}

/* Default Styles Index */
header#navbar {
    background-color: transparent; /* Default transparent */
    transition: background-color 0.3s ease, color 0.3s ease;
}

header#navbar.scrolled {
    background-color: #f7f8f9; /* Warna merah saat scroll */
}

header#navbar-category {
    background-color: #f7f8f9; /* Default transparent */
    transition: background-color 0.3s ease, color 0.3s ease;
}

header#navbar-category.scrolled {
    background-color: #f7f8f9; /* Default transparent */
}

header#navbar-detail {
    background-color: #f7f8f9; /* Default transparent */
    transition: background-color 0.3s ease, color 0.3s ease;
}

header#navbar-detail.scrolled {
    background-color: #f7f8f9; /* Default transparent */
    opacity: 75%;
}

header#navbar-event {
    background-color: #f7f8f9; /* Default transparent */
    transition: background-color 0.3s ease, color 0.3s ease;
}

header#navbar-event.scrolled {
    background-color: #f7f8f9; /* Default transparent */
    opacity: 75%;
}

/* Default text color */
header#navbar a {
    color: white;
    transition: color 0.3s ease;
}

header#navbar-category a {
    color: black;
    transition: color 0.3s ease;
}

header#navbar-detail a {
    color: black;
    transition: color 0.3s ease;
}

header#navbar-event a {
    color: black;
    transition: color 0.3s ease;
}

/* Text color on scroll */
header#navbar.scrolled a {
    color: black;
}

.logo * {
    color: red !important; /* Pastikan warna putih berlaku */
}

/* Button hover adjustment */
header#navbar a:hover {
    color: gray;
}

header#navbar-category a:hover {
    color: gray;
}

header#navbar-detail a:hover {
    color: gray;
}

header#navbar-event a:hover {
    color: gray;
}

/* Fullscreen Menu */
#fullscreen-menu {
    display: none; /* Tersembunyi secara default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#fullscreen-menu.active {
    display: flex;
}

/* Tombol Close */
#close-menu-btn {
    position: absolute;
    top: 2rem;
    right: 1rem;
    cursor: pointer;
    color: #333;
    z-index: 50;
}

/* Logo "BareTone" */
#fullscreen-menu .text-red-600 {
    font-size: 2.5rem; /* Ukuran lebih besar */
    text-transform: uppercase;
    margin-top: 2rem; /* Tambahkan jarak ke atas */
    margin-bottom: 1.5rem; /* Tambahkan jarak ke menu */
}

/* Styling Daftar Menu */
#fullscreen-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#fullscreen-menu li {
    margin: 1rem 0;
}

#fullscreen-menu li a {
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 500;
}

/* Responsif */
@media (max-width: 768px) {
    #fullscreen-menu ul li {
        padding: 1rem 0;
    }

    #fullscreen-menu .text-red-600 {
        font-size: 2.8rem;
    }

    #fullscreen-menu li a {
        font-size: 1.4rem;
    }
}

/* Maps responsive */

#map {
    height: 600px; /* Tinggi default untuk desktop */
    width: 100%; /* Lebar mengikuti container */
    max-width: 900px; /* Batas lebar maksimum */
    margin: 0 auto; /* Pusatkan peta */
    border-radius: 10px; /* Opsional: sudut melengkung */
}

/* Untuk perangkat mobile */
@media (max-width: 768px) {
    #map {
        height: 400px; /* Kurangi tinggi peta di layar kecil */
    }
}

/* Animasi Slide Dari Atas */

.text-slide-from-top {
    animation: smoothSlideTop 0.5s ease-out forwards; /* Tambahkan animasi */
}

@keyframes smoothSlideTop {
    0% {
        opacity: 0;
        transform: translate(-50%, -15%); /* Mulai sedikit lebih tinggi */
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0%); /* Berhenti di posisi tengah */
    }
}

/* Kontainer Banner */
.banner-container {
    width: 100%;
    height: 100vh; /* Sesuaikan dengan tinggi layar perangkat */
    overflow: hidden;
    position: relative;
}

.banner-container .banner-media {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Agar gambar memenuhi container tanpa distorsi */
    object-position: center; /* Pusatkan gambar */
}

@media (max-width: 768px) {
    .banner-container {
        height: 100vh; /* Tinggi sesuai layar perangkat */
    }

    .banner-container .banner-media {
        object-fit: cover; /* Penuhi layar tanpa distorsi */
        object-position: center;
    }
}

/* Media (Gambar/Video) */
.banner-media {
    width: 100%; /* Lebar penuh */
    height: 100%; /* Tinggi penuh */
    object-fit: cover; /* Isi penuh kontainer tanpa distorsi */
    display: block; /* Pastikan elemen block */
}

/* deskripsi image  */

.description_image {
    position: absolute;
    top: 8%; /* Menurunkan sedikit lebih jauh ke bawah */
    left: 50%; /* Horizontal di tengah */
    transform: translate(-50%, -50%); /* Pusatkan secara penuh */
    text-align: center;
    padding: 1rem;
    opacity: 0; /* Awalnya tidak terlihat */
}

.description_image h1 {
    margin-bottom: -1rem;
    font-family: "Montserrat";
    letter-spacing: 0.15rem;
}

.description_image h2 {
    margin-bottom: 0.5rem;
}

.description_image p {
    margin-bottom: 0.5rem;
}

/* Responsif untuk Mobile */
@media (max-width: 768px) {
    .description_image {
        top: 5%; /* Posisi lebih rendah pada layar kecil */
        font-size: 0.9rem; /* Ukuran teks lebih kecil */
        left: 50%; /* Tetap di tengah horizontal */
        transform: translateX(-50%); /* Pastikan tetap di tengah */
    }

    .description_image h1 {
        font-size: 1.5rem; /* Heading lebih kecil */
    }

    .description_image h2 {
        font-size: 1.2rem; /* Subheading lebih kecil */
    }

    .description_image p {
        font-size: 0.9rem; /* Paragraf lebih kecil */
    }
}

/* Responsif untuk Layar Lebar */
@media (min-width: 1024px) {
    .description_image {
        top: 6%; /* Posisi sedikit lebih rendah pada layar lebar */
        left: 50%; /* Tetap gunakan left 50% */
        transform: translateX(-50%); /* Selalu di tengah horizontal */
    }

    .description_image h1 {
        font-size: 2.5rem; /* Heading lebih besar */
    }

    .description_image h2 {
        font-size: 2rem; /* Subheading lebih besar */
    }

    .description_image p {
        font-size: 1.2rem; /* Paragraf lebih besar */
    }
}

.rich-content * {
    color: white !important; /* Pastikan warna putih berlaku */
}

.flex {
    --tw-ring-color: transparent; /* Menghapus warna ring */
    box-shadow: none; /* Menghilangkan shadow ring */
}

/* card new index */

/* Kontainer */
.running-text {
    height: 2.5rem; /* Tinggi area teks */
    position: relative;
}

/* judul products */

/* Animasi untuk Baris Pertama */
.animate-scroll {
    animation: scroll-left 15s linear infinite;
}

/* Animasi untuk Baris Kedua */
.animate-scroll-reverse {
    animation: scroll-right 15s linear infinite;
}

/* Efek Animasi Bergerak ke Kiri */
@keyframes scroll-left {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Efek Animasi Bergerak ke Kanan */
@keyframes scroll-right {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Hilangkan Scrollbar */
.hide-scrollbar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.hide-scrollbar::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* Responsivitas */
.social-item {
    min-width: 18rem; /* Adjust width */
    max-width: 18rem;
}

/* halaman detail scroll bar down */

/* Sembunyikan scrollbar */
.hide-scrollbar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

.hide-scrollbar::-webkit-scrollbar {
    display: none; /* WebKit */
}

/* Responsivitas */
.w-full {
    width: 100%;
}

.h-auto {
    height: auto;
}

/* Tombol Navigasi Umum */
[data-carousel-prev],
[data-carousel-next] {
    position: absolute;
    top: 50%; /* Posisikan vertikal di tengah */
    transform: translateY(-50%); /* Pastikan tombol tetap di tengah */
    z-index: 10; /* Pastikan berada di atas elemen lainnya */
    background-color: rgba(
        0,
        0,
        0,
        0.5
    ); /* Opsional: Tambahkan latar belakang */
    border-radius: 50%; /* Opsional: Bikin tombol melingkar */
    width: 60px; /* Ukuran tombol lebih lebar */
    height: 60px; /* Ukuran tombol lebih lebar */
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease; /* Menambahkan efek transisi saat hover */
    opacity: 0.7; /* Transparansi tombol */
}

/* Tombol Kiri */
[data-carousel-prev] {
    left: 1rem; /* Posisi tombol kiri */
}

/* Tombol Kanan */
[data-carousel-next] {
    right: 1rem; /* Posisi tombol kanan */
}

/* Efek hover untuk tombol */
[data-carousel-prev]:hover,
[data-carousel-next]:hover {
    opacity: 1; /* Membuat tombol lebih jelas saat hover */
}

/* animasi slide detail */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Penyesuaian untuk Mobile */
@media (max-width: 768px) {
    [data-carousel-prev],
    [data-carousel-next] {
        padding: 0.75rem; /* Kurangi ukuran tombol untuk mobile */
    }
    [data-carousel-prev] {
        left: 0.5rem; /* Lebih dekat ke tepi layar pada mobile */
    }
    [data-carousel-next] {
        right: 0.5rem; /* Lebih dekat ke tepi layar pada mobile */
    }
}