/* ==========================================================
   GRIT PROTOCOL — Global Style Sheet
   Theme : Premium Gold × Black
   ========================================================== */

:root {
   --gold:         #D4AF37;
   --gold-bright:  #F5C842;
   --gold-deep:    #A8881C;
   --gold-pale:    #F5E6C8;
   --gold-glow:    rgba(212, 175, 55, 0.45);
   --gold-soft:    rgba(212, 175, 55, 0.10);
   --black:        #080808;
   --black-soft:   #111111;
   --black-card:   #161616;
   --black-lift:   #1E1E1E;
   --text-light:   #F5E6C8;
   --text-muted:   #8A7A5A;
   --border-gold:  rgba(212, 175, 55, 0.28);
}

/* ── CAROUSEL ─────────────────────────────────────────── */
.carousel-item {
   position: relative;
}

.carousel-item::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.35) 0%,
      rgba(8, 8, 8, 0.65) 100%
   );
   z-index: 1;
}

.carousel-item img {
   transition: transform 0.6s ease;
   filter: brightness(0.85);
}

.carousel-item:hover img {
   transform: scale(1.04);
}

.carousel-caption {
   z-index: 2;
   color: var(--text-light);
   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
   animation: fadeSlideUp 1s ease-in-out;
}

.carousel-caption h1 {
   font-size: 3rem;
   font-weight: 800;
   color: var(--gold-bright);
   text-shadow: 0 0 22px var(--gold-glow), 0 2px 6px rgba(0,0,0,0.9);
   animation: fadeInTitle 1.4s ease-in-out both;
   animation-delay: 0.3s;
}

.carousel-caption p {
   font-size: 1.2rem;
   color: var(--text-light);
   animation: fadeInText 1.4s ease-in-out both;
   animation-delay: 0.7s;
}

/* ── HERO TITLE ───────────────────────────────────────── */
.hero-title {
   font-size: 3rem;
   font-weight: 700;
   color: var(--gold-bright);
   text-shadow: 0 0 18px var(--gold-glow), 2px 2px 8px rgba(0,0,0,0.8);
   animation: fadeInDown 1s ease-in-out;
}

.hero-divider {
   width: 60px;
   height: 4px;
   margin: 0 auto 20px;
   background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
   border-radius: 2px;
   animation: fadeIn 1.2s ease-in-out;
}

/* ── SECTION TITLE ────────────────────────────────────── */
.section-title {
   font-size: 2.4rem;
   font-weight: 800;
   color: var(--gold-bright);
   text-shadow: 0 0 16px var(--gold-glow);
   position: relative;
   display: inline-block;
   padding-bottom: 12px;
   letter-spacing: .02em;
   animation: fadeInDown 1s ease-in-out;
}

.section-title::after {
   content: '';
   width: 55%;
   height: 3px;
   background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold-deep));
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: 0;
   border-radius: 2px;
}

/* ── CARD — BASE ──────────────────────────────────────── */
.card {
   background: linear-gradient(145deg, var(--black-card), var(--black-soft));
   border: 1px solid var(--border-gold);
   border-radius: 18px;
   box-shadow: 0 6px 28px rgba(212, 175, 55, 0.07);
   color: var(--text-light);
   transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.card:hover {
   transform: translateY(-8px) scale(1.01);
   border-color: rgba(212, 175, 55, 0.6);
   box-shadow: 0 16px 48px rgba(212, 175, 55, 0.18);
}

.card-title {
   font-weight: 700;
   font-size: 1.1rem;
   color: var(--gold-bright);
}

.card-text {
   font-size: 0.9rem;
   color: var(--text-muted);
}

/* ── CARD — BERITA ────────────────────────────────────── */
.card-berita {
   background: linear-gradient(145deg, var(--black-card), var(--black-lift));
   border: 1px solid var(--border-gold);
   border-radius: 18px;
   overflow: hidden;
   transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
   box-shadow: 0 4px 20px rgba(212, 175, 55, 0.07);
}

.card-berita:hover {
   transform: scale(1.04) rotateX(2deg);
   border-color: rgba(212, 175, 55, 0.55);
   box-shadow: 0 14px 40px rgba(212, 175, 55, 0.18);
}

.card-berita img {
   object-fit: cover;
   border-top-left-radius: 18px;
   border-top-right-radius: 18px;
   filter: brightness(0.88);
   transition: filter 0.3s ease;
}

.card-berita:hover img {
   filter: brightness(1);
}

.card-body h5 {
   font-weight: 700;
   font-size: 1.05rem;
   color: var(--gold-bright);
}

.card-body p {
   font-size: 0.88rem;
   color: var(--text-muted);
}

/* ── CARD — FASILITAS ─────────────────────────────────── */
.card-fasilitas {
   background: linear-gradient(145deg, var(--black-card), var(--black-lift));
   border: 1px solid var(--border-gold);
   border-radius: 18px;
   box-shadow: 0 8px 28px rgba(212, 175, 55, 0.08);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   transform-style: preserve-3d;
   perspective: 1000px;
   overflow: hidden;
}

.card-fasilitas:hover {
   transform: translateY(-10px) rotateY(4deg);
   box-shadow: 0 20px 50px rgba(212, 175, 55, 0.2);
   border-color: rgba(212, 175, 55, 0.6);
}

.card-fasilitas img {
   border-top-left-radius: 18px;
   border-top-right-radius: 18px;
   object-fit: cover;
   width: 100%;
   height: 200px;
   filter: brightness(0.85);
   transition: filter 0.3s ease;
}

.card-fasilitas:hover img {
   filter: brightness(1);
}

.card-title-fasilitas {
   font-size: 1.1rem;
   font-weight: 700;
   margin-top: 10px;
   color: var(--gold-bright);
}

/* ── IMG THUMBNAIL ────────────────────────────────────── */
.img-thumbnail {
   border-radius: 18px;
   border: 2px solid var(--gold-deep);
   box-shadow: 0 8px 24px rgba(212, 175, 55, 0.15);
   background: var(--black-card);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.img-thumbnail:hover {
   transform: rotateY(5deg) scale(1.03);
   box-shadow: 0 14px 36px rgba(212, 175, 55, 0.28);
}

/* ── JUMBOTRON / JURUSAN ──────────────────────────────── */
.jumbotron.jurusan {
   background-size: cover;
   background-position: center;
   color: var(--text-light);
   padding: 5rem 1rem;
   border-radius: 22px;
   box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.55);
   position: relative;
}

.jurusan::before {
   content: '';
   position: absolute;
   inset: 0;
   background: rgba(8, 8, 8, 0.55);
   backdrop-filter: blur(2px);
   border-radius: 22px;
   z-index: 1;
}

.jurusan .container {
   position: relative;
   z-index: 2;
}

.jurusan img {
   width: 160px;
   height: 160px;
   object-fit: cover;
   border-radius: 50%;
   border: 4px solid var(--gold);
   box-shadow: 0 0 28px var(--gold-glow), 0 4px 16px rgba(0,0,0,0.5);
   transition: transform 0.3s ease;
}

.jurusan img:hover {
   transform: scale(1.07);
}

.jumbotron .col-lg-4 img {
   width: 100px;
   height: auto;
   transition: transform 0.4s ease;
}

.jumbotron .col-lg-4:hover img {
   transform: scale(1.1) rotate(3deg);
}

/* ── SINGLE EVENT ─────────────────────────────────────── */
.single_event {
   background: linear-gradient(145deg, var(--black-card), var(--black-lift));
   border: 1px solid var(--border-gold);
   padding: 1.5rem;
   border-radius: 18px;
   margin-bottom: 1rem;
   transition: all 0.3s ease;
   box-shadow: 0 5px 20px rgba(212, 175, 55, 0.07);
}

.single_event:hover {
   transform: scale(1.02);
   border-color: rgba(212, 175, 55, 0.55);
   box-shadow: 0 12px 36px rgba(212, 175, 55, 0.18);
}

.event_info h4 {
   font-weight: 700;
   color: var(--gold-bright);
}

/* ── NAVBAR CUSTOM ────────────────────────────────────── */
.navbar-custom {
   background: linear-gradient(90deg, var(--black) 0%, var(--black-soft) 100%);
   border-bottom: 1px solid var(--gold-deep);
   min-height: 90px;
   padding-top: 20px;
   padding-bottom: 20px;
   box-shadow: 0 4px 24px rgba(212, 175, 55, 0.2);
}

.navbar-brand {
   font-size: 26px;
   color: var(--gold-bright) !important;
   text-shadow: 0 0 12px var(--gold-glow);
}

.navbar-nav .nav-link {
   color: var(--text-light) !important;
   font-size: 17px;
   transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
   color: var(--gold-bright) !important;
   text-shadow: 0 0 10px var(--gold-glow);
}

/* ── BUTTON — BACA ────────────────────────────────────── */
.btn-baca {
   background: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold-bright) 60%, var(--gold-deep) 100%);
   color: var(--black);
   font-weight: 700;
   border: none;
   border-radius: 30px;
   padding: 8px 22px;
   font-size: 13px;
   letter-spacing: 0.6px;
   text-transform: uppercase;
   box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
   transition: all 0.3s ease-in-out;
}

.btn-baca i {
   transition: transform 0.3s ease-in-out;
}

.btn-baca:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 28px rgba(212, 175, 55, 0.55);
   color: var(--black);
   background: linear-gradient(135deg, var(--gold-bright), var(--gold), var(--gold-bright));
}

.btn-baca:hover i {
   transform: translateX(4px);
}

/* ── PAGINATION ───────────────────────────────────────── */
.pagination-container ul {
   display: flex;
   justify-content: center;
}

.pagination-container .page-item {
   margin: 0 4px;
}

.pagination-container .page-link {
   text-decoration: none;
   padding: 8px 16px;
   border-radius: 8px;
   background: var(--black-card);
   border: 1px solid var(--border-gold);
   color: var(--gold);
   transition: all 0.25s ease;
}

.pagination-container .page-link:hover {
   background: var(--gold-soft);
   color: var(--gold-bright);
   border-color: var(--gold);
}

.pagination-container .page-item.active .page-link {
   background: var(--gold);
   border-color: var(--gold);
   color: var(--black);
   font-weight: 700;
   box-shadow: 0 0 14px var(--gold-glow);
}

/* ── BG COVER OVERLAY ─────────────────────────────────── */
.bg-cover::before {
   background: rgba(8, 8, 8, 0.72);
}

/* ── ANIMATIONS ───────────────────────────────────────── */
@keyframes fadeInDown {
   from { opacity: 0; transform: translateY(-20px); }
   to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
   from { opacity: 0; }
   to   { opacity: 1; }
}

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

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

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