@import "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@300;400;500;600&display=swap";
    @import "https://fonts.googleapis.com/icon?family=Material+Icons";
    /* --- CSS VARIABLES & RESET --- */ :root {
      --fox-bg: #f4f7f6;
      --fox-surface: #ffffff;
      --fox-text: #2d3436;
      --fox-accent: #fdfaf4;
      --fox-border: #e1e8ed;
      --fox-sidebar: #0b131e;
      --fox-gold: #c5a059;
      --fox-gold-soft: #e6d5b8;
      --fox-green: #2ecc71;
      --fox-red: #e74c3c;
      --fox-yellow: yellow;
      --fox-blue: #457b9d;
      --fox-green-soft: #e8f5e9; /* Mint Hijau Sangat Lembut */
      --fox-red-soft: #ffebee; /* Rose Merah Sangat Lembut */
      --fox-yellow-soft: #fff9c4; /* Cream Kuning Sangat Lembut */
      --fox-blue-soft: #e3f2fd; /* Sky Biru Sangat Lembut */
      /* Warna Teks/Aksen untuk masing-masing warna soft (agar tetap terbaca) */
      --fox-green-dark: #2d6a4f;
      --fox-red-dark: #a83232;
      --fox-yellow-dark: #856404;
      --fox-blue-dark: #1d3557;
      --fox-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      --fox-padding: 16px;
      --fox-padding-s: 8px;
      --fox-padding-m: 32px;
      --fox-padding-l: 64px;
      --fox-height: 72px;
      --fox-width: 220px;
      --fox-font-size: 14px;
      --fox-muted: #eee;
    }
    @media (min-width: 601px) {
      :root {
        --fox-font-size: 16px;
      }
    }
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Inter', sans-serif;
      background-color: var(--fox-bg);
      color: var(--fox-text);
      line-height: 1.6;
      overflow-x: hidden;
      font-size: var(--fox-font-size);
    }
    h1, h2, h3, .font-serif {
      font-family: 'Playfair Display', serif;
    }
    button {
      cursor: pointer;
      border: none;
      background: none;
      font-family: inherit;
    }
    a {
      text-decoration: none;
      color: inherit;
    }
    ul {
      list-style: none;
    }
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      overflow: hidden;
      background: rgba(0, 0, 0, .7);
      transition: opacity .4s ease;
      opacity: 0;
      z-index: 800;
    }
    .header {
      padding: 0 16px;
      height: 64px;
      display: flex;
      align-items: center;
      width: 100%;
      border-bottom: 2px solid var(--fox-gold);
      background: var(--fox-surface);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
    }
    .sitename {
      gap: 4px;
      display: flex;
      align-items: center;
    }
    .sitename > * {
      padding: 0;
      margin: 0;
    }
    .sitename > strong {
      font-size: 1.4rem;
      text-transform: uppercase;
      letter-spacing: -0.5px;
      font-weight: bold;
    }
    .navigation {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .navigation > * {
      font-size: .65rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      height: 56px;
      width: 56px;
    }
    .navigation > * > i {
      margin: 0;
      padding: 0;
    }
    .navigation > * > img {
      width: 40px;
      height: 40px;
      object-fit: cover;
      border-radius: 20px;
    }
    .btn-profile > span {
      display: none;
    }
    .main {
      padding: 64px 0 90px 0;
    }
    .section, section {
      padding: 0;
      display: grid;
      gap: 16px;
      height: 100%;
      align-items: baseline;
    }
    .box {
      display: grid;
      padding: 16px;
      gap: 8px;
      box-shadow: var(--fox-shadow);
      background: var(--fox-surface);
    }
    .float-menu {
      display: flex;
      flex-direction: column;
      background: var(--fox-surface);
      box-shadow: var(--fox-shadow);
      width: 100%;
      padding: 36px 8px 36px 8px;
      border-radius: 12px;
      position: fixed;
    }
    .float-menu::before {
      width: 90px;
      content: "";
      height: 4px;
      border-radius: 2px;
      background: var(--fox-gold);
      margin: -8px auto 16px auto;
    }
    .float-menu > a {
      display: flex;
      align-items: center;
      padding: 8px 16px;
      gap: 8px;
    }
    .card {
      width: 100%;
      display: grid;
    }
    .card > img {
      width: 100%;
      max-height: 300px;
      height: 100%;
      object-fit: cover;
    }
    /* --- HERO SECTION --- */
    .hero {
      position: relative;
      height: 300px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin-bottom: 3rem;
      color: var(--fox-surface);
    }
    .hero img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(0.5);
      z-index: -1;
    }
    .hero-content h1 {
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    .hero-content p {
      font-weight: 300;
      max-width: 500px;
      margin: 0 auto 1rem;
      opacity: 0.9;
    }
    .btn-gold {
      background: linear-gradient(135deg, var(--fox-gold-soft), var(--fox-gold));
      color: var(--fox-surface);
      padding: 0.8rem 2rem;
      border-radius: 50px;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 0.8rem;
      letter-spacing: 1px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .btn-gold:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(197, 160, 89, 0.3);
    }
    .fox-bg-blue {
      background: var(--fox-blue-soft);
    }
    .fox-bg-yellow {
      background: var(--fox-gold-soft);
    }
    .fox-bg-green {
      background: var(--fox-green-soft);
    }
    .fox-bg-red {
      background: var(--fox-red-soft);
    }
		.layout{
			  display: grid;
  gap: 16px;
}
		.layout-breadcrumbs{
			  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
}
		.layout-header{}
		.layout-main{}
		.layout-sidebar{}


    /* --- DESKTOP VIEW (Min-width 1024px) --- */
    @media (max-width: 600px) {
      .navigation {
        height: 72px;
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 4px 16px;
        box-shadow: var(--fox-shadow);
        background: var(--fox-surface);
        z-index: 900;
        width: 100%;
      }
      .float-menu {
        bottom: -100%;
        transition: bottom .35s ease;
		z-index: 1200;
      }
      .profile-active #profile {
        bottom: -16px;
      }
      .profile-active .overlay {
        width: 100%;
        height: 100%;
		  opacity: 1;
      }
    }
    @media (min-width: 601px) {
      .header {
        padding: 0 12vw;
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
      .sitename {}
      .navigation {
        justify-content: flex-end;
        gap: 8px;
      }
      .navigation > * {
        flex-direction: row;
        font-size: 1rem;
        gap: 8px;
        width: max-content;
      }
      .nav-menu {
        display: none;
      }
      .float-menu {
        top: 90px;
        right: 14vw;
        transform: translateX(7vw) scale(0);
        width: 14vw;
        overflow: hidden;
        transition: top .35s ease;
		z-index: 1200;
      }
		      .float-menu > a:hover{
				  background: rgba(0,0,0,.05);
		}

      .profile-active #profile {
        top: 72px;
        transform: translateX(7vw) scale(1);
      }
      .profile-active .overlay {
        width: 100%;
        height: 100%;
      }
      section {
        padding: 48px 12vw;
      }
      .fox-contaner-center {
        width: 100%;
        max-width: 800px;
        margin: auto;
      }
      .grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }
      .grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }
      .grid-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }
      .grid-6 {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
      }
      .grid-8 {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
      }
		.layout{}
		.layout-breadcrumbs{}
		.layout-header{}
		.layout-main{}
		.layout-sidebar{}
    }