<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layanan Pengaduan & Aspirasi Online</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
            <style>
            body {
                background-color: #7b2cbf;
                background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255,255,255,0.07)" fill-opacity="1" d="M0,128L48,149.3C96,171,192,213,288,208C384,203,480,149,576,149.3C672,149,768,203,864,224C960,245,1056,235,1152,202.7C1248,171,1344,117,1392,90.7L1440,64L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>'), linear-gradient(135deg, #5a189a 0%, #9d4edd 100%);
                background-size: cover;
                background-attachment: fixed;
                min-height: 100vh;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                padding-bottom: 50px;
            }
            .header-title {
                background-color: white;
                border-radius: 15px;
                padding: 25px 20px;
                margin-top: 40px;
                margin-bottom: 25px;
                text-align: center;
                box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            }
            .form-card {
                border-radius: 20px;
                border: none;
                box-shadow: 0 15px 35px rgba(0,0,0,0.2);
            }
            .btn-outline-custom {
                border: 2px solid #333;
                color: #333;
                background: transparent;
                transition: all 0.3s ease;
            }
            .btn-outline-custom:hover {
                background: #333;
                color: white;
            }
            /* Mempertegas border pada field form, radio, dan checkbox */
            .form-control, .form-select {
                border: 1.5px solid #a3a3a3 !important;
            }
            .form-check-input {
                border: 1.5px solid #777 !important;
            }
            .form-check-input:checked {
                background-color: #333;
                border-color: #333 !important;
            }
        </style>
</head>
<body>

    <div class="container">
        <?= $this->renderSection('content') ?>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <?= $this->renderSection('scripts') ?>
</body>
</html>