<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5.0, user-scalable=yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>IRBS - Selamat Datang di SMP IT Insan Robbani</title>
    <link rel="shorcut icon" href="<?php echo base_url().'theme/images/icon.png'?>">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="<?php echo base_url().'theme/css/bootstrap.min.css'?>">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Lora:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Exo+2:wght@400;600;700&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="<?php echo base_url().'theme/css/font-awesome.min.css'?>">
    <!-- Simple Line Font -->
    <link rel="stylesheet" href="<?php echo base_url().'theme/css/simple-line-icons.css'?>">
    <!-- Slider / Carousel -->
    <link rel="stylesheet" href="<?php echo base_url().'theme/css/slick.css'?>">
    <link rel="stylesheet" href="<?php echo base_url().'theme/css/slick-theme.css'?>">
    <link rel="stylesheet" href="<?php echo base_url().'theme/css/owl.carousel.min.css'?>">
    <!-- Main CSS -->
    <link href="<?php echo base_url().'theme/css/style.css'?>" rel="stylesheet">
    <style>
    /* Slider home: teks kontras, elegan & futuristik */
    .slider_img .carousel-caption .slider_title {
       
        padding: 1.5rem 2rem;
        border-radius: 12px;
        border: 1px solid rgba(255, 215, 0, 0.25);
        box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06) inset;
        max-width: 90%;
        margin: 0 auto;
    }
    .slider_img .carousel-caption .slider_title h1 {
        font-family: 'Cinzel Decorative', serif;
        font-weight: 700;
        font-size: 1.5rem;
        line-height: 1.3;
        color: #ffffff;
        text-shadow: 0 2px 4px rgba(107, 45, 60, 0.6), 0 4px 12px rgba(107, 45, 60, 0.45), 0 6px 20px rgba(107, 45, 60, 0.35);
        letter-spacing: 0.04em;
    }
    .slider_img .carousel-caption .slider_title h1.slider-title-oneline {
        white-space: nowrap;
    }
    @media (max-width: 480px) {
        .slider_img .carousel-caption .slider_title h1.slider-title-oneline {
            white-space: normal;
            font-size: 1.35rem;
        }
    }
    .slider_img .carousel-caption .slider_title h4 {
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        font-size: 0.9rem;
        line-height: 1.55;
        color: #f8f8ff;
        text-shadow: 0 1px 3px rgba(107, 45, 60, 0.5), 0 2px 8px rgba(107, 45, 60, 0.4), 0 4px 16px rgba(107, 45, 60, 0.25);
        letter-spacing: 0.02em;
    }
    @media (min-width: 576px) {
        .slider_img .carousel-caption .slider_title h1 { font-size: 1.75rem; }
        .slider_img .carousel-caption .slider_title h4 { font-size: 0.95rem; }
    }
    @media (min-width: 768px) {
        .slider_img .carousel-caption .slider_title h1 { font-size: 1.9rem; }
        .slider_img .carousel-caption .slider_title h4 { font-size: 1rem; }
    }
    @media (min-width: 992px) {
        .slider_img .carousel-caption .slider_title h1 { font-size: 2.1rem; }
        .slider_img .carousel-caption .slider_title h4 { font-size: 1.05rem; }
    }
    .slider_img .carousel-caption .slider_title .slider-btn .btn-default {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.95) 0%, rgba(255, 200, 0, 0.9) 100%);
        color: #2d1810;
        border: 1px solid rgba(255,255,255,0.4);
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(255,255,255,0.3);
        box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    }
    .slider_img .carousel-caption .slider_title .slider-btn .btn-default:hover {
        background: linear-gradient(135deg, #fff 0%, #FFD700 100%);
        color: #2d1810;
    }

    /* Visi Misi: futuristik, menyala, rata kanan-kiri, tidak melewati batas */
    .visi-misi-section .container { max-width: 100%; overflow: hidden; }
    .visi-misi-wrap {
        max-width: 100%;
        padding: 2rem 1.75rem;
        background: linear-gradient(145deg, rgba(139, 64, 73, 0.12) 0%, rgba(107, 45, 60, 0.18) 50%, rgba(139, 64, 73, 0.12) 100%);
        border: 1px solid rgba(255, 215, 0, 0.4);
        border-radius: 16px;
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.15), 0 0 60px rgba(255, 215, 0, 0.08),
                    inset 0 0 40px rgba(255, 215, 0, 0.04);
        position: relative;
        overflow: hidden;
    }
    .visi-misi-wrap::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        border-radius: 16px;
        padding: 1px;
        background: linear-gradient(135deg, rgba(255,215,0,0.5), transparent 40%, transparent 60%, rgba(255,215,0,0.3));
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }
    .visi-misi-title {
        font-family: 'Exo 2', sans-serif;
        font-weight: 700;
        text-align: center;
        color: #2d1810;
        text-shadow: 0 0 20px rgba(255, 215, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.2);
        margin-bottom: 1.5rem;
        font-size: 1.75rem;
    }
    .visi-misi-content {
        max-width: 100%;
        text-align: justify;
    }
    .visi-misi-content p,
    .visi-misi-content li {
        text-align: justify;
        text-justify: inter-word;
    }
    .visi-misi-label {
        font-family: 'Exo 2', sans-serif;
        font-weight: 700;
        color: #6B2D3C;
        text-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
        margin: 1rem 0 0.4rem 0;
    }
    .visi-misi-text,
    .visi-misi-list {
        color:rgb(236, 240, 235);
        line-height: 1.7;
        margin: 0 0 0.5rem 0;
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.15);
    }
    .visi-misi-list {
        list-style: none;
        padding-left: 0;
    }
    .visi-misi-list li {
        position: relative;
        padding-left: 1.25rem;
        margin-bottom: 0.5rem;
    }
    .visi-misi-list li::before {
        content: '▸';
        position: absolute;
        left: 0;
        color: rgba(255, 215, 0, 0.9);
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    }
    @media (min-width: 768px) {
        .visi-misi-title { font-size: 2rem; }
    }
    </style>
    <?php
        function limit_words($string, $word_limit){
            $words = explode(" ",$string);
            return implode(" ",array_splice($words,0,$word_limit));
        }
    ?>
</head>

<body>
    <!--============================= HEADER =============================-->
    <div class="header-topbar">
        <div class="container">
            <div class="row">
                <div class="col-xs-6 col-sm-8 col-md-9">
                    <div class="header-top_address">
                        <div class="header-top_list">
                            <span class="icon-phone"></span>0821-8565-1346
                        </div>
                        <div class="header-top_list">
                            <span class="icon-envelope-open"></span>khususirbs@gmail.com
                        </div>
                        <div class="header-top_list">
                            <span class="icon-location-pin"></span>Kotabumi, Lampung Utara
                        </div> 
                        <div class="header-top_list">
                        <div class="header-top_list-icon">
                                <span class="icon-instagram"><a href="https://www.instagram.com/insanrobbaniboardingschool_/" target="_blank"><i class="fa fa-instagram fa-ig" aria-hidden="true"></i></a></span>
                                <span class="icon-whatsapp"><a href="https://api.whatsapp.com/send/?phone=%2B6282185651346&text&type=phone_number&app_absent=0" target="_blank"><i class="fa fa-whatsapp fa-wa" aria-hidden="true"></i></a></span>
                            </div>
                        </div>
                    </div>
                    <div class="header-top_login2">
                        <a href="<?php echo site_url('contact');?>">Hubungi Kami</a>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3">
                    <div class="header-top_login mr-sm-3">
                        <a href="<?php echo site_url('contact');?>">Hubungi Kami</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div data-toggle="affix">
        <div class="container nav-menu2">
            <div class="row">
                <div class="col-md-12">
                    <nav class="navbar navbar2 navbar-toggleable-md navbar-light bg-faded">
                        <button class="navbar-toggler navbar-toggler2 navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
                            <span class="icon-menu"></span>
                        </button>
                        <a href="<?php echo site_url('');?>" class="navbar-brand nav-brand2"><img class="img img-responsive" width="200px;" src="<?php echo base_url().'theme/images/logo-dark.png'?>"></a>
                        <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo site_url('');?>">Beranda</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo site_url('about');?>">Tentang</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo site_url('guru');?>">Guru</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo site_url('siswa');?>">Siswa</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo site_url('pengumuman');?>">Pengumuman</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="https://forms.gle/2WwkAaY3YVDgegGa8" target="_blank">SPMB</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo site_url('galeri');?>">Galeri</a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link" href="<?php echo site_url('contact');?>">Kontak</a>
                                </li>
                             </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
      </div>
<section>
    <div class="slider_img layout_two">
        <div id="carousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carousel" data-slide-to="0" class="active"></li>
                <li data-target="#carousel" data-slide-to="1"></li>
                <li data-target="#carousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <img class="d-block" src="<?php echo base_url().'theme/images/slider.jpg'?>" alt="First slide">
                    <div class="carousel-caption d-md-block">
                        <div class="slider_title">
                            <h1>Kenapa harus SMPIT Insan Robbani Boarding School?</h1>
                            <h4>Karena guru dengan latar belakang pendidikan islami, lingkungan nyaman dan fasilitas yang mendukung, mencetak generasi yang Qur'ani, kurikulum pendidikan perpaduan umum dan islami, dan pembekalan agama teorikal & pratikal.</h4>
                            <div class="slider-btn">
                                <a href="<?php echo site_url('about');?>" class="btn btn-default">Learn more</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block" src="<?php echo base_url().'theme/images/slider-2.jpg'?>" alt="Second slide">
                    <div class="carousel-caption d-md-block">
                        <div class="slider_title">
                            <h1>Hangat dan Edukatif untuk Mewujudkan Unggulan</h1>
                            <h4>Sosok pendidik inspiratif yang membimbing dengan ilmu, keteladanan dan pendidik amanah yang membentuk generasi robbani</h4>
                            <div class="slider-btn">
                                <a href="<?php echo site_url('guru');?>" class="btn btn-default">Learn more</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block" src="<?php echo base_url().'theme/images/slider-3.jpg'?>" alt="Third slide">
                    <div class="carousel-caption d-md-block">
                        <div class="slider_title">
                            <h1 class="slider-title-oneline">Selamat Datang Pejuang Al-Qur'an</h1>
                            <h4>Menjaga anak di era modern yang penuh tantangan ini, memilih lingkungan pendidikan Islami sangatlah dibutuhkan. Karena lingkungan merupakan faktor penting dalam membentuk karakter, pola pikir, dan juga habbit seseorang.<br> Insan Rabbani Boarding School adalah tempat yang berbasis asrama dengan kurikulum Pesantren tanpa mengesampingkan pendidikan formal sehingga anak diharapkan tumbuh menjadi pribadi yang beriman, berilmu, & berakhlakul karimah.</h4>
                            <div class="slider-btn">
                                <a href="<?php echo site_url('galeri');?>" class="btn btn-default">Learn more</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
                <i class="icon-arrow-left fa-slider" aria-hidden="true"></i>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
                <i class="icon-arrow-right fa-slider" aria-hidden="true"></i>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</section>
<!--//END HEADER -->
<!--============================= ABOUT =============================-->
<section class="clearfix about about-style2 visi-misi-section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-10">
                <div class="visi-misi-wrap">
                    <h2 class="visi-misi-title">Visi & Misi<br>SMP IT Insan Robbani Boarding School</h2>
                    <div class="visi-misi-content">
                        <p class="visi-misi-label">Visi :</p>
                        <p class="visi-misi-text">Mewujudkan siswa yang beriman, berilmu, dan berakhlakul karimah.</p>
                        <p class="visi-misi-label">Misi :</p>
                        <ul class="visi-misi-list">
                            <li>Menyediakan pendidikan yang berkualitas dan sesuai dengan kebutuhan dunia kerja.</li>
                            <li>Menyediakan lingkungan pendidikan yang kondusif untuk pembentukan karakter yang baik.</li>
                            <li>Menyediakan guru yang berkualitas dan berpengalaman.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--//END ABOUT -->
<!--============================= OUR COURSES =============================-->

<!--//END OUR COURSES -->
<!--============================= EVENTS =============================-->
<section class="event">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="event-img2">
                <?php foreach ($pengumuman->result() as $row) :?>
                <div class="row">
                    <div class="col-sm-3"> <img src="<?php echo base_url().'theme/images/announcement-icon.png'?>" class="img-fluid" alt="event-img"></div><!-- // end .col-sm-3 -->
                    <div class="col-sm-9"> <h3><a href="<?php echo site_url('pengumuman');?>"><?php echo $row->pengumuman_judul;?></a></h3>
                      <span><?php echo $row->tanggal;?></span>
                      <p><?php echo limit_words($row->pengumuman_deskripsi,10).'...';?></p>

                    </div><!-- // end .col-sm-7 -->
                </div><!-- // end .row -->
                <?php endforeach;?>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="row">
                    <div class="col-md-12">
                      <?php foreach ($agenda->result() as $row):?>
                        <div class="event_date">
                            <div class="event-date-wrap">
                                <p><?php echo date("d", strtotime($row->agenda_tanggal));?></p>
                                <span><?php echo date("M. y", strtotime($row->agenda_tanggal));?></span>
                            </div>
                        </div>
                        <div class="date-description">
                            <h3><a href="<?php echo site_url('agenda');?>"><?php echo $row->agenda_nama;?></a></h3>
                            <p><?php echo limit_words($row->agenda_deskripsi,10).'...';?></p>
                            <hr class="event_line">
                        </div>
                        <?php endforeach;?>

                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
<!--//END EVENTS -->
<!--============================= DETAILED CHART =============================-->
<div class="detailed_chart">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-3 chart_bottom">
                <div class="chart-img">
                    <img src="<?php echo base_url().'theme/images/chart-icon_1.png'?>" class="img-fluid" alt="chart_icon">
                </div>
                <div class="chart-text">
                    <p><span class="counter"><?php echo $tot_guru;?></span> Guru
                    </p>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 chart_bottom chart_top">
                <div class="chart-img">
                    <img src="<?php echo base_url().'theme/images/chart-icon_2.png'?>" class="img-fluid" alt="chart_icon">
                </div>
                <div class="chart-text">
                    <p><span class="counter"><?php echo $tot_siswa;?></span> Siswa
                    </p>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 chart_top">
                <div class="chart-img">
                    <img src="<?php echo base_url().'theme/images/chart-icon_3.png'?>" class="img-fluid" alt="chart_icon">
                </div>
                <div class="chart-text">
                    <p><span class="counter"><?php echo $tot_files;?></span> Download
                    </p>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="chart-img">
                    <img src="<?php echo base_url().'theme/images/chart-icon_4.png'?>" class="img-fluid" alt="chart_icon">
                </div>
                <div class="chart-text">
                    <p><span class="counter"><?php echo $tot_agenda;?></span> Agenda</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--//END DETAILED CHART -->
<!--============================= FOOTER =============================-->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="foot-logo">
                    <a href="<?php echo site_url();?>">
                        <img src="<?php echo base_url().'theme/images/logo-white.png'?>" class="img-fluid" alt="footer_logo">
                    </a>
                    <p><?php echo date('Y');?> © copyright by SMP IT Insan Robbani Boarding School. <br>All rights reserved.</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="sitemap">
                        <h3>Menu Utama</h3>
                        <ul>
                            <li><a href="<?php echo site_url();?>">Beranda</a></li>
                            <li><a href="<?php echo site_url('about');?>">Tentang</a></li>
                            <li><a href="<?php echo site_url('galeri');?>">Galeri</a></li>
                            <li><a href="<?php echo site_url('contact');?>">Kontak</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3">
                  <div class="sitemap">
                      <h3>Akademik</h3>
                      <ul>
                          <li><a href="<?php echo site_url('guru');?>">Guru</a></li>
                          <li><a href="<?php echo site_url('siswa');?>">Siswa </a></li>
                          <li><a href="<?php echo site_url('pengumuman');?>">Pengumuman</a></li>
                      </ul>
                  </div>
                </div>
                <div class="col-md-3">
                    <div class="address">
                        <h3>Hubungi Kami</h3>
                        <p><span>Alamat: </span> Kotabumi, Lampung Utara</p>
                        <p>Email : khususirbs@gmail.com
                            <br> Phone : 0821-8565-1346</p>
                            <ul class="footer-social-icons">
                                <li><a href="https://www.instagram.com/insanrobbaniboardingschool_/" target="_blank"><i class="fa fa-instagram fa-ig" aria-hidden="true"></i></a></li>
                                <li><a href="https://api.whatsapp.com/send/?phone=%2B6282185651346&text&type=phone_number&app_absent=0" target="_blank"><i class="fa fa-whatsapp fa-wa" aria-hidden="true"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!--//END FOOTER -->
        <!-- jQuery, Bootstrap JS. -->
        <script src="<?php echo base_url().'theme/js/jquery.min.js'?>"></script>
        <script src="<?php echo base_url().'theme/js/tether.min.js'?>"></script>
        <script src="<?php echo base_url().'theme/js/bootstrap.min.js'?>"></script>
        <!-- Plugins -->
        <script src="<?php echo base_url().'theme/js/slick.min.js'?>"></script>
        <script src="<?php echo base_url().'theme/js/waypoints.min.js'?>"></script>
        <script src="<?php echo base_url().'theme/js/counterup.min.js'?>"></script>
        <script src="<?php echo base_url().'theme/js/owl.carousel.min.js'?>"></script>
        <script src="<?php echo base_url().'theme/js/validate.js'?>"></script>
        <script src="<?php echo base_url().'theme/js/tweetie.min.js'?>"></script>
        <!-- Subscribe -->
        <script src="<?php echo base_url().'theme/js/subscribe.js'?>"></script>
    <!-- Script JS -->
    <script src="<?php echo base_url().'theme/js/script.js'?>"></script>
  </body>

  </html>
