/* =====================================================
   KEMBANG HOME — SHARED CSS
   Fail: css/home.css
   Dikongsi oleh semua komponen HTML.
   ===================================================== */


/* =====================================================
   MULA: GLOBAL
   ===================================================== */

:root {
  --bg:#08080a;
  --panel:#151519;
  --panel-soft:#1d1d23;
  --text:#fff;
  --muted:#a9a9b0;
  --accent:#b96cff;
  --border:rgba(255,255,255,.08);
  --gap:16px;
  --radius:14px;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}

button {
  font:inherit;
}

button:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* =====================================================
   TAMAT: GLOBAL
   ===================================================== */


/* =====================================================
   MULA: HERO
   ===================================================== */

.hero {
  position:relative;
  width:100%;
  height:420px;
  overflow:hidden;
  background:#111;
}

.slides {
  display:flex;
  width:100%;
  height:100%;
  transition:transform .65s ease;
}

.hero-slide-link {
  position:relative;
  flex:0 0 100%;
  width:100%;
  height:100%;
  display:block;
}

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


/* =====================================================
   MULA: HERO NAVIGATION BUTTONS
   Kepunyaan: HERO
   Fungsi:
   - Button kiri / kanan berada tepat di tengah Hero
   - Gaya futuristic glass
   ===================================================== */

.hero-arrow {
  position:absolute;

  top:50%;
  transform:translateY(-50%);

  z-index:10;

  width:52px;
  height:52px;

  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.14),
      rgba(255,255,255,.04)
    );

  color:rgba(255,255,255,.95);

  font-size:34px;
  font-weight:300;
  line-height:1;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  box-shadow:
    0 8px 30px rgba(0,0,0,.35),
    inset 0 0 12px rgba(255,255,255,.04);

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


/* Button kiri */

.hero-prev {
  left:22px;
}


/* Button kanan */

.hero-next {
  right:22px;
}


/* Hover kiri */

.hero-prev:hover {
  transform:translateY(-50%) translateX(-4px);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.22),
      rgba(255,255,255,.07)
    );

  border-color:rgba(255,255,255,.38);

  box-shadow:
    0 8px 35px rgba(0,0,0,.45),
    0 0 20px rgba(185,108,255,.18),
    inset 0 0 14px rgba(255,255,255,.08);
}


/* Hover kanan */

.hero-next:hover {
  transform:translateY(-50%) translateX(4px);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.22),
      rgba(255,255,255,.07)
    );

  border-color:rgba(255,255,255,.38);

  box-shadow:
    0 8px 35px rgba(0,0,0,.45),
    0 0 20px rgba(185,108,255,.18),
    inset 0 0 14px rgba(255,255,255,.08);
}


/* Tekan button */

.hero-arrow:active {
  transform:translateY(-50%) scale(.92);
}

/* =====================================================
   TAMAT: HERO NAVIGATION BUTTONS
   ===================================================== */


/* =====================================================
   MULA: HERO OVERLAY
   ===================================================== */

.hero-slide-link::after {
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.30),
      rgba(0,0,0,.02) 65%
    );

  pointer-events:none;
}

/* =====================================================
   TAMAT: HERO OVERLAY
   ===================================================== */


/* =====================================================
   MULA: HERO DOTS
   ===================================================== */

.hero-dots {
  position:absolute;

  left:50%;
  bottom:18px;

  transform:translateX(-50%);

  z-index:10;

  display:flex;
  align-items:center;
  gap:7px;
}

.dot {
  width:7px;
  height:7px;
  padding:0;

  border:0;
  border-radius:50%;

  background:rgba(255,255,255,.35);

  cursor:pointer;

  transition:
    width .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.dot.active {
  width:22px;
  border-radius:99px;
  background:#fff;

  box-shadow:
    0 0 10px rgba(255,255,255,.45);
}

/* =====================================================
   TAMAT: HERO DOTS
   ===================================================== */


/* =====================================================
   MULA: HERO BUTTONS BAWAH
   ===================================================== */

.hero-buttons {
  position:absolute;
  right:32px;
  bottom:32px;

  z-index:10;

  display:flex;
  gap:10px;
}

.round-btn {
  width:44px;
  height:44px;

  border:1px solid var(--border);
  border-radius:50%;

  background:rgba(10,10,12,.75);

  color:#fff;

  cursor:pointer;

  backdrop-filter:blur(10px);

  transition:
    background .2s ease,
    transform .2s ease;
}

.round-btn:hover {
  background:rgba(255,255,255,.15);
  transform:translateY(-2px);
}

/* =====================================================
   TAMAT: HERO BUTTONS BAWAH
   ===================================================== */


/* =====================================================
   MULA: HERO MOBILE
   ===================================================== */

@media (max-width:768px) {

  .hero {
    height:240px;
  }

  .hero-arrow {
    width:42px;
    height:42px;

    font-size:27px;
  }

  .hero-prev {
    left:10px;
  }

  .hero-next {
    right:10px;
  }

  .hero-buttons {
    right:18px;
    bottom:22px;
  }

}

/* =====================================================
   TAMAT: HERO MOBILE
   ===================================================== */


/* =====================================================
   TAMAT: HERO
   ===================================================== */


/* =====================================================
   MULA: LIVE EVENTS + ORIGINALS
   ===================================================== */

.section {
  padding:30px 28px 0;
}

.section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}

.section-title {
  margin:0;
  font-size:22px;
  letter-spacing:-.5px;
}

.next {
  flex:0 0 auto;
  width:42px;
  height:42px;

  border:0;
  border-radius:50%;

  background:var(--panel);
  color:#fff;

  font-size:30px;
  line-height:1;

  cursor:pointer;

  transition:
    opacity .2s ease,
    transform .2s ease;
}

.next:hover:not(:disabled) {
  transform:translateX(2px);
  background:var(--panel-soft);
}

.next:disabled {
  opacity:0;
  pointer-events:none;
}

.rail-wrap {
  position:relative;
  width:100%;
}

.rail {
  display:flex;
  gap:var(--gap);

  overflow-x:auto;

  padding:0 58px 8px 0;

  scroll-behavior:smooth;
  scroll-snap-type:x proximity;

  scrollbar-width:none;
}

.rail::-webkit-scrollbar {
  display:none;
}

.card {
  flex:0 0 245px;
  min-width:0;

  scroll-snap-align:start;
}

.card-img {
  position:relative;

  aspect-ratio:16/9;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  border-radius:var(--radius);

  background:
    radial-gradient(
      circle at 70% 25%,
      #743db2,
      #21152b 45%,
      #101014
    );
}

.card-img.alt1 {
  background:
    radial-gradient(
      circle at 70% 25%,
      #28726a,
      #152b29 45%,
      #101014
    );
}

.card-img.alt2 {
  background:
    radial-gradient(
      circle at 70% 25%,
      #a65b3d,
      #342019 45%,
      #101014
    );
}

.card-img.alt3 {
  background:
    radial-gradient(
      circle at 70% 25%,
      #315e9d,
      #182338 45%,
      #101014
    );
}

.card-img.alt4 {
  background:
    radial-gradient(
      circle at 70% 25%,
      #82702d,
      #2b2716 45%,
      #101014
    );
}

.card-art {
  color:rgba(255,255,255,.9);

  text-align:center;

  font-size:19px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:1px;
}

.badge {
  position:absolute;

  top:10px;
  left:10px;

  padding:5px 8px;

  border-radius:7px;

  background:rgba(0,0,0,.72);

  font-size:10px;
  font-weight:800;
  letter-spacing:.4px;
}

.card-body {
  padding:10px 2px 0;
}

.card-name {
  font-size:15px;
  font-weight:700;
}

.card-meta {
  margin-top:4px;

  color:var(--muted);

  font-size:12px;
}

/* =====================================================
   TAMAT: LIVE EVENTS + ORIGINALS
   ===================================================== */


/* =====================================================
   MULA: ADVERTISEMENT
   ===================================================== */

.ad {
  min-height:180px;

  margin:42px 28px 30px;

  border:1px dashed rgba(255,255,255,.16);
  border-radius:var(--radius);

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;

  background:#0d0d10;
  color:var(--muted);
}

.ad div {
  display:grid;
  gap:7px;
}

.ad strong {
  color:#d8d8dc;

  font-size:14px;
  letter-spacing:1px;
}

.ad span {
  font-size:12px;
}

/* =====================================================
   TAMAT: ADVERTISEMENT
   ===================================================== */


/* =====================================================
   MULA: RESPONSIVE MOBILE
   ===================================================== */

@media(max-width:700px) {

  .topbar {
    min-height:58px;
    padding:0 16px;
  }

  .logo {
    font-size:21px;
  }

  .categories {
    padding:0 16px 12px;
  }

  .section {
    padding:25px 16px 0;
  }

  .section-title {
    font-size:19px;
  }

  .next {
    width:38px;
    height:38px;

    font-size:27px;
  }

  .rail {
    gap:12px;
    padding-right:45px;
  }

  .card {
    flex-basis:190px;
  }

  .card-name {
    font-size:14px;
  }

  .ad {
    margin:34px 16px 22px;
    min-height:130px;
  }

}

/* =====================================================
   TAMAT: RESPONSIVE MOBILE
   ===================================================== */


/* =====================================================
   MULA: HERO CAPTION
   Tajuk berita berada di atas gambar Hero.
   ===================================================== */

.hero-caption {
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  z-index:5;

  padding:90px 40px 36px;

  color:#fff;

  font-size:32px;
  font-weight:800;
  line-height:1.15;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.90),
      rgba(0,0,0,.55) 45%,
      transparent
    );

  pointer-events:none;
}


/* =====================================================
   HERO CAPTION MOBILE
   ===================================================== */

@media (max-width:768px) {

  .hero-caption {
    padding:70px 18px 24px;

    font-size:20px;
    line-height:1.2;
  }

}

/* =====================================================
   TAMAT: HERO CAPTION
   ===================================================== */


/* =====================================================
   MULA: LIVE EVENTS DATA CARDS
   Fungsi: Kad dijana daripada live-events.txt
   ===================================================== */


/* MULA: CARD LINK */

.live-card {
  display:block;
  flex:0 0 245px;
  min-width:0;

  color:inherit;
  text-decoration:none;

  cursor:pointer;
}

/* TAMAT: CARD LINK */


/* MULA: LIVE EVENTS IMAGE FRAME */

.live-card .card-img {
  position:relative;

  width:100%;
  aspect-ratio:16/9;

  display:block;
  overflow:hidden;

  border-radius:var(--radius);
}

/* TAMAT: LIVE EVENTS IMAGE FRAME */


/* MULA: LIVE EVENTS IMAGE FIT */

.live-card .card-img img.live-card-image {
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  transition:transform .3s ease;
}

.live-card:hover .card-img img.live-card-image {
  transform:scale(1.04);
}

/* TAMAT: LIVE EVENTS IMAGE FIT */


/* MULA: LIVE BADGE */

.live-card .badge {
  position:absolute;

  top:10px;
  left:10px;

  z-index:2;

  padding:5px 9px;

  color:#fff;
  background:#e50914;

  border-radius:4px;

  font-size:11px;
  font-weight:800;
  letter-spacing:.5px;
}

/* TAMAT: LIVE BADGE */


/* MULA: CARD TITLE */

.live-card .card-name {
  overflow:hidden;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;

  line-height:1.4;
}

/* TAMAT: CARD TITLE */


/* MULA: EMPTY STATE */

.live-empty {
  padding:20px;
  color:#aaa;
}

/* TAMAT: EMPTY STATE */


/* MULA: RESPONSIVE LIVE EVENTS */

@media (max-width:700px) {

  .live-card {
    flex-basis:190px;
  }

}

/* TAMAT: RESPONSIVE LIVE EVENTS */


/* =====================================================
   TAMAT: LIVE EVENTS DATA CARDS
   ===================================================== */




/* =====================================================
   MULA: ORIGINALS DATA CARDS

   Sumber:
   data/originals.txt

   Fungsi:
   Kad produk dinamik dengan gambar
   yang memenuhi frame.

   ===================================================== */


/* MULA: CARD LINK */

.original-card {
  display: block;

  flex: 0 0 245px;

  min-width: 0;

  color: inherit;

  text-decoration: none;

  cursor: pointer;
}

/* TAMAT: CARD LINK */


/* MULA: IMAGE FRAME */

.original-card .card-img {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  display: block;

  overflow: hidden;

  border-radius: var(--radius);
}

/* TAMAT: IMAGE FRAME */


/* MULA: IMAGE FIT */

.original-card .card-img img.original-card-image {
  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transition: transform .3s ease;
}

.original-card:hover .card-img img.original-card-image {
  transform: scale(1.04);
}

/* TAMAT: IMAGE FIT */


/* MULA: CARD TITLE */

.original-card .card-name {
  overflow: hidden;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  line-height: 1.4;
}

/* TAMAT: CARD TITLE */


/* MULA: EMPTY STATE */

.original-empty {
  padding: 20px;

  color: var(--muted);
}

/* TAMAT: EMPTY STATE */


/* MULA: RESPONSIVE ORIGINALS */

@media (max-width: 700px) {

  .original-card {
    flex-basis: 190px;
  }

}

/* TAMAT: RESPONSIVE ORIGINALS */


/* =====================================================
   TAMAT: ORIGINALS DATA CARDS
   ===================================================== */
/* =====================================================
   MULA: SUMBER HERO
   ===================================================== */
/* MULA: SUMBER HERO */
/* =====================================================
MULA: HERO TITLE DAN SOURCE
===================================================== */

.hero-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;

z-index: 5;

padding: 90px 40px 42px;

color: #fff;

background: linear-gradient(
to top,
rgba(0,0,0,.90),
rgba(0,0,0,.55) 45%,
transparent
);

pointer-events: none;
}

.hero-title {
font-size: 32px;
font-weight: 800;
line-height: 1.15;
}

.hero-source {
display: block;

margin-top: 9px;

color: rgba(255,255,255,.85);

font-size: 12px;
font-weight: 500;
line-height: 1.5;

text-shadow: 0 1px 4px rgba(0,0,0,.9);

pointer-events: auto;
}

.hero-source-link {
cursor: pointer;

text-decoration: underline;
text-underline-offset: 3px;
}

.hero-source-link:hover {
color: #fff;
}

@media (max-width: 768px) {

.hero-caption {
padding: 70px 18px 28px;
}

.hero-title {
font-size: 20px;
line-height: 1.2;
}

.hero-source {
margin-top: 6px;
font-size: 10px;
}

}

/* =====================================================
TAMAT: HERO TITLE DAN SOURCE
===================================================== */

/* =====================================================
   TAMAT: SUMBER HERO
   ===================================================== */


/* =====================================================
   MULA: SUMBER LIVE EVENTS
   ===================================================== */

.card-source {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.4;
  color: #888888;
}

.card-source-link {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.card-source-link:hover {
  color: #ffffff;
}

/* =====================================================
   TAMAT: SUMBER LIVE EVENTS
   ===================================================== */