/* Modern Minimal Theme */
:root{
  /* Luxury palette: deep navy + warm gold accents */
  --primary:#1f3a5f; /* deep navy */
  --accent:#c89b3c;  /* warm gold */
  --bg:#f7f6f2;      /* soft ivory */
  --surface:#ffffff; /* clean cards/nav */
  --text:#232323;    /* rich dark */
  --muted:#6b7280;   /* slate */
  /* Buttons & links blue tone */
  --blue:#3b82f6;    /* brand blue */
  --blue-600:#2563eb;/* deeper blue */
}

/* Dark mode */
[data-theme="dark"]{
  --primary:#8fb4ff; /* softened navy */
  --accent:#e3c97a;  /* soft gold */
  --bg:#0b0b0b;      /* near black */
  --surface:#121212; /* dark surfaces */
  --text:#eaeaea;    /* almost white */
  --muted:#b0b0b0;   /* muted gray */
}

/* Base */
html,body{ background-color: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
html,body{ height:100%; }
body{ min-height:100vh; display:flex; flex-direction:column; }
main{ flex: 1 0 auto; }
footer{ flex-shrink:0; }
h1,h2,h3,h4,h5,h6{ font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight:700; letter-spacing:.2px; }
/* Editorial responsive heading scale */
h1{ font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.75rem); line-height:1.2; }
h2{ font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem); line-height:1.25; }
h3{ font-size: clamp(1.35rem, 1.05rem + 1.0vw, 1.75rem); line-height:1.3; }
h4{ font-size: clamp(1.2rem, 1.02rem + 0.6vw, 1.4rem); line-height:1.35; }
.navbar{ background: var(--surface); }
.navbar .navbar-brand{ letter-spacing:.2px; color: var(--text); display:flex; align-items:center; gap:.5rem; }
.navbar .nav-link{ color:var(--text); }
.navbar .nav-link:hover,.navbar .nav-link:focus{ color: var(--accent); }

/* Logo */
/* Default (mobile-first) */
.brand-logo{ height:56px; width:auto; display:block; }
/* Desktop (>=992px) */
@media (min-width: 992px){
  .brand-logo{ height:96px; }
}

/* Tambahkan ruang vertikal navbar agar logo besar muat rapi */
.navbar{ padding-top:.5rem; padding-bottom:.5rem; flex-wrap: wrap; position: sticky; top: 0; z-index: 1030; transition: padding .2s ease, background-color .2s ease, box-shadow .2s ease; }
.navbar.is-sticky{ background-color: rgba(255,255,255,0.9); box-shadow: 0 4px 16px rgba(2,6,23,.08); padding-top:.35rem; padding-bottom:.35rem; }
/* Glass effect */
.navbar.is-sticky{ backdrop-filter: saturate(160%) blur(8px); -webkit-backdrop-filter: saturate(160%) blur(8px); }
/* Dark mode sticky */
[data-theme="dark"] .navbar.is-sticky{ background-color: rgba(0,0,0,0.9); box-shadow: 0 6px 20px rgba(0,0,0,.55); }
@media (min-width: 992px){
  .navbar{ padding-top:.75rem; padding-bottom:.75rem; }
}

/* Baris utama navbar: jangan membungkus agar posisi tidak berpindah */
.navbar .d-flex.w-100.align-items-center{ flex-wrap: nowrap; }

/* Navbar clock styling */
.navbar-clock{ color: var(--text); font-size:.9rem; white-space: nowrap; line-height:1.05; display:flex !important; flex-direction: column !important; align-items:flex-start !important; margin-right:1.75rem; order:0; flex:0 0 auto; min-width: 210px; }
.navbar-clock .navbar-date, .navbar-clock .navbar-time{ display:block; }
@media (min-width: 992px){
  .navbar-clock{ margin-right:3rem; }
}
.navbar-clock .navbar-date{ font-weight:600; }
.navbar-clock .navbar-time{ font-variant-numeric: tabular-nums; opacity:.85; }
.navbar.is-sticky .navbar-clock{ color:#0f172a; }
[data-theme="dark"] .navbar.is-sticky .navbar-clock{ color:#e5e7eb; }

/* Pastikan group aksi tetap di kanan */
.navbar .ms-auto{ margin-left:auto !important; }

/* Perkecil kolom cari di navbar (desktop) */
@media (min-width: 992px){
  .navbar .search-wrap{ flex: 1 1 auto; min-width: 260px; }
  .navbar form[role="search"] .form-control{ width: 240px; max-width: 32vw; flex: 0 0 auto; }
  .navbar form[role="search"] button{ flex: 0 0 auto; }
}

/* Menu strip bawah logo (di-nonaktifkan tampilannya) */
.menu-strip{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: static;
  margin-top: .25rem;
  padding-top: .15rem;
  padding-bottom: .35rem; /* give breathing room so bottom border isn't clipped */
  overflow: visible; /* prevent clipping */
}
[data-theme="dark"] .menu-strip{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Kompres vertikal menu pada mobile */
@media (max-width: 991.98px){
  .menu-strip{ margin-top:.25rem; padding-top:.35rem; padding-bottom:.15rem; }
  .menu-bar .nav-link{ padding:.25rem .5rem; font-size:.95rem; }
}
.menu-strip.is-stuck{ background: transparent !important; box-shadow: none !important; border-bottom-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
[data-theme="dark"] .menu-strip.is-stuck{ background: transparent !important; box-shadow: none !important; border-bottom-color: transparent !important; }
.menu-bar{ scrollbar-width: thin; justify-content: flex-start; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; align-items: center; padding-bottom:.25rem; }
.menu-bar{ overflow: visible; }
.menu-bar::-webkit-scrollbar{ height:6px; }
.menu-bar::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px; }
.menu-bar > .nav-item{ scroll-snap-align: start; }
/* Menu items as boxed buttons */
.menu-bar{ gap:.5rem; }
.menu-bar .nav-link{
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--text);
  padding:.55rem 1.1rem;
  font-weight:700; white-space:nowrap; font-size:.92rem;
  text-transform: uppercase; letter-spacing:.5px;
  border:2px solid #e6e2d6; border-radius:14px; /* warmer border */
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
  line-height: 1; /* keep button height consistent */
  margin-bottom:.1rem; /* keep full border visible visually */
  background-clip: padding-box; /* don't paint over border */
}
/* Dark mode: warna default menu abu-abu */
[data-theme="dark"] .menu-bar .nav-link{ color:#bdbdbd; }
.menu-bar .nav-link:hover{ color: var(--blue-600); border-color: var(--blue-600); background:#ffffff; box-shadow: 0 4px 12px rgba(2,6,23,.10); }
/* Active boxed style (override old underline) */
.menu-bar .nav-link.active{ color: var(--blue-600); border-color: var(--blue-600); background:#ffffff; box-shadow: 0 6px 16px rgba(2,6,23,.12); position: relative; z-index: 1; }
/* Dark mode: aktif lebih terang */
/* Dark mode boxed buttons */
[data-theme="dark"] .menu-bar .nav-link{ background:#111111; border-color:#2a2a2a; border-width:2px; color:#bdbdbd; }
[data-theme="dark"] .menu-bar .nav-link:hover{ color:#8fd1ff; border-color:#3a3a3a; background:#0d0d0d; box-shadow: 0 6px 16px rgba(0,0,0,.40); }
[data-theme="dark"] .menu-bar .nav-link.active{ color:#90b4ff; border-color:#3b4f8a; background:#0d0d0d; box-shadow: 0 8px 20px rgba(0,0,0,.55); }
/* Dark mode: hover lebih kontras */
[data-theme="dark"] .menu-bar .nav-link{ transition: color .15s ease, border-color .15s ease; }
[data-theme="dark"] .menu-bar .nav-link:hover{ color:#8fd1ff; border-bottom-color:#8fd1ff; }

/* Pusatkan menu pada desktop */
@media (min-width: 992px){
  .menu-bar{ justify-content: center; }
}

/* Toggle */
.btn-theme{ border-color:#e2e8f0; }
.btn-theme:hover{ border-color: var(--primary); color: var(--primary); }

/* Ticker */
.ticker{ background: var(--surface); border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb; color: var(--muted); }
.ticker .label{ color: var(--primary); font-weight:600; margin-right:.75rem; }
.ticker .items{ white-space:nowrap; animation: tickerMove 30s linear infinite; display:inline-block; }
.ticker .items a{ color:#334155; margin-right:2rem; text-decoration:none; }
.ticker .items a:hover{ color: var(--primary); }

/* ------------------------- */
/* Dark mode enhancements    */
/* ------------------------- */
[data-theme="dark"] .navbar{ background: var(--surface) !important; }
[data-theme="dark"] .menu-strip{ background: var(--surface); border-top-color:#222222; border-bottom-color:#222222; }
[data-theme="dark"] .menu-strip.is-stuck{ border-bottom-color:#2a2a2a; box-shadow: 0 8px 20px rgba(0,0,0,.55); }
[data-theme="dark"] .widget{ box-shadow: 0 4px 16px rgba(0,0,0,.35); }
[data-theme="dark"] .card-article{ box-shadow: 0 6px 18px rgba(0,0,0,.35); }
[data-theme="dark"] .card-article .card-title{ color: var(--text); }
[data-theme="dark"] .card-article .card-text{ color: var(--muted); }
[data-theme="dark"] footer{ color:#d4d4d4; }
[data-theme="dark"] footer a{ color:#e5e5e5; }
[data-theme="dark"] .ticker{ border-top-color:#222222; border-bottom-color:#222222; }
[data-theme="dark"] .ticker .items a{ color:#cbd5e1; }

/* Common components in dark mode */
[data-theme="dark"] .card{ background-color:#111111; color:var(--text); border-color:#222222; }
[data-theme="dark"] .card .card-header{ background-color:#0d0d0d; border-bottom-color:#222222; }
[data-theme="dark"] .card .card-footer{ background-color:#0d0d0d; border-top-color:#222222; }
[data-theme="dark"] .alert{ background-color:#111111; color:var(--text); border-color:#222222; }
[data-theme="dark"] .bg-light{ background-color:#111111 !important; }
[data-theme="dark"] .border-top{ border-top-color:#222222 !important; }
[data-theme="dark"] .border-bottom{ border-bottom-color:#222222 !important; }
[data-theme="dark"] .text-muted{ color:#a3a3a3 !important; }

/* Forms in dark mode */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus{ background-color:#111111; color:#f5f5f5; border-color:#333333; }
[data-theme="dark"] .form-control::placeholder{ color:#8a8a8a; }

/* Buttons: elegant outline with blue tone */
.btn{ border-radius:12px; }
.btn-outline-primary{ color: var(--blue-600); border-color: var(--blue-600); }
.btn-outline-primary:hover{ background-color: var(--blue-600); color: #fff; border-color: var(--blue-600); }
.btn-outline-secondary{ color: var(--blue); border-color: var(--blue); }
.btn-outline-secondary:hover{ background-color: var(--blue); color: #fff; border-color: var(--blue); }
/* Dark mode refinements for outline buttons */
[data-theme="dark"] .btn-outline-primary{ color:#90b4ff; border-color:#3b4f8a; }
[data-theme="dark"] .btn-outline-primary:hover{ background-color:#90b4ff; color:#0b0b0b; border-color:#90b4ff; }
[data-theme="dark"] .btn-outline-secondary{ color:#7aa7ff; border-color:#2a2f55; }
[data-theme="dark"] .btn-outline-secondary:hover{ background-color:#2a2f55; color:#fff; border-color:#2a2f55; }
[data-theme="dark"] .btn-outline-danger{ color:#fca5a5; border-color:#333333; }
[data-theme="dark"] .btn-outline-danger:hover{ color:#0b1220; background-color:#fca5a5; border-color:#fca5a5; }

/* Scrollbar tone in dark */
[data-theme="dark"] .menu-bar::-webkit-scrollbar-thumb{ background:#4b5563; }
@keyframes tickerMove{ 0%{ transform: translateX(0);} 100%{ transform: translateX(-100%);} }

/* Hero */
.hero{ margin-top:1rem; }
.hero .featured{ position:relative; border-radius:14px; overflow:hidden; box-shadow: 0 6px 18px rgba(2,6,23,.06); background:var(--surface); }
.hero .featured img{ width:100%; height:420px; object-fit:cover; display:block; }
.hero .featured .overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.18) 35%, rgba(15,23,42,0.72) 100%); }
.hero .featured .caption{ position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.25rem; color:#fff; }
.hero .featured .category{ display:inline-block; background: rgba(255,255,255,.85); color:#0f172a; font-weight:600; padding:.18rem .55rem; border-radius:999px; font-size:.78rem; margin-bottom:.5rem; }
[data-theme="dark"] .hero .featured .category{ background:#1a1a1a; color:#bdbdbd; }
.hero .side .card{ border:0; box-shadow: 0 4px 12px rgba(2,6,23,.06); }
.hero .side .card img{ height:95px; object-fit:cover; }

/* Cards */
.card-article{ border:0; box-shadow: 0 6px 18px rgba(2,6,23,.06); }
.card-article img{ object-fit:cover; height: 200px; }
.card-article .card-title{ color:var(--text); }
.card-article .card-text{ color:var(--muted); }

/* Title with vertical colored bar */
.title-with-bar{ display:inline-flex; align-items:center; gap:.5rem; }
.title-with-bar::before{ content:""; display:inline-block; width:10px; height:1.5em; background: var(--accent); border-radius:10px; }
[data-theme="dark"] .title-with-bar::before{ background: var(--accent); }

/* Admin table: sortable indicators */
table#adminTable thead th[data-sort]{
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 1.25rem;
}
table#adminTable thead th.sorted-asc::after,
table#adminTable thead th.sorted-desc::after{
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .8em;
  color: var(--primary);
}
table#adminTable thead th.sorted-asc::after{ content: "\25B2"; }
table#adminTable thead th.sorted-desc::after{ content: "\25BC"; }
table#adminTable thead th.sorted-asc,
table#adminTable thead th.sorted-desc{
  background: rgba(59,130,246,.08); /* subtle primary tint */
}

/* Sidebar widgets */
.widget{ background: var(--surface); border:0; box-shadow: 0 6px 20px rgba(2,6,23,.07); }
.widget .widget-title{ font-weight:700; font-size:1rem; color:var(--text); }
.list-unstyled li+li{ margin-top:.35rem; }

/* Footer */
footer{ background: var(--surface); color:#475569; }
footer a{ color:#334155; text-decoration:none; }
footer a:hover{ color: var(--primary); }
footer .brand-name{ color: var(--blue-600); }
/* Footer right links (Redaksi/Kontak) to blue */
.footer-links a{ color: var(--blue-600); }
.footer-links a i{ color: var(--blue-600); }
.footer-links a:hover{ color: var(--blue-600); text-decoration: underline; }
/* Brand colors for social icons in footer */
.footer-social i.bi-facebook{ color:#1877F2; }
.footer-social i.bi-instagram{ color:#E4405F; }
.footer-social i.bi-twitter-x{ color:#000000; }
[data-theme="dark"] .footer-social i.bi-twitter-x{ color:#eaeaea; }
.footer-social i.bi-youtube{ color:#FF0000; }
.footer-social i.bi-whatsapp{ color:#25D366; }
/* Spacing between social icons */
footer .footer-social{ gap: 0.9rem !important; }

.article-content img{ 
  width:640px; 
  height:480px; 
  object-fit: contain; 
  display:block; 
  margin:0 auto 1rem; 
  max-width:100%;
}
.article-thumb{
  width:640px; 
  height:480px; 
  object-fit: cover; 
  display:block; 
  margin:0 auto 1rem; 
  border-radius:12px;
}
@media (max-width: 680px){
  .article-content img{ width:100%; height:auto; }
  .article-thumb{ width:100%; height:auto; }
}

/* Category sections: controls and fade animation */
.cat-section{ position: relative; }
.cat-items{ opacity:1; transition: opacity .25s ease; }

/* Ad placeholders */
.ad-slot{ display:flex; align-items:center; justify-content:center; background: #f8fafc; border:2px dashed #cbd5e1; color:#64748b; border-radius:12px; text-align:center; }
.ad-slot .ad-inner{ padding: .75rem; font-size:.9rem; font-weight:600; }
.ad-slot.ad-728x150{ min-width: 728px; min-height: 150px; }
.ad-slot.ad-300x250{ width: 100%; min-height: 250px; }
[data-theme="dark"] .ad-slot{ background:#0f172a; border-color:#334155; color:#94a3b8; }
.ad-box{ background: var(--surface); border:1px solid #e7e2d6; border-radius:12px; padding:.6rem; box-shadow: 0 8px 18px rgba(2,6,23,.08); }
.ad-box .ad-wrap{ display:flex; align-items:center; justify-content:center; margin:0 auto; overflow:hidden; }
.ad-box .ad-wrap:empty{ display:none !important; }
/* Hide the entire ad card if its wrap has no content (modern browsers) */
.ad-box:has(.ad-wrap:empty){ display:none !important; }
.ad-box .ad-wrap.ad-300x250{ width:300px; height:250px; }
.ad-box .ad-wrap.ad-728x150{ width:728px; height:150px; }
.ad-box .ad-wrap.ad-728x160{ width:728px; height:160px; }
.ad-box .ad-wrap.ad-320x100{ width:320px; height:100px; }
.ad-box img{ max-width:100%; height:auto; display:block; }
[data-theme="dark"] .ad-box{ background:#111111; border-color:#222222; box-shadow: 0 6px 18px rgba(0,0,0,.35); }

/* Responsive horizontal ads */
@media (max-width: 768px){
  /* Use aspect-ratio to reserve space and scale width to container */
  .ad-box .ad-wrap.ad-728x150,
  .ad-slot.ad-728x150{ width:100% !important; max-width:100% !important; height:auto !important; aspect-ratio: 728 / 150; min-width:0 !important; }
  .ad-box .ad-wrap.ad-728x160,
  .ad-slot.ad-728x160{ width:100% !important; max-width:100% !important; height:auto !important; aspect-ratio: 728 / 160; min-width:0 !important; }
  .ad-box .ad-wrap.ad-320x100,
  .ad-slot.ad-320x100{ width:100% !important; max-width:100% !important; height:auto !important; aspect-ratio: 320 / 100; min-width:0 !important; }
  /* Ensure outer containers don't overflow */
  .ad-box, .ad-slot{ width:100% !important; max-width:100% !important; overflow:hidden; }
  /* Ensure wrappers never exceed container width */
  .ad-box .ad-wrap{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box; }
  /* Ensure ad contents fit container */
  .ad-box .ad-wrap > iframe,
  .ad-box .ad-wrap > ins,
  .ad-box .ad-wrap > img,
  .ad-box .ad-wrap > div{ width:100% !important; max-width:100% !important; height:auto !important; }
  /* Neutralize any nested elements that carry fixed widths from ad code */
  .ad-box .ad-wrap *,
  .ad-slot *{ max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; }
  .ad-box .ad-wrap img{ display:block; height:auto !important; }
  .ad-box .ad-wrap ins{ display:block !important; width:100% !important; }
}

/* Luxury link tones */
a{ color: var(--primary); }
a:hover{ color: var(--accent); }

/* Navbar subtle bottom border for elegance */
.navbar{ border-bottom: 1px solid rgba(0,0,0,.04); }
[data-theme="dark"] .navbar{ border-bottom-color: rgba(255,255,255,.06); }
.cat-items.animating{ opacity:0; }
.cat-controls{ display:flex; align-items:center; justify-content:center; gap:.5rem; }
.cat-controls .btn.cat-prev,
.cat-controls .btn.cat-next{ line-height:1; padding:.25rem .5rem; }
.cat-controls .btn.cat-prev,
.cat-controls .btn.cat-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: .5rem;
  display:flex; align-items:center; justify-content:center;
  background: var(--accent);
  color:#fff;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(2,6,23,.15);
  z-index: 2;
}
.cat-controls .btn.cat-prev:hover,
.cat-controls .btn.cat-next:hover{ filter: brightness(1.05); box-shadow: 0 8px 20px rgba(2,6,23,.22); }
.cat-controls .btn.cat-prev:active,
.cat-controls .btn.cat-next:active{ transform: translateY(-50%) scale(0.98); }
.cat-controls .btn.cat-prev:disabled,
.cat-controls .btn.cat-next:disabled,
.cat-controls .btn.cat-prev.disabled,
.cat-controls .btn.cat-next.disabled{
  opacity: .55;
  filter: grayscale(15%);
  box-shadow: none;
  cursor: not-allowed;
}
.cat-controls .btn.cat-prev{ left: -8px; }
.cat-controls .btn.cat-next{ right: -8px; }
.cat-controls .cat-pages .cat-page{ color:inherit; }
.view-all-btn{ font-weight:700; border-radius:.6rem; padding:.6rem 1.25rem; }

/* Page number styles */
.cat-controls .cat-pages{ display:inline-flex; gap:.25rem; }
.cat-controls .cat-pages .cat-page{ text-decoration:none; border:none; padding:.1rem .25rem; color: var(--muted); }
.cat-controls .cat-pages .cat-page.active{ color: var(--primary); font-weight:700; border-bottom:2px solid var(--primary); }
.cat-controls .cat-pages.hidden{ display:none; }

/* Dark mode tweaks for controls */
[data-theme="dark"] .view-all-btn{ color:#e0e0e0; border-color:#444; }
[data-theme="dark"] .cat-controls .btn{ border-color:transparent; color:#fff; box-shadow: 0 8px 20px rgba(0,0,0,.55); }
[data-theme="dark"] .cat-controls .btn:disabled{ opacity:.45; }