<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PT Psiko Dinamika</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        /* Warna navy */
        :root {
            --navy: #001F54;
        }

        /* Banner atas */
        .banner {
            background-color: var(--navy);
            color: white;
            padding: 20px 0;
        }
        .banner h1 {
            font-weight: bold;
            font-size: 2.5rem;
        }
        .issn {
            font-size: 0.9rem;
            font-weight: bold;
            text-align: left;
        }
        .logo-kanan {
            max-height: 80px;
        }
        .subtext {
            font-size: 0.8rem;
            font-style: italic;
            color: #ddd;
        }

        /* Navbar */
        .navbar-custom {
            background-color: var(--navy);
        }
        .navbar-custom .nav-link {
            color: white;
            font-weight: 500;
        }
        .navbar-custom .nav-link:hover {
            color: #cdd6f4;
        }
    </style>
</head>
<body>

<!-- Header -->
<header class="bg-navy text-white py-4">
  <div class="container">
    <div class="row align-items-center">
      
      <!-- Logo kiri -->
      <div class="col-md-2 col-12 text-center mb-3 mb-md-0">
        <img src="logo.png" alt="Logo Psiko Dinamika" class="img-fluid" style="max-height:80px;">
      </div>
      
      <!-- Judul tengah -->
      <div class="col-md-8 col-12 text-center">
        <h1 class="fw-bold mb-1" style="font-size:2rem;">PT Psiko Dinamika</h1>
        <p class="mb-0 fst-italic">Penerbit Buku, Jurnal, dan Media Ilmiah Berkualitas</p>
      </div>
      
      <!-- Alamat kanan -->
      <div class="col-md-2 col-12 text-center text-md-end mt-3 mt-md-0">
        
        <p class="mb-0 small">e-mail: <a href="mailto:psikodinamika.publishing02@gmail.com" class="text-white text-decoration-none">psikodinamika.publishing02@gmail.com</a></p>
        
      </div>

    </div>
  </div>
</header>




<!-- CSS tambahan -->
<style>
.bg-navy {
  background-color: #001f54 !important; /* warna navy */
}
header h1 {
  font-size: 2rem;
}
header p {
  font-size: 0.95rem;
}
</style>

<!-- CSS untuk membuat dropdown muncul saat hover -->
<style>
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}
</style>


<style>
/* Background transparan */
.bg-transparan {
    background-color: rgba(255, 255, 255, 0.85); /* Putih transparan */
    border-radius: 10px;
    padding: 20px;
}

/* Fade-in animation */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out forwards;
}

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

/* Margin umum untuk konten */
.section-margin {
    margin-top: 40px;
    margin-bottom: 40px;
}
</style>


<style>
/* Membatasi lebar teks agar nyaman dibaca */
.text-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Justify teks */
.text-justify {
    text-align: justify;
}

/* Memberikan jarak antar paragraf */
.text-container p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

/* List lebih rapi */
.text-container ul {
    padding-left: 1.2rem;
    margin-bottom: 1rem;
}
</style>
