{% extends "base.html" %}
{% block content %}

<section class="hero">
  <div class="hero-wrapper">
    <div class="hero-logo">
      <img src="{{ url_for('static', filename='logo.jpg') }}" alt="Logo Krisna Entertainment">
    </div>
    <div class="hero-text">
      <h1>KRISNA ENTERTAINMENT INDONESIA</h1>
      <p>
        Menyediakan layanan hiburan terbaik untuk acara Anda — mulai dari wedding organizer, konser, VideoBooth 360,
        hingga event organizer profesional lainnya.
        <br>
        Kami berkomitmen menciptakan pengalaman yang tak terlupakan untuk setiap momen spesial Anda.
      </p>

      <!-- TOMBOL WHATSAPP TANPA TANDA TANYA -->
      <a href="https://wa.me/62881026852990?text=Halo%20Admin%20Krisna%20Entertainment%20Indonesia%20👋%0ASaya%20ingin%20bertanya%20mengenai%20layanan%20yang%20tersedia.%0ATerima%20kasih%20🙏"
         target="_blank"
         class="btn-main">
        Hubungi Kami di WhatsApp
      </a>
    </div>
  </div>
</section>

<style>
  :root {
    --brand: #16b6c9;
    --bg: #070708;
    --card: #0f1315;
    --muted: #9aa3a6;
    --white: #ffffff;
  }

  .hero {
    background: linear-gradient(160deg, #090a0b, #0f1315);
    color: var(--white);
    padding: 100px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    animation: fadeIn 1.2s ease-in-out;
  }

  .hero-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 850px;
  }

  .hero-logo img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: 0 0 40px var(--brand), 0 0 80px rgba(22,182,201,0.5);
    animation: pulseGlow 3s infinite ease-in-out;
    background-color: #0f1315;
    object-fit: cover;
  }

  @keyframes pulseGlow {
    0% { box-shadow: 0 0 30px var(--brand), 0 0 60px rgba(22,182,201,0.4); }
    50% { box-shadow: 0 0 60px var(--brand), 0 0 120px rgba(22,182,201,0.7); }
    100% { box-shadow: 0 0 30px var(--brand), 0 0 60px rgba(22,182,201,0.4); }
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .hero-text h1 {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 2px;
    color: var(--brand);
    text-shadow: 0 0 20px rgba(22,182,201,0.8);
  }

  .hero-text p {
    color: var(--muted);
    max-width: 650px;
    margin: 20px auto 30px;
    line-height: 1.7;
    font-size: 1rem;
  }

  .btn-main {
    background-color: var(--brand);
    color: var(--white);
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
  }

  .btn-main:hover {
    background-color: #11a0b2;
    transform: scale(1.05);
  }

  @media (max-width: 768px) {
    .hero-wrapper { gap: 30px; padding: 0 10px; }
    .hero-logo img { width: 150px; height: 150px; }
    .hero-text h1 { font-size: 2rem; }
  }
</style>

{% endblock %}