/* =======================================================
 BRETON LOTTERY — Editorial redesign
 Palette inspired by "Gwenn ha Du" (Breton flag)
 Ivory paper · Ink black · Ermine motif · Old-gold accent
 ======================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..900,0..100&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
 --ink: #0d0c0a;
 --ink-2: #1a1815;
 --paper: #f2ece0;
 --paper-2: #e9e1d0;
 --cream: #faf6ec;
 --line: #cdc4b2;
 --line-strong: #201d18;
 --muted: #6a655b;
 --gold: #b4924d;
 --gold-2: #d7b56d;
 --gold-soft: #efe0b8;
 --ember: #922019;
 --serif: 'Fraunces', 'Times New Roman', serif;
 --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
 --mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* Ermine "mouchetures" pattern (subtle background texture) */
:root {
 --ermine-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><g fill='%230d0c0a' opacity='0.06'><path d='M30 12 C 27 18, 24 20, 22 22 C 25 22, 27 24, 30 30 C 33 24, 35 22, 38 22 C 36 20, 33 18, 30 12 Z'/><circle cx='23' cy='24' r='1.2'/><circle cx='37' cy='24' r='1.2'/><circle cx='30' cy='33' r='1.2'/></g></svg>");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
 margin: 0;
 padding: 0;
 padding-bottom: 78px;
 background: var(--cream);
 background-image:
 radial-gradient(1200px 600px at 90% -10%, rgba(180,146,77,0.10), transparent 60%),
 radial-gradient(900px 500px at -10% 20%, rgba(13,12,10,0.05), transparent 60%),
 var(--ermine-svg);
 background-repeat: repeat;
 background-size: auto, auto, 120px 120px;
 color: var(--ink);
 font-family: var(--sans);
 font-size: 16px;
 line-height: 1.55;
 letter-spacing: -0.005em;
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
 overflow-x: hidden;
}

::selection { background: var(--ink); color: var(--gold-soft); }

/* ============ RESPONSIVE IMAGE BASELINE (baru) ============ */
/* Semua gambar otomatis responsif: mengikuti lebar container, tidak melebihi, tidak melar */
img {
 max-width: 100%;
 height: auto;
}
.img-fluid {
 max-width: 100%;
 height: auto;
}

/* Typography */
h1,h2,h3,h4,h5,h6 { font-family: var(--serif); letter-spacing: -0.02em; }
.text-warning { color: var(--gold) !important; }
.text-danger { color: var(--ember) !important; }

/* ------------- NAVBAR ------------- */
.navbar.bg-brown {
 background: var(--ink) !important;
 border-bottom: 1px solid var(--gold);
 padding: 14px 0;
 position: relative;
 z-index: 20;
}
.navbar.bg-brown::before {
 content: "";
 position: absolute;
 inset: 0;
 background: var(--ermine-svg);
 background-size: 100px 100px;
 opacity: 0.5;
 pointer-events: none;
 mix-blend-mode: screen;
}
.navbar .container { position: relative; z-index: 1; }

.navbar-brand .logo {
 width: 190px !important;
 max-width: 60vw;
 filter: invert(1) brightness(1.05);
 transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.navbar-brand:hover .logo { transform: scale(1.03) rotate(-1deg); }

.navbar-dark .navbar-nav .nav-link {
 color: rgba(250, 246, 236, 0.78);
 font-family: var(--sans);
 font-weight: 500;
 font-size: 0.86rem;
 text-transform: uppercase;
 letter-spacing: 0.14em;
 margin: 0 6px;
 padding: 10px 4px !important;
 position: relative;
 transition: color .3s ease;
}
.navbar-dark .navbar-nav .nav-link::after {
 content: "";
 position: absolute;
 left: 0; right: 100%; bottom: 4px;
 height: 1px;
 background: var(--gold);
 transition: right .35s cubic-bezier(.2,.7,.2,1);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
 color: var(--gold-2);
}
.navbar-dark .navbar-nav .nav-link:hover::after,
.navbar-dark .navbar-nav .nav-link.active::after { right: 0; }

.navbar-toggler {
 border: 1px solid rgba(215,181,109,0.5);
 padding: 6px 10px;
}
.navbar-toggler:focus { box-shadow: 0 0 0 2px rgba(215,181,109,0.35); }

.dropdown-menu {
 background: var(--ink-2);
 border: 1px solid rgba(215,181,109,0.25);
 border-radius: 4px;
 padding: 8px;
 box-shadow: 0 24px 48px rgba(0,0,0,0.35);
 margin-top: 8px;
}
.dropdown-item {
 color: var(--paper);
 font-family: var(--sans);
 font-size: 0.85rem;
 letter-spacing: 0.06em;
 padding: 10px 14px;
 border-radius: 3px;
 transition: background .25s ease, color .25s ease, padding .25s ease;
}
.dropdown-item:hover, .dropdown-item.active {
 background: rgba(215,181,109,0.12);
 color: var(--gold-2);
 padding-left: 20px;
}

/* ------------- MARQUEE ------------- */
.text-runn, marquee.text-runn {
 display: block;
 background: linear-gradient(to right, var(--paper-2), var(--paper) 50%, var(--paper-2));
 color: var(--ink) !important;
 font-family: var(--sans);
 font-weight: 600;
 font-size: 0.82rem;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 padding: 12px 0;
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
}

/* ------------- HERO / SLIDER (gambar tampil UTUH, tidak kepotong, tidak mengecil) ------------- */
.swiper {
 width: 100%;
 height: auto;              /* tinggi ikut gambar, bukan dipatok */
 background: var(--ink);
 position: relative;
 overflow: hidden;
}

.swiper::after {
 content: "";
 position: absolute;
 inset: 0;
 pointer-events: none;
 background: linear-gradient(
 180deg,
 rgba(13,12,10,0) 70%,
 rgba(13,12,10,0.45) 100%
 );
 z-index: 2;
}

.swiper-slide {
 height: auto;              /* slide ikut tinggi gambar */
 display: flex;
}

/* Gambar tampil penuh selebar layar, tinggi otomatis, TIDAK dipotong & TIDAK mengecil */
.slideimg {
 width: 100%;
 height: auto;
 display: block;
 object-fit: contain;
 filter: contrast(1.02) saturate(1.02);
}

/* Tombol */
.swiper-button-prev,
.swiper-button-next {
 color: var(--gold-2) !important;
 background: rgba(13,12,10,0.55);
 width: 46px !important;
 height: 46px !important;
 border-radius: 50%;
 border: 1px solid rgba(215,181,109,0.35);
 backdrop-filter: blur(6px);
 transition: .3s;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
 background: var(--ink);
 transform: scale(1.06);
}

.swiper-button-prev::after,
.swiper-button-next::after {
 font-size: 18px !important;
 font-weight: 700 !important;
}

/* Tablet */
@media (max-width: 992px) {
 .swiper-button-prev,
 .swiper-button-next {
 width: 40px !important;
 height: 40px !important;
 }
}

/* Mobile */
@media (max-width: 768px) {
 .swiper-button-prev,
 .swiper-button-next {
 width: 36px !important;
 height: 36px !important;
 }

 .swiper-button-prev::after,
 .swiper-button-next::after {
 font-size: 14px !important;
 }
}

/* ------------- SECTION KICKERS ------------- */
.section-eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 font-family: var(--sans);
 font-size: 0.72rem;
 font-weight: 600;
 letter-spacing: 0.28em;
 text-transform: uppercase;
 color: var(--muted);
 margin-bottom: 12px;
}
.section-eyebrow::before {
 content: "";
 width: 22px; height: 1px;
 background: var(--gold);
}
.section-title {
 font-family: var(--serif);
 font-weight: 500;
 font-variation-settings: "SOFT" 40, "opsz" 144;
 font-size: clamp(1.9rem, 3.4vw, 3rem);
 line-height: 1.05;
 letter-spacing: -0.03em;
 margin: 0 0 10px 0;
}
.section-title em {
 font-style: italic;
 color: var(--gold);
 font-variation-settings: "SOFT" 100, "opsz" 144;
}

/* CATATAN: aturan .slideimg { object-fit: contain; background:#000 } yang lama
   SUDAH DIHAPUS di sini karena menimpa slider & bikin gambar tampak mengecil (bar hitam). */

/* ------------- LIVE DRAW CARD ------------- */
.card-live {
 width: 100%;
 max-width: 780px;
 display: block;
 margin: 30px auto;
 background: transparent;
 border: none;
}
.card-live .card-body { padding: 0; }

#live {
 background: var(--ink) !important;
 color: var(--paper);
 border-radius: 6px;
 border: 1px solid rgba(215,181,109,0.28) !important;
 padding: 34px clamp(20px, 4vw, 46px) 30px;
 position: relative;
 overflow: hidden;
 box-shadow: 0 40px 80px -32px rgba(13,12,10,0.55);
}
#live::before {
 content: "";
 position: absolute;
 inset: 0;
 background: var(--ermine-svg);
 background-size: 120px 120px;
 opacity: 0.28;
 pointer-events: none;
}
#live > * { position: relative; z-index: 1; }
#live .navbar-brand .logo { filter: invert(1); width: 150px !important; margin-bottom: 12px; }
#live .fw-bold, #live h5, #live h6, #live h4 { color: var(--paper); }
#live h5.fw-bold, #live h4.fw-bold {
 font-family: var(--sans);
 font-weight: 700;
 letter-spacing: 0.24em;
 text-transform: uppercase;
 font-size: 0.9rem;
 color: var(--gold-2);
}
#live > div.d-flex.justify-content-center:nth-of-type(2) h6 {
 font-family: var(--sans);
 font-weight: 500;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 font-size: 0.78rem;
 color: rgba(250,246,236,0.62) !important;
}
#live > div.d-flex.justify-content-center:nth-of-type(3) h5 {
 font-family: var(--serif);
 font-weight: 400;
 font-variation-settings: "opsz" 144, "SOFT" 60;
 font-size: 1.4rem;
 letter-spacing: 0.02em;
 color: var(--gold-soft);
 margin-top: 4px;
 margin-bottom: 22px;
}

.live-content, div.live-content.bg-dark.rounded {
 background: transparent !important;
 padding: 20px 0 0;
 color: var(--paper);
}
.live-content .row { row-gap: 6px; }
.live-content h4 {
 font-family: var(--mono);
 font-weight: 700;
 font-size: 1.4rem;
 color: var(--gold-soft);
 letter-spacing: 0.06em;
 margin: 0;
 padding: 8px 0;
}
.live-content h4.fw-bold {
 font-family: var(--sans);
 font-weight: 600;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--paper);
 font-size: 0.86rem;
}
.live-content hr {
 border-top: 1px dashed rgba(215,181,109,0.35);
 margin: 6px 0;
 opacity: 1;
}
.live-content .col-6:first-child > h4.fw-bold i.fa-trophy.text-warning {
 color: var(--gold-2) !important;
 filter: drop-shadow(0 0 6px rgba(215,181,109,0.45));
}

/* ------------- RESULTS GRID ------------- */
.card-live-dk, .card1.card-live-dk {
 width: 100%;
 background: transparent !important;
 border: none;
 padding: 46px 0 20px !important;
 box-shadow: none;
}
.card-live-dk > h4 {
 font-family: var(--serif);
 font-weight: 400;
 font-variation-settings: "opsz" 144, "SOFT" 60;
 font-size: clamp(2rem, 4vw, 3rem);
 letter-spacing: -0.03em;
 color: var(--ink);
 text-align: center;
 margin-bottom: 8px;
 position: relative;
}
.card-live-dk > h4::before {
 content: "Disochoù";
 display: block;
 font-family: var(--sans);
 font-size: 0.72rem;
 font-weight: 600;
 letter-spacing: 0.3em;
 text-transform: uppercase;
 color: var(--gold);
 margin-bottom: 6px;
}
.card-live-dk > h4::after {
 content: "";
 display: block;
 width: 50px; height: 2px;
 background: var(--ink);
 margin: 14px auto 22px;
}

/* Individual result card in grid */
.result-card {
 background: var(--paper) !important;
 color: var(--ink) !important;
 padding: 22px 20px !important;
 border-radius: 4px !important;
 border: 1px solid var(--line);
 position: relative;
 overflow: hidden;
 transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, border-color .3s ease;
 height: 100%;
}
.result-card::before {
 content: "";
 position: absolute;
 left: 0; top: 0; bottom: 0;
 width: 3px;
 background: linear-gradient(180deg, var(--gold-2), var(--gold));
 transform: scaleY(0);
 transform-origin: top;
 transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.result-card:hover {
 transform: translateY(-6px);
 box-shadow: 0 30px 60px -30px rgba(13,12,10,0.35);
 border-color: var(--gold);
}
.result-card:hover::before { transform: scaleY(1); }

.result-card > .text-center:first-child h5,
.result-card h5.text-capitalize {
 font-family: var(--sans);
 font-weight: 600;
 font-size: 0.72rem;
 text-transform: uppercase;
 letter-spacing: 0.22em;
 color: var(--muted);
 margin-bottom: 4px;
}
.result-card > .text-center:first-child h6 {
 font-family: var(--serif);
 font-size: 0.95rem;
 font-weight: 400;
 font-style: italic;
 color: var(--ink);
 letter-spacing: 0.01em;
}
.result-card hr {
 border-top: 1px solid var(--line);
 margin: 12px 0;
 opacity: 1;
}
.result-card .d-block.mx-auto h5 {
 font-family: var(--sans);
 font-size: 0.7rem;
 font-weight: 700;
 letter-spacing: 0.24em;
 text-transform: uppercase;
 color: var(--gold);
 margin: 4px 0;
}
.result-card .p-num {
 font-family: var(--serif) !important;
 font-variation-settings: "opsz" 144, "SOFT" 100;
 font-weight: 700;
 font-size: 2.2rem !important;
 letter-spacing: -0.02em;
 color: var(--ink) !important;
 line-height: 1.15;
 margin: 6px 0 8px;
}

/* ------------- RESULT PAGE (list) ------------- */
.bg-light.p-2 {
 background: transparent !important;
 color: var(--ink);
 padding: 30px 0 10px !important;
}
.bg-light.p-2 h2 {
 font-family: var(--serif);
 font-weight: 400;
 font-variation-settings: "opsz" 144, "SOFT" 60;
 font-size: clamp(1.8rem, 3.4vw, 2.6rem);
 letter-spacing: -0.02em;
 color: var(--ink);
 text-transform: capitalize;
}
.bg-light.p-2 h2::before {
 content: "Archives";
 display: block;
 font-family: var(--sans);
 font-size: 0.72rem;
 font-weight: 600;
 letter-spacing: 0.28em;
 text-transform: uppercase;
 color: var(--gold);
 margin-bottom: 6px;
}

#dateres .input-group {
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: 40px;
 overflow: hidden;
 padding: 4px;
 width: 24rem !important;
 max-width: 100%;
}
#dateres .input-group-text {
 background: transparent;
 border: none;
 color: var(--gold);
 padding-left: 16px;
}
#dateres .form-control {
 background: transparent;
 border: none;
 color: var(--ink);
 font-family: var(--sans);
 letter-spacing: 0.02em;
}
#dateres .form-control:focus { box-shadow: none; }
#dateres .btn-danger {
 background: var(--ink);
 border: none;
 color: var(--gold-2);
 border-radius: 40px;
 padding: 10px 18px;
 letter-spacing: 0.14em;
 transition: background .3s ease, color .3s ease;
}
#dateres .btn-danger:hover { background: var(--gold); color: var(--ink); }

/* Featured card in results (bg-card4) */
.card.bg-card4, .bg-card4 {
 background: var(--ink) !important;
 color: var(--paper) !important;
 border: 1px solid rgba(215,181,109,0.3) !important;
 border-radius: 6px !important;
 overflow: hidden;
 position: relative;
 transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.card.bg-card4::before {
 content: "";
 position: absolute;
 inset: 0;
 background: var(--ermine-svg);
 background-size: 120px 120px;
 opacity: 0.25;
 pointer-events: none;
}
.card.bg-card4:hover {
 transform: translateY(-6px);
 box-shadow: 0 40px 60px -30px rgba(13,12,10,0.6);
}
.card.bg-card4 .card-body { position: relative; z-index: 1; padding: 24px 20px; }
.card.bg-card4 .bg-light.rounded {
 background: var(--paper) !important;
 padding: 14px !important;
 border-radius: 4px !important;
}
.card.bg-card4 .img-fluid { max-width: 160px; width: 100%; height: auto; }
.card.bg-card4 h5.text-capitalize {
 font-family: var(--sans);
 font-weight: 600;
 font-size: 0.72rem !important;
 text-transform: uppercase;
 letter-spacing: 0.24em;
 color: var(--gold-2);
 margin-bottom: 8px;
}
.card.bg-card4 .ball-result {
 font-family: var(--serif) !important;
 font-variation-settings: "opsz" 144, "SOFT" 100;
 font-size: clamp(2.6rem, 5vw, 3.8rem) !important;
 font-weight: 800;
 letter-spacing: -0.03em;
 color: var(--gold-soft);
 margin: 8px 0 6px;
 line-height: 1.1;
}
.card.bg-card4 span {
 font-family: var(--sans);
 font-size: 0.78rem;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: rgba(250,246,236,0.65);
}
.card.bg-card4 .badge.bg-danger {
 background: var(--gold) !important;
 color: var(--ink) !important;
 font-family: var(--sans);
 font-weight: 700;
 font-size: 0.66rem;
 letter-spacing: 0.24em;
 padding: 6px 12px;
 border-radius: 40px;
 margin: 10px 0;
 display: inline-block;
}
.card.bg-card4 h6.text-warning {
 color: var(--gold-2) !important;
 font-family: var(--serif);
 font-style: italic;
 font-weight: 400;
 font-size: 1rem;
 letter-spacing: 0.01em;
 margin-top: 10px;
}

/* Pagination */
.pagination { gap: 6px; margin-top: 30px; }
.pagination .page-link {
 background: var(--paper);
 border: 1px solid var(--line);
 color: var(--ink);
 font-family: var(--sans);
 font-weight: 600;
 font-size: 0.82rem;
 letter-spacing: 0.06em;
 border-radius: 4px;
 padding: 8px 14px;
 transition: all .25s ease;
}
.pagination .page-link:hover { background: var(--ink); color: var(--gold-2); border-color: var(--ink); }
.pagination .page-item.active .page-link { background: var(--ink); border-color: var(--ink); color: var(--gold-2); }
.pagination .page-item.disabled .page-link { opacity: 0.4; }

/* ------------- INTER-RESULT NAV (view all) ------------- */
.navbar.bg-brown.navbar-result-custom {
 background: transparent !important;
 border: 1px solid var(--line);
 border-radius: 40px !important;
 padding: 4px 10px !important;
 max-width: 320px;
 margin: 24px auto 12px;
}
.navbar.bg-brown.navbar-result-custom::before { display: none; }
.navbar.bg-brown.navbar-result-custom .nav-link {
 color: var(--ink) !important;
 letter-spacing: 0.16em;
 font-size: 0.78rem;
 padding: 6px 14px !important;
}
.navbar.bg-brown.navbar-result-custom .nav-link:hover { color: var(--gold) !important; }

/* ------------- BOTTOM STATUS BAR ------------- */
.navbot.fixed-bottom, .navbot.fixed-bottom.navbar-dark.bg-dark {
 background: var(--ink) !important;
 border-top: 1px solid var(--gold);
 color: var(--paper);
 padding: 12px 0 !important;
}
.navbot .bottom-nav { display: flex; align-items: center; gap: 18px; }
.navbot .bottom-nav > li {
 color: var(--paper);
 font-family: var(--sans);
 font-size: 0.78rem;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 font-weight: 500;
 display: inline-flex;
 align-items: center;
}
.navbot .bottom-nav > li img {
 border-radius: 50%;
 outline: 1px solid rgba(215,181,109,0.5);
 outline-offset: 2px;
}
.navbot #time-india {
 font-family: var(--mono);
 color: var(--gold-2);
 font-weight: 700;
 letter-spacing: 0.05em;
}

/* ------------- FOOTER ------------- */
footer {
 background: transparent;
 padding: 40px 0 24px;
 margin-top: 60px;
 border-top: 1px solid var(--line);
 text-align: center;
}
.copyright-text {
 color: var(--muted) !important;
 font-family: var(--sans);
 font-size: 0.76rem;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 font-weight: 500;
}

/* ------------- RESPONSIBLE MODAL ------------- */
.modal-content {
 background: var(--cream);
 border: 1px solid var(--ink);
 border-radius: 6px;
}
.modal-header {
 border-bottom: 1px solid var(--line);
 padding: 20px 24px;
 background: var(--ink);
 border-radius: 6px 6px 0 0;
}
.modal-header .modal-title {
 color: var(--gold-soft);
 font-family: var(--serif);
 font-weight: 500;
 font-variation-settings: "opsz" 144, "SOFT" 60;
 font-size: 1.4rem;
 letter-spacing: -0.01em;
}
.modal-header .btn-close { filter: invert(1) brightness(1.5); }
.modal-body { padding: 30px 32px 32px; color: var(--ink); }
.modal-body h3 {
 font-family: var(--serif);
 font-weight: 500;
 color: var(--ember) !important;
 font-size: 1.5rem;
 letter-spacing: -0.01em;
 margin-bottom: 14px;
}
.modal-body p.fw-bold {
 font-family: var(--sans);
 font-weight: 700;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 font-size: 0.82rem;
 color: var(--gold);
 margin-top: 22px;
 margin-bottom: 6px;
}
.modal-body p { font-size: 0.94rem; line-height: 1.7; color: var(--ink-2); }

/* ------------- DATETIME PICKER OVERRIDE ------------- */
.xdsoft_datetimepicker { border: 1px solid var(--ink) !important; background: var(--cream) !important; box-shadow: 0 20px 40px rgba(13,12,10,0.25) !important; }
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_calendar td:hover { background: var(--ink) !important; color: var(--gold-2) !important; }
.xdsoft_label { color: var(--ink) !important; }

/* ------------- ANIMATIONS ------------- */
@keyframes riseIn {
 from { opacity: 0; transform: translateY(24px); }
 to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.card-live-dk .col-xl-4 { animation: riseIn .7s cubic-bezier(.2,.7,.2,1) both; }
.card-live-dk .col-xl-4:nth-child(1) { animation-delay: .05s; }
.card-live-dk .col-xl-4:nth-child(2) { animation-delay: .12s; }
.card-live-dk .col-xl-4:nth-child(3) { animation-delay: .19s; }
.card-live-dk .col-xl-4:nth-child(4) { animation-delay: .26s; }
.card-live-dk .col-xl-4:nth-child(5) { animation-delay: .33s; }
.card-live-dk .col-xl-4:nth-child(6) { animation-delay: .40s; }
.section-title, .section-eyebrow { animation: riseIn .8s cubic-bezier(.2,.7,.2,1) both; }
#live { animation: fadeIn .9s ease both; }

/* ------------- HERO OVERLAY WORDMARK ------------- */
.hero-wrapper { position: relative; }
.hero-badge-strip {
 position: relative;
 z-index: 4;
 margin: -22px auto 30px;
 display: flex;
 justify-content: center;
 pointer-events: none;
}
.hero-badge {
 display: inline-flex;
 align-items: center;
 gap: 12px;
 background: var(--ink);
 color: var(--gold-2);
 padding: 10px 22px;
 border-radius: 40px;
 border: 1px solid rgba(215,181,109,0.35);
 font-family: var(--sans);
 font-size: 0.72rem;
 font-weight: 600;
 letter-spacing: 0.24em;
 text-transform: uppercase;
 box-shadow: 0 20px 40px -20px rgba(13,12,10,0.55);
}
.hero-badge img { border-radius: 50%; outline: 1px solid var(--gold-2); outline-offset: 2px; }

/* ------------- SECTION HEADER (Recent Results) ------------- */
.results-header {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 flex-wrap: wrap;
 gap: 20px;
 padding: 60px 0 24px;
 border-bottom: 1px solid var(--line);
 margin-bottom: 30px;
}
.results-header .left { max-width: 620px; }
.results-header .right {
 font-family: var(--serif);
 font-style: italic;
 color: var(--muted);
 font-size: 0.94rem;
}

/* ------------- SEARCH RESULT INJECTION ------------- */
#result-date .card {
 background: var(--ink) !important;
 color: var(--paper) !important;
 border: 1px solid rgba(215,181,109,0.3) !important;
 border-radius: 6px;
 animation: riseIn .5s ease both;
 overflow: hidden;
}
#result-date .card h5.text-capitalize {
 font-family: var(--sans);
 font-weight: 600;
 font-size: 0.72rem !important;
 text-transform: uppercase;
 letter-spacing: 0.24em;
 color: var(--gold-2);
}
#result-date .card .img-fluid { max-width: 160px; width: 100%; height: auto; }
#result-date .card .ball-result {
 font-family: var(--serif) !important;
 font-variation-settings: "opsz" 144, "SOFT" 100;
 font-weight: 800;
 font-size: 3.2rem !important;
 color: var(--gold-soft);
 letter-spacing: -0.03em;
}

/* ------------- MISC RESET ------------- */
.card1, .card-live-dk.card1 {
 background: transparent;
 border: none;
 border-radius: 0;
}
.navbar-nav-custom { flex-direction: row !important; align-items: center; justify-content: center; }

/* ------------- RESPONSIVE ------------- */
@media (max-width: 991.98px) {
 .navbar-collapse { background: var(--ink); padding: 16px 0; margin-top: 12px; border-top: 1px solid rgba(215,181,109,0.2); }
 .navbar-dark .navbar-nav .nav-link { padding: 12px 0 !important; }
 /* height 48vh dihapus -> biar aspect-ratio yang atur, gambar tidak mengecil */
}
@media (max-width: 767.98px) {
 body { padding-bottom: 96px; }
 /* height 40vh dihapus */
 .hero-title { font-size: clamp(1.8rem, 8vw, 3rem); }
 .card-live { margin: 20px auto; }
 #live { padding: 24px 18px; }
 .live-content h4 { font-size: 1.15rem; }
 .card.bg-card4 .ball-result { font-size: 2.6rem !important; }
 .navbot .bottom-nav { gap: 10px; flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 480px) {
 .navbot .bottom-nav > li { font-size: 0.7rem; }
 .result-card .p-num { font-size: 1.8rem !important; }
}