<?php 
include 'header.php';
?>

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - UMKM Galeri 3D</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<style>
body {
    background: #f3f4f6;
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
}
.container {
    max-width: 1200px;
    margin: 5px auto;
    padding: 0 30px;
}
/* --- Tampilan Responsif untuk HP --- */
@media (max-width: 780px) {

  /* Susun jadi kolom (gambar di atas, teks di bawah) */
  .image > div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 25px !important;
    padding: 25px 15px !important;
  }

  /* Gambar besar dan dominan */
  .image img {
    width: 100% !important;
    height: 100% !important;
    max-height: 500px !important; /* diperbesar dari 420px */
    border-radius: 14px !important;
    object-fit: cover !important;
    box-shadow: 0 8px 16px #000;
	margin-top: -70px !important;
  }

  /* Kotak teks di bawah gambar (lebih kecil & ringan) */
  .image > div[style*="background: rgba(255,255,255,0.85)"] {
    width: 120% !important; /* sebelumnya 50%, jadi lebih kecil dibanding gambar */
    margin-left: 0 !important;
    background: rgba(255,255,255,0.95) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px #000;
    padding: 10px 8px !important;
  }

  /* Teks lebih kecil agar proporsional */
  .image h1 {
    font-size: 23px !important;
    line-height: 1.3 !important;
    margin-bottom: 5px !important;
  }

  .image p {
    font-size: 15px !important;
    color: white !important;
    margin-bottom: 8px !important;
  }

  /* Tombol kecil dan tetap elegan */
  .image button {
    font-size: 11px !important;
    padding: 10px 12px !important;
    border-radius: 5px !important;
    background: #f7941d !important;
    color: #fff !important;
    border: none !important;
    transition: 0.3s;
  }

  .image button:hover {
    background: #e68a00 !important;
  }
}
</style>
</head>
<body>

<!-- IMAGE -->
<div class="container-fluid" style="margin: 0; padding: 0;">
  <div class="image" style="margin-top: -30px; position: relative;">
    <!-- Ganti gambar -->
	<div style=" width:100%; height:710px; background-image: url('image/home/beranda.jpeg'); background-repeat: no-repeat; background-position: center; background-size: cover; background-color: rgba(0,0,0,0.6); background-blend-mode: multiply; border-radius:0;"></div>

    <!-- Overlay dan teks -->
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 600px; text-align: center; padding: 20px 25px; border-radius: 10px;box-shadow: 0 4px 12px #000;">

      <!-- Konten teks sebelah kanan -->
    <div style="flex: 0 0 40%; margin-left: auto; padding: 15px; color: #000; border-radius: 10px;">
		<h1 style="font-size: 24px; line-height: 1.2; margin-bottom: 12px;">
		<span style="color: white;">Pasar Pagi UMKM</span> 
		<span style="color: white;">Galeri3D</span>
		</h1>
		<p style="font-size: 15px; margin-bottom: 5px; color: white;">Pasar pagi UMKM galeri 3D adalah wadah bagi pelaku usaha kecil untuk memasarkan produknya</p>
		<a href="about.php" style="text-decoration: none;">
			<button style="background: orange; color: #fff; border: none; padding: 7px 16px; border-radius: 5px; font-size: 13px;">
				Tentang Kami
			</button>
		</a>

	</div>
    </div>
  </div>
</div>
</body>
</html>