/*
Theme Name: Gunungkidul Update
Description: Theme kustom portal berita gunungkidulupdate.com — hand-coded, ringan, mobile-first. Layout mosaik blok.
Version: 1.0.0
Requires PHP: 8.1
Author: GOGOV
Text Domain: gku
*/

/* Font lokal: Poppins (assets/fonts). */
@font-face{font-family:"Poppins";src:url(assets/fonts/poppins-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url(assets/fonts/poppins-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Poppins";src:url(assets/fonts/poppins-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --laut:#2A6F97; --terakota:#B5532F; --batu:#8C8778; --krem:#F7F1E8;
  --arang:#2B211C; --garis:#D9CBB8; --putih:#fff;
  --serif:"Poppins",system-ui,sans-serif;
  --sans:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1180px; --gap:8px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#F7F1E8 url(assets/img/gunung.svg) center bottom/100% auto no-repeat fixed;color:var(--arang);font:16px/1.6 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:var(--laut)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--terakota);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:#fff;padding:8px;z-index:99}
h1,h2,h3{font-family:var(--serif);line-height:1.25;margin:0 0 .5em}

/* Topbar */
.topbar{background:#fff;border-bottom:1px solid var(--garis);font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px}
.social{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.social a{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 8px;border:1px solid var(--garis);color:var(--arang);text-decoration:none;font-size:12px;font-weight:600}
.social a:hover{background:var(--laut);color:#fff;border-color:var(--laut)}
.search-form{display:flex}
.search-form input{border:1px solid var(--garis);padding:6px 10px;font:inherit;width:170px;background:#fff}
.search-form button{border:0;background:var(--terakota);color:#fff;padding:0 12px;cursor:pointer;font:inherit}

/* Brand */
.brand{background:#fff}
.brand .wrap{padding-top:28px;padding-bottom:28px;display:flex;align-items:center;gap:14px}
.logo-mark{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:34px;height:34px}
.logo-mark i{background:var(--arang)}.logo-mark i:nth-child(2){background:var(--terakota)}.logo-mark i:nth-child(3){background:var(--laut)}
.site-title{font:700 clamp(24px,5vw,38px)/1 var(--serif);color:var(--arang);text-decoration:none;letter-spacing:-.5px}
.site-title span{font-weight:400;color:var(--terakota)}
.tagline{margin:4px 0 0;color:var(--batu);font-size:14px}

/* Nav */
.nav{background:var(--laut);position:sticky;top:0;z-index:50}
.nav .wrap{display:flex;align-items:center}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.nav li a{display:block;color:#fff;text-decoration:none;padding:15px 18px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;border-right:1px solid rgba(255,255,255,.18)}
.nav li a:hover,.nav .current-menu-item>a,.nav .current-cat>a{background:var(--arang)}
.nav-toggle{display:none;background:none;border:0;color:#fff;font:600 14px var(--sans);padding:14px 0;cursor:pointer}
@media (max-width:820px){
  .nav-toggle{display:block}
  .nav ul{display:none;flex-direction:column;width:100%}
  .nav.open ul{display:flex}
  .nav .wrap{flex-wrap:wrap}
  .nav li a{border-right:0;border-top:1px solid rgba(255,255,255,.18)}
  .search-form input{width:120px}
}

/* Badges */
.badges{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.badge{display:inline-block;font:600 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.4px;padding:5px 7px;background:var(--terakota);color:#fff;text-decoration:none}
.badge.wil{background:var(--laut)}
.meta{font-size:12px;color:var(--batu)}
.meta time{font-weight:600}

/* Mosaik (layout blok) */
.mosaic{display:grid;gap:var(--gap);grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;grid-auto-flow:dense;padding:var(--gap) 0}
.tile{position:relative;overflow:hidden;background:linear-gradient(135deg,#5d5649,#2B211C);color:#fff}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile.tall{grid-row:span 2}
.tile.wide{grid-column:span 2}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .3s}
.tile:hover img{filter:grayscale(1)}
.tile .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 13px var(--serif);color:rgba(255,255,255,.25);text-transform:uppercase;letter-spacing:2px}
.tile .cap{position:absolute;left:12px;bottom:12px;right:12px;max-width:300px;background:rgba(43,33,28,.88);padding:12px 14px}
.tile .cap h2,.tile .cap h3{font-size:15px;margin:0 0 6px}
.tile.big .cap h2{font-size:clamp(17px,2.2vw,22px)}
.tile .cap a{color:#fff;text-decoration:none}
.tile .cap a::after{content:"";position:absolute;inset:0}
.tile .cap .meta{color:#d9cbb8}
.tile .cap p{margin:4px 0 0;font-size:12px;color:#e9e1d4;display:none}
.tile.big .cap p,.tile.tall .cap p{display:block}
.tile .score{position:absolute;top:12px;right:12px;background:var(--terakota);color:#fff;font:700 12px var(--sans);padding:6px 8px;z-index:1}
.tile.quote{background:var(--terakota);padding:20px;display:flex;flex-direction:column;justify-content:space-between}
.tile.quote blockquote{margin:0;font:700 16px/1.45 var(--serif)}
.tile.quote cite{font-size:12px;font-style:normal;align-self:flex-end}
.tile.brandbox{background:var(--arang);padding:20px}
.tile.brandbox strong{display:block;font:700 22px/1 var(--serif);text-transform:uppercase}
.tile.brandbox p{font-size:13px;color:var(--garis)}
@media (max-width:900px){.mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}}
@media (max-width:520px){.mosaic{grid-template-columns:1fr;grid-auto-rows:230px}.tile.big,.tile.wide{grid-column:span 1}.tile.big{grid-row:span 1}.tile.tall{grid-row:span 1}}

/* Section */
.section{padding:28px 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:2px solid var(--arang);margin-bottom:16px}
.sec-head h2{font-size:20px;margin:0;padding-bottom:6px}
.sec-head a{font-size:13px;font-weight:600;text-decoration:none}

/* Strip horizontal (Efek DNA: Scroll Horizontal) */
.hstrip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.hstrip>*{scroll-snap-align:start}
.strip-nav{display:flex;gap:6px}
.strip-nav button{border:1px solid var(--arang);background:none;width:32px;height:32px;cursor:pointer;font-size:16px}
.strip-nav button:hover{background:var(--arang);color:#fff}

/* Card */
.card{background:#fff;border:1px solid var(--garis);display:flex;flex-direction:column}
.card .thumb{aspect-ratio:16/10;background:linear-gradient(135deg,var(--batu),var(--arang));overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .body{padding:14px}
.card h3{font-size:16px;margin:0 0 6px}
.card h3 a{color:var(--arang);text-decoration:none}
.card h3 a:hover{color:var(--laut)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

/* Rubrik Budaya */
.budaya{background:#efe4d4;border-top:4px solid var(--terakota)}
.budaya .sec-head{border-color:var(--terakota)}
.budaya .sec-head h2{color:var(--terakota)}

/* Kapanewon */
.kapanewon{display:flex;flex-wrap:wrap;gap:8px}
.kapanewon a{border:1px solid var(--garis);background:#fff;padding:10px 14px;color:var(--arang);text-decoration:none;font-weight:600;font-size:14px}
.kapanewon a:hover{background:var(--laut);border-color:var(--laut);color:#fff}
.kapanewon small{color:var(--batu);font-weight:400}

.loadmore{display:block;width:100%;background:var(--terakota);color:#fff;text-align:center;padding:16px;font:600 13px var(--sans);text-transform:uppercase;letter-spacing:.6px;text-decoration:none;border:0;cursor:pointer}
.loadmore:hover{background:var(--arang)}

/* Archive / list */
.archive-head{padding:28px 0 8px}
.archive-head h1{font-size:clamp(24px,4vw,34px)}
.archive-head .desc{color:#5b4d44;max-width:720px}
.pagination{display:flex;gap:6px;justify-content:center;margin:24px 0}
.pagination .page-numbers{padding:8px 12px;border:1px solid var(--garis);background:#fff;text-decoration:none;color:var(--arang)}
.pagination .current{background:var(--laut);color:#fff;border-color:var(--laut)}

/* Single */
.layout{display:grid;gap:32px;grid-template-columns:minmax(0,1fr);padding-top:28px;padding-bottom:28px}
.layout>*,.mini>div{min-width:0}
.article figure img{width:100%;height:auto}
@media (min-width:980px){.layout{grid-template-columns:minmax(0,1fr) 320px}}
.article h1{font-size:clamp(26px,4.2vw,40px)}
.article .meta{font-size:14px;display:flex;flex-wrap:wrap;gap:4px 14px;margin-bottom:18px}
.article figure{margin:0 0 22px}
.article figcaption{font-size:13px;color:var(--batu);margin-top:6px}
.entry{font-size:18px;line-height:1.8;max-width:720px}
.entry h2{font-size:24px;margin-top:1.6em}
.entry blockquote{border-left:4px solid var(--terakota);margin:1.5em 0;padding:4px 18px;font-family:var(--serif);font-size:19px}
.share{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0;align-items:center}
.share a,.share button{padding:9px 14px;font:600 13px var(--sans);color:#fff;text-decoration:none;border:0;cursor:pointer}
.share .wa{background:#1f7a4d}.share .fb{background:#2d5a9e}.share .x{background:#111}.share button{background:var(--batu);color:#fff}
.sidebar .widget{background:#fff;border:1px solid var(--garis);padding:16px;margin-bottom:20px}
.mini{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--garis)}
.mini:last-child{border:0}
.mini .t{flex:0 0 70px;height:56px;background:linear-gradient(135deg,var(--batu),var(--arang));overflow:hidden}
.mini .t img{width:100%;height:100%;object-fit:cover}
.mini a{color:var(--arang);text-decoration:none;font-weight:600;font-size:14px;line-height:1.35}
.page-body{max-width:760px;padding-top:28px;padding-bottom:28px}

/* Footer */
.site-footer{background:var(--arang);color:#cfc3b3;margin-top:0}
.foot-cols{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding:40px 16px}
.foot-cols h2{font:600 14px var(--sans);text-transform:uppercase;letter-spacing:.6px;color:#fff;border-bottom:1px solid #4a3c33;padding-bottom:10px}
.foot-cols a{color:#fff;text-decoration:none}
.foot-cols ul{list-style:none;margin:0;padding:0}
.foot-cols li{padding:7px 0;border-bottom:1px solid #3d3129;font-size:14px}
.foot-cols .date{display:inline-block;background:var(--terakota);color:#fff;font-size:11px;padding:2px 6px;margin-top:4px}
.foot-cols .social a{color:#fff;border-color:#4a3c33}
.foot-bottom{border-top:1px solid #3d3129;font-size:13px}
.foot-bottom .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:16px;padding-bottom:16px}
.foot-bottom ul{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.foot-bottom a{color:#cfc3b3}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.site-footer>*{position:relative}

/* Lebih mirip referensi blok */
.mosaic{grid-auto-rows:clamp(150px,19vw,230px);background:transparent}
.tile .cap{max-width:58%;min-width:200px;left:14px;bottom:14px;padding:12px 14px 14px}
.tile .cap h3{font-size:14px}
.tile.quote blockquote::before{content:"\201C";display:block;font-size:46px;line-height:.6;margin-bottom:6px}
.nav ul{width:100%}
.nav li{flex:1}
.nav li a{position:relative;text-align:left;padding-right:26px;white-space:nowrap}
.nav li a::after{content:"";position:absolute;right:10px;top:50%;width:5px;height:5px;margin-top:-2px;background:#fff;opacity:.8}
.nav li:last-child a::after{display:none}
.foot-cols{gap:0}
.foot-cols>section{padding:0 22px;border-left:1px solid #4a3c33}
.foot-cols>section:first-child{border-left:0;padding-left:0}
.fpost{display:flex;gap:10px;align-items:flex-start}
.fpost .t{flex:0 0 64px;height:48px;overflow:hidden;background:#4a3c33}
.fpost .t img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
@media (max-width:820px){.nav li{flex:none}.foot-cols>section{border-left:0;padding:0}.foot-cols{gap:28px}}
/* Ikon menu */
.nav li a{display:flex;align-items:center;gap:9px;padding-top:20px;padding-bottom:20px}
.nav .ico{flex:none;opacity:.95}
.nav li a:hover .ico{color:#F7C9B5}

/* Latar foto: seksi konten diberi panel agar terbaca */
.section:not(.budaya)>.wrap{background:rgba(247,241,232,.94);padding-top:18px;padding-bottom:18px}

/* Bezel panel konten */
.panel{background:rgba(247,241,232,.96);border:1px solid var(--garis);box-shadow:0 6px 24px rgba(43,33,28,.12);margin-top:24px;margin-bottom:32px;padding:24px clamp(16px,3vw,32px) 32px!important;max-width:calc(var(--wrap) - 32px)}
.panel .archive-head{padding-top:0}
.page-body.panel,.wrap.panel>.page-body{max-width:760px}
.page-body.panel{margin-left:auto!important;margin-right:auto!important}
@media (max-width:1212px){.panel{margin-left:16px;margin-right:16px}}

/* Share ikon */
.share{margin:18px 0}
.share a,.share button{display:inline-flex;align-items:center;gap:6px;border-radius:3px}
.share .tg{background:#2481cc}
.share button svg{fill:none;stroke:currentColor;stroke-width:2}
.share a:hover,.share button:hover{filter:brightness(1.12)}
@media (max-width:520px){.share span{display:none}.share a,.share button{padding:10px 12px}.share strong{width:100%}}