/* ===== Artikel & Berita — pakai var(--x) yang sama dengan site.css utama ===== */
.article-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.5rem; margin-top:2rem; }
.article-card{ display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--parchment-200); border-radius:14px; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease; }
.article-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -12px rgba(20,20,15,0.25); }
.article-card-img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.article-card-body{ padding:1.1rem 1.2rem 1.3rem; }
.article-card-date{ font-family:var(--font-mono); font-size:0.7rem; color:var(--soil-600); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.4rem; }
.article-card-title{ font-family:var(--font-display); font-size:1.05rem; line-height:1.35; margin:0 0 0.5rem; color:var(--char-900); }
.article-card-excerpt{ font-size:0.85rem; color:var(--char-500); line-height:1.5; margin:0; }

.article-content{ font-size:1rem; line-height:1.75; color:var(--char-900); }
.article-content p{ margin:0 0 1.1rem; }
.article-content img{ max-width:100%; border-radius:10px; margin:1rem 0; }
.article-content h2, .article-content h3{ font-family:var(--font-display); margin:1.6rem 0 0.8rem; }
.article-content ul, .article-content ol{ margin:0 0 1.1rem 1.3rem; }
.article-content blockquote{ border-left:3px solid var(--soil-500); padding-left:1rem; color:var(--char-500); font-style:italic; margin:1.2rem 0; }

.article-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:0.7rem; margin-top:1.5rem; }
.article-gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; }

/* ===== Feed gaya Instagram (khusus section beranda) — slider horizontal ===== */
.ig-feed-track{ display:flex; gap:1.1rem; overflow-x:auto; padding:0.25rem 0.25rem 1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.ig-feed-track::-webkit-scrollbar{ height:6px; }
.ig-post{ flex:0 0 260px; scroll-snap-align:start; background:#fff; border:1px solid var(--parchment-200); border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; display:block; transition:transform .18s ease, box-shadow .18s ease; }
.ig-post:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -12px rgba(20,20,15,0.22); }
.ig-post-head{ display:flex; align-items:center; gap:0.55rem; padding:0.7rem 0.85rem; }
.ig-post-avatar{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--soil-500),var(--forest-700)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.66rem; flex-shrink:0; }
.ig-post-name{ font-weight:700; font-size:0.78rem; color:var(--char-900); }
.ig-post-time{ font-size:0.68rem; color:var(--char-500); }
.ig-post-img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.ig-post-imgwrap{ position:relative; overflow:hidden; }
.ig-post-hover{
  position:absolute; inset:0; background:rgba(20,17,12,0.55); opacity:0; transition:opacity .2s ease;
  display:flex; align-items:center; justify-content:center; padding:1rem; text-align:center;
}
.ig-post-hover span{ color:#fff; font-family:var(--font-display); font-weight:600; font-size:1rem; line-height:1.35; }
.ig-post:hover .ig-post-hover{ opacity:1; }
/* ===== Modal Masuk/Daftar — luxury 2 kolom (panel brand + form) ===== */
.auth-luxury-card{ max-width:820px !important; padding:0 !important; overflow:hidden; border-radius:18px; max-height:92vh; max-height:92dvh; overflow-y:auto; }
.auth-luxury-close{ position:absolute; top:1rem; right:1rem; z-index:6; background:var(--parchment-100); border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:var(--char-900); box-shadow:0 2px 8px rgba(0,0,0,0.15); }
.auth-luxury-layout{ display:grid; grid-template-columns:1fr 1.15fr; min-height:520px; }
@media (max-width:720px){
  .auth-luxury-layout{ grid-template-columns:1fr; min-height:0; }
  .auth-luxury-brand{ display:none !important; }
  .auth-luxury-form{ padding:2.6rem 1.3rem 1.6rem !important; }
  .auth-luxury-close{ top:0.7rem; right:0.7rem; }
}

.auth-luxury-brand{
  background:linear-gradient(160deg,var(--forest-950) 0%,var(--forest-700) 100%);
  color:#fff; padding:2.6rem 2.2rem; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden;
}
.auth-luxury-brand::after{ content:""; position:absolute; right:-60px; bottom:-60px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,0.06); }
.auth-luxury-brand::before{ content:""; position:absolute; left:-40px; top:-40px; width:140px; height:140px; border-radius:50%; background:rgba(191,158,90,0.12); }
.auth-luxury-logo{ width:170px; height:auto; object-fit:contain; margin-bottom:1.4rem; position:relative; z-index:1; display:block; filter:drop-shadow(0 8px 16px rgba(0,0,0,0.3)); }
.auth-luxury-brandname{ font-family:var(--font-display); font-size:1.5rem; line-height:1.25; font-weight:700; margin-bottom:0.8rem; position:relative; z-index:1; }
.auth-luxury-tagline{ font-size:0.88rem; color:var(--parchment-100); line-height:1.5; margin-bottom:1.6rem; position:relative; z-index:1; }
.auth-luxury-features{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.8rem; position:relative; z-index:1; }
.auth-luxury-features li{ font-size:0.84rem; padding-left:1.5rem; position:relative; color:var(--parchment-50); }
.auth-luxury-features li::before{ content:"✓"; position:absolute; left:0; color:var(--gold-500); font-weight:700; }

.auth-luxury-form{ padding:2.6rem 2.4rem; display:flex; flex-direction:column; justify-content:center; }
.auth-luxury-title{ font-family:var(--font-display); font-size:1.5rem; margin:0 0 0.3rem; color:var(--char-900); }
.auth-luxury-subtitle{ font-size:0.85rem; color:var(--char-500); margin:0 0 1.4rem; }
.auth-luxury-tabs{ display:flex; gap:0; margin-bottom:1.4rem; border:1px solid var(--parchment-200); border-radius:10px; overflow:hidden; }
.auth-luxury-tabs .auth-tab{ flex:1; padding:0.7rem; font-size:0.85rem; font-weight:700; border:none; cursor:pointer; background:#fff; color:var(--char-700); transition:background .15s,color .15s; }
.auth-luxury-tabs .auth-tab.active{ background:var(--forest-950); color:#fff; }

/* Wrapper modal: pastikan tetap bisa discroll saat keyboard mobile muncul & viewport menyempit */
#authModal.modal-wrap{ overflow-y:auto !important; padding:1.5rem 1rem !important; box-sizing:border-box; }
@media (max-width:720px){ #authModal.modal-wrap{ align-items:flex-start !important; } }
@media (max-width:480px){ #authModal.modal-wrap{ padding:0.75rem !important; } }
.ig-post-actions{ display:flex; gap:0.9rem; padding:0.7rem 0.85rem; font-size:0.78rem; color:var(--char-700); }

/* ===== Halaman Detail Artikel — breadcrumb, 2 kolom + sidebar ===== */
.article-breadcrumb{ font-size:0.8rem; color:var(--char-500); margin-bottom:1.2rem; }
.article-breadcrumb a{ color:var(--soil-600); text-decoration:none; }
.article-breadcrumb a:hover{ text-decoration:underline; }

.article-layout{ display:grid; grid-template-columns:1fr 300px; gap:2.5rem; align-items:start; }
@media (max-width:860px){ .article-layout{ grid-template-columns:1fr; } }

.article-title{ font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.25; margin:0 0 0.6rem; }
.article-byline{ font-size:0.82rem; color:var(--char-500); margin-bottom:1rem; }
.article-share{ display:flex; align-items:center; gap:0.6rem; margin-bottom:1.5rem; font-size:0.85rem; color:var(--char-700); }
.share-btn{ width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:0.9rem; text-decoration:none; }
.share-fb{ background:#3b5998; }
.share-x{ background:#111; }
.share-wa{ background:#25D366; }
.article-cover{ width:100%; border-radius:12px; margin-bottom:1.5rem; }

.sidebar-box{ background:#fff; border:1px solid var(--parchment-200); border-radius:12px; padding:1.2rem; margin-bottom:1.3rem; }
.sidebar-heading{ font-weight:800; font-size:0.82rem; letter-spacing:0.03em; color:var(--char-900); padding-bottom:0.5rem; margin-bottom:0.7rem; border-bottom:3px solid var(--soil-600); display:inline-block; }
.sidebar-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.7rem; }
.sidebar-list a{ font-size:0.85rem; line-height:1.4; color:var(--char-700); text-decoration:none; }
.sidebar-list a:hover{ color:var(--soil-600); text-decoration:underline; }