/* ===== Tema Melayu: hijau lumut × kuning keemasan songket ===== */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Source+Sans+3:wght@400;600;700&display=swap');
:root{--g:#0f5a38;--g1:#1f7a4f;--g2:#e4efe4;--y:#c9a227;--y2:#f3e3a6;--red:#8f1d2c;--ink:#1c2620;--mut:#5d6b62;--bd:#d9dccb;--bg:#f8f5ec;--r:14px;
 /* pucuk rebung (rebung/tunas bambu) */
 --rebung:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='18' viewBox='0 0 28 18'%3E%3Cpath d='M0 18 L14 0 L28 18Z' fill='%23c9a227'/%3E%3Cpath d='M6 18 L14 7 L22 18Z' fill='%230f5a38'/%3E%3Cpath d='M11 18 L14 13 L17 18Z' fill='%23f3e3a6'/%3E%3C/svg%3E");
 /* songket kecil (bunga tabur) */
 --songket:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='1'%3E%3Cpath d='M20 4 L36 20 L20 36 L4 20Z'/%3E%3Cpath d='M20 12 L28 20 L20 28 L12 20Z'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='2' fill='%23c9a227'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%230f5a38'/%3E%3Ccircle cx='40' cy='0' r='1.5' fill='%230f5a38'/%3E%3Ccircle cx='0' cy='40' r='1.5' fill='%230f5a38'/%3E%3Ccircle cx='40' cy='40' r='1.5' fill='%230f5a38'/%3E%3C/svg%3E");}
body{font-family:"Source Sans 3","Segoe UI",Arial,sans-serif;background:#fffdf7}
h1,h2,h3,.chap h1,.hero h1,section h2,.card h3,.pcard h3,.jcard h3{font-family:Marcellus,Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:.01em}
.hero h1{font-size:3rem}.hero h1 span{background:linear-gradient(135deg,var(--g),var(--y));-webkit-background-clip:text;background-clip:text;color:transparent}
/* bingkai pucuk rebung di atas header & footer */
header.top{border-bottom:2px solid var(--y);background:rgba(255,253,247,.92)}
header.top::before{content:"";display:block;height:9px;background:var(--rebung) repeat-x bottom/28px 9px,linear-gradient(90deg,var(--g),var(--g1))}
.logo .mark{background:linear-gradient(135deg,var(--g),var(--g1));border:2px solid var(--y);border-radius:8px;position:relative}
.logo .mark::after{content:"";position:absolute;inset:3px;background:var(--rebung) center/14px 9px no-repeat}
.logo .mark{font-size:0}
.logo b{font-family:Marcellus,serif;font-weight:400;font-size:1.15rem}
.menu a.on,.menu a:hover{background:var(--y2);color:var(--g)}
.btn,.menu a.btn{background:linear-gradient(135deg,var(--g),var(--g1));border:1px solid var(--y);box-shadow:0 8px 20px rgba(15,90,56,.22)}
.btn.sec{background:#fff;color:var(--g)!important;border:1.5px solid var(--g)}
.chip{background:var(--y2);color:#6b5210;border:1px solid var(--y)}
/* hero berlatar songket samar */
.hero{background:radial-gradient(1200px 600px at 10% -10%,#e4efe4 0%,transparent 60%),radial-gradient(900px 500px at 100% 0%,#fbf1cf 0%,transparent 55%),#fffdf7}
.hero::before{content:"";position:absolute;inset:0;background:var(--songket) center/40px 40px;opacity:.22;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 45%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 45%,#000 100%);pointer-events:none}
.hero .wrap{position:relative}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:var(--rebung) repeat-x/28px 12px;opacity:.9}
.art{border:1px solid var(--y);border-radius:16px;background:rgba(255,255,255,.85)}
.art .n{background:linear-gradient(135deg,var(--g),var(--g1));border:2px solid var(--y)}
.stats div{border-top:4px solid var(--y);border-radius:12px}.stats b{font-family:Marcellus,serif}
/* hiasan judul seksi: garis emas dengan tunas */
section h2{position:relative;padding-bottom:10px}
section h2::after{content:"";display:block;width:84px;height:5px;margin-top:8px;background:linear-gradient(90deg,var(--y),var(--g));border-radius:3px}
.sechead h2::after,.prose h2::after{width:56px}
.card,.jcard,.tli,.faq,.side,.chap,.stats div{border-color:var(--bd);border-radius:12px}
.card:hover,.jcard:hover{border-color:var(--y)}
.card .ic,.jcard .ji{filter:saturate(.9)}
.dosen{background:linear-gradient(135deg,#f5f7ef,#fffdf7);border:1px solid var(--y);border-radius:16px}
.dosen .quote{border-left:4px solid var(--y);font-family:Marcellus,serif;font-style:normal;font-size:1.02rem}
.avatar{background:linear-gradient(135deg,var(--g),var(--g1));border:4px solid var(--y);border-radius:14px;font-family:Marcellus,serif}
.tl::before{background:linear-gradient(90deg,var(--g),var(--y),var(--g))}.tli::before{background:var(--y);box-shadow:0 0 0 2px var(--g)}
.band{background:linear-gradient(135deg,var(--g) 0%,#1f7a4f 100%);border-top:10px solid transparent;border-image:var(--rebung) 0 0 10 0 repeat}
.band::before{display:none}.band h2::after{background:var(--y);margin:8px auto 0}
.band .pantun{font-family:Marcellus,serif;font-size:1.05rem;line-height:1.75;color:var(--y2);margin:0 auto 22px;max-width:520px}
footer{background:#0b2a1b;border-top:10px solid transparent;border-image:var(--rebung) 0 0 10 0 repeat;color:#cfdccf}
/* ruang belajar */
.side{background:#fffdf7}.side a.on,.side a:hover{background:var(--y2);color:var(--g)}.side .st.done{background:var(--g);border-color:var(--y)}.side .st.part{background:var(--y);border-color:var(--y)}
.side .prog i{background:linear-gradient(90deg,var(--g),var(--y))}
.chap{background:#fff;border-top:5px solid var(--y);box-shadow:0 12px 30px rgba(15,90,56,.05)}
.chap .bab{color:#8a6a12}.chap .meta span{background:var(--y2);color:#5e4a0e}
.prose h2{color:var(--g)}.prose th{background:#eef2e6}
.kai{border-left:5px solid var(--y);background:linear-gradient(135deg,#f7f8f0,#fff)}
.callout{background:#fdf6df;border-color:var(--y)}
.flow span{background:#eef2e6;color:var(--g);border:1px solid #d5dfcc}
.diag .box{border-color:var(--g)}.diag .box.mid{border-color:var(--y);background:#fdf6df}
details.dosen{background:#f4f1e6;border-color:var(--y);}details.dosen summary{color:#5e4a0e}
.blok{border-top:2px solid var(--y2)}
.tcard{border:1px solid var(--y);background:linear-gradient(135deg,#fff,#faf7ec)}
.q .opt:hover{border-color:var(--y);background:#fdf6df}.q .opt.ok{background:#e4efe4;border-color:var(--g)}
.score{background:#fdf6df;color:#5e4a0e;border:1px solid var(--y)}
.badge{background:var(--y2);color:#5e4a0e}.pbar div{border-top:3px solid var(--y)}
.field textarea:focus,.field input:focus{outline:2px solid var(--y2);border-color:var(--y)}
.tbl th{background:#eef2e6}

.band .wrap{position:relative;z-index:1}.band::before{display:block;content:"";position:absolute;inset:0;background:var(--songket) center/40px 40px;opacity:.18;pointer-events:none}