<?php
    // Menghindari error cannot modify header information
    ob_start(); // Initiate the output buffer
?>
<!DOCTYPE HTML>
<html lang = "id">
<head>

  <title><?php include "dina_title.php"; ?></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />  
  <meta name="robots" content="index, follow">
  <meta name="description" content="<?php include "dina_metadeskripsi.php"; ?>">
  <meta name="keywords" content="<?php include "dina_metakeyword.php"; ?>">  

	<!-- Facebook Open Graph -->  
	<meta property="og:title" content="<?php include "dina_title.php" ?>" />
	<meta property="og:image" content="<?php echo "$d[alamat_website]" ?>/<?php include "dina_image.php" ?>" />
	<meta property="og:description" content="<?php include "dina_metadeskripsi.php" ?>" />

	<!-- Twitter Card -->  
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="<?php echo "$d[twitter]" ?>">
  <meta name="twitter:title" content="<?php include "dina_title.php" ?>">
  <meta name="twitter:description" content="<?php include "dina_metadeskripsi.php" ?>">
  <meta name="twitter:creator" content="<?php echo "$d[twitter]" ?>">
  <meta name="twitter:image" content="<?php echo "$d[alamat_website]" ?>/<?php include "dina_image.php" ?>">
  <meta name="twitter:domain" content="<?php echo "$d[alamat_website]" ?>">
  <meta name="twitter:url" content="<?php echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'] ?>" />

  <!-- Google Plus Meta Tag -->  
 	<meta itemprop="name" content="<?php include "dina_title.php" ?>" />
 	<meta itemprop="description" content="<?php include "dina_metadeskripsi.php" ?>" />
 	<meta itemprop="image" content="<?php echo "$d[alamat_website]" ?>/<?php include "dina_image.php" ?>" />

  <!-- Google Plus Photo -->  
	<link href='https://plus.google.com/<?php echo "$d[googleplus]" ?>' rel='author'/>
	<link href='https://plus.google.com/<?php echo "$d[googleplus]" ?>' rel='publisher'/>
  
  <meta http-equiv="Copyright" content="lokomedia">
  <meta name="author" content="Lukmanul Hakim">
  <meta http-equiv="imagetoolbar" content="no">
  <meta name="language" content="Indonesia">
  <meta name="revisit-after" content="7">
  <meta name="webcrawlers" content="all">
  <meta name="rating" content="general">
  <meta name="spiders" content="all">

		<!-- Favicon -->
    <link rel="shortcut icon" href="<?php echo"$d[alamat_website]/foto_galeri/bf.webp"?>" />

		<!-- Google Web Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet"> 

         <!-- Icon Font Stylesheet -->
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

        <!-- Libraries Stylesheet -->
        <link rel="stylesheet" href="lib/animate/animate.min.css"/>
        <link href="<?php echo"$d[alamat_website]/$f[folder]/"?>lib/lightbox/css/lightbox.min.css" rel="stylesheet">
        <link href="<?php echo"$d[alamat_website]/$f[folder]/"?>lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">


        <!-- Customized Bootstrap Stylesheet -->
        <link href="<?php echo"$d[alamat_website]/$f[folder]/"?>css/bootstrap.min.css" rel="stylesheet">

        <!-- Template Stylesheet -->
        <link href="<?php echo"$d[alamat_website]/$f[folder]/"?>css/style.css" rel="stylesheet">
        <style>
            img, svg {
  width: 100%;
}
        </style>



        <style>
        
        
       
        
        
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}
@media (max-width: 991.98px) {
  .sticky-top.navbar-light {
    position: fixed;
  background: rgba(255, 255, 255, 0.58);

    width: 100%;
  }
}

 .wawa {
  background: linear-gradient(135deg,#002245,#0094de);
}
 
.bg-primary {
background: linear-gradient(135deg,#2887ff,#2887ff);
}


@media (max-width: 991.98px) {
  .navbar.navbar-expand-lg .navbar-toggler {
    padding: 10px 20px;
    border: 1px solid #0489d0;
    color: #0489d0;
  }
}
.btn-primary {
  color: #000;
background: linear-gradient(135deg,#002245,#002245);
}
.btn.btn-light:hover {
  color: var(--bs-white);
  background: #fdaa4b;
}
.btn.btn-light {
  color: #fdaa4b;
}
.btn.btn-primary:hover {
  background: #1f438d;
  color: #544035;
}
.text-primary {
  color: #fff !important;
}
.blog .owl-nav .owl-next {

  background: #fdaa4b;
 
}
.blog .owl-nav .owl-prev {
  background: #fdaa4b;
}
.blog .blog-item .blog-img .blog-title a {

  background: #fdaa4b;

}
:root {
--bs-primary: #fdaa4b;
}




.delya{
    max-height: 100px;

}



.navbar-light .navbar-brand img {
  max-height: 70px;
  
}

@media (max-width: 991.98px) {
  .navbar-light .navbar-brand img {
    max-height: 40px;
  }
}

@media (min-width: 992px) {
  .sticky-top.navbar-light {
    position: fixed;
 background: rgba(255, 255, 255, 0.58);

  }
}

.yalma{
    width: 250px;
    font-size: 2rem;
  

}
.yalma1{
   width: 200px;
   height:auto;
    font-size: 2rem;
   filter: drop-shadow(0 0 1px #fff) drop-shadow(1px 1px 1px #fff) drop-shadow(-1px -1px 1px #fff);

}
.lalma {
  display: none;
}
.wachyudi{
  width: 20%;
}

@media only screen and (max-width: 900px) {
  .yalma {
    width: 200px;
  

  }
  .yalma1{
    width: 100px;
    height:auto;
    font-size: 2rem;
   filter: drop-shadow(0 0 1px #fff) drop-shadow(1px 1px 1px #fff) drop-shadow(-1px -1px 1px #fff);

}
.wachyudi{
  width: 50%;
}


  .navbar {
background: rgba(255, 255, 255, 0.58);

}
.lalma {
  display: block;
}
}




@media (max-width: 991.98px) {
  .sticky-top.navbar-light {
    position: fixed;
background: rgba(255, 255, 255, 0.58);

    width: 100%;
  }
}
@media (max-width: 991.98px) {
  .navbar.navbar-expand-lg .navbar-toggler {
    padding: 0px 0px;
    border: 0px solid #0489d0;
    color: #0489d0;
  }
}

@media (min-width: 992px) {
  .navbar-light {
    position: relative;
  }
}
</style>
<link href="https://fonts.googleapis.com/css?family=Aguafina+Script|Dancing+Script|Kaushan+Script|Open+Sans|Petit+Formal+Script|Pinyon+Script|Roboto|Rouge+Script" rel="stylesheet">




<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Dancing+Script:wght@400;600&display=swap" rel="stylesheet">



    </head>

    <body>

        <!-- Spinner Start -->
        <div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
            <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
        <!-- Spinner End -->


        <!-- Navbar & Hero Start -->
        <div class="container position-relative p-0">
            <nav class="navbar navbar-expand-lg navbar-light px-3 px-lg-5 py-3 py-lg-2">
              <a href="<?php echo"$d[alamat_website]"?>" 
  >
  <img class="yalma" 
       src="<?php echo"$d[alamat_website]/foto_galeri/bungker.webp"?>" 
       alt="Logo" 
       >
  
</a>

                <button class="lalma mt-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" style="background: transparent;
  border: 0px solid;">
                   <svg fill="#000" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M19,5H1C0.4,5,0,4.6,0,4s0.4-1,1-1h18c0.6,0,1,0.4,1,1S19.6,5,19,5z"></path>
<path d="M10,11H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h9c0.6,0,1,0.4,1,1S10.6,11,10,11z"></path>
<path d="M19,17H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S19.6,17,19,17z"></path>
</svg>
                </button>




                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <div class="navbar-nav ms-auto py-0">
                        <a href="<?php echo"$d[alamat_website]"?>" class="nav-item nav-link" style="color:#000;font-weight:600">Home</a>

                    
                 <a href="<?php echo"$d[alamat_website]/#produk"?>" class="nav-item nav-link" style="color:#000;font-weight:600">Produk</a>
              


                      
                         <a href="<?php echo"$d[alamat_website]/#faq"?>" class="nav-item nav-link" style="color:#000;font-weight:600">FAQ</a>
                         
                          <a href="<?php echo"$d[alamat_website]/blog"?>" class="nav-item nav-link" style="color:#000;font-weight:600">Artikel</a>

                         
                         <a href="<?php echo"$d[alamat_website]/#videos"?>" class="nav-item nav-link" style="color:#000;font-weight:600">Videos</a>
                         
                         
                      
                         
                      
                         
                         
                     
                    </div>
          
    <a href="<?php echo $d['alamat_website']; ?>/#kontak" 
       class="btn py-2 px-4 my-3 my-lg-0 flex-shrink-0" 
       style="border-radius:0px;background-color: transparent;color: #000;border:3px solid #000;font-weight:600">
        Contact Us
    </a>


                </div>
            </nav>
</div>

<?php include "isi.php" ?>
          








<footer class="bg-dark text-white pt-5 pb-3" style="background: #000 !important;" id="kontak">
  <div class="container">
    <div class="row">

      <!-- Logo & Deskripsi -->
      <div class="col-md-4 mb-4">
          
        <a href="<?php echo"$d[alamat_website]"?>" 
   style="display: inline-flex; align-items: center; text-decoration: none;">
  <img class="yalma" 
       src="<?php echo"$d[alamat_website]/foto_galeri/bungker.webp"?>" style="width:200px;filter: drop-shadow(0 0 1px #fff) drop-shadow(1px 1px 1px #fff) drop-shadow(-1px -1px 1px #fff);">
  
</a>
      
       
        
        <div class="pt-3">
        
        
        <?php
      // Ambil semua video dari database
      $queryvideo = "SELECT * FROM video ORDER BY id_video ASC";
      $hasilvideo = mysqli_query($konek, $queryvideo);
      $videos = [];
      while ($g = mysqli_fetch_array($hasilvideo)) {?>
      
       <a href="<?php echo"$g[deskripsi]"?>" class="text-white me-2" target="_blank">
           <img src="<?php echo"$d[alamat_website]/foto_video/$g[gambar]"?>" style="width:40px"></a>
      
      <?php
      }?>
        
        </div>       
      </div>

     



      <!-- Kontak -->
      <div class="col-md-4 mb-4">
        <h5 class="border-bottom border-warning pb-2 text-white pb-3 mb-4">Hubungi Kami</h5>
        <p><i class="fas fa-phone-alt me-2 mb-2"></i> <?php echo"$d[facebook]"?></p>
        <p><i class="fab fa-whatsapp me-2 mb-2"></i> <?php echo"$d[twitter]"?></p>
        <p><i class="far fa-envelope me-2 mb-2"></i> <?php echo"$d[email]"?></p>
        <p><i class="fas fa-map-marker-alt me-2 mb-2"></i> <?php echo"$d[googleplus]"?></p>
      </div>
      
      
       <div class="col-md-4 mb-4">
       
        <div class="row">

          <div class="col-12">
           <?php echo"$d[googlemap]"?>
          </div>
          
         
          
          
       
        </div>
        
      </div>

    </div>
<hr/>
    <div class="text-center mt-4">
      <p class="mb-0">&copy; 2010 bunker-lsi.com. All Rights Reserved.</p>
    </div>
  </div>
</footer>


 <a href="https://api.whatsapp.com/send?phone=<?php echo"$d[twitter]"?>&amp;text=<?php echo"$d[twitter_widget]"?>" class="float" target="_blank">
    <!--<i class="fa fa-whatsapp my-float"></i>-->
    
    <img src="<?php echo"$d[alamat_website]/$f[folder]/images/icons8-whatsapp.gif"?>" alt="banner" style="display: inline-block; width: 100%; height: 48px; max-width: 48px; margin: auto; border-radius: 50%;">
</a>
<style>
.float {
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 100px;
  right: 30px;
  z-index: 100;
}

</style>



        <!-- Back to Top -->
        <a href="#" class="btn btn-primary btn-lg-square rounded-circle back-to-top"><i class="fa fa-arrow-up"></i></a>   

        
        <!-- JavaScript Libraries -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
        <script src="<?php echo"$d[alamat_website]/$f[folder]/"?>lib/wow/wow.min.js"></script>
        <script src="<?php echo"$d[alamat_website]/$f[folder]/"?>lib/easing/easing.min.js"></script>
        <script src="<?php echo"$d[alamat_website]/$f[folder]/"?>lib/waypoints/waypoints.min.js"></script>
        <script src="<?php echo"$d[alamat_website]/$f[folder]/"?>lib/counterup/counterup.min.js"></script>
        <script src="<?php echo"$d[alamat_website]/$f[folder]/"?>lib/lightbox/js/lightbox.min.js"></script>
        <script src="<?php echo"$d[alamat_website]/$f[folder]/"?>lib/owlcarousel/owl.carousel.min.js"></script>
        

        <!-- Template Javascript -->
        <script src="<?php echo"$d[alamat_website]/$f[folder]/"?>js/main.js"></script>




           
    </body>

</html>