:root{--brand:#e70e0b;--brand-dark:#b72513;--accent:#faa65f;--bg:#fff7f2;--text:#1f2937;--muted:#6b7280;--border:#ececec;}
html{height:100%}
body{min-height:100vh;background:var(--bg);color:var(--text);display:flex;flex-direction:column}
main{flex:1}
a{text-decoration:none}
a:hover{color:var(--brand-dark)}

.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}

.site-topbar{background:linear-gradient(90deg,var(--brand-dark),var(--brand));color:#fff;font-size:.85rem}
.top-pill{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.15);padding:.25rem .6rem;border-radius:999px}

.site-header{background:#fff;border-bottom:1px solid var(--border)}
.brand-logo{width:42px;height:42px;border-radius:10px;object-fit:cover}
.brand-title{line-height:1.1}
.brand-title strong{display:block;font-size:1rem;letter-spacing:.2px}
.brand-title span{display:block;font-size:.8rem;color:var(--muted)}

.search-wrap .form-control{border-radius:999px 0 0 999px}
.search-wrap .btn{border-radius:0 999px 999px 0}

.category-bar{background:#fff;border-bottom:1px solid var(--border)}
.category-scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hide-scrollbar{scrollbar-width:none;-ms-overflow-style:none}
.hide-scrollbar::-webkit-scrollbar{display:none}
.category-scroller .nav-link{white-space:nowrap;border-radius:999px;padding:.45rem .8rem; font-weight:600;font-size:.85rem;transition:color .2s ease}
.category-scroller .nav-link.active{background:rgba(255,255,255,.2);color:#fff}
.category-scroller .nav-link:hover{color:#faa65f}

/* Hero Card */
.hero-card{min-height:320px;color:#fff;border-radius:1rem;position:relative;overflow:hidden;background:#111}
.hero-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease;z-index:0}
.hero-card:hover .hero-bg-img{transform:scale(1.08)}
.hero-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.85) 100%);z-index:1;pointer-events:none}
.hero-widget-badge{position:absolute;top:20px;left:0;background:var(--brand);color:#fff;padding:.5rem 1.5rem;font-weight:700;font-size:.75rem;letter-spacing:.5px;text-transform:uppercase;z-index:10;clip-path:polygon(0 0, 100% 0, 85% 100%, 0 100%)}
.hero-inner{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:1.5rem}
.hero-cat{display:inline-flex;background:rgba(250,166,95,.95);color:#2b1b10;padding:.25rem .6rem;border-radius:999px;font-weight:700;font-size:.75rem;width:fit-content;margin-bottom:.5rem}
.hero-title{font-size:1.65rem;font-weight:800;line-height:1.3;color:#fff;margin:0;text-shadow:0 2px 8px rgba(0,0,0,.4);transition:color .2s ease}
.hero-card:hover .hero-title{color:#e70e0b}

@media (max-width:768px){.hero-widget-badge{top:10px}.hero-card{min-height:220px}.hero-title{font-size:1.2rem}.hero-inner{padding:1rem}}

.post-img{width:100%;height:180px;object-fit:cover;border-radius:.9rem;background:transparent}
.post-thumb{width:120px;height:84px;object-fit:cover;border-radius:.9rem;background:#f3f4f6;flex:none}

/* Section Title dengan garis bawah */
.section-title{display:inline-block;font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:.5px;padding-bottom:.5rem;position:relative;margin-bottom:0}
.section-title::after{content:"";position:absolute;bottom:0;left:0;width:65%;height:3px;background:var(--brand)}

/* Card hover & styling */
.card{border-radius:.75rem;border:0;transition:transform .2s ease,box-shadow .2s ease;overflow:hidden}
.card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.1)!important}
.card .card-img-top{border-radius:.75rem .75rem 0 0;transition:transform .3s ease}
.card:hover .card-img-top{transform:scale(1.05)}
.card .card-title{transition:color .2s ease}
.card:hover .card-title{color:var(--brand)}

/* Pagination Custom Merah */
.pagination .page-link {color: var(--brand); border: 0; background: transparent; font-weight: 600;}
.pagination .page-link:hover {background-color: #fbe9e9; color: #b80f0f;}
.pagination .page-item.active .page-link {background-color: var(--brand); color: #fff; border-radius: 8px;}
.pagination .page-item.disabled .page-link {color: #aaa;}

.terkini-item{padding:14px 16px;border-bottom:1px solid var(--border);transition:background .15s ease}
.terkini-item:hover{background:rgba(0,0,0,.02)}
.terkini-item:last-child{border-bottom:0}
.terkini-thumb{width:170px;height:110px;object-fit:cover;border-radius:14px;flex:none;background:#f3f4f6}
@media (max-width:576px){.terkini-thumb{width:120px;height:86px}}
.terkini-cat{font-size:.72rem;font-weight:800;color:var(--brand);letter-spacing:.4px;text-transform:uppercase}
.terkini-title{font-size:1.05rem;font-weight:800;line-height:1.25;margin-top:2px;color:var(--text)}
.terkini-time{font-size:.85rem;color:var(--muted);margin-top:6px}

/* TERPOPULER (sidebar) */
.popular-hero img{display:block;max-height:240px;object-fit:cover}
.popular-item{color:var(--text)}
.popular-item:hover{background:rgba(0,0,0,.02)}
.popular-rank{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-weight:900;color:var(--brand);background:rgba(231,14,11,.08);flex:none}
.popular-cat{font-size:.72rem;font-weight:800;color:#9ca3af;text-transform:uppercase;letter-spacing:.35px}
.popular-title{font-size:.95rem;font-weight:800;line-height:1.25;margin-top:2px;transition:color .2s ease}
a:hover .popular-title{color:#e70e0b}
a {
    color: black;
}
div.category-scroller div.nav a {
    color: white;
}
/* Hero thumbs */
.hero-thumb{border:0}
.hero-thumb .post-img{height:120px}
.hero-thumb-title{line-height:1.25}

/* Muted helper */
.text-muted-2{color:var(--muted)!important}

.site-footer{background:#fff;border-top:1px solid var(--border)}

/* --- REDAKSI / TEAM PAGE STYLES --- */

/* Cool Gradient Underline for Section Title */
.section-title-cool {
  position: relative;
  display: inline-block;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1.5rem;
  padding-bottom: 5px;
  color: var(--text);
}
.section-title-cool::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
  transition: width 0.3s ease;
}
.section-title-cool:hover::after {
  width: 100%;
}

/* Modern Team Card */
.team-card {
  border: none;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  height: 100%;
}
.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.team-img-wrapper {
  width: 100%;
  height: 320px; /* Taller image for better overlay space */
  overflow: hidden;
  position: relative;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.team-card:hover .team-img {
  transform: scale(1.08);
}

/* Overlay gradient from bottom (Gray) */
.team-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(80, 80, 80, 0.95) 0%, rgba(80, 80, 80, 0.6) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  z-index: 2;
  color: #fff;
  text-align: left;
}

.team-name-overlay {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.team-position-overlay {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand); /* Back to Red/Brand */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.team-nip-badge {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-family: monospace;
  color: #ddd;
}

/* --- CUSTOM DROPDOWN MENU --- */
.dropdown-menu.shadow {
  border: none;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
  padding: 0.5rem;
  overflow: hidden;
  animation: dropdownFade 0.2s ease-out forwards;
  
  /* Default (Mobile) */
  margin-top: 40px !important;
}

/* Desktop & Tablet (>= 768px) */
@media (min-width: 768px) {
  .dropdown-menu.shadow {
    margin-top: 45px !important;
  }
}

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

.dropdown-item {
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  transition: all 0.2s ease;
}

.dropdown-item:hover, .dropdown-item:focus {
  background: transparent; /* No background change */
  color: var(--brand); /* Brand color text */
  transform: translateX(5px); /* Slide right effect */
}

.dropdown-divider {
  border-top: 1px solid var(--border);
  margin: 0.5rem 0;
  opacity: 0.5;
}