/* ============================================================
   YANUAR UNIFIED DESIGN — matching landingyanuarv1.html style
   ============================================================ */

:root {
  --navy:        #000926;
  --navy-mid:    #0B1F4B;
  --navy-light:  #132860;
  --teal:        #006A65;
  --teal-light:  #E0F5F4;
  --teal-bright: #00897B;
  --bg:          #F7F9FB;
  --white:       #FFFFFF;
  --text:        #111827;
  --muted:       #4B5563;
  --border:      #E5E7EB;
  --accent:      #F59E0B;
  --shadow:      0 8px 40px rgba(0,9,38,0.10);
  --shadow-lg:   0 20px 60px rgba(0,9,38,0.18);
  --radius:      20px;
  --radius-sm:   12px;
}

/* ── FONT + BODY ── */
body {
  font-family: 'Manrope', sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  line-height: 1.7 !important;
}

/* ── HIDE DIVI HEADER (replaced by custom nav) ── */
#main-header,
#main-header .et_header_style_left,
#main-header .et_menu_container { display: none !important; }

/* push content below our 70px custom nav */
#page-container { padding-top: 70px !important; }
#et-main-area { padding-top: 0 !important; }

/* ── CUSTOM YANUAR NAVBAR ── */
#yanuar-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  height: 70px; padding: 0 5%;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0,9,38,0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 30px rgba(0,0,0,0.3);
  font-family: 'Manrope', sans-serif;
}
#yanuar-nav .yn-logo {
  font-weight: 800; font-size: 1.05rem; color: #fff;
  text-decoration: none; letter-spacing: -0.02em; line-height: 1.25;
}
#yanuar-nav .yn-logo small {
  display: block; font-size: 0.72rem; font-weight: 600;
  color: rgba(255,255,255,0.7); letter-spacing: 0.03em;
}
#yanuar-nav .yn-links {
  display: flex; align-items: center; gap: 1.75rem; list-style: none;
  margin: 0; padding: 0;
}
#yanuar-nav .yn-links a {
  color: rgba(255,255,255,0.78); text-decoration: none;
  font-size: 0.85rem; font-weight: 500; transition: color 0.2s;
}
#yanuar-nav .yn-links a:hover,
#yanuar-nav .yn-links a.yn-active { color: #fff; }
#yanuar-nav .yn-book {
  background: var(--teal); color: #fff;
  padding: 9px 20px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 700;
  text-decoration: none; transition: background 0.2s, transform 0.2s;
  white-space: nowrap;
}
#yanuar-nav .yn-book:hover { background: var(--teal-bright); transform: translateY(-1px); }
#yanuar-nav .yn-share {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px 7px 11px; border-radius: 999px;
  background: #F59E0B; color: #000;
  font-size: 0.8rem; font-weight: 700;
  cursor: pointer; border: none;
  transition: background .15s, transform .15s; letter-spacing: 0.01em;
  font-family: 'Manrope', sans-serif;
}
#yanuar-nav .yn-share:hover { background: #FBBF24; transform: scale(1.05); }
#yanuar-nav .yn-hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; background: none; border: none; padding: 4px;
}
#yanuar-nav .yn-hamburger span {
  display: block; width: 24px; height: 2px;
  background: #fff; border-radius: 2px; transition: all 0.3s;
}
#yanuar-mobile {
  display: none; position: fixed; top: 70px; left: 0; right: 0;
  background: rgba(0,9,38,0.97); backdrop-filter: blur(20px);
  padding: 1.5rem 5%; flex-direction: column; gap: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.1); z-index: 8999;
  font-family: 'Manrope', sans-serif;
}
#yanuar-mobile.open { display: flex; }
#yanuar-mobile a {
  color: rgba(255,255,255,0.85); text-decoration: none;
  font-size: 1rem; font-weight: 500; padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color 0.2s;
}
#yanuar-mobile a:hover { color: #fff; }
#yanuar-mobile .yn-book { text-align: center; margin-top: 0.5rem; }
#yanuar-mobile .yn-share { text-align: center; justify-content: center; }

/* ── SHARE TOAST ── */
#yn-toast {
  position: fixed; top: 78px; right: 1.2rem; z-index: 9100;
  background: #111; color: #fff; padding: 7px 14px; border-radius: 20px;
  font-size: 13px; display: none; pointer-events: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35); font-family: 'Manrope', sans-serif;
}

/* ── POST HERO (single post title area) ── */
.et_post_meta_wrapper {
  background: linear-gradient(135deg, var(--navy-mid) 0%, var(--navy) 100%) !important;
  padding: 5rem 5% 3rem !important;
  margin: 0 !important;
}
.et_post_meta_wrapper .entry-title {
  font-family: 'DM Serif Display', serif !important;
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  color: #fff !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  max-width: 800px !important;
}
.et_post_meta_wrapper .post-meta,
.et_post_meta_wrapper .post-meta a {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.875rem !important;
  margin-top: 1rem !important;
}

/* ── CONTENT AREA ── */
.entry-content {
  font-family: 'Manrope', sans-serif !important;
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
  color: var(--text) !important;
  max-width: 780px !important;
  margin: 0 auto !important;
  padding: 2.5rem 5% 4rem !important;
}
.entry-content h1, .entry-content h2,
.entry-content h3, .entry-content h4 {
  font-family: 'DM Serif Display', serif !important;
  color: var(--navy) !important;
  margin: 2rem 0 0.75rem !important;
  line-height: 1.25 !important;
}
.entry-content h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem) !important; }
.entry-content h3 { font-size: clamp(1.15rem, 2vw, 1.5rem) !important; }
.entry-content p  { margin-bottom: 1.25rem !important; }
.entry-content ul, .entry-content ol {
  padding-left: 1.5rem !important; margin-bottom: 1.25rem !important;
}
.entry-content li { margin-bottom: 0.5rem !important; }
.entry-content strong { color: var(--navy) !important; }
.entry-content em { color: var(--teal) !important; font-style: italic !important; }
.entry-content a { color: var(--teal) !important; }
.entry-content a:hover { color: var(--teal-bright) !important; }
.entry-content blockquote {
  border-left: 4px solid var(--teal) !important;
  padding: 1rem 1.5rem !important;
  background: var(--teal-light) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  margin: 1.5rem 0 !important;
  color: var(--navy-mid) !important;
  font-style: italic !important;
}
.entry-content img {
  border-radius: var(--radius-sm) !important;
  max-width: 100% !important;
}

/* ── DIVI PAGE HEADING MODULE ── */
.et_pb_heading_container h1,
.et_pb_heading_container h2 {
  font-family: 'DM Serif Display', serif !important;
  color: var(--navy) !important;
}
.et_pb_section_0 .et_pb_heading_container h1 {
  font-size: clamp(2rem, 4vw, 3rem) !important;
}

/* ── DIVI POST SLIDER (Artikel page) ── */
.et_pb_post_slider .et_pb_slide {
  border-radius: var(--radius) !important;
  overflow: hidden !important;
}
.et_pb_post_slider .et_pb_slide_overlay_container {
  background: linear-gradient(to top, rgba(0,9,38,0.92) 0%, rgba(0,9,38,0.4) 100%) !important;
}
.et_pb_post_slider .et_pb_slide_title a {
  font-family: 'DM Serif Display', serif !important;
  font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.et_pb_post_slider .et_pb_slide_content { color: rgba(255,255,255,0.8) !important; }
.et_pb_post_slider .et_pb_more_button {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  border-radius: 999px !important;
  padding: 10px 24px !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
}
.et_pb_post_slider .et_pb_more_button:hover {
  background: var(--teal-bright) !important;
}

/* ── DIVI BLOG MODULE (post grid) ── */
.et_pb_blog_grid .et_pb_post,
.et_pb_posts .et_pb_post {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  overflow: visible !important;
  background: #fff !important;
  border: 1px solid var(--border) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Clip thumbnail only, not the whole card */
.et_pb_blog_grid .et_pb_post .et_pb_image_container,
.et_pb_posts .et_pb_post .et_pb_image_container {
  border-radius: var(--radius) var(--radius) 0 0 !important;
  overflow: hidden !important;
}
/* Card body padding */
.et_pb_blog_grid .et_pb_post .post-content,
.et_pb_posts .et_pb_post .post-content,
.et_pb_blog_grid .et_pb_post .entry-title,
.et_pb_posts .et_pb_post .entry-title,
.et_pb_blog_grid .et_pb_post .post-meta,
.et_pb_posts .et_pb_post .post-meta {
  padding-left: 1.2rem !important;
  padding-right: 1.2rem !important;
}
.et_pb_blog_grid .et_pb_post .entry-title,
.et_pb_posts .et_pb_post .entry-title {
  padding-top: 1rem !important;
}
.et_pb_blog_grid .et_pb_post .post-content,
.et_pb_posts .et_pb_post .post-content {
  padding-bottom: 1.2rem !important;
  flex: 1 !important;
}
.et_pb_blog_grid .et_pb_post:hover,
.et_pb_posts .et_pb_post:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
}
.et_pb_blog_grid .et_pb_post .entry-title a,
.et_pb_posts .et_pb_post .entry-title a {
  font-family: 'DM Serif Display', serif !important;
  color: var(--navy) !important;
  font-size: 1.2rem !important;
  line-height: 1.3 !important;
}
.et_pb_blog_grid .post-meta,
.et_pb_posts .post-meta {
  color: var(--muted) !important; font-size: 0.8rem !important;
}
.et_pb_blog_grid .more-link,
.et_pb_posts .more-link {
  color: var(--teal) !important; font-weight: 700 !important;
}
.et_pb_blog_grid .more-link:hover,
.et_pb_posts .more-link:hover { color: var(--teal-bright) !important; }

/* ── DIVI SECTIONS ── */
.et_pb_section { position: relative !important; }

/* ── FOOTER ── */
#main-footer {
  background: var(--navy) !important;
  color: rgba(255,255,255,0.7) !important;
  font-family: 'Manrope', sans-serif !important;
}
#main-footer a { color: rgba(255,255,255,0.7) !important; }
#main-footer a:hover { color: #fff !important; }
#footer-bottom {
  background: rgba(0,0,0,0.3) !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
}
#footer-info, #footer-bottom { color: rgba(255,255,255,0.5) !important; font-size: 0.8rem !important; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  #yanuar-nav .yn-links { display: none; }
  #yanuar-nav .yn-hamburger { display: flex; }
  #yanuar-nav .yn-book { display: none; }
  #yanuar-nav .yn-share { padding: 6px 12px; font-size: 0.75rem; }
  .et_post_meta_wrapper { padding: 4rem 5% 2rem !important; }
  .entry-content { padding: 2rem 5% 3rem !important; }
}
@media (min-width: 769px) {
  #yanuar-nav .yn-hamburger { display: none; }
}