@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');

/* ============================================================
   AMRUL EDUCATION — MAIN THEME
   ------------------------------------------------------------
   QUICK EDIT:
   1. Warna      -> ubah variabel di :root
   2. Font       -> ubah --font-* di :root
   3. Container  -> ubah --container-width
   4. Navbar     -> cari bagian NAVIGATION
   5. Mobile     -> cari RESPONSIVE / MEDIA QUERY
   ============================================================ */

:root {
    /* ----- BRAND COLORS ----- */
    --color-primary: #7c0b0b;
    --color-primary-dark: #5b0808;
    --color-secondary: #075e50;
    --color-accent: #c89c4a;

    /* ----- TEXT & BACKGROUND ----- */
    --color-text: #171717;
    --color-muted: #737373;
    --color-background: #fffdf9;
    --color-surface: #ffffff;
    --color-cream: #f6f3ed;
    --color-line: #ded9d0;

    /* ----- TYPOGRAPHY ----- */
    --font-body: "DM Sans", Arial, sans-serif;
    --font-display: "Playfair Display", Georgia, serif;

    /* ----- LAYOUT ----- */
    --container-width: 1240px;
    --container-gutter: 48px;

    /* ----- EFFECTS ----- */
    --shadow-soft: 0 18px 50px rgba(31, 20, 11, 0.09);
    --radius-card: 16px;
    --radius-large: 24px;
}

/* Compatibility aliases: existing HTML can continue using the short names. */
:root {
    --ink: var(--color-text);
    --muted: var(--color-muted);
    --cream: var(--color-cream);
    --paper: var(--color-background);
    --line: var(--color-line);
    --wine: var(--color-primary);
    --wine-dark: var(--color-primary-dark);
    --green: var(--color-secondary);
    --gold: var(--color-accent);
    --shadow: var(--shadow-soft);
}


* {
box-sizing:border-box
}
html {
scroll-behavior:smooth
}
body {
margin:0;
color:var(--ink);
background:var(--paper);
font-family:"DM Sans",Arial,sans-serif
}
a {
color:inherit;
text-decoration:none
}
img {
display:block;
width:100%
}
.container {
width:min(var(--container-width), calc(100% - var(--container-gutter)));
margin-inline:auto
}

.topline {
height:4px;
background:linear-gradient(90deg,var(--gold),#f0d58d,var(--gold))
}
.site-header {
position:sticky;
top:0;
z-index:50;
background:#004f4b;
color:#fff;
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(255,255,255,.10);
transition:background .35s ease,color .35s ease,box-shadow .35s ease
}
.site-header.is-scrolled {
background:rgba(255,253,249,.96);
color:var(--ink);
box-shadow:0 12px 35px rgba(31,20,11,.10);
border-bottom-color:rgba(0,0,0,.07)
}

.nav-wrap {
height:86px;
width:min(var(--container-width), calc(100% - var(--container-gutter)));
margin:auto;
display:flex;
align-items:center;
gap:32px
}
.brand {
display:flex;
align-items:center;
margin-right:auto
}
.brand-logo {
width:205px;
height:70px;
background:transparent;
border-radius:0;
overflow:hidden;
display:flex;
align-items:center;
transition:width .35s ease,height .35s ease
}
.brand-logo img {
height:100%;
object-fit:contain
}
.site-header.is-scrolled .brand-logo {
width:165px;
height:58px
}

.main-nav {
display:flex;
align-items:center;
gap:26px;
font-size:13px;
font-weight:700;
text-transform:uppercase
}
.main-nav a {
position:relative;
padding:32px 0;
color:#fff;
transition:color .25s
}
.main-nav a:after {
content:"";
position:absolute;
left:0;
right:100%;
bottom:24px;
height:2px;
background:var(--gold);
transition:.25s
}
.site-header.is-scrolled .main-nav a:after {
background:var(--wine)
}
.main-nav a:hover:after,.main-nav a.active:after {
right:0
}

.nav-actions {
display:flex;
gap:8px
}
.icon-btn,.menu-btn {
width:42px;
height:42px;
border:1px solid rgba(255,255,255,.35);
color:inherit;
background:transparent;
border-radius:50%;
font-size:22px;
cursor:pointer;
transition:.25s
}
.site-header.is-scrolled .icon-btn,.site-header.is-scrolled .menu-btn {
border-color:var(--line)
}
.menu-btn {
display:none
}

.search-panel {
display:none;
border-top:1px solid var(--line);
background:var(--cream)
}
.search-panel.open {
display:block
}
.search-inner {
height:70px;
display:flex;
align-items:center;
gap:14px
}
.search-inner span {
font-size:25px
}
.search-inner input {
flex:1;
border:0;
outline:0;
background:transparent;
font:inherit;
font-size:18px
}
.search-inner button {
border:0;
background:none;
font-weight:700;
cursor:pointer
}

.hero-section {
display:grid;
grid-template-columns:.9fr 1.25fr;
gap:54px;
padding:72px 0 34px;
align-items:center
}
.eyebrow {
margin:0 0 16px;
color:var(--green);
font-size:11px;
font-weight:800;
letter-spacing:.18em
}
.eyebrow span {
display:inline-block;
width:24px;
height:2px;
background:var(--gold);
vertical-align:middle;
margin-right:8px
}

.hero-copy h1 {
font:600 clamp(42px,5vw,70px)/1.03 "Playfair Display",Georgia,serif;
margin:0 0 24px;
letter-spacing:-.035em
}
.hero-copy h1 em {
color:var(--wine);
font-style:italic
}
.hero-intro {
max-width:540px;
color:#5f5b56;
font-size:16px;
line-height:1.8;
margin:0 0 25px
}
.hero-meta {
display:flex;
gap:12px;
align-items:center;
font-size:11px;
color:#8b857d;
text-transform:uppercase;
letter-spacing:.07em;
margin-bottom:25px
}
.primary-btn {
display:inline-flex;
gap:20px;
align-items:center;
background:var(--wine);
color:white;
border-radius:99px;
padding:14px 19px 14px 22px;
font-weight:700;
font-size:13px;
box-shadow:0 12px 25px rgba(124,11,11,.18);
transition:.25s
}
.primary-btn:hover {
transform:translateY(-2px);
background:var(--wine-dark)
}

.hero-card {
height:520px;
border-radius:26px;
overflow:hidden;
position:relative;
box-shadow:var(--shadow)
}
.hero-card img {
height:100%;
object-fit:cover
}
.hero-overlay {
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.08) 42%,rgba(0,0,0,.82) 100%)
}
.hero-label {
position:absolute;
top:22px;
left:22px;
background:rgba(255,255,255,.9);
padding:9px 12px;
border-radius:99px;
font-size:10px;
font-weight:800;
letter-spacing:.12em;
color:var(--wine)
}
.hero-card-content {
position:absolute;
left:28px;
right:28px;
bottom:26px;
color:white
}
.hero-card-content h2 {
font:600 clamp(29px,3.2vw,45px)/1.08 "Playfair Display",Georgia,serif;
margin:0 0 8px
}
.hero-card-content p {
font-size:13px;
line-height:1.6;
opacity:.84;
max-width:600px;
margin:0 0 17px
}
.read-line {
font-size:12px;
font-weight:700;
display:flex;
gap:10px;
align-items:center
}
.read-line span {
font-size:19px
}

.featured-strip {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
padding:0 0 66px
}
.mini-story {
display:grid;
grid-template-columns:92px 1fr;
gap:13px;
border-top:1px solid var(--line);
padding-top:14px
}
.mini-story img {
height:82px;
object-fit:cover;
border-radius:11px
}
.tag {
display:block;
color:var(--green);
font-size:9px;
font-weight:800;
letter-spacing:.12em;
margin-bottom:6px
}
.mini-story h3 {
font-size:13px;
line-height:1.4;
margin:0 0 7px
}
time {
font-size:10px;
color:#918b84
}

.section {
padding:45px 0 90px
}
.section-head {
display:flex;
align-items:end;
justify-content:space-between;
margin-bottom:30px
}
.section-head h2,.topic-head h2,.newsletter h2 {
font:600 clamp(31px,4vw,46px)/1.08 "Playfair Display",Georgia,serif;
margin:0;
letter-spacing:-.025em
}
.text-link {
font-size:12px;
font-weight:800;
border-bottom:1px solid var(--ink);
padding-bottom:5px
}

.content-grid {
display:grid;
grid-template-columns:1fr 330px;
gap:40px
}
.article-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:36px 24px
}
.article-card .image-wrap {
height:190px;
position:relative;
overflow:hidden;
border-radius:14px;
background:#ddd
}
.article-card img {
height:100%;
object-fit:cover;
transition:.45s
}
.article-card:hover img {
transform:scale(1.05)
}
.number {
position:absolute;
left:10px;
top:10px;
background:rgba(255,253,249,.94);
border-radius:7px;
padding:6px 8px;
font-size:10px;
font-weight:800
}
.article-body {
padding:15px 3px
}
.article-body h3 {
font:600 21px/1.22 "Playfair Display",Georgia,serif;
margin:0 0 9px
}
.article-body h3 a:hover {
color:var(--wine)
}
.article-body p {
font-size:12px;
color:#777;
line-height:1.55;
margin:0 0 11px
}

.sidebar {
display:flex;
flex-direction:column;
gap:20px
}
.sidebar-card {
border:1px solid var(--line);
border-radius:18px;
padding:22px;
background:white
}
.side-title {
display:flex;
gap:11px;
align-items:center;
padding-bottom:17px;
border-bottom:1px solid var(--line)
}
.side-title span {
color:var(--wine);
font-size:10px;
font-weight:900
}
.side-title h3 {
font-size:16px;
margin:0
}
.popular-item {
display:grid;
grid-template-columns:34px 1fr;
gap:10px;
padding:18px 0;
border-bottom:1px solid #eee8e0
}
.popular-item:last-child {
border-bottom:0;
padding-bottom:2px
}
.popular-item>b {
font:600 24px "Playfair Display",Georgia,serif;
color:#c7c1b8
}
.popular-item h4 {
font-size:12px;
line-height:1.45;
margin:0 0 5px
}
.popular-item:hover h4 {
color:var(--wine)
}

.quote-card {
background:var(--green);
color:white;
border-radius:18px;
padding:28px;
position:relative;
overflow:hidden
}
.quote-card:after {
content:"";
position:absolute;
width:150px;
height:150px;
border:1px solid rgba(255,255,255,.15);
border-radius:50%;
right:-65px;
bottom:-65px
}
.quote-mark {
font:700 60px/1 "Playfair Display";
color:#d9bb80
}
.quote-card p {
font:italic 18px/1.5 "Playfair Display",Georgia,serif;
margin:2px 0 18px
}
.quote-card small {
opacity:.7;
font-size:10px
}

.topic-section {
background:var(--cream);
padding:80px 0
}
.topic-head {
display:flex;
justify-content:space-between;
align-items:end;
margin-bottom:30px
}
.topic-head>p {
max-width:400px;
color:#777;
font-size:13px;
line-height:1.7;
margin:0
}
.topic-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px
}
.topic-card {
min-height:170px;
background:white;
border:1px solid var(--line);
border-radius:17px;
padding:20px;
display:flex;
flex-direction:column;
position:relative;
transition:.25s
}
.topic-card:hover {
transform:translateY(-5px);
box-shadow:var(--shadow);
border-color:#c9bda9
}
.topic-card span {
font-size:10px;
color:var(--wine);
font-weight:900
}
.topic-card strong {
font:600 29px "Playfair Display",Georgia,serif;
margin-top:auto
}
.topic-card small {
color:#858079;
font-size:10px;
margin-top:5px
}
.topic-card i {
position:absolute;
right:19px;
bottom:19px;
font-style:normal;
font-size:20px
}

.newsletter {
margin-top:70px;
margin-bottom:70px;
border:1px solid var(--line);
border-radius:24px;
padding:38px 42px;
display:grid;
grid-template-columns:80px 1fr 390px;
align-items:center;
gap:25px;
background:linear-gradient(135deg,#fff,#f5f0e8)
}
.newsletter-mark {
width:68px;
height:68px;
border-radius:50%;
display:grid;
place-items:center;
background:var(--wine);
color:#e8c77e;
font:700 22px "Playfair Display";
box-shadow:0 10px 25px rgba(124,11,11,.18)
}
.newsletter h2 {
font-size:29px
}
.newsletter p:not(.eyebrow) {
font-size:12px;
color:#777;
line-height:1.6;
margin:8px 0 0
}
.subscribe-form {
display:flex;
background:white;
border:1px solid var(--line);
border-radius:99px;
padding:5px
}
.subscribe-form input {
min-width:0;
flex:1;
border:0;
outline:0;
padding:0 15px;
font:inherit;
font-size:12px
}
.subscribe-form button {
border:0;
border-radius:99px;
background:var(--ink);
color:white;
padding:12px 17px;
font-weight:700;
font-size:11px;
cursor:pointer
}

.footer {
background:#171616;
color:#eee;
padding:55px 0 20px
}
.footer-grid {
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:40px;
padding-bottom:45px
}
.footer-logo {
width:185px;
height:62px;
object-fit:cover;
border-radius:10px;
margin-bottom:15px
}
.footer p {
color:#a8a4a0;
max-width:330px;
font-size:12px;
line-height:1.7
}
.footer h4 {
font-size:11px;
text-transform:uppercase;
letter-spacing:.12em;
color:#d2a85d;
margin:5px 0 18px
}
.footer a {
display:block;
color:#aaa6a2;
font-size:12px;
margin-bottom:12px
}
.footer a:hover {
color:white
}
.socials {
display:flex;
gap:7px
}
.socials a {
display:grid;
place-items:center;
width:34px;
height:34px;
border:1px solid #45413e;
border-radius:50%;
font-size:9px;
margin:0
}
.copyright {
border-top:1px solid #333;
padding-top:17px;
display:flex;
justify-content:space-between;
color:#74716e;
font-size:9px;
letter-spacing:.04em
}

@media(max-width:1050px) {
.main-nav {
gap:16px
}
.main-nav a {
font-size:11px
}
.hero-section {
grid-template-columns:1fr;
gap:28px
}
.hero-card {
height:480px
}
.content-grid {
grid-template-columns:1fr
}
.sidebar {
display:grid;
grid-template-columns:1fr 1fr
}
.newsletter {
grid-template-columns:60px 1fr
}
.subscribe-form {
grid-column:2
}
}

@media(max-width:800px) {
.container,.nav-wrap {
width:min(100% - 28px,1240px)
}
.nav-wrap {
height:72px
}
.brand-logo {
width:145px;
height:52px
}
.main-nav {
display:none;
position:absolute;
left:14px;
right:14px;
top:77px;
background:white;
border:1px solid var(--line);
border-radius:15px;
padding:10px;
box-shadow:var(--shadow);
flex-direction:column;
align-items:stretch;
gap:0
}
.main-nav.open {
display:flex
}
.main-nav a {
padding:13px 12px
}
.main-nav a:after {
display:none
}
.menu-btn {
display:block
}
.hero-section {
padding-top:42px
}
.hero-card {
height:420px
}
.hero-copy h1 {
font-size:45px
}
.featured-strip {
grid-template-columns:1fr 1fr
}
.article-grid {
grid-template-columns:1fr 1fr
}
.topic-grid {
grid-template-columns:1fr 1fr
}
.topic-head {
display:block
}
.topic-head>p {
margin-top:15px
}
.newsletter {
grid-template-columns:1fr;
padding:30px
}
.newsletter-mark {
display:none
}
.subscribe-form {
grid-column:auto
}
.footer-grid {
grid-template-columns:1fr 1fr
}
}

@media(max-width:560px) {
.hero-copy h1 {
font-size:39px
}
.hero-card {
height:390px
}
.hero-card-content h2 {
font-size:30px
}
.featured-strip,.article-grid,.topic-grid,.sidebar,.footer-grid {
grid-template-columns:1fr
}
.section {
padding-bottom:60px
}
.section-head {
display:block
}
.text-link {
display:inline-block;
margin-top:17px
}
.article-card .image-wrap {
height:220px
}
.copyright {
display:block
}
.copyright span {
display:block;
margin-top:8px
}
}

/* ================= ARTICLE DETAIL ================= */

.article-hero {
background:var(--cream);
padding:54px 0 56px;
border-bottom:1px solid var(--line)
}

.article-hero-inner {
max-width:920px
}
.breadcrumb {
display:flex;
gap:10px;
font-size:10px;
color:#8b857d;
text-transform:uppercase;
letter-spacing:.08em;
margin-bottom:42px
}
.breadcrumb a:hover {
color:var(--wine)
}

.article-hero h1 {
font:600 clamp(45px,6vw,76px)/1.02 "Playfair Display",Georgia,serif;
letter-spacing:-.035em;
max-width:900px;
margin:8px 0 18px
}
.article-deck {
font:italic 21px/1.55 "Playfair Display",Georgia,serif;
color:#6f6961;
max-width:720px;
margin:0 0 25px
}

.article-byline {
display:flex;
align-items:center;
gap:12px
}
.avatar,.author-mark,.comment-avatar {
display:grid;
place-items:center;
border-radius:50%;
background:var(--wine);
color:#e5c278;
font-weight:800
}
.avatar {
width:40px;
height:40px;
font-size:11px
}
.article-byline strong,.article-byline span {
display:block
}
.article-byline strong {
font-size:12px
}
.article-byline span {
font-size:10px;
color:#8a857e;
margin-top:3px
}

.article-layout {
display:grid;
grid-template-columns:64px minmax(0,760px) 260px;
gap:34px;
justify-content:center;
padding:65px 0 90px
}
.article-tools {
padding-top:8px;
position:sticky;
top:105px;
height:max-content;
display:flex;
flex-direction:column;
gap:8px
}
.article-tools button {
border:1px solid var(--line);
background:white;
border-radius:50%;
width:43px;
height:43px;
font-size:9px;
font-weight:800;
cursor:pointer
}
.reading-progress {
height:100px;
width:2px;
background:#e4dfd7;
margin:14px auto 0;
position:relative
}
.reading-progress span {
position:absolute;
left:0;
top:0;
width:100%;
height:0;
background:var(--wine)
}

.article-cover {
margin:0 0 38px
}
.article-cover img {
height:470px;
object-fit:cover;
border-radius:20px
}
.article-cover figcaption,.in-article-image figcaption {
font-size:10px;
color:#8c867e;
margin-top:9px
}

.article-body-full {
font:18px/1.9 Georgia,"Times New Roman",serif;
color:#302e2b
}
.article-body-full .lead {
font:600 24px/1.65 "Playfair Display",Georgia,serif;
color:#211f1c
}
.article-body-full p {
margin:0 0 24px
}
.article-body-full h2 {
font:600 31px/1.2 "Playfair Display",Georgia,serif;
margin:44px 0 17px;
color:#211f1c
}
.article-body-full blockquote {
border-left:3px solid var(--gold);
padding:10px 0 10px 25px;
margin:35px 0;
font:italic 23px/1.55 "Playfair Display",Georgia,serif;
color:var(--wine)
}
.in-article-image {
margin:38px 0
}
.in-article-image img {
border-radius:14px;
max-height:450px;
object-fit:cover
}

.article-end {
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:20px 0;
margin-top:42px;
display:flex;
align-items:center;
justify-content:space-between;
font-size:9px;
letter-spacing:.12em;
font-weight:800
}
.share-row {
display:flex;
gap:7px
}
.share-row a {
border:1px solid var(--line);
border-radius:99px;
padding:8px 12px;
font-size:9px;
letter-spacing:0
}

.article-sidebar {
padding-top:5px
}
.toc {
border-left:2px solid var(--line);
padding-left:18px;
position:sticky;
top:105px
}
.toc a {
display:block;
font:600 13px/1.4 "Playfair Display",Georgia,serif;
margin:12px 0
}
.toc a:hover {
color:var(--wine)
}
.author-card {
margin-top:30px;
background:var(--green);
color:white;
border-radius:17px;
padding:24px
}
.author-mark {
width:48px;
height:48px;
background:white;
color:var(--wine);
margin-bottom:18px
}
.author-card h3 {
font:600 23px "Playfair Display";
margin:8px 0
}
.author-card p {
font-size:11px;
line-height:1.6;
color:#d4dfdc
}
.author-card a {
font-size:10px;
font-weight:800;
color:#e5c278
}

.comments-box {
margin-top:70px;
border-top:1px solid var(--line);
padding-top:45px
}
.section-head.compact {
margin-bottom:25px
}
.section-head.compact h2 {
font-size:30px
}
.comment-count {
font-size:10px;
color:#888
}
.comment {
display:grid;
grid-template-columns:38px 1fr;
gap:12px;
padding:18px 0;
border-bottom:1px solid #eee9e2
}
.comment-avatar {
width:38px;
height:38px;
background:#eee8df;
color:var(--wine);
font-size:11px
}
.comment strong {
font-size:11px
}
.comment time {
margin-left:9px
}
.comment p {
font:14px/1.6 "DM Sans",Arial,sans-serif;
color:#666;
margin:8px 0
}
.comment button {
border:0;
background:none;
padding:0;
font-size:10px;
font-weight:800;
color:var(--wine);
cursor:pointer
}
.comment-form {
margin-top:28px
}
.comment-form textarea {
width:100%;
height:130px;
resize:vertical;
border:1px solid var(--line);
border-radius:12px;
padding:15px;
outline:0;
font:13px/1.6 "DM Sans",Arial,sans-serif;
background:#fff
}
.comment-form>div {
display:flex;
gap:8px;
margin-top:9px
}
.comment-form input {
min-width:0;
flex:1;
border:1px solid var(--line);
border-radius:9px;
padding:11px;
outline:0
}
.comment-form button {
border:0;
border-radius:9px;
background:var(--wine);
color:white;
padding:0 17px;
font-weight:700;
cursor:pointer
}

.related {
padding:0 0 90px
}
.related-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px
}
.related-card img {
height:180px;
object-fit:cover;
border-radius:13px;
margin-bottom:14px
}
.related-card h3 {
font:600 21px/1.25 "Playfair Display";
margin:0 0 7px
}
.related-card:hover h3 {
color:var(--wine)
}

/* ================= MEDIA / GALLERY ================= */

.media-hero {
background:var(--cream);
padding:75px 0 70px;
border-bottom:1px solid var(--line)
}
.media-hero .container {
max-width:900px
}
.media-hero h1 {
font:600 clamp(45px,6vw,74px)/1.02 "Playfair Display",Georgia,serif;
letter-spacing:-.04em;
margin:0 0 18px
}
.media-hero h1 em {
font-style:italic;
color:var(--wine)
}
.media-hero>div>p:last-child {
max-width:610px;
color:#777;
font-size:15px;
line-height:1.8
}

.media-section {
padding:55px 0 100px
}
.media-tabs {
display:flex;
gap:7px;
margin-bottom:30px
}
.media-tabs button {
border:1px solid var(--line);
background:white;
border-radius:99px;
padding:10px 15px;
font-size:11px;
font-weight:800;
cursor:pointer
}
.media-tabs button b {
color:#999;
margin-left:5px
}
.media-tabs button.active {
background:var(--wine);
border-color:var(--wine);
color:white
}
.media-tabs button.active b {
color:#e8c77e
}

.media-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px 17px
}
.media-card {
border:0;
background:none;
padding:0;
text-align:left;
cursor:pointer;
position:relative
}
.media-card>img,.video-thumb {
height:235px;
width:100%;
object-fit:cover;
border-radius:14px;
overflow:hidden;
margin-bottom:13px
}
.media-card>img {
transition:.35s
}
.media-card:hover>img,.media-card:hover .video-thumb img {
transform:scale(1.035)
}
.media-type {
position:absolute;
left:10px;
top:10px;
background:rgba(255,255,255,.94);
border-radius:99px;
padding:6px 9px;
color:var(--wine);
font-size:8px;
font-weight:900;
letter-spacing:.1em
}
.media-card small {
font-size:9px;
color:#928c85;
letter-spacing:.1em
}
.media-card h3 {
font:600 20px/1.25 "Playfair Display";
margin:6px 0
}
.video-thumb {
position:relative
}
.video-thumb img {
height:100%;
object-fit:cover;
transition:.35s
}
.play {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:55px;
height:55px;
border-radius:50%;
background:rgba(124,11,11,.92);
color:white;
display:grid;
place-items:center;
padding-left:3px;
box-shadow:0 8px 25px rgba(0,0,0,.2)
}

.lightbox {
position:fixed;
inset:0;
background:rgba(10,8,7,.94);
z-index:100;
display:none;
align-items:center;
justify-content:center;
padding:35px
}
.lightbox.open {
display:flex
}
.lightbox-close {
position:absolute;
right:25px;
top:18px;
background:none;
border:0;
color:white;
font-size:40px;
cursor:pointer
}
.lightbox-inner {
width:min(1050px,92vw)
}
.lightbox-inner>img {
max-height:75vh;
object-fit:contain;
border-radius:8px
}
.lightbox-inner iframe {
width:100%;
aspect-ratio:16/9;
border:0;
border-radius:10px;
background:#000
}
.lightbox-caption {
color:white;
padding-top:14px
}
.lightbox-caption span {
font-size:9px;
color:#d8b66f;
letter-spacing:.12em
}
.lightbox-caption h3 {
font:500 24px "Playfair Display";
margin:5px 0
}

/* ================= PRINT ================= */

@media print {
.site-header,.article-tools,.article-sidebar,.comments-box,.related,.footer {
display:none!important
}
.article-layout {
display:block;
padding:0
}
.article-hero {
padding:20px 0
}
.article-cover img {
height:auto
}
.article-body-full {
font-size:12pt
}
.article-body-full h2 {
break-after:avoid
}
}

@media(max-width:1050px) {
.article-layout {
grid-template-columns:55px minmax(0,1fr)
}
.article-sidebar {
display:none
}
.media-grid {
grid-template-columns:repeat(3,1fr)
}
}

@media(max-width:800px) {
.article-layout {
grid-template-columns:1fr;
padding-top:35px
}
.article-tools {
position:static;
flex-direction:row;
order:2
}
.article-tools .reading-progress {
display:none
}
.article-cover img {
height:360px
}
.article-hero h1 {
font-size:47px
}
.related-grid {
grid-template-columns:1fr 1fr
}
.media-grid {
grid-template-columns:1fr 1fr
}
}

@media(max-width:560px) {
.article-hero {
padding:40px 0
}
.article-hero h1,.media-hero h1 {
font-size:40px
}
.article-deck {
font-size:18px
}
.article-cover img {
height:270px
}
.article-body-full {
font-size:17px;
line-height:1.8
}
.article-body-full .lead {
font-size:21px
}
.article-body-full h2 {
font-size:27px
}
.comment-form>div {
display:grid;
grid-template-columns:1fr
}
.comment-form button {
height:42px
}
.related-grid,.media-grid {
grid-template-columns:1fr
}
.media-card>img,.video-thumb {
height:270px
}
}

/* ================= SCROLL NAVIGATION ================= */

.site-header.is-scrolled .nav-wrap {
height:72px
}
.site-header.is-scrolled .main-nav a {
padding:25px 0
}
.site-header.is-scrolled .main-nav a:after {
bottom:18px
}

@media(max-width:1050px) {
.site-header.is-scrolled .main-nav {
top:72px
}
.site-header:not(.is-scrolled) .main-nav {
color:#fff
}
}

@media(max-width:700px) {
.nav-wrap {
height:76px
}
.brand-logo {
width:165px;
height:56px
}
.site-header.is-scrolled .nav-wrap {
height:68px
}
.site-header.is-scrolled .brand-logo {
width:150px;
height:52px
}
.main-nav {
color:var(--ink)
}
.site-header:not(.is-scrolled) .main-nav {
background:#fff;
color:var(--ink)
}
.site-header.is-scrolled .main-nav {
background:#fff
}
}

/* ================= V6 — LOGO DI ATAS, NAVIGASI DI TENGAH ================= */

.site-header {
transition:background .35s ease,color .35s ease,box-shadow .35s ease
}

.nav-wrap {
height:164px;
position:relative;
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
gap:0;
padding-top:14px
}

.brand {
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 5px
}

.brand-logo {
width:330px;
height:92px;
justify-content:center
}

.brand-logo img {
width:100%;
height:100%;
object-fit:contain
}

.main-nav {
justify-content:center;
align-items:center;
gap:30px;
width:100%;
font-size:12px;
line-height:1
}

.main-nav a {
padding:18px 0 16px;
white-space:nowrap
}

.main-nav a:after {
left:50%;
right:50%;
bottom:6px;
transform:translateX(-50%);
width:0;
height:2px
}

.main-nav a:hover:after,.main-nav a.active:after {
left:0;
right:0;
width:100%;
transform:none
}

.nav-actions {
position:absolute;
right:0;
bottom:18px;
display:flex;
gap:8px
}

.site-header.is-scrolled .nav-wrap {
height:104px;
padding-top:7px
}

.site-header.is-scrolled .brand {
margin-bottom:0
}

.site-header.is-scrolled .brand-logo {
width:220px;
height:62px
}

.site-header.is-scrolled .main-nav {
gap:25px
}

.site-header.is-scrolled .main-nav a {
padding:10px 0 12px
}

.site-header.is-scrolled .main-nav a:after {
bottom:3px
}

.site-header.is-scrolled .nav-actions {
bottom:22px
}

@media(max-width:1050px) {

.nav-wrap {
width:min(100% - 28px,1240px)
}

.main-nav {
gap:18px;
font-size:10px
}

.site-header.is-scrolled .main-nav {
gap:16px
}
}

@media(max-width:800px) {

.nav-wrap {
height:112px;
padding-top:5px
}

.brand {
margin:0 auto
}

.brand-logo {
width:190px;
height:62px
}

.nav-actions {
right:0;
bottom:14px
}

.main-nav {
display:none;
position:absolute;
left:0;
right:0;
top:112px;
width:auto;
background:#fff;
color:var(--ink);
border:1px solid var(--line);
border-radius:0 0 15px 15px;
padding:10px;
box-shadow:var(--shadow);
flex-direction:column;
align-items:stretch;
gap:0;
z-index:60
}

.main-nav.open {
display:flex
}

.main-nav a {
padding:13px 12px;
text-align:center
}

.main-nav a:after {
display:none
}

.site-header.is-scrolled .nav-wrap {
height:82px;
padding-top:2px
}

.site-header.is-scrolled .brand-logo {
width:165px;
height:54px
}

.site-header.is-scrolled .nav-actions {
bottom:10px
}

.site-header.is-scrolled .main-nav {
top:82px
}
}

@media(max-width:520px) {

.brand-logo {
width:175px;
height:57px
}

.nav-actions {
gap:5px
}

.icon-btn,.menu-btn {
width:38px;
height:38px
}
}

/* ============================================================
   ARTICLE DETAIL
   Edit this section for this page only.
   ============================================================ */

.article-hero {
background:var(--cream);
padding:55px 0 60px;
border-bottom:1px solid var(--line)
}

.article-hero .container {
max-width:920px
}
.crumb {
font-size:10px;
text-transform:uppercase;
letter-spacing:.1em;
color:#888;
margin-bottom:38px
}
.crumb a {
color:var(--wine)
}

.article-hero h1 {
font:600 clamp(42px,6vw,74px)/1.03 "Playfair Display",Georgia,serif;
letter-spacing:-.035em;
margin:10px 0 18px
}
.article-deck {
font:italic 21px/1.55 "Playfair Display";
color:#6d6860;
max-width:720px
}

.byline {
display:flex;
gap:12px;
align-items:center;
margin-top:25px
}
.avatar {
width:42px;
height:42px;
border-radius:50%;
display:grid;
place-items:center;
background:var(--wine);
color:#e7c779;
font-weight:800;
font-size:11px
}
.byline strong,.byline span {
display:block
}
.byline strong {
font-size:12px
}
.byline span {
font-size:10px;
color:#888;
margin-top:3px
}

.article-layout {
display:grid;
grid-template-columns:58px minmax(0,760px) 230px;
gap:32px;
justify-content:center;
padding:65px 0 90px
}
.tools {
position:sticky;
top:105px;
height:max-content
}
.tools button {
width:42px;
height:42px;
border:1px solid var(--line);
border-radius:50%;
background:#fff;
font-size:9px;
font-weight:800;
margin-bottom:8px;
cursor:pointer
}
.progress {
width:2px;
height:100px;
background:#e5e0d8;
margin:14px auto
}
.progress i {
display:block;
width:100%;
height:0;
background:var(--wine)
}

.cover {
margin:0 0 38px
}
.cover img {
height:470px;
object-fit:cover;
border-radius:20px
}
.cover figcaption,.inside figcaption {
font-size:10px;
color:#8d8880;
margin-top:9px
}

.article-text {
font:18px/1.9 Georgia,serif;
color:#302e2b
}
.article-text .lead {
font:600 24px/1.6 "Playfair Display",Georgia,serif
}
.article-text h2 {
font:600 31px/1.2 "Playfair Display",Georgia,serif;
margin:45px 0 17px
}
.article-text p {
margin:0 0 25px
}
.article-text blockquote {
border-left:3px solid var(--gold);
padding:8px 0 8px 24px;
margin:35px 0;
font:italic 23px/1.55 "Playfair Display";
color:var(--wine)
}
.inside {
margin:35px 0
}
.inside img {
max-height:430px;
object-fit:cover;
border-radius:14px
}

.toc {
position:sticky;
top:105px;
border-left:2px solid var(--line);
padding-left:17px
}
.toc a {
display:block;
font:600 13px/1.4 "Playfair Display";
margin:12px 0
}
.toc a:hover {
color:var(--wine)
}

.author {
background:var(--green);
color:#fff;
border-radius:17px;
padding:22px;
margin-top:28px
}
.author b {
display:grid;
place-items:center;
width:45px;
height:45px;
border-radius:50%;
background:#fff;
color:var(--wine);
margin-bottom:15px
}
.author h3 {
font:600 22px "Playfair Display";
margin:7px 0
}
.author p {
font-size:11px;
line-height:1.6;
color:#d7e1df
}
.author a {
font-size:10px;
color:#e5c77f;
font-weight:800
}

.end-share {
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:18px 0;
display:flex;
justify-content:space-between;
align-items:center;
font-size:9px;
font-weight:800;
letter-spacing:.1em
}
.end-share a {
border:1px solid var(--line);
border-radius:99px;
padding:8px 12px;
margin-left:5px;
letter-spacing:0
}

.comments {
margin-top:65px
}
.comments h2 {
font:600 30px "Playfair Display";
margin:0 0 25px
}
.comment {
display:grid;
grid-template-columns:38px 1fr;
gap:12px;
border-bottom:1px solid #eee8e0;
padding:18px 0
}
.comment-avatar {
width:38px;
height:38px;
border-radius:50%;
display:grid;
place-items:center;
background:#eee8df;
color:var(--wine);
font-weight:800;
font-size:11px
}
.comment strong {
font-size:11px
}
.comment p {
font:13px/1.6 "DM Sans";
color:#666;
margin:7px 0
}
.comment button {
border:0;
background:none;
color:var(--wine);
font-size:10px;
font-weight:800;
padding:0
}
.comment-form {
margin-top:25px
}
.comment-form textarea,.comment-form input {
border:1px solid var(--line);
background:#fff;
border-radius:10px;
padding:12px;
outline:0;
font:12px "DM Sans"
}
.comment-form textarea {
width:100%;
height:120px;
resize:vertical
}
.comment-form .row {
display:flex;
gap:8px;
margin-top:8px
}
.comment-form input {
flex:1
}
.comment-form button {
border:0;
background:var(--wine);
color:#fff;
border-radius:9px;
padding:0 17px;
font-weight:700
}

.related {
padding-bottom:90px
}
.related-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px
}
.related-card img {
height:180px;
object-fit:cover;
border-radius:13px;
margin-bottom:12px
}
.related-card h3 {
font:600 20px/1.25 "Playfair Display";
margin:5px 0
}

@media(max-width:1050px) {
.article-layout {
grid-template-columns:55px minmax(0,760px)
}
.toc {
display:none
}
}

@media(max-width:700px) {
.article-layout {
display:block;
padding-top:35px
}
.tools {
position:static;
margin-bottom:25px
}
.tools .progress {
display:none
}
.cover img {
height:330px
}
.article-text {
font-size:17px
}
.related-grid {
grid-template-columns:1fr 1fr
}
}

@media(max-width:520px) {
.article-hero h1 {
font-size:41px
}
.cover img {
height:260px
}
.article-text .lead {
font-size:21px
}
.article-text h2 {
font-size:27px
}
.comment-form .row {
display:grid
}
.comment-form button {
height:42px
}
.related-grid {
grid-template-columns:1fr
}
}

/* ============================================================
   MEDIA / GALLERY
   Edit this section for this page only.
   ============================================================ */

.media-hero {
background:var(--cream);
padding:70px 0;
border-bottom:1px solid var(--line)
}
.media-hero .container {
max-width:900px
}
.media-hero h1 {
font:600 clamp(43px,6vw,72px)/1.03 "Playfair Display";
letter-spacing:-.04em;
margin:0 0 18px
}
.media-hero h1 em {
color:var(--wine)
}
.media-hero p:last-child {
max-width:620px;
color:#777;
line-height:1.8;
font-size:14px
}

.media-section {
padding:55px 0 100px
}
.tabs {
display:flex;
gap:7px;
margin-bottom:30px
}
.tabs button {
border:1px solid var(--line);
background:#fff;
border-radius:99px;
padding:10px 15px;
font-size:11px;
font-weight:800;
cursor:pointer
}
.tabs button.active {
background:var(--wine);
color:#fff;
border-color:var(--wine)
}

.media-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px 17px
}
.media-card {
border:0;
background:none;
padding:0;
text-align:left;
cursor:pointer;
position:relative
}
.media-card img,.video-thumb {
width:100%;
height:235px;
object-fit:cover;
border-radius:14px;
margin-bottom:12px;
overflow:hidden
}
.media-card img {
transition:.35s
}
.media-card:hover img {
transform:scale(1.03)
}
.media-type {
position:absolute;
left:10px;
top:10px;
background:rgba(255,255,255,.94);
border-radius:99px;
padding:6px 9px;
color:var(--wine);
font-size:8px;
font-weight:900;
letter-spacing:.1em
}
.media-card small {
font-size:9px;
color:#928c85;
letter-spacing:.1em
}
.media-card h3 {
font:600 19px/1.25 "Playfair Display";
margin:6px 0
}
.video-thumb {
position:relative
}
.video-thumb img {
height:100%;
margin:0
}
.play {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:54px;
height:54px;
border-radius:50%;
background:rgba(124,11,11,.93);
color:white;
display:grid;
place-items:center
}

.lightbox {
position:fixed;
inset:0;
background:rgba(10,8,7,.94);
z-index:100;
display:none;
align-items:center;
justify-content:center;
padding:30px
}
.lightbox.open {
display:flex
}
.lb-close {
position:absolute;
right:25px;
top:15px;
border:0;
background:none;
color:#fff;
font-size:40px;
cursor:pointer
}
.lb-inner {
width:min(1050px,92vw)
}
.lb-inner img {
max-height:75vh;
object-fit:contain;
border-radius:8px
}
.lb-inner iframe {
width:100%;
aspect-ratio:16/9;
border:0;
border-radius:9px
}
.lb-caption {
color:#fff;
padding-top:12px
}
.lb-caption small {
color:#d7b56d
}
.lb-caption h3 {
font:500 24px "Playfair Display";
margin:5px 0
}

@media(max-width:1000px) {
.media-grid {
grid-template-columns:repeat(3,1fr)
}
}
@media(max-width:700px) {
.media-grid {
grid-template-columns:1fr 1fr
}
}
@media(max-width:500px) {
.media-grid {
grid-template-columns:1fr
}
.media-card img,.video-thumb {
height:280px
}
.media-hero h1 {
font-size:42px
}
}

/* ============================================================
   AUTHOR PROFILE
   Edit this section for this page only.
   ============================================================ */

.profile-hero {
background:var(--cream);
padding:72px 0 80px;
border-bottom:1px solid var(--line)
}

.profile-hero .container {
max-width:1000px
}
.profile-label {
font-size:10px;
letter-spacing:.12em;
font-weight:900;
color:var(--wine);
display:flex;
align-items:center;
gap:8px
}
.profile-label:before {
content:"";
width:28px;
height:2px;
background:var(--gold)
}

.profile-hero h1 {
font:600 clamp(48px,7vw,84px)/1 "Playfair Display",Georgia,serif;
letter-spacing:-.045em;
max-width:850px;
margin:18px 0
}
.profile-hero h1 em {
color:var(--wine)
}
.profile-hero p {
max-width:650px;
font-size:15px;
line-height:1.8;
color:#777
}

.profile-main {
display:grid;
grid-template-columns:310px minmax(0,650px);
gap:70px;
justify-content:center;
padding:75px 0 100px
}

.profile-photo {
position:sticky;
top:105px;
height:max-content
}
.portrait {
height:380px;
border-radius:22px;
overflow:hidden;
background:var(--green);
display:grid;
place-items:center
}
.portrait img {
width:100%;
height:100%;
object-fit:cover
}
.initial {
font:600 80px "Playfair Display";
color:#e4c278
}
.profile-photo .caption {
font-size:9px;
color:#999;
margin-top:10px;
text-transform:uppercase;
letter-spacing:.08em
}

.profile-copy .eyebrow {
margin-bottom:12px
}
.profile-copy h2 {
font:600 38px/1.1 "Playfair Display";
margin:0 0 18px
}
.profile-copy p {
font:16px/1.85 Georgia,serif;
color:#4d4944;
margin:0 0 22px
}
.profile-copy .dropcap:first-letter {
font:600 58px/40px "Playfair Display";
float:left;
padding-right:7px;
color:var(--wine)
}

.quote {
margin:35px 0;
padding:25px 28px;
border-left:3px solid var(--gold);
background:#faf7f1;
font:italic 21px/1.55 "Playfair Display";
color:var(--wine)
}

.profile-grid {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
margin-top:35px
}
.profile-item {
border:1px solid var(--line);
border-radius:14px;
padding:19px;
background:#fff
}
.profile-item span {
font-size:9px;
color:#999;
letter-spacing:.1em
}
.profile-item h3 {
font:600 21px "Playfair Display";
margin:7px 0 0
}

.profile-social {
display:flex;
gap:8px;
margin-top:35px
}
.profile-social a {
border:1px solid var(--line);
padding:10px 14px;
border-radius:99px;
font-size:10px;
font-weight:800
}
.profile-social a:hover {
background:var(--wine);
border-color:var(--wine);
color:#fff
}

.profile-works {
background:var(--cream);
padding:70px 0 90px
}
.work-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px
}
.work-card {
background:#fff;
border-radius:15px;
overflow:hidden
}
.work-card img {
height:190px;
object-fit:cover
}
.work-card div {
padding:18px
}
.work-card span {
font-size:9px;
color:var(--wine);
font-weight:900;
letter-spacing:.1em
}
.work-card h3 {
font:600 21px/1.25 "Playfair Display";
margin:8px 0
}
.work-card time {
font-size:9px;
color:#999
}

@media(max-width:800px) {
.profile-main {
grid-template-columns:1fr;
gap:35px
}
.profile-photo {
position:static;
max-width:420px
}
.work-grid {
grid-template-columns:1fr 1fr
}
}

@media(max-width:520px) {
.profile-hero h1 {
font-size:45px
}
.portrait {
height:320px
}
.profile-grid,.work-grid {
grid-template-columns:1fr
}
}


/* ============================================================
   FINAL NAVIGATION — REFERENCE DESIGN
   Logo di atas • navigasi centered • separator gold
   Edit bagian ini untuk mengubah tampilan header.
   ============================================================ */
.site-header {
  background: #004f4b;
  color: #fff;
  border-bottom: 0;
  box-shadow: none;
}
.site-header .topline {
  height: 0;
}
.nav-wrap {
  width: min(100% - 48px, 1500px);
  height: 350px;
  padding: 42px 0 0;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  position: relative;
}
.brand {
  width: 100%;
  justify-content: center;
  margin: 0;
}
.brand-logo {
  width: 920px;
  height: 215px;
  max-width: 82vw;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.main-nav {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 18px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.main-nav a {
  position: relative;
  padding: 8px 42px;
  color: black;
  white-space: nowrap;
  transition: color .25s ease, opacity .25s ease;
}
.main-nav a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 48px;
  transform: translateY(-50%);
  background: #d9b45f;
}
.main-nav a::after {
  left: 42px;
  right: 42px;
  bottom: -13px;
  width: auto;
  height: 2px;
  background: #d9b45f;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.main-nav a:hover,
.main-nav a.active {
  color: #f2d58d;
}
.main-nav a:hover::after,
.main-nav a.active::after {
  left: 42px;
  right: 42px;
  width: auto;
  transform: scaleX(1);
}
.nav-actions {
  display: none;
}
.site-header.is-scrolled {
  background: rgba(255,253,249,.98);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 35px rgba(31,20,11,.10);
}
.site-header.is-scrolled .nav-wrap {
  height: 112px;
  padding-top: 7px;
}
.site-header.is-scrolled .brand-logo {
  content: url("assets/logo.png");
  width: 320px;
  height: 70px;
}
.site-header.is-scrolled .main-nav {
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.site-header.is-scrolled .main-nav a {
  color: var(--ink);
  padding: 7px 20px;
}
.site-header.is-scrolled .main-nav a + a::before {
  height: 22px;
  background: #c89c4a;
}
.site-header.is-scrolled .main-nav a::after,
.site-header.is-scrolled .main-nav a:hover::after,
.site-header.is-scrolled .main-nav a.active::after {
  left: 20px;
  right: 20px;
  bottom: -3px;
  background: var(--wine);
}
@media (max-width: 1200px) {
  .nav-wrap { height: 340px; }
  .brand-logo { width: 760px; height: 175px; }
  .main-nav { font-size: 18px; }
  .main-nav a { padding-inline: 28px; }
  .main-nav a::after { left: 28px; right: 28px; }
  .main-nav a:hover::after,.main-nav a.active::after { left: 28px; right: 28px; }
}
@media (max-width: 900px) {
  .nav-wrap { height: 260px; padding-top: 25px; }
  .brand-logo { width: 620px; height: 135px; }
  .main-nav { font-size: 14px; margin-top: 10px; }
  .main-nav a { padding-inline: 17px; }
  .main-nav a + a::before { height: 30px; }
  .main-nav a::after { left: 17px; right: 17px; }
  .main-nav a:hover::after,.main-nav a.active::after { left: 17px; right: 17px; }
}
@media (max-width: 700px) {
  .nav-wrap { height: 116px; padding-top: 7px; width: calc(100% - 24px); }
  .brand-logo { width: 250px; height: 72px; }
  .main-nav { display: none; }
  .menu-btn { display: grid; place-items: center; }
  .nav-actions { display: flex; position: absolute; right: 0; bottom: 15px; }
  .site-header.is-scrolled .nav-wrap { height: 82px; }
  .site-header.is-scrolled .brand-logo { width: 190px; height: 58px; }
  .site-header.is-scrolled .nav-actions { display: flex; bottom: 11px; }
  .site-header.is-scrolled .main-nav { top: 82px; }
}

/* ============================================================
   NAVIGATION V2
   Struktur: Beranda • Pendidikan • Artikel • Kajian Islam ▼
   • Khutbah Jum'at • Media • Profil
   - Dropdown Kajian Islam
   - Scroll state menggunakan hysteresis di JavaScript
   - Tidak memakai transisi warna header agar tidak berkedip
   ============================================================ */
.site-header {
  transition: box-shadow .18s ease, border-color .18s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.site-header:not(.is-scrolled) {
  background: #004f4b;
  color: #fff;
}

.site-header.is-scrolled {
  background: rgba(255,253,249,.98);
  color: var(--ink);
}

.site-header:not(.is-scrolled) .nav-wrap {
  height: 350px;
}

.site-header.is-scrolled .nav-wrap {
  height: 112px;
}

.main-nav {
  align-items: center;
}

.main-nav > a,
.nav-dropdown-wrap {
  position: relative;
}

.nav-dropdown-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: uppercase;
  letter-spacing: inherit;
  cursor: pointer;
  position: relative;
  padding: 8px 42px;
  white-space: nowrap;
}

.nav-dropdown-toggle .dropdown-caret {
  display: inline-block;
  margin-left: 6px;
  font-size: 13px;
  transform: translateY(-1px);
  transition: transform .16s ease;
}

.nav-dropdown-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 48px;
  transform: translateY(-50%);
  background: #d9b45f;
}

.nav-dropdown-wrap:first-of-type::before {
  display: none;
}

.nav-dropdown-wrap:hover > .nav-dropdown-toggle,
.nav-dropdown-wrap.active > .nav-dropdown-toggle,
.nav-dropdown-wrap.open > .nav-dropdown-toggle {
  color: #f2d58d;
}

.nav-dropdown-wrap.open .dropdown-caret {
  transform: rotate(180deg) translateY(1px);
}

.nav-dropdown {
  position: absolute;
  z-index: 100;
  top: calc(100% + 13px);
  left: 50%;
  min-width: 210px;
  padding: 8px;
  transform: translate(-50%, -6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #fffdf9;
  color: var(--ink);
  border: 1px solid rgba(31,20,11,.12);
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(31,20,11,.16);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}

.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  transform: translateX(-50%) rotate(45deg);
  background: #fffdf9;
  border-left: 1px solid rgba(31,20,11,.12);
  border-top: 1px solid rgba(31,20,11,.12);
}

.nav-dropdown-wrap:hover .nav-dropdown,
.nav-dropdown-wrap:focus-within .nav-dropdown,
.nav-dropdown-wrap.open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-dropdown a {
  display: block;
  padding: 11px 13px;
  color: var(--ink);
  font: 700 12px/1.2 var(--font-body, "DM Sans", Arial, sans-serif);
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 8px;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background: rgba(0,79,75,.08);
  color: var(--green);
  outline: none;
}

.site-header.is-scrolled .nav-dropdown-wrap::before {
  height: 22px;
  background: #c89c4a;
}

.site-header.is-scrolled .nav-dropdown-toggle {
  color: var(--ink);
  padding: 7px 20px;
  font: 800 11px/1 var(--font-body, "DM Sans", Arial, sans-serif);
}

.site-header.is-scrolled .nav-dropdown-toggle:hover,
.site-header.is-scrolled .nav-dropdown-wrap.active .nav-dropdown-toggle,
.site-header.is-scrolled .nav-dropdown-wrap.open .nav-dropdown-toggle {
  color: var(--wine);
}

.site-header.is-scrolled .nav-dropdown {
  top: calc(100% + 3px);
}

@media (max-width: 1200px) {
  .nav-dropdown-toggle { padding-inline: 28px; }
}

@media (max-width: 900px) {
  .nav-dropdown-toggle { padding-inline: 17px; }
  .nav-dropdown-wrap::before { height: 30px; }
}

@media (max-width: 700px) {
  .site-header:not(.is-scrolled) .nav-wrap,
  .site-header.is-scrolled .nav-wrap {
    height: 116px;
  }

  .main-nav.open {
    display: flex;
  }

  .nav-dropdown-wrap {
    width: 100%;
  }

  .nav-dropdown-wrap::before {
    display: none;
  }

  .nav-dropdown-toggle {
    width: 100%;
    padding: 13px 12px;
    text-align: left;
    color: var(--ink);
    font-size: 13px;
  }

  .nav-dropdown {
    position: static;
    min-width: 0;
    margin: 0 4px 5px;
    padding: 4px;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
    box-shadow: none;
    border-radius: 9px;
    background: #f7f4ee;
  }

  .nav-dropdown::before { display: none; }
  .nav-dropdown-wrap.open .nav-dropdown { display: block; transform: none; }
  .nav-dropdown a { padding: 10px 13px 10px 25px; font-size: 11px; }
  .site-header.is-scrolled .nav-dropdown-toggle { padding: 13px 12px; font-size: 13px; }
}

/* V2 separator normalization: every desktop navigation item gets one separator. */
@media (min-width: 701px) {
  .main-nav > * + *::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 48px;
    transform: translateY(-50%);
    background: #d9b45f;
  }
  .site-header.is-scrolled .main-nav > * + *::before {
    height: 22px;
    background: #c89c4a;
  }
}

@media (max-width: 700px) {
  .main-nav > * + *::before { display: none !important; }
}

/* ============================================================
   V3 — HOMEPAGE CONTENT SECTIONS & KAJIAN ISLAM PAGES
   ============================================================ */
.category-home-section {
    padding-top: 54px;
    padding-bottom: 70px;
}
.category-home-section + .category-home-section {
    border-top: 1px solid var(--line);
}
.article-grid-section {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.islam-home-section {
    background: #f4f0e8;
    padding: 82px 0 88px;
}
.islam-home-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 42px;
    align-items: start;
}
.islam-home-copy > p {
    color: #6f6a63;
    font-size: 13px;
    line-height: 1.75;
    margin: 0 0 24px;
}
.islam-links {
    border-top: 1px solid var(--line);
}
.islam-links a {
    display: grid;
    grid-template-columns: 32px 1fr 24px;
    gap: 8px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}
.islam-links a span,
.islam-subcards a span {
    color: var(--wine);
    font-size: 10px;
    font-weight: 800;
}
.islam-links a strong,
.islam-subcards a strong {
    font-size: 13px;
}
.islam-links a i,
.islam-subcards a i {
    font-style: normal;
    text-align: right;
}
.islam-links a:hover strong,
.islam-subcards a:hover strong {
    color: var(--wine);
}
.islam-article-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.islam-page-hero {
    padding: 78px 0 70px;
}
.islam-page-hero .container {
    max-width: 1050px;
}
.islam-page-hero h1 {
    font: 600 clamp(42px, 6vw, 72px)/1.02 "Playfair Display", Georgia, serif;
    margin: 8px 0 18px;
    letter-spacing: -.035em;
}
.islam-page-hero p:last-child {
    max-width: 650px;
    color: #716b64;
    font-size: 15px;
    line-height: 1.8;
    margin: 0;
}
.islam-page-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 42px;
}
.islam-page-nav a {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 999px;
    padding: 10px 17px;
    font-size: 11px;
    font-weight: 800;
}
.islam-page-nav a.active,
.islam-page-nav a:hover {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}
.islam-subcards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 62px;
}
.islam-subcards a {
    display: grid;
    grid-template-columns: 32px 1fr 24px;
    grid-template-rows: auto auto;
    gap: 6px 10px;
    padding: 24px;
    background: var(--green);
    color: #fff;
    border-radius: 16px;
}
.islam-subcards a span { grid-row: 1 / span 2; color: var(--gold); }
.islam-subcards a strong { font-family: "Playfair Display", Georgia, serif; font-size: 22px; }
.islam-subcards a small { color: rgba(255,255,255,.72); line-height: 1.55; }
.islam-subcards a i { grid-column: 3; grid-row: 1 / span 2; color: var(--gold); }
.islam-page-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Dropdown desktop: submenu is a real page navigation, not a query filter. */
.nav-dropdown-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.nav-dropdown-toggle {
    position: relative;
    border: 0;
    background: transparent;
    color: black;
    font: inherit;
    text-transform: uppercase;
    padding: 18px 0 16px;
    cursor: pointer;
    white-space: nowrap;
}
.nav-dropdown-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 6px;
    height: 2px;
    background: var(--gold);
    transition: left .2s ease, right .2s ease;
}
.nav-dropdown-wrap:hover .nav-dropdown-toggle::after,
.nav-dropdown-wrap.active .nav-dropdown-toggle::after {
    left: 0;
    right: 0;
}
.site-header.is-scrolled .nav-dropdown-toggle::after {
    background: var(--wine);
}
.nav-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translate(-50%, -8px);
    min-width: 190px;
    padding: 8px;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(31,20,11,.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.nav-dropdown-wrap:hover .nav-dropdown,
.nav-dropdown-wrap.open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}
.nav-dropdown a {
    display: block;
    padding: 11px 13px !important;
    border-radius: 8px;
    color: var(--ink) !important;
    font-size: 11px;
    text-transform: none;
}
.nav-dropdown a::after { display: none; }
.nav-dropdown a:hover { background: #f5f1ea; color: var(--wine) !important; }

@media(max-width:900px) {
    .islam-home-grid { grid-template-columns: 1fr; }
    .islam-article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .article-grid-section, .islam-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width:700px) {
    .islam-subcards { grid-template-columns: 1fr; }
    .islam-article-grid, .article-grid-section, .islam-page-grid { grid-template-columns: 1fr; }
    .nav-dropdown-wrap { width: 100%; flex-direction: column; align-items: stretch; }
    .nav-dropdown-toggle { width: 100%; text-align: center; padding: 13px 12px; }
    .nav-dropdown-toggle::after { display: none; }
    .nav-dropdown { position: static; transform: none; width: 100%; min-width: 0; display: none; opacity: 1; visibility: visible; pointer-events: auto; box-shadow: none; border: 0; background: #f8f5ef; }
    .nav-dropdown-wrap.open .nav-dropdown { display: block; }
}