<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pena Ilmu - Solusi Praktis Dokumen & Pengetahuan</title>
    <!-- Tailwind CSS untuk presisi layout -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- TAMBAHKAN SCRIPT INI DI BAWAHNYA -->
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
    <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=400;500;600;700&display=swap" rel="stylesheet">
    <link href="<?= base_url('asset/style.css')?>" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        body { font-family: 'Inter', sans-serif; }
    </style>
    <?= $this->renderSection('css'); ?>
</head>
<body class="bg-[#f0f4f8] text-gray-800">

    <!-- 1. HEADER / NAVBAR -->

 <header class="bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm">
        <div class="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
            <!-- Logo -->
            <div class="flex items-center gap-2">
                <div class="text-[#0284c7] text-2xl"><img src="<?= base_url('asset/image/logo.png')?>" width="50px" alt="Logo"></div>
                <span class="text-xl font-bold text-[#006699] tracking-wider">PENA ILMU</span>
            </div>
            <!-- Menu Navigasi -->
             <?php $current = uri_string(); ?>
            <nav class="hidden md:flex items-center gap-1 text-xs font-semibold text-gray-600">
                <a href="<?= base_url() ?>"  
                     class="<?= ($current == '') 
                    ? 'bg-[#0099b8] text-white px-4 py-2 rounded font-bold'
                    : 'px-3 py-2 hover:text-[#0099b8] transition' ?>">BERANDA
                </a>

                <a href="<?= base_url('dokumenfile?type=word') ?>" 
                    class="<?= str_contains($current,'dokumenfile')
                    ? 'bg-[#0099b8] text-white px-4 py-2 rounded font-bold'
                    : 'px-3 py-2 hover:text-[#0099b8] transition' ?>">FORMAT DOKUMEN
                </a>
                
                <a href="<?= base_url('tutorial?mode=tutorial')?>" 
                     class="<?= str_contains($current,'tutorial')
                    ? 'bg-[#0099b8] text-white px-4 py-2 rounded font-bold'
                    : 'px-3 py-2 hover:text-[#0099b8] transition' ?>">PANDUAN & TUTORIAL
                </a>
                <a href="<?= base_url('kontak')?>" 
                    class="<?= str_contains($current,'kontak')
                    ? 'bg-[#0099b8] text-white px-4 py-2 rounded font-bold'
                    : 'px-3 py-2 hover:text-[#0099b8] transition' ?>">REQUEST & KONTAK</a>
            </nav>
        </div>
    </header>


<!-- 2. HERO BANNER SECTION -->

<!-- 3. KONTEN UTAMA & SIDEBAR -->
<?= $this->renderSection('conten'); ?>

<!-- 4. FOOTER -->
<footer class="bg-[#005f73] text-white/90 text-xs mt-12 border-t border-teal-700">
    <div class="max-w-7xl mx-auto px-4 py-4 flex flex-col sm:flex-row justify-between items-center gap-4">
        <!-- Navigasi Kiri -->
        <div class="flex items-center gap-4 text-[11px] font-medium">
            <a href="<?= base_url('about')?>" class="hover:underline">Tentang Pena Ilmu</a>
            <a href="<?= base_url('kebijakan')?>" class="hover:underline">Kebijakan Privasi</a>
            <a href="<?= base_url('profil')?>" class="hover:underline">Profil Pembuat</a>
        </div>
        <!-- Hak Cipta Kanan -->
        <div class="text-[11px] text-white/80">
            © 2026 PENA ILMU - Pengetahuan Untuk Semua
        </div>
    </div>
</footer>

    <?= $this->renderSection('myscript'); ?>

</body>
</html>