@import url('https://fonts.googleapis.com/css2?family=Protest+Strike&family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;700&family=Inter:wght@400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --primary: #2E4FFE;
  --secondary: #2563eb;
  --dark: #111827;
  --light: #f3f4f6;
  --font-main: 'Roboto Condensed', sans-serif;
}

body {
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-strike {
  font-family: var(--font-main) !important;
  text-wrap: balance;
}

.space-x-12 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(3rem * var(--tw-space-x-reverse));
    margin-left: calc(3rem * calc(0 - var(--tw-space-x-reverse))) !important;
}

.bg-cloud {
    padding-top: 100px;
    min-height: 100vh;
    position: relative;
    overflow: visible;
    background-image: linear-gradient(180deg, rgb(182 207 255) 0%, rgb(255 255 255 / 48%) 100%), url(https://asset-1.tribunnews.com/img/chbrand/superskor/bg2.jpeg);
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.mt-bg{
  margin-top: 7rem;
}
.font-protest {
  font-family: 'Protest Strike', sans-serif !important;
  font-weight: 400 !important;
}

footer h4 {
  font-family: 'Protest Strike', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

footer nav a {
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
}

.font-display {
  font-family: 'Roboto Condensed', sans-serif;
}

.font-mono-custom {
  font-family: 'Space Grotesk', monospace;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.justify-center-berita{
  text-align: center;
}

.glass-morphism {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.text-stroke {
  -webkit-text-stroke: 1px currentColor;
  color: transparent;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  width: 200%;
  animation: marquee 30s linear infinite;
  will-change: transform;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

.page-transition {
  animation: fadeIn 0.5s ease-out;
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
.top-video {
    top: -19rem;
}
@media (min-width: 1024px) {
    .top-berita {
        top: -16rem;
    }
    .top-detail {
        top: 0rem;
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .text-\[10px\], .text-\[11px\] {
    font-size: 12px !important;
    letter-spacing: 0.05em !important;
  }
  .mt-bg{
    margin-top: 3rem;
  }
  .justify-center-berita{
    text-align: left;
  }
}

.aspect-video-custom {
  aspect-ratio: 16 / 9;
}

.aspect-square-custom {
  aspect-ratio: 1 / 1;
}

/* Knockout Bracket Styling */
.bracket-connector-top {
    border-top: 2px solid #94a3b8; /* darker gray for visibility */
    border-right: 2px solid #94a3b8;
}

.bracket-connector-bottom {
    border-bottom: 2px solid #94a3b8;
    border-right: 2px solid #94a3b8;
}

.space-x-12 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(3rem * var(--tw-space-x-reverse));
    margin-left: calc(3rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-10 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2.5rem * var(--tw-space-x-reverse));
    margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
}

/* Premium Breadcrumb Override */
nav.rounded-full.border.italic {
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
  border-color: rgb(243 244 246) !important;
  backdrop-filter: none !important;
}

/* Premium Subtitle Badge */
.premium-subtitle {
  display: inline-block;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #111827 !important; /* High contrast text-gray-900 */
  font-weight: 900 !important;
  font-size: 10px !important;
  max-width: 100% !important;
  text-align: center !important;
}
@media (min-width: 768px) {
  .premium-subtitle {
    font-size: 16px !important;
  }
}

/* Mobile Menu Full Height Expansion */
#mobile-menu:not(.hidden) {
  height: 100vh !important;
  min-height: 100vh !important;
  background-color: #ffffff !important;
  overflow-y: auto !important;
  padding-bottom: 12rem !important;
}

/* Ensure header is solid white when mobile menu is open, not transparent/translucent */
#navbar:has(#mobile-menu:not(.hidden)) {
  background-color: #ffffff !important;
}

#navbar:has(#mobile-menu:not(.hidden)) .bg-white\/80 {
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#navbar:has(#mobile-menu:not(.hidden)) .backdrop-blur-md {
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Custom Elegant White Scrollbar for Highlights Slider */
#highlights-slider {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.05) !important;
}

#highlights-slider::-webkit-scrollbar {
  display: block !important;
  height: 6px !important;
}

#highlights-slider::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 9999px !important;
}

#highlights-slider::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.45) !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#highlights-slider::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.75) !important;
}

#team-content h1{
  font-size: 2em;
  font-weight: 700;
}
#team-content h2{
  font-size: 1.5em;
  font-weight: 700;
}
#team-content h3{
  font-size: 1.17em;
  font-weight: 700;
}
#team-content h4{
  font-size: 1em;
  font-weight: 700;
}
#team-content h5{
  font-size: 0.83em;
  font-weight: 700;
}
#team-content h6{
  font-size: 0.67em;
  font-weight: 700;
}