/* =========================================================
   LAYOUT.CSS
   Struktur layout utama halaman
   Dipakai bersama oleh:
   - index.html
   - dashboard.html

   Fokus:
   - navbar utama
   - wrapper halaman
   - layout umum canvas
   - footer umum
   - logo responsif
   - penyesuaian agar dashboard lebih proporsional
   ========================================================= */

/* =========================================================
   WRAPPER UTAMA HALAMAN
   ========================================================= */
.main-wrapper {
  padding-top: 110px;
}

.analyzer-container {
  position: relative;
  min-height: calc(100vh - 110px);
}

/* =========================================================
   AREA CANVAS / VIDEO
   ========================================================= */
.canvas-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
}

.output_canvas {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

.input_video {
  display: none;
}

/* =========================================================
   LOGO / BRAND
   ========================================================= */
.brand-logo {
  width: 480px;
  height: 75px;
}

.footer-brand {
  margin-top: -55px;
}

/* =========================================================
   FOOTER INFO
   ========================================================= */
.footer-address {
  margin-top: -15px;
}

.footer-meta {
  font-size: 14px;
  margin-top: 10px;
}

.footer-meta-tight {
  margin-top: -17px;
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.nav-link:hover {
  font-weight: bold;
}

/* =========================================================
   SOCIAL ICONS
   ========================================================= */
.custom-social li {
  display: inline-block;
  margin-right: 10px;
}

.custom-social li a {
  color: #333;
  text-decoration: none;
  font-size: 1.5em;
}

.custom-social li a:hover {
  color: #f6db00;
}

/* =========================================================
   BACK TO TOP ICON
   ========================================================= */
.custom-ui {
  color: #f6db00;
  border-radius: 50%;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  transition: box-shadow 0.3s ease;
  box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.1);
}

.custom-ui:hover {
  color: #f6db00;
  border-radius: 50%;
  box-shadow: 0px 0px 5px 0px rgba(66, 68, 90, 1);
}

/* =========================================================
   PAGE MODE IDENTIFIER
   Opsional untuk styling per halaman jika dibutuhkan nanti
   ========================================================= */
body[data-page="index"] .main-wrapper {
  min-height: calc(100vh - 110px);
}

body[data-page="dashboard"] .main-wrapper {
  min-height: calc(100vh - 110px);
}

/* =========================================================
   PENYESUAIAN KHUSUS INDEX
   ========================================================= */
body[data-page="index"] .analyzer-container {
  min-height: calc(100vh - 110px);
}

body[data-page="index"] .canvas-wrapper {
  min-height: 68vh;
}

/* =========================================================
   PENYESUAIAN KHUSUS DASHBOARD
   Dibuat agar layout klinis lebih proporsional
   ========================================================= */
body[data-page="dashboard"] .main-wrapper {
  padding-top: 108px;
}

body[data-page="dashboard"] .canvas-wrapper {
  min-height: auto;
}

body[data-page="dashboard"] .analyzer-container {
  min-height: auto;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1300px) {
  .brand-logo {
    width: 430px;
    height: auto;
  }

  .canvas-wrapper {
    min-height: 58vh;
  }

  body[data-page="index"] .canvas-wrapper {
    min-height: 56vh;
  }
}

@media (max-width: 992px) {
  .main-wrapper {
    padding-top: 98px;
  }

  .analyzer-container {
    min-height: auto;
  }

  .canvas-wrapper {
    min-height: 52vh;
  }

  body[data-page="index"] .canvas-wrapper {
    min-height: 50vh;
  }

  body[data-page="dashboard"] .main-wrapper {
    padding-top: 96px;
  }
}

@media (max-width: 576px) {
  .brand-logo {
    width: 295px;
    height: auto;
  }

  .main-wrapper {
    padding-top: 90px;
  }

  .canvas-wrapper {
    min-height: 42vh;
  }

  body[data-page="index"] .canvas-wrapper {
    min-height: 40vh;
  }

  body[data-page="dashboard"] .main-wrapper {
    padding-top: 88px;
  }

  .footer-meta {
    font-size: 13px;
  }
}