/* ================================================================
   theme.css — Sismadi Theme System
   PERAN : Style statis + CSS token default (fallback)
   DATA  : Semua warna, svg, layout → theme.json
   LOGIKA: Semua penerapan dinamis   → theme.js
   ================================================================ */


/* ── 1. CSS TOKEN DEFAULT (fallback sebelum JS load) ─────────── */
:root {
  /* Warna — akan di-override theme.js dari theme.json */
  --pColor:       #6a994e;
  --pLightColor:  #a7c957;
  --pDarkColor:   #386641;
  --pTextColor:   #000000;
  --pButtonColor: #ffffff;
  --pPage:        #f2f2f2;
  --gInput:       #ffffff;
  --border:       #ECECF3;

  /* SVG logo — akan di-override theme.js */
  --svgLogo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23a3d5ff33' d='M 6 14 C 5 12 7 2 12 1 C 14 1 17 5 17 6 L 14 6 C 14 6 13 4 12 4 C 11 4 10 6 10 6 C 12 5 22 7 23 12 C 23 14 19 17 18 17 L 18 14 C 18 14 20 13 20 12 C 20 11 18 10 18 10 C 19 12 17 22 12 23 C 10 23 7 19 7 18 L 10 18 C 10 18 11 20 12 20 C 13 20 14 18 14 18 C 12 19 2 17 1 12 C 1 10 5 7 6 7 L 6 10 C 6 10 4 11 4 12 C 4 13 6 14 6 14 M 15 15 C 16 13 16 11 15 9 C 13 8 11 8 9 9 C 8 11 8 13 9 15 C 11 16 13 16 15 15'/></svg>");
}


/* ── 2. LAYOUT UTAMA ─────────────────────────────────────────── */
.main   { margin-left: 200px; padding: 10px; }
.footer { text-align: center; margin-top: 50px; }


/* ── 3. SIDEBAR / MENU ───────────────────────────────────────── */
.menu {
  color: white;
  margin: 0; padding: 0;
  width: 200px; height: 100%;
  position: fixed;
  overflow: hidden;
  z-index: 10;
  box-shadow: 0 0 5px var(--pLightColor);
  background-color: var(--pColor);
  background-image: linear-gradient(var(--pColor), var(--pColor), var(--pDarkColor));
  background-size: 40px, cover;
  background-repeat: repeat, no-repeat;
  background-position: center, center;
  display: flex;
  flex-direction: column;
}

/* Pola animasi di belakang menu */
.menu::before {
  content: "";
  position: absolute;
  inset: -40%;
  background-image: var(--svgLogo);
  background-repeat: repeat;
  background-size: 60px 60px;
  opacity: 0.5;
  transform: rotate(-18deg);
  animation: menuPatternMove 50s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.menu > * { position: relative; z-index: 1; }

@keyframes menuPatternMove {
  from { background-position: 0 300px; }
  to   { background-position: 200px -300px; }
}

.menu .logo             { display: block; text-align: center; width: 100%; }
.menu .sidebar-header p { padding: 5px 10px; text-align: center; }
.sidebar-header span {
    display: block;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    padding: 15px 10px;
    letter-spacing: 1px;
}
.menu .sidebar-footer   { padding: 20px 10px; margin-top: auto; opacity: 0.7; }

.menu ul { padding: 0; margin: 0; }
.menu li { padding: 10px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.menu li.active             { background-color: var(--pLightColor); }
.menu li:hover:not(.active) { background-color: var(--pLightColor); }


/* ── 4. SECTION DEKORASI ─────────────────────────────────────── */
#tentang {
  position: relative;
  width: 100%; min-height: 50vh;
  display: flex;
  transition: all 0.5s ease-in-out;
  background-image: var(--svgLogo), var(--svgLogo), var(--svgLogo);
  background-attachment: fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 80px 80px, 150px 150px, 300px 300px;
  background-position: 20% 10%, 70% 50%, 40% 90%;
}
#tentang .card       { background: transparent; }
#tentang .card:hover { animation: none; }

#footer-artikel {
  color: white;
  position: relative;
  overflow: hidden;
  pointer-events: none;
  background-image:
    var(--svgLogo), var(--svgLogo), var(--svgLogo),
    linear-gradient(var(--pColor), var(--pColor), var(--pDarkColor));
  background-repeat: repeat-x, repeat-x, repeat-x, no-repeat;
  background-size: 250px 60px, 600px 140px, 400px 100px, cover;
  background-position: 0 1%, 0 45%, 0 85%, 0 0;
  animation: awanBerjalanSerempak 60s linear infinite;
  min-height: 250px;
}
@keyframes awanBerjalanSerempak {
  from { background-position: 0 1%,    0 45%,    0 85%,    0 0; }
  to   { background-position: 1250px 1%, 1200px 45%, 1200px 85%, 0 0; }
}


/* ── 5. PARALLAX & HERO ──────────────────────────────────────── */
.hero-container {
  position: relative; height: 80vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.parallax-layer { position: absolute; will-change: transform; }
.icon-wa { top: 20%; left: 10%; z-index: 1000; }
.icon-fb { top: 10%; left: 30%; z-index: 2000; }
.icon-tw { top: 40%; left:  5%; z-index: 1000; }

.pdf-wrapper {
  position: relative; width: 100%; height: 80vh;
  border: 1px solid #ccc; overflow: hidden;
}
.pdf-wrapper embed { width: 100%; height: 100%; }


/* ── 6. PATTERN LAYER (catalog) ──────────────────────────────── */
#pattern-layer {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  background-image: linear-gradient(var(--pColor), var(--pColor), var(--pDarkColor));
}
#pattern-layer::before {
  content: "";
  position: absolute; inset: -40%;
  background-image: var(--svgLogo);
  background-repeat: repeat;
  background-size: 60px 60px;
  transform: rotate(-18deg);
  animation: menuPatternMove 50s linear infinite;
  pointer-events: none;
}


/* ── 7. LAYOUT MODIFIERS (diaktifkan via data-layout di <html>) ─ */

/* blog */
[data-layout="blog"] .menu           { display: none; }
[data-layout="blog"] .main           { margin-left: 0; }
[data-layout="blog"] #footer-artikel { display: block; }
[data-layout="blog"] .footer         { margin-top: 0; }
[data-layout="blog"] .footer div     { text-align: left; }

/* admin */
[data-layout="admin"] .menu           { width: 50px; }
[data-layout="admin"] .main           { margin-left: 50px; }
[data-layout="admin"] .sidebar-footer { display: none; }
[data-layout="admin"] #footer-artikel { display: none; }
[data-layout="admin"] .footer         { margin-top: 0; }
[data-layout="admin"] .footer div     { text-align: left; }

/* catalog */
[data-layout="catalog"] .menu            { display: none; }
[data-layout="catalog"] .main            { width: 80%; margin: 50px auto; }
[data-layout="catalog"] #footer-artikel  { display: none; }
[data-layout="catalog"] .sidebar-header  { padding: 20px 0 50px; }
[data-layout="catalog"] .footer          { margin-top: 0; }
[data-layout="catalog"] .footer div      { text-align: left; }

/* framework */
[data-layout="framework"] #footer-artikel { display: none; }


/* ── 8. RESPONSIVE ───────────────────────────────────────────── */
@media screen and (max-width: 700px) {
  .main { margin-left: 0; padding: 60px 10px; }

  .menu {
    display: flex; flex-direction: row;
    align-items: center; justify-content: space-between;
    width: 100%; height: auto; position: fixed;
  }
  .menu .logo         { width: auto; display: flex; align-items: center; }
  .menu .logo svg     { width: 32px; height: 32px; margin-left: 10px; }
  .menu ul            { display: flex; margin-left: auto; list-style: none; }
  .menu li            { justify-content: center; padding: 10px 15px; }
  .menu .sidebar-footer   { display: none; }
  .menu .sidebar-header p, .menu .sidebar-header span { display: none; }

  [data-layout="admin"] .main           { margin-left: 0; }
  [data-layout="admin"] .menu           { width: 100%; }
  [data-layout="admin"] .sidebar-header { padding: 0; }
}

@media screen and (max-width: 450px) {
  .main { padding-top: 10px; padding-bottom: 70px; }

  .menu {
    z-index: 100; overflow: visible;
    bottom: 0; width: 100%;
    background: var(--pColor);
  }
  .menu .logo           { display: none; }
  .menu ul              { display: flex; padding: 0; margin: 0; list-style: none; width: 100%; }
  .menu ul li           { display: flex; flex: 1; justify-content: center; }
  .menu a, .nav-item    { width: 100%; display: inline-block; padding: 20px 10px; }
  .menu a i, .nav-item i, .menu svg { margin: 0 auto 4px; display: block; font-size: 20px; }
  .menu .sidebar-header { display: none; }

  .item svg {
    display: flex !important;
    position: fixed; border-radius: 50%;
    border: 5px solid white;
    width: 50px; height: 50px;
    bottom: 45px; padding: 5px;
    background-color: var(--pColor);
  }
  .footer { margin-bottom: 30px; }
}