/*
Theme Name: LINTAS.ID
Theme URI: https://example.com/lintas-id
Author: LINTAS.ID Studio
Author URI: https://example.com
Description: Tema portal berita bergaya media online, lengkap dengan menu kategori kustom, ticker berita berjalan, seksi kanal berwarna, dan pengaturan tema (warna, tipografi, logo, ikon situs) lewat Customizer.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lintas-id
Tags: news, blog, custom-logo, custom-menu, featured-images, translation-ready
*/

/* =========================================================
   0. RESET & TOKENS
   ========================================================= */
:root{
  --primary:#1692F9;
  --primary-dark:#0E6FC4;
  --ink:#171717;
  --body:#4B4B4B;
  --bg:#FAFAF8;
  --paper:#FFFFFF;
  --line:#E5E2DC;
  --muted:#8A8781;
  --c-finance:#0F9D58;
  --c-sport:#E2711D;
  --c-tech:#7A3FE0;
  --c-travel:#0E9594;
  --c-food:#C2185B;
  --font-display:'Barlow Condensed', sans-serif;
  --font-body:'Public Sans', sans-serif;
  --chrome-bg:#171717;
  --chrome-bg-dark:#0B0B0B;
  --chrome-text:#FAFAF8;
  --chrome-text-dim:rgba(250,250,248,.65);
}
body.lintas-dark{
  --ink:#F2F1EC;
  --body:#C9C7C0;
  --bg:#121212;
  --paper:#1A1A1A;
  --line:#2E2E2E;
  --muted:#84827C;
}
*{box-sizing:border-box;}
body{margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; transition:background .25s ease, color .25s ease;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%; height:auto;}
ul{list-style:none; margin:0; padding:0;}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:800; line-height:1.05; letter-spacing:-0.01em; margin:0;}
.mono{font-family:'IBM Plex Mono', monospace;}
.screen-reader-text{position:absolute; left:-9999px;}

/* =========================================================
   1. UTILITY BAR
   ========================================================= */
.utility{background:var(--chrome-bg); color:var(--chrome-text); font-size:11.5px; font-family:'IBM Plex Mono', monospace; letter-spacing:.02em;}
body.lintas-dark .utility{background:var(--chrome-bg-dark);}
.utility .wrap{display:flex; justify-content:space-between; align-items:center; height:30px; flex-wrap:wrap;}
.utility a{color:var(--chrome-text); opacity:.85;}
.utility a:hover{opacity:1;}
.utility .links{display:flex; gap:16px;}
.dot-live{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--primary); margin-right:6px; animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.25;}}

/* =========================================================
   2. HEADER / MASTHEAD
   ========================================================= */
header.masthead{background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; transition:background .25s ease, border-color .25s ease;}
.masthead-row{display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px;}
.site-branding{display:flex; align-items:center; gap:10px; min-width:0;}
.site-branding .custom-logo-link{display:flex; align-items:center; flex-shrink:0;}
.site-branding img{width:38px; height:38px; object-fit:contain;}
.site-branding .brand-text{min-width:0;}
.site-title{font-family:var(--font-display); font-weight:800; font-size:24px; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.site-title a{color:var(--ink);}
.site-title .accent{color:var(--primary);}
.site-tagline{font-size:10.5px; font-family:'IBM Plex Mono'; color:var(--muted); letter-spacing:.03em; display:none; white-space:nowrap;}
@media(min-width:700px){.site-tagline{display:block;}}

.search-box{flex:1; max-width:420px; display:flex; align-items:center; border:1px solid var(--line); border-radius:2px; padding:0 12px; height:38px; background:var(--bg);}
.search-box input{border:none; background:transparent; outline:none; width:100%; font-size:13.5px; font-family:var(--font-body); color:var(--ink);}
.search-box svg{flex-shrink:0; opacity:.5;}

.header-actions{display:flex; align-items:center; gap:10px;}
.btn-live{display:flex; align-items:center; gap:6px; background:var(--primary); color:#fff; font-family:var(--font-display); font-weight:700; font-size:14px; padding:8px 14px; text-transform:uppercase; letter-spacing:.03em; border-radius:2px;}
.btn-live::before{content:''; width:7px; height:7px; border-radius:50%; background:#fff; animation:pulse 1.4s infinite;}
.burger{display:flex; flex-direction:column; gap:4px; cursor:pointer; background:none; border:none; padding:4px;}
.burger span{width:22px; height:2px; background:var(--ink); display:block;}
@media(min-width:900px){.burger{display:none;}}

/* =========================================================
   3. PRIMARY NAV
   ========================================================= */
nav.categories{background:var(--chrome-bg); overflow-x:auto; scrollbar-width:none; transition:background .25s ease;}
body.lintas-dark nav.categories{background:var(--chrome-bg-dark);}
nav.categories::-webkit-scrollbar{display:none;}
nav.categories ul{display:flex; gap:2px;}
nav.categories a{white-space:nowrap; font-family:var(--font-display); font-weight:700; font-size:15.5px; color:var(--chrome-text); opacity:.65; padding:12px 14px; display:inline-block; text-transform:uppercase; letter-spacing:.02em; border-bottom:3px solid transparent;}
nav.categories a:hover{opacity:1;}
nav.categories .current-menu-item > a,
nav.categories .current-menu-ancestor > a,
nav.categories .current_page_item > a{opacity:1; border-bottom-color:var(--primary);}
nav.categories .menu-item-has-children{position:relative;}
nav.categories .sub-menu{display:none;}

/* =========================================================
   4. BREAKING TICKER
   ========================================================= */
.ticker{background:var(--primary); color:#fff; overflow:hidden; position:relative;}
.ticker .wrap{display:flex; align-items:center; height:36px; padding:0;}
.ticker-label{background:var(--primary-dark); font-family:var(--font-display); font-weight:800; font-size:13px; padding:0 14px; height:100%; display:flex; align-items:center; text-transform:uppercase; letter-spacing:.03em; flex-shrink:0; z-index:2;}
.ticker-track-wrap{overflow:hidden; flex:1; height:100%; display:flex; align-items:center;}
.ticker-track{display:flex; gap:56px; white-space:nowrap; animation:scroll-left 32s linear infinite; padding-left:24px;}
.ticker-track span{font-size:13.5px; font-weight:500;}
.ticker-track span::before{content:'\25CF'; font-size:6px; margin-right:10px; vertical-align:middle; opacity:.7;}
@keyframes scroll-left{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* =========================================================
   5. MAIN LAYOUT
   ========================================================= */
main{padding:28px 0 0;}
.hero-grid{display:grid; grid-template-columns:1fr; gap:28px;}
@media(min-width:900px){.hero-grid{grid-template-columns:2fr 1fr;}}

.tag{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-display); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:#fff; padding:3px 8px; border-radius:2px;}
.tag.c-primary{background:var(--primary);}
.tag.c-finance{background:var(--c-finance);}
.tag.c-sport{background:var(--c-sport);}
.tag.c-tech{background:var(--c-tech);}
.tag.c-travel{background:var(--c-travel);}
.tag.c-food{background:var(--c-food);}

.photo{position:relative; width:100%; aspect-ratio:16/9; border-radius:2px; overflow:hidden; display:flex; align-items:flex-end; background:linear-gradient(135deg,#2b2b2b,#565656); background-size:cover; background-position:center;}
.photo::after{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);}
.photo .cap{position:relative; z-index:2; padding:10px 12px; font-family:'IBM Plex Mono'; font-size:10.5px; color:rgba(255,255,255,.75);}

.hero-article .photo{aspect-ratio:16/9.4; margin-bottom:16px;}
.hero-article h2{font-size:clamp(26px,4vw,38px); margin:12px 0 10px;}
.hero-article h2 a{color:var(--ink);}
.hero-article p.excerpt{color:var(--body); font-size:15.5px; line-height:1.6; margin-bottom:10px;}
.byline{font-family:'IBM Plex Mono'; font-size:11px; color:var(--muted); display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.empty-state{border:1px dashed var(--line); padding:32px 20px; text-align:center; color:var(--muted); font-size:13.5px;}

.sidebar{border-top:3px solid var(--ink); padding-top:14px;}
.sidebar h3{font-size:20px; text-transform:uppercase; margin-bottom:4px;}
.pop-item{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line);}
.pop-item:last-child{border-bottom:none;}
.pop-num{font-family:var(--font-display); font-weight:900; font-size:30px; color:var(--line); line-height:1; width:32px; flex-shrink:0;}
.pop-item:nth-child(-n+3) .pop-num{color:var(--primary);}
.pop-item h4{font-size:16px; font-weight:600; line-height:1.3; font-family:var(--font-body); margin-bottom:5px;}
.pop-item h4 a{color:var(--ink);}
.pop-item .meta{font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--muted);}

.section{margin-top:40px;}
.section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; border-left:5px solid var(--rail,var(--primary)); padding-left:12px;}
.section-head h3{font-size:24px; text-transform:uppercase;}
.section-head a.more-link{font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--muted); white-space:nowrap;}
.section-head a.more-link:hover{color:var(--ink);}

.card-grid{display:grid; grid-template-columns:1fr; gap:20px;}
@media(min-width:640px){.card-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:980px){.card-grid{grid-template-columns:repeat(4,1fr);}}
.card h4{font-size:17px; font-weight:600; font-family:var(--font-body); line-height:1.32; margin:10px 0 8px;}
.card h4 a{color:var(--ink);}
.card .tag{margin-bottom:0;}
.card .meta{font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--muted); margin-top:4px;}

/* =========================================================
   6. SINGLE / PAGE / ARCHIVE
   ========================================================= */
.content-wrap{padding:36px 0 64px;}
.entry-header{margin-bottom:20px;}
.entry-title{font-size:clamp(28px,4vw,42px); margin:12px 0 10px;}
.entry-meta{font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap;}
.entry-thumb{margin:20px 0; border-radius:2px; overflow:hidden;}
.entry-content{font-size:16px; line-height:1.75; color:var(--body); max-width:760px;}
.entry-content p{margin:0 0 1.3em;}
.entry-content h2,.entry-content h3{margin:1.4em 0 .6em; color:var(--ink);}
.entry-content img{border-radius:2px; margin:1em 0;}
.entry-content blockquote{border-left:4px solid var(--primary); padding:4px 0 4px 18px; margin:1.4em 0; color:var(--muted); font-style:italic;}
.archive-title{font-size:clamp(26px,4vw,36px); border-left:5px solid var(--primary); padding-left:14px; margin-bottom:26px;}
.pagination-nav{display:flex; gap:10px; margin-top:36px; font-family:'IBM Plex Mono'; font-size:12.5px;}
.pagination-nav a,.pagination-nav span{border:1px solid var(--line); padding:8px 12px; border-radius:2px;}
.pagination-nav a:hover{border-color:var(--primary); color:var(--primary);}

/* =========================================================
   7. FOOTER
   ========================================================= */
footer.site-footer{margin-top:64px; background:var(--chrome-bg); color:var(--chrome-text); transition:background .25s ease;}
body.lintas-dark footer.site-footer{background:var(--chrome-bg-dark);}
.site-footer .wrap{padding:40px 20px 24px;}
.foot-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
@media(min-width:700px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr 1fr;}}
.foot-brand{display:flex; align-items:center; gap:8px; margin-bottom:12px;}
.foot-brand img{width:30px; height:30px; object-fit:contain;}
.foot-brand span{font-family:var(--font-display); font-weight:800; font-size:20px;}
.foot-grid p.foot-desc{font-size:12.5px; opacity:.6; line-height:1.6; max-width:280px;}
.foot-grid h5{font-family:var(--font-display); text-transform:uppercase; font-size:13.5px; letter-spacing:.04em; margin-bottom:12px;}
.foot-grid a{display:block; font-size:12.5px; opacity:.65; padding:4px 0; color:var(--chrome-text);}
.foot-grid a:hover{opacity:1;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.15); margin-top:28px; padding-top:16px; font-family:'IBM Plex Mono'; font-size:10.5px; opacity:.55; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none;}
  .dot-live, .btn-live::before{animation:none;}
}