/* ======= Hotel App Custom Styles ======= */

.card {
  border: none;
  transition: all 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.card-title {
  font-weight: 600;
}
.form-label {
  font-size: 0.7rem;
  font-weight: 500;
}
.form-select, .form-control {
  border-radius: 10px;
}
.btn-outline-primary {
  border-radius: 8px;
}
.pagination .page-item.active .page-link {
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.pagination .page-link {
  border-radius: 8px;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .card img {
    height: 180px !important;
  }
  h2 {
    font-size: 1.6rem;
  }
  .form-label {
    font-size: 0.85rem;
  }
}

/* ===== HERO CAPTION ANIMATION FIX ===== */

/* Semua caption default disembunyikan */
.hero-caption > * {
    opacity: 0;
    transform: translateY(30px);
}

/* Saat slide aktif muncul → animasi jalan */
.carousel-item.active .hero-caption > * {
    animation: fadeUp 0.9s ease forwards;
}

/* Delay tiap elemen */
.carousel-item.active .hero-caption h1 {
    animation-delay: 0.1s;
}
.carousel-item.active .hero-caption p {
    animation-delay: 0.3s;
}
.carousel-item.active .hero-caption a {
    animation-delay: 0.5s;
}

/* Keyframe animasi */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* PENTING: Trigger ulang animasi setiap slide berubah */
.carousel-item.carousel-item-start .hero-caption > *,
.carousel-item.carousel-item-end .hero-caption > * {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    animation: none !important;
}

/* ===== TYPEWRITER ANIMATION ===== */

.hero-caption h1 {
    overflow: hidden;               /* wajib untuk efek ketik */
    white-space: nowrap;            /* biar teks satu baris */
    border-right: none;   /* caret / kursor */
    width: 0;                       /* start dari 0 */
    opacity: 0;                     /* sembunyikan awal */
    margin-bottom: 30px;
    line-height: 1.3;
    color: #d4af37;
}

.carousel-item.active .hero-caption h1 {
    opacity: 1;
    animation: typing 2.8s steps(40, end) forwards,
               blinkCaret 0.75s step-end infinite;
    animation-delay: .2s;  /* nunggu slide muncul */
    margin-bottom: 30px;
}

/* ketik teks */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

/* kedip caret */
@keyframes blinkCaret {
    50% { border-color: transparent; }
}

.carousel-item.active .hero-caption p {
    opacity: 0;
    animation: fadeUpNormal .9s ease forwards;
    animation-delay: 3s; /* setelah judul selesai diketik */
}

.carousel-item.active .hero-caption a {
    opacity: 0;
    animation: fadeUpNormal .9s ease forwards;
    animation-delay: 3.3s;
}

@keyframes fadeUpNormal {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===============================
   NAVBAR MODERN BLUE HOTEL
   =============================== */

/* WARNA AWAL: biru transparan */
.navbar {
    background: rgba(0, 40, 120, 0.7) !important; /* biru muda transparan */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    transition: background 0.4s ease, padding 0.3s ease;
}

/* BRAND */
.navbar-brand {
    color: #ffffff !important;
    font-weight: 700;
    text-shadow: 0 2px 5px rgba(0,0,0,0.4);
}
.navbar-brand:hover {
    color: #aee4ff !important;
}

/* NAV LINK */
.navbar .nav-link {
    color: #ffffff !important;
    font-weight: 500;
    padding: 12px 16px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    transition: 0.3s ease;
}

.navbar .nav-link:hover {
    color: #aee4ff !important;
    background: rgba(255,255,255,0.12);
    border-radius: 6px;
}

/* ACTIVE */
.navbar .nav-link.active {
    color: #aee4ff !important;
    background: rgba(255,255,255,0.18);
    font-weight: 600;
    border-radius: 6px;
}

/* WARNA SAAT SCROLL: biru navy solid */
.navbar.scrolled {
    background: rgba(0, 45, 95, 0.95) !important; /* biru tua solid */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.25);
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.footer-hotel {
    background: #003366; /* dark navy blue */
    color: #ffffff; /* soft light blue for text */
    padding: 40px 0;
}

.footer-hotel a {
    color: #b7e0ff; /* light blue link */
    text-decoration: none;
}

.footer-hotel a:hover {
    color: #ffffff;
}

.footer-social.circle a {
    width: 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
    border-radius: 50%;
    background: #0e3b6f; /* biru hotel tua */
    color: white;
    font-size: 18px;
    transition: 0.3s ease;
}

.footer-social.circle a:hover {
    background: #1a73e8; /* modern blue hotel */
    transform: translateY(-4px);
}

.card-header {
    background-color: #0e3b6f;
    color: #fff;
}