/* ==========================================================================
   SHENYANGLottery — Clean Blue Theme + Orange Table  (CLEANED + SLIDER)
   ========================================================================== */

/* ---------- CSS Variables (colors) ---------- */
:root{
  --bg:#0a1a2b;
  --bg-soft:#004080;
  --primary:#1e66ff;
  --primary-2:#5aa0ff;
  --accent:#00d4ff;
  --text:#000000;
  --muted:#9bb3d6;
  --card:#0d2036;
  --warn:#ffd700;

  /* Table palette */
  --tbl-head-grad1:#01154f;
  --tbl-head-grad2:#3062f3;
  --tbl-sub-bg:#f3f3f3;
  --tbl-sub-fg:#333;
  --tbl-th-grad1:#007BFF;
  --tbl-th-grad2:#004080;
  --tbl-border:#9a1d00;
  --tbl-row:#ffffff;
  --tbl-row-alt:#f6f6f6;
  --btn-grad1:#01154f;
  --btn-grad2:#3062f3;
  --btn-border:#e37000;

  /* Footer layout width */
  --footer-content-max:1240px;
}

/* ---------- Resets & Base ---------- */
*{ box-sizing:border-box }
html{
  -webkit-text-size-adjust:100%;     /* cegah iOS auto-resize teks */
  overflow-x:auto;                   /* izinkan geser saat di-zoom */
}
body{
  -webkit-overflow-scrolling:touch;  /* scroll halus di iOS/Android */
  overscroll-behavior-x:contain;     /* hindari “bounce” berlebih */
}
html,body{
  margin:0; padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  background:var(--bg); color:var(--text);
}
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }
.small{ font-size:12px; color:var(--muted) }
.container{ max-width:1180px; margin:0 auto; padding:16px }

/* ---------- Header / Nav ---------- */
.header{ background:linear-gradient(90deg,var(--bg-soft),#007BFF); border-bottom:1px solid #102a47 }
.nav{ display:flex; align-items:center; gap:20px; padding:12px 0 }
.logo{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.5px }
.logo .badge{ background:linear-gradient(135deg,var(--primary),var(--accent)); color:#001428; border-radius:10px; padding:6px 10px; font-weight:900 }
.nav a{ padding:8px 12px; border-radius:10px; background:#0b223a; border:1px solid #12385f }
.nav a.active,.nav a:hover{ background:linear-gradient(180deg,#0e2b4b,#0a2037); border-color:#1d4e80 }

/* ---------- Layout ---------- */
.layout{ display:grid; grid-template-columns:260px 1fr; gap:16px; margin-top:16px }
.sidebar{ background:var(--card); border:1px solid #12385f; border-radius:14px; overflow:hidden }
.sidebar h3{ margin:0; padding:14px 16px; border-bottom:1px solid #163e6a; background:#004080; color:var(--primary-2) }
.list{ list-style:none; margin:0; padding:0 }
.list li{ border-bottom:1px solid #12385f }
.list li a{ display:block; padding:12px 16px; color:var(--text) }
.list li a:hover{ background:#0e2644 }

.card{ background:var(--card); border:1px solid #12385f; border-radius:14px; overflow:hidden }
.card h2{ margin:0; padding:16px; border-bottom:1px solid #12385f; background:#0f2745; color:var(--primary-2) }
.card .content{ padding:16px }

/* ---------- Footer (full-bleed & desktop-lock) ---------- */
.footer,.site-footer{
  color:#e9f1ff;
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.footer .footer-bar,.site-footer .footer-bar{
  background:linear-gradient(180deg,#0e3a6b 0%,#09223d 70%,#071a2f 100%);
  border-top:2px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  position:relative; overflow:visible;
}
/* Line dekor full-bleed (solid, nempel tepi) */
.footer .footer-bar::before,
.footer .footer-bar::after,
.site-footer .footer-bar::before,
.site-footer .footer-bar::after{
  content:""; position:absolute; left:0; right:0; height:2px;
  background:rgba(90,160,255,.85);
  pointer-events:none; z-index:0;
}
.footer .footer-bar::before,.site-footer .footer-bar::before{ top:0 }
.footer .footer-bar::after,.site-footer .footer-bar::after{ bottom:0 }

/* Isi footer */
.footer .container,.site-footer .container{
  max-width:var(--footer-content-max) !important;
  margin:0 auto; padding:18px 16px; position:relative; z-index:1;
}

/* Grid */
.footer-grid{ display:grid; grid-template-columns:1.3fr .9fr .9fr; gap:24px }
.footer-grid h4{
  margin:0 0 8px 0; font-size:14px; letter-spacing:.3px; color:#cfe3ff; position:relative;
}
.footer-grid h4::after{
  content:""; display:block; width:50px; height:2px; margin-top:6px;
  background:linear-gradient(90deg,#3aa0ff,transparent); opacity:.7;
}
.footer-grid .small{ margin:6px 0 0 0; font-size:13px; line-height:1.6; color:#bcd0ee }
.footer-grid .small.zh{ color:#a7c4ff; opacity:.9 }

/* Copyright bar */
.footer .footer-copy,.site-footer .footer-copy{
  background:linear-gradient(180deg,#071a2f 0%,#061628 100%);
  border-top:1px solid rgba(255,255,255,.06);
  text-align:center; position:relative; overflow:visible;
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  border-left:0; border-right:0; border-radius:0;
}
.footer .footer-copy p,.site-footer .footer-copy p{ margin:10px 0; font-size:13px; color:#9bb3d6 }
.footer .footer-copy::before,
.footer .footer-copy::after,
.site-footer .footer-copy::before,
.site-footer .footer-copy::after{
  content:""; position:absolute; left:0; right:0; height:2px;
  background:rgba(90,160,255,.55); pointer-events:none; z-index:0;
}
.footer .footer-copy::before,.site-footer .footer-copy::before{ top:0 }
.footer .footer-copy::after,.site-footer .footer-copy::after{ bottom:0 }

/* Tetap 3 kolom di HP (desktop-lock footer) */
@media (max-width:900px){
  .footer-grid{ grid-template-columns:1.3fr .9fr .9fr !important; gap:24px !important }
  .footer .container,.site-footer .container{ padding:18px 16px !important }
}

/* ---------- Blue Hero (optional) ---------- */
.hero{
  position:relative; overflow:hidden; border-radius:16px; border:1px solid #12385f;
  background:
    radial-gradient(1000px 400px at 10% -10%,rgba(30,102,255,.3),transparent),
    radial-gradient(1200px 500px at 90% 110%,rgba(0,212,255,.25),transparent),
    url('/public/assets/background.jpg');
  background-size:cover; background-position:center;
}
.hero .overlay{ backdrop-filter:blur(2px); background:linear-gradient(180deg,rgba(4,15,30,.5),rgba(4,15,30,.9)); padding:40px }
.hero h1{ margin:0 0 8px 0; font-size:36px }
.hero p{ margin:0; color:var(--muted) }

/* ---------- Banner Slider (tanpa library) ---------- */
.hero-banner{ display:block; margin-bottom:14px } /* konsisten dengan section lain */
.sl-main{
  position:relative;
  height:220px;                     /* ubah tinggi banner di sini */
  background:#0b0b0b;
  border:1px solid #153d67;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.4) inset;
}
.sl-track{
  height:100%;
  display:flex;
  will-change:transform;
  transition:transform .45s ease;
}
.sl-slide{
  min-width:100%;
  height:100%;
  background:center / cover no-repeat var(--img);
  display:block;
}
.sl-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.35);
  color:#fff; font-size:28px; line-height:1;
  cursor:pointer; user-select:none; z-index:5;
}
.sl-prev{ left:12px } .sl-next{ right:12px }
.sl-nav:hover{ background:rgba(255,255,255,.12) }
.sl-dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; gap:8px; justify-content:center; z-index:5;
}
.sl-dots button{
  width:8px; height:8px; border-radius:999px;
  border:0; background:rgba(255,255,255,.35); cursor:pointer;
}
.sl-dots button.is-active{ background:#fff }
@media (min-width:1440px){ .sl-main{ height:260px } }
@media (max-width:900px){ .sl-main{ height:200px } }

/* ---------- Orange Title Banner ---------- */
.hero2{ border-radius:14px; overflow:hidden; border:1px solid #c85e00; background:#1b1b1b; margin-bottom:-30px }
.hero2 .hero2-head{
  background:linear-gradient(180deg,var(--tbl-head-grad1),var(--tbl-head-grad2));
  color:#fff; font-weight:900; letter-spacing:.2px; padding:10px 14px; border-bottom:1px solid #c65c00;
}
.hero2 .hero2-body{ padding:0 }
.hero2 .hero2-img{ width:100%; height:190px; object-fit:cover; display:block; background:#101010 }

/* ---------- TABLE: Top 14 Day Online Result ---------- */
.table-wrap{
  border-radius:10px; overflow:hidden;
  border:1px solid var(--tbl-border);
  background:#eee; box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.table-head{
  background:linear-gradient(180deg,var(--tbl-head-grad1),var(--tbl-head-grad2));
  color:#fff; padding:12px 16px; font-weight:900; letter-spacing:.2px;
  border-bottom:1px solid #c85e00; font-size:16px;
}
.table-sub{
  background:var(--tbl-sub-bg); color:var(--tbl-sub-fg);
  padding:10px 16px; border-bottom:1px solid #d9d9d9; font-size:14px;
}
.table{ width:100%; border-collapse:collapse }
.table thead th{
  background:linear-gradient(180deg,var(--tbl-th-grad1),var(--tbl-th-grad2));
  color:#fff; font-weight:800; border-bottom:1px solid #a81717; text-align:center;
  padding:6px 10px; font-size:14px; line-height:1.3;
}
.table tbody td{
  text-align:center; border-bottom:1px solid #ddd;
  padding:6px 10px; font-size:14px; line-height:1.3;
}
.table tbody tr{ background:var(--tbl-row) }
.table tbody tr:nth-child(even){ background:var(--tbl-row-alt) }
.table tbody tr:hover{ background:#f0f0f0 }

/* Balls */
.num-balls{ display:flex; gap:4px; flex-wrap:wrap; justify-content:center; align-items:center }
.num-ball-img{ width:35px; height:35px; object-fit:contain; display:inline-block }
.badge{
  display:inline-block; min-width:26px; text-align:center;
  padding:6px 8px; border-radius:999px;
  background:#0a2240; border:1px solid #1b4e82; color:var(--primary-2); font-weight:700;
}

/* Buttons */
.btn{ display:inline-block; border-radius:10px; color:#fff }
.btn.cta{
  background:linear-gradient(180deg,var(--btn-grad1),var(--btn-grad2));
  border:1px solid var(--btn-border);
  padding:4px 16px; border-radius:8px; font-weight:600; font-size:13px;
}
.btn.cta:hover{ filter:brightness(1.05) }

/* ---------- Sidebar Split Blocks ---------- */
.sidebar{ background:transparent; border:none }
.sidebar-block{
  background:#0c1f35; border:1px solid #153d67; border-radius:14px; margin-bottom:14px;
  overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.35)
}
.sb-head{
  padding:10px 14px; font-weight:800; color:#fff; display:flex; align-items:center; gap:10px;
  border-bottom:1px solid rgba(255,255,255,.12); text-transform:uppercase; letter-spacing:.3px
}
.sb-head .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; border:2px solid #222; background:#ffd54d; box-shadow:0 0 0 2px rgba(0,0,0,.25) inset }
/* Days Result (biru) */
.sb-head.red{  background:linear-gradient(180deg,#1a6dff,#0d49b9) }
/* Our Partner (emas) */
.sb-head.gold{ background:linear-gradient(180deg,#ffb300,#ff8a00) }

.sb-body{ padding:10px 12px; background:#0c1828 }

.day-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.day-list li a{
  display:flex; align-items:center; justify-content:space-between; padding:10px 12px;
  background:#0b223a; border:1px solid #12385f; border-radius:10px; color:#e9f1ff
}
.day-list li a:hover{ background:#0f2b4a }
.day-list li a .chev{ opacity:.55 }

.partner-stack{ display:flex; flex-direction:column; gap:10px }
.partner-card{ display:block; background:#0b223a; border:1px solid #12385f; border-radius:10px; overflow:hidden }
.partner-card img{ width:100%; height:120px; object-fit:cover; display:block }

/* ---------- Winner/Review panel ---------- */
.winner-wrap{
  border-radius:10px; overflow:hidden; border:1px solid #c85e00; background:#eee;
  box-shadow:0 2px 6px rgba(0,0,0,.4); margin-top:0;
}
.winner-head{
  background:linear-gradient(180deg,var(--tbl-head-grad1),var(--tbl-head-grad2));
  color:#fff; padding:10px 16px; font-weight:900; letter-spacing:.2px; border-bottom:1px solid #c85e00;
}
.winner-topbar{
  background:#f3f3f3; color:#333; display:flex; justify-content:space-between;
  padding:10px 16px; border-bottom:1px solid #d9d9d9; font-size:14px;
}
.winner-table thead th{
  background:linear-gradient(180deg,var(--tbl-th-grad1),var(--tbl-th-grad2));
  color:#fff; font-weight:800; border-bottom:1px solid #a81717; text-align:left; padding:8px 12px;
}
.winner-table tbody td{
  background:#fff; border-bottom:1px solid #e1e1e1; padding:10px 12px; text-align:left;
}
.winner-table tbody tr:nth-child(even){ background:#f8f8f8 }
.winner-table .num-balls{ display:flex; gap:6px; flex-wrap:wrap; align-items:center }

/* Hero ala Home (header biru + body hitam) */
.hero-home-img{ width:100%; height:auto; display:block }
.hero-home-fallback{ display:none; height:180px; background:#0b0b0b }
.hero-home{ position:relative; z-index:1 }
.table-wrap{ position:relative; z-index:5 }

/* Spasi banner */
.hero2,.hero-banner,.hero-home{ display:block; margin-bottom:14px }
main>.table-wrap:first-of-type, main>.card:first-of-type{ margin-top:0 }

/* Winner table — center kolom Result */
.winner-table thead th:nth-child(2),
.winner-table tbody td:nth-child(2){ text-align:center !important }
.winner-table tbody td:nth-child(2) .num-balls{ width:100%; justify-content:center }

/* Hindari 1px overflow dari elemen full-bleed footer */
.footer .footer-bar,
.site-footer .footer-bar,
.footer .footer-copy,
.site-footer .footer-copy{
  overflow-x:clip;
}
/* Pastikan panel full-bleed benar2 nempel tepi tanpa sudut & tanpa bocor */
.footer .footer-bar,
.site-footer .footer-bar,
.footer .footer-copy,
.site-footer .footer-copy{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  border-left:0; border-right:0; border-radius:0;
}

/* ===== Banner card + title bar di atas slider — CONSOLIDATED ===== */

/* Kartu banner: tanpa border, menyatu dengan background, jarak rapat */
.hero-card{
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
  margin-bottom: 4px !important;  /* rapat ke tabel */
  box-shadow: none;
}

/* Bar judul biru di atas banner */
.hero-card-head{
  background: linear-gradient(180deg, #1e65ff 0%, #0d48b6 70%, #0b3a86 100%);
  color: #fff;
  font-weight: 900;
  letter-spacing: .2px;
  padding: 10px 14px;
  border-bottom: 0;               /* tanpa garis bawah */
}
.hero-card-head::after{ display:none; }  /* matikan aksen garis */

/* Area slider di dalam kartu — benar2 borderless */
.hero-card .hero-slider{
  border: 0;
  outline: 0;
  box-shadow: none;
  border-radius: 6px;              /* sudut lembut; ubah 0 jika mau kotak */
}

/* Jarak komponen terkait */
.hero-banner{ margin-bottom: 4px !important; }
.table-wrap{  margin-top: 0 !important; }

/* === Vertical slider untuk OUR PARTNER === */
.partner-rail{
  /* sesuaikan dengan tinggi banner per kartu & gap */
  --pcard-h: 120px;
  --pcard-gap: 10px;

  position: relative;
  height: calc(var(--pcard-h) * 4 + var(--pcard-gap) * 3); /* 4 banner terlihat */
  overflow: hidden;
  border-radius: 12px;
}

/* efek fade halus di atas & bawah */
.partner-rail::before,
.partner-rail::after{
  content:"";
  position:absolute; left:0; right:0; height:18px; z-index:2; pointer-events:none;
  background: linear-gradient(180deg, #0c1828, rgba(12,24,40,0));
}
.partner-rail::after{ bottom:0; transform: rotate(180deg); }
.partner-rail::before{ top:0; }

/* track vertikal */
.partner-track{
  display:flex;
  flex-direction: column;
  gap: var(--pcard-gap);
  transition: transform .35s ease;
  will-change: transform;
}

/* tombol navigasi */
.partner-nav{
  position:absolute; left:50%; transform: translateX(-50%);
  width:34px; height:34px; border-radius:999px;
  border:1px solid #12385f;
  background:#0b223a;
  color:#e9f1ff; font-weight:700;
  display:grid; place-items:center;
  cursor:pointer; z-index:3;
  opacity:.95;
}
.partner-nav.up{    top: 4px; }
.partner-nav.down{  bottom: 4px; }
.partner-nav:disabled{ opacity:.35; cursor:default }

/* Header/Logo sizing */
.logo{ display:flex; align-items:center; }
.brand-logo{
  height:75px;      
  width:auto;
  display:block;
}

.header .nav{ padding:10px 0; }