/* /adiwira/theme/adam/style.css */
:root {
  --adam-bg: #f9fafb;
  --adam-card: #ffffff;
  --adam-accent: #246;
  --adam-muted: #666;
}

/* navigasi utama */
    :root{
      --page-gutter: 16px;
      --header-top-h: 72px;
      --nav-h: 56px;
      --accent: #FFE607;
      --menu-transition: 280ms;
      --menu-max-mobile: 1200px;
      --mobile-break: 900px;
    }
    @media (min-width:1100px){ :root { --page-gutter: 80px; } }

    *{box-sizing:border-box;margin:0;padding:0;}
    html,body{height:100%}
    body{font-family:Arial, sans-serif;background:#fff;color:#222;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

    /* body padding when header/nav fixed */
    body.has-fixed-nav { padding-top: var(--fixed-offset, 0px); }

    .main-header{ width:100%; background:#fff; color:#c03232; position:relative; z-index:2000; }

    .header-top{
      display:flex; justify-content:space-between; align-items:center;
      padding:.5rem var(--page-gutter); gap:12px; min-height:var(--header-top-h);
      margin: 0px 170px;
    }

    .logo{ height:64px; max-height:64px; width:auto; display:block; }
    @media (max-width:900px){ .logo{ height:44px; max-height:44px; } }

    .header-right{ display:flex; align-items:center; gap:10px; }
    .social-section{ display:flex; gap:10px; align-items:center; }
    .social-section a{ display:inline-flex; align-items:center; justify-content:center; line-height:1; text-decoration:none; }
    .social-section a img{ display:block; width:34px; height:34px; }
    @media (max-width:900px){ .social-section{ display:none; } }

    .nav-toggle{
      background:transparent; border:2px solid rgba(0,0,0,.85);
      color: #1a1a1a; font-size:1.05rem; padding:.22rem .6rem; cursor:pointer;
      border-radius:6px; display:none; line-height:1; background-color: rgba(255,255,255,0.92);
      -webkit-tap-highlight-color: transparent;
    }

    /* ---------- nav ---------- */
    .nav-wrap{
      width:100%; left:0; right:0; z-index:3000;
      background: linear-gradient(-90deg,#003974 0%,#0067D0 100%);
      border-bottom:3px solid var(--accent);
      position: static;
    }
    .nav-inner{ padding: 0 var(--page-gutter); position: relative; } /* position:relative used for absolute mobile menu */

    .menu{
      display:flex; justify-content:center; align-items:center; gap:0;
      background:transparent; list-style:none; margin:0; padding:0; width:100%; flex-wrap:nowrap;
    }
    .menu>li{ position:relative; border-bottom: 1px solid rgba(255,255,255,0.02); }
    .menu a{ color:white; text-decoration:none; padding:.78rem 1.2rem; display:block; font-weight:500; white-space:nowrap; }

.submenu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#004080;
  list-style:none;
  min-width:220px;
  z-index:9999;
  margin:0; padding:0;
  box-shadow:0 6px 18px rgba(2,19,60,0.15);
}

.submenu > li.has-submenu {
  position: relative; 
}
    .submenu li{ border-bottom:1px solid rgba(255,255,255,0.03); }
    .submenu li a{ padding:.6rem 1rem; white-space:nowrap; }
    .submenu.active{ display:block; position:static; }

    .indicator{ margin-left:.4rem; font-size:.95em; pointer-events:none; display:inline-block; transition:transform .18s ease; }
    li.has-submenu.open > a .indicator{ transform:rotate(180deg); }

    @media (min-width:901px) and (hover:hover) and (pointer: fine){
      .has-submenu:hover>.submenu{ display:block; }
      .submenu .has-submenu:hover>.submenu{ left:100%; top:0; display:block; position:absolute; }
    }

    /* ================= MOBILE — overlay menu (fix slider push) ================= */
    @media (max-width:900px){
      .nav-toggle{ display:block; }
      .header-top{margin: 0px;}

      /*
        Important change:
        - .menu becomes absolutely positioned inside .nav-inner (which is relative),
          so it overlays content and DOES NOT change document flow (won't push slider).
      */
      .nav-inner{ position: relative; z-index: 9998; } /* ensure above slider but below header if needed */

      .menu{
        position: absolute;
        top: 100%; /* directly below nav-inner (i.e., below headerTop/nav bar) */
        left: 0;
        right: 0;
        display:flex;
        flex-direction:column;
        width:100%;
        max-height: 0;           /* collapsed by default */
        overflow: hidden;
        transition: max-height var(--menu-transition) ease, opacity var(--menu-transition) ease;
        opacity: 0;
        background: linear-gradient(-90deg,#003974 0%,#0067D0 100%);
        box-shadow: 0 8px 30px rgba(4,20,45,0.22);
        z-index: 9999; /* sit above slider */
      }

      /* when active, expand (overlay) — still using max-height for smoothness */
      .menu.active{
        max-height: var(--menu-max-mobile);
        opacity: 1;
      }

      /* menu items stack full width */
      .menu>li{ width:100%; border-bottom:1px solid rgba(255,255,255,0.04); }
      .menu>li>a{ padding:.9rem 1rem; }

      /* submenus inline and tappable */
      .submenu{ position: static; display:none; background: rgba(0,64,128,0.98); }
      .submenu.active{ display:block; }

      .menu .indicator{ float:right; margin-left:0; }
      .menu .submenu li>a{ padding-left:2.2rem; padding-top:.65rem; padding-bottom:.65rem; font-size:0.98rem; }
      .menu .submenu .submenu li>a{ padding-left:3.8rem; font-size:0.97rem; }
      .has-submenu> a{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
    }

    /* desktop nav fixed */
    .nav-wrap.fixed{ position:fixed; top:0; left:0; right:0; z-index:10000; animation:slideDown .12s ease; box-shadow:0 6px 18px rgba(2,19,60,0.12) }
    /* mobile header fixed (logo + nav) */
    .main-header.fixed{ position:fixed; top:0; left:0; right:0; z-index:11000; animation:slideDown .12s ease; box-shadow:0 6px 18px rgba(2,19,60,0.12); background:#fff; }

    @keyframes slideDown{ from{ transform:translateY(-6px); opacity:.97 } to{ transform:translateY(0); opacity:1 } }

    .menu>li>a:hover{ background:rgba(1,42,87,0.85); }
    .submenu li a:hover{ background: rgba(1,42,87,0.85); }
    .menu a:focus{ outline:3px solid rgba(255,255,255,0.12); outline-offset:2px; }
/* nav end */

body.adam-body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--adam-bg);
  color: #222;
}

.adam-app {
  max-width: 1400px;
  margin: 1.5rem auto;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
  background: var(--adam-card);
  border-radius: 8px;
  overflow: hidden;
}

body.ad-body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--adam-bg);
  color: #222;

  /* Tambahkan ini supaya flex bekerja */
  display: flex;
  align-items: center;     /* vertikal center */
  justify-content: center; /* horizontal center */
  min-height: 100vh;
}

.ad-app {
  width: 95%;
  max-width: 1750px;
  margin: 1.5rem auto;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
  background: var(--adam-card);
  border-radius: 8px;
  overflow: hidden;

  /* solusi ideal */
  height: fit-content;
}

.adam-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.adam-brand { margin: 0; font-size: 1.125rem; }
.adam-sub { color: var(--adam-muted); font-size: .85rem; }

.adam-layout { display: flex; min-height: 420px; }
.adam-aside { width: 220px; border-right: 1px solid #f0f0f0; padding: 1rem; background: #fbfcfd; }
.adam-main { flex: 1; padding: 1.25rem; }

.adam-nav-list { list-style: none; padding: 0; margin: 0; }
.adam-nav-item { margin-bottom: .5rem; }
.adam-nav-link { text-decoration: none; color: #123; display: inline-block; padding: .35rem .5rem; border-radius: 6px; }
.adam-nav-link:hover { background: rgba(36,70,102,0.06); }

.adam-footer { padding: .75rem 1rem; border-top: 1px solid #eee; text-align: center; background: #fff; }
.adam-footer small { color: var(--adam-muted); }

/* utilities */
.adam-welcome { padding: 1rem; background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }

/* nav active + sublinks */
.adam-nav-heading {
  padding: .6rem 0 .2rem;
  font-size: .85rem;
  color: #666;
  margin-top: .6rem;
  margin-bottom: .2rem;
}

.adam-nav-sub { margin-left: .4rem; margin-top: .25rem; }
.adam-nav-sublink {
  display: block;
  font-size: .9rem;
  color: #345;
  text-decoration: none;
  padding: .2rem .4rem;
  border-radius: 6px;
}
.adam-nav-sublink:hover { background: rgba(36,70,102,0.06); }

.adam-nav-link--active {
  background: rgba(36,70,102,0.12);
  font-weight: 600;
  color: #123;
}

/* local minimal styles — prefer centralizing in style.css later */
.adam-card { background:#fff;padding:1rem;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.03); }
.adam-button { display:inline-block;padding:.45rem .75rem;background:#246;color:#fff;border-radius:6px;text-decoration:none }
.adam-link { color:#246;text-decoration:none }
.adam-link-button { background:none;border:0;color:#c22;cursor:pointer;padding:0;font:inherit }
.adam-success { color:#0a7a07; margin-bottom:.75rem }
.adam-error { color:#b00020; margin-bottom:.75rem }

@media (max-width:720px){
  .adam-posts-list article { flex-direction:column; }
  .adam-posts-list img { width:100%; height:auto; }
  .adam-post-title{ font-size:1.4rem !important; }
  .adam-post-single{ padding:0.75rem !important; }
}

/* footer */

  :root{
    --lpmifkmb-bg: #f3f7f9;
    --lpmifkmb-blue: #0b63bf;
    --lpmifkmb-muted: #6b7780;
    --lpmifkmb-yellow: #ffd200;
    --lpmifkmb-border: #e0e6ea;
    --lpmifkmb-maxwidth: 1180px;
  }

  .lpmifkmb-footer{
    background: var(--lpmifkmb-bg);
    padding: 48px 20px 0;
    box-sizing: border-box;
    color: var(--lpmifkmb-muted);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  }

  .lpmifkmb-inner{
    max-width: var(--lpmifkmb-maxwidth);
    margin: 0 auto;
  }

  .lpmifkmb-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 28px 36px;
    align-items: start;
    padding-bottom: 28px;
  }

  .lpmifkmb-col h3{
    margin:0 0 6px 0;
    font-size:15px;
    color: var(--lpmifkmb-blue);
    font-weight:700;
    letter-spacing:.35px;
  }

  .lpmifkmb-underline{
    display:inline-block;
    width:46px;
    height:3px;
    background: var(--lpmifkmb-yellow);
    margin: 8px 0 18px 0;
    border-radius:2px;
  }

  .lpmifkmb-brand{ display:flex; gap:14px; align-items:flex-start; }
  .lpmifkmb-logo{ width:72px; height:72px; flex:0 0 72px; }
  .lpmifkmb-title{ font-size:14px; color:var(--lpmifkmb-blue); font-weight:700; line-height:1.05; }
  .lpmifkmb-sub{ font-size:11px; margin-top:4px; color:var(--lpmifkmb-muted); }

  .lpmifkmb-desc{ margin:16px 0 18px; font-size:13px; line-height:1.7; max-width:360px; color:var(--lpmifkmb-muted); }

  .lpmifkmb-follow{ margin-top:8px; font-weight:600; font-size:13px; color:var(--lpmifkmb-muted); }
  .lpmifkmb-socials{ margin-top:12px; display:flex; gap:10px; }
  .lpmifkmb-social{
    width:38px; height:38px; border-radius:50%;
    background:var(--lpmifkmb-blue); display:inline-flex; align-items:center; justify-content:center;
    color:#fff; text-decoration:none; box-shadow:0 2px 0 rgba(11,99,191,0.12); font-size:14px;
  }

  .lpmifkmb-contact p{ margin:8px 0; font-size:13px; line-height:1.6; color:var(--lpmifkmb-muted); }
  .lpmifkmb-contact .lpmifkmb-strong{ color:#1f2d45; font-weight:700; display:block; margin-top:8px; font-size:13px; }

  .lpmifkmb-links ul{ list-style:none; padding:0; margin:0; }
  .lpmifkmb-links li{ margin:8px 0; }
  .lpmifkmb-links a{ text-decoration:none; color:var(--lpmifkmb-muted); font-size:13px; }
  .lpmifkmb-links a:hover{ color: var(--lpmifkmb-blue); }

  .lpmifkmb-stats p{ margin:8px 0; font-size:15px; line-height:1.7; color:var(--lpmifkmb-muted); }

  .lpmifkmb-bottomline{ border-top:1px solid var(--lpmifkmb-border); margin-top:22px; padding-top:18px; }
  .lpmifkmb-copyright{ text-align:center; font-size:14px; color:#334155; padding:14px 0 28px; }

  @media (max-width:980px){
    .lpmifkmb-grid{ grid-template-columns: repeat(2,1fr); gap:22px; }
    .lpmifkmb-desc{ max-width:none; }
  }
  @media (max-width:560px){
    .lpmifkmb-grid{ grid-template-columns: 1fr; }
    .lpmifkmb-logo{ width:60px; height:60px; flex:0 0 60px; }
  }

  a.lpmifkmb-social:focus, a:focus{ outline: 3px solid rgba(11,99,191,0.15); outline-offset:2px; }

/* footer end */

/* slider ofset */

    /* scoping & vars */
    .msglpmi-section{
      --card-w: 240px;
      --card-h: 220px;
      --card-radius: 12px;
      --card-padding: 22px;
      --circle-size: 62px;
      --icon-size: 76px;
      --accent: #fff3c9;
      --card-bg: #ffffff;
      --muted: #6b7a86;
      --title-color: #123445;
      --shadow: 0 8px 26px rgba(21,31,40,0.06);
      display: block;
      padding: 18px;
      box-sizing: border-box;
      font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    }

    /* grid (desktop) */
    .msglpmi-grid{
      display: flex;
      gap: 22px;
      margin-top: -81px;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: wrap;
    }
    .msglpmi-card{
      width: var(--card-w);
      height: var(--card-h);
      background: var(--card-bg);
      border-radius: var(--card-radius);
      box-shadow: var(--shadow);
      padding: var(--card-padding);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform .16s ease, box-shadow .16s ease;
      text-align: center;
      justify-content: flex-start;
      position: relative;
      overflow: visible;
    }
    .msglpmi-card:hover{
      transform: translateY(-6px);
      box-shadow: 0 14px 34px rgba(21,31,40,0.08);
    }

    .msglpmi-icon-wrap{
      width: 100%;
      height: calc(var(--circle-size) + 18px);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      position: relative;
      margin-bottom: 6px;
    }
    .msglpmi-circle{
      position: absolute;
      width: var(--circle-size);
      height: var(--circle-size);
      border-radius: 50%;
      background: var(--accent);
      left: 40%;
      transform: translateX(-48%) translateY(0);
      z-index: 1;
      box-shadow: 0 4px 10px rgba(16,24,32,0.03) inset;
    }
    .msglpmi-icon{
      position: absolute;
      right: 5%;
      bottom: -20%;
      transform: translateX(-50%);
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    .msglpmi-icon svg,
    .msglpmi-icon img{
      width: var(--icon-size) !important;
      height: var(--icon-size) !important;
      display: block;
    }
    .msglpmi-title{ margin-top: 30px; font-weight:700; font-size:15px; color:var(--title-color); line-height:1.1; }
    .msglpmi-sub{ font-size:13px; color:var(--muted); }

    /* carousel (mobile) */
    .msglpmi-carousel { display: none; position: relative; width: 100%; box-sizing: border-box; }
    .msglpmi-carousel-viewport { overflow: hidden; width: 100%; padding: 12px 0; }
    .msglpmi-carousel-track {
      display: flex;
      transition: transform 320ms cubic-bezier(.22,.9,.29,1);
      will-change: transform;
      gap: 16px;
      padding-left: 12px;
      padding-right: 12px;
      align-items: stretch;
          /* penting untuk drag di mobile: izinkan horizontal pointer handling */
    touch-action: pan-y;
    -ms-touch-action: pan-y;
    cursor: grab;
    }
      .msglpmi-carousel-track:active { cursor: grabbing; }
      /* non-visible containers: make inert (JS will set attribute; fallback style) */
  .inert[aria-hidden="true"] { pointer-events: none; user-select: none; }
    .msglpmi-carousel-track .msglpmi-card {
      flex: 0 0 calc(100% - 48px);
      margin: 0 auto;
      min-width: calc(100% - 48px);
      max-width: calc(100% - 48px);
    }

    /* dots (standard look) */
    .msglpmi-dots {
      display: flex;
      gap: 10px;
      justify-content: center;
      align-items: center;
      margin-top: 14px;
    }
    .msglpmi-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #cfcfcf;
      opacity: 0.95;
      transition: transform .12s ease, background .12s ease;
      cursor: pointer;
      border: none;
      padding: 0;
    }
    .msglpmi-dot[aria-pressed="true"] {
      background: #111;
      transform: scale(1.06);
    }

    /* responsive rules */
    @media (max-width: 860px){
      .msglpmi-section{ padding: 12px; }
      .msglpmi-card{ width: 48%; margin-bottom: 8px; }
          .msglpmi-icon{
      position: absolute;
      right: 25%;
      bottom: -20%;
      transform: translateX(-50%);
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    }
    @media (max-width: 560px){
      .msglpmi-grid { display: none; }      /* hide desktop grid */
      .msglpmi-carousel { display: block; } /* show carousel on small screens */
      .msglpmi-section{ --circle-size: 60px; --icon-size: 46px; --card-padding: 18px; --card-h: 200px; padding-bottom: 26px; }
        .msglpmi-carousel .msglpmi-circle {
    left: 58% !important;
    transform: translateX(-58%) !important;
    top: 10px !important;
  }
  .msglpmi-carousel .msglpmi-icon {
    left: 60% !important;
    transform: translateX(-58%) !important;
    top: 30px !important;
    bottom: auto !important;
    right: auto !important;
    width: 100px !important;
  }
    }
    @media (max-width: 480px){
      .msglpmi-section{ --circle-size: 56px; --icon-size: 40px; --card-padding: 16px; --card-h: 200px; }
      .msglpmi-carousel-track { gap: 12px; }
      .msglpmi-carousel-track .msglpmi-card { flex: 0 0 calc(100% - 36px); min-width: calc(100% - 36px); max-width: calc(100% - 36px); }
    }
    
    /* Modal img */
    
#adam-img-modal {
transition: opacity 0.2s ease;
}
#adam-img-modal[style*="display: flex"] {
opacity: 1;
}
/* patch */

/* single image  */
.adam-post-body img {
  max-width: 100%;
  height: auto;
  display: block;     /* biar tidak ngacak layout */
  margin: 1rem auto;  /* sedikit rapih */
}