/* =============================================
   CakhiaTV Simple – Main Stylesheet
   ============================================= */
:root {
  --accent:         #f07800;
  --accent-dark:    #c45f00;
  --accent-light:   #ff9330;
  --bg-primary:     #0e0a04;
  --bg-secondary:   #1a1208;
  --bg-card:        #211810;
  --text-primary:   #f0e0c0;
  --text-secondary: #a08060;
  --text-muted:     #6b5040;
  --green:          #2ecc71;
  --border:         rgba(240,120,0,.18);
  --border-subtle:  rgba(255,255,255,.06);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg-primary); color:var(--text-primary); font-family:'Be Vietnam Pro',sans-serif; font-size:15px; line-height:1.7; min-height:100vh; display:flex; flex-direction:column; }
a { color:var(--accent); text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-primary); }
::-webkit-scrollbar-thumb { background:var(--accent-dark); border-radius:3px; }

/* ── HEADER ── */
.site-header { background:linear-gradient(135deg,#1e1005,#2d1a08); border-bottom:2px solid var(--accent); position:sticky; top:0; z-index:100; box-shadow:0 4px 20px rgba(240,120,0,.25); }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:10px 28px; gap:12px; flex-wrap:wrap; border-bottom:1px solid var(--border-subtle); }
.site-logo { display:flex; align-items:center; gap:10px; }
.site-logo .custom-logo { height:50px; width:auto; }
.logo-icon { width:42px; height:42px; background:var(--accent); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.logo-text { font-family:'Barlow Condensed',sans-serif; font-size:26px; font-weight:800; color:#fff; }
.live-indicator { display:flex; align-items:center; gap:7px; color:var(--green); font-size:13px; font-weight:600; }
.live-dot { width:8px; height:8px; background:var(--green); border-radius:50%; animation:livePulse 1.5s infinite; }
@keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.5)} }
.header-badge { background:rgba(240,120,0,.15); border:1px solid var(--accent); padding:4px 14px; border-radius:20px; font-size:12px; color:var(--accent); font-weight:700; letter-spacing:.5px; }
.site-nav { display:flex; align-items:center; gap:2px; padding:0 28px; overflow-x:auto; scrollbar-width:none; }
.site-nav::-webkit-scrollbar { display:none; }
.nav-item { display:block; padding:10px 16px; color:var(--text-secondary); font-weight:600; font-size:13px; white-space:nowrap; border-bottom:2px solid transparent; transition:all .2s; }
.nav-item:hover { color:var(--accent); border-bottom-color:var(--accent); }
.nav-item.hot { color:#e74c3c; }
.nav-list { display:flex; list-style:none; align-items:center; gap:2px; }
.nav-list li a { display:block; padding:10px 16px; color:var(--text-secondary); font-weight:600; font-size:13px; white-space:nowrap; border-bottom:2px solid transparent; transition:all .2s; }
.nav-list li a:hover, .nav-list .current-menu-item > a { color:var(--accent); border-bottom-color:var(--accent); }

/* ── BODY ── */
.site-body { flex:1; }
.body-inner { max-width:960px; margin:0 auto; padding:28px 20px 48px; display:flex; flex-direction:column; gap:24px; }

/* ── H1 HEADING ── */
.page-heading { background:linear-gradient(135deg,var(--bg-secondary),var(--bg-card)); border-radius:10px; padding:20px 28px; border-left:4px solid var(--accent); border:1px solid var(--border); }
.page-title { font-family:'Barlow Condensed',sans-serif; font-size:clamp(26px,4vw,42px); font-weight:800; color:#fff; text-transform:uppercase; letter-spacing:1px; line-height:1.2; }

/* ── EMBED SECTION ── */
.embed-section { background:var(--bg-secondary); border-radius:12px; overflow:hidden; }
.embed-bordered { border:2px solid var(--accent); box-shadow:0 0 30px rgba(240,120,0,.15); }
.embed-wrapper { position:relative; width:100%; height:0; background:#000; }
.embed-content { position:absolute; inset:0; display:flex; align-items:stretch; }
.embed-content iframe, .embed-content > * { width:100%!important; height:100%!important; border:none; display:block; }

/* ── WATCH CTA ── */
.watch-cta-box { position:relative; overflow:hidden; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; background:var(--bg-primary); }
.watch-cta-bg { position:absolute; inset:0; background:radial-gradient(ellipse 65% 65% at 50% 50%,rgba(240,120,0,.13) 0%,transparent 70%),linear-gradient(135deg,#0e0a04,#1a1208); }
.watch-cta-bg::before { content:''; position:absolute; inset:0; background-image:repeating-linear-gradient(0deg,transparent,transparent 40px,rgba(255,255,255,.012) 40px,rgba(255,255,255,.012) 41px),repeating-linear-gradient(90deg,transparent,transparent 40px,rgba(255,255,255,.012) 40px,rgba(255,255,255,.012) 41px); }
.watch-cta-content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:16px; padding:40px 24px; text-align:center; }
.watch-cta-icon { font-size:70px; line-height:1; filter:drop-shadow(0 0 24px rgba(240,120,0,.6)); animation:floatBall 3s ease-in-out infinite; }
@keyframes floatBall { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.watch-cta-title { font-family:'Barlow Condensed',sans-serif; font-size:clamp(22px,3vw,36px); font-weight:800; color:#fff; text-transform:uppercase; letter-spacing:1.5px; text-shadow:0 2px 24px rgba(240,120,0,.4); }
.watch-cta-sub { font-size:14px; color:var(--text-muted); letter-spacing:.5px; }
.watch-now-btn { display:inline-flex; align-items:center; gap:12px; background:linear-gradient(135deg,var(--accent-dark),var(--accent),var(--accent-light)); color:#fff; text-decoration:none; padding:16px 52px; border-radius:8px; font-family:'Barlow Condensed',sans-serif; font-size:clamp(20px,2.5vw,26px); font-weight:800; letter-spacing:2px; text-transform:uppercase; transition:all .3s; position:relative; overflow:hidden; animation:glowPulse 2.5s ease-in-out infinite; }
.watch-now-btn::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); transform:translateX(-100%); transition:.5s; }
.watch-now-btn:hover::before { transform:translateX(100%); }
.watch-now-btn:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 14px 42px rgba(240,120,0,.75),0 0 0 4px rgba(240,120,0,.2); color:#fff; }
.btn-arrow { transition:transform .2s; }
.watch-now-btn:hover .btn-arrow { transform:translateX(5px); }
@keyframes glowPulse { 0%,100%{box-shadow:0 6px 30px rgba(240,120,0,.5),0 0 0 0 rgba(240,120,0,.3)} 50%{box-shadow:0 6px 40px rgba(240,120,0,.7),0 0 0 8px rgba(240,120,0,0)} }
.watch-cta-note { font-size:12px; color:var(--text-muted); }

/* ── PAGE CONTENT ── */
.page-content { background:var(--bg-secondary); border-radius:12px; padding:28px 32px; border:1px solid var(--border-subtle); color:var(--text-secondary); line-height:1.85; }
.page-content h1,.page-content h2,.page-content h3,.page-content h4 { font-family:'Barlow Condensed',sans-serif; color:var(--accent); margin:20px 0 10px; text-transform:uppercase; letter-spacing:.5px; }
.page-content h1{font-size:28px} .page-content h2{font-size:24px} .page-content h3{font-size:20px}
.page-content p { margin-bottom:14px; }
.page-content a { color:var(--accent); }
.page-content a:hover { text-decoration:underline; }
.page-content ul,.page-content ol { padding-left:22px; margin-bottom:14px; line-height:2.1; }
.page-content ul li::marker,.page-content ol li::marker { color:var(--accent); font-weight:700; }
.page-content strong,.page-content b { color:var(--text-primary); font-weight:700; }
.page-content blockquote { border-left:3px solid var(--accent); padding-left:16px; color:var(--text-muted); font-style:italic; margin:16px 0; }
.page-content table { width:100%; border-collapse:collapse; margin-bottom:14px; }
.page-content table th { background:var(--bg-card); color:var(--accent); padding:8px 12px; font-size:12px; text-transform:uppercase; }
.page-content table td { padding:8px 12px; border-bottom:1px solid var(--border-subtle); font-size:13px; }
.page-content img { border-radius:8px; margin:10px 0; }
.page-content code { background:var(--bg-card); padding:2px 6px; border-radius:3px; font-size:12px; color:var(--accent); }
.page-content pre { background:var(--bg-card); padding:16px; border-radius:8px; overflow-x:auto; font-size:12px; margin-bottom:14px; }

/* ── FOOTER ── */
.site-footer { background:linear-gradient(180deg,var(--bg-secondary),#0a0600); border-top:2px solid var(--accent); padding:36px 0 18px; margin-top:auto; }
.footer-inner { max-width:960px; margin:0 auto; padding:0 20px; }
.footer-top { display:flex; gap:40px; flex-wrap:wrap; margin-bottom:24px; }
.footer-brand { flex:1; min-width:240px; }
.site-footer .custom-logo { max-height:48px; width:auto; }
.footer-logo { font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:800; color:#fff; display:block; margin-bottom:8px; }
.footer-desc { font-size:12px; color:var(--text-muted); line-height:1.8; margin:8px 0; }
.footer-social { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.social-btn { background:var(--bg-card); border:1px solid var(--border-subtle); padding:5px 14px; border-radius:5px; color:var(--text-muted); font-size:12px; transition:all .2s; }
.social-btn:hover { border-color:var(--accent); color:var(--accent); }
.footer-col h4 { font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:700; color:#fff; text-transform:uppercase; margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--border-subtle); }
.footer-nav-list { list-style:none; }
.footer-nav-list li a { display:block; color:var(--text-muted); font-size:12px; padding:3px 0; transition:color .2s; }
.footer-nav-list li a:hover { color:var(--accent); }
.footer-bottom { border-top:1px solid var(--border-subtle); padding-top:16px; text-align:center; color:var(--text-muted); font-size:12px; }
.footer-disclaimer { margin-top:5px; font-size:11px; opacity:.6; }

/* ── RESPONSIVE ── */
@media(max-width:600px) {
    .header-inner { padding:8px 14px; }
    .site-nav { padding:0 14px; }
    .body-inner { padding:16px 12px 36px; gap:16px; }
    .page-heading { padding:14px 18px; }
    .page-content { padding:20px 18px; }
    .watch-cta-content { padding:24px 16px; gap:12px; }
    .watch-now-btn { padding:12px 28px; }
}