/* === Font === */
@font-face {
font-family: 'Poppins';
src: url('/assets/font/Poppins-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

/* === Base === */
body {
margin: 0;
padding-top: 70px;
font-family: 'Poppins', sans-serif;
background-color: #fff;
color: #333;
}

a {
text-decoration: none;
color: inherit;
}

/* === Cookie Bar === */
#cookieConsentBar {
position: fixed;
z-index: 1100;
width: 100%;
background: rgba(58, 15, 16, 0.85);
color: #fff;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}

.cookie-container {
max-width: 1200px;
margin: 0 auto;
padding: 16px 8.5rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
}

.cookie-container p {
margin: 0;
font-size: 14px;
line-height: 1.5;
flex: 1 1 70%;
}

.cookie-policy-link {
color: white;
text-decoration: underline;
font-weight: 600;
}

#cookieAcceptBtn {
background: linear-gradient(to right, #e53935, #721313);
color: white;
padding: 10px 24px;
border: none;
border-radius: 24px;
font-weight: 600;
cursor: pointer;
flex-shrink: 0;
}

@media (max-width: 768px) {
#cookieConsentBar {
margin-top: 6px;
}
.cookie-container {
padding: 12px 16px;
flex-direction: column;
align-items: flex-start;
text-align: left;
}

.cookie-container p {
flex: 1 1 auto;
width: 100%;
font-size: 13px;
}

#cookieAcceptBtn {
width: 100%;
padding: 10px;
border-radius: 8px;
font-size: 14px;
}
}


/* === Navbar === */
.navbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1001;
background: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
padding: 1rem;
}

.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1140px;
margin: auto;
padding: 0 7.1rem;
}

.logo {
font-weight: bold;
font-size: 1.5rem;
margin-right: auto;
}

.nav-logo {
max-height: 40px;
width: auto;
display: block;
}

.nav-links {
flex: 1;
display: flex;
justify-content: center;
}

.nav-links ul {
display: flex;
gap: 2rem;
list-style: none;
margin: 0;
padding: 0;
}

.nav-links ul li a {
color: #222;
font-weight: 500;
}

.navbar-language {
margin-left: 1rem;
font-size: 1.1rem;
}

.menu-toggle {
display: none;
background: none;
border: none;
font-size: 2rem;
cursor: pointer;
margin-left: 1rem;
}

/* === Sidebar (Mobile Nav) === */
.sidebar {
position: fixed;
top: 0;
right: 0;
width: 70vw;
height: 100%;
background: rgba(34, 34, 34, 0.7); /* Transparan 70% */
color: #fff;
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
z-index: 1002;
padding: 2rem 1.5rem;
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
overflow-y: auto;

/* Blur effect - Cross-browser support */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* Safari support */
}

.close-sidebar {
position: absolute;
top: 1rem;
left: 1rem;
background: none;
color: #fff;
font-size: 2rem;
border: none;
cursor: pointer;
z-index: 1003;
}

.sidebar ul {
list-style: none;
padding: 0;
margin-top: 2rem;
}

.sidebar ul li {
margin-bottom: 1rem;
}

.sidebar ul li a {
color: #fff;
text-decoration: none;
font-size: 1rem;
}

.sidebar-language {
margin-top: 2rem;
font-size: 0.9rem;
color: #aaa;
}

.close-sidebar {
position: absolute;
top: 1rem;
left: 1rem; /* Pindah ke kiri */
background: none;
color: #fff;
font-size: 2rem;
border: none;
cursor: pointer;
z-index: 1003;
}

.sidebar-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
z-index: 1001;
display: none;
}

.sidebar-backdrop.active {
display: block;
}


.sidebar.active {
transform: translateX(0);
}

.close-sidebar {
position: absolute;
top: 1rem;
left: 1rem;
background: none;
border: none;
color: #fff;
font-size: 2rem;
cursor: pointer;
}

.sidebar ul {
list-style: none;
padding: 0 2rem;
}

.sidebar ul li {
margin: 1.5rem 0;
}

.sidebar ul li a {
color: #fff;
font-size: 1.1rem;
}

.sidebar-language {
display: block;
margin: 2rem 2rem 0;
font-size: 1.1rem;
border-top: 1px solid #444;
padding-top: 1rem;
}

/* === Hero Section === */
.hero {
width: 100%;
height: 50vh;
position: relative;
height: 500px;
overflow: hidden;
background-size: cover;
}

.hero-slide {
position: absolute;
inset: 0;
transition: opacity 0.5s ease-in-out;
}

.hero-overlay {
background-color: rgba(179, 2, 2, 0.6);
display: flex;
justify-content: center;
align-items: center;
color: white;
text-align: center;
flex-direction: column;
height: 100%;
}

.hero-text h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
}

.hero-text p {
font-size: 1.2rem;
font-weight: 300;
margin-bottom: 1rem;
}

.hero-slider-dots {
position: absolute;
bottom: 80px;
width: 100%;
display: flex;
gap: 12px;
justify-content: center;
z-index: 10;
}

.hero-slider-dots .dot {
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
background: transparent;
cursor: pointer;
position: relative;
}

.hero-slider-dots .dot::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 6px; height: 6px;
background: white;
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0.4;
}

.hero-slider-dots .dot.active {
border-color: white;
}

.hero-slider-dots .dot.active::after {
opacity: 1;
}

.subtitle-typing {
font-family: 'Poppins', sans-serif;
font-weight: 300;
font-size: 1.2rem;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid white;
animation: blink 0.7s steps(1) infinite;
}

@keyframes blink {
50% { border-color: transparent; }
}

/* === About Section === */
.about {
padding: 60px 20px;
background-color: #fff;
}

.about-wrapper {
max-width: 1200px;
margin: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 60px;
justify-content: center;
}

.about-logos {
flex: 1;
display: flex;
justify-content: center;
}

.logo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
width: 100%;
max-width: 340px;
justify-items: center;
justify-content: center; /* tambahkan ini */
}

.logo-box {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
width: 110px;
height: 110px;
padding: 12px;
display: flex;
justify-content: center;
align-items: center;
}

.logo-box img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: all .3s ease;
}

.logo-box:hover .logo-box img {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .logo-box:hover .logo-box img  {
        transform: none;
    }
}

@media (max-width: 768px) {
.logo-box {
width: 70px;
height: 70px;
padding: 6px;
}
}

.logo-grid .logo-box:nth-child(9) {
grid-column: 3;
}

.about-text {
flex: 1;
min-width: 300px;
}

.about-text h2 {
font-size: 28px;
font-weight: 700;
margin-bottom: 16px;
}

@media (max-width: 480px) {
    .about-text h2  {
        font-size: 14px;
    }
}

.about-text h2 span {
color: #E02A26;
}

@media (max-width: 480px) {
    .about-text h2 span {
        font-size: 14px;
    }
}

.about-text p {
margin-bottom: 24px;
color: #333;
line-height: 1.6;
}

@media (max-width: 480px) {
    .about-text p  {
        font-size: 14px;
    }
}

.about-text .btn {
padding: 10px 24px;
border-radius: 24px;
background: linear-gradient(to right, #e53935, #4e0e0e);
color: #fff;
font-weight: 600;
transition: background 0.3s ease, transform 0.2s ease;
}

.about-text .btn:hover {
background: linear-gradient(to right, rgba(229, 57, 53, 0.8), rgba(78, 14, 14, 0.8)); /* Gradien dengan transparansi */
transform: scale(1.1);
}

/* === Latest News === */
.latest-news {
background-color: #ffeceb;
padding: 60px 9rem;
}

.latest-news .container {
max-width: 1200px;
margin: auto;
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: flex-start;
}

.news-left {
flex: 1;
min-width: 280px;
}

.news-left h2 {
font-size: 28px;
margin-bottom: 12px;
font-weight: 700;
}

.news-left p {
color: #555;
margin-bottom: 20px;
}

@media (max-width: 480px) {
    .news-left p {
        font-size: 14px;
    }
}

.btn-see-more {
padding: 10px 24px;
border-radius: 24px;
background: linear-gradient(to right, #e53935, #4e0e0e);
color: #fff;
font-weight: 600;
transition: background 0.3s ease, transform 0.2s ease;
}

@media (max-width: 480px) {
    .btn-see-more  {
        font-size: 14px;
    }
}


.btn-see-more:hover {
background: linear-gradient(to right, rgba(229, 57, 53, 0.8), rgba(78, 14, 14, 0.8)); /* Gradien dengan transparansi */
transform: scale(1.1);
}

.news-right {
flex: 3;
display: flex;
gap: 24px;
overflow-x: auto;
padding-bottom: 8px;
position: relative;
}


.news-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 16px;
}

.news-card {
    flex: 0 0 auto;
    width: 300px; /* or whatever */
}

.news-chevron {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(to bottom right, #e53935, #4e0e0e);
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: background 0.3s ease, transform 0.2s ease;
    pointer-events: auto;
}

.news-chevron:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.chevron-left {
    left: 0;
}

.chevron-right {
    right: 0;
}

.news-scroll-wrapper .news-right {
    padding: 0 48px 8px 48px; /* Space for chevrons */
}

/* === Fixed-height news card === */
.news-card {
width: 240px;
height: 300px;
flex-shrink: 0;
border-radius: 12px;
overflow: hidden;
background: #000;
position: relative;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}

.news-img {
flex: 1;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}

.news-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.news-img {
overflow: hidden;
position: relative;
}

.news-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}

.news-img:hover img {
transform: scale(1.1);
}


/* === Fixed overlay at bottom === */
.overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 16px;
background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.3));
color: #fff;
display: flex;
flex-direction: column;
gap: 4px;
height: 100px;
box-sizing: border-box;
}

/* === Text clamp to prevent overflow === */
.overlay h4,
.overlay p,
.overlay span {
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-height: 1.3em;
max-height: 2.6em;
font-size: 13px;
}

@media (max-width: 480px) {
    .overlay p {
        font-size: 10px;
    }
}

.overlay h4 {
font-size: 15px;
font-weight: 600;
-webkit-line-clamp: 1;
max-height: 1.3em;
}

/* === Footer === */
footer {
font-family: 'Poppins', sans-serif;
}

.footer-top {
background: linear-gradient(to top, #000, #e02a26);
color: white;
padding: 3rem 9rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2rem;
}

.footer-left {
max-width: 300px;
display: flex;
flex-direction: column;
}

.footer-logo {
width: 120px;
margin-bottom: 1rem;
}

.footer-address {
font-size: 0.9rem;
line-height: 1.5;
}

@media (max-width: 768px) {
.footer-address {
        margin-top: 16px;
    }
}


.footer-nav {
display: flex;
gap: 3rem;
flex-wrap: wrap;
}

.footer-nav ul {
list-style: none;
padding: 0;
min-width: 120px;
}

.footer-nav ul li {
margin: 0.5rem 0;
}

.footer-nav ul li strong {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
}

.footer-nav a {
color: white;
font-size: 0.9rem;
transition: all .3s ease;
}

.footer-nav a:hover {
    transform: translateX(4px);
}

@media (max-width: 768px) {
.footer-nav a:hover {
    transform: none;
    }
}

.footer-middle {
background: #fff;
padding: 1rem 9rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}

.language-select {
font-size: 18px;
display: flex;
gap: 0.5rem;
align-items: center;
}

@media (max-width: 768px) {
.language-select {
    font-size: 16px;
    }
}

.language-select i {
font-size: 24px;
}


.socials a {
color: #000;
font-size: 1.25rem;
margin: 0 0.5rem;
transition: all 0.3s ease;
}

.socials a:hover {
color: #e02a26;
}

.socials a:hover i {
    transform: scale(1.1);
}


.socials__icon {
transition: all .3s ease;
}

.socials a:hover .socials__icon {
transform: scale(1.2);
}

.footer-bottom {
background: #0b0b25;
color: #fff;
padding: 1rem 9rem;
display: flex;
justify-content: space-between;
font-size: 0.875rem;
}

/* === Responsive === */
@media (max-width: 768px) {
.navbar .container {
justify-content: space-between;
padding: 0.1rem 0.45rem; /* lebih kecil dari sebelumnya */
}

.logo {
flex: 0 0 auto;
font-size: 1.1rem; /* diperkecil */
max-height: 40px; /* jika logo berupa gambar */
}

.navbar {
height: auto; /* pastikan tinggi tidak fixed */
}

.navbar img.logo {
height: 10px; /* jika logo adalah gambar, bisa diatur langsung */
width: auto;
}

.nav-links,
.navbar-language {
display: none;
}

.menu-toggle {
display: block;
margin-left: 0;
}

.sidebar,
.sidebar-language {
display: block;
}

/* === About Section Mobile === */
.about-wrapper {
flex-direction: column;
gap: 2rem;
text-align: center;
}

.logo-grid {
grid-template-columns: repeat(3, 1fr);
gap: 12px;
justify-content: center;
}

.logo-box {
width: 70px;
height: 70px;
padding: 6px;
}

/* === Latest News Section Mobile === */
.latest-news {
padding: 2rem 1rem;
text-align: left;
}

.latest-news .container {
flex-direction: column;
align-items: flex-start;
}

.news-left {
width: 100%;
margin-bottom: 1.5rem;
}

.news-right {
width: 100%;
gap: 16px;
overflow-x: auto;
display: flex;
scrollbar-width: none;
-ms-overflow-style: none;
}

.news-right::-webkit-scrollbar {
display: none;
}

.news-card {
width: 220px;
height: 260px;
flex-shrink: 0;
}

.footer-top {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem;
}

.footer-left {
width: 100%;
max-width: 100%;
}

.footer-logo {
margin-bottom: 0.5rem;
}

.footer-nav {
flex-direction: column;
gap: 0.75rem;
width: 100%;
}

.footer-nav ul {
padding: 0;
margin: 0;
list-style: none;
min-width: 100%;
display: flex;
flex-direction: column;
gap: 0.25rem;
}

.footer-nav li {
padding: 0;
margin: 0;
}

/* === Footer Middle === */
.footer-middle {
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
}

/* === Footer Bottom === */
.footer-bottom {
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
text-align: left;
}

.footer-bottom p,
.footer-bottom a {
margin: 0;
font-size: 13px;
align-items: center;
}

}

/* === Hero Section Tablet === */
@media (max-width: 768px) {
.hero {
min-height: 70vh;
}
}

/* === Hero Section Mobile === */
@media (max-width: 480px) {
.hero {
min-height: 80vh;
}
}

@media (max-width: 480px) {

.about {
padding: 1rem;
}

.footer-nav {
flex-direction: column;
}

.footer-top,
.footer-middle,
.footer-bottom {
padding-left: 0.5rem;
padding-right: 0.5rem;
}

.logo-grid {
gap: 10px;
}

.logo-box {
width: 70px;
height: 70px;
}

.logo-grid {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}

.logo-box {
width: 100px;
height: 100px;
padding: 4px;
}

.news-card {
width: 200px;
height: 240px;
}

.footer-top {
padding: 1.5rem 0.75rem;
}

.footer-middle {
padding: 1rem 0.75rem;
}

.footer-bottom {
padding: 1rem 0.75rem;
}


}

@media (min-width: 769px) {
.sidebar {
display: none !important;
}

.nav-links,
.navbar-language {
display: flex !important;
}

.menu-toggle,
.sidebar-language {
display: none !important;
}
}