@charset "UTF-8";
/*
 * Table of content: Global
 * ----------------------------------------
 * 01. Common Helpers files (Do not edit any for updates.)
 * 02. User Helpers files (A place for you to edit)
 * 03. Core Framewoork (Do not edit any for updates.)
 * 04. Template Overrides
 * 05. Custom CSS (A place for you to edit)
 */
/* Import theme fonts */
@import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@400..700&family=Lora:ital,wght@0,400..700;1,400..700&family=Manrope:wght@400..700&family=Noto+Serif+Display:ital,wght@0,400..700;1,400..700&family=Onest:wght@400..700&family=Playfair+Display:ital,wght@0,400..700;1,400..700&family=Poppins:wght@500;600;700&family=Rajdhani:wght@500;600&family=Teachers:ital,wght@0,500..700;1,500..700&family=Work+Sans:ital,wght@0,400..700;1,400..700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,600;1,400;1,600&family=IBM+Plex+Sans+Arabic:wght@400;700&display=swap);
:root {
  /*
   * Css vars font
   *//*
   * Css vars font-family
   */--font-family-primary: "Onest","IBM Plex Sans Arabic",sans-serif;
  --font-family-secondary: "Onest","IBM Plex Sans Arabic",serif;
  --font-family-tertiary: "Onest","IBM Plex Sans Arabic",serif;
  --font-family-serif: "Noto Serif Display","IBM Plex Sans Arabic",serif;
  --font-family-script: Segoe Script,"IBM Plex Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-family-mono: monospace,"IBM Plex Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  /*
   * Css vars font-weight
   */--font-weight-ultralight: 100;
  --font-weight-lighter: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 600;
  --font-weight-bolder: 800;
  --font-weight-ultrabold: 900;
  /*
   * Css vars font-text
   */--font-text-family: var(--font-family-primary);
  --font-text-weight: 400;
  /*
   * Css vars font-heading
   */--font-heading-family: var(--font-family-secondary);
  --font-heading-weight: 500;
  /*
   * Css vars font-display
   */--font-display-family: var(--font-family-secondary);
  --font-display-weight: 700;
  /*
   * Css vars font-code
   */--font-code-family: var(--font-family-code);
  --font-code-weight: 400;
  --root-size: 1rem;
  --radius: 8px;
  --border-size: 1px;
  --border-color: rgba(131, 131, 131, 0.25);
  --shadow-color: rgba(0, 0, 0, 0.15);
  --contrast-ratio: 2;
  /*
   * Css vars breakpoints
   */--breakpoints-xs: 0;
  --breakpoints-sm: 576px;
  --breakpoints-md: 768px;
  --breakpoints-lg: 992px;
  --breakpoints-xl: 1200px;
  --breakpoints-xxl: 1400px;
  /*
   * Css vars color
   *//*
   * Css vars color-gray
   */--color-gray: #5b5b5b;
  --color-gray-10: #fafafa;
  --color-gray-25: #f7f7f7;
  --color-gray-50: #efefef;
  --color-gray-100: #dedede;
  --color-gray-200: #bdbdbd;
  --color-gray-300: #9d9d9d;
  --color-gray-400: #7c7c7c;
  --color-gray-500: #5b5b5b;
  --color-gray-600: #494949;
  --color-gray-700: #373737;
  --color-gray-800: #242424;
  --color-gray-900: #121212;
  /*
   * Css vars color-slate
   */--color-slate: #6b7280;
  --color-slate-10: #fbfbfb;
  --color-slate-25: #f8f8f9;
  --color-slate-50: #f0f1f2;
  --color-slate-100: #e1e3e6;
  --color-slate-200: #c4c7cc;
  --color-slate-300: #a6aab3;
  --color-slate-400: #898e99;
  --color-slate-500: #6b7280;
  --color-slate-600: #565b66;
  --color-slate-700: #40444d;
  --color-slate-800: #2b2e33;
  --color-slate-900: #15171a;
  /*
   * Css vars color-primary
   */--color-primary: #d97706;
  --color-primary-10: #fef8f8;
  --color-primary-25: #fef4f4;
  --color-primary-50: #fde9e9;
  --color-primary-100: #fad3d3;
  --color-primary-200: #f5a7a7;
  --color-primary-300: #f07b7b;
  --color-primary-400: #eb4f4f;
  --color-primary-500: #d97706;
  --color-primary-600: #b81c1c;
  --color-primary-700: #8a1515;
  --color-primary-800: #5c0e0e;
  --color-primary-900: #2e0707;
  /*
   * Css vars color-secondary
   */--color-secondary: #0c0f14;
  --color-secondary-10: #fef9ff;
  --color-secondary-25: #fdf6fe;
  --color-secondary-50: #fbedfd;
  --color-secondary-100: #f7dafc;
  --color-secondary-200: #f0b5f9;
  --color-secondary-300: #e890f5;
  --color-secondary-400: #e16bf2;
  --color-secondary-500: #032b41;
  --color-secondary-600: #ae38bf;
  --color-secondary-700: #822a8f;
  --color-secondary-800: #571c60;
  --color-secondary-900: #2b0e30;

}

/* ===========================
   NOTIF PANEL - RESPONSIVE
   =========================== */

/* Light vars */
#uc-notif-panel{
  --nf-text: rgba(17,24,39,.92);
  --nf-muted: rgba(17,24,39,.62);
  --nf-border: rgba(0,0,0,.10);
  --nf-panel: #ffffff;

  --nf-head-bg: rgba(17,24,39,.92);
  --nf-head-text: rgba(255,255,255,.92);

  --nf-hover: rgba(0,0,0,.03);
  --nf-chip-bg: rgba(0,0,0,.05);
  --nf-primary: var(--color-primary, #2563eb);
}

/* Dark vars (aktif kalau panel punya .dark atau .uc-dark) */
/* Dark vars (aktif kalau dark ada di html/body ATAU panel) */
html.dark #uc-notif-panel,
body.uc-dark #uc-notif-panel,
#uc-notif-panel.dark,
#uc-notif-panel.uc-dark{
  --nf-text: rgba(255,255,255,.92);
  --nf-muted: rgba(255,255,255,.68);
  --nf-border: rgba(255,255,255,.14);
  --nf-panel: #0b0f19;

  --nf-head-bg: rgba(255,255,255,.10);
  --nf-head-text: rgba(255,255,255,.92);

  --nf-hover: rgba(255,255,255,.06);
  --nf-chip-bg: rgba(255,255,255,.10);
  --nf-primary: var(--color-primary, #60a5fa);
}


/* Offcanvas bar base */
#uc-notif-panel .uc-offcanvas-bar{
  padding: 0 !important;
  background: var(--nf-panel) !important;
  color: var(--nf-text) !important;
  border-left: 1px solid var(--nf-border);
  width: min(420px, 92vw);
}

/* HP: full width */
@media (max-width: 480px){
  #uc-notif-panel .uc-offcanvas-bar{ width: 100vw; }
}

/* Shell */
#uc-notif-panel .nf-shell{
  display:flex;
  flex-direction:column;
  height: 100dvh;  /* lebih aman di mobile */
  min-height:0;
}

/* Header & footer sticky */
#uc-notif-panel .nf-header,
#uc-notif-panel .nf-footer{
  position: sticky;
  z-index: 10;
  background: var(--nf-panel);
}

#uc-notif-panel .nf-header{
  top:0;
  padding: 12px 14px;
  border-bottom:1px solid var(--nf-border);
}

#uc-notif-panel .nf-footer{
  bottom:0;
  padding: 12px 14px;
  border-top:1px solid var(--nf-border);
}

/* Close btn */
#uc-notif-panel .nf-close{
  width: 36px; height:36px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--nf-border);
  background: transparent;
}



#uc-menu-panel .nf-close{
  width:36px; height:36px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--oc-border);
  background: transparent;
  color: var(--oc-text);
}
#uc-menu-panel .nf-close:hover{ background: var(--oc-hover); }



/* Body scroll only */
#uc-notif-panel .nf-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding: 10px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Wrapper table */
#uc-notif-panel .nf-table{
  border:1px solid var(--nf-border);
  border-radius: 14px;
  overflow:hidden;
}

/* GRID columns (DESKTOP) */
#uc-notif-panel .nf-grid{
  display:grid;
  grid-template-columns: 68px 1fr 110px 52px; /* thumb | content | time | go */
  gap: 10px;
  align-items:center;
}

/* Header row like thead */
#uc-notif-panel .nf-rowhead{
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--nf-head-bg);
  color: var(--nf-head-text);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Item row */
#uc-notif-panel a.nf-item{
  color: inherit !important;
  text-decoration: none !important;
}

#uc-notif-panel .nf-meta{ align-self: center; }
#uc-notif-panel .nf-col-go{ align-self: center; justify-self: end; }


#uc-notif-panel a.nf-item *{
  text-decoration: none !important; /* paksa hilang underline theme */
}

#uc-notif-panel .nf-row{
  padding: 10px 12px;
  border-bottom:1px solid var(--nf-border);
}
#uc-notif-panel .nf-row:last-child{ border-bottom:0; }
#uc-notif-panel .nf-item:hover{ background: var(--nf-hover); }

/* Thumb */
#uc-notif-panel .nf-thumb{
  width: 68px; height:68px;
  border-radius: 12px;
  overflow:hidden;
  border:1px solid var(--nf-border);
  background: rgba(0,0,0,.03);
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
#uc-notif-panel .nf-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
#uc-notif-panel .nf-dot{
  position:absolute;
  top: 8px;
  right: 8px;
  width: 8px; height: 8px;
  border-radius:999px;
  background: var(--nf-primary);
}

/* Content */
#uc-notif-panel .nf-main{ min-width:0; }
#uc-notif-panel .nf-title{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
}
#uc-notif-panel .nf-sub,
#uc-notif-panel .nf-note{
  margin-top: 4px;
  font-size: 12px;
  color: var(--nf-muted);
  line-height: 1.35;
  overflow-wrap:anywhere;
  word-break: break-word;
}

#uc-notif-panel .nf-clamp-1{
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
#uc-notif-panel .nf-clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

#uc-notif-panel .nf-chips{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
#uc-notif-panel .nf-chip{
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--nf-border);
  background: var(--nf-chip-bg);
  max-width: 100%;
}

/* Meta time */
#uc-notif-panel .nf-meta{
  text-align:right;
  font-size: 12px;
  color: var(--nf-muted);
}
#uc-notif-panel .nf-meta .nf-time{
  color: var(--nf-text);
  font-weight: 700;
}

/* Go */
#uc-notif-panel .nf-go{
  width: 42px; height:42px;
  border-radius: 12px;
  border: 1px solid var(--nf-border);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ========== MOBILE ========== */
/* jadi 3 kolom: thumb | content | go (time hidden) */
@media (max-width: 480px){
  #uc-notif-panel .nf-grid{
    grid-template-columns: 58px 1fr 46px;
  }
  #uc-notif-panel .nf-col-time{ display:none !important; }
  #uc-notif-panel .nf-thumb{ width:58px; height:58px; border-radius: 11px; }
  #uc-notif-panel .nf-rowhead{ font-size: 11px; }
}


#uc-notif-panel .nf-rowhead{ padding: 0; }
#uc-notif-panel .nf-rowhead.nf-grid{ padding: 10px 12px; }

#uc-notif-panel .nf-h-time{ text-align:right; }
#uc-notif-panel .nf-meta{ white-space: nowrap; }
#uc-notif-panel .nf-go{ justify-self:end; }

@media (max-width: 480px){
  #uc-notif-panel .nf-h-time,
  #uc-notif-panel .nf-h-go{ display:none !important; }

  #uc-notif-panel .nf-h-notif{ grid-column: 1 / -1; }
}


/* Close button harus selalu kebaca (light/dark) */
#uc-notif-panel .nf-close{
  color: var(--nf-text) !important;
  opacity: .95;
}

#uc-notif-panel .nf-close i,
#uc-notif-panel .nf-close svg{
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

#uc-notif-panel .nf-close:hover{
  background: var(--nf-hover);
}


#uc-notif-panel .nf-panel-title{
  color: var(--nf-text) !important;
}

/* Rapiin header: judul + badge sejajar */
#uc-notif-panel .nf-header .hstack{
  align-items: center; /* pastiin center */
}

#uc-notif-panel .nf-panel-title{
  margin: 0 !important;         /* hilangin margin default h3 */
  line-height: 1.1;             /* biar gak “turun” */
  font-size: 18px;              /* bebas, tapi konsisten */
  font-weight: 800;
}

/* Badge sejajar dan gak keliatan “naik/turun” */
#uc-notif-panel .nf-header .badge{
  display: inline-flex;
  align-items: center;
  height: 22px;                 /* kunci tinggi */
  padding: 0 10px;              /* padding horizontal */
  line-height: 1;               /* jangan ikut line-height teks */
  border-radius: 999px;
  margin-top: 0 !important;
}

#uc-notif-panel .nf-col-go{
  justify-self: end;
}


/* 1) Biar width/height hitungannya termasuk border & padding (anti overflow) */
#uc-notif-panel,
#uc-notif-panel *,
#uc-notif-panel *::before,
#uc-notif-panel *::after{
  box-sizing: border-box;
}

/* 2) Cegah scroll horizontal kecil di HP */
#uc-notif-panel .nf-body{
  overflow-x: hidden;
}

@media (max-width: 480px){
  #uc-notif-panel .nf-grid{
    grid-template-columns: 60px 1fr 50px; /* sedikit dilonggarin */
  }
  #uc-notif-panel .nf-thumb{
    width: 60px;
    height: 60px;
  }
}



/* ===========================
   OFFCANVAS MENU NAV FIX
   (biar item aktif ga "hilang")
   =========================== */

/* MENU PANEL VARS */
/* ===========================
   FIX UC-MENU-PANEL (biar gak gelap)
   taruh PALING BAWAH
   =========================== */

#uc-menu-panel{
  --oc-panel: #ffffff;
  --oc-text: rgba(17,24,39,.92);
  --oc-muted: rgba(17,24,39,.65);
  --oc-border: rgba(0,0,0,.12);
  --oc-hover: rgba(0,0,0,.05);
  --oc-primary: var(--color-primary, #2563eb);
}

/* dark mode */
/* dark mode (ikut indikator JS apa pun: .uc-dark / .dark / data-theme) */
html.dark #uc-menu-panel,
body.dark #uc-menu-panel,
html.uc-dark #uc-menu-panel,
body.uc-dark #uc-menu-panel,
:where(.uc-dark) #uc-menu-panel,
html[data-theme="dark"] #uc-menu-panel,
body[data-theme="dark"] #uc-menu-panel,
#uc-menu-panel.dark,
#uc-menu-panel.uc-dark{
  --oc-panel: #0b0f19;
  --oc-text: rgba(255,255,255,.92);
  --oc-muted: rgba(255,255,255,.72);
  --oc-border: rgba(255,255,255,.14);
  --oc-hover: rgba(255,255,255,.08);
  --oc-primary: var(--color-primary, #60a5fa);
}


/* kunci bar-nya */
#uc-menu-panel .uc-offcanvas-bar{
  background: var(--oc-panel) !important;
  color: var(--oc-text) !important;
  border-left: 1px solid var(--oc-border);
}

/* paksa teks menu kebaca (kadang span di dalam a punya color sendiri) */
#uc-menu-panel .nav-y a,
#uc-menu-panel .nav-y a *{
  color: var(--oc-text) !important;
  opacity: 1 !important;
}

#uc-menu-panel .nav-y .uc-nav-sub a,
#uc-menu-panel .nav-y .uc-nav-sub a *{
  color: var(--oc-muted) !important;
}



#uc-menu-panel .oc-divider{
  height: 1px;
  background: var(--oc-border);
  opacity: .9;          /* biar kebaca */
  margin: 8px 0;        /* jarak atas-bawah */
}


#uc-menu-panel .oc-logout-btn{
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
}
#uc-menu-panel .oc-logout-btn:hover{
  color: var(--oc-primary);
}