/* assets/style.css */

/* =========================
   ROOT / BASE
========================= */
:root{
  --bg:#0b0b0b;
  --panel:#111;

  --yellow:linear-gradient(0deg, #ffce00 0%, #ffce00 100%);
  --yellow2:linear-gradient(to bottom, #ffce00 0%, #ffeb00 50%, #947c00 100%);

  --text:#f4f4f4;
  --muted:#bdbdbd;
  --blue:#1976ff;

  --cardShadow: 0 10px 30px rgba(0,0,0,.35);
  --cardRadius: 12px;
  --ring: 0 0 0 3px rgba(255,206,0,.22);
}

*{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);

  /* background + overlay biar tidak putih / tidak glitch */
  background-color:#0b0b0b;
  background-image:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url("https://takenupload.com/BG-BAJAWA-DESKTOP");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

@media (max-width:900px){
  body{ background-attachment:scroll; }
}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:22px;
}

hr.dots{
  border:0;
  border-top:1px dashed #ffffff;
  margin:16px 0 22px;
}

/* =========================
   TOPBAR
========================= */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  padding:18px;
  margin-top:12px;

  position:relative;
  overflow:hidden;

  background:
    radial-gradient(circle at 20% 10%, rgba(255,206,0,.20) 0%, rgba(0,0,0,0) 45%),
    radial-gradient(circle at 80% 0%, rgba(255,235,0,.14) 0%, rgba(0,0,0,0) 40%),
    linear-gradient(to bottom, #121212 0%, #000000 100%);
  border:1px solid rgba(255,206,0,.35);
  border-radius:16px;
  box-shadow:0 14px 35px rgba(0,0,0,.55);
}

.topbar::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,206,0,.08) 0%, rgba(255,206,0,0) 35%),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.035) 0px,
      rgba(255,255,255,.035) 1px,
      rgba(0,0,0,0) 8px,
      rgba(0,0,0,0) 16px
    );
  opacity:.55;
  pointer-events:none;
}

.topbar::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:8px;
  height:18px;
  background: radial-gradient(circle, rgba(255,206,0,.25) 0%, rgba(255,206,0,0) 70%);
  filter: blur(8px);
  opacity:.45;
  pointer-events:none;
}

.topbar > *{ position:relative; z-index:1; }

.brand{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.brand .logo{
  font-weight:900;
  letter-spacing:1px;
  color:#ffce00;
  font-size:28px;
  width:175px;
}

.brand .sub{
  color: rgba(255,255,255,.75);
  font-size:12px;
  opacity:.85;
}

/* Searchbox */
.searchbox{
  display:flex;
  align-items:center;
  width:min(420px, 100%);
  overflow:hidden;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,206,0,.28);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

.searchbox input{
  border:0;
  outline:0;
  padding:12px;
  width:100%;
  font-size:14px;
  background: transparent;
  color:#fff;
}

.searchbox input::placeholder{ color: rgba(255,255,255,.65); }

.searchbox input:focus{ box-shadow: var(--ring); }

.searchbox button{
  border:0;
  cursor:pointer;
  background: var(--yellow2);
  padding:10px 14px;
  font-weight:800;
  border-left: 1px solid rgba(0,0,0,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.searchbox button:focus{
  outline:none;
  box-shadow: var(--ring);
}

/* =========================
   HERO TITLE
========================= */
.hero-title{
  text-align:center;
  font-weight:900;
  letter-spacing:.5px;

  position:relative;
  display:block;
  background:
    radial-gradient(circle at top, rgba(255,206,0,.22) 0%, rgba(0,0,0,0) 45%),
    linear-gradient(to bottom, #111111 0%, #000000 100%);
  padding: 18px 22px;
  border-radius: 18px;
  border: 1px solid rgba(255,206,0,.35);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  margin: 18px 0 16px;
  overflow:hidden;
}

.hero-title::before{
  content:"";
  position:absolute;
  top:0;
  left:12px;
  right:12px;
  height:2px;
  background: linear-gradient(to right, transparent, #ffce00, transparent);
  opacity:.9;
  pointer-events:none;
}

.hero-title::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:10px;
  height:18px;
  background: radial-gradient(circle, rgba(255,206,0,.22) 0%, rgba(255,206,0,0) 70%);
  filter: blur(10px);
  opacity:.5;
  pointer-events:none;
}

.hero-title span{
  display:inline-flex;
  align-items:center;
  gap:10px;
  position:relative;
  z-index:1;
  color:#ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

/* =========================
   HERO ACTION BUTTONS (1 versi saja)
========================= */
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin: 12px 0 22px;
}

.hero-actions .action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding: 10px 14px;
  border-radius: 12px;

  text-decoration:none;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.4px;
  font-size: 13px;

  color:#fff;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.10) 0%, rgba(0,0,0,.35) 100%),
    linear-gradient(to bottom, #111 0%, #000 100%);
  border: 1px solid rgba(255,206,0,.35);
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.hero-actions .action-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.55);
  filter: brightness(1.05);
}

.hero-actions .action-btn:active{ transform: translateY(0); }

.hero-actions .action-btn.action-primary{
  color:#111;
  background: var(--yellow2);
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 12px 26px rgba(0,0,0,.55);
}

@media (max-width:520px){
  .hero-actions{ gap:8px; }
  .hero-actions .action-btn{
    width: calc(50% - 8px);
    padding: 11px 10px;
    font-size: 12px;
  }
}

/* =========================
   RUNNING TEXT (marquee + class)
========================= */
.teks-berjaalan,
marquee{
  display:block;
  width:100%;
  padding: 10px 16px;
  margin: 10px 0 16px;

  color:#fff !important;
  font-weight:900;
  letter-spacing:.4px;

  background:
    linear-gradient(to bottom, rgba(255,255,255,.08), rgba(0,0,0,.45)),
    linear-gradient(to bottom, #111 0%, #000 100%);
  border: 1px solid rgba(255,206,0,.45);
  border-radius: 12px;

  box-shadow: 0 10px 24px rgba(0,0,0,.6),
              inset 0 1px 0 rgba(255,255,255,.18);
  overflow:hidden;
  position:relative;
}

.teks-berjaalan::before,
marquee::before{
  content:"";
  position:absolute;
  top:0;
  left:12px;
  right:12px;
  height:2px;
  background: linear-gradient(to right, transparent, #ffce00, transparent);
  opacity:.95;
}

.teks-berjaalan::after,
marquee::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:-8px;
  height:14px;
  background: radial-gradient(circle, rgba(255,206,0,.35), transparent 70%);
  filter: blur(10px);
  opacity:.6;
}

/* =========================
   GRID + CARD
========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
  position:relative;
  z-index:1;
}

@media (max-width:1100px){ .grid{grid-template-columns: repeat(3,1fr);} }
@media (max-width:860px){ .grid{grid-template-columns: repeat(2,1fr);} }
@media (max-width:520px){ .grid{grid-template-columns: 1fr;} }

.card{
  background: var(--yellow);
  border-radius: var(--cardRadius);
  overflow:hidden;
  box-shadow: var(--cardShadow);
  color:#000;

  display:flex;
  flex-direction:column;
  height:100%;
  transform: translateZ(0);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.card:hover{
  transform: translateY(-2px);
  filter: brightness(1.01);
  box-shadow: 0 16px 38px rgba(0,0,0,.45);
}

.card .thumb{ padding:10px; }

.card .thumb img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:10px;
  border:2px solid rgba(0,0,0,.35);
  display:block;
}

.card .body{
  padding:14px 14px 16px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.card h3{
  margin:0 0 10px;
  font-size:18px;
  line-height:1.25;
  text-transform:uppercase;

  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size:12px;
  color:#ff0000;
  opacity:.85;
  margin:8px 0 10px;
}

.smalltext{
  font-size:13px;
  line-height:1.55;
  color:#000;

  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  background: linear-gradient(to bottom, #cc8b00 0%, #6c4900 50%, #6c4900 100%);
  color:#fff;
  text-decoration:none;

  padding:10px 12px;
  border: 1px solid #6c4900;
  border-radius:8px;
  font-weight:800;
  width:100%;
  margin-top:auto;

  transition: filter .15s ease, transform .15s ease;
}

.btn:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.btn:active{ transform: translateY(0); }

/* =========================
   DETAIL PAGE
========================= */
.detail{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:18px;
}
@media (max-width:960px){ .detail{grid-template-columns:1fr;} }

.panel{
  background: radial-gradient(circle at 20% 10%, #ffcd01 0%, rgba(218, 203, 2, 0) 45%), radial-gradient(circle at 80% 0%, rgba(236, 217, 2, 0.14) 0%, rgba(202, 199, 13, 0) 40%), linear-gradient(to bottom, #ebdb00 0%, #ffcd00 100%);
  border-radius: var(--cardRadius);
  padding:14px;
  color:#080808;
  box-shadow: var(--cardShadow);
}

.panel .bigimg{
  width:100%;
  border-radius: var(--cardRadius);
  border:2px solid rgba(0,0,0,.25);
  object-fit:cover;
}

.detail-title{
  position: relative;
  display: block;
  margin: 12px 0 14px;
  padding: 16px 18px;

  text-align: center;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;

  color: #fff;
  background:
    radial-gradient(circle at top, rgba(255,206,0,.22) 0%, rgba(0,0,0,0) 45%),
    linear-gradient(to bottom, #111111 0%, #000000 100%);
  border: 1px solid rgba(255,206,0,.35);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  overflow: hidden;
}

.detail-title::before{
  content:"";
  position:absolute;
  top:0;
  left:12px;
  right:12px;
  height:2px;
  background: linear-gradient(to right, transparent, #ffce00, transparent);
  opacity:.9;
  pointer-events:none;
}

.detail-title::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:10px;
  height:18px;
  background: radial-gradient(circle, rgba(255,206,0,.22) 0%, rgba(255,206,0,0) 70%);
  filter: blur(10px);
  opacity:.5;
  pointer-events:none;
}

.detail-title > *{ position: relative; z-index: 1; }

.backlink{
  display:inline-flex;
  background: var(--yellow2);
  color:#000;
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
}

/* Sidebar cards */
.sidebar .sidecard{
  background: var(--yellow);
  border-radius: var(--cardRadius);
  overflow:hidden;
  box-shadow: var(--cardShadow);
  margin-bottom:14px;
  color:#111;
}

.sidebar .sidecard img{
  width:100%;
  height:120px;
  object-fit:cover;
  display:block;
}

.sidebar .sidecard .p{ padding:10px; }

.sidebar .sidecard .p .t{
  font-weight:900;
  font-size:13px;
  text-transform:uppercase;
  line-height:1.25;
}

.sidebar .sidecard .p .m{
  font-size:12px;
  opacity:.85;
  margin:6px 0;
}

.sidebar .sidecard .p a{
  display:inline-flex;
  width:100%;
  text-decoration:none;
  background: linear-gradient(to bottom, #cc8b00 0%, #6c4900 50%, #6c4900 100%);
  color:#fff;
  font-weight:800;
  padding:9px 10px;
  border-radius:8px;
  justify-content:center;
}

/* =========================
   PROMO SLIDER NON-AMP
   (Pastikan HTML: .promo-slider > .promo-slides > img x4)
========================= */
.promo-slider{
  max-width:1200px;
  margin:14px auto 18px;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(255,206,0,.35);
  background:linear-gradient(to bottom,#121212,#000);
  box-shadow:0 16px 40px rgba(0,0,0,.55);
  overflow:hidden;
}

.promo-slides{
  display:flex;
  width:400%; /* 4 gambar */
  animation: promoSlide 12s infinite;
  will-change: transform;
}

.promo-slides img{
  width:100%;
  flex:0 0 100%;
  height:360px;        /* biar rapi tidak loncat */
  object-fit:cover;
  border-radius:14px;
  display:block;
}

@media (max-width:900px){
  .promo-slides img{ height:220px; }
}

/* animasi geser */
@keyframes promoSlide{
  0%   { transform:translateX(0%); }
  20%  { transform:translateX(0%); }

  25%  { transform:translateX(-100%); }
  45%  { transform:translateX(-100%); }

  50%  { transform:translateX(-200%); }
  70%  { transform:translateX(-200%); }

  75%  { transform:translateX(-300%); }
  95%  { transform:translateX(-300%); }

  100% { transform:translateX(0%); }
}