/* =========================================================
   Edu-Katik Giriloyo 1.28 — Warta bergaya portal berita
   Sorotan utama · kartu mendatar · bilah samping · "Jangan terlewat".
   Semua warna memakai token tema sehingga mengikuti 5 template & mode terang/gelap.
   ========================================================= */
.wp{padding:26px 0 8px}
.wp-kepala{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.wp-kepala>div{min-width:0;max-width:760px}
.wp-kick{display:inline-flex;gap:6px;align-items:center;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.wp-kepala h1{font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.12;margin:6px 0 8px}
.wp-kepala p{margin:0;color:var(--ink2)}
.wp-red{display:inline-flex;gap:5px;align-items:center;color:var(--mut);font-size:.88rem;margin-left:4px}

.wp-tab{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:18px;scrollbar-width:none;border-bottom:1px solid var(--line)}
.wp-tab::-webkit-scrollbar{display:none}
.wp-tab a{flex:none;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink2);font-weight:700;font-size:.88rem;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.wp-tab a small{opacity:.6;font-weight:600;margin-left:2px}
.wp-tab a:hover{border-color:var(--teal);color:var(--teal)}
.wp-tab a.on{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}

/* label kategori */
.wp-lbl{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:5px;line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;
  --c:var(--teal);color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.wp-lbl.k1{--c:var(--soga,#7A4A28)}.wp-lbl.k2{--c:var(--daun,#3F6B4A)}.wp-lbl.k3{--c:var(--jalawe,#9C7F1E)}.wp-lbl.k4{--c:var(--nila2,var(--teal))}
.wp-lead .wp-lbl,.wp-tumpuk .wp-lbl{background:var(--teal);color:var(--on-teal);border-color:transparent}

/* gambar & ikon */
.wp-g{position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,var(--nila,#24407A),var(--soga,#7A4A28));color:rgba(255,255,255,.75)}
.wp-g img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.wp-ikon{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;gap:4px;align-items:center;padding:5px 7px;border-radius:8px;background:var(--teal);color:var(--on-teal);font-size:.72rem;font-weight:800;line-height:1}
.wp-lead .wp-ikon,.wp-tumpuk .wp-ikon{left:auto;right:14px;top:14px;bottom:auto}
.wp-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.8rem;color:var(--mut);font-weight:600}
.wp-meta>span{display:inline-flex;gap:5px;align-items:center;min-width:0}

/* sorotan */
.wp-sorot{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:16px;margin-bottom:26px}
.wp-lead{position:relative;display:block;min-height:420px;border-radius:var(--r,18px);overflow:hidden;color:#fff;text-decoration:none;box-shadow:var(--sh)}
.wp-lead .wp-g,.wp-tumpuk .wp-g{position:absolute;inset:0}
.wp-lead::after,.wp-tumpuk::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,20,0) 30%,rgba(8,10,20,.55) 62%,rgba(8,10,20,.88) 100%);pointer-events:none}
.wp-lead .wp-tx,.wp-tumpuk .wp-tx{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(16px,3vw,28px);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.wp-lead b{font-family:var(--serif,inherit);font-size:clamp(1.35rem,2.6vw,2.05rem);line-height:1.18;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.wp-lead em{font-style:normal;opacity:.9;font-size:.95rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:62ch}
.wp-lead .wp-meta,.wp-tumpuk .wp-meta{color:rgba(255,255,255,.86)}
.wp-lead:hover,.wp-tumpuk:hover{text-decoration:none}
.wp-lead:hover img,.wp-tumpuk:hover img,.wp-baris:hover .wp-g img,.wp-mini:hover img{transform:scale(1.05)}
.wp-samping{display:grid;gap:12px;align-content:start}
.wp-mini{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border-radius:var(--r2,14px);background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .2s,transform .25s}
.wp-mini:hover{border-color:var(--teal);text-decoration:none;transform:translateY(-2px)}
.wp-mini .wp-g{aspect-ratio:4/3;border-radius:10px}
.wp-mini .wp-t{display:flex;flex-direction:column;gap:5px;align-items:flex-start;min-width:0}
.wp-mini b{font-size:.98rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wp-mini small{color:var(--mut);font-size:.78rem}

/* tata letak utama + bilah samping */
.wp-tata{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:start}
.wp-jb{display:flex;align-items:flex-end;gap:10px;margin:0 0 16px;border-bottom:2px solid var(--teal);font-size:1rem;line-height:1.2}
.wp-jb span{display:inline-block;background:var(--teal);color:var(--on-teal);padding:8px 26px 7px 14px;border-radius:8px 0 0 0;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 100%,0 100%);font-weight:800;letter-spacing:.01em}
.wp-jb a{margin-left:auto;font-size:.82rem;font-weight:700;display:inline-flex;gap:4px;align-items:center;padding-bottom:6px}
.wp-daftar{display:grid;gap:16px}
.wp-baris{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);gap:20px;align-items:center;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r,16px);box-shadow:var(--sh);transition:border-color .25s,box-shadow .25s,transform .25s}
.wp-baris:hover{border-color:color-mix(in srgb,var(--teal) 45%,var(--line));transform:translateY(-2px)}
.wp-baris>.wp-g{aspect-ratio:16/10;border-radius:calc(var(--r,16px) - 4px)}
.wp-baris .wp-t{display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0;padding:4px 4px 4px 0}
.wp-baris h3{margin:0;font-size:clamp(1.08rem,1.6vw,1.28rem);line-height:1.28}
.wp-baris h3 a{color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wp-baris h3 a:hover{color:var(--teal);text-decoration:none}
.wp-baris p{margin:0;color:var(--ink2);font-size:.94rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-align:left}
.wp .pager{justify-content:center;margin-top:22px}
.wp .pager a{min-width:40px;height:40px;border-radius:10px;font-size:.92rem}
.wp .pager span{margin-left:0;width:100%;text-align:center}

.wp-sisi{display:grid;gap:16px;min-width:0}
.wp-wid{background:var(--card);border:1px solid var(--line);border-radius:var(--r,16px);padding:0 16px 14px;overflow:hidden}
.wp-wid .wp-jb{margin:0 -16px 14px;font-size:.92rem}
.wp-wid .wp-jb span{border-radius:0}
.wp-cari{display:flex;gap:8px}
.wp-cari input{flex:1;min-width:0;margin:0}
.wp-cari .btn{flex:none}
.wp-daf{list-style:none;margin:0;padding:0;counter-reset:wp}
.wp-daf li{padding:9px 0;border-bottom:1px dashed var(--line);display:grid;gap:2px}
.wp-daf li:last-child{border-bottom:0}
.wp-daf a{color:var(--ink);font-weight:600;line-height:1.35;font-size:.93rem}
.wp-daf a:hover{color:var(--teal)}
.wp-daf small{color:var(--mut);font-size:.76rem}
.wp-pop{display:grid;gap:4px}
.wp-pop a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:start;padding:7px 0;color:var(--ink);text-decoration:none;border-bottom:1px dashed var(--line)}
.wp-pop a:last-child{border-bottom:0}
.wp-pop b{font-family:var(--serif,inherit);font-size:1.6rem;line-height:1;color:color-mix(in srgb,var(--teal) 70%,var(--mut))}
.wp-pop span{font-weight:600;font-size:.9rem;line-height:1.35}.wp-pop small{display:block;color:var(--mut);font-weight:500;font-size:.75rem;margin-top:2px}
.wp-pop a:hover span{color:var(--teal)}
.wp-kat{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.wp-kat a{display:flex;gap:9px;align-items:center;padding:7px 8px;border-radius:9px;color:var(--ink2);font-weight:600;font-size:.9rem;text-decoration:none}
.wp-kat a:hover,.wp-kat a.on{background:color-mix(in srgb,var(--teal) 9%,transparent);color:var(--teal)}
.wp-kat a b{margin-left:auto;font-size:.74rem;min-width:24px;text-align:center;padding:2px 7px;border-radius:99px;background:var(--card2);border:1px solid var(--line);color:var(--ink2)}
.wp-kat i{width:9px;height:9px;border-radius:50%;flex:none;background:var(--teal)}
.wp-kat i.k1{background:var(--soga,#7A4A28)}.wp-kat i.k2{background:var(--daun,#3F6B4A)}.wp-kat i.k3{background:var(--jalawe,#9C7F1E)}.wp-kat i.k4{background:var(--nila2,var(--teal))}
.wp-arsip a .ic{color:var(--mut)}

/* jangan terlewat */
.wp-lewat{margin-top:34px;padding:18px 18px 20px;border-radius:var(--r,18px);background:var(--bg2,var(--card2));border:1px solid var(--line)}
.wp-lewat-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.wp-tumpuk{position:relative;display:block;aspect-ratio:4/3.3;border-radius:var(--r2,14px);overflow:hidden;color:#fff;text-decoration:none}
.wp-tumpuk .wp-tx{padding:14px;gap:6px}
.wp-tumpuk b{font-size:1rem;line-height:1.28;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wp-tumpuk .wp-meta{font-size:.72rem}

/* halaman baca */
.wp-baca{padding-top:18px}
.wp-artikel{background:var(--card);border:1px solid var(--line);border-radius:var(--r,18px);padding:clamp(18px,3.2vw,36px);box-shadow:var(--sh)}
.wp-artikel .wt-judul{margin-top:8px}
.wp-lain{margin-top:30px}
.wp-lain .wp-baris{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}

/* beranda */
.wp-beranda{margin-bottom:0}
.wp-beranda .wp-lead{min-height:380px}

/* panel redaksi */
.wp-panel .wp-baris{align-items:start;grid-template-columns:230px minmax(0,1fr)}
.wp-panel .wp-baris>.wp-g{aspect-ratio:4/3}
.wp-lbls{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.wp-info{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.8rem;color:var(--mut)}
.wp-info span{display:inline-flex;gap:4px;align-items:center}.wp-info .ok{color:var(--green)}.wp-info .warn{color:var(--amber)}
.wp-aksi{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%;padding-top:8px;border-top:1px dashed var(--line)}
.wp-mod{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1 1 320px}
.wp-mod input{flex:1 1 160px;margin:0;min-width:0}
.wp-saya{align-items:center}
.wp-saya-g{flex:none;width:58px;height:44px;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,var(--nila,#24407A),var(--soga,#7A4A28));color:rgba(255,255,255,.8);margin-right:10px}
.wp-saya-g img{width:100%;height:100%;object-fit:cover}

@media (max-width:1100px){.wp-tata{grid-template-columns:minmax(0,1fr) 290px;gap:20px}}
@media (max-width:960px){
  .wp-sorot{grid-template-columns:1fr}.wp-lead{min-height:340px}
  .wp-samping{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .wp-tata{grid-template-columns:1fr}
  .wp-sisi{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .wp-lewat-g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .wp-baris,.wp-lain .wp-baris,.wp-panel .wp-baris{grid-template-columns:1fr;gap:12px;padding:10px}
  .wp-lead{min-height:300px}
  .wp-mini{grid-template-columns:96px minmax(0,1fr)}
  .wp-lewat{padding:14px}
  .wp-lewat-g{grid-template-columns:1fr 1fr;gap:10px}
  .wp-tumpuk b{font-size:.88rem;-webkit-line-clamp:3}.wp-tumpuk .wp-meta{display:none}
  .wp-artikel{padding:16px}.wp-artikel .wt-isi p,.wp-artikel .wt-deck{text-align:left}
}
@media print{.wp-sisi,.wp-lewat,.wp-tab{display:none!important}.wp-tata{grid-template-columns:1fr}}