/* =========================================================
   GLOBAL BASE STYLE
========================================================= */
body { 
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Inter", Arial, sans-serif; 
  background:#f9fafa; 
  color:#2b2b2b; 
  margin:0;
}

/* =========================================================
   HEADER UMUM
========================================================= */
.header { 
  background:#002147; 
  color:#fff; 
  padding:1.5rem 1rem; 
  border-bottom:5px solid #00a6fb; 
  text-align:center; 
}
.header h1 { 
  font-weight:700; 
  font-size:1.8rem; 
  margin:0; 
}

/* =========================================================
   SECTION TITLE
========================================================= */
.section-title { 
  border-left:5px solid #00a6fb; 
  padding-left:1rem; 
  margin-top:2rem; 
  margin-bottom:1rem; 
  font-size:1.25rem; 
  font-weight:600; 
  display:flex; 
  gap:.75rem; 
  align-items:center; 
  color:#002147;
}

/* =========================================================
   TABLE
========================================================= */
.table thead th { 
  white-space:nowrap; 
}

/* =========================================================
   WRAPPER & FRAME
========================================================= */
.report-wrapper {
  overflow: hidden;   /* sembunyikan konten yang berlebih */
  position: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f5f5f5;      
  padding: 1rem;
  gap: 1rem;
  -webkit-overflow-scrolling: touch;
}

.report-scale { 
  transform-origin: top center; 
}

.report-frame {
  width: 794px;             /* A4 width */
  height: 1123px;           /* A4 height */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  padding: 2.5rem;
  position: relative;
  animation: fadeInUp 1s ease;

  /* cetak PDF */
  page-break-after: always;
  break-after: page;
}

/* =========================================================
   GRID LAYOUT DALAM FRAME
========================================================= */
.report-frame .row {
  display: flex;
  flex-wrap: nowrap;
}
.report-frame .col-12,
.report-frame .col-lg-6 {
  flex: 1 1 0;
  max-width: 50%;
}

/* =========================================================
   STICKY SELECTOR
========================================================= */
.select-wrapper {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #f9fafa;
  padding: 0.5rem 0;
}

/* =========================================================
   KPI CARD
========================================================= */
.kpi-card {
  flex: 1;
  background:#f5f7fa;
  padding:1rem;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  text-align:center;
}
.kpi-card .value {
  font-size:1.6rem;
  font-weight:700;
  color:#00509e;
}
.kpi-card .label {
  font-size:0.9rem;
  color:#444;
  margin-top:0.25rem;
}

/* =========================================================
   INSIGHT BOX COLLAPSE/EXPAND
========================================================= */
.insight-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}
.insight-expand {
  max-height: 600px;
  opacity: 1;
}

/* =========================================================
   DISCLAIMER
========================================================= */
.disclaimer-premium {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  font-family: 'Georgia', serif;
  font-size: 0.75rem;
  font-style: italic;
  color: #666;
  text-align: right;
  max-width: 260px;
  line-height: 1.4;
}

/* =========================================================
   HERO SECTION (Cover)
========================================================= */
.hero-title { 
  font-size:2.8rem; 
  font-weight:700; 
  margin-bottom:1rem; 
  font-family:'Inter',sans-serif; 
  letter-spacing:-0.5px; 
}
.hero-subdesc { 
  font-size:1.25rem; 
  line-height:1.8; 
  color:#e0f7f5; 
  font-family:'Inter',sans-serif; 
  max-width:820px; 
}
.hero-quote { 
  font-size:1.1rem; 
  font-style:italic; 
  color:#dff8f6; 
  margin-top:1.4rem; 
  font-family:'Georgia',serif; 
}
.hero-source { 
  font-family:'Georgia',serif; 
  font-size:0.8rem; 
  font-style:italic; 
  color:#fff; 
}
/* =========================================================
   GLASSMORPHISM CARD
========================================================= */
.glass-card { 
  backdrop-filter:blur(10px); 
  background:linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.35)); 
  border-radius:14px; 
  padding:1.2rem; 
  box-shadow:0 6px 18px rgba(0,0,0,0.12); 
  transition:transform 0.3s ease, box-shadow 0.3s ease; 
}
.glass-card:hover { 
  transform:translateY(-4px) scale(1.02); 
  box-shadow:0 8px 22px rgba(0,0,0,0.18); 
}
.glass-card-title { 
  font-weight:700; 
  font-size:1.25rem; 
  font-family:'Inter',sans-serif; 
  margin-bottom:0.5rem; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  text-align:center; 
}
.glass-card-desc { 
  font-size:1rem; 
  color:#333; 
  text-align:center; 
}
.icon-premium { 
  margin-right:6px; 
  vertical-align:middle; 
}

/* =========================================================
   UNIVERSITAS TITLE
========================================================= */
.uni-title { 
  font-family:'Inter',sans-serif; 
  font-size:3.2rem; 
  font-weight:800; 
  white-space:normal; 
  text-align:center; 
  line-height:1.3; 
  max-width:90%; 
  margin:3rem auto; 
  text-shadow:0 2px 4px rgba(0,0,0,0.15); 
}

/* =========================================================
   FOOTER PREMIUM
========================================================= */
.footer-premium { 
  display:flex; 
  justify-content:center; 
  align-items:center; 
  flex-direction:column; 
  font-family:'Georgia',serif; 
  font-size:1rem; 
  font-style:italic; 
  color:#444; 
  margin-bottom:1.2rem; 
}
.footer-line { 
  height:1px; 
  background:#0003; 
  width:240px; 
  margin-bottom:0.5rem; 
}

/* =========================================================
   BRAND LOGO (Tanpa Box)
========================================================= */
.brand-box { 
  position:absolute; 
  bottom:1.5rem; 
  left:1.5rem; 
  display:flex; 
  flex-direction:row; 
  align-items:center; 
  gap:0.8rem; 
}
.brand-logo { 
  width:55px; 
  height:55px; 
  border-radius:10px; 
}
.brand-title { 
  font-weight:700; 
  font-size:1rem; 
  font-family:'Inter',sans-serif; 
  color:#000; 
}
.brand-sub { 
  font-size:0.85rem; 
  font-family:'Inter',sans-serif; 
  color:#555; 
}

/* =========================================================
   WATERMARK PREMIUM
========================================================= */
.watermark-premium { 
  position:absolute; 
  bottom:10%; 
  right:5%; 
  width:200px; 
  height:200px; 
  opacity:0.08; 
  pointer-events:none; 
  animation:rotateSlow 120s linear infinite; 
}

/* =========================================================
   ANIMASI
========================================================= */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes pulseDot {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50% { transform: translateX(-50%) scale(1.2); opacity: 0.7; }
}

/* =========================================================
   PRINT HANDLING
========================================================= */
@page {
  size: A4 portrait;
  margin: 0;
}
@media print {
  body { background:#fff; }
  .report-wrapper {
    background:#fff;
    padding:0;
    gap: 0;
  }
  .report-frame {
    box-shadow:none;
    border-radius:0;
    margin:0;
    page-break-after: always;
  }
}

/* =========================================================
   RESPONSIVE (Mobile & Tablet)
========================================================= */
@media (max-width: 1024px) {
  .report-scale {
    transform: scale(0.7);
  }
  .report-wrapper {
    gap: 0.5rem;
  }
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes floatAnim {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-20px); }
}

@keyframes pulseAnim {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

.hover-anim:hover {
  transform: translateY(-6px);
  transition: all 0.3s ease;
  box-shadow: 0 12px 24px rgba(0,0,0,0.15) !important;
}



/* =========================================================
   COVER IMAGE LINKEDIN
========================================================= */

/* Center wrapper */
.scaled-wrapper {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

/* Wrapper eksplisit: setengah ukuran asli */
.scaled-container {
  width: 857.5px;
  height: 512px;
  overflow: hidden;
  position: relative;
}

/* Cover asli diskalakan ke dalam wrapper */
#linkedinCoverBold {
  transform: scale(0.5);
  transform-origin: top left;
  width: 1715px;
  height: 1024px;
}

/* Print: tetap proporsional */
@media print {
  .scaled-container {
    width: 857.5px !important;
    height: 512px !important;
  }
  #linkedinCoverBold {
    transform: scale(0.5) !important;
    transform-origin: top left !important;
  }
  @page {
    size: A4 landscape;
    margin: 0;
  }
}