/*
Theme Name: Jelajah Bisnis
Theme URI: https://salamku.pro/nusabisnis/
Author: Jelajah Bisnis
Description: Tema editorial untuk media bisnis, pariwisata, dan ekonomi kreatif. Gaya jurnalistik terinspirasi detikTravel.
Version: 1.0
Text Domain: jelajah-bisnis
*/

/* ============================================
   1. DESIGN TOKENS
============================================ */
:root{
  --c-navy: #16335c;
  --c-navy-deep: #0e2342;
  --c-amber: #f5820d;
  --c-amber-deep: #d96c00;
  --c-sky: #eaf3fb;
  --c-paper: #fbf9f5;
  --c-white: #ffffff;
  --c-ink: #16213a;
  --c-gray: #6b7280;
  --c-gray-light: #9aa3b2;
  --c-line: #e6e3dc;

  --f-display: 'Lora', Georgia, serif;
  --f-body: 'Inter', -apple-system, sans-serif;
  --f-label: 'Poppins', -apple-system, sans-serif;

  --container-max: 1200px;
  --pad-x: 16px;
  --radius-sm: 7px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow-card: 0 1px 3px rgba(14,35,66,.06);
  --shadow-pop: 0 12px 32px rgba(14,35,66,.14);
}
@media(min-width:768px){ :root{ --pad-x: 24px; } }

/* ============================================
   2. RESET & BASE
============================================ */
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{overflow-x:hidden; max-width:100%; scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  font-family:var(--f-body); color:var(--c-ink); background:var(--c-white);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; width:100%; max-width:100vw;
  font-size:15px; line-height:1.5;
}
img{max-width:100%; height:auto; display:block;}
a{text-decoration:none; color:inherit; -webkit-tap-highlight-color:transparent;}
a:visited,a:active,a:focus{color:inherit;}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:none;}
input{font:inherit;}
ul{list-style:none;}
h1,h2,h3,h4,h5{font-family:var(--f-display); line-height:1.2; font-weight:700;}
svg{display:block; flex-shrink:0;}

.wrap{width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--pad-x);}
.eyebrow{font-family:var(--f-label); font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-amber-deep);}

/* ============================================
   3. LOGO
============================================ */
.jb-mark{width:34px; height:34px; flex-shrink:0;}
.jb-mark svg{width:100%; height:100%;}

/* ============================================
   4. TOPBAR
============================================ */
.topbar{background:var(--c-navy-deep); color:#cfdbef;}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:32px; font-size:11px; gap:8px;}
.topbar .date-line{display:flex; align-items:center; gap:6px; color:#cfdbef; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.topbar .dot{width:5px; height:5px; border-radius:50%; background:var(--c-amber); flex-shrink:0;}
.topbar .links{display:none;}
@media(min-width:640px){
  .topbar .wrap{height:34px; font-size:12.5px;}
  .topbar .links{display:flex; gap:16px;}
  .topbar .links a{color:#cfdbef; opacity:.85;}
  .topbar .links a:hover{opacity:1; color:#fff;}
}

/* ============================================
   5. NAVBAR
============================================ */
.navbar{background:var(--c-white); border-bottom:1px solid var(--c-line); position:sticky; top:0; z-index:100;}
.navbar .wrap{display:flex; align-items:center; justify-content:space-between; height:60px; gap:10px;}
.brand{display:flex; align-items:center; gap:9px; min-width:0;}
.brand-text{line-height:1.15; min-width:0;}
.brand-text .name{font-family:var(--f-display); font-weight:700; font-size:17px; color:var(--c-navy-deep); white-space:nowrap;}
.brand-text .tag{font-family:var(--f-label); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-amber-deep); font-weight:600; display:none;}

.nav-links{display:none;}
.nav-actions{display:flex; align-items:center; gap:8px;}
.icon-btn{width:36px; height:36px; border-radius:50%; border:1px solid var(--c-line); display:flex; align-items:center; justify-content:center; color:var(--c-navy); flex-shrink:0;}
.btn-ai{background:var(--c-amber); color:#fff; font-family:var(--f-label); font-weight:600; font-size:12.5px; padding:9px 12px; border-radius:var(--radius-sm); display:flex; align-items:center; gap:6px; box-shadow:0 4px 12px rgba(245,130,13,.28); white-space:nowrap;}
.btn-ai .btn-label{display:none;}
.navbar-ai-btn{display:none;}

.burger{width:36px; height:36px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; flex-shrink:0;}
.burger span{width:19px; height:2px; background:var(--c-navy-deep); border-radius:2px; transition:.25s;}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.burger.is-open span:nth-child(2){opacity:0;}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

@media(min-width:1024px){
  .navbar .wrap{height:78px;}
  .jb-mark{width:40px; height:40px;}
  .brand-text .name{font-size:21px;}
  .brand-text .tag{display:block; margin-top:2px;}
  .nav-links{display:flex; align-items:center; gap:26px;}
  .nav-links a{font-family:var(--f-label); font-size:13.5px; font-weight:500; color:var(--c-navy-deep);}
  .nav-links a:hover{color:var(--c-amber-deep);}
  .btn-ai{padding:10px 18px; font-size:13px; gap:8px;}
  .btn-ai .btn-label{display:inline;}
  .navbar-ai-btn{display:flex;}
  .burger{display:none;}
}

.mobile-menu{position:fixed; inset:0; background:rgba(14,35,66,.5); z-index:200; opacity:0; pointer-events:none; transition:opacity .25s;}
.mobile-menu.is-open{opacity:1; pointer-events:auto;}
.mobile-menu-panel{position:absolute; top:0; right:0; height:100%; width:min(78vw,320px); background:var(--c-white); box-shadow:var(--shadow-pop); padding:20px; padding-top:max(20px, env(safe-area-inset-top)); transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column;}
.mobile-menu.is-open .mobile-menu-panel{transform:translateX(0);}
.mobile-menu-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;}
.mobile-menu-head .jb-mark{width:30px; height:30px;}
.mobile-menu nav{display:flex; flex-direction:column;}
.mobile-menu nav a{padding:14px 4px; font-family:var(--f-label); font-weight:600; font-size:15px; color:var(--c-navy-deep); border-bottom:1px solid var(--c-line); display:flex; align-items:center; justify-content:space-between;}
.mobile-menu .btn-ai{margin-top:20px; justify-content:center; padding:13px;}
.mobile-menu .btn-ai .btn-label{display:inline;}
@media(min-width:1024px){ .mobile-menu{display:none;} }

/* ============================================
   6. HERO
============================================ */
.hero{background:var(--c-white); padding:18px 0 0; position:relative; overflow:hidden; width:100%;}
.hero-grid{display:flex; flex-direction:column; gap:14px; position:relative; z-index:2;}
.hero-main{position:relative; border-radius:var(--radius-md); overflow:hidden; min-height:320px; display:flex; align-items:flex-end; box-shadow:var(--shadow-card); border:1px solid var(--c-line);}
.hero-main img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero-main .scrim{position:absolute; inset:0; background:linear-gradient(0deg, rgba(14,35,66,.95) 0%, rgba(14,35,66,.5) 50%, rgba(14,35,66,.05) 78%);}
.hero-main .content{position:relative; z-index:2; padding:18px; color:#fff; width:100%;}
.pill{display:inline-block; background:var(--c-amber); color:#fff; font-family:var(--f-label); font-weight:600; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:5px 11px; border-radius:5px; margin-bottom:10px;}
.hero-main h2{font-size:21px; line-height:1.25; font-weight:700; color:#fff !important; margin-bottom:10px;}
.hero-meta{display:flex; flex-wrap:wrap; gap:8px; font-size:11.5px; color:#c4d2e8;}

.hero-side{display:grid; grid-template-columns:1fr; gap:12px;}
.hero-card{background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--radius-md); padding:12px; display:flex; gap:11px; cursor:pointer; box-shadow:var(--shadow-card); transition:border-color .2s;}
.hero-card:hover{border-color:var(--c-amber);}
.hero-card img{width:78px; height:64px; object-fit:cover; border-radius:7px; flex-shrink:0;}
.hero-card .pill-sm{font-family:var(--f-label); font-size:9.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--c-amber-deep); margin-bottom:5px; display:block;}
.hero-card h4{color:var(--c-navy-deep) !important; font-size:13px; line-height:1.35; font-weight:600;}
.hero-card .time{color:var(--c-gray-light); font-size:10.5px; margin-top:6px; display:block; font-family:var(--f-body); font-weight:400;}

.ticker-strip{background:var(--c-white); border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); margin-top:16px; padding:9px 0; position:relative; z-index:2; width:100%; overflow:hidden;}
.ticker-strip .wrap{display:flex; align-items:center; gap:10px;}
.ticker-strip .tag{font-family:var(--f-label); font-weight:700; font-size:10px; letter-spacing:.06em; text-transform:uppercase; background:var(--c-amber); color:#fff; padding:4px 9px; border-radius:5px; flex-shrink:0;}
.ticker-strip .items{font-size:11.5px; color:var(--c-navy-deep); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

@media(min-width:768px){
  .hero{padding:28px 0 0;}
  .hero-main{min-height:400px;}
  .hero-main .content{padding:28px;}
  .hero-main h2{font-size:28px;}
  .hero-card img{width:92px; height:78px;}
  .hero-card h4{font-size:14px;}
}
@media(min-width:1024px){
  .hero-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:24px;}
  .hero-main{min-height:440px;}
  .hero-main .content{padding:32px;}
  .hero-main h2{font-size:32px; max-width:540px;}
  .hero-side{gap:16px;}
  .hero-card{padding:16px;}
  .hero-card img{width:100px; height:84px;}
  .hero-card h4{font-size:15px;}
  .ticker-strip{margin-top:28px; padding:11px 0;}
}

/* ============================================
   7. RUBRIK STRIP
============================================ */
.rubrik-strip{background:var(--c-white); border-bottom:1px solid var(--c-line);}
.rubrik-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--c-line);}
.rubrik-item{padding:18px 10px; text-align:center; background:var(--c-white); transition:background .2s;}
.rubrik-item:hover{background:var(--c-sky);}
.rubrik-item .ricon{width:38px; height:38px; margin:0 auto 9px; display:flex; align-items:center; justify-content:center; background:var(--c-sky); border-radius:50%; color:var(--c-navy);}
.rubrik-item:hover .ricon{background:var(--c-amber); color:#fff;}
.rubrik-item h5{font-family:var(--f-label); font-weight:600; font-size:12.5px; color:var(--c-navy-deep); margin-bottom:3px;}
.rubrik-item p{font-size:10.5px; color:var(--c-gray);}
@media(min-width:640px){ .rubrik-grid{grid-template-columns:repeat(3,1fr);} }
@media(min-width:1024px){
  .rubrik-grid{grid-template-columns:repeat(5,1fr);}
  .rubrik-item{padding:28px 18px;}
  .rubrik-item .ricon{width:44px; height:44px;}
  .rubrik-item h5{font-size:14px;}
  .rubrik-item p{font-size:11.5px;}
}

/* ============================================
   8. SECTION PATTERN
============================================ */
.section{padding:36px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px; gap:10px;}
.section-head h3{font-size:20px; font-weight:700; color:var(--c-navy-deep); margin-top:4px;}
.section-head .more{font-family:var(--f-label); font-size:12px; font-weight:600; color:var(--c-amber-deep); display:flex; align-items:center; gap:5px; white-space:nowrap; flex-shrink:0;}
@media(min-width:768px){ .section{padding:52px 0;} .section-head h3{font-size:25px;} }
@media(min-width:1024px){ .section{padding:64px 0;} .section-head h3{font-size:28px;} .section-head .more{font-size:13px;} }

/* ============================================
   9. NEWS GRID
============================================ */
.news-grid{display:grid; grid-template-columns:1fr; gap:22px;}
.news-card{cursor:pointer;}
.news-card .thumb{border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:16/10; margin-bottom:12px; background:var(--c-sky);}
.news-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .4s;}
.news-card:hover .thumb img{transform:scale(1.05);}
.news-card .cat{font-family:var(--f-label); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--c-amber-deep); margin-bottom:7px; display:block;}
.news-card h4{font-size:16.5px; line-height:1.35; font-weight:600; color:var(--c-navy-deep); margin-bottom:8px;}
.news-card:hover h4{color:var(--c-amber-deep);}
.news-card .excerpt{font-size:13px; color:var(--c-gray); line-height:1.55; margin-bottom:10px;}
.news-card .time{font-size:11px; color:var(--c-gray-light);}
@media(min-width:640px){ .news-grid{grid-template-columns:1fr 1fr;} }
@media(min-width:1024px){ .news-grid{grid-template-columns:repeat(3,1fr); gap:28px;} .news-card h4{font-size:18.5px;} .news-card .excerpt{font-size:13.5px;} }

/* ============================================
   10. AI BANNER
============================================ */
.ai-banner{background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--radius-lg); padding:28px 18px; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:24px; width:100%; min-width:0; box-shadow:var(--shadow-card);}
.ai-banner::before{content:""; position:absolute; right:-100px; top:-60px; width:280px; height:280px; border:1px solid var(--c-sky); border-radius:50%; pointer-events:none;}
.ai-banner .eyebrow{color:var(--c-amber-deep);}
.ai-banner h3{color:var(--c-navy-deep) !important; font-size:21px; line-height:1.3; margin:10px 0 12px;}
.ai-banner p{color:var(--c-gray); font-size:13.5px; line-height:1.6; margin-bottom:18px;}
.ai-tool-list{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; position:relative; z-index:2; min-width:0;}
.ai-tool-list span{font-family:var(--f-label); font-size:11px; font-weight:500; color:var(--c-navy-deep); background:var(--c-sky); border:1px solid #dbe9f8; padding:6px 11px; border-radius:20px; white-space:normal; max-width:100%;}
.btn-amber-lg{background:var(--c-amber); color:#fff; font-family:var(--f-label); font-weight:600; font-size:13.5px; padding:13px 22px; border-radius:var(--radius-sm); display:inline-flex; align-items:center; gap:8px; box-shadow:0 8px 20px rgba(245,130,13,.25); width:fit-content; position:relative; z-index:2;}
.ai-visual{display:flex; justify-content:center; position:relative; z-index:2;}
.ai-orb{width:140px; height:140px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--c-sky), #fff 70%); display:flex; align-items:center; justify-content:center; border:1px solid var(--c-line);}
.ai-orb .jb-mark{width:54px; height:54px;}
@media(min-width:1024px){
  .ai-banner{padding:56px 50px; flex-direction:row; align-items:center; gap:30px;}
  .ai-banner > div:first-child{flex:1.2;}
  .ai-banner h3{font-size:32px; max-width:480px;}
  .ai-banner p{font-size:14.5px; max-width:460px;}
  .ai-visual{flex:.8;}
  .ai-orb{width:220px; height:220px;}
  .ai-orb .jb-mark{width:84px; height:84px;}
}

/* ============================================
   11. SPOTLIGHT
============================================ */
.spotlight{display:flex; flex-direction:column; border-radius:var(--radius-md); overflow:hidden; background:var(--c-white); box-shadow:var(--shadow-card); border:1px solid var(--c-line);}
.spotlight .img-side{position:relative; min-height:220px; background:var(--c-sky);}
.spotlight .img-side img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.spotlight .text-side{padding:22px;}
.spotlight .pill{background:var(--c-sky); color:var(--c-navy-deep);}
.spotlight h3{font-size:20px; line-height:1.3; color:var(--c-navy-deep); margin-bottom:12px;}
.spotlight p{font-size:13.5px; color:var(--c-gray); line-height:1.6; margin-bottom:18px;}
.spotlight .stats{display:flex; flex-wrap:wrap; gap:18px; margin-bottom:18px;}
.spotlight .stat b{font-family:var(--f-display); font-size:19px; color:var(--c-amber-deep); display:block;}
.spotlight .stat span{font-size:10.5px; color:var(--c-gray);}
.link-arrow{font-family:var(--f-label); font-weight:600; font-size:13px; color:var(--c-navy-deep); display:inline-flex; align-items:center; gap:7px;}
@media(min-width:1024px){
  .spotlight{flex-direction:row;}
  .spotlight .img-side{flex:1; min-height:420px;}
  .spotlight .text-side{flex:1; padding:48px; display:flex; flex-direction:column; justify-content:center;}
  .spotlight h3{font-size:27px;}
  .spotlight p{font-size:14.5px;}
  .spotlight .stat b{font-size:24px;}
}

/* ============================================
   12. EKRAF SCROLL
============================================ */
.ekraf-scroll{display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; margin-inline:calc(var(--pad-x) * -1); padding-inline:var(--pad-x); scrollbar-width:none;}
.ekraf-scroll::-webkit-scrollbar{display:none;}
.ekraf-card{flex:0 0 220px; background:var(--c-white); border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--c-line); cursor:pointer;}
.ekraf-card .thumb{aspect-ratio:4/3; overflow:hidden; background:var(--c-sky);}
.ekraf-card .thumb img{width:100%; height:100%; object-fit:cover;}
.ekraf-card .body{padding:13px;}
.ekraf-card .cat{font-family:var(--f-label); font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--c-amber-deep);}
.ekraf-card h5{font-size:13px; margin:7px 0; color:var(--c-navy-deep); line-height:1.35; font-weight:600;}
.ekraf-card .loc{font-size:10.5px; color:var(--c-gray); display:flex; align-items:center; gap:5px;}
@media(min-width:1024px){ .ekraf-card{flex:0 0 280px;} .ekraf-card h5{font-size:15.5px;} }

/* ============================================
   13. TOKOH
============================================ */
.tokoh-grid{display:grid; grid-template-columns:1fr; gap:16px;}
.tokoh-card{position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:3/3; cursor:pointer;}
.tokoh-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.tokoh-card .scrim{position:absolute; inset:0; background:linear-gradient(0deg, rgba(14,35,66,.93) 15%, transparent 60%);}
.tokoh-card .body{position:absolute; left:0; right:0; bottom:0; padding:18px; color:#fff;}
.tokoh-card .role{font-family:var(--f-label); font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--c-amber); margin-bottom:6px; display:block;}
.tokoh-card h5{font-size:16px; margin-bottom:7px; color:#fff !important;}
.tokoh-card .quote{font-size:11.5px; color:#c9d4e6; line-height:1.5; font-style:italic;}
@media(min-width:640px){ .tokoh-grid{grid-template-columns:repeat(3,1fr);} }

/* ============================================
   14. NEWSLETTER
============================================ */
.newsletter{background:var(--c-navy-deep); border-radius:var(--radius-lg); padding:32px 20px; text-align:center; position:relative; overflow:hidden;}
.newsletter::before{content:""; position:absolute; left:-60px; bottom:-80px; width:240px; height:240px; border:1px solid rgba(245,130,13,.25); border-radius:50%; pointer-events:none;}
.newsletter .eyebrow{color:var(--c-amber); opacity:1;}
.newsletter h3{color:#fff !important; font-size:22px; margin:12px 0 8px;}
.newsletter p{color:#c4d2e8; font-size:13.5px; margin-bottom:22px;}
.newsletter-form{display:flex; flex-direction:column; gap:9px; max-width:420px; margin:0 auto; position:relative; z-index:2;}
.newsletter-form input{border:none; border-radius:var(--radius-sm); padding:13px 16px; font-family:var(--f-body); font-size:14px; outline:none; width:100%;}
.newsletter-form button{background:var(--c-amber); color:#fff; border-radius:var(--radius-sm); padding:13px 22px; font-family:var(--f-label); font-weight:600; font-size:13px;}
@media(min-width:640px){
  .newsletter{padding:54px 60px;}
  .newsletter h3{font-size:30px;}
  .newsletter-form{flex-direction:row;}
  .newsletter-form input{flex:1;}
  .newsletter-form button{white-space:nowrap;}
}

/* ============================================
   15. FOOTER
============================================ */
footer{background:var(--c-navy-deep); color:#aebcd6; padding:40px 0 0; margin-top:20px;}
.footer-grid{display:grid; grid-template-columns:1fr; gap:28px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.08);}
.footer-brand .brand{margin-bottom:14px;}
.footer-brand .brand-text .name{color:#fff;}
.footer-brand p{font-size:12.5px; line-height:1.7; max-width:280px; color:#8fa1c2;}
.footer-col h6{font-family:var(--f-label); font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#fff; margin-bottom:14px;}
.footer-col a{display:block; font-size:13px; margin-bottom:10px; color:#aebcd6;}
.footer-col a:hover{color:var(--c-amber);}
.footer-bottom{display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; padding:20px 0; font-size:11.5px; color:#7c8caa;}
.footer-bottom .tagline{font-family:var(--f-display); font-style:italic; color:#c9d4e6;}
.social-row{display:flex; gap:9px;}
.social-row a{width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; color:#aebcd6; font-size:11px;}
.social-row a:hover{background:var(--c-amber); border-color:var(--c-amber); color:#fff;}
@media(min-width:768px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;} .footer-bottom{flex-direction:row; justify-content:space-between;} }

/* ============================================
   16. HALAMAN ARTIKEL (single.php)
============================================ */
.article-hero{background:var(--c-white); padding:18px 0 0;}
.breadcrumb{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--c-gray); margin-bottom:14px; flex-wrap:wrap;}
.breadcrumb a{color:var(--c-gray);}
.breadcrumb a:hover{color:var(--c-amber-deep);}
.article-header{padding-bottom:16px; text-align:left;}
.article-header .pill{display:none;}
.article-header h1{color:var(--c-navy-deep) !important; font-size:22px; line-height:1.32; margin:0 0 14px;}
.article-meta{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12.5px; color:var(--c-gray);}
.article-meta .author-name{font-weight:600; color:var(--c-navy-deep);}
.article-meta .source{color:var(--c-amber-deep); font-weight:600;}
.article-date{font-size:12px; color:var(--c-gray-light); margin-top:8px;}
.author-chip{display:none;}
.article-cover{aspect-ratio:16/10; overflow:hidden; margin-top:18px; border-radius:var(--radius-sm); background:var(--c-sky);}
.article-cover img{width:100%; height:100%; object-fit:cover;}
.article-caption{font-size:11.5px; color:var(--c-gray); padding:8px 0 0; text-align:left;}

.article-body-wrap{padding:24px 0 0; display:flex; flex-direction:column; gap:28px; align-items:flex-start;}
.article-body{font-family:var(--f-body); font-size:15.5px; line-height:1.85; color:#2b3650; width:100%;}
.article-body p{margin-bottom:18px;}
.article-body p:first-of-type::first-letter{font-weight:700;}
.article-lead{font-weight:700; color:var(--c-ink);}
.article-body h2{font-size:19px; color:var(--c-navy-deep); margin:26px 0 12px;}
.article-body blockquote{border-left:3px solid var(--c-amber); padding:4px 0 4px 16px; margin:22px 0; font-family:var(--f-display); font-style:italic; font-size:17px; color:var(--c-navy-deep);}
.article-share{display:flex; gap:8px; margin:24px 0; flex-wrap:wrap;}
.article-share a{width:36px; height:36px; border-radius:50%; border:1px solid var(--c-line); display:flex; align-items:center; justify-content:center; color:var(--c-navy); font-size:13px;}
.article-share a:hover{background:var(--c-amber); border-color:var(--c-amber); color:#fff;}

.article-sidebar h6{font-family:var(--f-label); font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--c-navy-deep); margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid var(--c-amber); display:inline-block;}
.related-item{display:flex; gap:11px; padding:12px 0; border-bottom:1px solid var(--c-line); cursor:pointer;}
.related-item:first-of-type{padding-top:0;}
.related-item img{width:72px; height:62px; object-fit:cover; border-radius:6px; flex-shrink:0; background:var(--c-sky);}
.related-item h6{font-size:12.5px; font-weight:600; color:var(--c-navy-deep); line-height:1.4; margin:0; padding:0; border:none; display:block; text-transform:none; letter-spacing:0; font-family:var(--f-body);}
.related-item:hover h6{color:var(--c-amber-deep);}
.related-item .time{font-size:10.5px; color:var(--c-gray-light); margin-top:5px; display:block;}

.back-to-list{display:inline-flex; align-items:center; gap:7px; font-family:var(--f-label); font-weight:600; font-size:12.5px; color:var(--c-navy-deep); padding:9px 0; margin-bottom:10px; cursor:pointer;}

@media(min-width:1024px){
  .article-hero{padding:0;}
  .article-header{padding-bottom:20px;}
  .article-header h1{font-size:32px;}
  .article-cover{margin-top:20px;}
  .article-body-wrap{padding:40px 0 0; flex-direction:row; gap:56px; align-items:flex-start;}
  .article-body{flex:1.7; font-size:16.5px;}
  .article-sidebar{flex:1; max-width:300px; padding-top:0;}
}

/* Utility */
.skip-mobile{display:none;}
@media(min-width:1024px){ .skip-mobile{display:block;} }


/* === PROFILINK DASHBOARD MASTER ADMIN === */
/* Pakai design token yang sudah ada di tema (var(--c-navy), var(--c-amber), dst)
   supaya dashboard nyatu sama identitas visual situs utama */

.pf-dashboard-body {
    background: var(--c-sky);
    margin: 0;
}

.pf-dashboard-wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 16px 16px 90px;
    font-family: var(--f-body);
}
.pf-dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}
.pf-dash-logo {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--c-navy-deep);
}
.pf-dash-header-right { display: flex; align-items: center; gap: 14px; }
.pf-dash-icon-bell { font-size: 18px; color: var(--c-navy); }
.pf-dash-avatar img { border-radius: 50%; }

.pf-dash-greeting {
    background: linear-gradient(135deg, var(--c-sky), #ffffff);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin: 16px 0;
    border: 1px solid var(--c-line);
}
.pf-dash-greeting-time { font-size: 14px; color: var(--c-gray); margin: 0; }
.pf-dash-greeting-name { font-family: var(--f-display); font-size: 24px; font-weight: 700; color: var(--c-navy-deep); margin: 2px 0; }
.pf-dash-greeting-sub { font-size: 14px; color: var(--c-gray); margin: 0; }

.pf-dash-bottomnav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0;
    box-shadow: 0 -2px 10px rgba(14,35,66,0.08);
    z-index: 999;
}
.pf-dash-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    color: var(--c-gray-light);
    text-decoration: none;
    gap: 2px;
    font-family: var(--f-label);
}
.pf-dash-nav-item.active { color: var(--c-navy-deep); font-weight: 600; }
.pf-dash-nav-fab {
    background: var(--c-amber);
    color: #fff !important;
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-top: -24px;
    font-size: 18px;
    box-shadow: 0 8px 20px rgba(245,130,13,0.35);
}

/* --- Kartu Buat Konten Baru --- */
.pf-dash-section-title {
    font-family: var(--f-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--c-navy-deep);
    margin: 20px 0 12px;
}
.pf-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.pf-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--c-line);
    background: #fff;
    transition: transform .15s ease, box-shadow .15s ease;
}
.pf-card:active { transform: scale(0.97); }
.pf-card-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    margin-bottom: 12px;
}
.pf-card-title {
    font-family: var(--f-label);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--c-navy-deep);
    margin-bottom: 2px;
}
.pf-card-sub {
    font-size: 11px;
    color: var(--c-gray);
}

/* Varian warna kartu */
.pf-card-orange .pf-card-icon { background: #FDEEE0; color: var(--c-amber-deep); }
.pf-card-green  .pf-card-icon { background: #E4F3E9; color: #2F9E58; }
.pf-card-red    .pf-card-icon { background: #FBE7E7; color: #D6483F; }
.pf-card-blue   .pf-card-icon { background: #E6EEFA; color: var(--c-navy); }
.pf-card-teal   .pf-card-icon { background: #DFF3F1; color: #1E8A80; }
.pf-card-purple .pf-card-icon { background: #EEE6F8; color: #7A4FC0; }
.pf-card-yellow .pf-card-icon { background: #FDF3D9; color: #B8860B; }
.pf-card-navy   .pf-card-icon { background: var(--c-sky); color: var(--c-navy-deep); }
.pf-card-slate  .pf-card-icon { background: #ECEDF0; color: #4B5563; }

@media (min-width: 480px) {
    .pf-card-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* --- Halaman Entity Ringkasan --- */
.pf-dash-back {
    color: var(--c-navy-deep);
    font-size: 16px;
    margin-right: 10px;
}
.pf-filter-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 14px;
    scrollbar-width: none;
}
.pf-filter-tabs::-webkit-scrollbar { display: none; }
.pf-filter-btn {
    font-family: var(--f-label);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-gray);
    background: #fff;
    border: 1px solid var(--c-line);
    padding: 8px 16px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.pf-filter-btn.active {
    background: var(--c-navy-deep);
    color: #fff;
    border-color: var(--c-navy-deep);
}

.pf-entity-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px;
}
.pf-entity-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-md);
    padding: 12px;
}
.pf-entity-thumb {
    width: 52px; height: 52px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--c-sky);
    display: flex; align-items: center; justify-content: center;
}
.pf-entity-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-entity-thumb-fallback {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--c-navy);
}
.pf-entity-info { flex: 1; min-width: 0; }
.pf-entity-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.pf-pill {
    font-family: var(--f-label);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
}
.pf-pill-orange { background: #FDEEE0; color: var(--c-amber-deep); }
.pf-pill-green  { background: #E4F3E9; color: #2F9E58; }
.pf-pill-red    { background: #FBE7E7; color: #D6483F; }
.pf-pill-navy   { background: var(--c-sky); color: var(--c-navy-deep); }

.pf-entity-status {
    font-size: 10px;
    font-weight: 600;
    font-family: var(--f-label);
    white-space: nowrap;
}
.pf-status-ok   { color: #2F9E58; }
.pf-status-warn { color: var(--c-amber-deep); }

.pf-entity-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--c-navy-deep);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pf-entity-meta {
    font-size: 10.5px;
    color: var(--c-gray-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pf-entity-arrow {
    color: var(--c-gray-light);
    font-size: 12px;
    flex-shrink: 0;
}
.pf-entity-empty {
    text-align: center;
    color: var(--c-gray);
    padding: 40px 0;
    font-size: 13px;
}

/* --- Halaman Akun --- */
.pf-akun-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 0 20px;
}
.pf-akun-avatar img {
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(14,35,66,0.12);
}
.pf-akun-name {
    font-family: var(--f-display);
    font-size: 19px;
    color: var(--c-navy-deep);
    margin: 12px 0 4px;
}
.pf-akun-role {
    font-family: var(--f-label);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--c-amber);
    padding: 3px 12px;
    border-radius: 20px;
    margin-bottom: 8px;
}
.pf-akun-email {
    font-size: 12.5px;
    color: var(--c-gray);
}

.pf-akun-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.pf-akun-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-md);
    padding: 14px;
}
.pf-akun-menu-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--c-sky);
    color: var(--c-navy);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.pf-akun-menu-text {
    flex: 1;
    font-family: var(--f-label);
    font-size: 13px;
    font-weight: 500;
    color: var(--c-navy-deep);
}

.pf-akun-logout-wrap { padding: 8px 0 20px; }
.pf-akun-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border-radius: var(--radius-md);
    background: #FBE7E7;
    color: #D6483F;
    font-family: var(--f-label);
    font-weight: 600;
    font-size: 13.5px;
}

/* =========================================================
   WIZARD TULIS BERITA
   Tempel blok ini di bagian paling bawah style.css
   Menggunakan token yang sudah ada: --c-navy, --c-navy-deep,
   --c-amber, --c-amber-deep, --c-sky, --c-gray, --c-gray-light,
   --c-line, --f-display, --f-body, --f-label, --radius-md, --radius-lg
   ========================================================= */

.wizard-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: 96px; /* ruang untuk bottom nav */
  font-family: var(--f-body);
  color: var(--c-navy-deep);
}

/* Top bar */
.wizard-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid var(--c-line);
  z-index: 20;
}
.wizard-back {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--c-navy);
  padding: 6px;
  line-height: 1;
}
.wizard-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--c-navy-deep);
  flex: 1;
}
.wizard-step-label {
  font-family: var(--f-label);
  font-size: 12px;
  color: var(--c-gray);
}

/* Progress bar */
.wizard-progress {
  height: 4px;
  background: var(--c-gray-light);
}
.wizard-progress-bar {
  height: 100%;
  background: var(--c-amber);
  transition: width 0.25s ease;
}

/* Step sections */
.wizard-form {
  padding: 20px 16px 8px;
}
.wizard-step {
  display: none;
  animation: wizardFadeIn 0.2s ease;
}
.wizard-step.is-active {
  display: block;
}
@keyframes wizardFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wizard-step-title {
  font-family: var(--f-display);
  font-size: 20px;
  color: var(--c-navy-deep);
  margin-bottom: 6px;
}
.wizard-step-desc {
  font-size: 14px;
  color: var(--c-gray);
  margin-bottom: 18px;
}

/* Choice cards (Step 1) */
.wizard-choice-card {
  display: block;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wizard-choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.wizard-choice-content {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wizard-choice-content i {
  font-size: 20px;
  color: var(--c-amber-deep);
  width: 28px;
  text-align: center;
}
.wizard-choice-content strong {
  display: block;
  font-size: 15px;
  color: var(--c-navy-deep);
}
.wizard-choice-content span {
  display: block;
  font-size: 13px;
  color: var(--c-gray);
  margin-top: 2px;
}
.wizard-choice-card:has(input:checked) {
  border-color: var(--c-amber);
  background: rgba(217, 119, 87, 0.06);
}

/* Search box (Step 2) */
.wizard-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.wizard-search-box i {
  color: var(--c-gray);
}
.wizard-search-box input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 14px;
  font-family: var(--f-body);
}
.wizard-review-card {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: 16px;
  min-height: 60px;
}
.wizard-char-counter {
  display: block;
  text-align: right;
  font-size: 12px;
  color: var(--c-gray);
  margin-top: 4px;
}
.wizard-review-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.wizard-review-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}
.wizard-review-header > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.wizard-review-title {
  display: block;
  font-family: var(--f-display);
  font-size: 15px;
  color: var(--c-navy-deep);
  line-height: 1.3;
}
.wizard-review-cat {
  display: inline-block;
  width: fit-content;
  font-size: 11px;
  color: var(--c-amber-deep);
  background: rgba(217, 119, 87, 0.1);
  border-radius: 4px;
  padding: 2px 6px;
}
.wizard-review-snippet {
  font-size: 13px;
  color: var(--c-gray);
  line-height: 1.5;
}
.wizard-review-caption {
  font-size: 12px;
  font-style: italic;
  color: var(--c-gray);
  margin: 0 0 8px;
}
.wizard-review-caption i {
  color: var(--c-amber-deep);
  margin-right: 4px;
}
.wizard-review-entity {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px dashed var(--c-line);
  margin-top: 12px;
  padding-top: 12px;
}
.wizard-placeholder-note {
  font-size: 13px;
  color: var(--c-gray);
  text-align: center;
  margin: 0;
}

/* Hasil pencarian entitas */
.wizard-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.wizard-result-item:hover {
  border-color: var(--c-amber);
}
.wizard-result-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--c-gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.wizard-result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wizard-result-thumb i {
  color: var(--c-amber-deep);
  font-size: 16px;
}
.wizard-result-thumb-lg {
  width: 56px;
  height: 56px;
}
.wizard-result-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wizard-result-info strong {
  font-size: 14px;
  color: var(--c-navy-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wizard-result-meta {
  font-size: 12px;
  color: var(--c-gray);
}
.wizard-result-address {
  font-size: 12px;
  color: var(--c-gray);
  margin-top: 4px;
}
.wizard-result-address i {
  color: var(--c-amber-deep);
  margin-right: 4px;
}

/* Kartu preview entitas terpilih */
.wizard-entity-preview {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--c-amber);
  background: rgba(217, 119, 87, 0.06);
  border-radius: var(--radius-lg);
  padding: 14px;
  position: relative;
}
.wizard-entity-preview-clear {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: none;
  color: var(--c-gray);
  font-size: 16px;
  padding: 4px;
}
.wizard-entity-preview-body {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  padding-right: 20px;
}

/* Fields (Step 3, 5) */
.wizard-field-label {
  display: block;
  font-family: var(--f-label);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-gray);
  margin: 16px 0 6px;
}
.wizard-input,
.wizard-textarea {
  width: 100%;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--f-body);
  color: var(--c-navy-deep);
  resize: vertical;
}
.wizard-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-sky);
  border: none;
  border-radius: var(--radius-md);
  padding: 8px 14px;
  font-size: 13px;
  color: var(--c-navy-deep);
  margin-top: 10px;
}

/* wp_editor() wrapper — Step 3 */
.wizard-editor-wrap {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.wizard-editor-wrap .wp-editor-tabs {
  padding: 0 8px;
}
.wizard-editor-wrap .wp-editor-area {
  font-family: var(--f-body);
  border: none;
}

/* Media (Step 4) */
.wizard-media-upload {
  border: 2px dashed var(--c-line);
  border-radius: var(--radius-lg);
  padding: 32px 16px;
  text-align: center;
  color: var(--c-gray);
  cursor: pointer;
  overflow: hidden;
}
.wizard-media-upload i {
  font-size: 24px;
  display: block;
  margin-bottom: 8px;
  color: var(--c-amber-deep);
}
.wizard-media-upload.has-image {
  padding: 0;
  border-style: solid;
}
.wizard-media-upload.has-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.wizard-media-recent {
  margin-top: 20px;
}
.wizard-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.wizard-media-grid-item {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
}
.wizard-media-grid-item:hover {
  border-color: var(--c-amber);
}
.wizard-media-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bottom fixed nav */
.wizard-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid var(--c-line);
  z-index: 30;
}
.wizard-btn-primary,
.wizard-btn-secondary {
  flex: 1;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--f-body);
}
.wizard-btn-primary {
  background: var(--c-amber);
  color: #fff;
}
.wizard-btn-secondary {
  background: var(--c-gray-light);
  color: var(--c-navy-deep);
}
.wizard-btn-final-group {
  display: flex;
  gap: 10px;
  flex: 1;
}