/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 880px;
  --sidebar-width: 280px;
  --page-width: 100vw;
  --logo-height: 50px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #fcfdff;
  --accent-2: #f4f9ff;
  --accent-3: #e9f3ff;
  --accent-4: #d9ebff;
  --accent-5: #c9e0ff;
  --accent-6: #b4d3ff;
  --accent-7: #98c0ff;
  --accent-8: #72a5ff;
  --accent-9: #001c6e;
  --accent-10: #103487;
  --accent-11: #3464cb;
  --accent-12: #06287a;

  --accent-a1: #0055ff03;
  --accent-a2: #0074ff0b;
  --accent-a3: #0074ff16;
  --accent-a4: #0079ff26;
  --accent-a5: #006dff36;
  --accent-a6: #016aff4b;
  --accent-a7: #0064ff67;
  --accent-a8: #005dff8d;
  --accent-a9: #001c6e;
  --accent-a10: #00267fef;
  --accent-a11: #003cbecb;
  --accent-a12: #002377f9;

  --accent-contrast: #fff;
  --accent-surface: #f1f8ffcc;
  --accent-indicator: #001c6e;
  --accent-track: #001c6e;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.004 263.2);
      --accent-2: oklch(98.1% 0.0131 263.2);
      --accent-3: oklch(96.1% 0.0252 263.2);
      --accent-4: oklch(93.6% 0.0498 263.2);
      --accent-5: oklch(90.5% 0.0742 263.2);
      --accent-6: oklch(86.4% 0.0974 263.2);
      --accent-7: oklch(80.8% 0.1245 263.2);
      --accent-8: oklch(73.1% 0.1684 263.2);
      --accent-9: oklch(28% 0.1441 263.2);
      --accent-10: oklch(35.9% 0.1441 263.2);
      --accent-11: oklch(52.8% 0.1684 263.2);
      --accent-12: oklch(31.8% 0.1441 263.2);

      --accent-a1: color(display-p3 0.0235 0.349 1 / 0.012);
      --accent-a2: color(display-p3 0.0235 0.4157 0.9059 / 0.04);
      --accent-a3: color(display-p3 0.0078 0.4078 0.9529 / 0.079);
      --accent-a4: color(display-p3 0.0078 0.4039 0.9451 / 0.138);
      --accent-a5: color(display-p3 0.0078 0.3647 0.9412 / 0.197);
      --accent-a6: color(display-p3 0.0039 0.349 0.9451 / 0.271);
      --accent-a7: color(display-p3 0.0039 0.3294 0.949 / 0.373);
      --accent-a8: color(display-p3 0 0.302 0.949 / 0.51);
      --accent-a9: color(display-p3 0 0.0824 0.4 / 0.973);
      --accent-a10: color(display-p3 0 0.1098 0.4549 / 0.899);
      --accent-a11: color(display-p3 0 0.1843 0.6902 / 0.75);
      --accent-a12: color(display-p3 0 0.098 0.4235 / 0.938);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9529 0.9725 1 / 0.8);
      --accent-indicator: oklch(28% 0.1441 263.2);
      --accent-track: oklch(28% 0.1441 263.2);
    }
  }
}


.light, :root {
  --grayscale-1: #fdfcfd;
  --grayscale-2: #faf9fb;
  --grayscale-3: #f2eff3;
  --grayscale-4: #eae7ec;
  --grayscale-5: #e3dfe6;
  --grayscale-6: #dbd8e0;
  --grayscale-7: #d0cdd7;
  --grayscale-8: #bcbac7;
  --grayscale-9: #8e8c99;
  --grayscale-10: #84828e;
  --grayscale-11: #65636d;
  --grayscale-12: #211f26;

  --grayscale-a1: #55005503;
  --grayscale-a2: #2b005506;
  --grayscale-a3: #30004010;
  --grayscale-a4: #20003618;
  --grayscale-a5: #20003820;
  --grayscale-a6: #14003527;
  --grayscale-a7: #10003332;
  --grayscale-a8: #08003145;
  --grayscale-a9: #05001d73;
  --grayscale-a10: #0500197d;
  --grayscale-a11: #0400119c;
  --grayscale-a12: #020008e0;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #8e8c99;
  --grayscale-track: #8e8c99;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.991 0.988 0.992);
      --grayscale-2: color(display-p3 0.98 0.976 0.984);
      --grayscale-3: color(display-p3 0.946 0.938 0.952);
      --grayscale-4: color(display-p3 0.915 0.906 0.925);
      --grayscale-5: color(display-p3 0.886 0.876 0.901);
      --grayscale-6: color(display-p3 0.856 0.846 0.875);
      --grayscale-7: color(display-p3 0.814 0.804 0.84);
      --grayscale-8: color(display-p3 0.735 0.728 0.777);
      --grayscale-9: color(display-p3 0.555 0.549 0.596);
      --grayscale-10: color(display-p3 0.514 0.508 0.552);
      --grayscale-11: color(display-p3 0.395 0.388 0.424);
      --grayscale-12: color(display-p3 0.128 0.122 0.147);

      --grayscale-a1: #55005503;
      --grayscale-a2: #2b005506;
      --grayscale-a3: #30004010;
      --grayscale-a4: #20003618;
      --grayscale-a5: #20003820;
      --grayscale-a6: #14003527;
      --grayscale-a7: #10003332;
      --grayscale-a8: #08003145;
      --grayscale-a9: #05001d73;
      --grayscale-a10: #0500197d;
      --grayscale-a11: #0400119c;
      --grayscale-a12: #020008e0;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.555 0.549 0.596);
      --grayscale-track: color(display-p3 0.555 0.549 0.596);
    }
  }
}


.dark {
  --accent-1: #0d130c;
  --accent-2: #131b12;
  --accent-3: #192c15;
  --accent-4: #1c3b15;
  --accent-5: #23491b;
  --accent-6: #2c5822;
  --accent-7: #356929;
  --accent-8: #3d7c2e;
  --accent-9: #70e155;
  --accent-10: #65d649;
  --accent-11: #64d549;
  --accent-12: #bbf3af;

  --accent-a1: #00bb0003;
  --accent-a2: #40f9000b;
  --accent-a3: #58ff251d;
  --accent-a4: #50ff1f2d;
  --accent-a5: #5eff353c;
  --accent-a6: #6bfd454d;
  --accent-a7: #72fd4f5f;
  --accent-a8: #73ff4f73;
  --accent-a9: #7eff5fdf;
  --accent-a10: #76fe54d4;
  --accent-a11: #76ff55d2;
  --accent-a12: #c3feb7f3;

  --accent-contrast: #172614;
  --accent-surface: #15251280;
  --accent-indicator: #70e155;
  --accent-track: #70e155;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(17.9% 0.0178 140);
      --accent-2: oklch(21% 0.0201 140);
      --accent-3: oklch(26.9% 0.0462 140);
      --accent-4: oklch(31.8% 0.0731 140);
      --accent-5: oklch(36.6% 0.0853 140);
      --accent-6: oklch(41.5% 0.0967 140);
      --accent-7: oklch(46.8% 0.1107 140);
      --accent-8: oklch(52.6% 0.1287 140);
      --accent-9: oklch(81.4% 0.2064 140);
      --accent-10: oklch(78.2% 0.2064 140);
      --accent-11: oklch(78% 0.2064 140);
      --accent-12: oklch(90.8% 0.107 140);

      --accent-a1: color(display-p3 0 0.9412 0 / 0.009);
      --accent-a2: color(display-p3 0.4353 0.9804 0.0784 / 0.043);
      --accent-a3: color(display-p3 0.4824 0.9961 0.2157 / 0.114);
      --accent-a4: color(display-p3 0.498 0.9961 0.2353 / 0.173);
      --accent-a5: color(display-p3 0.5255 1 0.3098 / 0.232);
      --accent-a6: color(display-p3 0.5725 1 0.3686 / 0.295);
      --accent-a7: color(display-p3 0.5922 1 0.3961 / 0.366);
      --accent-a8: color(display-p3 0.5961 1 0.4078 / 0.446);
      --accent-a9: color(display-p3 0.6314 1 0.4627 / 0.862);
      --accent-a10: color(display-p3 0.6157 1 0.4353 / 0.816);
      --accent-a11: color(display-p3 0.6157 1 0.4353 / 0.811);
      --accent-a12: color(display-p3 0.8196 1 0.749 / 0.942);

      --accent-contrast: #172614;
      --accent-surface: color(display-p3 0.0941 0.1333 0.0706 / 0.5);
      --accent-indicator: oklch(81.4% 0.2064 140);
      --accent-track: oklch(81.4% 0.2064 140);
    }
  }
}


.dark {
  --grayscale-1: #111113;
  --grayscale-2: #18191b;
  --grayscale-3: #212225;
  --grayscale-4: #272a2d;
  --grayscale-5: #2e3135;
  --grayscale-6: #363a3f;
  --grayscale-7: #43484e;
  --grayscale-8: #5a6169;
  --grayscale-9: #696e77;
  --grayscale-10: #777b84;
  --grayscale-11: #b0b4ba;
  --grayscale-12: #edeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #d8f4f609;
  --grayscale-a3: #ddeaf814;
  --grayscale-a4: #d3edf81d;
  --grayscale-a5: #d9edfe25;
  --grayscale-a6: #d6ebfd30;
  --grayscale-a7: #d9edff40;
  --grayscale-a8: #d9edff5d;
  --grayscale-a9: #dfebfd6d;
  --grayscale-a10: #e5edfd7b;
  --grayscale-a11: #f1f7feb5;
  --grayscale-a12: #fcfdffef;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #696e77;
  --grayscale-track: #696e77;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.074);
      --grayscale-2: color(display-p3 0.095 0.098 0.105);
      --grayscale-3: color(display-p3 0.13 0.135 0.145);
      --grayscale-4: color(display-p3 0.156 0.163 0.176);
      --grayscale-5: color(display-p3 0.183 0.191 0.206);
      --grayscale-6: color(display-p3 0.215 0.226 0.244);
      --grayscale-7: color(display-p3 0.265 0.28 0.302);
      --grayscale-8: color(display-p3 0.357 0.381 0.409);
      --grayscale-9: color(display-p3 0.415 0.431 0.463);
      --grayscale-10: color(display-p3 0.469 0.483 0.514);
      --grayscale-11: color(display-p3 0.692 0.704 0.728);
      --grayscale-12: color(display-p3 0.93 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #d8f4f609;
      --grayscale-a3: #ddeaf814;
      --grayscale-a4: #d3edf81d;
      --grayscale-a5: #d9edfe25;
      --grayscale-a6: #d6ebfd30;
      --grayscale-a7: #d9edff40;
      --grayscale-a8: #d9edff5d;
      --grayscale-a9: #dfebfd6d;
      --grayscale-a10: #e5edfd7b;
      --grayscale-a11: #f1f7feb5;
      --grayscale-a12: #fcfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.415 0.431 0.463);
      --grayscale-track: color(display-p3 0.415 0.431 0.463);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(0, 28, 110, 1);
  --background: rgba(255, 255, 255, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(112, 225, 85, 1);
  --background: rgba(17, 17, 19, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #111113;
}

/* docs/custom.css */
/* Menyembunyikan footer bawaan Fern */
/* custom.css */
/* .fern-layout-footer {
  margin-inline: auto;
  margin-block: 50px;
  width: var(--content-width, 40rem);
  max-width: 100%;
  margin-top: 20px;
} */
.fern-table-root {
  /* Contoh: Buat sudut tabel menjadi melengkung (rounded) */
  border-radius: 12px !important;
  /* Contoh: Tambahkan border halus */
  border: 1px solid #e2e8f0 !important; /* Warna abu-abu muda */
  /* Contoh: Tambahkan bayangan halus agar terlihat menonjol */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
  margin-bottom: 0px !important;
}

/* .fern-table-root not-prose m-mdx {
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;  
  margin-bottom: 0px !important;
} */

/* 2. Target elemen <table> di dalamnya agar border-collapse rapi */
.fern-table-root.not-prose.m-mdx table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  background-color: transparent !important; /* Agar menyatu dengan background gradient Anda */
}

/* 3. Target Header (th) dan Cell (td) agar lebih rapi */
.fern-table-root.not-prose.m-mdx th,
.fern-table-root.not-prose.m-mdx td {
  padding: 12px 16px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  text-align: left !important;
}

/* Hilangkan border bawah pada baris terakhir agar rapi dengan border-radius wrapper */
.fern-table-root.not-prose.m-mdx tr:last-child td {
  border-bottom: none !important;
}

/* Beri warna background berbeda pada header tabel */
.fern-table-root.not-prose.m-mdx th {
  background-color: rgba(32, 134, 236, 0.753) !important; /* Abu-abu sangat muda transparan */
  font-weight: 600 !important;
  color: #111827 !important; /* Warna teks gelap */
}
.fern-layout-footer {
  display: none;
}

.fern-layout-footers {
  margin-inline: auto;
  margin-block: calc(var(--spacing) * 24);
  width: var(--content-width, 40rem);
  max-width: 100%;
  /* margin-top: 20px; */
}

.fern-footer-nav--simple {
    gap: calc(var(--spacing) * 12);
    margin: calc(var(--spacing) * 0);
    padding: calc(var(--spacing) * 0);
    background-color: transparent;
    justify-content: space-between;
    /* border: 1px solid darkgray; */
}

.fern-footer-nav--simple .fern-footer-prev {
    border: 1px solid #f0efef;
    border-radius: 8px;
    /* border-style: var(--tw-border-style); */
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    height: auto;
    min-width: calc(var(--spacing) * 0);
    padding: calc(var(--spacing) * 2);
    background-color: #fff;
    /* border-width: 0; */
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
    overflow: hidden;
}

.fern-footer-nav--simple .fern-footer-next {
    border: 1px solid #f0efef;
    border-radius: 8px;
    border-style: var(--tw-border-style);
    align-items: flex-end;
    gap: calc(var(--spacing) * 2);
    height: auto;
    min-width: calc(var(--spacing) * 0);
    padding: calc(var(--spacing) * 2);
    background-color: #fff;
    /* border-width: 0; */
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
    overflow: hidden;
}

.fern-footer-prev:hover {
  background: #d4d3d3;
  /* border-color: #0090ff; */
  /* border: 2px solid red; */
  /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); */
}
.fern-footer-prev:focus-visible {
  background: #d4d3d3;
  /* border-color: #0090ff; */
  /* border: 2px solid red; */
  /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); */
}

.fern-footer-next:hover {
  background: #d4d3d3;
  /* border-color: #0090ff; */
  /* border: 2px solid red; */
  /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); */
}
.fern-footer-next:focus-visible {
  background: #d4d3d3;
  /* border-color: #0090ff; */
  /* border: 2px solid red; */
  /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); */
}

html body #builtwithfern, html body #builtwithfern {
  display: none !important;
}
/* ==========================================
   BACKGROUND COLOR
   ========================================== */

html,body {
  background-color: #f5f5f5; /* Base warna putih untuk light mode */
  background-image: 
    radial-gradient(circle at 85% 85%, rgba(255, 200, 92, 0.15) 0%, rgba(255, 200, 92, 0.08) 15%, transparent 25%),
    radial-gradient(ellipse at 80% 80%, rgba(247, 81, 70, 0.12) 0%, rgba(247, 81, 70, 0.06) 20%, transparent 30%),
    radial-gradient(ellipse at 85% 75%, rgba(255, 103, 213, 0.15) 0%, rgba(255, 103, 213, 0.08) 20%, transparent 35%),
    radial-gradient(ellipse at 80% 65%, rgba(0, 241, 249, 0.15) 0%, rgba(0, 241, 249, 0.08) 20%, transparent 45%),
    radial-gradient(ellipse at 60% 55%, rgba(4, 195, 255, 0.15) 0%, rgba(4, 195, 255, 0.08) 35%, transparent 65%),
    radial-gradient(ellipse at 70% 45%, rgba(149, 50, 255, 0.15) 0%, rgba(149, 50, 255, 0.08) 35%, transparent 70%) !important;
  /* radial-gradient(ellipse at 50% 50%, rgba(4, 150, 255, 0.25) 0%, rgba(4, 150, 255, 0.10) 30%, transparent 75%),
  radial-gradient(ellipse at 80% 70%, rgba(0, 241, 249, 0.20) 0%, rgba(0, 241, 249, 0.06) 25%, transparent 55%),
  radial-gradient(ellipse at 85% 85%, rgba(255, 123, 0, 0.20) 0%, rgba(255, 123, 0, 0.04) 20%, transparent 35%),
  radial-gradient(circle at 90% 90%, rgba(255, 201, 92, 0.20) 0%, rgba(255, 201, 92, 0.05) 15%, transparent 25%) !important;
  background-attachment: fixed;
  background-size: cover;
  min-height: 100vh; */
  /* position: absolute; */
}
/* ==========================================
   BACKGROUND GRADIENT FULL PAGE (DARI TOP 0)
   ========================================== */

/* 2. Paksa container utama Fern menjadi transparan agar background tembus */
.fern-header,
.fern-header-content,
.fern-header-content,
.fern-sidebar-container,
.fern-sidebar,
.fern-main,
.fern-content,
.fern-layout-guide,
.fern-background {
  background-color: transparent !important;
  background: transparent !important;
}

/* 3. (Opsional tapi sangat disarankan) Tambahkan efek Glassmorphism */
/* Ini membuat header dan sidebar sedikit buram agar teks tetap mudah dibaca di atas warna-warni */
.fern-header, 
.fern-header-content {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  background-color: rgba(255, 255, 255, 0.75) !important; /* Putih transparan 75% */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.fern-sidebar-container, 
.fern-sidebar {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  background-color: rgba(255, 255, 255, 0.75) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Membuat container utama Fern transparan agar gradient terlihat */
#fern-sidebar,
.fern-header,
.fern-sidebar-container,
.fern-sidebar,
.fern-background,
.fern-content,
.fern-main {
  background-color: transparent !important;
  background: transparent !important;
}

.fern-sidebar-container {
  background-color: transparent !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.fern-header-navbar-links {
  display: none !important;
}

.my-8.space-y-2 {
  margin-top: 24px;
  margin-bottom: 24px;
}

/* ==========================================
   LAYOUT ONLY FOR HOME
   ========================================== */

.w-content-width:has(.fern-home-marker) {
  margin-inline: auto !important;
  /* margin-left: 0px !important; */
  /* width: 100%; */
}
/* Hanya berlaku untuk elemen dengan class ini */
@media (min-width: 1024px) {

.w-content-width:has(.fern-home-marker) {
  max-width: 1600px;
  width: 90%;
  margin: 0 auto;
  padding: 8px 28px 40px;
  margin-inline: auto !important;
  /* width: 100%; */
  /* Opsional: Jika ingin menyesuaikan margin lainnya agar seimbang */
  /* margin-right: 10px; */
}
.fern-layout-footer not-prose:has(.fern-home-marker) {
  position: absolute;
  /* display: none !important; */
}

}
/* PENTING: Agar di layar HP (mobile) tidak geser ke samping, 
   kita bisa buat margin-nya 0 atau lebih kecil di layar kecil */


/* .fern-header-tabs {
  backdrop-filter: blur(0.5rem);
  background-color: transparent;
  display: none;
  max-width: 100%;
  user-select: none;
} */

.fern-header-logo-container {
  position: relative;
  display: flex !important;
  align-items: center;
  height: 100%;
  min-width: fit-content;
  flex-shrink: 0;
  gap: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

  .fern-header-tabs {
    display: flex !important;
    align-items: center !important;
    
    /* Memaksa elemen ditarik ke kanan */
    margin-left: auto !important; 
    margin-top: 0 !important;
    
    /* Mencegah tab turun atau tertekuk */
    flex-grow: 0 !important;
    flex-shrink: 0 !important; 
    order: 999 !important;
  }

/* .fern-header-content div:has(button#fern-search-button) {
    margin-left: auto !important; 
    width: auto !important; 
    max-width: 220px !important; 
    flex-shrink: 0 !important;
    justify-content: center !important;
  } */

.fern-header-mobile-menu-button {
  margin-left: calc(((60vw - var(--page-width)) / 2) + (var(--page-width) / 2)) !important;
  /* margin-left: calc(100% - 12px); */
}
@media (min-width: 768px) {

  :has(> .fern-header-content),
  .fern-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    background-color: transparent !important;
    background: transparent !important;
  }

  .fern-header-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important; 
    /* flex-grow: 0 !important; */
    flex-shrink: 0 !important;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent !important;
    background: transparent !important;
  }
 
  /* 3. Search bar - PAKSA ke kanan dengan menimpa w-full */
  .fern-header-content div:has(button#fern-search-button) {
    /* order: 2 !important; */
    margin-left: auto !important; /* Pendorong ke kanan */
    width: auto !important; /* Batalkan w-full */
    max-width: 320px !important; /* Batasi lebar */
    flex-shrink: 0 !important;
    /* justify-content: flex-end !important; */
    background-color: transparent !important;
    background: transparent !important;
  }

.fern-header-logo-container {
  position: relative;
  display: flex !important;
  align-items: center;
  height: 100%;
  min-width: fit-content;
  flex-shrink: 0;
  gap: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  justify-content: center;
}

  .fern-header-tabs {
    display: flex !important;
    align-items: center !important;
    
    margin-left: auto !important; 
    margin-top: 0 !important;
    
    flex-grow: 0 !important;
    flex-shrink: 0 !important; 
    order: 999 !important;
  }

} 
  

/* 
.fern-header-navbar-links {
  display: none !important;
}

.fern-sidebar-container {
  background-color: transparent !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
} */


/* .fern-header-logo-container {
  position: relative;
  display: contents;
  height: 100%;
  min-width: fit-content;
  flex-shrink: 0;
  gap: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
} */
/* 
.fern-header-logo-container {
  position: relative;
  display: flex !important; 
  align-items: center;
  height: 100%;
  min-width: fit-content;
  flex-shrink: 0;
  gap: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
} */

/* @media (min-width: 1024px) {
  .fern-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
  }
  .fern-header-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    flex-grow: 1;
  }

  .fern-header-tabs {
    display: flex !important;
    align-items: center !important;
    
    margin-left: auto !important; 
    flex-shrink: 0 !important; 
    order: 999 !important; 
  }
} */
/* 
.fern-header-tabs {
  backdrop-filter: blur(0.5rem);
  background-color: transparent;
  display: none;
  max-width: 100%;
  user-select: none;
}

@media (min-width: 1024px) {
  .fern-header-content {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .fern-header-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: auto; 
    flex-shrink: 0; 
    orphans: 99;
  }
} */

/* footer {
  display: none !important;
} */

/* ==========================================
   1. SEMBUNYIKAN TOMBOL BAWAAN FERN
   ========================================== */

button:has(svg.lucide-sun, svg.lucide-moon, svg.lucide-monitor),
[data-radix-popper-content-wrapper] {
  display: none !important;
  visibility: hidden;
}

#fern-sidebar-scroll-area {
  padding-block: calc(var(--spacing) * 2);
  padding-bottom: (var(--spacing) * 4);
}

.fern-sidebar-group {
  height: 90%;
}

/* Paksa agar selalu terlihat meski state-nya 'closed' */
/* 
.data-radix-popper-content-wrapper {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: static !important;
  transform: none !important;
  z-index: auto !important;
  min-width: 100% !important;
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
} */
/* 
.data-radix-menu-content {
  flex: 1; 
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--fern-color-border, #e5e7eb);
  background-color: transparent;
  color: var(--fern-color-grayscale-a11, #374151);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
} */
/* ==========================================
   2. STYLING TOMBOL KUSTOM (DARK & LIGHT)
   ========================================== */
/* .custom-theme-container {
  display: flex;
  gap: 8px;
  padding: 16px 0 0 0;
  border-top: 1px solid var(--fern-color-border, #e5e7eb);
  margin-top: 16px;
  width: 100%;
} */

/* .custom-theme-btn:hover {
  background-color: var(--fern-color-accent-a3, #f3f4f6);
  color: var(--fern-color-accent-11, #2563eb);
  border-color: var(--fern-color-accent-11, #2563eb);
} */

/* Tampilan tombol saat temanya sedang aktif */
/* .custom-theme-btn.active {
  background-color: var(--fern-color-accent-a3, #f3f4f6);
  color: var(--fern-color-accent-11, #2563eb);
  border-color: var(--fern-color-accent-11, #2563eb);
  font-weight: 600;
} */

/* Pastikan footer sidebar menampung tombol kita */
/* .fern-sidebar-footer {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  padding: 0 16px 16px 16px !important;
} */
/* ==========================================
   HOME V3 STYLES (Payabli-like Design)
   ========================================== */

/* 1. Definisi Variabel Warna yang Hilang */
:root {
  --gradient-primary: linear-gradient(135deg, #0052FF 0%, #00C2FF 100%);
  --p-primary-lighter: #E6F0FF;
  --p-primary-dark: #0040CC;
  
  --gradient-pay-ops: linear-gradient(135deg, #7B61FF 0%, #C084FC 100%);
  --p-purple-lighter: #F3E8FF;
  --p-purple-dark: #6B21A8;
  
  --gradient-pay-out: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
  --p-pink-lighter: #FCE7F3;
  --p-pink-dark: #BE185D;
  
  --gradient-pay-in: linear-gradient(135deg, #10B981 0%, #34D399 100%);
  --p-teal-lighter: #D1FAE5;
  --p-teal-dark: #047857;
  
  --ink-1: #111827; /* Gray 900 */
  --ink-2: #4B5563; /* Gray 600 */
  --ink-3: #6B7280; /* Gray 500 */
  --ink-4: #9CA3AF; /* Gray 400 */
  --surface-2: #F9FAFB; /* Gray 50 */
}

/* 2. Layout Utama & Personas */
.home-section {
  max-width: 1300px;
  margin: 0 auto;
  padding: 36px 0px 36px;
  /* padding: 2rem 1rem; */
  font-family: system-ui, -apple-system, sans-serif;
}

.home-item-detail-info {
  font-size: 14px;
  font-weight: 600;
  /* text-transform: uppercase; */
  letter-spacing: 0.05em;
  color: red;
  margin-bottom: 12px;
}

.home-v3-personas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px
  margin-bottom: 44px;
}

.home-v3-persona {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.home-v3-persona:hover {
  border-color: #D1D5DB;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.home-v3-persona:focus-visible {
  border-color: #D1D5DB;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.home-v3-active {
  border-color: #04C3FF;
  /* border-color: var(--p-primary-dark); */
  box-shadow: 0 0 0 1px var(--p-primary-dark);
}

.home-v3-persona-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.home-v3-persona-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.home-v3-persona-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.home-v3-persona-tag {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  margin-bottom: 0.25rem;
}

.home-v3-persona-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink-1);
}

.home-v3-persona-summary {
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.home-v3-persona-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--p-primary-dark);
}

.home-3-button {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
  gap: 20px;
  margin-bottom: 44px;
}

.home-item-button {
  background: white;
  border: 1px solid #0091ff;
  border-radius: 12px;
  margin-top: auto;
  margin-bottom: auto;
  padding: 1.5rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  width: 100%;
  box-shadow: 0 6px 20px rgba(4, 196, 255, 0.322);
}

.home-item-button:hover {
  border-color: #0090ff;
  border: 2px solid red;
  /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); */
}
.home-item-button:focus-visible {
  border-color: #0090ff;
  border: 2px solid red;
  /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); */
}

.home-v3-active {
  border-color: #0090ff;
  border: 2px solid blueviolet;
  border-color: var(--p-primary-dark);
  box-shadow: 0 0 0 1px var(--p-primary-dark);
}

.home-item-button-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.home-item-button-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.home-item-button-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
}

.home-item-button-tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: red;
  margin-bottom: 0px;
}

.home-item-button-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink-1);
}

.home-item-button-summary {
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.home-item-button-footer {
  width: 100%;
    margin-top: 3px;
    font-size: 14px;
    color: var(--p-primary-dark);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    place-content: flex-end;
    flex-wrap: wrap;
}

/* 3. Panels & Grids */
.home-3-kolom {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  /* margin-top: 2rem; */
}

@media (max-width: 900px) {

  .home-3-button {
    grid-template-columns: 1fr;
  }
  .home-3-kolom {
    grid-template-columns: 1fr;
  }

}

/* @media (min-width: 1024px) {
  .home-3-kolom {
    grid-template-columns: 1.5fr 1fr;
  }
} */

.home-2-col {
  display: flex;
  flex-direction: column;
}

.home-2-col .home-2-grid {
  flex: 1;
}

.home-2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 14px;
  /* margin-top: 2rem; */
}

.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
  margin-top: auto;
  margin-bottom: auto;
}

/* 3. Panels & Grids */
.home-v3-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

@media (min-width: 1024px) {

  .home-v3-panel {
    grid-template-columns: 1.5fr 1fr;
  }

}

.home-section-title {
 font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin: 0 0 14px 0;
    padding: 0;
    border: 0;
    line-height: 1.4;
}

.home-v3-card {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}

.home-v3-areacol .home-v3-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.home-v3-card:hover {
  /* border-color: #D1D5DB; */
  border: 1px solid #161af9 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.home-v3-card:focus-visible {
  /* border-color: #D1D5DB; */
  border: 1px solid #161af9 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.home-v3-areatiles > a {
  flex: 1;
  /* display: flex; */
}

.home-v3-areatiles, 
.home-v3-devgrid, 
.home-v3-tasklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.home-v3-areatiles {

    margin-top: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-v3-product-tile {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
}

.home-v3-product-tile:hover {
  background: #F3F4F6;
}
.home-v3-product-tile:focus-visible {
  background: #F3F4F6;
}

.home-taskcol {
  display: flex;
  flex-direction: column;
}

.home-tasklist {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home-v3-tasklist .home-v3-card {
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.home-v3-cta {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  /* transition: all 0.2s ease; */
  text-decoration: none;
  color: var(--p-primary-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  padding: 14px 18px;
  border: 1px solid var(--border-soft);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  /* gap: 0.5rem; */
  /* margin-top: 1.5rem; */
  /* font-weight: 600; */
  /* color: var(--p-primary-dark); */
  /* text-decoration: none; */
}

.home-v3-cta:hover {
  text-decoration: underline;
}
.home-v3-cta:focus-visible {
  text-decoration: underline;
}

/* Animasi halus saat berpindah tab panel */
.home-v3-panel-anim {
  animation: fadeInUp 0.35s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-v3 h2.home-section-title {
font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin: 0 0 14px 0;
    padding: 0;
    border: 0;
    line-height: 1.4;
}