/* =========================================================================
   WORDMARK — tulisan "clypora" di sidebar
   18 Sep 2026: diganti ke POPPINS sesuai paket master logo resmi dari Arip
   (CLYPORA_MASTER_LOGO_HD_3000PX.zip -> INFORMASI_FONT_DAN_SPESIFIKASI.txt).
   Font lama Vollkorn Italic DIPENSIUNKAN.
   PENTING: Poppins TEGAK (italicAngle 0) -> font-style WAJIB normal.
   Aturan lama yang memaksa italic harus dibatalkan eksplisit.
   ========================================================================= */

@font-face{
  font-family:'ClyporaWord';
  src:url('/static/fonts/Poppins-SemiBold.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'ClyporaWord';
  src:url('/static/fonts/Poppins-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* teks wordmark: JANGAN kena aturan kotak lambang lama di app.css
   (.brand span{display:grid;width:35px;height:35px} -> huruf menumpuk) */
.brand .brand-word{
  display:inline !important;
  place-items:initial !important;
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  border-radius:0 !important;
  background:none !important;
  color:inherit !important;
  white-space:nowrap !important;
  overflow:visible !important;
}

.sidebar .brand .brand-word,
.brand .brand-word{
  font-family:'ClyporaWord','Poppins',system-ui,-apple-system,'Segoe UI',sans-serif !important;
  font-style:normal !important;      /* <- kunci: batalkan italic font lama */
  font-weight:600 !important;        /* SemiBold, sesuai spesifikasi */
  text-transform:none !important;    /* huruf kecil semua: "clypora" */
  letter-spacing:-.005em !important; /* geometric sans: rapat sedikit */
  font-size:1.18em !important;       /* sans tegak tampak lebih besar dari serif italic */
  line-height:1 !important;
  position:relative !important;
  top:0 !important;
  -webkit-font-smoothing:antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;
  text-rendering:optimizeLegibility !important;
}

/* jaga baris brand tetap rapi sejajar + teks DEKAT ke logo */
.sidebar .brand,
.brand{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
}
.sidebar .brand .brand-mark,
.brand .brand-mark{
  margin-right:0 !important;
}
/* Poppins tegak tak punya ruang kosong bawaan seperti italic -> rapatkan ke 2px */
.sidebar .brand .brand-word,
.brand .brand-word{
  margin-left:2px !important;
}

/* =========================================================================
   LAMBANG (ikon bulat gradien merah->ungu) — WAJIB TAJAM, JANGAN BLUR
   Sumber: clypora-icon.png 512x512 (dari master 3000px, potong rapat bbox).
   Ditampilkan 26-42px -> perkecilan besar, butuh interpolasi kualitas tinggi.
   ========================================================================= */
.brand .brand-mark,
.sidebar .brand .brand-mark,
body:has(.app-main) .sidebar .brand .brand-mark{
  object-fit:contain !important;
  image-rendering:auto !important;                 /* JANGAN pixelated */
  -ms-interpolation-mode:bicubic !important;
  transform:translateZ(0);                         /* paksa lapis GPU -> sampling halus */
  backface-visibility:hidden;
  filter:none !important;                          /* jangan ada blur/shadow menempel */
}

/* =========================================================================
   LEARNING DIALOG — popup "Mulai Belajar Clipping"
   Masalah terukur: gambar atas 120px (hampir separuh popup 275px),
   tombol tidak sama lebar (109 vs 217), popup terlalu lebar 355px.
   ========================================================================= */
.learning-dialog{
  width:min(320px,88vw) !important;
  max-width:320px !important;
  padding:14px !important;
  border-radius:16px !important;
  background:#0c0c11 !important;
  border:1px solid #22222c !important;
  box-shadow:0 24px 60px rgba(0,0,0,.55) !important;
}

/* kotak gambar: dari 120px -> 78px, tidak lagi mendominasi */
.learning-dialog .learning-visual{
  height:78px !important;
  min-height:0 !important;
  border-radius:12px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  margin-bottom:12px !important;
}
.learning-dialog .learning-visual small{
  font-size:9px !important;
  letter-spacing:.04em !important;
  opacity:.75 !important;
}
.learning-dialog .learning-visual b{
  font-size:22px !important;   /* was 32px */
  line-height:1 !important;
  height:auto !important;
}

/* judul & keterangan: rapat, proporsional */
.learning-dialog h2{
  font-size:15px !important;
  line-height:1.3 !important;
  margin:0 0 6px !important;
  text-align:center !important;
}
.learning-dialog p{
  font-size:11.5px !important;
  line-height:1.45 !important;
  margin:0 auto 14px !important;
  max-width:260px !important;
  text-align:center !important;
  color:#a09aa8 !important;
}

/* tombol: DUA SAMA LEBAR (was 109 vs 217) */
.learning-dialog>div:last-child{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  width:100% !important;
}
.learning-dialog .btn,
.learning-dialog .btn.secondary{
  width:100% !important;
  min-width:0 !important;
  height:40px !important;
  min-height:40px !important;
  padding:0 10px !important;
  font-size:13px !important;
  border-radius:10px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}
.learning-dialog .btn.secondary{
  background:#0a0a0e !important;
  border:1px solid #22222c !important;
  color:#ff2e6a !important;
  box-shadow:none !important;
}
.learning-dialog .btn:not(.secondary){
  background:linear-gradient(90deg,#ff2e6a,#b40589) !important;
  border:0 !important;
  color:#ffffff !important;
  font-weight:700 !important;
}

/* layar sempit: tetap muat */
@media (max-width:400px){
  .learning-dialog{width:min(300px,90vw) !important;padding:12px !important;}
  .learning-dialog .learning-visual{height:70px !important;}
}

/* popup belajar: taruh di TENGAH layar (sebelumnya nempel pojok kiri atas) */
dialog.learning-dialog[open]{
  position:fixed !important;
  inset:0 !important;            /* penuhi layar, lalu pusatkan pakai margin auto */
  top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  margin:auto !important;        /* <- ini yang memusatkan, tak bisa digeser transform */
  transform:none !important;
  height:max-content !important;
  max-height:calc(100vh - 32px) !important;
}
dialog.learning-dialog::backdrop{
  background:rgba(4,6,18,.72) !important;
}

/* =========================================================================
   IKON INFO (i) KECIL — dashboard "Total Pendapatan" & analitik "Total Views"
   Masalah terukur: lingkaran 14x14 tapi line-height 24px -> huruf "i"
   terdorong keluar ke bawah lingkaran. Juga vertical-align:baseline bikin
   lingkaran melorot dari teks di sebelahnya.
   ========================================================================= */
i.metric-info,
.metric-info,
main .kpi-label i,
main .analytics-kpi i,
main section i:not([class]),
main article i:not([class]){
  /* hanya untuk <i> yang isinya huruf "i" — dibatasi ukurannya di bawah */
}

i.metric-info,
i.kpi-info,
main span > i:not([class]),
main div:not(.dist-bar):not(.an-budget-bar):not(.rank-track-line) > i:not([class]){
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:14px !important;
  height:14px !important;
  min-width:14px !important;
  min-height:14px !important;
  flex:0 0 auto !important;
  padding:0 !important;
  margin:0 0 0 6px !important;
  border:1px solid rgba(255,255,255,.34) !important;
  border-radius:50% !important;
  background:transparent !important;
  color:rgba(255,255,255,.72) !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:9px !important;
  font-style:normal !important;
  font-weight:600 !important;
  line-height:1 !important;          /* <- kunci: was 24px, bikin "i" jatuh */
  letter-spacing:0 !important;
  text-indent:0 !important;
  vertical-align:middle !important;
  overflow:hidden !important;
  cursor:help !important;
}

/* buang lingkaran kedua / titik tambahan bila ada */
i.metric-info::before, i.metric-info::after,
i.kpi-info::before, i.kpi-info::after,
main span > i:not([class])::before,
main span > i:not([class])::after,
main div:not(.dist-bar):not(.an-budget-bar):not(.rank-track-line) > i:not([class])::before,
main div:not(.dist-bar):not(.an-budget-bar):not(.rank-track-line) > i:not([class])::after{
  content:none !important;
  display:none !important;
}

/* label induk: sejajarkan teks + ikon dalam satu baris rapi */
main article > span:has(> i.metric-info),
main span:has(> i.kpi-info),
main span:has(> i:not([class])){
  display:inline-flex !important;
  align-items:center !important;
  gap:0 !important;
  line-height:1.4 !important;
}